一、表單元素

1. 标簽告訴用(yòng)戶表單需要填什(shén)麽。

對(duì)齊方式是最重要的(de)問題。選擇左對(duì)齊、右對(duì)齊還(hái)是頂對(duì)齊?這(zhè)是表單設計中經常遇到的(de)問題。前人(rén)的(de)研究發現了(le)這(zhè)樣的(de)規律：就觀看時(shí)間、填寫速度來(lái)說，頂對(duì)齊快(kuài)于右對(duì)齊快(kuài)于左對(duì)齊。

頂對(duì)齊的(de)好處是處理(lǐ)快(kuài)速，缺點是增加了(le)垂直空間的(de)占用(yòng)。

右對(duì)齊的(de)優點是垂直占用(yòng)空間減少，缺點是可(kě)讀性相較于頂對(duì)齊更差。

左對(duì)齊的(de)好處是标簽容易浏覽，缺點是标簽與輸入框間距增加，浏覽變慢(màn)。

标簽的(de)文字風格也(yě)越來(lái)越被人(rén)們重視，标榜與用(yòng)戶友好的(de)企業在語氣口吻上會更加清楚明(míng)确、平易近人(rén)。例如“希望内容來(lái)自：”和(hé)“我更希望内容來(lái)自：”，似乎後者更站在用(yòng)戶的(de)立場(chǎng)上考慮;還(hái)有修改術語，用(yòng)普通(tōng)人(rén)理(lǐ)解的(de)詞語把問題解釋清楚。這(zhè)些小技巧對(duì)一些用(yòng)戶來(lái)說非常受用(yòng)。

2. 輸入框

(1)輸入框類型

輸入框一般包括文本框、單選鈕、複選框、下(xià)拉菜單、列表框等。綜合問題本身、界面設計、用(yòng)戶填寫習(xí)慣等因素選擇合适的(de)輸入類型。

(2)輸入框長(cháng)度

一些人(rén)認爲輸入框的(de)長(cháng)度提供了(le)暗示，比如郵政編碼、電話(huà)号碼的(de)輸入框采取固定的(de)長(cháng)度，可(kě)以幫助用(yòng)戶了(le)解是否填寫了(le)正确的(de)位數。這(zhè)不失爲一個(gè)好辦法，但是在美(měi)觀上需要做(zuò)出平衡。

上圖爲一款語言學習(xí)網站，你需要對(duì)照(zhào)給的(de)中文含義在輸入框内填寫英文單詞，輸入框會根據單詞長(cháng)度而變化(huà)，提供了(le)正确與否的(de)暗示。

(3)必填項與選填項的(de)問題

很多(duō)表單上習(xí)慣在輸入框旁邊加上星号*來(lái)表示必須填寫，熟練的(de)用(yòng)戶一看便知。

基于這(zhè)并不是既定的(de)規則，有的(de)表單出于穩妥起見會在下(xià)面添加說明(míng)。在輸入框旁邊添加“(可(kě)選項)”的(de)說明(míng)也(yě)是一個(gè)好辦法，看起來(lái)更加清晰，尤其當可(kě)選項較少時(shí)。

(4)關于彈性輸入框

希望用(yòng)戶按照(zhào)某種格式填寫時(shí)，如“請采用(yòng)XXX-XXX-XXXX的(de)格式”，記住一定不要麻煩用(yòng)戶。爲什(shén)麽不直接把輸入框設置成那種格式，用(yòng)戶隻要輸入其他(tā)都不用(yòng)管?事實上，更好的(de)方式是直接放寬對(duì)用(yòng)戶輸入的(de)要求，包括格式、大(dà)小寫等。讓你的(de)系統更靈活，而非讓用(yòng)戶爲了(le)你改變他(tā)們的(de)輸入習(xí)慣。

3. 動作用(yòng)戶提交表單，即點擊一個(gè)按鈕或鏈接，執行一個(gè)操作。

一般動作分(fēn)爲主動作和(hé)次動作，主動作是最重要的(de)行爲(提交表單)，次動作則是返回、取消等。主動作和(hé)次動作需要有嚴格的(de)視覺區(qū)分(fēn)，防止發生用(yòng)戶不小心點擊了(le)取消按鈕，輸入的(de)數據全部清空的(de)狀況。

上面這(zhè)個(gè)登錄界面用(yòng)截然不同的(de)顔色突出了(le)登錄按鈕，取消按鈕的(de)存在感變得(de)很小，誤按可(kě)能性極低。4. 幫助文字告訴人(rén)們如何回答(dá)問題。

自動即時(shí)幫助：在幫助信息最合适的(de)時(shí)間和(hé)位置顯示幫助信息，如點擊激活輸入框時(shí)，幫助文字就出現在輸入框的(de)旁邊。

