2017-7-27 資深UI設計者
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
QQ作為一個連接人、內容與生活的社交平臺，其注冊帳號將是我們產品中非常重要的一環。基于Mobile端與Pc端的區別，我們在手機版QQ的設計上要求更輕、更快、更便捷的給用戶下發QQ號。目前手機版QQ的用戶量覆蓋率已達8億以上，所以現有新QQ號的注冊情況多為已有號碼登錄情況下的小號注冊。所以如何幫助用戶快速注冊新QQ號，并且使用戶在流程中獲得良好的用戶體驗就是我們思考的問題。
分步注冊是什么？它指的是在注冊頁面上，一個頁面只專注于一個信息的提交，分步驟地去讓用戶完成整個流程。相反，非分步注冊則指的是在一個長頁面上完成多個信息的填寫，最終提交注冊一個帳號。
依據桌面調研，多數分步注冊APP平均為5步左右，多數非分步注冊APP平均為8步左右。并且Facebook曾針對分步注冊與非分步注冊做過A/B Test，其結論指出分步注冊的轉化率遠高于非分步注冊。由此可見，非分步注冊強行減少注冊頁面，不如適當拉長戰線，給用戶輕負荷的操作，讓用戶在不知不覺中完成注冊流程。
除此之外，還有一種例如in和same的簡單型APP，這類非社交類產品可通過其它社交平臺的授權登錄等簡單的2步操作，來使用其產品的主要功能。
選擇分步注冊的原因是：
a、分步注冊適合移動端設計。
移動端屏幕小，加上彈出鍵盤，假設將多個輸入項放在一個頁面，會給用戶造成擁擠感，然而分步注冊則可較好的解決該問題。
b、分步注冊可減少用戶點擊輸入框的次數。
幾乎所有的注冊關鍵步驟中都有：輸入手機號、獲取驗證碼、設定密碼這3個步驟。在一個頁面中時，需要手動逐項呼出鍵盤來填寫。若遵循分步注冊，分成3個頁面的話，進入每個頁面都會自動置入焦點并彈出鍵盤，將減少用戶手動點擊輸入框的次數。
c、分步注冊在一定程度上可提高轉化率。
非分步注冊在一個頁面中擁有較多輸入項，會加大用戶流失率。但是在某些情況下，分步注冊也并非是最理想的選擇。當分步注冊的步數增多到一定的數量，即使一個頁面上只完成一件事，其步驟繁雜的用戶體驗，一樣是會造成較低的轉化率。
在上述分步注冊的思考和分析后，我們在手機QQ 7.0版本中針對注冊流程進行Redesign。
設計前，觀察數據中獲知手機QQ里有18.87%的用戶進入注冊流程后，無法完成整個流程。為了解決這個問題，我們通過縮短用戶注冊步驟，來讓用戶更容易的獲取QQ號，從而避免用戶在注冊QQ號中受挫。所以從改版前后的對比中可以看到我們在注冊小號時直接放號，不要手機驗證，縮短步驟（從9步到6步）。
手機QQ在7.0版本的注冊Redesign中，首先分析頁面信息優先級，將頁面信息按權重排序，依次為核心步驟層、內容輸入層、輔助信息層，還有包含可點擊交互操作的操作引導層。然后通過字號、字色與字重拉開信息層級間的差距，最終將用戶聚焦到核心信息上來。
a、核心步驟層，是指用戶在短暫時間內瀏覽頁面時，能讓其一目了然的獲知當下應該操作的某個步驟。例如“輸入手機號碼”是這個頁面的重點核心內容，其設計需要重點突出，且精煉文字。
b、內容輸入層，是指用戶被核心步驟層吸引后，需要進行相關內容的輸入，例如昵稱和密碼的輸入等等。其設計需要引導用戶進行輸入操作，并且在輸入中給用戶帶來便捷性。例如包括密碼明文／暗文的切換，以及輸入驗證碼到最后一位后直接進入下一步，來確保便捷性。
c、輔助信息層，是指用戶理解了以上兩個信息層后，輔助信息層會有更多信息讓感興趣的用戶去了解。這里往往提供更多說明或者跳轉鏈接，例如使用條款和隱私政策等。
在Redesign中，我們也嘗試在視覺上使用了“黑、大、粗”的Complexion Reduction設計語言。Complexion Reduction設計語言是指使用更加簡化的界面顏色，更大更突出的標題字體，以及簡潔的圖標，來拉開頁面信息層級，突出頁面主要功能。我們作為用戶體驗設計師應該進行“最小化設計”和“逐步簡化”的設計模式，毫不留情的砍掉“沒有重要功能的元素”，使用戶快速關注到信息的本質。
文案也是一位交互設計師在日常設計中需要掌控的點，文案上同樣也體現著產品的可用性和易用性以及產品格調。以下舉例了兩個產品的文案設計，可以看出文案精練直白的重要性。
windows旗下產品的注冊：
手機QQ7.0版本中Redesign的注冊：
最后總結，設計好文案的關鍵點是什么？第一、避免使用專業詞匯。第二、避免使用模棱兩可的詞匯。第三、用詞用字精煉。第四、多從用戶的口吻出發。第五、分段分組分節點的展現大段文案。
先看內容（附近的人、游戲、動漫、看點等），當用戶對內容想要互動和操作時（想和附近的人聊天時，想進入某個游戲時，想收藏和評論某個漫畫時），再提示用戶注冊賬號。貼心的產品應該讓用戶看到讓他感興趣的內容后，當用戶想有有進一步操作時才提示用戶注冊帳號。先勾起用戶的欲望，再讓用戶注冊進來，讓用戶感知到這個注冊賬號的價值。例如各類購物類APP，先讓用戶看商品，到確認購買支付之時才需注冊。
注冊是一個復雜乏味的交互操作程序，除了一味的下一步再下一步，我們也在思考一些有更多創新點的交互形式。例如我們作為一款社交產品，可借助自身message的形式，讓整個注冊流程像與人交流一樣自然順暢且輕松。這里我們嘗試通過與Baby Q對話來注冊，讓用戶時刻明白自己所處的流程步驟，熟知上下文。同時也會讓注冊產生更多趣味性，并且愿意與Baby Q產生信賴感，提交更多的個人信息。
以此為一個可探索的思考方式，未來其它類型的產品也可以有更豐富的注冊形式，結合自身產品類型，定制化與個性化的去設計整個注冊流程。例如語音APP嘗試以發語音的形式來注冊，涂鴉拍照APP手繪出注冊驗證碼，音樂APP嘗試通過播放音樂的進度的形式來注冊等。
隨著人工智能的進步，以后進入QQ后直接開啟前置攝像頭，掃描人臉后，直接與人臉綁定后自動匹配給你一個QQ號。能有效避免登錄中輸入帳號、忘記密碼的復雜交互，并且在QQ防詐騙，防盜號中，起到一定的網絡安全作用。
結語
本文在探討的注冊交互設計中，首先通過簡化流程、聚焦核心信息以及文案精練直白這3點結合手機QQ在7.0版本的注冊Redesign實例，講解了我們是如何在注冊模塊進行交互設計思考。其次根據競品分析和桌面調研，對比和佐證了我們在注冊模塊的交互設計。最后通過腦洞猜想了3種在手機QQ中可能可以嘗試的注冊概念設計方向。以上討論的注冊設計中的各個要點也并非是前沿性理念和絕對完美的設計，它只是設計師在日常工作中對基礎需求的思考和嘗試性的提煉總結。這種Complexion Reduction的設計理念的運用，在未來也尚還需要更多的考慮手機QQ產品設計風格的一致性。
藍藍設計( ssll180.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務