要素一：色彩

1.1色彩出概述-色彩三屬性

色相(H)：即色彩的相貌曹体、種類和名稱，比如紅饰潜、橙初坠、黃、綠等顏色的種類就叫色相

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

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

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

1.2色彩出概述-色彩寓意

同一色相的不同明度和不同飽和度，也會(huì)對(duì)人產(chǎn)生不用的心里感受薯酝。我在這里歸納整理了各種色彩在通常情況下代表的不同寓意半沽。

紅色：熱情、喜慶蜜托、熱烈、浪漫霉赡、危險(xiǎn)

橙色：溫暖橄务、食物、友好穴亏、財(cái)富蜂挪、警告

黃色：光輝、明亮嗓化、尊貴棠涮、權(quán)力

綠色：健康、自然刺覆、清新严肪、希望、安全

青色：朝氣谦屑、脫俗驳糯、真誠(chéng)、清麗

藍(lán)色：平靜氢橙、純潔酝枢、清涼、科技悍手、沉穩(wěn)

紫色：神秘帘睦、高貴、優(yōu)雅坦康、浪漫竣付、妖嬈

黑色：深沉、莊重滞欠、嚴(yán)肅卑笨、邪惡、死亡

白色：純潔仑撞、神圣赤兴、干凈妖滔、高雅、冷淡

灰色：平凡桶良、隨意座舍、蒼老、冷漠

2.1色彩搭配-同類色搭配

色環(huán)上相距0度的顏色為同類色陨帆，一般常用同一種色相的不同明度或不同飽和度的組合方式曲秉，例如藍(lán)與淺藍(lán)，紅與粉紅等疲牵。同類色彩搭配對(duì)比效果統(tǒng)一承二、清新、含蓄纲爸，但也容易產(chǎn)生單調(diào)亥鸠、乏味的感受。

2.2色彩搭配-鄰近色搭配

色環(huán)上相距30度左右的顏色為鄰近色识啦，例如紫與藍(lán)紫负蚊，藍(lán)紫與藍(lán)等。鄰近色搭配對(duì)比效果柔和颓哮、文靜家妆、和諧，但也容易感覺(jué)單調(diào)冕茅、模糊伤极，需調(diào)節(jié)明度來(lái)加強(qiáng)效果

2.3色彩搭配-類似色搭配

色環(huán)上相距60度左右的顏色為類似色，例如橙與黃姨伤，黃橙與黃綠等塑荒。類似色搭配對(duì)比效果較豐富、活潑姜挺，同時(shí)又不失統(tǒng)一齿税、和諧的感覺(jué)

2.4色彩搭配-中差色搭配

色環(huán)上相距90度左右的顏色為中差色，例如紅與黃橙炊豪，藍(lán)綠與黃等凌箕。中差色搭配對(duì)比效果明快、活潑词渤、飽滿牵舱、使人興奮，同時(shí)不失調(diào)和之感

2.5色彩搭配-對(duì)比色搭配

色環(huán)上相距120度左右的顏色為對(duì)比色缺虐，例如紅與黃芜壁，紅紫與黃橙等。對(duì)比色搭配對(duì)比效果強(qiáng)烈、醒目慧妄、刺激顷牌、有力，但也容易造成視覺(jué)疲勞塞淹，一般需要采用多種調(diào)和手段來(lái)改善對(duì)比效果

2.6色彩搭配-互補(bǔ)色搭配

色環(huán)上相距180度左右的顏色為互補(bǔ)色窟蓝，例如紅與綠，黃與紫等饱普≡舜欤互補(bǔ)色搭配表現(xiàn)出一種力量、氣勢(shì)與活力套耕，具有非常強(qiáng)烈的視覺(jué)沖擊力

2.7色彩搭配-多色搭配

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

多色搭配會(huì)讓畫(huà)面顯得更加豐富、多彩颠猴，充滿趣味性关划，但若控制不好小染，也容易讓畫(huà)面變花翘瓮，失去平衡。搭配時(shí)須注意區(qū)分主次裤翩，按比例進(jìn)行調(diào)和资盅。

