2012-5-6 藍(lán)藍(lán)設(shè)計(jì)的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( www.sdgs6788.com )是一家專(zhuān)注而深入的設(shè)計(jì)機(jī)構(gòu) ，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
來(lái)源：http://startwmlife.com/20-video-player-interface-to-appreciate-and-comment/
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
注冊(cè)&登錄是一個(gè)網(wǎng)站的門(mén)戶(hù)，它的設(shè)計(jì)姿態(tài)就是對(duì)待客人的態(tài)度。雖然用戶(hù)可能每次都只花極少的時(shí)間在注冊(cè)&登錄互 動(dòng)，但是這個(gè)“瞬間”卻舉足輕重，用戶(hù)與注冊(cè)&登錄之間的交互關(guān)系承上啟下的一個(gè)節(jié)點(diǎn)。注冊(cè)&登錄所有的細(xì)節(jié)影響了能否完成產(chǎn)品戰(zhàn)略定位 所設(shè)定的最基本任務(wù)去吸納其所希望的用戶(hù)的使命?；诤芏嘟换ピO(shè)計(jì)前輩的研究，作了一些細(xì)節(jié)中的細(xì)節(jié)分析。感謝身邊幫助我的朋友們。
1、注冊(cè)流程剖析對(duì)比：
1.1 、注冊(cè)和登陸用戶(hù)體驗(yàn)偏重：
：確保注冊(cè)信息安全（長(zhǎng)遠(yuǎn)）
：用戶(hù)注冊(cè)過(guò)程簡(jiǎn)單迅速（即時(shí)）
1.2、注冊(cè)流程剖析對(duì)比
① 財(cái)付通： 選擇注冊(cè)方式 > 填寫(xiě)賬戶(hù)詳細(xì)資料 > 郵箱驗(yàn)證 > 注冊(cè)完成（可以使用）
財(cái)付通背靠QQ這種超級(jí)龐大的用戶(hù)群體，對(duì)超大信息流量的處理技術(shù)經(jīng)驗(yàn)豐富，很自信不擔(dān)心用戶(hù)注冊(cè)過(guò)程不順暢或者失敗的情況。對(duì)它來(lái)說(shuō)迅速搶占海量用戶(hù)才是首位，將注冊(cè)過(guò)程集中在一個(gè)頁(yè)面完成，效率最高。
② 百付寶： 填寫(xiě)基本注冊(cè)信息 > 注冊(cè)完成（不可使用） > 郵箱驗(yàn)證 > 填寫(xiě)賬戶(hù)詳細(xì)資料（關(guān)聯(lián)銀行卡） > 可以使用
百付寶只需要填寫(xiě)用戶(hù)名、密碼、確認(rèn)密碼、郵箱、驗(yàn)證碼即可注冊(cè)賬戶(hù)，但并不能立刻使用支付，需要一系列驗(yàn)證和賬戶(hù)綁定才能真正 使用其支付功能。是產(chǎn)品剛投入市場(chǎng)大量新用戶(hù)注冊(cè)情況下分散流量的暫時(shí)性策略，減少用戶(hù)注冊(cè)過(guò)程不順暢或者失敗的情況。但對(duì)用戶(hù)的使用過(guò)程來(lái)說(shuō)幾重不同分 區(qū)的操作略顯繁雜。
③支付寶： 填寫(xiě)基本注冊(cè)信息 > 手機(jī)驗(yàn)證+郵箱驗(yàn)證 > 填寫(xiě)賬戶(hù)詳細(xì)資料 > 關(guān)聯(lián)銀行卡 > 注冊(cè)完成（可以使用）
支付寶的流程安全關(guān)卡特別嚴(yán)謹(jǐn)，因?yàn)樗脩?hù)非常龐大的用戶(hù)群體，可以將吸引用戶(hù)的所有精力投入到產(chǎn)品去。體驗(yàn)支付寶很自信的態(tài)度著力于用戶(hù)長(zhǎng)遠(yuǎn)的信息安全體驗(yàn)。
④Tumblr: 填寫(xiě):郵箱、密碼、域名 > 驗(yàn)證碼、確認(rèn)密碼 > 郵箱驗(yàn)證 > 注冊(cè)完成（可以使用）
Tumblr的輕博客定位本身就較為垂直，希望注冊(cè)的用戶(hù)是真的希望以后更多和更持久地使用，所以它的注冊(cè)流程的特點(diǎn)在確認(rèn)密碼與驗(yàn)證碼一起放在第二個(gè)注冊(cè)頁(yè)面，讓用戶(hù)緩一會(huì)再確認(rèn)密碼，將賬戶(hù)密碼記得印象更深。
⑤ 需要邀請(qǐng)碼的： 填寫(xiě)帳號(hào)、郵箱、個(gè)人信息 > 等待邀請(qǐng)碼 > 驗(yàn)證邀請(qǐng)碼 > 注冊(cè)完成
需要邀請(qǐng)碼的很多都是初期時(shí)候內(nèi)測(cè)的網(wǎng)站如前一段時(shí)間的樂(lè)活網(wǎng)；還有就是很垂直的社區(qū)網(wǎng)站，如Pinterest、雪球等，他們需要通過(guò)邀請(qǐng)碼篩選用戶(hù)群體，確保用戶(hù)類(lèi)型符合預(yù)期。
⑥使用SNS帳號(hào)注冊(cè)： 選擇SNS門(mén)戶(hù) > SNS帳號(hào)登錄 > 確認(rèn)連接 > 注冊(cè)完成
使用SNS帳號(hào)注冊(cè)可以迅速引導(dǎo)大量SNS用戶(hù)來(lái)注冊(cè)，在產(chǎn)品初期迅速占領(lǐng)市場(chǎng)的情況效果會(huì)顯著，但是對(duì)長(zhǎng)遠(yuǎn)來(lái)說(shuō)不利于培養(yǎng)自己獨(dú)有的用戶(hù)群體。
⑦ 新浪微博/迅雷網(wǎng)絡(luò)/ 華為網(wǎng)盤(pán) ： 填寫(xiě)基本注冊(cè)信息 ( 信息要求不同) > 注冊(cè)完成 > （郵箱驗(yàn)證）
沒(méi)有特殊要求的話(huà)最普遍的注冊(cè)流程都是直接填寫(xiě)基本信息和郵箱確認(rèn)就注冊(cè)完成，一氣呵成，流暢自信。它很可能本身就有海量用戶(hù)。
總結(jié)： 交互流程關(guān)聯(lián)的因素是多方面的，注冊(cè)&登錄需要根據(jù)自身和所處環(huán)境量身定做，適時(shí)調(diào)整。
2、注冊(cè)&登錄表單的整體框架分析：
2.1、注冊(cè)&登錄表單區(qū)域分析：
注冊(cè)表單包含7各部分：
①視覺(jué)聚焦。引導(dǎo)用戶(hù)填信息。
②標(biāo)簽。輸入域應(yīng)填何種信息。
③輸入提示。提示輸入域信息如何填。
④輸入域。包括文本輸入框、密碼輸入框、多選框、下拉列表、單選框和滑塊等。
⑤操作區(qū)。包括鏈接、按鈕、切換驗(yàn)證碼、展開(kāi)提示或協(xié)議。
⑥驗(yàn)證。所輸信息可用性和給用戶(hù)的判斷和建議反饋。
⑦流程指示。讓用戶(hù)知道交互預(yù)期。
登陸框的分區(qū)差不多,只是一般流程只需一步,就沒(méi)有”⑦流程指示”。
2.2、視覺(jué)界面：
2.2.1、視覺(jué)聚焦導(dǎo)視層級(jí)關(guān)系：
一級(jí)為必選項(xiàng)，蛋是要注意適應(yīng)瀏覽器，可能有些瀏覽器本身可實(shí)現(xiàn)，否則需要CSS；二級(jí)為可選項(xiàng)，當(dāng)文字提示內(nèi)容比較多的時(shí)候使用可以明顯聚合用戶(hù)視覺(jué)焦點(diǎn)，更加整體的體驗(yàn)。
2.2.2、引導(dǎo)性視覺(jué)凸顯：
利用視覺(jué)手段凸顯某部分，需要吸引用戶(hù)區(qū)注意，引導(dǎo)和鼓勵(lì)用戶(hù)做某些事：
知乎的申請(qǐng)注冊(cè)通道入口按鈕區(qū)域做得特別大，去吸引新用戶(hù)注冊(cè)。但是色彩又調(diào)得跟周?chē)h(huán)境恰到好處，視覺(jué)上并沒(méi)有為突出按鈕而太干擾整體登錄框視覺(jué)。
2.2.3、造型語(yǔ)義：
除了操作交互外，有一點(diǎn)不應(yīng)該忽略的是：情感交互 。
“設(shè)計(jì)”的獨(dú)有性質(zhì)是通過(guò)“造型語(yǔ)義”的手段解決某些邏輯操作解決不了的問(wèn)題。
例如新浪郵箱注冊(cè)表單右上角吉祥物小浪大眼睛前豎起一個(gè)手指，像是在說(shuō)：“噓…注意資料安全哦！”
登錄框嵌在一個(gè)圍脖上，寓意“微博”，帶來(lái)一絲絲溫馨的感覺(jué)。
2.3、反應(yīng)動(dòng)作方式分析：
2.3.1、出錯(cuò)或者確認(rèn)提示方式:
2.3.2、提示信息區(qū)位:
①就近原則
②某一位置集中顯示
2.3.3、提示信息的干擾
提示信息太多時(shí)候，用戶(hù)焦慮的可能性增大（判斷輸錯(cuò)和只是隨意點(diǎn)擊）
建議的調(diào)整的三個(gè)方面：
①提示信息量
②提示視覺(jué)形式
③出現(xiàn)時(shí)機(jī)
2.3.4、提交返回有誤項(xiàng)：
①點(diǎn)擊提交之后焦點(diǎn)自動(dòng)返回有誤的項(xiàng)
②不直接清除該項(xiàng)
③直返回有誤項(xiàng)字符右側(cè)右側(cè)
④直到全部項(xiàng)填寫(xiě)正確后才允許提交
2.3.5、進(jìn)程中較慢的狀況：
一、用戶(hù)能夠得到機(jī)器仍在運(yùn)作的反饋信息
①機(jī)器是在運(yùn)作還是崩潰，給用戶(hù)明確的答案
②讓讓用戶(hù)知道自己所填的注冊(cè)，確認(rèn)自己已填
二、鎖用戶(hù)不可操作和可操作的部分
①鎖定注冊(cè)信息內(nèi)所有操作，以免用戶(hù)再修改提交，攪渾究竟注冊(cè)的是哪套信息
②上傳較久而沒(méi)有進(jìn)展的時(shí)候能夠返回 （填一次挺麻煩，最好能夠最大限度保留所填內(nèi)容）
3、注冊(cè)表單的分析：
3.1、注冊(cè)基本信息頁(yè)整體概況：
3.1.1、注冊(cè)基本內(nèi)容:
（必備）
①郵箱或其它聯(lián)系方式
②密碼
③確認(rèn)密碼
④驗(yàn)證碼
⑤使用協(xié)議
（可選）
⑥昵稱(chēng)
⑦已注冊(cè)的登錄入口
3.1.2、選“填”內(nèi)容
①手機(jī)號(hào)碼
②備用郵箱
③語(yǔ)音驗(yàn)證碼提示
3.1.3、安全內(nèi)容
（必備）
①密碼保護(hù)問(wèn)題及答案
（可選）
②真實(shí)姓名
③證件號(hào)碼
④手機(jī)校驗(yàn)碼
3.2、提示語(yǔ)句：
一句話(huà)中可能包括的五個(gè)部分：
①初始提示
②判斷輸入對(duì)錯(cuò)
③錯(cuò)誤原因
④更輸入建議
⑤更多說(shuō)明內(nèi)容（安全技巧）
3.3、密碼部分：
3.3.1、密碼基本安全措施：
①絕大多數(shù)密碼輸入都是暗碼“*”
②密規(guī)定密碼長(zhǎng)度范圍、輸入規(guī)范和安全度建議
③驗(yàn)證密碼強(qiáng)度
④大多設(shè)置密碼可粘貼、確認(rèn)密碼都不能復(fù)制和粘貼，登陸輸密碼有的可以黏貼（京東商城可以/淘寶不可以）
⑤網(wǎng)銀的輸入密碼時(shí)自動(dòng)掛起大寫(xiě)，并提示
⑥拒絕小鍵盤(pán)的輸入
3.3.2、密碼較高標(biāo)準(zhǔn)的安全措施：
注冊(cè)操作的安全交互 |
適用范圍 |
安全程度 |
|
①安裝安全插件 |
與金錢(qián)賬戶(hù)有關(guān) |
***** |
|
②郵箱驗(yàn)證 |
所有 |
*** |
|
③手機(jī)驗(yàn)證 |
重要帳戶(hù) |
***** |
|
④瀏覽器自帶截圖功能屏蔽 |
與金錢(qián)賬戶(hù)有關(guān) |
*** |
|
⑤換頁(yè)再輸確認(rèn)密碼 |
希望用戶(hù)持久使用（如垂直社區(qū)） |
加深用戶(hù)記憶 |
|
⑥密碼保護(hù)問(wèn)題 |
重要帳戶(hù)/深度用戶(hù) |
幫助找回密碼 |
|
3.3.3、輸入密碼用戶(hù)體驗(yàn)交互細(xì)節(jié)：
①在之前比較好的鐘輸入密碼的體驗(yàn)是：密碼輸入明碼顯示500ms后才以“*”掩蓋，讓用戶(hù)知道自己輸入是否有誤?，F(xiàn)在熟悉PC鍵盤(pán)輸入的用戶(hù)越來(lái)越 多，接近飽和。而無(wú)線(xiàn)端的硬件條件的缺陷下用戶(hù)更容易輸錯(cuò)，所以現(xiàn)在移動(dòng)端用這種延時(shí)掩蓋比較多，也許在未來(lái)的一段時(shí)間成熟后在移動(dòng)端也不在需要這種方 法。
②淘寶的注冊(cè)表單用瀏覽器自帶的截圖工具截圖后輸出的是被屏蔽的黑圖，放置用戶(hù)的個(gè)人資料通過(guò)截圖的方法被盜取?？梢詫?duì)比財(cái)付通與支付寶的表單，內(nèi)容基本差不多：（右邊是支付寶截屏效果）
3.4、驗(yàn)證碼
3.4.1、驗(yàn)證碼的種類(lèi)：
①字母/數(shù)字/文字圖片形式（普遍）
②字母/數(shù)字音頻形式（主要盲人使用）
③簡(jiǎn)單算法圖片形式（較高安全標(biāo)準(zhǔn)）
④認(rèn)知型圖片形式（較高安全標(biāo)準(zhǔn)）
3.4.2、通常被要求輸入驗(yàn)證碼的情況：
①注冊(cè)時(shí)候。防止惡意注冊(cè)。
②第一次登錄輸入錯(cuò)誤后。防暴力破解。
③網(wǎng)絡(luò)風(fēng)險(xiǎn)高峰期，如黑客出沒(méi)高峰、密碼泄漏、內(nèi)部系統(tǒng)問(wèn)題等等。
3.4.3、驗(yàn)證碼圖片的視覺(jué)交互細(xì)節(jié)：
驗(yàn)證碼圖的大小并不會(huì)對(duì)破解率產(chǎn)生太大影響，但是對(duì)用戶(hù)的視覺(jué)來(lái)說(shuō)，稍大圖片增大用戶(hù)的識(shí)別效率。
3.5、注冊(cè)協(xié)議
協(xié)議的出現(xiàn)方式種類(lèi)：
①新窗口/標(biāo)簽頁(yè)打開(kāi)連接：
②浮窗的模式，默認(rèn)收起狀態(tài)：
③文本區(qū)直接顯示，不收起：
4、登錄表單的分析：
4.1、兩種登錄入口：
①鏈接到登陸頁(yè)面（大多數(shù)）
②直接登陸框（直接但占用寶貴空間）
4.2、登陸框的設(shè)計(jì)：
4.2.1、傳統(tǒng)版本登陸框：
從注冊(cè)的結(jié)構(gòu)延續(xù)下來(lái)的登陸框，所以框架結(jié)構(gòu)基本與注冊(cè)差不多，最后以登錄提交為最后目標(biāo)：
4.2.2、簡(jiǎn)約版本登陸框：
①用戶(hù)操作區(qū)域和導(dǎo)向明確，無(wú)用功能較少
②視覺(jué)的絕佳體驗(yàn)：優(yōu)雅大方，簡(jiǎn)潔流暢
③凸顯公司/產(chǎn)品視覺(jué)形象
4.3、對(duì)于登錄框中注冊(cè)通道的突出程度初探：
①現(xiàn)在大多登錄框的主線(xiàn)線(xiàn)任務(wù)是確保用戶(hù)登錄的注意集中，將注冊(cè)通道放在不搶奪眼球的地方，只是可以保證當(dāng)新來(lái)的用戶(hù)有需要的時(shí)候能夠找到。在這里，突出的是登錄。
②但是現(xiàn)在越來(lái)越多特別是社交類(lèi)網(wǎng)站對(duì)拓展用戶(hù)群有極大需求，在登錄框比較顯眼的位置放置注冊(cè)通道，引導(dǎo)和鼓勵(lì)用戶(hù)加入。
總結(jié)： 如何在兩者之中找到側(cè)重點(diǎn)和相對(duì)平衡狀態(tài)，需要將產(chǎn)品的定位和當(dāng)前所處的環(huán)境考慮進(jìn)去。而且需要隨時(shí)根據(jù)時(shí)勢(shì)和用戶(hù)群的反應(yīng)作出合適的調(diào)整，
4.4、SNS帳號(hào)聯(lián)合登錄
開(kāi)篇的時(shí)候討論過(guò)了，使用SNS帳號(hào)注冊(cè)可以迅速引導(dǎo)大量SNS用戶(hù)來(lái)注冊(cè)，在產(chǎn)品初期迅速占領(lǐng)市場(chǎng)的情況效果會(huì)顯著，但是對(duì)長(zhǎng)遠(yuǎn)來(lái)說(shuō)不利于培養(yǎng)自己獨(dú)有 的用戶(hù)群體。但是現(xiàn)在的互聯(lián)網(wǎng)搶占用戶(hù)市場(chǎng)競(jìng)爭(zhēng)激烈的情況下，目前大多的做法是維持聯(lián)合SNS門(mén)戶(hù)的數(shù)量在較少范圍，只可聯(lián)合一兩個(gè)公司戰(zhàn)略合作方的 SNS帳號(hào)。
目前觀(guān)察有兩種聯(lián)合登錄的流程：
①先注冊(cè)，后綁定SNS帳號(hào)（假聯(lián)登），才能使用SNS帳號(hào)聯(lián)合登錄。（大多數(shù)，包括迅雷）
②不用注冊(cè)，直接使用SNS帳號(hào)登錄 （盛大 airplay）
4.5、服務(wù)器崩潰的情況：
1、溫馨語(yǔ)提示（緩沖用戶(hù)焦急情緒）
2、登陸稍等的提示語(yǔ)（操作建議）
3、三種操作選擇：（操作反饋提示）
①返回登錄頁(yè)面等待
②再次提交
③退出登陸
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.sdgs6788.com