編輯導語：UI設計師在設計過程中往往需要特別考慮排版的問題，因為這決定了給使用者的第一印象是什麼，但有不少設計師會忽略排版的問題。那麼如何解決UI介面亂的問題呢？本文圍繞UI設計排版展開了講述，推薦對此感興趣的夥伴閱讀。

對於UI設計師來說，特別是對於初階UI設計師或者UI初學者而已，排版的好壞是這個階段核心要考慮的問題，也就是細節。但是不少同學總是在這個上邊很不注重，總想著創意。沒有了基礎的創意就如同無本之源，是沒有任何意義的。

接下來咱們來看看，這7點可以讓你的UI設計質量明顯提升所需要注意的問題。

一、忽略內容而設計

如果您想提高自己的技能，請設計一些可能成為產品最終目標的產品。它將實際顯示哪些影象，標題有多長？因為，一旦您將真實的內容填滿你的設計稿，您的精美設計就會變的異常難看。

具體來說，在開始進行UI設計之前，您需要知道頁面的每個部分都將顯示哪種內容。您還需要知道內容的最小和最大顯示長度，正確處理折行。

1. 選擇正確的配圖

如果作為概念設計稿，那麼選擇你能拿到的最好的配圖當然是可行的。但是一旦你要為真實的應用建立設計，那麼配圖的質量就必須要考慮。所以，儘量選擇跟主題相關的配圖，而不是在相簿中的跟主題毫無關聯的圖片。只有在這種情況下，你才能真實瞭解最終的成品是什麼樣子的。

2. 注意重複的列表和塊

通常情況下，列表有以下幾種形式：影象+文字，圖示+文字，數字+文字等。您應該考慮用哪種形式可以讓資訊更有效的表達。

對於描述功能的小文字塊，您可以使用三列布局。但是，如果您有多於五行的文字，並且需要全部顯示而沒有省略號，則必須用另一種視覺解決方案。為什麼呢？因為手機閱讀者沒有閱讀較長的文字的習慣。此時，可以使用水平滾動或者兩列布局的圖片列表。

另外，要考慮一下內容區塊的極端情況，比如列表的文字最長和最短大概有多少字數。優秀的設計師應該始終主動思考。以考慮客戶將來可能需要擴充套件UI的可能性。

二、區分主要動作和次要動作

注意到上圖哪裡有區別了嗎？“Login” “忘記密碼”“Get Start” 三個按鈕變成了一個。在做設計時，我們必須區分按鈕的主次，這就要求你要明白，你現在在設計的這個頁面，最重要的功能是什麼，然後對這些功能進行排序，主要功能突出顯示，次要內容則弱化。因為使用者可能還要去找它們，但是它們沒有那麼重要，但是是必須的。所以，右圖最佳化後的效果是不是更好呢？

區分主按鈕和次要按鈕（輔助功能）的方法：

對主按鈕和輔助按鈕使用不同的視覺權重。視覺重量最強的按鈕將獲得更多關注。

因此，請使用強烈的顏色，粗體文字和大小為主要按鈕賦予視覺效果。對次要動作則相反。

三、令人沮喪的錯誤狀態

在設計使用者介面時，請不要忘記任何使用者介面的主要目的：在使用者和服務之間提供儘可能平滑的互動。不要讓使用者感覺到沮喪，即使在使用者出錯的時候。

設計人員應向用戶提供有關狀態的明確反饋，尤其是在出現錯誤狀態的情況下。因此，錯誤通知應滿足以下簡單規則：

它們應該是可識別且引人注意的（例如，紅色是常見的UI模式，指示錯誤）。

他們應該清楚地說明發生了什麼，以及使用者如何解決該錯誤。

它們應該是上下文的。最好在與它們相關的元素附近顯示錯誤訊息。

它們不應具有刺激性。您的使用者是否對錯誤已經足夠煩惱了？

設計師還應注意意外錯誤（例如，伺服器錯誤，找不到頁面）。任何錯誤訊息都是使用者流程的障礙。因此，我們需要幫助使用者進行處理，提供任何可能的解決方案，並設法消除不良體驗，尤其是這不是使用者犯錯的情況下。例如，一個好的解決方案可能是設計404和500頁的插圖或動畫。

1. 表單合法性檢查

在設計錯誤狀態時，請儘量避免惹惱使用者。特別要注意所有可能的形式檢查。

例如，假設您有一個包含必填欄位的表單。這意味著開發人員會進行相應的檢查，“所有必填欄位都不能為空。” 假設使用者嘗試以隨機順序填寫表格。當第一個必填欄位失去焦點狀態時，它將返回錯誤：“請填寫此欄位。這是必需的！”

我們可憐的使用者大聲說：“等等，我只是在表單欄位之間單擊，甚至沒有單擊’提交’！” 而且情況甚至可能變得更糟。例如，假設您有另一個檢查，“提交”按鈕將被禁用，直到所有必填欄位不再為空。

請考慮一秒鐘。您的可憐使用者沒有做任何事情，也無法提交表格，但是您已經將他的幾個錯誤歸咎於他了。這肯定會激怒任何人，因此最好避免這種情況。

2. 權衡成本和價值

