原創：微信公眾號：「彭彭設計筆記」
轉載：https://www.uisdc.com/interface-vision-design-5-elements
一款 App 或 Web 產品，從用戶體驗的角度包含了戰略層、范圍層、結構層、框架層、表現層。而作為 UI 設計師，如果連「表現層」的內容都還一知半解就去盲目地學習其他領域，這是不提倡的。
這里說的「表現層」是指視覺設計層面，在界面的視覺設計中同樣也包含了5個視覺要素：色彩、文字、圖標、圖片、空間。一個出色的界面設計，必然是將這些要素做到了淋漓盡致。
本文結合大量優秀的案例，并以通俗簡練的語言，系統地介紹了這5個視覺要素。篇幅略長，耐心讀完你一定會有收獲。
文章大綱如下：
一、色彩
1. 色彩基礎概述
色彩三屬性
- 色相（H）：即色彩的相貌、種類和名稱，比如紅、橙、黃、綠等顏色的種類就叫色相。
- 飽和度（S）：即色彩的鮮艷程度，也稱純度。
- 明度（B）：即色彩的明亮程度。
人眼看到的任一彩色光都是這三個屬性的綜合效果。
色彩寓意
同一色相的不同明度和不同飽和度，也會對人產生不同的心理感受。我在這里歸納整理了各種色彩在通常情況下代表的不同寓意，僅供參考。
- 紅色（Red）：熱烈、喜慶、熱情、浪漫、危險
- 橙色（Orange）：溫暖、食物、友好、財富、警告
- 黃色（Yellow）：光輝、明亮、尊貴、權力
- 綠色（Green）：健康、自然、清新、希望、安全
- 青色（Cyan）：朝氣、脫俗、真誠、清麗
- 藍色（Blue）：平靜、純潔、清涼、科技、沉穩
- 紫色（Purple）：神秘、高貴、優雅、浪漫、妖艷
- 黑色（Black）：深沉、莊重、嚴肅、邪惡、死亡
- 白色（White）：純潔、神圣、干凈、高雅、冷淡
- 灰色（Gray）：平凡、隨意、蒼老、冷漠
2. 色彩搭配
色相對比：兩種及兩種以上色彩組合后，由于色相差別而形成的色彩對比效果稱為色相對比。
色相對比的強弱程度，取決于色相之間在色環上的距離 （角度），距離 （角度） 越大對比越強，反之對比越弱。
一般界面的色彩搭配主要包括三種顏色：主色調、輔助色、點綴色，搭配比例分別為 6:3:1。
同類色搭配
色環上相距 0° 的顏色為同類色，一般常用同一種色相的不同明度或不同飽和度的組合方式，例如藍與淺藍，紅與粉紅等。同類色搭配對比效果統一、清新、含蓄，但也容易產生單調、乏味的感受。
鄰近色搭配
色環上相距 30° 左右的顏色為鄰近色 ，例如紫與藍紫，藍紫與藍等。鄰近色搭配對比效果柔和、文靜、和諧，但也容易感覺單調、模糊，需調節明度來加強效果。
[圖片上傳失敗...(image-822030-1531723740076)]
類似色搭配
色環上相距 60° 左右的顏色為類似色，例如橙與黃，黃橙與黃綠等。類似色搭配對比效果較豐富、活潑，同時又不失統一、和諧的感覺。
中差色搭配
色環上相距 90° 左右的顏色為中差色，例如紅與黃橙，藍綠與黃等。中差色搭配對比效果明快、活潑、飽滿、使人興奮，同時不失調和之感。
對比色搭配
色環上相距 120° 左右的顏色為對比色，例如紅與黃，紅紫與黃橙等。對比色搭配對比效果強烈、醒目、刺激、有力，但也容易造成視覺疲勞，一般需要采用多種調和手段來改善對比效果。
互補色搭配
色環上相距 180° 左右的顏色為互補色，例如紅與綠，黃與紫等。互補色搭配表現出一種力量、氣勢與活力，具有非常強烈的視覺沖擊力。
多色搭配
多色搭配顧名思義是由多種色彩組合而成的一種搭配方式，一般以不超過 4 種顏色為宜，規定一種作為主導色，其余作為輔助色使用。
多色搭配會讓畫面顯得更加豐富、多彩，充滿趣味性，但若控制不好，也容易讓畫面變花，失去平衡。搭配時須注意區分主次，按比例進行調和。
[圖片上傳中...(image-f414ca-1531723740076-25)]
二、文字
1. 字體簡介
中文字體種類大致分為：宋體、黑體、仿宋、楷體、其它（變體字）。
西文字體種類大致分為：無襯線體、羅馬正體或襯線體、意大利斜體、手寫體、黑字體（哥特體）。
這次主要給大家介紹一下比較常用的襯線體和無襯線體。
襯線體
襯線字體在筆畫末端具有附加的裝飾線條或者「韻腳」。襯線字體字母的橫線較細、豎線較粗，如 Times New Roman、Georgia 等字體屬于襯線體。
襯線體具有復古傳統的曲線美、個性鮮明、張力十足，通常用在時尚奢侈品牌、復古海報等設計領域中。
無襯線體
無襯線體顧名思義，就是指「沒有襯線的字體」。襯線指的是字母結構筆畫之外的裝飾性線條，無襯線字體字母的豎線和橫線粗細基本相同，像經典的 Helvetica 和 Futula 等字體就屬于無襯線體。
無襯線體通常比較簡約、具有現代感，適用于 Web、App 等互聯網科技領域的設計中。
2. 文字使用規則
不同平臺的界面設計中規范的字體會有不同，像移動端界面的設計就會有固定的字體樣式，網頁中會有常用的幾個字體。
移動端常規字體
在 iOS 設備上，系統默認的英文字體為 SanFrancisco，中文字體為 PingFang。值得注意的是，SanFrancisco 字體會隨著字號的變化自動調整字母之間的間距，以確保任何情況下都能很清晰地閱讀。
在 Android 設備上，原生系統英文字體使用 DroidSans 或 Roboto，但國內的 Rom 大都是第三方廠商定制而成，對原生系統字體有所變動。大家在設計時可以使用 Noto 作為中文字體來使用。
網頁端常用字體
在 Windows 系統中，常用字體有微軟雅黑、黑體、宋體等，最小字號推薦 12px，正文字號推薦 14px，標題字號推薦 18px、20px、24px、28px、32px 等，盡可能使用偶數。而行間距一般為字號的 1.5-1.8 倍。
在 Mac OS 系統中，常用中文字體有蘋方、思源黑體 、華文細黑等，英文字體有 Helvetica、SanFrancisco 等。
值得一提的是：Helvetica 曾被評為是設計師最愛的字體，簡潔現代的線條，非常受到追捧。在 Mac 下被認為是最佳的網頁字體，在 Windows 下由于 Hinting 的原因顯示很糟糕。
三、圖標
1. 圖標功能
圖標是 Web 和 App 設計中的點睛之筆，既能輔助文字信息的傳達，也能作為信息載體被高效地識別，并且圖標也有一定的裝飾作用，可以提高界面設計的美觀度。
2. 圖標類型
關于圖標的類型目前并沒有很權威的分類，我根據圖標的用途將其分為兩大類：「功能型圖標」和「展示型圖標」。
功能型圖標
一般來說，凡是 UI 界面中，用戶可以點擊的圖標均可看成是功能型圖標，該類圖標往往代表某一功能或某一鏈接的跳轉。這類圖標的典型應用場景就是 iOS 系統中的底部標簽欄，以及 Material Design 中側滑菜單選項的左側。
某些列表或卡片內的圖標也屬于功能型圖標，但這類圖標往往代表一個功能，而底部標簽欄圖標往往代表一個頁面或板塊。
展示型圖標
相比功能型圖標，展示型圖標更加具有「設計感」，是獨特的、有內涵的以及具備辨識度的。一般來說，展示型圖標主要是應用程序的啟動圖標。該類圖標代表了一款產品的屬性、氣質以及品牌形象等，也是用戶首先看到的內容，設計時應盡可能讓用戶記住并感到愉悅。
該類圖標在 iOS 系統中除了出現在 App Store 里，還出現在用戶下載后的桌面上，以及 Spotlight 的搜索結果和設置等地方。
3. 圖標風格
圖標的設計風格有很多種，例如：線性圖標、面性圖標、線面結合圖標、扁平圖標、輕擬物圖標、擬物圖標、手繪型圖標等，我對其中常見的幾種作下簡要的介紹。
線性圖標
線性圖標是由直線、曲線、點等元素組合而成的圖標樣式。該類圖標輕巧簡練，具有一定的想象空間，且不會對界面產生太大的視覺干擾。
面性圖標
面性圖標可以簡單理解為對線性圖標的填充，但面性比線性更加穩重和扎實，對色彩的傳達也清晰明顯。
線面結合圖標
線面結合圖標典型代表是「MBE風格」圖標，其設計特點是采用了粗描邊線和偏移的填充面相結合，靈動而鮮明。粗線條起到對畫面的絕對分割，突顯內容、表現清晰。
扁平圖標
扁平圖標去掉了透視、紋理、漸變等能做出 3D 效果的元素，讓信息本身作為核心被凸顯出來，并且在設計元素上強調抽象、極簡、符號化。
輕擬物圖標
輕擬物圖標沒有擬物圖標那么寫實，也不像扁平圖標那么「平」，而是利用淡淡的漸變和一些光影來達到兩者之間的平衡，識別性高又不失美感。
四、圖片
圖片在 Web 和 App 界面設計中是非常常見的，圖片的質量和展現方式都會影響著用戶對產品的感官體驗。
1. 圖片比例
不同比例的圖片所傳遞的主要信息各不相同，我們需要結合產品的特點，并根據不同的場景來選擇合適的圖片比例進行設計。
1比1
1:1 是比較常見的圖片設計比例，相同的長寬將構圖呈現得簡單，突出了主體的存在感，常用于產品、頭像、特寫等展示場景。
** 4比3**
4:3 的圖片比例使圖像更緊湊，更容易構圖，便于開展設計，也是常用圖片比例之一。
16比9
16:9 的圖片比例可以呈現電影觀影般的效果，是很多視頻播放軟件常用的尺寸，能帶給用戶一種視野開闊的體驗。
16比10
16:10 的圖片比例最接近黃金比，而黃金分割具有嚴格的比例性、藝術性、和諧性，蘊藏著豐富的美學價值，被認為是藝術設計中最理想的比例。
2. 圖片排版
圖片的排版類型有很多種，根據不同的場景和所需傳遞的主體信息來選擇與之相符的展現方式，以下是常見的幾種排版類型。
滿版型
滿版型是以圖片作為主體或背景鋪滿整個畫面，常搭配文字信息或 icon 修飾，視覺傳達直觀而強烈，給人大方、舒展的感覺。
通欄型
通欄型是指圖片與整體頁面的寬度相同，而高度為其幾分之一甚至更小的一種圖片展現方式，最常見的就是輪播圖（Banner）。通欄型圖片寬闊大氣，可以有效地強調和展示重要的商品、活動等運營內容。
并置型
并置型是將不同的圖片作大小相同而位置不同的重復排列，可以是左右或上下排列，能給原本復雜喧鬧的版面帶來秩序、安靜、調和與節奏感。
九宮格型
九宮格型是用四條線把畫面上下左右分割成九個小塊，可以把 1 個或者 2 個小塊作為一個單位填充圖像，這種構圖給人嚴謹、規范、有序的感覺。
瀑布流型
瀑布流型的圖片會在頁面上呈現參差不齊的多欄布局，降低了界面復雜度，節省了空間，使用戶專注于瀏覽，去掉了繁瑣的操作，體驗更好。
五、空間
1. 柵格系統
柵格系統簡介
柵格系統英文為「Grid systems」，是一種平面設計的方法與風格，運用固定的格子設計版面空間布局，其風格工整簡潔，在二戰后大受歡迎，已成為今日出版物設計的主流風格之一。
如今柵格系統也已經被運用到網頁設計中，它以規則的網格陣列來指導和規范網頁中的空間布局。柵格系統的使用，可以讓網頁的信息呈現更加美觀、易讀、嚴謹和一致，同時也更具可用性。
「8像素」柵格規則
「8像素」柵格規則是一個以 8px 為單位，利用 8 的倍數來規定頁面中元素（按鈕、輸入框、圖片等）的尺寸及各自間距的一種通用的柵格規則。
為什么用 8 而不是 5 或 7 呢？因為 8 是一個偶數，在 UI 設計過程中，對于 Android 系統需要導出特殊的 @1.5x 的切圖，如果圖片尺寸為奇數，則會出現半像素和虛邊的問題，而用偶數則可以避免這種情況。
為什么用 8 而不是 6 或 10 呢？因為目前主流的屏幕尺寸大部分都是 8 的整數倍，比如 1920 × 1080、1280 × 1024、1280 × 800、1024 × 768 等。即使某些屏幕邊長像素不是 8 的倍數，在設計中仍然可以盡量做到自定義元素的長、寬、margin 以及 padding 都是 8 的整倍數來維持設計的一致性。
2. 留白
對于一些特殊的頁面，例如：引導頁、閃屏頁、促銷頁等，可以不用嚴格按照柵格系統進行設計，但需要注意空間留白的運用。
留白四屬性
- 層次感：留白可以使頁面的層次感得到極大的增強，留白越大，模塊、信息間的層次感越清晰。
- 焦點：元素越多，人的視覺注意力越容易分散；相反元素越少（即留白越大），注意力則會更有效地聚焦在重要的內容上。
- 韻味：留白具有「此時無物勝有物」的感覺，猶如中國的水墨畫。留白運用于頁面設計中，韻味也會出現。
- 呼吸：留白的呼吸屬性可以想象成周圍的空氣，當空氣中的顆粒物（元素）特別多時，人的呼吸也會覺得不通透；相反留白越多時，呼吸感越順暢。
留白表現形式
輕度留白：輕度留白是我們常見的頁面留白設計形式，在傳遞出雅致、高端、文藝等氣質的同時，又能將信息表現得清晰直接，讓頁面更加簡潔和實用。輕度留白融合了重度留白的優勢，但不受品牌屬性的影響，幾乎任何產品都可以用這種表現形式。
重度留白：重度留白是把主體縮小到極致，其傳遞出的雅致、空靈、高端氣質是最強的，但與此同時，其他的屬性也近乎為零。「無印良品」品牌倡導簡約、質樸的生活方式，原研哉賦予其設計理念就是「空」。所以，重度留白傳遞的不是產品，而是概念、氣質和態度。
小結
1. 色彩
色相、明度、飽和度是色彩的三個屬性，不同的色彩具有不同的心理寓意，選色時需考慮產品的調性和受眾人群；色環上距離（角度）越大的顏色對比效果越強，反之對比效果越弱，設計時應采用合適的色彩搭配。
2. 字體
黑體、宋體等是常用的中文字體，而襯線體和無襯線體是常用的西文字體；不同平臺的界面設計會有不同的字體使用規范；另外，設計時需注意字號、字重以及行間距的設置，以達到最佳的閱讀體驗。
3. 圖標
圖標可以輔助信息文字的傳達，也可以對界面起到修飾作用；功能型和展示型是圖標的兩大類型；不同風格的圖標傳遞出不同的視覺語言，根據場景的需要進行合適的選擇，并保持風格的一致性。
4. 圖片
不同比例的圖片所傳遞的主要信息各不相同，設計時需要結合產品的特點，并根據不同的要求來選擇合適的圖片比例；圖片的排版類型有很多種，根據不同的場景和所需傳遞的主體信息來選擇與之相符的展現方式。
5. 空間
使用柵格系統，可以讓界面的信息呈現更加美觀、易讀和規范，設計時可以采用「8像素」柵格規則來指導元素尺寸和間距的制定；層次感、焦點、韻味、呼吸是留白的四個屬性，留白的表現形式需結合品牌的屬性來選擇。
在任何領域，如果想要有所成就，都需要超越極限的學習，都需要孜孜以求的探索，都需要殫精竭慮的思考，都需要無數次失敗和成功的實踐。沒有人可以超越學習、思考和實踐成為一個真正的高手。