要素二：文字

1.1字體簡(jiǎn)介-襯線體

襯線體字體在畫(huà)筆末端具有附加的修飾線條或者“韻腳”。襯線字體字母的橫線較細(xì)踊赠、豎線較粗呵扛，如Times New Roman、Georgia?等字體屬于襯線體筐带。

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

1.2字體簡(jiǎn)介-無(wú)襯線體

無(wú)襯線體顧名思義帖鸦，就是指“沒(méi)有襯線的字體”芝薇。襯線值得時(shí)字母結(jié)構(gòu)筆畫(huà)之外的修飾性線條，無(wú)襯線字體字母的豎線和橫線粗細(xì)基本相同作儿，向經(jīng)典的Helvetica?和?Futula??等字體就屬于無(wú)襯線體

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

2.1文字使用規(guī)則-移動(dòng)端常規(guī)字體

在ios設(shè)備上晾嘶，系統(tǒng)默認(rèn)的英文字體為SanFrancisco妓雾，中文字體為?PingFang，值得注意的是变擒，SanFrancisco 字體會(huì)隨著字號(hào)的變化自動(dòng)調(diào)整字母之間的間距君珠，以確保任何情況下都能很清晰地閱讀

在 Android 設(shè)備上，原生系統(tǒng)英文字體使用?DroidSans?或?Roboto娇斑，但國(guó)內(nèi)的 Rom 大都是第三方廠商定制而成策添，對(duì)原生系統(tǒng)字體有所變動(dòng)。大家在設(shè)計(jì)時(shí)可以使用?Noto?作為中文字體來(lái)使用

2.2文字使用規(guī)則-網(wǎng)頁(yè)端常用字體

在 Windows 系統(tǒng)中毫缆，常用字體有?微軟雅黑唯竹、黑體、宋體?等苦丁，最小字號(hào)推薦 12px浸颓，正文字號(hào)推薦 14px，標(biāo)題字號(hào)推薦 18px旺拉、20px产上、24px、28px蛾狗、32px 等晋涣，盡可能使用偶數(shù)。而行間距一般為字號(hào)的 1.5-1.8 倍

在 Mac OS 系統(tǒng)中沉桌，常用中文字體有?蘋(píng)方谢鹊、思源黑體?、華文細(xì)黑?等留凭，英文字體有?Helvetica佃扼、SanFrancisco?等

要素三：圖標(biāo)

1.1圖標(biāo)功能

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

2.1圖標(biāo)類型-功能性圖標(biāo)

一般來(lái)說(shuō)瘤运，凡是UI界面中，用戶可以點(diǎn)擊的圖標(biāo)均可看成是功能性圖標(biāo)遵倦，該類圖標(biāo)往往代表某一功能或某一鏈接的跳轉(zhuǎn)尽超。這類圖標(biāo)的典型應(yīng)用場(chǎng)景就是ios系統(tǒng)中的底部標(biāo)簽欄，以及Material Design 中側(cè)滑菜單選項(xiàng)的左側(cè)

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

2.2 圖標(biāo)類型-展示型圖標(biāo)

相比功能性圖標(biāo)傲绣，展示型圖標(biāo)更加具有【設(shè)計(jì)感】，是獨(dú)特的巩踏、有內(nèi)涵的以及具備辨識(shí)度秃诵。一般來(lái)說(shuō)，展示型圖標(biāo)蛀牙是應(yīng)用程序的啟動(dòng)圖標(biāo)塞琼。該類圖標(biāo)代表了一款產(chǎn)品的屬性菠净、氣質(zhì)以及品牌形象等，也是用戶首先看到的內(nèi)容彪杉，設(shè)計(jì)時(shí)應(yīng)盡可能讓用戶記住并感到愉悅

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

3.1圖標(biāo)風(fēng)格-線性圖標(biāo)

