UI界面視覺設(shè)計包含5個要素：色彩、文字、圖標(biāo)、圖片、空間。一個出色的界面設(shè)計，必然是將這些要素做到了淋漓盡致。

一款 App或者是Web產(chǎn)品，從用戶體驗的角度包含了戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層。

而作為UI設(shè)計師，如果連「表現(xiàn)層」的內(nèi)容都還一知半解就去盲目地學(xué)習(xí)其他領(lǐng)域，這是不提倡的。

這里說的「表現(xiàn)層」是指視覺設(shè)計層面，在界面的視覺設(shè)計中同樣也包含了 5 個視覺要素：色彩、文字、圖標(biāo)、圖片、空間。

一個出色的界面設(shè)計，必然是將這些要素做到了淋漓盡致。本文結(jié)合大量優(yōu)秀的案例，并以通俗簡練的語言，系統(tǒng)地介紹了這5個視覺要素。

適合閱讀人群：視覺設(shè)計師、交互設(shè)計師、平面設(shè)計師、UI設(shè)計初學(xué)愛好者等。

要素一：色彩

1. 色彩基礎(chǔ)概述

1.1 色彩三屬性

色相(H)：即色彩的相貌、種類和名稱，比如紅、橙、黃、綠等顏色的種類就叫色相。

飽和度(S)：即色彩的鮮艷程度，也稱純度。

明度(B)：即色彩的明亮程度。

人眼看到的任一彩色光都是這三個屬性的綜合效果。

1.2 色彩寓意

同一色相的不同明度和不同飽和度，也會對人產(chǎn)生不同的心理感受。

我在這里歸納整理了各種色彩在通常情況下代表的不同寓意，僅供參考。

紅色(Red)：熱烈、喜慶、熱情、浪漫、危險

橙色(Orange)：溫暖、食物、友好、財富、警告

黃色(Yellow)：光輝、明亮、尊貴、權(quán)力

綠色(Green)：健康、自然、清新、希望、安全

青色(Cyan)：朝氣、脫俗、真誠、清麗

藍色(Blue)：平靜、純潔、清涼、科技、沉穩(wěn)

紫色(Purple)：神秘、高貴、優(yōu)雅、浪漫、妖艷

黑色(Black)：深沉、莊重、嚴肅、邪惡、死亡

白色(White)：純潔、神圣、干凈、高雅、冷淡

灰色(Gray)：平凡、隨意、蒼老、冷漠

2. 色彩搭配

色相對比：兩種及兩種以上色彩組合后，由于色相差別而形成的色彩對比效果稱為色相對比。

色相對比的強弱程度，取決于色相之間在色環(huán)上的距離 (角度)，距離 (角度) 越大對比越強，反之對比越弱。

一般界面的色彩搭配主要包括三種顏色：主色調(diào)、輔助色、點綴色，搭配比例分別為 6:3:1。

2.1 同類色搭配

色環(huán)上相距 0° 的顏色為同類色，一般常用同一種色相的不同明度或不同飽和度的組合方式，例如藍與淺藍，紅與粉紅等。

同類色搭配對比效果統(tǒng)一、清新、含蓄，但也容易產(chǎn)生單調(diào)、乏味的感受。

2.2 鄰近色搭配

色環(huán)上相距 30° 左右的顏色為鄰近色 ，例如紫與藍紫，藍紫與藍等。

鄰近色搭配對比效果柔和、文靜、和諧，但也容易感覺單調(diào)、模糊，需調(diào)節(jié)明度來加強效果。

2.3 類似色搭配

色環(huán)上相距 60° 左右的顏色為類似色，例如橙與黃，黃橙與黃綠等。

類似色搭配對比效果較豐富、活潑，同時又不失統(tǒng)一、和諧的感覺。

2.4 中差色搭配

色環(huán)上相距 90° 左右的顏色為中差色，例如紅與黃橙，藍綠與黃等。

中差色搭配對比效果明快、活潑、飽滿、使人興奮，同時不失調(diào)和之感。

2.5 對比色搭配

色環(huán)上相距 120° 左右的顏色為對比色，例如紅與黃，紅紫與黃橙等。

