微課學網頁UI佈局與配色

目錄

第1章?網頁UI元素設計

1.1　關於UI設計

1.1.1?什麽是UI設計

1.1.2?什麽是GUI設計

1.1.3?瞭解UE/UX

1.1.4?移動UI設計的崛起

1.2　網頁UI構成元素

1.2.1?文字

1.2.2?圖形符號

1.2.3?圖像

1.2.4?多媒體

1.2.5?色彩

1.3　網頁UI設計原則

1.3.1?以用戶為中心

1.3.2?主題明確

1.3.3?視覺美觀

1.3.4?內容與形式統一

1.3.5?有機的整體

1.4　網站Logo設計

1.4.1?Logo的特點

1.4.2?Logo的設計規範

1.4.3?Logo的表現形式

1.5　網頁圖標設計

1.5.1?瞭解網頁圖標

1.5.2?圖標的設計原則

1.5.3?圖標的應用

1.6　網頁按鈕設計

1.6.1?網頁按鈕的功能

1.6.2?如何設計出色的網頁按鈕

1.7　網頁導航設計

1.7.1?瞭解網頁導航

1.7.2?導航在網頁中的佈局位置

1.7.3?網頁導航設計的基本原則

1.8　網頁廣告設計

1.8.1?網頁廣告的常見類型

1.8.2?如何設計出色的網頁廣告

1.9　課後練習

第2章?網頁UI中的文字排版與圖形設計

2.1　網頁中的文字

2.1.1?關於字體

2.1.2?網頁中常用的中文字體

2.1.3?字符大小

2.1.4?網頁中文字的使用技巧

2.2　網頁中文字的排版

2.2.1?文字排版的易讀性規則

2.2.2?文字排版設計的常用手法

2.3　圖形在網頁UI中的作用

2.4　網頁中的圖形設計類型

2.4.1?插圖

2.4.2?圖形符號

2.4.3?照片

2.4.4?頁面分割

2.4.5?立體圖形

2.5　網頁中圖片的排列佈局形式

2.5.1?大小統一的矩陣排列佈局

2.5.2?大小不一的矩陣排列佈局

2.5.3?瀑布流排列佈局

2.5.4?下一張圖片預覽

2.6　課後練習

第3章?網頁UI佈局基礎

3.1　瞭解網頁UI佈局

3.1.1?網頁UI佈局的目的

3.1.2?網頁UI佈局的操作順序

3.2　網頁UI佈局的基本方法

3.2.1?網頁UI佈局的設計

3.2.2?網頁UI佈局的構成原則

3.3　網頁UI佈局的要點

3.4　根據整體內容位置決定的網頁UI佈局

3.4.1?滿屏式佈局

3.4.2?兩欄式佈局

3.4.3?三欄式佈局

3.4.4?水平和垂直居中的佈局

3.5　根據分割方向決定的網頁UI佈局

3.5.1?縱向分割佈局

3.5.2?橫向分割佈局

3.5.3?縱向與橫向復合型佈局

3.5.4?運用固定區域的設計

3.6　初始頁面的佈局類型

3.7　課後練習

第4章?網頁UI佈局形態與視覺風格

4.1　網頁功能與網頁形態哪個更重要

4.2　網頁UI佈局形態的含義及情感

4.2.1?點

4.2.2?圓

4.2.3?三角形

4.2.4?矩形

4.2.5?菱形

4.2.6?直線

4.2.7?斜線

4.2.8?曲線

4.2.9?自由曲線

4.3　大眾化網頁UI佈局形態

4.4　個性化網頁UI佈局形態

4.5　常見網頁UI視覺風格

4.5.1?極簡風格

4.5.2?簡潔風格

4.5.3?扁平化風格

4.5.4?插畫風格

4.5.5?懷舊風格

4.5.6?照片風格

4.5.7?立體化風格

4.5.8?大字體風格

4.6　課後練習

第5章?網頁UI配色基礎

5.1　色彩基礎

5.1.1?色彩的產生

5.1.2?RGB顏色

5.1.3?CMYK顏色

5.2　色彩的屬性

5.2.1?色相表現出不同的色彩印象

5.2.2?明度體現出色彩的明暗程度

5.2.3?純度決定了色彩的鮮艷程度

5.3　有彩色與無彩色

5.4　影響畫面總體色彩印象的要素——色調

5.5　網頁UI配色的聯想作用

5.5.1?色彩聯想和心理效果

5.5.2?紅色

5.5.3?橙色

5.5.4?黃色

5.5.5?綠色

5.5.6?青色

5.5.7?藍色

5.5.8?紫色

5.5.9?黑色

5.5.10?白色

5.5.11?灰色

