【51CTO.com快譯】眾所周知，良好的用戶界面(UI)設(shè)計(jì)能夠提高用戶的轉(zhuǎn)化率。這個(gè)看似簡(jiǎn)單的道理，在具體實(shí)現(xiàn)“以人為本的設(shè)計(jì)”(human-oriented design)時(shí)可并不容易。如今的移動(dòng)端“革命”就像之前的Web“革命”一樣，一直要求我們?cè)谠O(shè)計(jì)體驗(yàn)場(chǎng)景的每一步時(shí)，都要通過不斷地調(diào)整結(jié)構(gòu)和重新考慮，來實(shí)現(xiàn)“以人為本”的簡(jiǎn)約性。在UI的用戶社區(qū)中，我們就曾經(jīng)通過推行所謂“以人為本”的趨勢(shì)，去幫助大家關(guān)注和推進(jìn)每一個(gè)項(xiàng)目中的UI設(shè)計(jì)。

用戶在使用某個(gè)應(yīng)用程序的過程中，會(huì)產(chǎn)生許多不同的經(jīng)驗(yàn)與感受。通過嘗試性地在不同的項(xiàng)目中采取不同的界面設(shè)計(jì)，我們就能夠從眾多的方案中選出***的一種。而這些方案的出發(fā)點(diǎn)都是：尋找出基于人們需求的***表現(xiàn)方式。所以在理想情況下，我們應(yīng)當(dāng)通過各種***實(shí)踐和技術(shù)創(chuàng)新的方式，去滿足用戶的各種需求。

我們一支在ESPEO(一家移動(dòng)和Web應(yīng)用開發(fā)的軟件公司)工作的團(tuán)隊(duì)，每天都努力改善用戶的界面，以提高在用戶體驗(yàn)(UX，user experience)方面的表現(xiàn)。他們通過將UX工具欄與應(yīng)用項(xiàng)目相集成，以確保我們所創(chuàng)造的產(chǎn)品能全面滿足用戶的體驗(yàn)需求。

技巧一：真誠且直接地展示自我

以往的經(jīng)驗(yàn)法則告訴我們：“直接勝于遮掩”。通過直接的方式，您能夠自信且準(zhǔn)確地傳達(dá)出自己的信息。因此在應(yīng)用產(chǎn)品設(shè)計(jì)的過程中，您需要傳遞出能夠協(xié)助用戶實(shí)現(xiàn)成功的各種創(chuàng)意和界面外觀。我們要知道，企業(yè)的***是不會(huì)用問號(hào)去作為他們指令的結(jié)尾，更不會(huì)使用諸如“可能”、“也許”、“是否有興趣?”和“想要?”之類的保守表達(dá)方式。可見您的用戶界面應(yīng)盡可能具有權(quán)威性。

常言道：您對(duì)用戶的誠實(shí)總是有回報(bào)的。因此您的表述性文字要具備一定的社會(huì)公信力，千萬不要夸夸其談。過分的夸大其詞是得不到真正的用戶轉(zhuǎn)化率的。適當(dāng)?shù)卣故緳?quán)威的背書，并提及您的產(chǎn)品能為用戶提供何種服務(wù)，都會(huì)促進(jìn)用戶的繼續(xù)使用和進(jìn)一步行動(dòng)。因此，通過恰當(dāng)?shù)臄?shù)字參考與證明，可以提高客戶的信任度。當(dāng)然，如果數(shù)字過于龐大的話，您也可以考慮將數(shù)據(jù)可視化，從而以一種清晰可見的方式去驗(yàn)證您的觀點(diǎn)。

技巧二：易用性產(chǎn)生轉(zhuǎn)化率

實(shí)現(xiàn)易用性的一個(gè)簡(jiǎn)便方法是：在界面上試著僅使用單列布局，而不是多列布局的呈現(xiàn)方式。單列布局能提供清晰且一致性的表述，用戶能夠輕松地進(jìn)入您設(shè)定的場(chǎng)景之中。而多列布局則很容易將用戶的注意力轉(zhuǎn)移到其他的功能之上，進(jìn)而造成分散頁面核心目的的風(fēng)險(xiǎn)也就更大。可見，單列布局會(huì)帶給人們簡(jiǎn)約的內(nèi)容和流暢的體驗(yàn)，并最終促進(jìn)用戶的進(jìn)一步行動(dòng)。

