繼續(xù)上周末的“打造良好UI的32條建議（上）”吧，今次是剩下的16條。這里進(jìn)入譯文。

17.呈現(xiàn)狀態(tài)信息

嘗試在內(nèi)容條目中呈現(xiàn)狀態(tài)信息。例如，郵件列表中可以展示已讀或未讀，發(fā)票列表中可以展示已支付或未支付等等。讓用戶了解內(nèi)容條目所處的特定狀態(tài)，這也是一種信息反饋方式，使用戶知道他們的行為是否產(chǎn)生了正確的結(jié)果，或是讓他們了解接下來需要執(zhí)行怎樣的操作。

18.在Call to Action中讓用戶了解可以得到的好處

想象一個(gè)頁面中的兩個(gè)按鈕。一個(gè)寫著“幫你省錢”，一個(gè)要你“注冊”。我打賭點(diǎn)擊第一個(gè)按鈕的人會(huì)更多，因?yàn)橐粋€(gè)孤零零的“注冊”難以展示產(chǎn)品的內(nèi)在價(jià)值。或者，展示好處的內(nèi)容也可以放在距離Call to Action很近的地方，以便讓用戶知道為什么要去點(diǎn)擊按鈕。當(dāng)然，不是所有的按鈕都需要展示這樣的文案；那些任務(wù)驅(qū)動(dòng)的“普通”按鈕更適于對轉(zhuǎn)化率沒有什么要求的環(huán)節(jié)當(dāng)中，或是需要用戶反復(fù)執(zhí)行的操作上。

19.使用直接操作代替情境菜單

有時(shí)，可以讓某些特定的界面元素具有交互性，來觸發(fā)顯示相關(guān)的任務(wù)選項(xiàng)，而不是直接提供一系列關(guān)聯(lián)性不強(qiáng)的動(dòng)作列表。例如，當(dāng)呈現(xiàn)一個(gè)數(shù)據(jù)列表時(shí)，我們通常需要允許用戶對每條數(shù)據(jù)進(jìn)行操作。你可以讓用戶通過鼠標(biāo)懸停使每個(gè)列表單元中的相關(guān)操作呈現(xiàn)出來(刪除、重命名等等)。另外一個(gè)關(guān)于直接操作的常見案例就是點(diǎn)擊數(shù)據(jù)條目本身(譬如一段地址信息)，使其進(jìn)入編輯狀態(tài)。相比于無視上下文情境而直接展示各種操作選項(xiàng)，這種交互模式可以讓用戶更加聚焦于當(dāng)前的目標(biāo)，減少界面復(fù)雜性和操作步驟。但要記住，對于一些較為常規(guī)的、情境化確實(shí)不強(qiáng)的普通操作來說，情境菜單仍有它的用處。

20.直接呈現(xiàn)表單

直接將注冊表單呈現(xiàn)在landing頁面當(dāng)中可以帶來諸多好處。首先，我們可以從流程當(dāng)中節(jié)省出一步，減少一個(gè)多余的頁面，讓用戶更省時(shí)。第二，直接將各表單字段呈現(xiàn)在這里，用戶就能對注冊流程的長度有一個(gè)明確的認(rèn)知。這種做法的前提是你的表單確實(shí)足夠短；當(dāng)然，你的表單也應(yīng)該足夠短，這應(yīng)該是你的設(shè)計(jì)目標(biāo)之一。

21.使用動(dòng)效，而不是突兀的切換

有些界面元素會(huì)隨著用戶的行為而隱藏、呈現(xiàn)、移動(dòng)、縮放。如果能讓這些反饋動(dòng)作隨著時(shí)間的推移而逐漸呈現(xiàn)出來，那么它們將更加容易被理解。動(dòng)效，讓反饋行為得到刻意的延緩，這可以使用戶的認(rèn)知過程得到尊重，給他們更多時(shí)間來理解界面元素在位置和尺寸上的變化所代表的意義。不過要記得，如果動(dòng)效過程超過0.5秒，用戶通常就會(huì)產(chǎn)生“緩慢”的感知。所以對那些需要快速完成的交互任務(wù)來說，動(dòng)效的持續(xù)時(shí)長一定要控制好。

22.嘗試漸進(jìn)式吸引，而不是急匆匆的要用戶注冊

與其不明不白的讓用戶立刻注冊，為什么不讓用戶試著執(zhí)行一些任務(wù)，在這個(gè)過程中充分展示產(chǎn)品的價(jià)值與個(gè)性呢？一旦用戶了解了產(chǎn)品的價(jià)值，并知道怎樣去獲得它，他們就會(huì)更愿意完成轉(zhuǎn)化。漸進(jìn)式吸引可以盡量推遲注冊流程，給用戶更多的時(shí)間和自由去體驗(yàn)?zāi)愕漠a(chǎn)品。

