@NeilYoung_ixd?：接觸交互設計時間不短了，一直沒有機會說說自己的方案設計的流程。當一個方案設計完成后，如果不細細打磨，難免有一些被忽略的地方。所以大家在設計時候，一定要打起十二分精神，盡量做到方案思路清晰，方案完善，這次借由“登錄頁面的優化設計項目”給大家分享一下設計流程的個人心得 ?>>>

背景概述

登錄頁面是移動端產品的常規頁面之一，相信大家并不陌生。這次迭代中，我們試圖將單點登錄這個功能應用在客戶端中。

方案流程

本次方案的總結從以下四個方面來闡述。這也是筆者方案設計的常規步驟。命名為梳理-分析-定義-驗證四步法。

流程梳理

這里的流程指的便是用戶在使用過程中完成登錄任務的主要流程。因為有單點登錄的存在，所以在流程中可以優先考慮這種最便捷的登錄方式。

設計分析

對于一個現有功能的優化，可以采用小范圍討論來找出用戶的場景和痛點。進而結合數據來完成方案設計的注意事項。

在上述分析總結中，有一點值得玩味。雖然數據表明用戶登出自己帳號的需求很小，但是大家依然希望有個記住帳號密碼功能。然而繼續詢問，用戶更多是希望卸載應用安裝后依然可以免登錄。其實當前應用登出帳號功能，更多是滿足換帳號兌換禮品或者換小號寫跟貼的需求。鑒于這種情況的考慮，并不需要當前應用“登出依然記住帳號密碼”功能。然而，我們可以采用iOS系統的鑰匙串功能來滿足卸載應用重裝免登錄的需求(因為涉及到個人隱私安全問題，最終還是建議不做)。可見在設計中，需求需要進一步驗證確認，而不是用戶說什么就去做什么，更多還是需要深入了解，看清需求真相。

方案定義

對于頁面信息布局的設計，一般會涉及到元素有哪些，優先級是怎么樣。依此來設計和輸出方案。

在設計時候，一直糾結于是否需要明確表達單點登錄中的帳號來源，因此采用了A，B方案設計。A方案特點是界面簡潔，理解成本低。B方案特點是完整描述了帳號來源，給予用戶信任感。

測試驗證

方案設計完畢后，為了驗證哪種方案更加符合用戶使用。因此進行了小范圍測試驗證。

從上圖可知大家對方案A,B各有傾向。并且在實際討論中，大家表達了各個方案的可取之處，因此又經過細細斟酌，并結合了可以料想到的各種特殊情況，輸出了如下方案。

在此方案得到大家的一致認可后，開始做一些交互細節。交互細節主要是從操作反饋整理，文案梳理，數據統計需求方面完善。

寫在最后

在工作中抽出時間總結經驗，是筆者一直想做，也是正在做的。只有這樣才能不斷激發新想法，推著自己往前走。更多關于交互設計流程的探討，可以加我個人微信xixuyoung，歡迎大家交流指正。

【超贊的取色工具大合集】

除了找現成的圖片來配色之外，你還可以試試「彩通配色」：
《大開眼界！那些巧用「彩通配色」的醒目設計》

取色工具多不勝數，不過Kuler應該還是口碑最好的幾個取色工具之一：
《VC教程！教你使用最受歡迎的配色小工具KULER》

當然，行走江湖怎么可以沒有備用方案！所以，這個時候不妨看看：
《碉堡！配色神器第二代！COLOR CUBE免費開放下載》

投稿者：@NeilYoung_ixd?（ME網易移動設計）
微信公眾號：ME網易移動設計

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量93萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：