從登陸和註冊頁面聊聊UX怎樣進行思考

工作幾年，開始遇到自己第一個瓶頸，好像工作狀態開始進入一種機械式的狀態，找出一種固定的思維模式，按照一種做事流程，然後混一混，日子好像就可以這麼過去了，工作好像也就可以交差了，可是內心卻瀰漫著一種非常不安的感覺，沒有一種剛入職場的那種踏實感。對的，相信自己的直覺，自己確實陷入了一種偷懶的境地，一種慣性的行為中，這樣的生活並沒有讓自己的實力真正的提升，所以內心感到了一種恐慌和焦慮，感覺越強烈就意味著自己思維越機械化。然而這並不是一件壞事，有人為了擺脫這種焦慮會選擇跳槽，新的環境會刺激自己去適應新的遊戲規則，同時也帶給自己一個新的看世界的角度，這種視角有可能相對變高或者變低，也有可能是同一水平的不同方向，但在你的世界裡，有了新鮮的血液，也是帶來相應或大或小的改變，這裡說的是改變，不一定是進步。而有的人還是在這樣的不安中繼續忍受與煎熬著，如果一直這樣下去，我相信就算再過幾年，頂著工作十年的經驗拿到的也只能是三年經驗的薪水，這將會帶來什麼樣的後果，估計芸芸大眾的網友們會比我更有資格來談論這個問題。

還有人則從現有的環境中主動出擊，通過看書、逛論壇、於同行進行交流，重新思考現有的工作，從思維模式，做事態度、方式等等方面出發，一點點琢磨與鑽研，一步步積累著自己，等待著蛻變的那一天，樓主欣賞這樣的人，也希望做這樣能從自身出發，不逃避，不躲不藏，帶著霸道的勇氣採用溫柔的態度靜靜地綻放的人。

所以今天說的重點不是登錄系統怎麼做，而想從登錄系統這項基本的工作上來說說作為一個交互設計師，應該提高自己思維的深度，反思自己工作的提高點在哪。

第一次做登錄系統的時候，腦袋中也只考慮這樣幾個事情，拋磚引玉，大夥也可以看看作為新手設計師的思維漏洞在哪：

一.功能點有哪幾個：註冊、登錄、找回密碼。

二.主題流程有哪些

於是腦袋中開始構思用戶操作的主要場景：首先用戶使用一個新的APP的時候絕大多數情況下是沒有賬號的，於是這個時候註冊系統會顯得很必要，也會是常使用的功能點之一。那麼接著分別考慮註冊和登陸的時候有哪些元素進行考慮。

註冊：賬號設定和密碼設定。賬號設定是考慮使用郵箱呢還是是在國內用戶習以為常的手機號+驗證碼的登錄方式。最後考慮再三使用手機號和密碼登錄，為什麼沒用驗證碼，自以為是每次收驗證碼需要的等對用戶來說是一件很不耐煩的事情，新階段市場上使用手機號加驗證碼的登錄方式多為買東西的平台，用戶的聯繫方式是非常重要的，而我們現在設計的APP是工具屬性的基礎上做社交平台，對手機號碼的需求沒有那麼強烈，如果我們使用手機號+自動保存密碼的方式會不會更好？用戶不需要消耗接二連三的等待時間也能保證用戶不需要一直記得密碼，如果忘記就使用找回密碼的途徑重設密碼。密碼的設定條件是至少為6位字元。因為是目的是將社交帶起來，所以在設置密碼過程中需要用戶填用戶名，性別，頭像上傳等因素，如果是第三方授權則將第三方平台的信息直接帶過來進行運用。

登錄：登錄界面主要有以下幾個因素，登錄賬號、登錄密碼、找回密碼、註冊，後來想到有沒有快速的登錄方式，比如說使用微博、QQ、微信等授權方式，再經過一段時間後加上了服務條款。

找回密碼：手機號填寫、接收驗證碼、設定再次發送驗證碼的時間，密碼重置的設定，確定密碼的設定。

