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

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

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

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

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

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

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

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

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

[[226588]]

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

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

[[226589]]

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

技巧四：用清晰視圖來顯示選項

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

[[226590]]

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

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

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

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

技巧六：漸進式參與

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

[[226591]]

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

技巧七：識別與回憶

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

原文標題：7 Tips for Good UI Design，作者：Magdalena Brych

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