APP界面的設計被改16次，看完收獲滿滿！

如果元素看起來是類似的，用戶會覺得它們在功能上也是類似的。因此，嘗試確保對于具有相同功能的元素使用一致的視覺設計。相反，嘗試確保具有不同功能的元素看起來也是不同的。

在我們的例子中，圖標區域的樣式與“Book now”按鈕的樣式非常類似。這使得它們看起來是可以點擊的，但實際上是不可以的。把底部的藍色背景區域去掉，避免用戶的誤解。

4. 創建一個清晰的層次結構

不是所有在界面上的信息都同等重要，為了讓信息更容易理解，要讓更重要的信息被設計的更突出一些。

一個清晰的層次關系，能幫助用戶更快的閱讀內容，并能把焦點放到他感興趣的地方。同時，它還可以通過創造秩序來提高美學效果。你可以通過大小、顏色、對比、間距、位置和深度進行優化，打造一個清晰的視覺層級。

下面的例子是一個視覺層次不清晰的網站banner示例，在它下面是一個明確的層次結構的案例。

一個非?？烨胰菀椎臋z查你的視覺設計層次是否清晰的方法是采用“瞇眼測試（ Squint Test）”。只需瞇起眼睛觀察你的設計，或者遠離屏幕或使設計模糊。你仍應該能夠看出哪些元素最重要，知道界面的用途。

用“瞇眼測試”看下面的例子，我們可以發現多個具有類似視覺強度的元素在爭搶用戶的注意力。同時，左下角的主要操作反而沒有凸顯出來。

主要按鈕在界面中通常是最突出的元素。通過給它一個與背景強對比的顏色，并把字體加粗可以實現這一點。這樣做也解決了可讀性的問題，后面會詳細研究。

再次用上“瞇眼測試”，主要按鈕這次成了頁面中最突出的元素了。

視覺層次現在終于清晰了，但依然還有提升的空間。例如，正文相對于它的層級來說，還是有點太突出了。

5. 刪除不必要的樣式

不必要的信息和視覺樣式可能會分散注意力，增加認知負荷。避免使用不必要的線條、顏色、背景和動畫，目的是創建一個更簡單、更專注的界面。

在我們的例子中，圖片周圍的留白和描邊是沒必要的，會增加視覺復雜度。這些樣式不需要來傳達信息或對元素進行分組，因此我們可以安全地將它們刪減以簡化設計。

6. 有目的的使用顏色

有目的地、節制地使用顏色。盡量避免僅僅因為裝飾而使用顏色，因為這樣會讓人感到混亂和分散注意力。從黑白開始，只在需要傳達意義時才引入顏色。

一個簡單有效的方式是把品牌顏色應用到文字鏈接和按鈕等可交互的元素上。它能幫助用戶理解哪些是可點擊的而哪些不可以。嘗試避免使用品牌顏色在不可交互的元素上。

你也不需要把品牌顏色應用到所有可交互的元素上，一些元素其實本身就已經給出了可交互的線索。例如，卡片設計本身給人的隱喻就是全部可點擊的，所以不需要在文字上單獨再加一個藍色的鏈接。

在我們的例子中，優化前的藍色標題可起來還挺好看的，但它讓文字看起來是可交互的。為了幫助避免這種困惑，我們需要把這種藍色樣式給移除掉。

我們同樣需要把其他不可交互的元素中的藍色樣式刪除掉，比如藍色的星星。這樣優化后，界面上可點不可點的信息就能一目了然了。

7. 確保界面上的元素能保持3:1的對比度

對比是衡量兩種顏色之間感知亮度差異的指標。對比度的表達方式是一個比例，范圍從1:1到21:1不等。例如，在黑色背景上的黑色文本具有最低的1:1對比度比率，而在白色背景上的黑色文本具有最高的21:1比率。