以上就是樓主第一次設計登錄系統的方案，考慮事情並沒有很周到，做一個決定也並沒有足夠充分的理由去說服自己和別人，UI也丑到爆，勿噴，樓主已經在面壁思過。於是有了第二次的設計思路，在這裡樓主將詳細講講再次接觸到登錄系統時是怎樣考慮的，也對自己的思維做一次整理。

首先樓主做的是推翻自己之前的思路，重新開始思考。不是否認自己，不是覺得自己沒有價值，這樣的做法不是否認自己，而是給自己一個新的機會，不要因為之前的方案局限住。在這裡不得不說這一步的重要性，從情緒上安撫自己，有時候設計師在與PM、或者工程師進行溝通的時候，當別人給自己提意見的時候第一關設計師需要過的並不是思維這一關，而是情緒上的處理。每個人都想在別人面前都想展現自己的價值感，都希望得到別人的肯定，所以當別人提出一個對設計方案的改進之處時，很大可能是從他的角度上經過深思熟慮的，所以在這樣的情況下應該感謝他提出的意見，有可能他並沒有考慮到對其它方面的影響，但這是設計師需要權衡的事情，單對於別人提出意見這一事件來看，對方的出發點不是否定你的方案，更不是否定你自己，而是想讓項目更好，實現自己的價值，得到來自團隊的肯定。作為設計師，在第一步上，固化自己的思維，處理好自己抵觸的情緒是最基本的，保持開放的心態去別人以及自己對自己方案反思，而這一個過程也是給自己查漏補缺的過程。反而，我們需要堅持的一點是，相信自己可以做得更好！

一切從場景開始！

在這裡也許會有設計師有疑慮，場景的考慮不是由PM進行制定的嗎？這是個比較大的問題，不屬於本文重點，作為交互設計師，更深刻地理解場景，從場景中找到一些線索，像偵探一樣，一步步挖掘，對自己來說應該是利大於弊的（但是不能越俎代庖修改使用場景）。典型的場景就是：「大家在家下載了APP，周末邀一幫好友，帶著手機到球場上去打球，朋友拿著你的手機幫你拍攝進球視頻完成一項Challenge的挑戰，過關後你將精彩的鏡頭分享出去到微信等社交平台，這個時候需要用到登錄系統」。

根據這段場景可以分析出以下幾個要點：

1.典型的使用環境是球場，閑暇時間，整塊時間，沒有碎片化，不是在公交、走路的時候，所以交互上可以從容一些；

2.用戶是基於登錄之後可以干一些事情，所以這個時候越快速，越簡單越好；

3.因為是登錄有輸入需求，需要輸入賬號和密碼，所以雙手操作可能性比較大；

4.因為用戶男性居多，UI呈現上運動，略微剛硬一點是可取的；

5.分享平台考慮到國內外的情況，有可能是微信，有可能是facebook，如果想要做快捷登錄，對於兩個區域需要有習慣性上的區分。

這樣來分析的話，至少有兩個大的區域需要進行區分，國內和國外（本APP國外市場主要是美國市場）。

從國內的情況來進行重點分析吧。思路還是先傳統後創新，

登錄方式採用手機號+密碼設定的形式，理由如下：

1.現如今的賬號設置，一般是郵箱、手機號、用戶名三種形式。使用排除法，用戶名需要具有唯一性，也就意味著用戶需要記住一個比較特別或者自己較少用的用戶名，而在這樣的前提下，用戶是很容易忘記自己的賬戶的，不可取。郵箱比較可靠，但趨向於使用在web時代，對於現在的移動互聯網的趨勢來說，郵箱相對於手機來說還是略微麻煩一點，再者，郵箱的用途更傾向於閱覽長篇的內容，更方便於訂閱的一些場景，所以在理財或者財經、股票類的領域用的比較多。如果後期APP有需要可以作為附加信息進行一些內容的推送。所以當權衡各項條件之後，決定使用手機號作為賬號管理。

