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

 

當我們設計高品質產品時，任何微小的細節都是至關重要的。

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

 

1. 忽視邊界/糟糕的規劃

Ignoring Scope/Bad Planning

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

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

圖片的選擇

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

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

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

 

理解重復模塊

另一種極限情況與重復模塊有關。例如，圖像+文本、圖標+文本、數字+文本…。你應該考慮兩行文本和十行文本時這些模塊會是什么樣子，以及它們是否會一個接一個地出現。

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

提前為擴展性做規劃

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

 

 

2. 沒有區分操作行為的主次

No difference between primary and secondary actions

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

以下是區分主操作和次要操作的方法：

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

 

3. 令人沮喪的出錯狀態

Frustrating error states

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

設計師應該向用戶提供產品狀態的清晰反饋，特別是在產品處于出錯狀態時。因此，出錯時的提醒應滿足以下的幾個簡單規則：

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

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

 

慎重對待表單校驗

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

舉例而言，假設你有一個包含必需字段的表單。這意味著開發人員有一個相應的校驗：“所有的必填字段不能為空?！奔僭O用戶試圖以隨機的順序填寫表單，當第1個必填字段失去焦點狀態時，它會彈出一個錯誤提示：“請填寫此字段，該選項是必填項!”

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

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

衡量成本與價值

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

 

4. 沒有對齊

Poor alignment

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

許多設計師認為使用柵格系統（grid）會限制你的創造力，在某種程度上，這的確是真的。然而，如果你是一名剛入行的UI設計師，我認為你十分有必要在打破這些規則之前，先學會它們。

適當的填充（padding）和間距（spacing）可以讓你的版面保持整潔有序，同時也能讓讀者更容易地閱讀和理解信息。

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

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

維持視覺層級結構的一個簡單方法，是遵循如下的簡單規則：不同邏輯模塊之間的填充尺寸應該大于每個模塊內標題和文本之間的填充尺寸。例如，假設你有一個包含主標題、副標題和段落的超長文本，那么你需要：

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

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

 

5. 弱對比度

Low Contrast

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

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

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

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

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

為了在Dribbble集贊，設計時我們可以忽略無障礙，但是當我們在為真實的用戶設計產品的時候，忽略無障礙顯然不是個好主意。

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

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

使用留白

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

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

 

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

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

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

 

6. 糟糕的圖標設計

Poor Iconography

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

在應用程序中，圖標通常相當于按鈕?？纯碔nstagram，你只會看到圖標和文字。

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

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

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

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

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

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

這也是我建議嚴格篩選免費圖標的原因，當然，如果能自己設計圖標就更好了。自定義圖標總是為用戶提供更優越的體驗。

 

7. 未考慮多終端

Not thinking cross platform

是的，理想情況下，這在當下應該不再是一個問題。

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

然而，對于專業的設計師來說，不考慮多設備的兼容優化，這種情況不應該發生。在創建UI時，你應該始終牢記“手機端優先”的法則。

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

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

 

糟糕的觸摸區域

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

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

• 記住成年人食指的平均寬度是1.6-2cm，要設計適合手指點觸的目標。
• 保證你的點觸目標至少有45-57px的寬度。這將給用戶足夠的空間擊中目標，而不必擔心準確性。