不要聽那些試圖告訴您的開發人員，這將花費您很大的精力來以您想要的方式來實現。切記：不避免此問題將使您付出代價，你的客戶將會流失。這是必須要做的，沒有商討的餘地。

四、元素沒有對齊

許多設計師認為使用網格會限制您的創造力，從某種意義上說，這是事實。但是，如果您是UI設計的初學者，我認為有必要在打破規則之前首先學習這些規則。

適當的填充和間距可使佈局看起來整潔有序，同時使讀者更容易閱讀和理解資訊。

在邏輯塊周圍應設定相同大小的空間（例如，在頂部和底部以及左側和右側）。如果空間不均勻，您的頁面將顯得凌亂，並且使用者可能不會平等地考慮每個部分。

填充太小意味著使用者無法將內容分解為邏輯塊。為了防止邏輯部分混合在一起，請將它們分開並在它們之間插入較大的空間。

維護視覺層次結構的一種簡單方法是遵循以下簡單規則：不同邏輯塊之間的填充應大於每個塊內標題和文字之間的填充。例如，假設您有一長串包含標題，副標題和段落的文字：

將標題padding-bottom設定為40px，然後跟隨一段文字。

將段落padding-bottom設定為10px。

如果段落後有副標題，則將其頂部填充為30px（即，段落與子標題頂部之間的間隔為30px），將底部填充為20px（即，子標題底部與段落之間的間隔）將為20px，大於段落之間的間隔）。

這將把重點放在最重要和最大的元素上。最大的文字（標題）周圍有較大的空間。但是這個空間應該更接近跟隨它的相關元素。

五、對比度過低

大多數設計必須要考慮到大多數人，其中包括盲人，色盲和視力障礙的使用者。通常，我們會嘗試設計看起來不錯的產品，而忽略了要與我們的產品進行互動的不同使用者。

成熟的設計師更傾向於剋制的做設計。比如將文字縮小到8px甚至更小，使用淺灰色陰影（因為它看起來不錯）。雖然它更適合我的UI介面佈局，但是它忽略了有視力障礙的訪客。

WCAG（Web內容可訪問性指南）提到，必須要保證4。5：1的對比度。為了確保您符合這些標準，請下載Stark，它將檢查您的設計是否可訪問。

1. 保持留白

如果您將兩個完全不同的元素放置在彼此非常靠近的位置，那麼使用者將不會理解哪個元素是“主要”元素。這就是為什麼我們可以說對比不僅是對元素應用不同的視覺樣式，而且還涉及使用留白的藝術。這是因為有時為了使元素形成對比，您需要使用空格分隔它們。

留白對於使您的內容易於使用者閱讀很重要。當然，留白可能會被不正確地使用：有太多的留白或將太多的內容塞滿了一個很小的區域。許多廣告過多的網站也缺乏足夠的留白。

2. 確保文字和影象有足夠的對比度

避免將低對比度的文字複製放置在影象上。文字和背景之間應有足夠的對比。要突出顯示副本，請在影象上放置一個對比濾鏡。黑色是一種流行的顏色，但是您也可以使用明亮的顏色，將它們混合和匹配。

另一種選擇是從一開始就使用對比影象。在這種情況下，您可以將副本放置在照片或影象的深色部分的頂部。

六、圖示觀感不佳

當您需要透過小符號表達含義或簡要說明說明時，圖示非常有用。它們還是現代介面的基本組成部分，尤其是在移動裝置上。在應用程式中，圖示通常等同於按鈕。這就是為什麼選擇正確的視覺影象以符合元素含義的原因非常重要。

您需要使用非常簡單且通用的影象來講述故事，每個人都可以理解。您需要將這些圖示與UI的整體樣式進行匹配。然後，您需要將它們以SVG格式提供給開發人員。

有些設計師喜歡用免費的圖示，這些圖示單個看起來都不錯，但是一旦放到一起，就不太協調了。那麼如何來避免這種混亂呢？

線寬-調整大小後，所有圖示的線寬應相等。否則，它們不會非常明顯。

圓角半徑—如果您的圖示包含一些矩形形狀，請比較集合中每個圖示的圓角半徑。如果不同的圖示不同，則最好對其進行修復。

風格形狀（用於輪廓圖示）—可以是矩形或圓形。

儘管使用免費圖示並沒有錯，但最好還是謹慎使用它們。使用免費圖示會使專案看起來廉價，並且在某些情況下不專業。此外，還有很多免費的圖示，人們可以立即識別出來。為什麼？他們已經看到它們到處都在使用。

七、注意點選區域

觸控區域太小會讓使用者抓狂，因為它們會使使用者難以完成所需的動作。我們所有人都經歷過在智慧手機上點選錯誤按鈕，並在螢幕載入錯誤時必須等待的挫敗感！

因此，在設計可點選元素時，請記住，成人食指的平均寬度為1。6到2釐米，以建立手指友好的目標。觸控目標的寬度至少為45–57畫素。這將為使用者提供足夠的空間來擊中目標，而不必擔心準確性。

原文作者：Denislav Jeliazk（作者已授權）

原文地址：https：//mp。weixin。qq。com/s/z2EdEEgVPRcGu0x77Cz6-w

翻譯：Tzw_n，公眾號「小阿田的設計筆記」

本文由 @Tzw_n 翻譯釋出於人人都是產品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基於CC0協議