今天的話題，來自Goodui.org，關(guān)于提升頁面易用性及轉(zhuǎn)化率。本文帶來的建議和觀點，較適用于Web服務(wù)和移動應(yīng)用的Landing頁面。我們可以看到越來越多這樣的頁面，有些相當(dāng)出彩，市面上也有不少相關(guān)的設(shè)計展示匯總文章。而本文則從設(shè)計原則和實踐的角度帶來一些思想武器供我們學(xué)習(xí)參考。

全文共32個要點，較長，今天先上一半，下周補完。接下來進(jìn)入譯文。

1.嘗試單欄布局

單欄布局可以讓你對內(nèi)容敘事進(jìn)行更好的控制。 從上到下的方式能夠以更符合讀者預(yù)期的方式對他們進(jìn)行引導(dǎo)，而多欄布局很有可能對頁面的主要目標(biāo)產(chǎn)生干擾作用。試著通過故事來引導(dǎo)用戶，并在底部放置最重要的Call to Action。

2.贈送禮物，而不是急于成交

向用戶贈送禮物，這不僅是友好的表現(xiàn)，而且是一種基于互惠原則的說服策略。所謂互惠，顧名思義，如果你通過贈予象征性的好處來表示友好，那么將來對方也會對你進(jìn)行回饋。

3.整合相似的功能，以簡化UI

我們會在無意當(dāng)中創(chuàng)造出多個功能類似或相同的元素，不奇怪，這是基本的熵原理——事物總是在向混亂的方向發(fā)展。留意那些名稱不同但功能重復(fù)的元素，這會增加用戶的認(rèn)知負(fù)荷，使他們產(chǎn)生疲勞感。通常，UI的復(fù)雜度越高，用戶的學(xué)習(xí)曲線就越陡峭。考慮不定期的對產(chǎn)品UI進(jìn)行評估，對那些功能類似的元素進(jìn)行整合。

4.展示社會認(rèn)同，而非自吹自擂

社會認(rèn)同是另一種可以直接提升轉(zhuǎn)化率的說服策略。他人對你產(chǎn)品的談?wù)摵唾澰S，將會使Call to Action在用戶看來更具吸引力。試著使用一些知名機構(gòu)或媒體頒發(fā)的鑒定證書，或展示相關(guān)數(shù)據(jù)，這些都是很好的社會認(rèn)同證明。

5.多次展示Call to Action

這種方式特別適合于單欄布局的長頁面，或者也可以讓Call to Action在多個頁面中多次出現(xiàn)。你自然不想在一個頁面中一口氣展示10個同樣的Call to Action，然而如今長頁面越來越普遍，讓所有內(nèi)容都保持在“折線以上”的原則越來越不受用。你可以試著在第一屏當(dāng)中放置一個不那么強的Call to Action，然后將作用相同但視覺形式更突出的Call to Action放置在內(nèi)容底部。當(dāng)人們看過所有內(nèi)容后，他們會停下來，思考一下接下來做些什么——就在這里，完成轉(zhuǎn)化或關(guān)閉交易。

6.為交互元素使用更顯著、更具對比度的視覺樣式

例如配色、層次、對比等視覺風(fēng)格要素可以幫助人們更好的理解和使用你的產(chǎn)品界面，讓他們知道自己現(xiàn)在在哪，接下來可以去哪。為了清晰的呈現(xiàn)這些信息，可點擊元素(鏈接、按鈕)以及可選擇項目(選項)、普通文字內(nèi)容的視覺風(fēng)格必須彼此形成顯著的差異，并且在全局范圍內(nèi)保持風(fēng)格的一致性。在下面的草圖范例中，我使用藍(lán)色來表示可點擊元素，黑色文字表示已選擇或當(dāng)前所在位置標(biāo)題。如果你能正確的使用視覺風(fēng)格，用戶將能更好的通過這些視覺線索瀏覽界面。絕不要讓這幾類視覺元素的呈現(xiàn)方式含糊不清，否則你就是在給用戶找麻煩。

7.推薦，而不是羅列選項

在展示多個產(chǎn)品選項時，可以嘗試重點推薦其中的一種，因為很多用戶就是需要一點推動。我相信有相關(guān)的心理學(xué)研究可以證明，選項越多，人們做選擇的難度就越高，某個選項被選中的概率就越低。推薦多個產(chǎn)品中的一種，突出展示其相關(guān)信息，使其權(quán)重高于其他幾個選項，有用。

8.提供撤銷功能，而不是彈出確認(rèn)

設(shè)想一下，你剛剛點擊了一個按鈕或鏈接。撤銷功能尊重人類的基本意圖，允許首先平滑的產(chǎn)生相應(yīng)的行為。而另一方面，彈出確認(rèn)的形式會質(zhì)疑用戶的意圖，致使用戶對自己要做的事情產(chǎn)生疑慮。我愿意假設(shè)，多數(shù)時候，用戶的行為都符合自己的意圖，誤操作只是少數(shù)情況。當(dāng)用戶需要反復(fù)執(zhí)行某個行為的時候，低效、丑陋的彈出確認(rèn)就會一遍一遍的呈現(xiàn)，非常不人性化。嘗試通過撤銷功能讓用戶感覺自己正在充分控制局面，盡量不要通過確認(rèn)來提出質(zhì)疑。

9.聲明目標(biāo)用戶類型

你的產(chǎn)品是面向所有人的還是精確的鎖定某類人群？直言產(chǎn)品和服務(wù)的目標(biāo)用戶類型，這也是提升轉(zhuǎn)化率的有效方式之一。通過對用戶資質(zhì)的描述，你可以更精確的與你的目標(biāo)用戶建立關(guān)聯(lián)，而且會帶來一種“排他”的情感暗示。當(dāng)然，這種策略也有一定的風(fēng)險，你可能會將潛在用戶的范圍限定的過小。但是我們必須相信，透明可以帶來信任。

