翻譯：Siyang  審校：ArialXu  |   UXRen翻譯組 #376譯文
原作者：Denislav Jeliazkov
原標(biāo)題：《Is Your UI Messy? 7 Common Mistakes to Avoid》

 

當(dāng)我們?cè)O(shè)計(jì)高品質(zhì)產(chǎn)品時(shí)，任何微小的細(xì)節(jié)都是至關(guān)重要的。

很多人會(huì)爭(zhēng)論好的用戶體驗(yàn)和好的用戶界面哪個(gè)更重要，而我則認(rèn)為兩者都非常重要。如果其中一個(gè)失敗了，你就無(wú)法對(duì)用戶產(chǎn)生影響。然而，很多時(shí)候用戶并不會(huì)考慮用戶體驗(yàn)是什么，而是基于外觀來(lái)評(píng)價(jià)一款產(chǎn)品。

 

1. 忽視邊界/糟糕的規(guī)劃

Ignoring Scope/Bad Planning

那些含有l(wèi)orem ipsum（模板里填充的默認(rèn)文本）的產(chǎn)品和庫(kù)存照片，你多久使用一次? 我想大家都從來(lái)沒(méi)用過(guò)。如果你想提升你的技能，設(shè)計(jì)時(shí)請(qǐng)注入真實(shí)內(nèi)容。網(wǎng)頁(yè)會(huì)展示哪些真實(shí)的圖片，真實(shí)的標(biāo)題可能有多長(zhǎng)字符？一旦你美麗的設(shè)計(jì)被真實(shí)的內(nèi)容填滿，它就會(huì)面目全非。

具體來(lái)說(shuō)，在開(kāi)始UI設(shè)計(jì)之前，你需要知道頁(yè)面的每個(gè)部分將顯示什么類型的內(nèi)容。你還需要知道內(nèi)容的最小和最大尺寸。這些轉(zhuǎn)折點(diǎn)（turning point）被稱為極限情況（edge case），因?yàn)樗鼈儧Q定了界面何時(shí)以及如何改變。

圖片的選擇

你還需要提前研究圖片的使用限制。如果你的客戶沒(méi)有任何定制照片或不打算購(gòu)買任何照片，那你就沒(méi)必要使用來(lái)自Unsplash的漂亮但毫無(wú)意義的照片。

為什么毫無(wú)意義? 因?yàn)檫@些照片都是純概念性的。用漂亮的東西是不夠的。相反，你需要選擇那些能夠創(chuàng)造故事情節(jié)或具有深遠(yuǎn)意義的圖像。

無(wú)論你做什么，不要使用那些毫無(wú)必要的照片。如今，人們被大量信息淹沒(méi)。額外一點(diǎn)無(wú)用的視覺(jué)信息只會(huì)激怒他們。

 

理解重復(fù)模塊

另一種極限情況與重復(fù)模塊有關(guān)。例如，圖像+文本、圖標(biāo)+文本、數(shù)字+文本…。你應(yīng)該考慮兩行文本和十行文本時(shí)這些模塊會(huì)是什么樣子，以及它們是否會(huì)一個(gè)接一個(gè)地出現(xiàn)。

對(duì)于描述性功能的小型文本模塊，使用三列布局是一個(gè)很好的選擇。然而，如果你的文本超過(guò)五行，并且不能使用省略號(hào)（…）來(lái)收起文本，你就必須想出另一種視覺(jué)解決方案。為什么？因?yàn)橛终珠L(zhǎng)的大段文本只適合原始的報(bào)紙閱讀，而對(duì)網(wǎng)絡(luò)閱讀十分不友好?？赡艿慕鉀Q方案包括這兩種：水平滑動(dòng)的輪播模式（Slides）和兩列布局。。

提前為擴(kuò)展性做規(guī)劃

了解內(nèi)容的極限情況有助于更有效地使用屏幕空間，并為界面的各個(gè)模塊選擇正確的界面處理方式。但是要記住，極限情況并不僅僅是你當(dāng)前已經(jīng)遇到的情況。優(yōu)秀的設(shè)計(jì)師總是會(huì)主動(dòng)思考客戶將來(lái)擴(kuò)展UI的可能性。

 

 

2. 沒(méi)有區(qū)分操作行為的主次

No difference between primary and secondary actions

