資源描述：
《交互設(shè)計(jì)中的細(xì)節(jié)：注冊和登錄》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。
1、交互設(shè)計(jì)中的細(xì)節(jié)：注冊和登錄 注冊登錄的重要性不言自明，注冊&登錄是一個(gè)網(wǎng)站的門戶，它的設(shè)計(jì)姿態(tài)就是對待客人的態(tài)度。雖然用戶可能每次都只花極少的時(shí)間在注冊&登錄互動(dòng)，但是這個(gè)“瞬間”卻舉足輕重，用戶與注冊&登錄之間的交互關(guān)系承上啟下的一個(gè)節(jié)點(diǎn)。注冊&登錄所有的細(xì)節(jié)影響了能否完成產(chǎn)品戰(zhàn)略定位所設(shè)定的最基本任務(wù)去吸納其所希望的用戶的使命。基于很多交互設(shè)計(jì)前輩的研究，作了一些細(xì)節(jié)中的細(xì)節(jié)分析。分享給更多的朋友們。 1、注冊流程剖析對比： 1.1、注冊和登陸用戶體驗(yàn)偏重： ?。捍_保注冊信息安全(長遠(yuǎn)) ?。河脩糇赃^程簡單迅速(即時(shí)) 1.2、注冊流程剖
2、析對比 ?、儇?cái)付通：選擇注冊方式>填寫賬戶詳細(xì)資料>郵箱驗(yàn)證>注冊完成(可以使用) 財(cái)付通背靠QQ這種超級龐大的用戶群體，對超大信息流量的處理技術(shù)經(jīng)驗(yàn)豐富，很自信不擔(dān)心用戶注冊過程不順暢或者失敗的情況。對它來說迅速搶占海量用戶才是首位，將注冊過程集中在一個(gè)頁面完成，效率最高?！ 、诎俑秾殻禾顚懟咀孕畔?注冊完成(不可使用)>郵箱驗(yàn)證>填寫賬戶詳細(xì)資料(關(guān)聯(lián)銀行卡)>可以使用 百付寶只需要填寫用戶名、密碼、確認(rèn)密碼、郵箱、驗(yàn)證碼即可注冊賬戶，但并不能立刻使用支付，需要一系列驗(yàn)證和賬戶綁定才能真正使用其支付功能。是產(chǎn)品剛投入市場大量新用戶注冊情況下分
3、散流量的暫時(shí)性策略，減少用戶注冊過程不順暢或者失敗的情況。但對用戶的使用過程來說幾重不同分區(qū)的操作略顯繁雜?！ 、壑Ц秾殻禾顚懟咀孕畔?手機(jī)驗(yàn)證+郵箱驗(yàn)證>填寫賬戶詳細(xì)資料>關(guān)聯(lián)銀行卡>注冊完成(可以使用) 支付寶的流程安全關(guān)卡特別嚴(yán)謹(jǐn)，因?yàn)樗脩舴浅｝嫶蟮挠脩羧后w，可以將吸引用戶的所有精力投入到產(chǎn)品去。體驗(yàn)支付寶很自信的態(tài)度著力于用戶長遠(yuǎn)的信息安全體驗(yàn)。 ?、躎umblr:填寫:郵箱、密碼、域名>驗(yàn)證碼、確認(rèn)密碼>郵箱驗(yàn)證>注冊完成(可以使用) Tumblr的輕博客定位本身就較為垂直，希望注冊的用戶是真的希望以后更多和更持久地使用，所以它的注冊
4、流程的特點(diǎn)在確認(rèn)密碼與驗(yàn)證碼一起放在第二個(gè)注冊頁面，讓用戶緩一會再確認(rèn)密碼，將賬戶密碼記得印象更深?！ 、菪枰埓a的：填寫帳號、郵箱、個(gè)人信息>等待邀請碼>驗(yàn)證邀請碼>注冊完成 需要邀請碼的很多都是初期時(shí)候內(nèi)測的網(wǎng)站如前一段時(shí)間的樂活網(wǎng);還有就是很垂直的社區(qū)網(wǎng)站，如Pinterest、雪球等，他們需要通過邀請碼篩選用戶群體，確保用戶類型符合預(yù)期。 ?、奘褂肧NS帳號注冊：選擇SNS門戶>SNS帳號登錄>確認(rèn)連接>注冊完成 使用SNS帳號注冊可以迅速引導(dǎo)大量SNS用戶來注冊，在產(chǎn)品初期迅速占領(lǐng)市場的情況效果會顯著，但是對長遠(yuǎn)來說不利于培養(yǎng)自己獨(dú)有的用
5、戶群體?！ 、咝吕宋⒉?迅雷網(wǎng)絡(luò)/華為網(wǎng)盤：填寫基本注冊信息(信息要求不同)>注冊完成>(郵箱驗(yàn)證) 沒有特殊要求的話最普遍的注冊流程都是直接填寫基本信息和郵箱確認(rèn)就注冊完成，一氣呵成，流暢自信。它很可能本身就有海量用戶?！ 】偨Y(jié)：交互流程關(guān)聯(lián)的因素是多方面的，注冊&登錄需要根據(jù)自身和所處環(huán)境量身定做，適時(shí)調(diào)整。 2、注冊&登錄表單的整體框架分析： 2.1、注冊&登錄表單區(qū)域分析： 注冊表單包含7各部分： ①視覺聚焦。引導(dǎo)用戶填信息?！ 、跇?biāo)簽。輸入域應(yīng)填何種信息?！ 、圯斎胩崾?。提示輸入域信息如何填?！ 、茌斎胗颉０ㄎ谋据斎肟?、密碼輸入框、
6、多選框、下拉列表、單選框和滑塊等?！ 、莶僮鲄^(qū)。包括鏈接、按鈕、切換驗(yàn)證碼、展開提示或協(xié)議?！ 、掾?yàn)證。所輸信息可用性和給用戶的判斷和建議反饋?！ 、吡鞒讨甘?。讓用戶知道交互預(yù)期?！ 〉顷懣虻姆謪^(qū)差不多,只是一般流程只需一步,就沒有”⑦流程指示”?！ ?.2、視覺界面： 2.2.1、視覺聚焦導(dǎo)視層級關(guān)系： 一級為必選項(xiàng)，蛋是要注意適應(yīng)瀏覽器，可能有些瀏覽器本身可實(shí)現(xiàn)，否則需要CSS;二級為可選項(xiàng)，當(dāng)文字提示內(nèi)容比較多的時(shí)候使用可以明顯聚合用戶視覺焦點(diǎn)，更加整體的體驗(yàn)。 2.2.2、引導(dǎo)性視覺凸顯： 利用視覺手段凸顯某部分，需要吸引用戶區(qū)注意，引導(dǎo)
7、和鼓勵(lì)用戶做某些事： 知乎的申請注冊通道入口按鈕區(qū)域做得特別大，去吸引新用戶注冊。但是色彩又調(diào)得跟周圍環(huán)境恰到好處，視覺上并沒有為突出按鈕而太干擾整體登錄框視覺?！ ?.2.3、造型語義： 除了操作交互外，有一點(diǎn)不應(yīng)該忽略的是：情感交互。 “設(shè)計(jì)”的獨(dú)有性質(zhì)是通過“造型語義”的手段解決某些邏輯操作解決不了的問題?！ ±缧吕肃]箱注冊表單右上角吉祥物小浪大眼睛前豎起一個(gè)手指，像是在說：“噓…注意資料安全哦!” 登錄框嵌在一個(gè)圍脖上，寓意“微博”，帶來一絲絲溫馨的感覺。 2.3、反應(yīng)動(dòng)作方式分析： 2.3.1、出錯(cuò)或者確認(rèn)提示方式: 2.3.2
8、、提示信息區(qū)位: ?、倬徒瓌t ?、谀骋晃恢眉酗@示 2.3.3、提示信息的干
