123,123,123

內(nèi)容簡(jiǎn)介

　　本書著重講解Web UI設(shè)計(jì)的原則、方法和應(yīng)用。按照“知識(shí)點(diǎn)分析—知識(shí)點(diǎn)深入與擴(kuò)展—?dú)w納與運(yùn)用（全面案例講解）—新技術(shù)的拓展”的進(jìn)階結(jié)構(gòu)來講解，讓讀者能夠循序漸進(jìn)地、更科學(xué)地學(xué)習(xí)。全書共9章，第1～8章內(nèi)容涵蓋工作的準(zhǔn)備階段、線框圖設(shè)計(jì)、Web網(wǎng)格布局、Web界面設(shè)計(jì)基礎(chǔ)參考規(guī)范、Web界面設(shè)計(jì)高級(jí)參考規(guī)范、Web設(shè)計(jì)用戶體驗(yàn)、Web界面設(shè)計(jì)實(shí)戰(zhàn)和網(wǎng)頁設(shè)計(jì)新趨勢(shì)（MDL），講解貫穿實(shí)際設(shè)計(jì)案例，幫助讀者梳理工作流，融入設(shè)計(jì)理論，并教會(huì)讀者如何思考、如何應(yīng)用理論，進(jìn)而能以不變應(yīng)萬變。最后一章對(duì)設(shè)計(jì)師的個(gè)人發(fā)展提出了一些建議，分享了一些經(jīng)驗(yàn)。隨書附贈(zèng)書中核心案例的PSD文件，供讀者學(xué)習(xí)、參考。本書適合有一定Photoshop軟件基礎(chǔ)的設(shè)計(jì)初學(xué)者、相關(guān)專業(yè)大學(xué)生及想要進(jìn)階的Web設(shè)計(jì)師閱讀。

作者簡(jiǎn)介

　　Chuckie Chang（中文名常誠(chéng)）一名非科班出身的Web產(chǎn)品設(shè)計(jì)師。Envato作者，TemplateMonster產(chǎn)品簽約供應(yīng)商，WordPress Slack團(tuán)隊(duì)成員、官方平臺(tái)插件貢獻(xiàn)者，曾擔(dān)任過麥子學(xué)院金牌講師。他的部分作品刊登于Behance交互設(shè)計(jì)專欄，并獲Awwwards、CSSDesignAwards等機(jī)構(gòu)網(wǎng)站獎(jiǎng)項(xiàng)提名，獨(dú)立開發(fā)的建站產(chǎn)品曾進(jìn)入Product Hunt網(wǎng)站前10榜單。他擅長(zhǎng)網(wǎng)頁界面設(shè)計(jì)、Web產(chǎn)品設(shè)計(jì)，并能熟練運(yùn)用適當(dāng)?shù)那昂蠖思夹g(shù)進(jìn)行產(chǎn)品開發(fā)。

圖書目錄