對比色搭配對比效果強烈、醒目、刺激、有力，但也容易造成視覺疲勞，一般需要采用多種調(diào)和手段來改善對比效果。

2.6 互補色搭配

色環(huán)上相距 180° 左右的顏色為互補色，例如紅與綠，黃與紫等。

互補色搭配表現(xiàn)出一種力量、氣勢與活力，具有非常強烈的視覺沖擊力。

2.7 多色搭配

多色搭配顧名思義是由多種色彩組合而成的一種搭配方式，一般以不超過 4 種顏色為宜，規(guī)定一種作為主導(dǎo)色，其余作為輔助色使用。

多色搭配會讓畫面顯得更加豐富、多彩，充滿趣味性，但若控制不好，也容易讓畫面變花，失去平衡。搭配時須注意區(qū)分主次，按比例進行調(diào)和。

要素二：文字

1. 字體簡介

中文字體種類大致分為：宋體、黑體、仿宋、楷體、其它（變體字）。

西文字體種類大致分為：無襯線體、羅馬正體或襯線體、意大利斜體、手寫體、黑字體（哥特體）。

這次主要給大家介紹一下比較常用的襯線體和無襯線體。

1.1 襯線體

襯線字體在筆畫末端具有附加的裝飾線條或者“韻腳”。襯線字體字母的橫線較細、豎線較粗，如 Times New Roman、Georgia 等字體屬于襯線體。

襯線體具有復(fù)古傳統(tǒng)的曲線美、個性鮮明、張力十足，通常用在時尚奢侈品牌、復(fù)古海報等設(shè)計領(lǐng)域中。

1.2 無襯線體

無襯線體顧名思義，就是指“沒有襯線的字體”。襯線指的是字母結(jié)構(gòu)筆畫之外的裝飾性線條，

無襯線字體字母的豎線和橫線粗細基本相同，像經(jīng)典的 Helvetica 和 Futula 等字體就屬于無襯線體。

無襯線體通常比較簡約、具有現(xiàn)代感，適用于 Web、App 等互聯(lián)網(wǎng)科技領(lǐng)域的設(shè)計中。

2. 文字使用規(guī)則

不同平臺的界面設(shè)計中規(guī)范的字體會有不同，像移動端界面的設(shè)計就會有固定的字體樣式，網(wǎng)頁中會有常用的幾個字體。

2.1 移動端常規(guī)字體

在 iOS 設(shè)備上，系統(tǒng)默認的英文字體為 SanFrancisco，中文字體為 PingFang。

值得注意的是，SanFrancisco 字體會隨著字號的變化自動調(diào)整字母之間的間距，以確保任何情況下都能很清晰地閱讀。

在 Android 設(shè)備上，原生系統(tǒng)英文字體使用 DroidSans 或 Roboto，但國內(nèi)的 Rom 大都是第三方廠商定制而成，對原生系統(tǒng)字體有所變動。

大家在設(shè)計時可以使用 Noto 作為中文字體來使用。

2.2 網(wǎng)頁端常用字體

在 Windows 系統(tǒng)中，常用字體有 微軟雅黑、黑體、宋體 等，最小字號推薦 12px，正文字號推薦 14px，

標(biāo)題字號推薦 18px、20px、24px、28px、32px 等，盡可能使用偶數(shù)。而行間距一般為字號的 1.5-1.8 倍。

在 Mac OS 系統(tǒng)中，常用中文字體有 蘋方、思源黑體 、華文細黑 等，英文字體有 Helvetica、SanFrancisco 等。

值得一提的是：Helvetica 曾被評為是設(shè)計師最愛的字體，簡潔現(xiàn)代的線條，非常受到追捧。

在 Mac 下被認為是最佳的網(wǎng)頁字體，在 Windows 下由于 Hinting 的原因顯示很糟糕。

要素三：圖標(biāo)

1. 圖標(biāo)功能

圖標(biāo)是 Web 和 App 設(shè)計中的點睛之筆，既能輔助文字信息的傳達，也能作為信息載體被高效地識別，并且圖標(biāo)也有一定的裝飾作用，可以提高界面設(shè)計的美觀度。

