亚洲精品卡一卡2卡3卡4卡,亚洲愉拍自拍另类,欧亚专线欧洲S码WMY不知所措

UI設(shè)計注冊--登錄全鏈路教程

時間：2020-12-07來源：lb577.com點擊量：次作者：Gella

時間：2020-12-07點擊量：次作者：Gella

　　根據(jù)我們這兩天的UI干貨次序，今天應(yīng)該說到注冊和登錄了! 無論是網(wǎng)頁設(shè)計師還是UI設(shè)計師，登陸和注冊頁面是設(shè)計中必然經(jīng)歷過的工作內(nèi)容。登陸界面的設(shè)計說難不難，說容易也不是那么輕松就可以做好的，要在安全和可用性之間找到登陸界面的平衡點，還是需要相當(dāng)?shù)慕?jīng)驗來支撐的。

　　注冊/登錄功能可看似簡單，實際上非?？剂吭O(shè)計師的能力，尤其是許多與實際場景交織的細(xì)節(jié)，是UI設(shè)計師常犯錯誤的地方。

　　本文將結(jié)合一些真實案例和個人項目的工作經(jīng)驗，對注冊/登錄功能做一些探討，希望對你有所啟發(fā)。

　　注冊/登錄是為建立賬戶而設(shè)定的功能。

　　產(chǎn)品在給用戶提供信息或服務(wù)時，會對每一個用戶進(jìn)行身份的識別，并分配到獨立賬戶中，形成類似身份證的ID，從而給予用戶不同的權(quán)限和權(quán)益。

　　而注冊/登錄功能就是幫助產(chǎn)品識別用戶身份，獲取基本信息的過程。如果沒有注冊/登錄功能，就沒有賬戶ID，用戶的數(shù)據(jù)就缺失有效的載體。

　　可以說，它是多數(shù)產(chǎn)品和用戶產(chǎn)生連接的第一步。

　　注冊/登錄功能還關(guān)系著活躍度和留存率，處理不好很可能會造成用戶的流失，給產(chǎn)品和業(yè)務(wù)帶來直接的影響。所以說，設(shè)計好一個注冊/登錄功能是非常有必要的事情。

　　注冊/登錄雖然是基礎(chǔ)功能，但需要考量的因素和細(xì)節(jié)非常多，可以說是產(chǎn)品功能里非常復(fù)雜的模塊之一。

　　那么，我們?nèi)绾稳ニ伎己驮O(shè)計一個完整的注冊登錄功能呢?我講從涉及到相關(guān)內(nèi)容歸類成五個要素，并進(jìn)行梳理和講解。

　　定位準(zhǔn)確

　　所有拋開產(chǎn)品去談注冊/登錄的行為都是耍流氓。

　　設(shè)計師要先從產(chǎn)品、業(yè)務(wù)和用戶的角度去分析和規(guī)劃注冊/登錄功能。不能簡單的認(rèn)為主流的就是對的，也不是選擇越多越好，更不能以視覺呈現(xiàn)來評定注冊/登錄的好與壞。

　　目前的注冊/登錄方式有十幾種，設(shè)計師要分析哪種方式更符合實際需要，這是我們在設(shè)計前要考慮清楚的事情。

　　舉幾個栗子。

　　比如金融類產(chǎn)品，多數(shù)優(yōu)先級是不使用第三方登錄，并且要求設(shè)置密碼;

　　比如是面向國外的產(chǎn)品，就一定要有郵箱注冊，這是國外用戶的習(xí)慣;

　　比如保密性較高的產(chǎn)品，需要以身份證或人臉/指紋識別作為登錄驗證的方式···

　　功能完整

　　在注冊/登錄的使用場景中，即使用戶按照設(shè)定的路徑去操作，依然會發(fā)生很多不確定的情況。這就要求設(shè)計師面對復(fù)雜多樣的情況，有個清晰全面的認(rèn)知。

　　我建議在設(shè)計前梳理出結(jié)構(gòu)框架和業(yè)務(wù)流程，將所涉及到的功能點、設(shè)計元素、交互邏輯和異常狀態(tài)等進(jìn)行匯總，制定出一份詳實的設(shè)計方案，確保不要遺漏和疏忽。

　　結(jié)構(gòu)框架

　　業(yè)務(wù)流程圖

　　操作順暢