5.6　UI配色的基本步驟

5.6.1?明確產品的定位與目標

5.6.2?確定目標用戶群體

5.6.3?分析競爭對手

5.6.4?產品測試

5.7　課後練習

第6章?網頁UI元素的配色

6.1　色彩在網頁UI中所扮演的角色

6.1.1?主題色——傳遞UI主題

6.1.2?背景色——支配UI整體情感

6.1.3?輔助色——營造獨特的UI風格

6.1.4?點綴色——強調畫面重點信息與功能

6.2　網頁元素的色彩搭配

6.2.1?Logo與網頁廣告

6.2.2?導航菜單

6.2.3?背景與文字

6.2.4?鏈接文字

6.3　根據受眾群體選擇網頁配色

6.3.1?不同性別的色彩偏好

6.3.2?不同年齡的色彩偏好

6.4　根據商品銷售階段選擇網頁配色

6.4.1?新產品上市期的網頁配色

6.4.2?產品拓展期的網頁配色

6.4.3?產品穩定銷售期的網頁配色

6.4.4?產品衰退期的網頁配色

6.5　如何打造成功的網頁配色

6.5.1?遵循色彩的基本原理

6.5.2?考慮網頁的特點

6.5.3?無彩色頁面點綴鮮艷色彩

6.5.4?保持與產品色彩統一的配色設計

6.5.5?避免配色的混亂

6.6　常見網站配色

6.6.1?女性化網站配色

6.6.2?男性化網站配色

6.6.3?兒童網站配色

6.6.4?穩定、安靜的網站配色

6.6.5?興奮激昂的網站配色

6.6.6?輕快律動的網站配色

6.6.7?生動活力的網站配色

6.6.8?清爽自然的網站配色

6.6.9?高貴典雅的網站配色

6.6.10?成熟的網站配色

6.7　課後練習

第7章　網頁UI配色基本方法

7.1　基於色相的配色方法

7.1.1?基於色相的配色關系

7.1.2?同類色配色

7.1.3?鄰近色配色

7.1.4?相反色相、類似色調配色

7.1.5?相反色相、相反色調配色

7.1.6?漸變配色

7.2　基於色調的配色方法

7.2.1　基於色調的配色關系

7.2.2?相同或類似色相、類似色調配色

7.2.3?相同或類似色相、相反色調配色

7.3　融合配色使網頁UI表現更加平穩

7.3.1?同明度配色使界面更融合

7.3.2?同純度配色使界面更和諧

7.3.3?同類色單色調配色

7.3.4?暗濁色調配色

7.3.5?明艷色調配色

7.3.6?灰調配色

7.3.7?層次感配色

7.4　對比配色使網頁UI表現更加強烈

7.4.1?色相對比

7.4.2　原色對比

7.4.3?間色對比

7.4.4?補色對比

7.4.5?冷暖對比

7.4.6?面積對比

7.4.7?主體突出的配色

7.5　表現網頁UI情感印象的配色

7.5.1?暖色調配色

7.5.2?冷色調配色

7.5.3?高調的配色

7.5.4?低調的配色

7.5.5?健康的配色

7.5.6?警示的配色

7.6　課後練習

第8章　網頁UI配色技巧

8.1　UI中色彩的作用與心理感受

8.1.1?UI中色彩的作用

8.1.2?應用色彩感覺進行配色

8.2　突出主題的配色技巧

8.2.1?使用高飽和度色彩烘托主題表現

8.2.2?通過留白突出UI主題

8.2.3?添加鮮艷色彩表現出UI活力

8.2.4?添加點綴色為UI帶來亮點

8.2.5?通過色彩明度對比表現出層次感

8.2.6?抑制輔助色或背景

8.3　簡約而不簡單，黑白灰配色技巧

8.3.1?加入白色調和，使界面更輕盈、透氣

8.3.2?加入黑色調和，使界面更穩重、大氣

8.3.3?加入灰色調和，使UI更具有質感

8.3.4?綜合運用黑白灰搭配

8.4　使用鮮艷的配色方案提升UI設計效果

8.4.1?提升UI內容的可讀性和易讀性

8.4.2?為交互元素應用鮮艷的色彩

8.4.3?鮮艷的色彩更易識別

8.4.4?營造氛圍、傳遞情緒

8.4.5?網頁UI表現更加時尚

8.5　網頁UI深色背景的使用技巧

8.5.1?為什麽實際應用深色背景的產品不多

8.5.2?深色背景的適用條件

8.5.3?深色背景的視覺風格

8.5.4?哪些類型的產品適合使用深色背景

8.5.5?使用深色背景需要考慮的問題

8.6　課後練習

習題答案