23.少些邊框，少些干擾

邊框會(huì)對頁面中的主要內(nèi)容產(chǎn)生干擾作用。用戶的注意力，對我們來說是非常珍貴的資源，因?yàn)槲覀冊谝欢螘r(shí)間內(nèi)只能抓住那么一點(diǎn)點(diǎn)。誠然，從設(shè)計(jì)的角度說，邊框可以用來清晰而準(zhǔn)確的界定空間范圍，但同時(shí)，它們也會(huì)消耗用戶的認(rèn)知能量。想要清晰的定義界面元素之間的邏輯關(guān)聯(lián)，同時(shí)又不會(huì)過多吸引用戶的注意力，你可以試著通過優(yōu)先級、對齊、背景色、字體等方式對元素進(jìn)行分組。在使用一些比較抽象化的UI設(shè)計(jì)(原型)工具時(shí)，我們很容易把線框矩形放的到處都是。在實(shí)際界面中，這些線框矩形會(huì)帶來一種隔離感，使其中的內(nèi)容脫離頁面整體的邏輯控制。因此，包含過多條條框框的頁面總會(huì)給人一種嘈雜凌亂的感覺。當(dāng)然有些時(shí)候，在這里或那里放一些分隔線還是有用的，但盡量首先思考一下是否有更清爽清晰的方式，既確保邏輯關(guān)系的體現(xiàn)，又能減少對主要內(nèi)容的干擾。

24.體現(xiàn)好處，而不是陳述功能

以目標(biāo)為導(dǎo)向，人們更關(guān)注產(chǎn)品能給他們帶來怎樣的好處，而不是產(chǎn)品具有哪些功能?！昂锰帯笨梢愿忧逦亩x產(chǎn)品的價(jià)值。Chris Guillebeau在”The $100 Startup”當(dāng)中寫道，人們非常關(guān)注于擁有更多的愛、金錢、認(rèn)同、能自由分配的時(shí)間；同時(shí)希望有更少的壓力、矛盾、麻煩與不確定性。當(dāng)你向用戶介紹產(chǎn)品時(shí)，我相信總會(huì)有一定的空間來向他們展示產(chǎn)品所帶來的好處，能幫他們解決的問題，等等。

25.做好空數(shù)據(jù)狀態(tài)的設(shè)計(jì)

不同的情況下，你可能需要向用戶展示0條、1條、10條或成千上萬條數(shù)據(jù)，它們可能需要以不同的方式進(jìn)行展示。而其中最常見的，就是從空數(shù)據(jù)狀態(tài)到多條數(shù)據(jù)的過渡。很多時(shí)候，我們會(huì)非常在意數(shù)據(jù)的展示形式，卻忽略了初始狀態(tài)下沒有數(shù)據(jù)時(shí)的形式，這會(huì)讓用戶覺得產(chǎn)品并沒有經(jīng)過認(rèn)真的設(shè)計(jì)。在很多應(yīng)用里，空數(shù)據(jù)狀態(tài)就是個(gè)冰冷的世界，用戶第一次使用時(shí)只能看到一個(gè)空白的界面，沒有任何引導(dǎo)。其實(shí)，我們完全可以讓空數(shù)據(jù)狀態(tài)成為引導(dǎo)用戶學(xué)習(xí)，甚至是建立情感關(guān)聯(lián)的良好契機(jī)。

26.默認(rèn)參與

“默認(rèn)參與”的意思就是讓用戶在默認(rèn)情況下不需要執(zhí)行任何操作便可以觸發(fā)某種行為(默認(rèn)選中)。與之相對的是“默認(rèn)不參與”，也就是用戶必須首先執(zhí)行一個(gè)選擇動(dòng)作，才可以觸發(fā)參與?！澳J(rèn)參與”的策略有兩點(diǎn)好處， 首先，它可以減小行為流程中的阻力，因?yàn)橛脩舨恍枰鋈魏问拢坏诙?，它是一種有效的推薦機(jī)制，用戶會(huì)覺得，“既然他們推薦這樣做，說明多數(shù)人會(huì)這樣做，那么我可能也該這樣做”。當(dāng)然，這種策略時(shí)常會(huì)引發(fā)爭議，它會(huì)被看做某種低劣的營銷策略，因?yàn)楹芏喈a(chǎn)品會(huì)故意降低“默認(rèn)參與”文案的可讀性，有些則會(huì)在里面玩文字游戲，例如使用雙重否定等等。要正確而有效的使用這種方法，你需要讓文案清晰易讀，容易被正確的理解，使用戶明白其默認(rèn)的含義究竟是什么。

27.保持一致，不要讓用戶重新學(xué)習(xí)

