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

要素一：色彩

1. 色彩基礎概述

1.1 色彩三屬性

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

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

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

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

1.2 色彩寓意

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

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

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

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

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

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

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

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

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

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

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

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

2. 色彩搭配

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

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

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

要素二：文字

1. 字體簡介

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

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

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

2. 文字使用規則

    不同平臺的界面設計中規范的字體會有不同，像移動端界面的設計就會有固定的字體樣式，網頁中會有常用的幾個字體。

要素三：圖標

1. 圖標功能

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

2. 圖標類型

    關于圖標的類型目前并沒有很權威的分類，我根據圖標的用途將其分為兩大類：「功能型圖標」和「展示型圖標」。

3. 圖標風格

    圖標的設計風格有很多種，例如：線性圖標、面性圖標、線面結合圖標、扁平圖標、輕擬物圖標、擬物圖標、手繪型圖標等，我對其中常見的幾種作下簡要的介紹。

要素四：圖片

    圖片在 Web 和 App 界面設計中是非常常見的，圖片的質量和展現方式都會影響著用戶對產品的感官體驗。

1. 圖片比例

   不同比例的圖片所傳遞的主要信息各不相同，我們需要結合產品的特點，并根據不同的場景來選擇合適的圖片比例進行設計。

2. 圖片排版

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

要素五：空間

1. 柵格系統

    柵格系統英文為「Grid systems」，是一種平面設計的方法與風格，運用固定的格子設計版面空間布局。

    其風格工整簡潔，在二戰后大受歡迎，已成為今日出版物設計的主流風格之一。

    如今柵格系統也已經被運用到網頁設計中，它以規則的網格陣列來指導和規范網頁中的空間布局。

    柵格系統的使用，可以讓網頁的信息呈現更加美觀、易讀、嚴謹和一致，同時也更具可用性。

2. 留白

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

    本文由培訓無憂網長沙牛耳教育課程顧問老師整理發布，希望能夠對想參加長沙UI設計培訓的學生有所幫助。更多課程信息可關注培訓無憂網UI設計培訓或添加老師微信：15033336050

      注：尊重原創文章,轉載請注明出處和鏈接 http://m.hebeijilong.cn/news-id-5539.html 違者必究！部分文章來源于網絡由培訓無憂網編輯部人員整理發布,內容真實性請自行核實或聯系我們，了解更多相關資訊請關注UI設計頻道查看更多，了解相關專業課程信息您可在線咨詢也可免費申請試課。關注官方微信了解更多：150 3333 6050