從極簡設(shè)計的設(shè)計思想出發(fā), 講解極簡設(shè)計風(fēng)格的原理 極簡設(shè)計風(fēng)格在圖標(biāo)設(shè)計/手機(jī)界面設(shè)計/網(wǎng)頁設(shè)計和平面媒體設(shè)計中的應(yīng)用。全書所有案例配教學(xué)視頻,有助讀者學(xué)習(xí)。全書的案例極具針對性,便于讀者查找學(xué)習(xí)。
胡衛(wèi)軍,男,1978年2月出生,黑龍江省大慶市人,藝術(shù)學(xué)博士,中國語言文學(xué)博士后,吉林大學(xué)藝術(shù)學(xué)院設(shè)計系副教授,主要從事視覺傳達(dá)設(shè)計與產(chǎn)品設(shè)計研究。主持國家社科基金藝術(shù)學(xué)項目1項“東北少數(shù)民族薩滿教造物藝術(shù)研究”(項目編號:12CG095),發(fā)表論文30余篇,其中6篇發(fā)表在CSSSCI核心期刊,出版著作4部:《東北薩滿文化設(shè)計研究》(吉林大學(xué)出版社,2010年);《工業(yè)產(chǎn)品設(shè)計》(黑龍江美術(shù)出版社,2011年);《設(shè)計師專業(yè)色譜與配色設(shè)計》(電子工業(yè)出版社,2011年);《平面設(shè)計速查》(電子工業(yè)出版社,2012年)。從事UI設(shè)計多年,有豐富的UI設(shè)計教學(xué)經(jīng)驗。熟練掌握各種設(shè)計工作,了解整個UI設(shè)計項目的工作流程和開發(fā)技巧。并熟練掌握iOS系統(tǒng)和Androdi系統(tǒng)UI的UI設(shè)計規(guī)則和交互設(shè)計規(guī)則。
1極簡主義設(shè)計概述
1.1 極簡主義 …………………………………… 10
1.1.1 什么是極簡主義 ………………………… 10
1.1.2 極簡主義的主要特征 …………………… 11
1.1.3 極簡主義的發(fā)展 ………………………… 13
1.1.4 極簡主義的局限性 ……………………… 15
1.1.5 極簡主義在生活中的應(yīng)用 ……………… 15
1.2 極簡主義設(shè)計風(fēng)格 ………………………… 19
1.2.1 什么是極簡主義設(shè)計風(fēng)格 ……………… 19
1.2.2 極簡主義設(shè)計與東方傳統(tǒng)思想 ………… 21
1.2.3 通過“無印良品”設(shè)計看極簡主義風(fēng)格 22
1.2.4 極簡主義設(shè)計風(fēng)格的特點(diǎn) ……………… 24
1.3 極簡主義設(shè)計帶來的改變 ………………… 25
1.3.1 強(qiáng)調(diào)簡約 ………………………………… 25
1.3.2 快速而高效 ……………………………… 26
1.3.3 信息突出 ………………………………… 26
1.3.4 簡潔清晰 ………………………………… 27
1.3.5 方便修改 ………………………………… 27
1.4 極簡主義設(shè)計帶給人們的啟示 …………… 28
1.4.1 極簡主義設(shè)計追求“質(zhì)” ……………… 28
1.4.2 回歸設(shè)計的零點(diǎn)——人的“感官體驗” 29
1.5 通過極簡設(shè)計提升產(chǎn)品的用戶體驗 ……… 30
1.5.1 刪除不必要的樣式 ……………………… 31
1.5.2 配色是影響極簡設(shè)計的主要因素 ……… 31
1.5.3 注重排版 ………………………………… 32
1.5.4 合理的動效能夠有效提升用戶體驗 …… 35
1.5.5 交互體驗應(yīng)該更加直觀 ………………… 37
1.6 設(shè)計欣賞 …………………………………… 38
2 極簡主義設(shè)計趨勢
2.1 極簡主義設(shè)計與傳統(tǒng)設(shè)計的區(qū)別 ………… 41
2.1.1 表現(xiàn)重點(diǎn)不同 …………………………… 41
2.1.2 極簡主義設(shè)計營造簡約美 ……………… 42
2.1.3 突破傳統(tǒng)設(shè)計理念的局限性 …………… 43
2.1.4 為市場注入新鮮活力 …………………… 43
2.1.5 從新的角度詮釋個性 …………………… 44
2.1.6 提取自然元素的現(xiàn)代設(shè)計 ……………… 44
2.2 極簡主義設(shè)計要點(diǎn) ………………………… 45
2.2.1 精簡 ……………………………………… 45
2.2.2 大膽 ……………………………………… 46
2.2.3 細(xì)致 ……………………………………… 47
2.2.4 個性 ……………………………………… 47
2.3 選擇極簡主義設(shè)計風(fēng)格的理由 …………… 48
2.3.1 為主流用戶設(shè)計 ………………………… 48
2.3.2 簡單意味著控制 ………………………… 49
2.3.3 聚焦核心功能和內(nèi)容 …………………… 50
2.3.4 滿足情感需求 …………………………… 51
2.3.5 簡單、直接 ……………………………… 52
2.4 極簡主義設(shè)計的四個策略 ………………… 52
2.4.1 刪除 ……………………………………… 52
2.4.2 分類 ……………………………………… 55
2.4.3 隱藏 ……………………………………… 57
2.4.4 轉(zhuǎn)移 ……………………………………… 58
2.5 極簡主義設(shè)計原則 ………………………… 59
2.5.1 以人為本 ………………………………… 59
2.5.2 簡約而不簡單 …………………………… 60
2.5.3 貼合時代發(fā)展 …………………………… 61
2.5.4 體現(xiàn)設(shè)計的審美價值 …………………… 62
2.6 極簡主義的情感化設(shè)計趨勢 ……………… 63
2.6.1 在極簡主義設(shè)計中突出情感化 ………… 63
2.6.2 如何體現(xiàn)情感化設(shè)計 …………………… 64
2.6.3 融合創(chuàng)新 ………………………………… 67
2.7 設(shè)計欣賞 …………………………………… 68
3.1 了解平面設(shè)計 ……………………………… 71
3 極簡平面廣告設(shè)計
3.1.1 什么是平面設(shè)計 ………………………… 71
3.1.2 極簡主義平面設(shè)計 ……………………… 71
3.1.3 平面設(shè)計中極簡主義風(fēng)格的
應(yīng)用與發(fā)展趨勢 ………………………… 72
3.2 淋漓盡致的極簡設(shè)計語言 ………………… 74
3.2.1 色彩表現(xiàn) ………………………………… 74
3.2.2 字體表現(xiàn) ………………………………… 76
3.2.3 圖形表現(xiàn) ………………………………… 77
3.2.4 大面積留白 ……………………………… 78
3.3 極簡平面設(shè)計要求 ………………………… 79
3.3.1 主題鮮明突出 …………………………… 79
3.3.2 形式與內(nèi)涵的統(tǒng)一 ……………………… 80
3.3.3 強(qiáng)化整體布局 …………………………… 81
3.3.4 迎合現(xiàn)代生活需求 ……………………… 83
3.4 極簡主義平面設(shè)計的表現(xiàn)手法 …………… 84
3.4.1 使用“新材料” ………………………… 84
3.4.2 無裝飾性 ………………………………… 85
3.4.3 對稱構(gòu)圖 ………………………………… 86
3.4.4 與環(huán)境和諧 ……………………………… 86
3.4.5 由繁到簡的文字處理 …………………… 87
3.4.6 少而精的圖形設(shè)計 ……………………… 88
3.4.7 簡約的配色 ……………………………… 89
3.5 極簡Logo 設(shè)計技巧 ……………………… 91
3.5.1 專注文字 ………………………………… 91
3.5.2 線條化設(shè)計 ……………………………… 92
3.5.3 幾何圖形 ………………………………… 93
3.5.4 正負(fù)空間 ………………………………… 94
3.5.5 多形態(tài)標(biāo)志 ……………………………… 95
3.5.6 去除無用的色彩和裝飾 ………………… 96
3.6 極簡主義在海報設(shè)計中的應(yīng)用 …………… 97
3.6.1 視覺焦點(diǎn) ………………………………… 98
3.6.2 形態(tài)精煉 ………………………………… 98
3.6.3 色彩襯托 ………………………………… 99
3.6.4 極簡海報設(shè)計技巧 …………………… 100
3.7 極簡主義風(fēng)格對版式設(shè)計的影響 ……… 103
3.7.1 版式設(shè)計概述 ………………………… 103
3.7.2 版式設(shè)計的構(gòu)成形式 ………………… 104
3.7.3 極簡主義在版式設(shè)計中的應(yīng)用 ……… 105
3.7.4 極簡主義影響下的版式設(shè)計發(fā)展 …… 107
3.8 設(shè)計欣賞 ………………………………… 108
4 極簡包裝設(shè)計
4.1 了解極簡包裝設(shè)計 ……………………… 111
4.1.1 什么是極簡包裝設(shè)計 ………………… 111
4.1.2 極簡包裝設(shè)計的表現(xiàn)方式 …………… 112
4.2 極簡包裝設(shè)計的結(jié)構(gòu)造型 ……………… 113
4.2.1 關(guān)于商品的過度包裝 ………………… 114
4.2.2 實現(xiàn)包裝結(jié)構(gòu)造型極簡化的方法 …… 114
4.3 極簡包裝設(shè)計要求 ……………………… 116
4.3.1 色彩設(shè)計 ……………………………… 116
4.3.2 圖形設(shè)計 ……………………………… 119
4.3.3 文字設(shè)計 ……………………………… 120
4.3.4 版式設(shè)計 ……………………………… 122
4.4 極簡包裝設(shè)計的材料與工藝 …………… 123
4.4.1 合理選擇包裝材料 …………………… 123
4.4.2 技術(shù)工藝 ……………………………… 125
4.5 極簡包裝設(shè)計經(jīng)典案例 ………………… 126
4.5.1 恬淡幽靜的日式設(shè)計 ………………… 126
4.5.2 簡約溫情的北歐設(shè)計 ………………… 127
4.5.3 典雅大氣的法式設(shè)計 ………………… 128
4.5.4 盡顯張力的德式設(shè)計 ………………… 129
4.6 如何讓極簡設(shè)計風(fēng)格的包裝更精致 …… 129
4.6.1 系列產(chǎn)品的設(shè)計 ……………………… 130
4.6.2 使用特殊材質(zhì)提升產(chǎn)品質(zhì)感 ………… 131
4.6.3 富有創(chuàng)意的包裝造型設(shè)計 …………… 131
4.6.4 巧妙利用產(chǎn)品本身的色彩 …………… 132
4.6.5 采用傳統(tǒng)包裝方式 …………………… 133
4.7 設(shè)計欣賞 ………………………………… 134
5 極簡移動界面設(shè)計
5.1 了解極簡移動界面設(shè)計 ………………… 137
5.1.1 移動App 的設(shè)計流程 ………………… 137
5.1.2 精簡界面內(nèi)容 ………………………… 138
5.1.3 簡潔的表現(xiàn)形式 ……………………… 140
5.2 極簡界面設(shè)計元素——界面空間 ……… 142
5.2.1 移除額外的元素和裝飾 ……………… 142
5.2.2 留白 …………………………………… 143
5.2.3 極簡移動界面使用留白分隔元素,
而非線條………………………………… 145
5.3 極簡界面設(shè)計元素——色彩 …………… 145
5.3.1 色彩基礎(chǔ) ……………………………… 146
5.3.2 了解色彩對人的心理影響 …………… 147
5.3.3 常用配色方法 ………………………… 147
5.3.4 極簡移動界面配色技巧 ……………… 150
5.4 極簡界面設(shè)計元素——文字 …………… 152
5.4.1 襯線字體與無襯線字體 ……………… 152
5.4.2 移動端常規(guī)字體 ……………………… 153
5.4.3 極簡移動界面盡可能
只使用一種字體………………………… 154
5.5 極簡界面設(shè)計元素——圖標(biāo) …………… 155
5.5.1 圖標(biāo)的功能 …………………………… 155
5.5.2 圖標(biāo)的類型 …………………………… 157
5.5.3 圖標(biāo)的風(fēng)格 …………………………… 158
5.5.4 極簡移動界面圖標(biāo)的選擇 …………… 160
5.6 極簡界面設(shè)計元素——圖片 …………… 161
5.6.1 圖片比例 ……………………………… 161
5.6.2 常見圖片排版方式 …………………… 162
5.6.3 極簡移動界面中圖片的應(yīng)用技巧 …… 164
5.7 極簡移動界面設(shè)計原則 ………………… 165
5.7.1 實用性 ………………………………… 165
5.7.2 統(tǒng)一的色彩與風(fēng)格 …………………… 165
5.7.3 合理的配色 …………………………… 166
5.7.4 規(guī)范的操作流程 ……………………… 166
5.7.5 視覺元素規(guī)范 ………………………… 167
5.8 極簡移動界面設(shè)計注意事項 …………… 167
5.8.1 界面視覺設(shè)計 ………………………… 167
5.8.2 界面設(shè)計用戶體驗 …………………… 169
5.9 設(shè)計欣賞 ………………………………… 171
6 極簡網(wǎng)頁設(shè)計__
6.1 了解極簡網(wǎng)頁設(shè)計 ……………………… 174
6.1.1 什么是網(wǎng)頁設(shè)計 ……………………… 174
6.1.2 極簡網(wǎng)頁設(shè)計的特點(diǎn) ………………… 175
6.1.3 網(wǎng)頁設(shè)計的“零界面”趨勢 ………… 176
6.2 極簡網(wǎng)頁設(shè)計的視覺體驗 ……………… 177
6.2.1 極致的視覺元素之美 ………………… 177
6.2.2 流暢的視覺體驗 ……………………… 178
6.2.3 簡便的交互設(shè)計 ……………………… 179
6.3 極簡網(wǎng)頁設(shè)計元素 ……………………… 180
6.3.1 圖標(biāo) …………………………………… 180
6.3.2 圓角 …………………………………… 181
6.3.3 折角 …………………………………… 181
6.3.4 標(biāo)簽 …………………………………… 182
6.3.5 徽章 …………………………………… 182
6.3.6 線條 …………………………………… 183
6.3.7 裝飾背景 ……………………………… 183
6.4 如何創(chuàng)建極簡風(fēng)格網(wǎng)頁 ………………… 183
6.4.1 擁抱扁平化設(shè)計 ……………………… 183
6.4.2 留白 …………………………………… 185
6.4.3 設(shè)計的加減法哲學(xué) …………………… 186
6.4.4 注重網(wǎng)頁版式設(shè)計 …………………… 187
6.4.5 簡化導(dǎo)航欄 …………………………… 188
6.4.6 善用色彩 ……………………………… 188
6.4.7 全屏背景圖片或視頻 ………………… 191
6.5 極簡網(wǎng)頁的版式布局 …………………… 192
6.5.1 對齊 …………………………………… 192
6.5.2 對比 …………………………………… 194
6.5.3 有“氣質(zhì)”的留白 …………………… 196
6.6 極簡網(wǎng)頁的配色技巧 …………………… 197
6.6.1 無彩色頁面點(diǎn)綴鮮艷輔色 …………… 197
6.6.2 選擇商品主色調(diào)作為網(wǎng)頁主色調(diào) …… 198
6.6.3 使用顏色不超過三種 ………………… 199
6.6.4 看似復(fù)雜的顏色搭配其實很簡單 …… 200
6.7 極簡網(wǎng)頁的字體選擇 …………………… 202
6.7.1 選擇符合整體設(shè)計風(fēng)格的字體 ……… 202
6.7.2 選擇簡單字形結(jié)構(gòu)的字體 …………… 203
6.7.3 選擇獨(dú)特的中文字體 ………………… 204
6.8 極簡網(wǎng)頁設(shè)計布局 ……………………… 205
6.8.1 極簡網(wǎng)頁布局結(jié)構(gòu)標(biāo)準(zhǔn) ……………… 205
6.8.2 極簡網(wǎng)頁布局的兩個要點(diǎn) …………… 206
6.9 設(shè)計欣賞 ………………………………… 207