最新国产aⅴ精品无码,国产综合成人,亚洲精品国产中文色

UI設計注冊--登錄全鏈路教程

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

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

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

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

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

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

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

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

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

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

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

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

　　定位準確

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

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

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

　　舉幾個栗子。

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

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

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

　　功能完整

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

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

　　結(jié)構框架

　　業(yè)務流程圖

　　操作順暢

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

　　通過體驗原型的操作步驟和交互邏輯，弱化或剔除對影響效率的部分，如二次確認密碼/完善資料等。或者讓用戶自行選擇(跳過)，切記不能讓用戶引發(fā)抵觸或反感的情緒。

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

　　表述精準

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

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

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

　　設計合理

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

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

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

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

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

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

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

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

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

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

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

　　下面我做一個框架：

　　功能流程

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

　　高保真原型視覺設計稿—提供所有命名清晰的設計頁面，進行標注。建議使用藍湖。

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

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

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