如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里

來源：UI中國

一個好的表單界面設(shè)計，應(yīng)沒有一個多余的視覺要素

表單設(shè)計的視覺要素分析

        在我為期不長的設(shè)計師生涯開始的時候，所做的設(shè)計全是一鼓激情以及直覺，憑著那么僅僅一點(diǎn)的與生俱來，做出來的作品雖然還能過目，但無論如何談不上優(yōu)秀。也是不知道從什么時候開始有了這樣一種感覺：每一個設(shè)計方案都應(yīng)該是有原因有依據(jù)的。

        開始覺得一部好的電影，應(yīng)該沒有一個多余的片段；一部好的文學(xué)作品，應(yīng)該沒有一句多余的語句；也同樣，一份好的設(shè)計應(yīng)該沒有一個多余的視覺元素。

        所以在表單設(shè)計中，每一個視覺元素都有其存在的意義。有時候為了深入理解其中某一元素在頁面中的意義，我會特意刪除這個元素然后研究界面產(chǎn)生了什么樣的變化。有點(diǎn)類似于數(shù)理統(tǒng)計中的控制變量法。

在開始對表單設(shè)計進(jìn)行研究之前，在下面這個登錄界面的設(shè)計中，對其中各個視覺要素作如下命名：

01標(biāo)簽和占位符

        以前在做表單設(shè)計的時候，經(jīng)常糾結(jié)的一件事就是：標(biāo)簽要去掉還是保留。因為所有做界面設(shè)計的同學(xué)都知道，標(biāo)簽和占位符都提示了該輸入框輸入的字段內(nèi)容，有點(diǎn)重復(fù)啰嗦之嫌，所以覺得如果將標(biāo)簽刪除掉也未嘗不可，如下圖所示：

        上面的這個畫面看上去不禁要雀躍，因為畫面對齊了，也更加簡潔，似乎標(biāo)簽真的是多余之物，看起來不無道理。事實(shí)上我個人在輸入字段數(shù)少于三個的時候也經(jīng)常采用這種設(shè)計方案，只是后來慢慢發(fā)現(xiàn)，當(dāng)輸入字段多于三個之后，這種方案就會出問題了。如下圖所示：

        因為輸入框在獲取焦點(diǎn)并有內(nèi)容輸入的時候占位符就會消失，如上圖中的用戶輸入到第五個字段內(nèi)容的時候，你真的還知道自己前面輸入的和即將提交到服務(wù)器的都是些什么鬼嗎？這個時候就會產(chǎn)生混亂，甚至有不得不回去重新刪除已經(jīng)填寫好的東西以看到自己填寫了什么。

        這種現(xiàn)象從心理學(xué)的角度來看，是因為人類的短時記憶局限。