目錄
CHAPTER 01 準(zhǔn)備階段 009
1．1 操作準(zhǔn)備 010
1．1．1 必備的硬件和軟件 010
1．1．2 工作環(huán)境 010
1．1．3 知識(shí)儲(chǔ)備 011
1．2 軟件必備知識(shí) 012
1．2．1 了解Photoshop 012
1．2．2 切圖技巧 020
1．2．3 文檔標(biāo)注技巧 024
1．3 職業(yè)需求 027
1．3．1 就業(yè)方向 027
1．3．2 崗位能力分析 028
1．3．3 未來規(guī)劃建議 028
1．4 學(xué)習(xí)目標(biāo) 029
1．5 基礎(chǔ)技能自測(cè) 030
CHAPTER 02 線框圖設(shè)計(jì)指南 031
2．1 線框圖的重要性 032
2．1．1 線框圖概念理解 032
2．1．2 與原型圖的關(guān)系 033
2．1．3 與效果圖的關(guān)系 036
2．1．4 與設(shè)計(jì)軟件的關(guān)系 037
2．2 自適應(yīng)設(shè)計(jì)與響應(yīng)式設(shè)計(jì) 038
2．2．1 對(duì)比 038
2．2．2 運(yùn)用 038
2．3 草圖設(shè)計(jì) 039
2．4 構(gòu)建柵格（網(wǎng)格）系統(tǒng) 040
2．4．1 如何理解柵格（網(wǎng)格）這個(gè)概念 040
2．4．2 運(yùn)用 041
2．5 創(chuàng)建規(guī)范線框圖 042
2．5．1 草圖構(gòu)思 042
2．5．2 頁面尺寸和安全寬度設(shè)計(jì) 045
2．5．3 首屏高度控制 048
2．5．4 基礎(chǔ)布局 049
2．5．5 文字排版與分屏設(shè)計(jì) 052
2．5．6 線框圖細(xì)節(jié)刻畫 067
2．5．7 基于線框圖的視覺設(shè)計(jì) 067
2．5．8 圖片輸出 077
2．6 線框圖自測(cè) 078
CHAPTER 03 Web網(wǎng)格布局指南 079
3．1 基礎(chǔ)知識(shí) 080
3．1．1 Web 界面設(shè)計(jì)中網(wǎng)格的概念 080
3．1．2 網(wǎng)格結(jié)構(gòu) 081
3．1．3 繪制網(wǎng)格前的準(zhǔn)備工作 089
3．2 網(wǎng)格的運(yùn)用 095
3．2．1 頁面分割方式 095
3．2．2 網(wǎng)格的擴(kuò)展運(yùn)用 098
3．3 網(wǎng)格設(shè)計(jì)自測(cè) 102
CHAPTER 04 Web界面設(shè)計(jì)參考規(guī)范（基礎(chǔ)篇）103
4．1 關(guān)于規(guī)范 104
4．1．1 概念 104
4．1．2 學(xué)習(xí)Web 設(shè)計(jì)規(guī)范的重要性 105
4．1．3 導(dǎo)致Web 設(shè)計(jì)差異的常見因素 105
4．2 屏幕尺寸與分辨率 111
4．2．1 知識(shí)點(diǎn) 111
4．2．2 運(yùn)用 114
4．3 頁面安全寬度 116
4．3．1 知識(shí)點(diǎn) 116
4．3．2 運(yùn)用 117
4．4 頁面首屏高度 118
4．4．1 知識(shí)點(diǎn) 118
4．4．2 運(yùn)用 119
4．5 柵格（網(wǎng)格）系統(tǒng) 120
4．5．1 知識(shí)點(diǎn) 120
4．5．2 運(yùn)用 122
4．6 頁面組成部分 123
4．6．1 知識(shí)點(diǎn) 123
4．6．2 運(yùn)用 124
4．7 中英文字體規(guī)范 125
4．7．1 知識(shí)點(diǎn) 125
4．7．2 運(yùn)用 128
4．8 布局規(guī)范 129
4．8．1 知識(shí)點(diǎn) 129
4．8．2 運(yùn)用 130
4．9 色彩 130
4．9．1 知識(shí)點(diǎn) 130
4．9．2 運(yùn)用 134
4．10 圖片與多媒體輸出 136
4．10．1 知識(shí)點(diǎn) 136
4．10．2 運(yùn)用 136

CHAPTER 05 Web界面設(shè)計(jì)參考規(guī)范（提高篇）139
5．1 深入理解設(shè)計(jì)規(guī)范 140
5．2 留白 141
5．2．1 知識(shí)點(diǎn) 141
5．2．2 運(yùn)用 142
5．3 頁腳信息 144
5．3．1 知識(shí)點(diǎn) 144
5．3．2 運(yùn)用 145
5．4 圖標(biāo) 146
5．4．1 知識(shí)點(diǎn) 146
5．4．2 運(yùn)用 147
5．5 命名 148
5．5．1 知識(shí)點(diǎn) 148
5．5．2 運(yùn)用 149
5．6 可讀性和對(duì)比度 150
5．6．1 知識(shí)點(diǎn) 150
5．6．2 運(yùn)用 151
5．7 窗體布局 154
5．7．1 知識(shí)點(diǎn) 154
5．7．2 運(yùn)用 156
5．8 設(shè)計(jì)規(guī)范自測(cè) 158

