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

要素一：色彩

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

1.1 色彩三屬性

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

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

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

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

1.2 色彩寓意

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

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

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

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

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

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

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

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

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

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

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

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

2. 色彩搭配

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

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

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

要素二：文字

1. 字體簡(jiǎn)介

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

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

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

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

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

要素三：圖標(biāo)

1. 圖標(biāo)功能

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

2. 圖標(biāo)類型

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

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

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

要素四：圖片

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

1. 圖片比例

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

2. 圖片排版

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

要素五：空間

1. 柵格系統(tǒng)

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

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

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

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

2. 留白

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

    本文由培訓(xùn)無憂網(wǎng)長(zhǎng)沙牛耳教育課程顧問老師整理發(fā)布，希望能夠?qū)ο雲(yún)⒓娱L(zhǎng)沙UI設(shè)計(jì)培訓(xùn)的學(xué)生有所幫助。更多課程信息可關(guān)注培訓(xùn)無憂網(wǎng)UI設(shè)計(jì)培訓(xùn)或添加老師微信：15033336050

      注：尊重原創(chuàng)文章,轉(zhuǎn)載請(qǐng)注明出處和鏈接 http://www.dedgn.cn/news-id-5539.html 違者必究！部分文章來源于網(wǎng)絡(luò)由培訓(xùn)無憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實(shí)性請(qǐng)自行核實(shí)或聯(lián)系我們，了解更多相關(guān)資訊請(qǐng)關(guān)注UI設(shè)計(jì)頻道查看更多，了解相關(guān)專業(yè)課程信息您可在線咨詢也可免費(fèi)申請(qǐng)?jiān)囌n。關(guān)注官方微信了解更多：150 3333 6050