線性圖標(biāo)是由直線派近、曲線攀唯、點(diǎn)等元素組合而成的圖標(biāo)樣式。該類圖標(biāo)輕巧簡(jiǎn)練渴丸，具有一定的想象空間侯嘀，且不會(huì)對(duì)界面產(chǎn)生太大的視覺(jué)干擾

3.2圖標(biāo)風(fēng)格-面型圖標(biāo)

面型圖標(biāo)可以簡(jiǎn)單理解為對(duì)線性圖標(biāo)的填充，但面性比線型更加穩(wěn)重和扎實(shí)谱轨，對(duì)色彩的傳達(dá)也清晰明顯

3.3圖標(biāo)風(fēng)格-線面結(jié)合圖標(biāo)

線面結(jié)合圖標(biāo)典型代表是【MBE風(fēng)格】圖標(biāo)戒幔，其設(shè)計(jì)特點(diǎn)是采用了粗描邊線和偏移的填充面相結(jié)合，靈動(dòng)而鮮明土童。粗線條起到對(duì)畫(huà)面的絕對(duì)分割诗茎，突顯內(nèi)容、表現(xiàn)清晰

3.4圖標(biāo)風(fēng)格-偏平圖標(biāo)

偏平圖標(biāo)去掉了透明娜扇、紋理错沃、漸變等能做出3D效果的元素栅组，讓信息本身作為核心被凸顯出來(lái)雀瓢，并且在設(shè)計(jì)元素上強(qiáng)調(diào)抽象、極簡(jiǎn)玉掸、符號(hào)化

3.5圖標(biāo)風(fēng)格-輕擬物圖標(biāo)

輕擬物圖標(biāo)沒(méi)有擬物圖標(biāo)那么寫(xiě)實(shí)刃麸，也不像偏平圖標(biāo)那么“平”，而是利用淡淡的漸變和一些光影來(lái)達(dá)到兩者之間的平衡司浪，識(shí)別性高又不失美感

要素四：圖片

1.1圖片比例-1比1

1:1時(shí)比較常見(jiàn)的圖片設(shè)計(jì)比例泊业，相同的長(zhǎng)寬將構(gòu)圖呈現(xiàn)得簡(jiǎn)單，突出了主體的存在感啊易，常用于產(chǎn)品頭像吁伺、特寫(xiě)等展示場(chǎng)景

1.2圖片比例-4比3

4:3的圖標(biāo)比例使圖更緊湊，更容易構(gòu)圖租谈，便于開(kāi)展設(shè)計(jì)篮奄，也是常用圖片比例之一

1.3圖片比例-16:9

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

1.4圖片比例-16:10

16:10的圖片比例最接近黃金比窟却，而黃金分割具有嚴(yán)格的比例性昼丑、藝術(shù)性、和諧性夸赫，蘊(yùn)藏著豐富的美學(xué)價(jià)值菩帝，被認(rèn)為是藝術(shù)設(shè)計(jì)中最理想的比例

2.1圖片排版-滿版型

滿版型是以圖片作為主體或背景鋪滿整個(gè)畫(huà)面，常搭配文字信息或icon修飾茬腿，視覺(jué)傳達(dá)直觀而強(qiáng)烈呼奢，給人大方、舒展的感覺(jué)

2.2圖片排版-通欄型

通欄型是指圖片與整體頁(yè)面的寬度相同切平，而高度為其幾分之一甚至更小的一種圖片展示方式控妻，最常見(jiàn)的就是輪播圖。通欄型圖片寬闊大氣揭绑，可以有效的強(qiáng)調(diào)和展示重要的商品弓候、活動(dòng)等運(yùn)營(yíng)內(nèi)容

2.3圖片排版-并置型

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

2.4圖片排版-九宮格型

九宮格型是用四條線把畫(huà)面上下左右分割成九個(gè)小塊邦蜜，可以把1個(gè)或者2個(gè)小塊作為一個(gè)單位填充圖像依鸥，這種構(gòu)圖給人嚴(yán)謹(jǐn)、規(guī)范悼沈、有序的感覺(jué)