人短時間內(nèi)只能記住4到6件東西，即是傳說中的“五加減一”原則。但因為在表單輸入的時候需要動用到記憶檢索，占用了部分大腦功耗，“五加減一”將要大打折扣。所以表單設(shè)計上更加適用的是“二加減一”的原則，即當(dāng)用戶需要輸入字段多于三個的時候，就有必要留下標(biāo)簽一直給用戶提示。

        所以有些時候標(biāo)簽還是有必要留下的。因為標(biāo)簽會始終如一地說明你輸入的或者即將輸入的是什么內(nèi)容。

        雖然這么說來，但占位符與標(biāo)簽重復(fù)累贅的問題又如何解決呢。其于控制變量法不妨簡單粗暴點(diǎn)將占位符刪除掉試試。如下圖：

        這樣看上去也不是不行，內(nèi)容也能說清楚，不會重復(fù)累贅。

        但是一直說有源設(shè)計，HTML5中特意加入的placeholder占位符也一定有其原因的。事實(shí)上在做過很多的表單頁面之后就慢慢知道了，在很多社交網(wǎng)站平臺里，用戶所擁有的可能不僅僅是用戶名，還有注冊郵箱、注冊手機(jī)號碼、昵稱等等，到底哪個才是可以用來登錄的？要讓用戶去猜，就是一份失敗的設(shè)計，所以這個時候占位符就發(fā)揮作用了。占位符起到進(jìn)一步提示說明應(yīng)該填寫什么內(nèi)容的作用，如下圖：

        這樣的設(shè)計用戶一眼看上去就知道應(yīng)該怎樣填寫，清晰明了。

        只是如果同時保留標(biāo)簽和占位符又會重復(fù)累贅。特別是一些標(biāo)簽長度長短不一的場景下作排版設(shè)計是件十分惱人的事，特別是到了移動端的時候就不知道排板得都是些什么鬼，如下圖所示：

        這樣的界面看上去既重復(fù)又累贅，還無法對齊。所以必須在內(nèi)容的排版上再想一下辦法。

        其中的一個設(shè)計方案是，將標(biāo)簽往右上移，放在輸入框左上角，這樣的設(shè)計使得界面更加整齊，用戶的視線方向可以一直從上往下，而不需要左右來回移動，視覺體驗上也是一種優(yōu)化。如下圖：

         上圖的設(shè)計也算是其中一種解決方案吧，具體還是基于不同的場景再選擇不同的排版方式。只是不好的一點(diǎn)是你會發(fā)現(xiàn)整個版面看下來都是文字，界面死版，容易視覺疲勞。

         我比較喜歡的一種設(shè)計方案是是將標(biāo)簽設(shè)計成圖標(biāo)，這樣一來畫面就顯得靈活而且更加簡潔。因為圖標(biāo)的提示作用，輸入框已有輸入內(nèi)容時用戶也能很清楚已經(jīng)輸入的是什么字段的內(nèi)容。如下圖所示：

02輸入框

        表單設(shè)計中輸入框的設(shè)計也依然是十分煩惱的事。以前在看過很登錄界面的輸入框，矩形的、圓角矩形的、有邊框的、無邊框的、有底色的、虛線的、只有下劃線的等等，自己在做設(shè)計的時候也常常糾結(jié)于采用哪一種樣式。為了做出更合理的選擇，有必要深入理解一下輸入框在表單設(shè)計中的視覺意義。

還是那種方法（控制變量法），嘗試一下去掉輸入框，如下圖：

         第一眼看到這個界面的時候，我的想法是“真不知道這個界面是做啥用的”。

         雖然標(biāo)簽有冒號引出還有占位符的輸入說明，仔細(xì)研究一下還是能夠明白文本應(yīng)該從何處開始輸入，但冒號引出加文字也可以看作是內(nèi)容展示，給人的感覺是“不覺得那里是個可以輸入文字的區(qū)域”也就是說，去掉輸入框之后不能說明輸入?yún)^(qū)域，同時缺失交互暗示。

         其實(shí)輸入框在這里并沒有很深層的心理模型，就像我們從小的考試試卷中“姓名：_______ ” 下劃線一樣，只是很簡單的告訴你，這個就是輸入?yún)^(qū)域。

         我們這樣定義輸入框的作用：暗示交互、界定用戶輸入?yún)^(qū)域。

         所以在設(shè)計輸入框的時候首要讓用戶一眼就看明白那里就是用來輸入資料的，并且就是那么高，那么寬。至于輸入框采用什么樣式，具體看界面風(fēng)格以及層次關(guān)系而定。倒是覺得一個表單界面存在的目的就是讓用戶填寫并提交，所以輸入框應(yīng)該作為最主要的層次，一般情況下輸入框與背景拉開對比關(guān)系，重點(diǎn)突出。所以這個示例里的界面一開始就用了與背景色相對的白色輸入框。

