本書(shū)緊扣用戶(hù)界面設(shè)計(jì)趨勢(shì),主要講解了什么是UI設(shè)計(jì),UI設(shè)計(jì)的原則與理念,UI的文字、圖片和圖標(biāo)設(shè)計(jì),網(wǎng)頁(yè)UI設(shè)計(jì),移動(dòng)端UI設(shè)計(jì)五大方面的內(nèi)容。本書(shū)結(jié)構(gòu)清晰、內(nèi)容翔實(shí),為廣大讀者詳細(xì)解讀了用戶(hù)界面的設(shè)計(jì)理念與方法,是一本用戶(hù)界面設(shè)計(jì)的導(dǎo)論級(jí)讀物。
本書(shū)可供UI設(shè)計(jì)師、平面設(shè)計(jì)師、用戶(hù)體驗(yàn)專(zhuān)家、網(wǎng)頁(yè)設(shè)計(jì)師等提高設(shè)計(jì)技能、開(kāi)闊視野,也可幫助他們打開(kāi)創(chuàng)意靈感之門(mén);本書(shū)也適合想要從事UI設(shè)計(jì)相關(guān)工作的讀者學(xué)習(xí)使用;本書(shū)還可作為高校和培訓(xùn)機(jī)構(gòu)平面設(shè)計(jì)和網(wǎng)頁(yè)設(shè)計(jì)等相關(guān)專(zhuān)業(yè)的教材和參考書(shū)。
第1章 什么是UI設(shè)計(jì)——UI的前世今生 001
1.1 什么是UI 002
1.2 UI的發(fā)展歷程 003
1.2.1 語(yǔ)言命令用戶(hù)界面 004
1.2.2 圖形用戶(hù)界面 004
1.2.3 多媒體用戶(hù)界面 005
1.2.4 多通道用戶(hù)界面 006
1.2.5 虛擬現(xiàn)實(shí)人機(jī)界面 007
第2章 UI設(shè)計(jì)的原則與理念 013
2.1 需要靈活應(yīng)用的七大定律 014
2.1.1 費(fèi)茲定律 014
2.1.2 席克定律 018
2.1.3 操縱定律 022
2.1.4 泰思勒定律 026
2.1.5 奧卡姆剃刀原理 028
2.1.6 神奇數(shù)字7±2法則 033
2.1.7 接近法則 034
2.2 完形組織法則的六個(gè)概念 035
2.2.1 圖形-背景關(guān)系法則 035
2.2.2 鄰近法則 039
2.2.3 相似法則 041
2.2.4 閉合法則 046
2.2.5 延續(xù)法則 047
2.3 Shneiderman 界面設(shè)計(jì)八大黃金法則 049
2.3.1 八大黃金法則 049
2.3.2 Shneiderman 8大黃金法則在蘋(píng)果UI設(shè)計(jì)上的應(yīng)用 051
第3章 UI設(shè)計(jì)基礎(chǔ) 057
3.1 UI文字、圖片和圖標(biāo)設(shè)計(jì) 058
3.1.1 UI設(shè)計(jì)中字體的使用 058
3.1.2 UI設(shè)計(jì)中圖片的使用 065
3.2 UI色彩設(shè)計(jì) 073
3.2.1 UI設(shè)計(jì)中的色彩基本知識(shí) 074
3.2.2 UI設(shè)計(jì)中的色彩情感 078
3.2.3 UI配色方式 080
第4章 網(wǎng)頁(yè)UI設(shè)計(jì)——細(xì)節(jié)的完美主義 103
4.1 網(wǎng)頁(yè)UI基本概念 104
4.2 網(wǎng)頁(yè)UI設(shè)計(jì)原則 104
4.2.1 以用戶(hù)為中心 104
4.2.2 視覺(jué)美觀 105
4.2.3 主題明確 106
4.2.4 內(nèi)容與形式統(tǒng)一 110
4.2.5 有機(jī)的整體 110
4.3 UI版式設(shè)計(jì)的形式美 112
4.3.1 主次關(guān)系 114
4.3.2 虛實(shí)對(duì)比 115
4.3.3 比例尺度 115
4.3.4 對(duì)稱(chēng)與均衡 116
4.3.5 對(duì)比與調(diào)和 117
4.3.6 節(jié)奏和韻律 118
4.3.7 量感 119
4.3.8 空間感 119
4.3.9 尺度感 122
4.4 細(xì)節(jié)設(shè)計(jì)之著陸頁(yè):直達(dá)OR迷宮 123
4.4.1 著陸頁(yè)的概念 123
4.4.2 轉(zhuǎn)化率的意義 123
4.4.3 著陸頁(yè)的構(gòu)成 125
4.4.4 如何提升著陸頁(yè)的轉(zhuǎn)化率 127
4.4.5 案例 130
4.5 細(xì)節(jié)設(shè)計(jì)之“關(guān)于我們”:走心,才能打動(dòng)用戶(hù) 133
4.6 細(xì)節(jié)設(shè)計(jì)之彈窗:“不速之客”帶來(lái)的驚喜 136
4.6.1 減少干擾 137
4.6.2 與現(xiàn)實(shí)世界相關(guān)聯(lián) 138
4.6.3 追求極簡(jiǎn) 140
4.6.4 選擇適當(dāng)?shù)膹棿胺N類(lèi) 142
4.6.5 視覺(jué)一致性 144
4.7 細(xì)節(jié)設(shè)計(jì)之404頁(yè)面 145
4.8 網(wǎng)頁(yè)UI極簡(jiǎn)設(shè)計(jì)——無(wú)勝有 148
4.8.1 極簡(jiǎn)設(shè)計(jì)的要點(diǎn) 150
4.8.2 極簡(jiǎn)設(shè)計(jì)技巧 153
4.9 電商網(wǎng)站UI設(shè)計(jì)案例 156
第5章 移動(dòng)端UI設(shè)計(jì)——“行走”的藝術(shù) 161
5.1 移動(dòng)UI 162
5.2 移動(dòng)端UI設(shè)計(jì)原則 162
5.2.1 一致性原則 162
5.2.2 信息量少而準(zhǔn)原則 163
5.2.3 語(yǔ)言通俗原則 163
5.2.4 顏色合理搭配原則 163
5.2.5 布局合理化原則 164
5.3 從桌面端到移動(dòng)端內(nèi)容遷移的用戶(hù)體驗(yàn)優(yōu)化 164
5.3.1 每屏只完成一項(xiàng)任務(wù) 164
5.3.2 精簡(jiǎn)并優(yōu)化導(dǎo)航體系 165
5.3.3 基于搜索引擎的設(shè)計(jì)模式 166
5.3.4 更大的字體 166
5.3.5 意義清晰的微文案 167
5.3.6 去掉不必要的特效 168
5.3.7 尺寸適配 168
5.4 Google Material Design 169
5.4.1 Material Design的設(shè)計(jì)原則 170
5.4.2 Material Design體系 171
5.4.3 Material Design引領(lǐng)的UI設(shè)計(jì)趨勢(shì) 192
5.5 APP UI設(shè)計(jì) 196
5.5.1 APP UI版式設(shè)計(jì) 197
5.5.2 APP細(xì)節(jié)設(shè)計(jì)——登錄頁(yè) 213
5.5.3 案例視覺(jué)社交網(wǎng)站Pinterest APP設(shè)計(jì) 221
參考文獻(xiàn) 228