保持界面設(shè)計(jì)的一致性，這可能是我們最熟知的一條設(shè)計(jì)原則了。在界面元素的視覺表現(xiàn)形式及交互模式上保持良好的一致性，這可以有效降低用戶在使用產(chǎn)品時(shí)的學(xué)習(xí)成本。當(dāng)我們點(diǎn)擊按鈕或是移動(dòng)滑塊時(shí)，我們會(huì)希望這些元素的樣式、行為及結(jié)果與我們的期望保持一致。一旦失去一致性，人們就需要學(xué)習(xí)新的模式。你可以通過很多方式來保持設(shè)計(jì)的一致性：配色、行為、位置、大小、形狀、文字標(biāo)題、語言等等。但是，你也要知道，“不一致性”也有它的用武之處?！安灰恢隆钡慕缑嬖鼗蛐袨槟Ｊ綍?huì)從較深的層次上引起人們的關(guān)注，所以你可以試著在特別需要用戶關(guān)注某些東西的時(shí)候使用這種方式。

28.使用合理的默認(rèn)值來代替手動(dòng)填寫

在表單字段中預(yù)先填寫合理的默認(rèn)值，這是一種幫助用戶盡快完成表單填寫的常見方式。最差勁的體驗(yàn)之一，就是用戶曾經(jīng)填寫過某些數(shù)據(jù)，而你還要他們重復(fù)這些動(dòng)作。使用經(jīng)過調(diào)研驗(yàn)證的恰當(dāng)數(shù)據(jù)，或是曾經(jīng)保存過的用戶輸入內(nèi)容作為表單字段的默認(rèn)值，讓用戶少做些事情，多些輕松。

29.使用約定的設(shè)計(jì)模式，不要重新發(fā)明輪子

“約定”是“一致性”的老大哥——如果我們能在一個(gè)界面當(dāng)中保持設(shè)計(jì)的一致性，用戶就不需要學(xué)習(xí)太多新東西；如果能在產(chǎn)品全局使用約定一致的設(shè)計(jì)規(guī)則，學(xué)習(xí)曲線就會(huì)進(jìn)一步下降。在UI設(shè)計(jì)約定的幫助下，我們知道要關(guān)閉一個(gè)界面，通常需要在右上角(或左上角)點(diǎn)擊相關(guān)的按鈕；我們知道“設(shè)置”按鈕通常會(huì)長成什么樣子。當(dāng)然，總會(huì)有設(shè)計(jì)約定無法滿足需求、必須使用新模式的時(shí)候。

30.“避免損失”還是“獲得更多”？

人們都是想贏怕輸?shù)?。根?jù)說服力心理學(xué)中的規(guī)則，相比于得到新的好處，我們更傾向于避免損失已有的東西。這條規(guī)則也適用于怎樣向用戶展示產(chǎn)品的價(jià)值。闡明你的產(chǎn)品可以幫助用戶避免怎樣的損失，包括健康、財(cái)富或社會(huì)地位，這種策略可能會(huì)比單純向他們展示產(chǎn)品所帶來的額外收益要更加有效。想想看，保險(xiǎn)公司賣的究竟是什么？是那些在意外發(fā)生之后可以得到的“收益”，還是一種對既有事物的保障感？

31.視覺的層次與節(jié)奏

好的視覺層次與節(jié)奏可以幫你有效的區(qū)分內(nèi)容的優(yōu)先級。視覺層次是通過對齊方式、距離、配色、縮進(jìn)、字號(hào)、元素大小、邊距等要素體現(xiàn)出來的。當(dāng)你正確使用這些視覺設(shè)計(jì)要素時(shí)，它們能有效的提升內(nèi)容的可讀性，為人們的注意力提供方向，讓他們知道應(yīng)該在哪里停下并認(rèn)真閱讀。良好的視覺層次可以為頁面帶來必要的阻力，讓人們從上到下更有節(jié)奏、更有關(guān)注要點(diǎn)的瀏覽頁面，而不是漫無目的的迅速掃視。你希望用戶通過高速公路盡快到達(dá)終點(diǎn)(瀏覽到頁面底部)，還是走一條景觀路線，看到并記住沿途的有趣事物？

32.為相關(guān)的元素分組

這是提升可用性的基本方法之一。我們都知道，刀和叉，打開和保存，這些東西應(yīng)該被放的更近一些。具有關(guān)聯(lián)性的要素在位置上應(yīng)該更緊密，以體現(xiàn)邏輯上的相關(guān)性，降低界面整體的認(rèn)知負(fù)荷。在極其有限的會(huì)話時(shí)間內(nèi)再浪費(fèi)時(shí)間來尋找內(nèi)容和功能，這對于用戶來說可不是有意思的事。

來源：be for web