10.直截了當(dāng)，不要拐彎抹角

你可以用顫抖的聲音沒有把握的傳遞信息，也可以自信滿滿的把話講出來。如果你喜歡以問號結(jié)束信息的內(nèi)容，并且用到“也許”、“可能”、“有興趣嗎？”、“想要xxxx嗎？”這樣的辭藻，那么你可以考慮一下增強自己的信心和權(quán)威性了。要提升轉(zhuǎn)化率，你有不少空間可以直截了當(dāng)?shù)年U述內(nèi)容，告訴人們應(yīng)該做些什么。

11.對比鮮明，不要似是而非

讓你的Call to Action相比于周圍的元素來說更加突出，容易辨識。你可以使用一系列的方法很輕松的提升其對比度：通過色調(diào)，你能在元素之間建立明暗對比；通過深度，你能在特定的元素與其余內(nèi)容之間建立層次(例如使用陰影和漸變效果)。此外，你還可以從色盤中挑選互補色，用在不同的元素當(dāng)中。綜合使用這些方法，鮮明的對比就可以在Call to Action與其他內(nèi)容之間建立起來了。

12.展示源產(chǎn)地

展示出你、你的產(chǎn)品或服務(wù)來自哪里，這可以讓你與用戶之間的溝通向個人化的層面邁進(jìn)一步。國家、州、城市的信息，這些都像是人在做自我介紹一樣，使產(chǎn)品給人的感覺更加友好。通常，表明產(chǎn)品的源產(chǎn)地也可以讓人或多或少的覺得質(zhì)量方面比較上檔次。

13.少些表單，讓用戶輕松些

人類生來就會對勞動密集型任務(wù)產(chǎn)生抵觸心理，而填寫表單就是這樣一種任務(wù)。你每向用戶提供一個表單字段，用戶放棄填寫轉(zhuǎn)身離開的風(fēng)險就會高一點點。每個人打字的速度是不同的，而目前來說在移動設(shè)備上打字仍然是讓人相當(dāng)厭惡的事情。問問自己每個表單字段都是真正必要的嗎？如果你確實有很多非必填的字段需要提供給用戶來獲取相關(guān)信息，也可以考慮將它們移至單獨的頁面或任務(wù)狀態(tài)當(dāng)中。要把表單搞大是很容易的，但無益于提升轉(zhuǎn)化率。

14.讓選項一覽無余

你每使用一個下拉菜單，就會隱藏掉一些行為選項，用戶就會需要多付出些力氣來找到它們。如果那些隱藏掉的選項是要被放置在用戶瀏覽內(nèi)容、完成決策的主要路徑上的，那么你也許應(yīng)該考慮一下將它們一覽無余的呈現(xiàn)出來。而對于那些可以預(yù)計的、無需學(xué)習(xí)成本的操作，例如選擇日期和時間，或地理位置設(shè)置等，仍可以保持下拉菜單的形式。有時，下拉菜單也可以適用于那些需要用戶反復(fù)執(zhí)行相同動作的界面；但如果某些操作是保證轉(zhuǎn)化率提升的主要Call to Action，在考慮下拉菜單的時候還是小心為妙。

15.保持內(nèi)容的連貫有序，避免“結(jié)束”的假象

“內(nèi)容結(jié)束”的假象是轉(zhuǎn)化率的殺手。特別是在長頁面中那些段落分隔的地方，當(dāng)心不要讓用戶覺得內(nèi)容已經(jīng)結(jié)束掉了。試著確定一種視覺模式與節(jié)奏，讓用戶可以得到明確的指引，持續(xù)閱讀內(nèi)容。對于有可能出現(xiàn)在“折現(xiàn)”位置的留白或內(nèi)容間距，要確保它們的尺寸不會過大。

16.保持聚焦，別讓用戶被鏈接淹沒

我們時常會創(chuàng)建出那種從左到右從上到下到處都是鏈接的頁面，并希望這樣可以滿足多數(shù)用戶的需求。不過如果你要打造的是敘事類的頁面，并會在內(nèi)容底部放置重要的Call to Action，那么建議你考慮更簡潔的頁面形式。要記住，任何位于主Call to Action之上的鏈接都會帶來一定的風(fēng)險，有可能將用戶從你最希望他們做的事情當(dāng)中帶離。留意頁面上鏈接的數(shù)量；在發(fā)現(xiàn)型頁面(鏈接較多，相關(guān)內(nèi)容入口較多)與管道型頁面(鏈接較少，目標(biāo)集中，轉(zhuǎn)化率高)這兩類風(fēng)格之間找到微妙的平衡，增大用戶順利抵達(dá)主Call to Action的幾率。

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

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

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

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

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

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

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

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

21.使用動效，而不是突兀的切換

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

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

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

23.少些邊框，少些干擾

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

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

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

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

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

26.默認(rèn)參與

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

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

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

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

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

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

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

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

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

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

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

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

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

國外服務(wù)器租用

版權(quán)聲明：本站文章來源標(biāo)注為YINGSOO的內(nèi)容版權(quán)均為本站所有，歡迎引用、轉(zhuǎn)載，請保持原文完整并注明來源及原文鏈接。禁止復(fù)制或仿造本網(wǎng)站，禁止在非www.sddonglingsh.com所屬的服務(wù)器上建立鏡像，否則將依法追究法律責(zé)任。本站部分內(nèi)容來源于網(wǎng)友推薦、互聯(lián)網(wǎng)收集整理而來，僅供學(xué)習(xí)參考，不代表本站立場，如有內(nèi)容涉嫌侵權(quán)，請聯(lián)系alex-e#qq.com處理。