CHAPTER 06 了解常用的Web用戶體驗(yàn) 159
6．1 用戶體驗(yàn)基礎(chǔ)知識(shí) 160
6．1．1 概念 160
6．1．2 核心要素 161
6．2 提升網(wǎng)站用戶體驗(yàn)的方式 162
6．2．1 減少不必要的交互動(dòng)畫 162
6．2．2 增加對(duì)比度，提高可讀性 164
6．2．3 運(yùn)用留白 165
6．2．4 減少頁面加載時(shí)間 166
6．2．5 有吸引力的視覺引導(dǎo) 167
6．2．6 超鏈接的差異化 169
6．2．7 合理使用圖像 170
6．2．8 保持風(fēng)格元素的一致性 172
6．2．9 優(yōu)化404 頁面 174
6．2．10 滿足響應(yīng)式需求 175
6．2．11 導(dǎo)航清晰，廣告適度 176
6．2．12 使網(wǎng)站信息層次分明 177
6．2．13 總結(jié) 180
6．3 用戶體驗(yàn)研究自測(cè) 180
CHAPTER 07 以不變應(yīng)萬變——個(gè)人主頁界面設(shè)計(jì)實(shí)戰(zhàn) 181
7．1 前奏 182
7．2 項(xiàng)目分析 184
7．2．1 制作流程 184
7．2．2 分析過程 185
7．3 草圖繪制 188
7．4 素材整理與處理 190
7．5 配色方案 190
7．6 線框圖設(shè)計(jì) 192
7．6．1 建立網(wǎng)格 192
7．6．2 首屏 196
7．6．3 導(dǎo)航 197
7．6．4 內(nèi)容主體 198
7．6．5 表單 201
7．6．6 橫幅和標(biāo)語 202
7．6．7 頁腳 202
7．7 效果圖設(shè)計(jì) 205
7．7．1 首屏效果 205
7．7．2 時(shí)間軸處理 211
7．7．3 作品模塊包裝 217
7．7．4 表單細(xì)節(jié) 219
7．7．5 橫幅設(shè)計(jì) 222
7．7．6 頁腳設(shè)計(jì) 224
7．7．7 細(xì)節(jié)調(diào)整 225
7．7．8 隱藏模態(tài)窗設(shè)計(jì) 226
7．8 手機(jī)版效果圖設(shè)計(jì) 227
7．9 個(gè)人主頁自測(cè) 230
CHAPTER 08 網(wǎng)頁設(shè)計(jì)新趨勢(shì)——Material Design 231
8．1 理解Material Design Lite（MDL）232
8．1．1 概念理解 232
8．1．2 優(yōu)勢(shì) 232
8．2 MDL基礎(chǔ)規(guī)范運(yùn)用 234
8．2．1 字體 234
8．2．2 調(diào)色板 236
8．2．3 陰影 237
8．2．4 圖標(biāo) 238
8．2．5 部分組件 240
8．3 MDL基礎(chǔ)自測(cè) 248
CHAPTER 09 Web設(shè)計(jì)師的個(gè)人修養(yǎng) 249
9．1 尋找學(xué)習(xí)動(dòng)力與興趣點(diǎn) 250
9．1．1 探索設(shè)計(jì)趨勢(shì) 250
9．1．2 建立個(gè)人網(wǎng)站 251
9．1．3 跨行業(yè)體驗(yàn) 251
9．2 賺取第一桶金 252
9．3 自學(xué)技巧 254