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

 

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

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

 

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

Ignoring Scope/Bad Planning

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

具體來說，在開始UI設(shè)計之前，你需要知道頁面的每個部分將顯示什么類型的內(nèi)容。你還需要知道內(nèi)容的最小和最大尺寸。這些轉(zhuǎn)折點（turning point）被稱為極限情況（edge case），因為它們決定了界面何時以及如何改變。

圖片的選擇

你還需要提前研究圖片的使用限制。如果你的客戶沒有任何定制照片或不打算購買任何照片，那你就沒必要使用來自Unsplash的漂亮但毫無意義的照片。

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

無論你做什么，不要使用那些毫無必要的照片。如今，人們被大量信息淹沒。額外一點無用的視覺信息只會激怒他們。

 

理解重復(fù)模塊

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

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

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

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

 

 

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

No difference between primary and secondary actions

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

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

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

 

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

Frustrating error states

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

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

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

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

 

慎重對待表單校驗

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

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

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

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

衡量成本與價值

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

 

4. 沒有對齊

Poor alignment

好吧，我承認(rèn)，我是個對齊狂魔。但這只是因為一旦你發(fā)現(xiàn)了對齊的魔力，你就會意識到它是讓任何布局看起來漂亮和和諧的關(guān)鍵。

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

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

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

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

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

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

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

 

5. 弱對比度

Low Contrast

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

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

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

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

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

為了在Dribbble集贊，設(shè)計時我們可以忽略無障礙，但是當(dāng)我們在為真實的用戶設(shè)計產(chǎn)品的時候，忽略無障礙顯然不是個好主意。

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

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

使用留白

我的意思是，如果你把兩個完全不同的元素緊挨著排列，用戶無法搞清楚哪個元素是“主要”的，哪個是“次要的”。這就是為什么我們會說，強調(diào)對比不僅僅是將不同的視覺效果應(yīng)用到各個元素上，也需要使用留白的藝術(shù)。有時候為了使元素形成對比，你需要用留白來分隔它們。

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

 

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

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

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

 

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

Poor Iconography

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

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

這就是選擇正確的視覺圖標(biāo)來呼應(yīng)元素含義如此重要的原因。聽起來很簡單，對吧？其實并不簡單。找到正確圖標(biāo)的過程是非常痛苦的。

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

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

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

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

換句話說，雖然使用免費圖標(biāo)并沒有錯，但最好還是不要用太多。使用免費圖標(biāo)會讓產(chǎn)品看起來很廉價，甚至是不專業(yè)的。另外，還有很多免費的圖標(biāo)，人們很容易一下子認(rèn)出來。為什么? 因為他們早就發(fā)現(xiàn)這些圖標(biāo)被到處濫用。

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

 

7. 未考慮多終端

Not thinking cross platform

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

我們都知道，大多數(shù)用戶通過移動設(shè)備訪問網(wǎng)絡(luò)服務(wù)。不幸的是，許多設(shè)計師仍然會忘記這一事實。(我猜或許是因為客戶不愿意花錢去做移動端設(shè)計的優(yōu)化？)

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

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

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

 

糟糕的觸摸區(qū)域

微小的點觸目標(biāo)會讓用戶感到沮喪，因為它們導(dǎo)致用戶難以完成預(yù)期的操作。我們都經(jīng)歷過在智能手機上點錯按鈕，等待錯誤頁面加載時的沮喪感！

所以，在設(shè)計可點擊元素時，請記住用戶的手指大小都是不同的:

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