設(shè)計(jì)應(yīng)用程序時(shí)，會(huì)涉及到很多需要用戶完成的操作。強(qiáng)化主操作（primary actions）的視覺(jué)重要性非常重要。所有的導(dǎo)航都是通過(guò)按鈕完成，所以你必須通過(guò)加粗和突出的方式讓用戶更容易識(shí)別主操作，次要操作（Secondary actions）則不要那么突出，但如果用戶需要尋找它們，它們是可見(jiàn)的即可。

以下是區(qū)分主操作和次要操作的方法：

• 在主按鈕和次要按鈕上采用不同的視重（visual weights），視重最強(qiáng)的按鈕會(huì)得到更多的關(guān)注。
• 因此，使用強(qiáng)烈的顏色、粗體文本和按鈕大小來(lái)強(qiáng)化主按鈕的視重，次級(jí)按鈕正好相反。

 

3. 令人沮喪的出錯(cuò)狀態(tài)

Frustrating error states

當(dāng)你在設(shè)計(jì)用戶界面時(shí)，不要忘記任何用戶界面的核心目標(biāo)：在用戶和服務(wù)之間提供盡可能流暢的交互。界面不應(yīng)存在疑惑、沒(méi)有答案的問(wèn)題，亦或是任何的不確定性。

設(shè)計(jì)師應(yīng)該向用戶提供產(chǎn)品狀態(tài)的清晰反饋，特別是在產(chǎn)品處于出錯(cuò)狀態(tài)時(shí)。因此，出錯(cuò)時(shí)的提醒應(yīng)滿足以下的幾個(gè)簡(jiǎn)單規(guī)則：

• 它們應(yīng)該是可識(shí)別的和引人注目的。（例如，紅色是表示錯(cuò)誤的常見(jiàn) UI 模式）
• 它們應(yīng)該清楚地解釋發(fā)生了什么，以及用戶可以如何修復(fù)。
• 它們應(yīng)該與上下文相關(guān)聯(lián)。（顯示錯(cuò)誤提示的地方最好緊鄰出錯(cuò)的UI元素）
• 它們不應(yīng)該是帶刺激性的。（你的用戶對(duì)這個(gè)錯(cuò)誤還不夠惱火嗎？）

設(shè)計(jì)師還應(yīng)該注意那些意外錯(cuò)誤情況（如服務(wù)器錯(cuò)誤、頁(yè)面未找到）。任何錯(cuò)誤都是用戶使用流程上的障礙。這就是我們需要幫助用戶處理它的原因，提供任何可能的解決方案，并試圖消減糟糕的體驗(yàn)，尤其是那些非用戶自身原因造成的錯(cuò)誤。例如，對(duì)于404和500錯(cuò)誤（頁(yè)面未找到），一個(gè)可能的好方案是為這些頁(yè)面設(shè)計(jì)插圖或動(dòng)畫(huà)。

 

慎重對(duì)待表單校驗(yàn)

在設(shè)計(jì)錯(cuò)誤狀態(tài)時(shí)，盡你的最大努力不要惹惱用戶。特別要注意那些所有可能發(fā)生的表單校驗(yàn)情況。

舉例而言，假設(shè)你有一個(gè)包含必需字段的表單。這意味著開(kāi)發(fā)人員有一個(gè)相應(yīng)的校驗(yàn)：“所有的必填字段不能為空?！奔僭O(shè)用戶試圖以隨機(jī)的順序填寫(xiě)表單，當(dāng)?shù)?個(gè)必填字段失去焦點(diǎn)狀態(tài)時(shí)，它會(huì)彈出一個(gè)錯(cuò)誤提示：“請(qǐng)?zhí)顚?xiě)此字段，該選項(xiàng)是必填項(xiàng)!”

看到這個(gè)反饋的可憐用戶驚叫道：“等一下伙計(jì)，我只是在表單項(xiàng)之間切換，還沒(méi)有點(diǎn)擊‘提交’呢!”事情甚至可能變得更糟，例如，假設(shè)你有另一個(gè)校驗(yàn)設(shè)置：在所有必需字段全部填寫(xiě)前，“提交”按鈕是禁用狀態(tài)。

想想看吧！你那些可憐的用戶什么也沒(méi)做，就無(wú)法提交表單，但是你已經(jīng)將好幾個(gè)錯(cuò)誤歸咎于他。這肯定會(huì)激怒所有人，你最好避免這種情況的出現(xiàn)。

衡量成本與價(jià)值