有許多在線工具(https://usecontrast.com/)可以幫助你測量不同顏色之間的對比度比率。通過使用這些工具，你可以輕松地檢查是否符合無障礙標準，并確保所有用戶都可以輕松地使用你的產品。

為了確保視力受損的人能夠清晰地看到界面細節，應該至少符合[Web內容可訪問性指南（WCAG）]https://www.w3.org/TR/WCAG21/ 2.1 AA級別的顏色對比要求。

這意味著用戶界面元素，如表單字段和按鈕，需要至少具有3:1的對比度比率。這是為了確保用戶可以清楚地看到所有的界面元素，從而更容易地使用產品。WCAG還包括許多其他指南和要求，包括對語音識別和屏幕閱讀器的支持等，以確保你的產品具有最佳的無障礙性能。

在我們的例子中，箭頭圖標與背景的對比度比率太低。給圖標上加投影和在圖片頂部三分之一處加漸變疊加效果，無論圖標所在的圖片如何變化，都可以使圖標具有足夠的3:1對比度。

這樣可以確保視力受損的人也能夠清晰地看到圖標，并能夠更好地使用你的產品。同時，這也是一種設計技巧，可以使圖標在不同背景下都能夠顯得更加醒目和有吸引力。

主要按鈕的對比度在優化前的頁面上同樣是對比度太低。在解決視覺層次那里已經優化了它，但這里也值得再提一下。

低對比度按鈕的風險在于視力較差的人可能無法看到這個按鈕。將按鈕的對比度比率提高到3：1以上可以使按鈕易于訪問，同時也有助于糾正視覺層次結構。

將箭頭和按鈕的對比度提高到大于3：1的比率會得到以下設計。我們離理想效果又近了一步，但我們仍然有更多問題需要解決。

8. 確保文本具有4.5：1的對比度比率

為了確保視力受損的人能夠清晰地閱讀文本，文本需要滿足以下WCAG 2.1級AA對比度要求

• 小字（18px以下）需要最少達到4.5:1的比率
• 大字（包括18px粗體或最小24px的正常體）需要最少達到3:1的比率

在我們的例子中，小字在照片中的對比度是不夠的。我們把對比度提高到了4.5:1，增加不透明度成深色并增加文字的投影。

位置信息的對比度也是太低了。細的文字使得它很難閱讀。使用較深的灰色可以幫助文本更易于閱讀。我們很快會對文本進行進一步優化。

9. 不要只靠顏色

有許多不同類型的色盲，而且它們主要影響男性。通常，色盲者難以區分紅色和綠色，有些人甚至根本無法看到任何顏色。

為了確保色盲用戶在使用產品時的可用性，你不能僅依賴顏色作為交互引導，或區分不同視覺元素。你需要增加更多為UI元素視覺線索。

在我們的例子中，”reviews“文本使用了藍色表示一個鏈接。如果把顏色去除，鏈接文本就和其他普通文本沒任何區別了，所以給可點擊的鏈接文字增加一個下劃線是一個正確的做法，這樣就可以很好的做了區分。

10. 使用統一的無襯線字體

字體是一組相關的具有相似風格或美學特征的字形設計。Helvetica是一個字體的例子。而字形則是字體中的變體，如字重或大小。例如，Helvetica bold 和 Helvetica regular 是 Helvetica 字體中的兩種不同字形。

比較穩妥的方式是在一個界面中僅使用一種無襯線字體，因為它們通常是最易讀、最中性、最簡單的。

在我們的例子中，標題字使用了細節豐富的襯線字體，這種字體可能有些難閱讀，并且可能會對某些人產生干擾。此外，它的風格可能與應用中的某些照片不匹配。使用簡單的無襯線字體可以提高可用性和美觀度。

11. 使用小寫字母更高的字體

在選擇字體時，要找那些小寫字母比較高，字母間距比較大的，因為這些字體在小字號時更容易閱讀。字體中小寫字母的高度叫做x高度。

在我們的例子中，Gill Sans字體的字母高度相對較矮，把它優化為高度更大的字體，像Lato，可以有效地提升可讀性。

在將字體從Gill Sans更改為Lato后，我們的例子像下面這樣。

12. 限制使用大寫

一般來說，如果不是在向別人大喊大叫，就沒有太多使用大寫字母的正當理由。因為大寫字母看起來太吵，也不易于閱讀。

因為當你閱讀時，你并不是以單個字母去看的，而是會以單詞的字形來看的。

一般來說，我們在閱讀時更容易根據單詞的形狀來識別它，而不是一個字母一個字母地看。大寫字母的單詞形狀相同，閱讀起來比較費力，不利于快速識別整個單詞。

在我們的例子中，位置信息使用了全大寫。將其改為句子首字母大寫，只有第一個單詞和專有名詞（人名、地名或物品名稱）大寫，有助于提高可讀性。

13. 僅使用常規和粗體

雖然一個字體中可能有很多字重可供選擇，但并不意味著你需要在設計中全部使用。過多地使用不同的字重會讓界面顯得嘈雜不清。同時，使用太多不同的字重會讓設計難以保持一致性。因此，在設計中只使用常規和粗體的字重是更好的選擇。

保持界面中只使用常規和加粗字體，可以讓界面簡單明了。

一些快速使用的技巧:

• 使用粗體字體以強調標題
• 使用常規字重來呈現其他比較小的文本
• 如果你決定使用非常細或非常粗的字重，最好將它們保留給標題和更大的文本，因為它們在較小的尺寸下可能難以閱讀

在我們的例子中，位置文本用了一個非常細的字重。即使我們把對比度優化到4.5:1，但由于它太細，其實還是比較難閱讀。增加它的字重，改成常規字體，可以幫助提升可讀性，讓界面整體上也更簡單。

14. 避免使用純黑色文字

在UI設計中，比較安全的做法就是別使用純黑色，因為它在一個白色背景上對比度過高了。這種高對比度會導致閱讀文本時眼睛疲勞和不適。

黑色是0%的亮度，白色是100%的亮度，這2者巨大的亮度差異會導致顏色很不舒服。所以，最好避免在白色背景上使用純黑色，改用深灰色會比較好。

在我們的例子中，很多元素都使用了純黑色。將其改為深灰色可以提高可讀性。之前在檢查視覺層次時，會發現物業描述文本過于突出。為了確保界面元素按重要性呈現，改為較淺的灰色來減少物業描述文本的突出程度。

15. 左對齊文本

英語的閱讀方式是從左到右，由上至下呈F形閱讀的，所以最好將文本左對齊以實現最佳閱讀效果。對于長篇正文，最好避免居中對齊或兩端對齊的方式。這種對齊方式難以閱讀，尤其是對于那些認知能力較弱的人來說更加困難。

在標題和短文本上使用居中對齊會比較好，那樣會比較方便閱讀。但是，對于長文本來說，居中對齊就是災難，因為每行的起點都不一樣。你的眼睛需要找每一行的起點，這會讓閱讀變得很困難。

在我們的例子中，描述文本是居中對齊的，改為左對齊后會發現可讀性好很多。

16. 對于內容文本至少要有1.5倍行高

行高是指在垂直高度上的文字間距。每行文字之間的間距有助于防止人們重復閱讀同一行文字。這樣做也會讓閱讀更加舒適自然。

為了提高可訪問性和可讀性，特別是對于長篇正文，確保行高至少為1.5（150%）。將行高保持在1.5到2之間通常效果良好。

在我們的例子中，行高僅有1（100%），增加行高到1.6（160%）后，可讀性好了很多。

最終效果

我們遵循了幾個簡單但有效的 UI 設計準則，很快就發現并優化了例子設計中的許多問題。

（彩云注：最終優化后的效果會比優化前的好很多，那么請你再回頭想想，如果再讓你優化一遍這個界面，關掉教程，你還能再優化一遍嗎？然后再進一步，把這些方法如何用到自己的實際項目中，作品集中，相信會更有幫助。）

希望你已經開始意識到，UI設計并不是那么困難。雖然它看起來像一門神奇的藝術形式，但其中很大一部分都是由像我們剛學到的這些邏輯規則或指導原則所構成的。使用客觀的邏輯，而不是主觀的意見，可以更快速、更輕松地設計出直觀、易用和美觀的界面。

如果你有學到，記得分享到你的朋友圈哦~

原文：https://uxplanet.org/16-ui-design-tips-ba2e7524d203

作者：Adham Dannaway

來源：彩云譯設計（ID：caiyunyisheji）

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。