2. 圖標(biāo)類型

關(guān)于圖標(biāo)的類型目前并沒有很權(quán)威的分類，我根據(jù)圖標(biāo)的用途將其分為兩大類：「功能型圖標(biāo)」和「展示型圖標(biāo)」。

2.1 功能型圖標(biāo)

一般來說，凡是 UI 界面中，用戶可以點擊的圖標(biāo)均可看成是功能型圖標(biāo)，該類圖標(biāo)往往代表某一功能或某一鏈接的跳轉(zhuǎn)。

這類圖標(biāo)的典型應(yīng)用場景就是 iOS 系統(tǒng)中的底部標(biāo)簽欄，以及 Material Design 中側(cè)滑菜單選項的左側(cè)。

某些列表或卡片內(nèi)的圖標(biāo)也屬于功能型圖標(biāo)，但這類圖標(biāo)往往代表一個功能，而底部標(biāo)簽欄圖標(biāo)往往代表一個頁面或板塊。

2.2 展示型圖標(biāo)

相比功能型圖標(biāo)，展示型圖標(biāo)更加具有「設(shè)計感」，是獨特的、有內(nèi)涵的以及具備辨識度的。

一般來說，展示型圖標(biāo)主要是應(yīng)用程序的啟動圖標(biāo)。該類圖標(biāo)代表了一款產(chǎn)品的屬性、氣質(zhì)以及品牌形象等。

也是用戶首先看到的內(nèi)容，設(shè)計時應(yīng)盡可能讓用戶記住并感到愉悅。

該類圖標(biāo)在 iOS 系統(tǒng)中除了出現(xiàn)在 App Store 里，還出現(xiàn)在用戶下載后的桌面上，以及 Spotlight 的搜索結(jié)果和設(shè)置等地方。

3. 圖標(biāo)風(fēng)格

圖標(biāo)的設(shè)計風(fēng)格有很多種，例如：線性圖標(biāo)、面性圖標(biāo)、線面結(jié)合圖標(biāo)、扁平圖標(biāo)、輕擬物圖標(biāo)、擬物圖標(biāo)、手繪型圖標(biāo)等，我對其中常見的幾種作下簡要的介紹。

3.1 線性圖標(biāo)

線性圖標(biāo)是由直線、曲線、點等元素組合而成的圖標(biāo)樣式。

該類圖標(biāo)輕巧簡練，具有一定的想象空間，且不會對界面產(chǎn)生太大的視覺干擾。

3.2 面性圖標(biāo)

面性圖標(biāo)可以簡單理解為對線性圖標(biāo)的填充，但面性比線性更加穩(wěn)重和扎實，對色彩的傳達也清晰明顯。

3.3 線面結(jié)合圖標(biāo)

線面結(jié)合圖標(biāo)典型代表是「MBE風(fēng)格」圖標(biāo)，其設(shè)計特點是采用了粗描邊線和偏移的填充面相結(jié)合，靈動而鮮明。

粗線條起到對畫面的絕對分割，突顯內(nèi)容、表現(xiàn)清晰。

3.4 扁平圖標(biāo)

扁平圖標(biāo)去掉了透視、紋理、漸變等能做出 3D 效果的元素，讓信息本身作為核心被凸顯出來，并且在設(shè)計元素上強調(diào)抽象、極簡、符號化。

輕擬物圖標(biāo)沒有擬物圖標(biāo)那么寫實，也不像扁平圖標(biāo)那么“平”，而是利用淡淡的漸變和一些光影來達到兩者之間的平衡，識別性高又不失美感。

要素四：圖片

圖片在 Web 和 App 界面設(shè)計中是非常常見的，圖片的質(zhì)量和展現(xiàn)方式都會影響著用戶對產(chǎn)品的感官體驗。

1. 圖片比例

不同比例的圖片所傳遞的主要信息各不相同，我們需要結(jié)合產(chǎn)品的特點，并根據(jù)不同的場景來選擇合適的圖片比例進行設(shè)計。

1.1 1比1