不要聽(tīng)那些開(kāi)發(fā)工程師忽悠：“按你想要的交互方式開(kāi)發(fā)程序，這需要耗費(fèi)大量精力”。請(qǐng)記住: 如果不能避免這個(gè)問(wèn)題會(huì)讓你付出代價(jià)，“失去用戶”的巨大代價(jià)！即使它的開(kāi)發(fā)成本很低，沒(méi)有用戶的產(chǎn)品一文不值。

 

4. 沒(méi)有對(duì)齊

Poor alignment

好吧，我承認(rèn)，我是個(gè)對(duì)齊狂魔。但這只是因?yàn)橐坏┠惆l(fā)現(xiàn)了對(duì)齊的魔力，你就會(huì)意識(shí)到它是讓任何布局看起來(lái)漂亮和和諧的關(guān)鍵。

許多設(shè)計(jì)師認(rèn)為使用柵格系統(tǒng)（grid）會(huì)限制你的創(chuàng)造力，在某種程度上，這的確是真的。然而，如果你是一名剛?cè)胄械腢I設(shè)計(jì)師，我認(rèn)為你十分有必要在打破這些規(guī)則之前，先學(xué)會(huì)它們。

適當(dāng)?shù)奶畛洌╬adding）和間距（spacing）可以讓你的版面保持整潔有序，同時(shí)也能讓讀者更容易地閱讀和理解信息。

在邏輯塊（logical blocks）周圍應(yīng)該設(shè)置相同尺寸的間距（例如，在頂部和底部，以及在左邊和右邊）。如果間距尺寸不一，你的頁(yè)面看起來(lái)會(huì)很混亂，導(dǎo)致用戶對(duì)不同部分投入不均等的注意力。

而填充太小則意味著用戶無(wú)法將內(nèi)容分解成更多的邏輯模塊。為了防止邏輯模塊混雜在一起，你需要把它們分開(kāi)，并在它們之間插入一個(gè)大的間距。

維持視覺(jué)層級(jí)結(jié)構(gòu)的一個(gè)簡(jiǎn)單方法，是遵循如下的簡(jiǎn)單規(guī)則：不同邏輯模塊之間的填充尺寸應(yīng)該大于每個(gè)模塊內(nèi)標(biāo)題和文本之間的填充尺寸。例如，假設(shè)你有一個(gè)包含主標(biāo)題、副標(biāo)題和段落的超長(zhǎng)文本，那么你需要：

• 將標(biāo)題的底部填充（padding-bottom）設(shè)置為40px，然后再在后面在插入文本段落。
• 段落的底部填充（padding-bottom）設(shè)置為10px。
• 如果段落后面有一個(gè)副標(biāo)題，副標(biāo)題的頂部填充（padding-top）設(shè)置為30px（也即，段落與副標(biāo)題之間的間隔是30px），并將其底部填充（padding-bottom）設(shè)置為20px（也即，副標(biāo)題與下一個(gè)段落之間的間隔是20px）。

這樣的設(shè)計(jì)可以很好的強(qiáng)調(diào)重點(diǎn)。主標(biāo)題是最大號(hào)的文本，周圍有相對(duì)較大的空間，但仍與緊隨其后的元素保持相近的距離。

 

5. 弱對(duì)比度

Low Contrast

設(shè)計(jì)產(chǎn)品和設(shè)計(jì)一座公共建筑（如圖書(shū)館、學(xué)校等）有些相似之處，產(chǎn)品需要很高的包容性，能滿足不同人的需求，這也包括了盲人、色盲和弱視群體。

你可以問(wèn)問(wèn)達(dá)美樂(lè)披薩是否認(rèn)同產(chǎn)品包容性的重要價(jià)值。達(dá)美樂(lè)的網(wǎng)站設(shè)計(jì)一點(diǎn)也不無(wú)障礙（accessible），他們被一位無(wú)法通過(guò)網(wǎng)站訂購(gòu)披薩的盲人告上法庭。請(qǐng)不要學(xué)達(dá)美樂(lè)，做設(shè)計(jì)一定要考慮無(wú)障礙。

我們作為設(shè)計(jì)師，往往關(guān)注如何做好看的設(shè)計(jì)，而忽視了多元化用戶的交互需求。

作為一個(gè)成熟的設(shè)計(jì)師，我已經(jīng)能夠心平氣和地對(duì)待那些限制我做出“完美設(shè)計(jì)”的條條框框了，這其中就包括ADA（美國(guó)殘疾人士法案）的相關(guān)條例。