用(yòng)戶激活的(de)幫助：在人(rén)們需要的(de)時(shí)候提供幫助，這(zhè)種方式強調用(yòng)戶的(de)主動性，通(tōng)常采用(yòng)圖标、按鈕、圖片或文本鏈接，便于人(rén)們知道有幫助可(kě)以使用(yòng)。常見的(de)是一個(gè)“?”的(de)符号，如A站登錄頁，點擊問号即可(kě)跳轉到幫助手冊頁面。

但是，不要依賴幫助文字。要盡量減少幫助文字，創造簡潔幹淨的(de)設計。5. 輸入反饋輸入正确還(hái)是錯誤。

反饋是必要的(de)，無論是填寫提交錯誤還(hái)是正确，反饋能讓用(yòng)戶感到安心，而不是煩躁地重複點擊。

如果用(yòng)戶填寫錯誤，應該明(míng)确說明(míng)是什(shén)麽問題。如下(xià)圖Facebook的(de)用(yòng)戶名輸入框，爲空時(shí)會顯示用(yòng)戶名無效，和(hé)應滿足的(de)要求。

但是下(xià)面Facebook注冊頁的(de)反饋看起來(lái)就有點鬧心了(le)，剛點擊“姓”輸入框準備填寫，後面其他(tā)還(hái)沒填寫的(de)輸入框都默認爲填錯了(le)。設置錯誤反饋需要注意這(zhè)樣的(de)問題，反饋應當是在每一項填寫完畢時(shí)出現。

如果表單填寫成功，也(yě)應該用(yòng)成功消息清晰傳達，突出提交成功的(de)結果。至少不能什(shén)麽都沒有吧，那樣看起來(lái)就會像一直沒刷新的(de)網頁，隻會引起用(yòng)戶的(de)反感。一句“您的(de)表單已提交成功!”就會讓事情好得(de)多(duō)，刷新到新的(de)網頁也(yě)是常見的(de)做(zuò)法。二、有效提高(gāo)可(kě)用(yòng)性的(de)方法1. 合理(lǐ)地組織信息可(kě)利用(yòng)框線、空間間隔、顔色差異，還(hái)可(kě)按不同信息的(de)類别、屬性和(hé)相關性進行區(qū)塊劃分(fēn)。

(1)分(fēn)組

首先需要在邏輯上進行分(fēn)組，如按重要程度劃分(fēn)成基本信息(必填/重要)和(hé)附加在信息(選填);按主題歸類劃分(fēn)，如面試題填寫表單分(fēn)成填寫說明(míng)、個(gè)人(rén)信息、題目回答(dá)幾大(dà)闆塊。

用(yòng)分(fēn)隔線來(lái)劃分(fēn)是常見的(de)分(fēn)組方法。

(2)色彩區(qū)分(fēn)

根據人(rén)類色彩感知心理(lǐ)，一般通(tōng)知用(yòng)藍色，警告用(yòng)黃(huáng)色(如黃(huáng)牌警告)，錯誤爲紅色，成功确認爲綠(lǜ)色。

(3)分(fēn)步指示

分(fēn)出步驟展現給用(yòng)戶，提供清晰的(de)路徑步驟，明(míng)确高(gāo)

2. 簡化(huà)表單，突出重點簡化(huà)如收起用(yòng)戶不常用(yòng)的(de)部分(fēn)，當用(yòng)戶需要時(shí)通(tōng)過點擊某塊區(qū)域再顯示出來(lái)。

突出重點則表現在表單中重要的(de)按鈕等一定要凸顯出來(lái)。這(zhè)已經成爲設計中共識的(de)一部分(fēn)，絕大(dà)部分(fēn)網站都會凸顯提交按鈕，比如下(xià)面的(de)登錄頁，将登錄按鈕用(yòng)鮮豔的(de)顔色凸顯了(le)出來(lái)。

個(gè)人(rén)覺得(de)這(zhè)種對(duì)比和(hé)凸顯應該是明(míng)顯的(de)，所以上圖這(zhè)種輸入框和(hé)登錄按鈕顔色的(de)相似個(gè)人(rén)并不提倡，而且這(zhè)個(gè)登錄按鈕的(de)灰色看起來(lái)就像是不可(kě)用(yòng)狀态。3.清晰的(de)浏覽線主要是在對(duì)齊和(hé)空隙的(de)設置上，使之形成清晰的(de)浏覽線，便于用(yòng)戶迅速觀看。F型的(de)眼動軌迹圖(熱(rè)點圖)衆所周知，提示我們用(yòng)戶傾向于觀看有清晰浏覽脈絡(如垂直對(duì)齊)的(de)内容。

4.選擇合适的(de)标簽對(duì)齊方式

(1)有标簽

請參考上文“表單元素”中“标簽”部分(fēn)。