您自己的設(shè)計(jì)風(fēng)格與特征(如顏色、深度和對(duì)比度等)都可以作為與用戶建立聯(lián)系的元素被部署在界面上。通過使用一些特定的基本設(shè)計(jì)元素，用戶能夠在任何界面中領(lǐng)會(huì)到導(dǎo)航所傳遞的潛臺(tái)詞：我能做什么?我該怎么做?這些引導(dǎo)性的路線圖都需要體現(xiàn)在有可點(diǎn)擊的鼠標(biāo)行為樣式(鏈接與按鈕)、選定的元素(已選項(xiàng))和純文本視圖之中。每一種風(fēng)格都應(yīng)該與其他的風(fēng)格有明顯的區(qū)分，以便同一種風(fēng)格能夠統(tǒng)一地應(yīng)用和體現(xiàn)在不同的界面之上。可見，如果該準(zhǔn)則應(yīng)用的恰到好處，用戶會(huì)非常樂意地與界面進(jìn)行下一步的互動(dòng)。

[[226588]]

技巧三：統(tǒng)一或合并類似的功能

在各種設(shè)計(jì)中，我們很容易根據(jù)相同的實(shí)現(xiàn)目的、重復(fù)性地創(chuàng)建出相互類似的界面部分、元素和功能。但是隨著應(yīng)用中所包含的信息量的增加，我們的界面也會(huì)像世間的其他事物一樣隨著時(shí)間的流逝而變得混亂。因此，我們應(yīng)當(dāng)去除UI中的雜亂分割、合并類似的功能、削減設(shè)計(jì)的復(fù)雜性、刪除以不同方式展現(xiàn)出的重復(fù)功能，統(tǒng)一各種表述不一的內(nèi)容。簡(jiǎn)而言之，界面的雜亂性元素越多，用戶的學(xué)習(xí)曲線就越復(fù)雜。而且為了防止UI重構(gòu)現(xiàn)象的發(fā)生，我們需要將類似的功能合并在一起，以提高核心競(jìng)爭(zhēng)力。

[[226589]]

持續(xù)的“行為召喚(CTA)”則應(yīng)另當(dāng)別論。反復(fù)地CTA(call to action)更適用于一些更長(zhǎng)(或更寬)頁面內(nèi)容的展示，當(dāng)然它也可以在多個(gè)頁面上重復(fù)出現(xiàn)。如果用戶在同一個(gè)頁面視圖上反復(fù)看到多個(gè)雷同的按鈕或文字，難免會(huì)生厭。因此，明智的選擇應(yīng)該是在頁面的頂部“溫柔地”(不要太過觸目)安置可互動(dòng)點(diǎn)擊的操作元素(如按鈕)，而在頁面的底部再次安置相同的元素。因?yàn)楫?dāng)用戶瀏覽至頁面底部時(shí)，一般會(huì)短暫地考慮一下，再確定是否要點(diǎn)擊下一步。可見，這種分而“置”之的方式，更容易促成用戶的深入互動(dòng)或達(dá)成交易。

技巧四：用清晰視圖來顯示選項(xiàng)

由于App的頁面空間所限，下拉式菜單的變革隱藏了用戶的各種選擇行為。與此同時(shí)，它們還引入了用戶鮮少用到的搜索和發(fā)現(xiàn)功能。而所有這些行為選項(xiàng)本應(yīng)該是集中式呈現(xiàn)的。它們就像是應(yīng)用程序的“脊椎”一樣，根據(jù)用戶的實(shí)際場(chǎng)景路徑，在應(yīng)用界面中以正確的順序引導(dǎo)用戶“前行”。我們應(yīng)當(dāng)在恰當(dāng)之處清晰地展現(xiàn)內(nèi)容，并為之留足空間，以明確的方式引導(dǎo)用戶采取下一步行動(dòng)。另一方面，我們可以把一些傳統(tǒng)的且不需要用戶去二次“學(xué)習(xí)”的選項(xiàng)(如日期和時(shí)間的格式)放入菜單之中。

[[226590]]