1:1 是比較常見的圖片設(shè)計比例，相同的長寬將構(gòu)圖呈現(xiàn)得簡單，突出了主體的存在感，常用于產(chǎn)品、頭像、特寫等展示場景。

1.2 4比3

4:3 的圖片比例使圖像更緊湊，更容易構(gòu)圖，便于開展設(shè)計，也是常用圖片比例之一。

1.3 16比9

16:9 的圖片比例可以呈現(xiàn)電影觀影般的效果，是很多視頻播放軟件常用的尺寸，能帶給用戶一種視野開闊的體驗。

1.4 16比10

16:10 的圖片比例最接近黃金比，而黃金分割具有嚴格的比例性、藝術(shù)性、和諧性，蘊藏著豐富的美學(xué)價值，被認為是藝術(shù)設(shè)計中最理想的比例。

2. 圖片排版

圖片的排版類型有很多種，根據(jù)不同的場景和所需傳遞的主體信息來選擇與之相符的展現(xiàn)方式，以下是常見的幾種排版類型。

2.1 滿版型

滿版型是以圖片作為主體或背景鋪滿整個畫面，常搭配文字信息或 icon 修飾，視覺傳達直觀而強烈，給人大方、舒展的感覺。

2.2 通欄型

通欄型是指圖片與整體頁面的寬度相同，而高度為其幾分之一甚至更小的一種圖片展現(xiàn)方式，最常見的就是輪播圖（Banner）。

通欄型圖片寬闊大氣，可以有效地強調(diào)和展示重要的商品、活動等運營內(nèi)容。

2.3 并置型

并置型是將不同的圖片作大小相同而位置不同的重復(fù)排列，可以是左右或上下排列，能給原本復(fù)雜喧鬧的版面帶來秩序、安靜、調(diào)和與節(jié)奏感。

2.4 九宮格型

九宮格型是用四條線把畫面上下左右分割成九個小塊，可以把 1 個或者 2 個小塊作為一個單位填充圖像，這種構(gòu)圖給人嚴謹、規(guī)范、有序的感覺。

2.5 瀑布流型

瀑布流型的圖片會在頁面上呈現(xiàn)參差不齊的多欄布局，降低了界面復(fù)雜度，節(jié)省了空間，使用戶專注于瀏覽，去掉了繁瑣的操作，體驗更好。

要素五：空間

1. 柵格系統(tǒng)

1.1 柵格系統(tǒng)簡介

柵格系統(tǒng)英文為「Grid systems」，是一種平面設(shè)計的方法與風(fēng)格，運用固定的格子設(shè)計版面空間布局。

其風(fēng)格工整簡潔，在二戰(zhàn)后大受歡迎，已成為今日出版物設(shè)計的主流風(fēng)格之一。

如今柵格系統(tǒng)也已經(jīng)被運用到網(wǎng)頁設(shè)計中，它以規(guī)則的網(wǎng)格陣列來指導(dǎo)和規(guī)范網(wǎng)頁中的空間布局。

柵格系統(tǒng)的使用，可以讓網(wǎng)頁的信息呈現(xiàn)更加美觀、易讀、嚴謹和一致，同時也更具可用性。

1.2 「8像素」柵格規(guī)則

「8像素」柵格規(guī)則是一個以 8px 為單位，利用 8 的倍數(shù)來規(guī)定頁面中元素（按鈕、輸入框、圖片等）的尺寸及各自間距的一種通用的柵格規(guī)則。

為什么用 8 而不是 5 或 7 呢？因為 8 是一個偶數(shù)，在 UI 設(shè)計過程中，對于 Android 系統(tǒng)需要導(dǎo)出特殊的 @1.5x 的切圖，

如果圖片尺寸為奇數(shù)，則會出現(xiàn)半像素和虛邊的問題，而用偶數(shù)則可以避免這種情況。

為什么用 8 而不是 6 或 10 呢？因為目前主流的屏幕尺寸大部分都是 8 的整數(shù)倍，比如 1920 × 1080、1280 × 1024、1280 × 800、1024 × 768 等。