　　在注冊/登錄操作中，設(shè)計師要考慮用戶的操作成本，盡量減少繁瑣的步驟，縮減操作流程(三步內(nèi)最佳)。這個過程需要完成交互原型的設(shè)計。

　　通過體驗原型的操作步驟和交互邏輯，弱化或剔除對影響效率的部分，如二次確認(rèn)密碼/完善資料等?；蛘咦層脩糇孕羞x擇(跳過)，切記不能讓用戶引發(fā)抵觸或反感的情緒。

　　比如Soda蘇打，這種嘗試去挑戰(zhàn)用戶耐心的注冊流程，是一種糟糕的體驗，而很多產(chǎn)品也常犯這類的錯誤。如果非要給用戶做標(biāo)簽進(jìn)行內(nèi)容匹配，其實將步驟刪減，。

　　表述精準(zhǔn)

　　注冊/登錄頁要遵循不要讓用戶思考的原則，在信息和問題的表述上要清晰明確，不要讓用戶去猜測你說的是什么意思，或者思考自己哪里出錯了，尤其在報錯反饋上。

　　好的表述，應(yīng)該是要在用戶操作前，知道它的使用方式;操作中，清楚自己的行為正確與否;操作后，收到直接準(zhǔn)確的提示或反饋。

　　比如在登錄時不提示用戶密碼的位數(shù)或組合樣式(數(shù)字/字母)，用戶很可能就會輸錯。

　　設(shè)計合理

　　目前的注冊/登錄設(shè)計趨勢是重體驗輕視覺。一是簡約風(fēng)的流行，二是擔(dān)心過度設(shè)計干擾用戶。但并不是說視覺可以隨意，至少要滿足基本的美感和規(guī)范。

　　下面歸類了六種主流的注冊/登錄頁風(fēng)格。這里不做講解，設(shè)計師可根據(jù)產(chǎn)品要求酌情選擇。

　　在保證視覺輸出沒問題的基礎(chǔ)上，設(shè)計師需要把更多精力放在體驗的合理性上。

　　比如不同機(jī)型適配問題、輸入框一鍵清除、手機(jī)號碼334格式、按鈕的置灰和高亮、大小寫提示、明文/暗文···等等諸多設(shè)計細(xì)節(jié)，都需要設(shè)計師結(jié)合產(chǎn)品和用戶進(jìn)行選擇和實現(xiàn)。

　　綜上五點所述，可以看出設(shè)計注冊/登錄功能是非?？简炘O(shè)計師的功力。同時，設(shè)計師也可以通過對注冊/登錄功能的深刻理解，以體驗和設(shè)計的視角，提供給PM更優(yōu)的想法和方案，這也是體現(xiàn)設(shè)計師價值的地方。

　　多數(shù)設(shè)計師在完成注冊/登錄功能的設(shè)計后，往往只提供設(shè)計稿，或者注釋簡單的說明，這其實還是不夠完整的。

　　一個完整的設(shè)計稿輸出，我們需要圍繞以下幾個內(nèi)容塊進(jìn)行：

　　頁面布局：內(nèi)容區(qū)及操作欄的功能釋義，操作路徑和顯示樣式等。

　　手勢操作：操作功能或者界面用到的手勢和元素動效。

　　反饋效果：輸入或觸發(fā)后的顯示狀態(tài)，如彈層邏輯、錯誤反饋、異常狀態(tài)等。頁面跳轉(zhuǎn)：也就是頁面間的轉(zhuǎn)場邏輯和動效說明;元素定
義：關(guān)鍵內(nèi)容的規(guī)則說明，如字段規(guī)則、彈層樣式等;

　　注冊/登錄設(shè)計輸出內(nèi)容要圍繞以上要求進(jìn)行設(shè)計說明。

　　下面我做一個框架：

　　功能流程

　　結(jié)構(gòu)框架圖和業(yè)務(wù)流程圖，前面已經(jīng)提過，略。

　　高保真原型視覺設(shè)計稿—提供所有命名清晰的設(shè)計頁面，進(jìn)行標(biāo)注。建議使用藍(lán)湖。

　　高保真原型演示—生成可操作的原型預(yù)覽，建議使用摹客等在線交互平臺。

　　全局說明頁面交互說明—將觸發(fā)條件，交互效果、使用場景等內(nèi)容進(jìn)行說明。

　　彈層/鍵盤說明—對模態(tài)/非模態(tài)彈層、鍵盤交互的觸發(fā)條件，交互效果、使用場景等內(nèi)容進(jìn)行說明。