03提交按鈕

         提交按鈕作為表單界面交互的最后一步，提交按鈕的作用是提交表單內(nèi)容到服務(wù)器。所以提交按鈕的設(shè)計最基本的是：

         1.在視覺上你的按鈕要讓用戶有點(diǎn)擊的欲望；

         2.暗示可點(diǎn)擊

         在設(shè)計上你的銨鈕必須看上去像個按鈕，并讓用戶知道那個區(qū)域是可以點(diǎn)擊的，還得讓用戶知道按鈕有什么作用。提示元素可以是文字或者圖形，例如“登錄”“注冊”“提交”“下一步”或者箭頭“→”等。

        關(guān)系到表單界面的，我一直覺得提交是用戶填寫表單流程的最后一步，所以從表層意義上說，提交按鈕視覺層次應(yīng)該排在文本框的后面，但事實(shí)恰恰相反，很多登錄界面的提交按鈕都給予了最顯眼的視覺層次。如下圖：

         對于這種現(xiàn)象不得不細(xì)細(xì)研究一下其原因。以下面的圖作一個對比。

         上圖中左邊的設(shè)計的視覺第一層次兩個輸入框，細(xì)看上去這樣的設(shè)計無可厚非，但從交互和用戶體驗上卻未必適用。第一層次是兩個同等重量的輸入框，用戶第一界接受到的是“這是個填寫的地方”卻未必知道“這個頁面的目的是什么”。

         右邊的界面雖然輸入框并不到第一層次，但是高亮的登錄按鈕讓用戶打開界面的瞬間就知道這個界面的目的和意義了?；陧撁娼换サ奈ㄒ恍?，界面2給人的感覺會清晰很多，也因此很多出色的表單設(shè)計都采用了提交按鈕高亮的做法。

        倒是挺合理的。

04附加文本

         用戶在表單中輸入完畢，點(diǎn)擊提交，界面的使命就已經(jīng)完成了。所以附加文本在表單設(shè)計中歸屬于次要內(nèi)容，其主要目的是輔助主要交互，一般是根據(jù)界面交互要求而添加的導(dǎo)航連接，例如用戶協(xié)議、忘記密碼、轉(zhuǎn)向注冊界面的連接、指明必填項、表單錯誤輸入提示等等。

          基于內(nèi)容的次要性，附加文本在界面中一般弱化層級關(guān)系，所用顏色一般偏小，顏色偏淡，上面的界面可以優(yōu)化設(shè)計成如下圖所示：

05總結(jié)

以上對表單標(biāo)簽、占位符、輸入框、提交按鈕以及附加文本等視覺元素進(jìn)行分析，可總結(jié)各要素的意義作用以及設(shè)計要點(diǎn)，如下

1.標(biāo)簽

作用：指明輸入字段內(nèi)容

要點(diǎn)：1.層級關(guān)系要高于輸入框占位符

           2.應(yīng)避免與占位符的提示功能重復(fù)累贅

           3.可用文字或圖標(biāo)表示

2.占位符

作用：暗示起始輸入位置，進(jìn)一步提示輸入內(nèi)容（樣式、規(guī)范等）

要點(diǎn)：只起提示作用，層級關(guān)系要低于標(biāo)簽，一般要用淺色          

3.輸入框

作用：暗示可輸入性交互，界定輸入?yún)^(qū)域

要點(diǎn)：1.輸入框的對齊方式影響界面的整潔和可讀性

           2.底色與環(huán)境色的對比可以控制層級關(guān)系，一般來說輸入框以界定輸入?yún)^(qū)域為主要功能，層級關(guān)系在提交按鈕之后          

4.提交按鈕

作用：提交內(nèi)容到服務(wù)器

要點(diǎn)：1.暗示可點(diǎn)擊性，必須讓用戶一眼看出這個是可點(diǎn)擊的交互區(qū)域

           2.一般情況占據(jù)最高的層次關(guān)系，暗示整個界面的唯一目的和操作          

5.附加文本

作用：輔助說明

要點(diǎn)：附加文本在表單中只起輔助作用，在界面中一般弱化層級關(guān)系，所用顏色一般偏小，顏色偏淡

        山外有山，人外有人，表單的設(shè)計形式上不拘一格，創(chuàng)意也是永無止境的。也說不定某天會有更加貼近視覺交互的表單設(shè)計出現(xiàn)。我一直覺得只要深刻理解各視覺要素在界面中的作用和意義，才能做出合理創(chuàng)新。

        以上言化僅代表個人觀點(diǎn)，歡迎大神一起探討。

藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)