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

來(lái)源：UI中國(guó)

一個(gè)好的表單界面設(shè)計(jì)，應(yīng)沒(méi)有一個(gè)多余的視覺(jué)要素

表單設(shè)計(jì)的視覺(jué)要素分析

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

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

        所以在表單設(shè)計(jì)中，每一個(gè)視覺(jué)元素都有其存在的意義。有時(shí)候?yàn)榱松钊肜斫馄渲心骋辉卦陧?yè)面中的意義，我會(huì)特意刪除這個(gè)元素然后研究界面產(chǎn)生了什么樣的變化。有點(diǎn)類似于數(shù)理統(tǒng)計(jì)中的控制變量法。

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

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

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

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

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

        這種現(xiàn)象從心理學(xué)的角度來(lái)看，是因?yàn)槿祟惖亩虝r(shí)記憶局限。

人短時(shí)間內(nèi)只能記住4到6件東西，即是傳說(shuō)中的“五加減一”原則。但因?yàn)樵诒韱屋斎氲臅r(shí)候需要?jiǎng)佑玫接洃洐z索，占用了部分大腦功耗，“五加減一”將要大打折扣。所以表單設(shè)計(jì)上更加適用的是“二加減一”的原則，即當(dāng)用戶需要輸入字段多于三個(gè)的時(shí)候，就有必要留下標(biāo)簽一直給用戶提示。

        所以有些時(shí)候標(biāo)簽還是有必要留下的。因?yàn)?strong>標(biāo)簽會(huì)始終如一地說(shuō)明你輸入的或者即將輸入的是什么內(nèi)容。

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

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

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

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

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

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

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

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

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

02輸入框

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

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

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

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

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

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

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

03提交按鈕

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

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

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

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

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

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

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

         右邊的界面雖然輸入框并不到第一層次，但是高亮的登錄按鈕讓用戶打開(kāi)界面的瞬間就知道這個(gè)界面的目的和意義了。基于頁(yè)面交互的唯一性，界面2給人的感覺(jué)會(huì)清晰很多，也因此很多出色的表單設(shè)計(jì)都采用了提交按鈕高亮的做法。

        倒是挺合理的。

04附加文本

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

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

05總結(jié)

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

1.標(biāo)簽

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

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

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

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

2.占位符

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

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

3.輸入框

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

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

           2.底色與環(huán)境色的對(duì)比可以控制層級(jí)關(guān)系，一般來(lái)說(shuō)輸入框以界定輸入?yún)^(qū)域?yàn)橹饕δ埽瑢蛹?jí)關(guān)系在提交按鈕之后          

4.提交按鈕

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

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

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

5.附加文本

作用：輔助說(shuō)明

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

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

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

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