為了讓文字和水平空間更協(xié)調(diào)，而把字號(hào)縮小到8px；或是僅僅為了美觀而使用淺灰色，這些行為都忽視了弱視訪客的使用需求。

為了在Dribbble集贊，設(shè)計(jì)時(shí)我們可以忽略無(wú)障礙，但是當(dāng)我們?cè)跒檎鎸?shí)的用戶設(shè)計(jì)產(chǎn)品的時(shí)候，忽略無(wú)障礙顯然不是個(gè)好主意。

按照網(wǎng)絡(luò)端內(nèi)容無(wú)障礙設(shè)計(jì)指南（WCAG）的要求，我們至少需要提供4.5:1的色彩對(duì)比度。這份指南還闡述了針對(duì)運(yùn)動(dòng)、聽(tīng)覺(jué)和認(rèn)知障礙用戶的視覺(jué)設(shè)計(jì)指導(dǎo)方針。

為確保符合這些規(guī)范要求，你可以下載Stark軟件，它可以幫助檢查你的設(shè)計(jì)是否滿足了無(wú)障礙設(shè)計(jì)的要求。

使用留白

我的意思是，如果你把兩個(gè)完全不同的元素緊挨著排列，用戶無(wú)法搞清楚哪個(gè)元素是“主要”的，哪個(gè)是“次要的”。這就是為什么我們會(huì)說(shuō)，強(qiáng)調(diào)對(duì)比不僅僅是將不同的視覺(jué)效果應(yīng)用到各個(gè)元素上，也需要使用留白的藝術(shù)。有時(shí)候?yàn)榱耸乖匦纬蓪?duì)比，你需要用留白來(lái)分隔它們。

留白很重要，它使內(nèi)容更便于用戶閱讀。當(dāng)然，有時(shí)候留白也會(huì)使用不當(dāng)，比如有太多的空白或者在一個(gè)小區(qū)域內(nèi)塞進(jìn)了太多的內(nèi)容，這都不是正確使用留白的例子。許多充斥各種廣告的網(wǎng)站也缺乏足夠的留白。

 

確保文本和圖像之間有足夠的對(duì)比度

避免把低對(duì)比度的文本放置在圖像上。文字和背景之間應(yīng)該有足夠的對(duì)比。為了使文本突出，可以在圖像上放置一個(gè)提高對(duì)比度的濾鏡。黑色很流行，但你也可以使用明亮的色彩，搭配使用。

另一種做法是從一開(kāi)始就使用高對(duì)比度的圖像。在這種情況下，你可以把文本放在照片或圖像的深色區(qū)域。

 

6. 糟糕的圖標(biāo)設(shè)計(jì)

Poor Iconography

當(dāng)你需要通過(guò)一個(gè)小符號(hào)來(lái)表達(dá)意思或簡(jiǎn)單說(shuō)明一種含義時(shí)，圖標(biāo)非常有用。它們也是現(xiàn)代界面設(shè)計(jì)的基本組成部分，特別是在移動(dòng)終端上。

在應(yīng)用程序中，圖標(biāo)通常相當(dāng)于按鈕?？纯碔nstagram，你只會(huì)看到圖標(biāo)和文字。

這就是選擇正確的視覺(jué)圖標(biāo)來(lái)呼應(yīng)元素含義如此重要的原因。聽(tīng)起來(lái)很簡(jiǎn)單，對(duì)吧？其實(shí)并不簡(jiǎn)單。找到正確圖標(biāo)的過(guò)程是非常痛苦的。

你需要用大家都能理解的、簡(jiǎn)單的、常見(jiàn)的圖標(biāo)來(lái)表達(dá)語(yǔ)義。其次，你還需要將這些圖標(biāo)與整體UI風(fēng)格相匹配，最后，你需要以SVG格式把圖標(biāo)提供給開(kāi)發(fā)人員。

或許你曾經(jīng)搜索過(guò)免費(fèi)圖標(biāo)，當(dāng)你為所有元素找到對(duì)應(yīng)的漂亮圖標(biāo)時(shí)，你會(huì)很興奮。你想，它們是多么完美地吻合啊! 它們會(huì)被每個(gè)人理解！遺憾的是，你所選擇的圖標(biāo)庫(kù)給人的整體印象往往是凌亂的。如何才能避免這種凌亂呢？以下是一個(gè)簡(jiǎn)要策略:

