2016-10-26 用心設計
來源：UI中國
一個好的表單界面設計，應沒有一個多余的視覺要素
表單設計的視覺要素分析
在我為期不長的設計師生涯開始的時候，所做的設計全是一鼓激情以及直覺，憑著那么僅僅一點的與生俱來，做出來的作品雖然還能過目，但無論如何談不上優秀。也是不知道從什么時候開始有了這樣一種感覺：每一個設計方案都應該是有原因有依據的。
開始覺得一部好的電影，應該沒有一個多余的片段；一部好的文學作品，應該沒有一句多余的語句；也同樣，一份好的設計應該沒有一個多余的視覺元素。
所以在表單設計中，每一個視覺元素都有其存在的意義。有時候為了深入理解其中某一元素在頁面中的意義，我會特意刪除這個元素然后研究界面產生了什么樣的變化。有點類似于數理統計中的控制變量法。
在開始對表單設計進行研究之前，在下面這個登錄界面的設計中，對其中各個視覺要素作如下命名：
01標簽和占位符
以前在做表單設計的時候，經常糾結的一件事就是：標簽要去掉還是保留。因為所有做界面設計的同學都知道，標簽和占位符都提示了該輸入框輸入的字段內容，有點重復啰嗦之嫌，所以覺得如果將標簽刪除掉也未嘗不可，如下圖所示：
上面的這個畫面看上去不禁要雀躍，因為畫面對齊了，也更加簡潔，似乎標簽真的是多余之物，看起來不無道理。事實上我個人在輸入字段數少于三個的時候也經常采用這種設計方案，只是后來慢慢發現，當輸入字段多于三個之后，這種方案就會出問題了。如下圖所示：
因為輸入框在獲取焦點并有內容輸入的時候占位符就會消失，如上圖中的用戶輸入到第五個字段內容的時候，你真的還知道自己前面輸入的和即將提交到服務器的都是些什么鬼嗎？這個時候就會產生混亂，甚至有不得不回去重新刪除已經填寫好的東西以看到自己填寫了什么。
這種現象從心理學的角度來看，是因為人類的短時記憶局限。
人短時間內只能記住4到6件東西，即是傳說中的“五加減一”原則。但因為在表單輸入的時候需要動用到記憶檢索，占用了部分大腦功耗，“五加減一”將要大打折扣。所以表單設計上更加適用的是“二加減一”的原則，即當用戶需要輸入字段多于三個的時候，就有必要留下標簽一直給用戶提示。
所以有些時候標簽還是有必要留下的。因為標簽會始終如一地說明你輸入的或者即將輸入的是什么內容。
雖然這么說來，但占位符與標簽重復累贅的問題又如何解決呢。其于控制變量法不妨簡單粗暴點將占位符刪除掉試試。如下圖：
這樣看上去也不是不行，內容也能說清楚，不會重復累贅。
但是一直說有源設計，HTML5中特意加入的placeholder占位符也一定有其原因的。事實上在做過很多的表單頁面之后就慢慢知道了，在很多社交網站平臺里，用戶所擁有的可能不僅僅是用戶名，還有注冊郵箱、注冊手機號碼、昵稱等等，到底哪個才是可以用來登錄的？要讓用戶去猜，就是一份失敗的設計，所以這個時候占位符就發揮作用了。占位符起到進一步提示說明應該填寫什么內容的作用，如下圖：
這樣的設計用戶一眼看上去就知道應該怎樣填寫，清晰明了。
只是如果同時保留標簽和占位符又會重復累贅。特別是一些標簽長度長短不一的場景下作排版設計是件十分惱人的事，特別是到了移動端的時候就不知道排板得都是些什么鬼，如下圖所示：
這樣的界面看上去既重復又累贅，還無法對齊。所以必須在內容的排版上再想一下辦法。
其中的一個設計方案是，將標簽往右上移，放在輸入框左上角，這樣的設計使得界面更加整齊，用戶的視線方向可以一直從上往下，而不需要左右來回移動，視覺體驗上也是一種優化。如下圖：
上圖的設計也算是其中一種解決方案吧，具體還是基于不同的場景再選擇不同的排版方式。只是不好的一點是你會發現整個版面看下來都是文字，界面死版，容易視覺疲勞。
我比較喜歡的一種設計方案是是將標簽設計成圖標，這樣一來畫面就顯得靈活而且更加簡潔。因為圖標的提示作用，輸入框已有輸入內容時用戶也能很清楚已經輸入的是什么字段的內容。如下圖所示：
02輸入框
表單設計中輸入框的設計也依然是十分煩惱的事。以前在看過很登錄界面的輸入框，矩形的、圓角矩形的、有邊框的、無邊框的、有底色的、虛線的、只有下劃線的等等，自己在做設計的時候也常常糾結于采用哪一種樣式。為了做出更合理的選擇，有必要深入理解一下輸入框在表單設計中的視覺意義。
還是那種方法（控制變量法），嘗試一下去掉輸入框，如下圖：
第一眼看到這個界面的時候，我的想法是“真不知道這個界面是做啥用的”。
雖然標簽有冒號引出還有占位符的輸入說明，仔細研究一下還是能夠明白文本應該從何處開始輸入，但冒號引出加文字也可以看作是內容展示，給人的感覺是“不覺得那里是個可以輸入文字的區域”也就是說，去掉輸入框之后不能說明輸入區域，同時缺失交互暗示。
其實輸入框在這里并沒有很深層的心理模型，就像我們從小的考試試卷中“姓名：_______ ” 下劃線一樣，只是很簡單的告訴你，這個就是輸入區域。
我們這樣定義輸入框的作用：暗示交互、界定用戶輸入區域。
所以在設計輸入框的時候首要讓用戶一眼就看明白那里就是用來輸入資料的，并且就是那么高，那么寬。至于輸入框采用什么樣式，具體看界面風格以及層次關系而定。倒是覺得一個表單界面存在的目的就是讓用戶填寫并提交，所以輸入框應該作為最主要的層次，一般情況下輸入框與背景拉開對比關系，重點突出。所以這個示例里的界面一開始就用了與背景色相對的白色輸入框。
03提交按鈕
提交按鈕作為表單界面交互的最后一步，提交按鈕的作用是提交表單內容到服務器。所以提交按鈕的設計最基本的是：
1.在視覺上你的按鈕要讓用戶有點擊的欲望；
2.暗示可點擊
在設計上你的銨鈕必須看上去像個按鈕，并讓用戶知道那個區域是可以點擊的，還得讓用戶知道按鈕有什么作用。提示元素可以是文字或者圖形，例如“登錄”“注冊”“提交”“下一步”或者箭頭“→”等。
關系到表單界面的，我一直覺得提交是用戶填寫表單流程的最后一步，所以從表層意義上說，提交按鈕視覺層次應該排在文本框的后面，但事實恰恰相反，很多登錄界面的提交按鈕都給予了最顯眼的視覺層次。如下圖：
對于這種現象不得不細細研究一下其原因。以下面的圖作一個對比。
上圖中左邊的設計的視覺第一層次兩個輸入框，細看上去這樣的設計無可厚非，但從交互和用戶體驗上卻未必適用。第一層次是兩個同等重量的輸入框，用戶第一界接受到的是“這是個填寫的地方”卻未必知道“這個頁面的目的是什么”。
右邊的界面雖然輸入框并不到第一層次，但是高亮的登錄按鈕讓用戶打開界面的瞬間就知道這個界面的目的和意義了。基于頁面交互的唯一性，界面2給人的感覺會清晰很多，也因此很多出色的表單設計都采用了提交按鈕高亮的做法。
倒是挺合理的。
04附加文本
用戶在表單中輸入完畢，點擊提交，界面的使命就已經完成了。所以附加文本在表單設計中歸屬于次要內容，其主要目的是輔助主要交互，一般是根據界面交互要求而添加的導航連接，例如用戶協議、忘記密碼、轉向注冊界面的連接、指明必填項、表單錯誤輸入提示等等。
基于內容的次要性，附加文本在界面中一般弱化層級關系，所用顏色一般偏小，顏色偏淡，上面的界面可以優化設計成如下圖所示：
05總結
以上對表單標簽、占位符、輸入框、提交按鈕以及附加文本等視覺元素進行分析，可總結各要素的意義作用以及設計要點，如下
1.標簽
作用：指明輸入字段內容
要點：1.層級關系要高于輸入框占位符
2.應避免與占位符的提示功能重復累贅
3.可用文字或圖標表示
2.占位符
作用：暗示起始輸入位置，進一步提示輸入內容（樣式、規范等）
要點：只起提示作用，層級關系要低于標簽，一般要用淺色
3.輸入框
作用：暗示可輸入性交互，界定輸入區域
要點：1.輸入框的對齊方式影響界面的整潔和可讀性
2.底色與環境色的對比可以控制層級關系，一般來說輸入框以界定輸入區域為主要功能，層級關系在提交按鈕之后
4.提交按鈕
作用：提交內容到服務器
要點：1.暗示可點擊性，必須讓用戶一眼看出這個是可點擊的交互區域
2.一般情況占據最高的層次關系，暗示整個界面的唯一目的和操作
5.附加文本
作用：輔助說明
要點：附加文本在表單中只起輔助作用，在界面中一般弱化層級關系，所用顏色一般偏小，顏色偏淡
山外有山，人外有人，表單的設計形式上不拘一格，創意也是永無止境的。也說不定某天會有更加貼近視覺交互的表單設計出現。我一直覺得只要深刻理解各視覺要素在界面中的作用和意義，才能做出合理創新。
以上言化僅代表個人觀點，歡迎大神一起探討。
藍藍設計( www.devb.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務