從以上分析可以看出，做一項小的決定可以採取這樣的方式：先羅列出已有的所有選項，然後逐條分析出利弊，分析的方向可以採取從小到大的範圍：分析事物有哪些屬性，哪些用途，使用的情景，以及宏觀的大環境。然後結合實際的需要一一比對，實際的需求也可以按照範圍從小到大的順序進行分析：現階段需要哪些元素，更安全穩定，哪些更高效。

2.為什麼使用密碼而不是使用動態驗證碼？在設計第一版的時候也有考慮過這個問題，可以作為一些參考，所以說一個人的努力不會完全沒有用，誰也不知道將來會發生生么事，未來的每一天都是由之前的時光一點點進行塑造的，就像搭一座橋，有的努力是橋架，有的是橋身，還有的是表面的雕塑裝飾，但總有一天會量變引起質變，成為一座讓自己昂首挺胸跨步而行的橋。回到主題，為什麼不是動態驗證碼？來鞏固一下我們的思維邏輯，思考面由事物屬性，用途，使用場景，大環境來看。動態驗證碼，不需要牢記，即時接收，不需要記憶，但是偶爾不成功，需要多次發送，時間成本略高，還有一點是企業需要為此付費，由以上屬性決定它常使用於外賣、購物、理財等需要支付的場景，需要保證賬號的安全，又需要確定用戶的聯繫方式。而密碼，需要用戶輸入，需要記憶，但一勞永逸，就算一段時間後需要重新登錄，我們也可以使用記住密碼的形式進行密碼保存，動態驗證碼卻沒有這樣的功能。接著根據實際情況進行權衡，現階段我們的產品是工具屬性基礎上進行社交需求，而且並沒有直接的IM功能，所以安全性上沒有達到嚴苛的程度，也許後期需要開發支付功能，到時候再進行手機號綁定也可以來得及，所以針對前期來說密碼就足夠。

註冊的流程採用手機接收動態驗證碼確定後再進行設置密碼，理由如下：

1.這裡的動態驗證碼是一次性的操作行為，對伺服器來說是為了確定用戶的存在，從用戶的角度來看，是給用戶一個及時的反饋，告訴用戶您手機號輸入我們已經收到，您確認一下就行。與用動態驗證碼進行登錄時兩件不同的事，不要混淆。

2.在接收到用戶驗證碼之後，進行設置密碼，密碼的設置，最常規的情況下就是兩次輸入，一次是正常輸入，另一次是確認密碼的輸入。樓主考慮到，絕大部分的情況下用戶是不再想額外進行操作的，所以只給用戶一次輸入的設置，但同時考慮到要保證用戶的輸入是正確的，於是在密碼後面默認設計一個打開的小眼睛，讓用戶可以在輸入的同時進行查看。(附上簡易的圖作為參考，為避免產生商業糾紛，除去了logo和UI，望見諒)

填寫資料

也許有的童鞋會說到這裡註冊流程就結束了吧，但別忘了，目的是做社交平台，那麼至少一個賬號能告訴用戶他是誰，對的，咱們還需要一個資料的填寫。

說到資料填寫，很多用戶就很頭疼了，覺得麻煩，並不是用戶沒考慮到後續的好處，而是在註冊之後用戶覺得已經做了很多事了，心裡最想做的事情是：快點結束吧！可是我們作為設計師，要達到產品的功能目的，這一步還是需要走的，那麼問題來了？怎樣以最小的代價讓用戶填寫資料呢？這個時候就需要結合整個APP的使用流程來看了，分為登錄前和登陸後去進行引導，雙管齊下。

登錄前開放主要的功能，不影響主功能的試用，不是「使用」！讓用戶可以體驗到主功能的強大，在需要想繼續使用的時候才讓用戶進行登錄，在前面的功能進行鋪墊。然後重點來了，在填寫資料的時候，先填寫必須的，最主要的那些。如果是社交，用戶的頭像、昵稱是必須有的，至少在社交中告訴別人，「我是誰？」，而性別、年齡、身高、體重是有幫助的，還有一點就是關於體育運動這一項的水平估量，有可能是球齡等。這麼多的資料擺在面前，何去何從，經過跟PM商議之後覺得，在不知道用戶具體需求的時候，我們採取一種先不做任何的判斷，the simplest the best，於是最後選擇在資料頁面只填昵稱和頭像。這個地方又提到另外一點，工作中需要同其他人進行合作，這個話題將在另外的文章中進行講述。

