UI設(shè)計(jì)范式之二：造句填空Fill In The Blanks_網(wǎng)頁(yè)設(shè)計(jì)教程

推薦：我們?yōu)槭裁锤陌妫?/a>
這次UCDChina書(shū)友會(huì)主要圍繞著改版展開(kāi)討論，雖然后期扯得比較遠(yuǎn)了（設(shè)計(jì)師們的發(fā)散思維還是很恐怖的），但收獲頗多，總結(jié)起來(lái)還是在前期功能未做足所導(dǎo)致。

問(wèn)題綜述
需要用戶(hù)填寫(xiě)內(nèi)容但又表示不清填為何故。

舉例

適用范圍
當(dāng)你發(fā)現(xiàn)即使為某個(gè)輸入框增加一個(gè)標(biāo)題依然無(wú)法說(shuō)清該輸入框的具體用處的時(shí)候
當(dāng)你不得不用很長(zhǎng)的一段描述來(lái)解釋你的輸入框用途的時(shí)候
當(dāng)你發(fā)現(xiàn)這個(gè)輸入框所填的內(nèi)容正好可以成為某個(gè)句子的一部分的時(shí)候
當(dāng)這個(gè)是必填項(xiàng)的時(shí)候。因?yàn)榘阉�放在句子中能更引起用�?hù)的注重。
不要在句子中加入太多的輸入框。因?yàn)樘�多的填空題會(huì)讓用戶(hù)怒
對(duì)于非必填項(xiàng)盡量少用

解決方案
整理好你的必填項(xiàng)(文本輸入框 text field、單選框 radio button、多選框 checkbox、下拉框combo-box)并把他們?cè)炀?回憶一下小學(xué)老師是怎么教我們的)。這樣用戶(hù)就能邊讀你的句子邊把填空給填了。

假如該輸入框不位于句首或句末的話你得注重這些輸入框可能會(huì)破壞句子的連貫性(譯者：因?yàn)镠TML里面某些輸入框格式會(huì)占去很多頁(yè)面空間，或把句子強(qiáng)制換行等)，盡量不要用高度超過(guò)句子高度的輸入框類(lèi)型。簡(jiǎn)單的文本輸入框或下拉選擇框是最好的選擇。

該范式經(jīng)常被用于復(fù)雜的篩選功能里。比如Apple iTune在定制高級(jí)播放列表(Smart Playlist)的歌曲篩選界面中使用了該范式。

Apple iTune的高級(jí)播放列表定制界面

該范式的最大缺點(diǎn)在于面對(duì)多語(yǔ)言網(wǎng)站的時(shí)候句子會(huì)有不同的翻譯，那么由于語(yǔ)法的不同，輸入框的位置就會(huì)發(fā)生改變。這樣該范式就會(huì)阻礙網(wǎng)站向其他語(yǔ)言版本的翻譯工作。(譯者：尤其對(duì)于使用內(nèi)容治理系統(tǒng)CMS的網(wǎng)站來(lái)說(shuō)這就面臨著要重新設(shè)計(jì)一個(gè)表單的模板)

更多例子

Google高級(jí)搜索

basecamphq.com

原理總結(jié)

通過(guò)把一個(gè)輸入框放到句子中，可以借助句子的上下文來(lái)幫助用戶(hù)更好的理解。有時(shí)候你也會(huì)碰到很難為輸入框造句的時(shí)候。怎么不讓用戶(hù)面對(duì)冷冰冰的計(jì)算機(jī)術(shù)語(yǔ)呢？看一下這個(gè)例子：

Ruby On Rails wiki

例子中的遞交按鈕“Save”和輸入框之作者名字連同取消按鈕“Cancel”一起放入了一個(gè)句子里面。用傳統(tǒng)的方法這個(gè)三個(gè)操作需要分別用三行單獨(dú)的描述。但這里巧妙的運(yùn)用來(lái)本范式，不但把三行變成了一行使這三個(gè)操作的作用表達(dá)清楚得一清二楚。而且還用到了“Input Prompt”范式來(lái)鼓勵(lì)用戶(hù)填寫(xiě)自己的名字。

本范式讓用戶(hù)界面變得自己會(huì)說(shuō)話了。我想人類(lèi)的語(yǔ)言能力和表達(dá)天性會(huì)讓我們很樂(lè)意去把句子填寫(xiě)完整的。

分享：信息架構(gòu)的流程引入
對(duì)內(nèi)對(duì)外討論甚至爭(zhēng)論了無(wú)數(shù)次，分享幾條不成熟看法：交互能解決一個(gè)個(gè)功能，但用戶(hù)的需求是一串串功能，這是我理解為什么交互算過(guò)得去，但網(wǎng)站還是那么爛的原