即使某些屏幕邊長像素不是 8 的倍數(shù)，在設(shè)計中仍然可以盡量做到自定義元素的長、寬、margin 以及 padding 都是 8 的整倍數(shù)來維持設(shè)計的一致性。

2. 留白

對于一些特殊的頁面，例如：引導(dǎo)頁、閃屏頁、促銷頁等，可以不用嚴格按照柵格系統(tǒng)進行設(shè)計，但需要注意空間留白的運用。

2.1 留白四屬性

層次感：留白可以使頁面的層次感得到極大的增強，留白越大，模塊、信息間的層次感越清晰。

焦點：元素越多，人的視覺注意力越容易分散；相反元素越少（即留白越大），注意力則會更有效地聚焦在重要的內(nèi)容上。

韻味：留白具有“此時無物勝有物”的感覺，猶如中國的水墨畫。留白運用于頁面設(shè)計中，韻味也會出現(xiàn)。

呼吸：留白的呼吸屬性可以想象成周圍的空氣，當(dāng)空氣中的顆粒物（元素）特別多時，人的呼吸也會覺得不通透；相反留白越多時，呼吸感越順暢。

2.2 留白表現(xiàn)形式

輕度留白：輕度留白是我們常見的頁面留白設(shè)計形式，在傳遞出雅致、高端、文藝等氣質(zhì)的同時，又能將信息表現(xiàn)得清晰直接，讓頁面更加簡潔和實用。

輕度留白融合了重度留白的優(yōu)勢，但不受品牌屬性的影響，幾乎任何產(chǎn)品都可以用這種表現(xiàn)形式。

重度留白：重度留白是把主體縮小到極致，其傳遞出的雅致、空靈、高端氣質(zhì)是最強的，但與此同時，其他的屬性也近乎為零。

“無印良品”品牌倡導(dǎo)簡約、質(zhì)樸的生活方式，原研哉賦予其設(shè)計理念就是“空”。所以，重度留白傳遞的不是產(chǎn)品，而是概念、氣質(zhì)和態(tài)度。

最后總結(jié)

1. 色彩

色相、明度、飽和度是色彩的三個屬性，不同的色彩具有不同的心理寓意，選色時需考慮產(chǎn)品的調(diào)性和受眾人群；

色環(huán)上距離(角度)越大的顏色對比效果越強，反之對比效果越弱，設(shè)計時應(yīng)采用合適的色彩搭配。

2. 字體

黑體、宋體等是常用的中文字體，而襯線體和無襯線體是常用的西文字體；不同平臺的界面設(shè)計會有不同的字體使用規(guī)范；

另外，設(shè)計時需注意字號、字重以及行間距的設(shè)置，以達到最佳的閱讀體驗。

3. 圖標(biāo)

圖標(biāo)可以輔助信息文字的傳達，也可以對界面起到修飾作用；功能型和展示型是圖標(biāo)的兩大類型；

不同風(fēng)格的圖標(biāo)傳遞出不同的視覺語言，根據(jù)場景的需要進行合適的選擇，并保持風(fēng)格的一致性。

4. 圖片

不同比例的圖片所傳遞的主要信息各不相同，設(shè)計時需要結(jié)合產(chǎn)品的特點，并根據(jù)不同的要求來選擇合適的圖片比例；

圖片的排版類型有很多種，根據(jù)不同的場景和所需傳遞的主體信息來選擇與之相符的展現(xiàn)方式。

5. 空間

使用柵格系統(tǒng)，可以讓界面的信息呈現(xiàn)更加美觀、易讀和規(guī)范，設(shè)計時可以采用「8像素」柵格規(guī)則來指導(dǎo)元素尺寸和間距的制定；

層次感、焦點、韻味、呼吸是留白的四個屬性，留白的表現(xiàn)形式需結(jié)合品牌的屬性來選擇。

在任何領(lǐng)域，如果想要有所成就，都需要不斷的持續(xù)學(xué)習(xí)提升，需要孜孜以求的探索，需要與時俱進，需要不斷練習(xí)和實踐。

～此文轉(zhuǎn)載，如有侵權(quán)，請聯(lián)系刪除