忘記密碼

忘記密碼，採取手機接受動態驗證碼之後再在下一個頁面進行設置新的密碼，流程跟註冊相似度很高，一是為了保證體驗的一致性，二是這樣即時接收即時更改的做法，不需要跳轉出去，非常高效。因為與註冊很相似，這裡就不再多說什麼了。

第三方登錄

有了註冊、登錄、忘記密碼，這樣一個比較完整的登錄系統就算完成了。革命尚未成功，童鞋仍需努力！到了這一步，也只能是工作達成一半，現在咱們需要思考的就是在現有傳統的登錄方式的基礎上，能否有再快一點方式，比如第三方賬號綁定，如果能拿到第三方的賬號就，用戶只需要授權就可以了，連資料填寫這一步都可以直接拿到第三方平台的頭像和昵稱，是不是很快速？不好的地方在於用戶可能擔心賬號安全以及泄密的問題，這也是大環境下需要考慮的問題，在這一點解決上，如果我們在UI和APP的設計上更加完整專業，給用戶一種專業並且正規的感覺，這樣會在某些程度上減少用戶的疑慮。老規矩還是先說結論：最後選擇了微信作為第三方的登錄方式，並且作為首選的登錄方式，理由如下：

1.在第三方的登錄平台在國內，現在普遍的有微信、QQ、微博三方為主，也有其它的，但這個時候並不是考慮全面因素的時候。考慮到現階段產品是從0開始進行設計，所以在資源利用上面，追求精益求精，並且集中精力去做好一個平台就很不錯了。在三個平台中微信的普及率最高，年齡層覆蓋得也是最廣，所以就決定採用了這個。看得出在這個裡面也考慮到了項目進行到哪個階段權衡該幹什麼事的情況。

2.為什麼將第三方平台作為首選登錄方式？還是那個出發點，希望藉助第三方的社交資源達到最大的分享率。

最後還需要作為補充的是，在登錄系統上，加上「服務條款」，完善APP的法律規範。怎麼寫這樣的條款，是另一個話題，不再這篇文章進行詳細的敘述。

國外的微信換成Facebook同樣成立，不過國外的習慣更傾向於用郵箱而不是手機號，這點需要注意。

基本上到這裡，一個比較完整的登錄系統就完成了，細節的UI優化內容可以作為另一篇文章再進行補充。到這個階段只能說在邏輯上根據事情情況進行權衡了一套比較符合項目的方案。如果繼續深入，也是可以的，UI層面將會是最直接的情感傳達，比如說對產品的整體的格調、情緒、愉悅或者說幽默感，也是一件很有意思的事情，靜待下回分解~

來總結一下今天的內容，單個功能怎麼去設計：

第一層級先將功能分為幾個小塊的功能，每個小的功能按照常規認知來講會有哪些基本的元素，然後進行競品分析（sorry，這篇文章並沒有強調這一點），每個元素從小到大的範圍去分析有哪些屬性，適合於哪些場景，利弊分別是什麼，最後根據項目的進程評估哪種方式最合適。

第二層級，在基本功能完善的基礎上去思考有沒有更高效的方法，開始創新以及查漏補缺。

第三個層級，從情感入手，進行UI 的情感化完善和視覺風格的統一。

第四個層級，需要持續做的是觀察趨勢，時刻做好更新和改進方案的準備。

樓主作為精進中的UX一枚，一直在嘗試能提高自己的方法，有時候迷茫有時候懷疑自己，有時候也為自己那種鑽研精神而感到高興，anyway，將自己的思路寫出來，整理自己思維的同時希望和童鞋們相互交流，想噴的儘管來吧~共勉~

職場設計教程搶先看～一枚愛折騰、愛健身的設計師妹紙~

詳情請關注微信公眾號：Sophia的玲瓏閣，獲取更多有關交互、健身及其它相關信息。

推薦閱讀：