2.5圖片排版-瀑布流型

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

要素五：空間

1.1柵格系統(tǒng)-簡(jiǎn)介

柵格系統(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)頁(yè)設(shè)計(jì)中，它以規(guī)則的網(wǎng)格陣列來(lái)指導(dǎo)和規(guī)范網(wǎng)頁(yè)中的空間布局向拆。柵格系統(tǒng)的使用亚茬，可以讓網(wǎng)頁(yè)的信息呈現(xiàn)更加美觀、易讀浓恳、嚴(yán)謹(jǐn)和一致刹缝，同時(shí)也更具可用性

1.2柵格系統(tǒng)-【8像素】柵格規(guī)則

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

為什么用 8 而不是 5 或 7 呢？因?yàn)?8 是一個(gè)偶數(shù)厨疙，在 UI 設(shè)計(jì)過(guò)程中洲守，對(duì)于 Android 系統(tǒng)需要導(dǎo)出特殊的 @1.5x 的切圖，如果圖片尺寸為奇數(shù)沾凄，則會(huì)出現(xiàn)半像素和虛邊的問(wèn)題梗醇，而用偶數(shù)則可以避免這種情況。

為什么用 8 而不是 6 或 10 呢撒蟀？因?yàn)槟壳爸髁鞯钠聊怀叽绱蟛糠侄际?8 的整數(shù)倍叙谨，比如 1920 × 1080、1280 × 1024保屯、1280 × 800手负、1024 × 768 等。即使某些屏幕邊長(zhǎng)像素不是 8 的倍數(shù)姑尺，在設(shè)計(jì)中仍然可以盡量做到自定義元素的長(zhǎng)竟终、寬、margin 以及 padding 都是 8 的整倍數(shù)來(lái)維持設(shè)計(jì)的一致性

2.1留白-留白四屬性

層次感：留白可以使頁(yè)面的層次感得到極大的增強(qiáng)切蟋，留白越大统捶，模塊、信息間的層次感越清晰柄粹。

焦點(diǎn)：元素越多喘鸟，人的視覺(jué)注意力越容易分散；相反元素越少（即留白越大）驻右，注意力則會(huì)更有效地聚焦在重要的內(nèi)容上什黑。

韻味：留白具有“此時(shí)無(wú)物勝有物”的感覺(jué)，猶如中國(guó)的水墨畫(huà)旺入。留白運(yùn)用于頁(yè)面設(shè)計(jì)中兑凿，韻味也會(huì)出現(xiàn)凯力。

呼吸：留白的呼吸屬性可以想象成周?chē)目諝庖瘃?dāng)空氣中的顆粒物（元素）特別多時(shí)，人的呼吸也會(huì)覺(jué)得不通透咐鹤；相反留白越多時(shí)拗秘，呼吸感越順暢。

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

輕度留白：輕度留白是我們常見(jiàn)的頁(yè)面留白設(shè)計(jì)形式祈惶，在傳遞出雅致雕旨、高端扮匠、文藝等氣質(zhì)的同時(shí)，又能將信息表現(xiàn)得清晰直接凡涩，讓頁(yè)面更加簡(jiǎn)潔和實(shí)用棒搜。輕度留白融合了重度留白的優(yōu)勢(shì)，但不受品牌屬性的影響活箕，幾乎任何產(chǎn)品都可以用這種表現(xiàn)形式力麸。

重度留白：重度留白是把主體縮小到極致，其傳遞出的雅致育韩、空靈克蚂、高端氣質(zhì)是最強(qiáng)的，但與此同時(shí)筋讨，其他的屬性也近乎為零埃叭。“無(wú)印良品”品牌倡導(dǎo)簡(jiǎn)約悉罕、質(zhì)樸的生活方式赤屋，原研哉賦予其設(shè)計(jì)理念就是“空”。所以壁袄，重度留白傳遞的不是產(chǎn)品益缎，而是概念、氣質(zhì)和態(tài)度然想。