(2)無标簽

常見的(de)情況是标簽放在輸入框的(de)裏面，可(kě)以節省空間。但是會帶來(lái)一個(gè)問題，當用(yòng)戶輸入時(shí)标簽消失，用(yòng)戶常常會在輸入到一半時(shí)忘記自己要輸入什(shén)麽(不要驚訝，這(zhè)就是用(yòng)戶，每個(gè)人(rén)都會犯這(zhè)樣的(de)毛病)，或者是想再次看到标簽裏的(de)信息。

爲了(le)解決這(zhè)個(gè)問題，浮動标簽應運而生。你或許已經看到過這(zhè)種效果，在一個(gè)input輸入框中有一個(gè)占位文本，當你用(yòng)鼠标點擊或用(yòng)手觸摸輸入框準備輸入時(shí)，展位文本以動畫(huà)的(de)方式移動到别的(de)地方，這(zhè)時(shí)你可(kě)以在原來(lái)占位符的(de)地方開始輸入文字。

上圖是一個(gè)登錄頁未填寫和(hé)準備填寫時(shí)，當焦點集中到輸入框裏時(shí)，輸入框裏的(de)标簽文字變小，并且跑到了(le)輸入框上方。

就個(gè)人(rén)使用(yòng)過程來(lái)看，浮動标簽并未大(dà)規模普及，标簽直接在輸入框裏比浮動标簽出現的(de)更多(duō)。也(yě)許是技術實現上更爲複雜(zá)，也(yě)許界面更爲花哨并不是一種好事，也(yě)許并不符合品牌氣質……

簡而言之，選擇哪種需要根據自己的(de)情況。5. 智能默認(1)通(tōng)用(yòng)智能默認：智能默認的(de)作用(yòng)是在滿足多(duō)數人(rén)需要的(de)地方放置選擇，來(lái)簡化(huà)選擇。一組單選按鈕預先選擇了(le)一項，是一種最簡單的(de)默認形式，如性别一欄，系統自動爲你選好一個(gè)值。商家可(kě)能會把智能默認設置得(de)更利于自身利益，例如，用(yòng)戶經常下(xià)載軟件時(shí)常默認下(xià)載一些其他(tā)軟件。這(zhè)是很惱人(rén)的(de)，我們應該确保默認選項符合客戶的(de)利益。

(2)個(gè)性化(huà)默認：指保持選項的(de)“粘性”，即保持用(yòng)戶之前的(de)選擇。例如你在淘寶上買東西，每次地址都會自動默認你常用(yòng)的(de)那個(gè)，而不用(yòng)你再自己選擇。6. 給用(yòng)戶填寫的(de)理(lǐ)由事實上，這(zhè)是我們一開始就要考慮的(de)事情。

尤其在涉及一些較隐私的(de)問題時(shí)，爲了(le)打消用(yòng)戶的(de)質疑，你需要給出原因，說明(míng)讓他(tā)填寫某項信息是出于怎樣的(de)考慮;說明(míng)你不會洩露和(hé)非法使用(yòng)用(yòng)戶的(de)信息。

以及一些其他(tā)說明(míng)，告訴用(yòng)戶填寫表單能獲得(de)什(shén)麽好處;貼心的(de)提醒(如填寫完表單大(dà)緻需要的(de)時(shí)間)。三、關于登錄/注冊1. 要不要登錄或注冊?很多(duō)産品其實是不需要登錄注冊的(de)，比如地圖類APP，大(dà)多(duō)數用(yòng)戶是即用(yòng)即走。即使作爲産品開發者你希望用(yòng)戶能夠注冊，以掌握用(yòng)戶信息、帶來(lái)深入的(de)互動、便于盈利等，也(yě)應當克制自己，把用(yòng)戶的(de)需要放在第一位。2. 什(shén)麽時(shí)候?如果要登錄/注冊的(de)話(huà)，建議(yì)在需要的(de)時(shí)候出現相應界面。一上來(lái)就出現登錄/注冊頁面，而且不注冊就無法使用(yòng)的(de)APP對(duì)所有的(de)用(yòng)戶都是個(gè)困擾，很多(duō)人(rén)會選擇放棄。3. 驗證問題驗證碼是最常用(yòng)的(de)一種驗證方法，當用(yòng)戶輸入自己的(de)郵箱或手機号來(lái)注冊時(shí)，手機或郵箱會收到發過來(lái)的(de)驗證碼，填入驗證碼後說明(míng)你的(de)郵箱或手機号沒有填錯，注冊成功。不過這(zhè)樣也(yě)很費時(shí)，所以很多(duō)網站，在填寫注冊表單時(shí)都不要求用(yòng)戶确認密碼。有的(de)網站甚至都不需要用(yòng)戶填寫，而是将密碼直接發送至用(yòng)戶的(de)郵箱。我們可(kě)以更好利用(yòng)驗證碼，比如微信提供驗證碼登錄這(zhè)樣的(de)功能，方便永遠(yuǎn)記不得(de)密碼的(de)用(yòng)戶。