保持用戶對(duì)頁面的關(guān)注度，對(duì)于UI設(shè)計(jì)師來說是一項(xiàng)艱巨的任務(wù)。為了滿足用戶盡可能多的選擇需求，而在界面上使用過多的鏈接，則往往會(huì)讓用戶產(chǎn)生“選擇恐懼癥”。因此，具有藝術(shù)素養(yǎng)的設(shè)計(jì)師們，常在創(chuàng)建內(nèi)容豐富的頁面時(shí)，將有針對(duì)性的行為召喚(CTA)信息放置在頁面的底部。當(dāng)然，我們的每一步設(shè)置都必須十分謹(jǐn)慎。因?yàn)槟切┰贑TA上方的任何一個(gè)鏈接，都可能會(huì)將用戶注意力分散或轉(zhuǎn)移到其他的頁面之上，從而遠(yuǎn)離既定的目標(biāo)。因此，我們要盡可能地將UI從多鏈接的“發(fā)現(xiàn)風(fēng)格”，轉(zhuǎn)變成少鏈接多轉(zhuǎn)化率的“隧道風(fēng)格”。

技巧五：通過狀態(tài)顯示，按需向用戶提供貼士和反饋

在UI上顯示不同元素的狀態(tài)(已讀或未讀電子郵件、已發(fā)或已打包訂單的數(shù)量)，是在用戶和設(shè)計(jì)師之間建立良好的理解關(guān)系的一種方法。這會(huì)讓用戶對(duì)他所關(guān)心的事物狀況有所了解、并倍感放心。根據(jù)頁面所提供的預(yù)期反饋，用戶可以自行判定他的互動(dòng)行為是否已成功生效，以及是否該進(jìn)行下一步操作。

另外，相對(duì)于一般的進(jìn)度條式狀態(tài)推送顯示，帶有隱式狀態(tài)的可點(diǎn)擊按鈕更能促進(jìn)用戶轉(zhuǎn)化率。在應(yīng)用中，UI設(shè)計(jì)師應(yīng)當(dāng)提示用戶去輕觸按鈕，并從彈出的信息中獲知具體狀態(tài)。這往往會(huì)給用戶帶來更好的體驗(yàn)與互動(dòng)。

技巧六：漸進(jìn)式參與

逐步培養(yǎng)用戶的興趣和參與感，是UI設(shè)計(jì)中的另一個(gè)微妙技能。請(qǐng)不要一下子將冗長(zhǎng)的注冊(cè)表單推送到用戶面前，讓用戶望而卻步。在設(shè)計(jì)時(shí)，我們應(yīng)當(dāng)在一個(gè)頁面或應(yīng)用程序中伺機(jī)向用戶展示產(chǎn)品的功能，或通過一些有價(jià)值的內(nèi)容互動(dòng)，引導(dǎo)他們?nèi)?zhí)行某項(xiàng)任務(wù)。這種初始化的交互方式往往能培養(yǎng)用戶的興趣與好奇心。

[[226591]]

各種互動(dòng)式的個(gè)性化體驗(yàn)最終會(huì)讓用戶進(jìn)一步了解您產(chǎn)品的內(nèi)部?jī)r(jià)值。漸進(jìn)式的參與實(shí)際上是以一種潛移默化的方式，建立用戶對(duì)產(chǎn)品或服務(wù)的理解，以及思想上的認(rèn)同。通過使用定制化的應(yīng)用，我們能在用戶保持對(duì)當(dāng)前界面具有注意力的情況下，逐步完成注冊(cè)這一漫長(zhǎng)的過程。

技巧七：識(shí)別與回憶

UI設(shè)計(jì)是以心理學(xué)為基礎(chǔ)的。許多心理學(xué)家曾建議：在出現(xiàn)多種選擇的時(shí)候，人們更容易和趨向識(shí)別出那些他們?cè)缫颜J(rèn)識(shí)的東西。通過各種提示來喚起用戶過往的回憶或經(jīng)驗(yàn)，會(huì)讓他們?cè)谑褂玫倪^程中倍感輕松。相對(duì)于自行去回憶，人們要更愿意通過指導(dǎo)性回憶去探索問題。這也就是為什么在考試中，人們完成多項(xiàng)選擇題的速度會(huì)比開放式題目更快的原因。因此在UI設(shè)計(jì)過程中，我們應(yīng)當(dāng)給予用戶他們?cè)?jīng)碰到過或認(rèn)識(shí)的選項(xiàng)，而不要期望他們想出自己的回答。

原文標(biāo)題：7 Tips for Good UI Design，作者：Magdalena Brych

【51CTO譯稿，合作站點(diǎn)轉(zhuǎn)載請(qǐng)注明原文譯者和出處為51CTO.com】