• 線寬（Line width）
  調(diào)整尺寸后，所有圖標(biāo)的線寬應(yīng)該都是一樣的。否則，用戶會(huì)明顯感受到線寬不等所帶來(lái)的混亂。
• 圓角半徑（Corner radius）
  如果你的圖標(biāo)包含一些矩形形狀，仔細(xì)核對(duì)你圖標(biāo)庫(kù)中每個(gè)圖標(biāo)的圓角半徑。如果它們尺寸不同，你最好把它們調(diào)成一樣的。
• （針對(duì)線型圖標(biāo)的）線段末端形狀（Line cap shape）
  它可以是矩形的，也可以是圓形的。
• （針對(duì)線型圖標(biāo)的）線段轉(zhuǎn)角形狀（Corners join shape）
  它可以是矩形的，也可以是圓形的。

確實(shí)，沒(méi)那么細(xì)心的用戶可能不會(huì)特別注意到線寬或圓角半徑的不統(tǒng)一。盡管如此，設(shè)計(jì)給人的整體印象還是哪里怪怪的，用戶能感覺(jué)得到。

換句話說(shuō)，雖然使用免費(fèi)圖標(biāo)并沒(méi)有錯(cuò)，但最好還是不要用太多。使用免費(fèi)圖標(biāo)會(huì)讓產(chǎn)品看起來(lái)很廉價(jià)，甚至是不專業(yè)的。另外，還有很多免費(fèi)的圖標(biāo)，人們很容易一下子認(rèn)出來(lái)。為什么? 因?yàn)樗麄冊(cè)缇桶l(fā)現(xiàn)這些圖標(biāo)被到處濫用。

這也是我建議嚴(yán)格篩選免費(fèi)圖標(biāo)的原因，當(dāng)然，如果能自己設(shè)計(jì)圖標(biāo)就更好了。自定義圖標(biāo)總是為用戶提供更優(yōu)越的體驗(yàn)。

 

7. 未考慮多終端

Not thinking cross platform

是的，理想情況下，這在當(dāng)下應(yīng)該不再是一個(gè)問(wèn)題。

我們都知道，大多數(shù)用戶通過(guò)移動(dòng)設(shè)備訪問(wèn)網(wǎng)絡(luò)服務(wù)。不幸的是，許多設(shè)計(jì)師仍然會(huì)忘記這一事實(shí)。(我猜或許是因?yàn)榭蛻舨辉敢饣ㄥX去做移動(dòng)端設(shè)計(jì)的優(yōu)化？)

然而，對(duì)于專業(yè)的設(shè)計(jì)師來(lái)說(shuō)，不考慮多設(shè)備的兼容優(yōu)化，這種情況不應(yīng)該發(fā)生。在創(chuàng)建UI時(shí)，你應(yīng)該始終牢記“手機(jī)端優(yōu)先”的法則。

請(qǐng)關(guān)注一下不同的用戶在每個(gè)頁(yè)面上所看到的內(nèi)容。然后，問(wèn)自己：“為了展示某個(gè)特定的內(nèi)容，我選用的UI控件是否合適？”

你可能選了一個(gè)很好的UI控件，它可以完美地在桌面設(shè)備上工作，但對(duì)于手機(jī)用戶來(lái)說(shuō)，它就并不是那么好用了。反之亦然。這就是為什么我們必須時(shí)刻牢記現(xiàn)今設(shè)計(jì)必須考慮多設(shè)備終端的原因。

 

糟糕的觸摸區(qū)域

微小的點(diǎn)觸目標(biāo)會(huì)讓用戶感到沮喪，因?yàn)樗鼈儗?dǎo)致用戶難以完成預(yù)期的操作。我們都經(jīng)歷過(guò)在智能手機(jī)上點(diǎn)錯(cuò)按鈕，等待錯(cuò)誤頁(yè)面加載時(shí)的沮喪感！

所以，在設(shè)計(jì)可點(diǎn)擊元素時(shí)，請(qǐng)記住用戶的手指大小都是不同的:

• 記住成年人食指的平均寬度是1.6-2cm，要設(shè)計(jì)適合手指點(diǎn)觸的目標(biāo)。
• 保證你的點(diǎn)觸目標(biāo)至少有45-57px的寬度。這將給用戶足夠的空間擊中目標(biāo)，而不必?fù)?dān)心準(zhǔn)確性。