在網頁端常看到爲防止機器人(rén)而設置的(de)驗證碼，有的(de)和(hé) 12306 的(de)驗證碼類似，非常“反人(rén)類”，這(zhè)種驗證碼應該是盡量避免的(de)。而且讓用(yòng)戶點擊(如按順序點擊圖像處出現的(de)文字)比讓用(yòng)戶輸入更加方便。四、關于密碼1. 密碼用(yòng)不用(yòng)顯示密碼隐藏會帶來(lái)這(zhè)樣的(de)問題：提高(gāo)用(yòng)戶輸錯率;用(yòng)戶修改不順暢;進而降低用(yòng)戶體驗。不顯示容易出錯，顯示又會讓用(yòng)戶不安，如何權衡?

下(xià)面列舉了(le)幾種控制密碼顯隐的(de)方式：

(1)文字說明(míng)控制顯隐

(2)圖标點擊控制顯隐：隻是把文字改成了(le)圖标，而圖标可(kě)以跨越語言障礙，具有形象生動的(de)特點。

(3)按住圖标控制顯隐：按住圖标不放可(kě)以顯示密碼，較少見到。

(4)單選框控制顯隐

(5)選中可(kě)見

(6)幹脆直接顯示密碼：增加一個(gè)選框說明(míng)可(kě)以隐藏密碼

(7)關于安全問題：很多(duō)表單都有密碼保存的(de)功能，這(zhè)是爲了(le)用(yòng)戶使用(yòng)方便，但可(kě)能會帶來(lái)安全問題。如果其他(tā)人(rén)拿到了(le)你的(de)設備，而你的(de)密碼是保存著(zhe)的(de)，那麽就會登錄上你的(de)賬号;更甚一步，如果有顯示密碼的(de)選項，那麽他(tā)人(rén)就會看到你的(de)密碼。所以即使是保存密碼，也(yě)最好不要能夠顯示出來(lái)。

(8)換種思路，不用(yòng)密碼：用(yòng)指紋?發送密碼到用(yòng)戶郵箱/手機?

上圖密碼在填寫過程中隻顯示正在輸入的(de)那一位，輸入下(xià)一位時(shí)自動隐藏，這(zhè)是一種比較好的(de)方式，既能夠看到自己填的(de)密碼，又不用(yòng)擔心他(tā)人(rén)窺視。2.密碼需不需要很複雜(zá)設置密碼、記住密碼、忘記密碼、找回密碼…然後忘記密碼，密碼的(de)複雜(zá)性安全性與易用(yòng)性的(de)矛盾始終沒有解決，已經嚴重地影(yǐng)響到了(le)用(yòng)戶體驗。

高(gāo)強度密碼的(de)“複雜(zá)性”受到了(le)人(rén)們的(de)反思，過去專家們建議(yì)的(de)“複雜(zá)密碼”通(tōng)常是包含大(dà)小寫、數字、字符的(de)亂序密碼，這(zhè)種複雜(zá)帶來(lái)的(de)往往是不斷地找回密碼。

長(cháng)密碼作用(yòng)得(de)到了(le)凸顯。理(lǐ)論上，密碼越長(cháng)，安全性也(yě)就越強。一個(gè)長(cháng)密碼段落和(hé)一個(gè)帶有數字和(hé)符号的(de)短密碼一樣安全，但是更容易記住。這(zhè)種長(cháng)密碼可(kě)以是一句話(huà)的(de)拼音(yīn)、英文單詞句子，所以可(kě)以選擇自己容易記住的(de)話(huà)，最好是奇怪的(de)話(huà)，比如“woxihuanchiyuanweishupian”。這(zhè)就是斯坦福大(dà)學現在推薦使用(yòng)的(de)“通(tōng)行短語”，一個(gè)通(tōng)行短語基本上是一系列單詞，可(kě)以包括空格。通(tōng)行短語長(cháng)度至少應爲 16 到 25 個(gè)字符(空格計爲字符)，而且越長(cháng)越好，因爲雖然通(tōng)行短語看起來(lái)很簡單(如果你明(míng)白它的(de)意思的(de)話(huà))，但是增加的(de)長(cháng)度提供了(le)許多(duō)可(kě)能的(de)排列，使得(de)标準密碼破解程序将無效。

那麽問題來(lái)了(le)，我們在網絡上的(de)密碼那麽多(duō)，即使是有涵義的(de)句子也(yě)不可(kě)能一一記住吧。

密碼問題仍然需要探索。