起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識與用戶體驗死磕到底：不簡單的表單設計
用戶體驗早已成為互聯網公司的金科玉律，貫穿在一款產品的設計、運營的全過程中。而用戶在互聯網上總會遇到各類表單，這一環節注重用戶體驗無疑非常重要。下面將從表單元素、如何有效提高表單可用性幾方面分析：在表單設計中，怎樣創造更好的用戶體驗。
一、表單元素
1. 標簽
告訴用戶表單需要填什么。
對齊方式是最重要的問題。選擇左對齊、右對齊還是頂對齊？這是表單設計中經常遇到的問題。前人的研究發現了這樣的規律：就觀看時間、填寫速度來說，頂對齊快于右對齊快于左對齊。
頂對齊的好處是處理快速，缺點是增加了垂直空間的占用。
右對齊的優點是垂直占用空間減少，缺點是可讀性相較于頂對齊更差。
左對齊的好處是標簽容易瀏覽，缺點是標簽與輸入框間距增加，瀏覽變慢。
標簽的文字風格也越來越被人們重視，標榜與用戶友好的企業在語氣口吻上會更加清楚明確、平易近人。例如“希望內容來自：”和“我更希望內容來自：”，似乎后者更站在用戶的立場上考慮；還有修改術語，用普通人理解的詞語把問題解釋清楚。這些小技巧對一些用戶來說非常受用。
2. 輸入框
（1）輸入框類型
輸入框一般包括文本框、單選鈕、復選框、下拉菜單、列表框等。綜合問題本身、界面設計、用戶填寫習慣等因素選擇合適的輸入類型。
（2）輸入框長度
一些人認為輸入框的長度提供了暗示，比如郵政編碼、電話號碼的輸入框采取固定的長度，可以幫助用戶了解是否填寫了正確的位數。這不失為一個好辦法，但是在美觀上需要做出平衡。
上圖為一款語言學習網站，你需要對照給的中文含義在輸入框內填寫英文單詞，輸入框會根據單詞長度而變化，提供了正確與否的暗示。
（3）必填項與選填項的問題
很多表單上習慣在輸入框旁邊加上星號*來表示必須填寫，熟練的用戶一看便知。
基于這并不是既定的規則，有的表單出于穩妥起見會在下面添加說明。在輸入框旁邊添加“（可選項）”的說明也是一個好辦法，看起來更加清晰，尤其當可選項較少時。
（4）關于彈性輸入框
希望用戶按照某種格式填寫時，如“請采用XXX-XXX-XXXX的格式”，記住一定不要麻煩用戶。為什么不直接把輸入框設置成那種格式，用戶只要輸入其他都不用管？事實上，更好的方式是直接放寬對用戶輸入的要求，包括格式、大小寫等。讓你的系統更靈活，而非讓用戶為了你改變他們的輸入習慣。
3. 動作
用戶提交表單，即點擊一個按鈕或鏈接，執行一個操作。
一般動作分為主動作和次動作，主動作是最重要的行為（提交表單），次動作則是返回、取消等。主動作和次動作需要有嚴格的視覺區分，防止發生用戶不小心點擊了取消按鈕，輸入的數據全部清空的狀況。
上面這個登錄界面用截然不同的顏色突出了登錄按鈕，取消按鈕的存在感變得很小，誤按可能性極低。
4. 幫助文字
告訴人們如何回答問題。
自動即時幫助：在幫助信息最合適的時間和位置顯示幫助信息，如點擊激活輸入框時，幫助文字就出現在輸入框的旁邊。
用戶激活的幫助：在人們需要的時候提供幫助，這種方式強調用戶的主動性，通常采用圖標、按鈕、圖片或文本鏈接，便于人們知道有幫助可以使用。常見的是一個“？”的符號，如A站登錄頁，點擊問號即可跳轉到幫助手冊頁面。
但是，不要依賴幫助文字。要盡量減少幫助文字，創造簡潔干凈的設計。
5. 輸入反饋
輸入正確還是錯誤。
反饋是必要的，無論是填寫提交錯誤還是正確，反饋能讓用戶感到安心，而不是煩躁地重復點擊。
如果用戶填寫錯誤，應該明確說明是什么問題。如下圖Facebook的用戶名輸入框，為空時會顯示用戶名無效，和應滿足的要求。
但是下面Facebook注冊頁的反饋看起來就有點鬧心了，剛點擊“姓”輸入框準備填寫，后面其他還沒填寫的輸入框都默認為填錯了。設置錯誤反饋需要注意這樣的問題，反饋應當是在每一項填寫完畢時出現。
如果表單填寫成功，也應該用成功消息清晰傳達，突出提交成功的結果。至少不能什么都沒有吧，那樣看起來就會像一直沒刷新的網頁，只會引起用戶的反感。一句“您的表單已提交成功！”就會讓事情好得多，刷新到新的網頁也是常見的做法。
二、有效提高可用性的方法
1. 合理地組織信息
可利用框線、空間間隔、顏色差異，還可按不同信息的類別、屬性和相關性進行區塊劃分。
（1）分組
首先需要在邏輯上進行分組，如按重要程度劃分成基本信息（必填/重要）和附加在信息（選填）；按主題歸類劃分，如面試題填寫表單分成填寫說明、個人信息、題目回答幾大板塊。
用分隔線來劃分是常見的分組方法。
（2）色彩區分
根據人類色彩感知心理，一般通知用藍色，警告用黃色（如黃牌警告），錯誤為紅色，成功確認為綠色。
（3）分步指示
分出步驟展現給用戶，提供清晰的路徑步驟，明確高效
2. 簡化表單，突出重點
簡化如收起用戶不常用的部分，當用戶需要時通過點擊某塊區域再顯示出來。
突出重點則表現在表單中重要的按鈕等一定要凸顯出來。這已經成為設計中共識的一部分，絕大部分網站都會凸顯提交按鈕，比如下面的登錄頁，將登錄按鈕用鮮艷的顏色凸顯了出來。
個人覺得這種對比和凸顯應該是明顯的，所以上圖這種輸入框和登錄按鈕顏色的相似個人并不提倡，而且這個登錄按鈕的灰色看起來就像是不可用狀態。
3.清晰的瀏覽線
主要是在對齊和空隙的設置上，使之形成清晰的瀏覽線，便于用戶迅速觀看。F型的眼動軌跡圖（熱點圖）眾所周知，提示我們用戶傾向于觀看有清晰瀏覽脈絡（如垂直對齊）的內容。
4.選擇合適的標簽對齊方式
（1）有標簽
請參考上文“表單元素”中“標簽”部分。
（2）無標簽
常見的情況是標簽放在輸入框的里面，可以節省空間。但是會帶來一個問題，當用戶輸入時標簽消失，用戶常常會在輸入到一半時忘記自己要輸入什么（不要驚訝，這就是用戶，每個人都會犯這樣的毛?。蛘呤窍朐俅慰吹綐撕灷锏男畔?。
為了解決這個問題，浮動標簽應運而生。你或許已經看到過這種效果，在一個input輸入框中有一個占位文本，當你用鼠標點擊或用手觸摸輸入框準備輸入時，展位文本以動畫的方式移動到別的地方，這時你可以在原來占位符的地方開始輸入文字。
上圖是一個登錄頁未填寫和準備填寫時，當焦點集中到輸入框里時，輸入框里的標簽文字變小，并且跑到了輸入框上方。
就個人使用過程來看，浮動標簽并未大規模普及，標簽直接在輸入框里比浮動標簽出現的更多。也許是技術實現上更為復雜，也許界面更為花哨并不是一種好事，也許并不符合品牌氣質……
簡而言之，選擇哪種需要根據自己的情況。
5. 智能默認
（1）通用智能默認：智能默認的作用是在滿足多數人需要的地方放置選擇，來簡化選擇。一組單選按鈕預先選擇了一項，是一種最簡單的默認形式，如性別一欄，系統自動為你選好一個值。商家可能會把智能默認設置得更利于自身利益，例如，用戶經常下載軟件時常默認下載一些其他軟件。這是很惱人的，我們應該確保默認選項符合客戶的利益。
（2）個性化默認：指保持選項的“粘性”，即保持用戶之前的選擇。例如你在淘寶上買東西，每次地址都會自動默認你常用的那個，而不用你再自己選擇。
6. 給用戶填寫的理由
事實上，這是我們一開始就要考慮的事情。
尤其在涉及一些較隱私的問題時，為了打消用戶的質疑，你需要給出原因，說明讓他填寫某項信息是出于怎樣的考慮；說明你不會泄露和非法使用用戶的信息。
以及一些其他說明，告訴用戶填寫表單能獲得什么好處；貼心的提醒（如填寫完表單大致需要的時間）。
三、關于登錄/注冊
1. 要不要登錄或注冊？
很多產品其實是不需要登錄注冊的，比如地圖類APP，大多數用戶是即用即走。即使作為產品開發者你希望用戶能夠注冊，以掌握用戶信息、帶來深入的互動、便于盈利等，也應當克制自己，把用戶的需要放在第一位。
2. 什么時候？
如果要登錄/注冊的話，建議在需要的時候出現相應界面。一上來就出現登錄/注冊頁面，而且不注冊就無法使用的APP對所有的用戶都是個困擾，很多人會選擇放棄。
3. 驗證問題
驗證碼是最常用的一種驗證方法，當用戶輸入自己的郵箱或手機號來注冊時，手機或郵箱會收到發過來的驗證碼，填入驗證碼后說明你的郵箱或手機號沒有填錯，注冊成功。不過這樣也很費時，所以很多網站，在填寫注冊表單時都不要求用戶確認密碼。有的網站甚至都不需要用戶填寫，而是將密碼直接發送至用戶的郵箱。我們可以更好利用驗證碼，比如微信提供驗證碼登錄這樣的功能，方便永遠記不得密碼的用戶。
在網頁端?？吹綖榉乐箼C器人而設置的驗證碼，有的和12306的驗證碼類似，非?！胺慈祟悺?，這種驗證碼應該是盡量避免的。而且讓用戶點擊（如按順序點擊圖像處出現的文字）比讓用戶輸入更加方便。
四、關于密碼
1. 密碼用不用顯示
密碼隱藏會帶來這樣的問題：提高用戶輸錯率；用戶修改不順暢；進而降低用戶體驗。不顯示容易出錯，顯示又會讓用戶不安，如何權衡？
下面列舉了幾種控制密碼顯隱的方式：
（1）文字說明控制顯隱
（2）圖標點擊控制顯隱：只是把文字改成了圖標，而圖標可以跨越語言障礙，具有形象生動的特點。
（3）按住圖標控制顯隱：按住圖標不放可以顯示密碼，較少見到。
（4）單選框控制顯隱
（5）選中可見
（6）干脆直接顯示密碼：增加一個選框說明可以隱藏密碼
（7）關于安全問題：很多表單都有密碼保存的功能，這是為了用戶使用方便，但可能會帶來安全問題。如果其他人拿到了你的設備，而你的密碼是保存著的，那么就會登錄上你的賬號；更甚一步，如果有顯示密碼的選項，那么他人就會看到你的密碼。所以即使是保存密碼，也最好不要能夠顯示出來。
（8）換種思路，不用密碼：用指紋？發送密碼到用戶郵箱/手機？
上圖密碼在填寫過程中只顯示正在輸入的那一位，輸入下一位時自動隱藏，這是一種比較好的方式，既能夠看到自己填的密碼，又不用擔心他人窺視。
2.密碼需不需要很復雜
設置密碼、記住密碼、忘記密碼、找回密碼…然后忘記密碼，密碼的復雜性安全性與易用性的矛盾始終沒有解決，已經嚴重地影響到了用戶體驗。
高強度密碼的“復雜性”受到了人們的反思，過去專家們建議的“復雜密碼”通常是包含大小寫、數字、字符的亂序密碼，這種復雜帶來的往往是不斷地找回密碼。
長密碼作用得到了凸顯。理論上，密碼越長，安全性也就越強。一個長密碼段落和一個帶有數字和符號的短密碼一樣安全，但是更容易記住。這種長密碼可以是一句話的拼音、英文單詞句子，所以可以選擇自己容易記住的話，最好是奇怪的話，比如“woxihuanchiyuanweishupian”。
這就是斯坦福大學現在推薦使用的“通行短語”，一個通行短語基本上是一系列單詞，可以包括空格。通行短語長度至少應為16到25個字符（空格計為字符），而且越長越好，因為雖然通行短語看起來很簡單（如果你明白它的意思的話），但是增加的長度提供了許多可能的排列，使得標準密碼破解程序將無效。
那么問題來了，我們在網絡上的密碼那么多，即使是有涵義的句子也不可能一一記住吧。
密碼問題仍然需要探索。
五、總結
在學習表單設計知識之前，也許你很快就能上手一個表單，但隨著深入挖掘，你會發現哪怕只是一個小小的表單，背后都有很大的學問。每個看似簡單的背后，都是產品設計人員再三的斟酌與思考。而這一切，都是為了更好的用戶體驗。
雖然或許挖掘這么多后，重新設計出的表單與最開始設計的可能并無太大的差異，但是實際上并不是，你已經明白了每一步設計的意義。而這正是產品設計、交互設計人員要思考的問題。
關于表單設計，還有很多沒有提到的內容。
關于提高用戶體驗，還有很漫長的路要走。
主要參考資料：
1.《Web Form Design:Filling the Blanks》（Luke Wroblewski）
本文由 @金山時雨 原創發布于人人都是產品經理。未經許可，禁止轉載。
明白了明白了 ??
嘻嘻就是這樣的 ?? 平時的話，我們看東西的習慣是從左到右，所以左對齊符合用眼習慣、容易瀏覽~ 之所以更慢是因為后面還有輸入框吶，標簽長短不一，與輸入框之間的間距會形成一種視覺的“中斷”，導致瀏覽變慢
左對齊比右對齊慢嗎？這點想不通呢 能否配圖說明一下
借用一句話，讓你的系統更靈活，而非讓用戶為了你改變他們的輸入習慣。 ??
?? 這是借用的騰訊ISUX《表單設計的思考》里的一句話。好文，可以去看
表單其實我覺得還是很重要的，特別是注冊界面的表單，直接影響潛在用戶轉用戶的比例 ??