123,123,123

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

　　本書(shū)主要講解了iOS系統(tǒng)和Android系統(tǒng)兩種移動(dòng)設(shè)備系統(tǒng)界面的結(jié)構(gòu)及設(shè)計(jì)規(guī)范，全面解析了移動(dòng)端App界面的設(shè)計(jì)流程及技巧。本書(shū)還介紹了如何使用Adobe XD、Photoshop、PxCook和Cutterman等主流軟件進(jìn)行UI設(shè)計(jì)制作。本書(shū)共6章。第1章主要講解移動(dòng)UI設(shè)計(jì)基礎(chǔ)；第2章主要講解iOS系統(tǒng)界面設(shè)計(jì)；第3章主要講解Android系統(tǒng)界面設(shè)計(jì)；第4章主要講解移動(dòng)UI圖標(biāo)設(shè)計(jì)；第5章主要講解iOS系統(tǒng)界面應(yīng)用設(shè)計(jì)；第6章主要講解Android系統(tǒng)界面應(yīng)用設(shè)計(jì)。本書(shū)將提供全部案例的素材、源文件和教學(xué)視頻，讀者可以結(jié)合書(shū)、練習(xí)文件和教學(xué)視頻，提升移動(dòng)端App界面設(shè)計(jì)的學(xué)習(xí)效率。

作者簡(jiǎn)介

　　李曉斌，多年視頻剪輯與特效制作工作背景與設(shè)計(jì)經(jīng)驗(yàn)，精通視頻講解與特效相關(guān)軟件，熟練掌握After Effect軟件的各項(xiàng)功能與操作技巧，能夠完成視頻特效的添加與優(yōu)化。優(yōu)秀的團(tuán)隊(duì)合作精神，對(duì)工作認(rèn)真負(fù)責(zé)，積極主動(dòng)，思維嚴(yán)謹(jǐn)，具有較高的技術(shù)水平和豐富的工作經(jīng)驗(yàn)。曾出版多本相關(guān)教材，參與多所院校的視頻剪輯的培訓(xùn)工作。

圖書(shū)目錄

第1章網(wǎng)頁(yè)UI設(shè)計(jì)初體驗(yàn)
1.1 初識(shí)網(wǎng)頁(yè)UI ···································1
1.2 網(wǎng)頁(yè)UI的分類 ································2
1.3 網(wǎng)頁(yè)UI設(shè)計(jì)的工作流程 ····················5
1.3.1 網(wǎng)頁(yè)產(chǎn)品調(diào)研 ···············································.5
1.3.2 網(wǎng)頁(yè)原型設(shè)計(jì) ···············································.6
1.3.3 設(shè)計(jì)網(wǎng)頁(yè)UI ··················································.7
1.3.4 網(wǎng)頁(yè)UI 標(biāo)注 ·················································.8
1.3.5 網(wǎng)頁(yè)UI 切圖輸出 ·········································.8
1.4 深刻理解網(wǎng)頁(yè)UI設(shè)計(jì)原則 ·················8
1.4.1 視覺(jué)美觀 ·······················································.8
1.4.2 主題明確 ·······················································.9
1.4.3 內(nèi)容與形式相統(tǒng)一 ·····································.10
1.4.4 整體性 ·························································.11
1.4.5 快速加載 ·····················································.11
1.4.6 為用戶考慮 ·················································.12
1.5 網(wǎng)頁(yè)UI的設(shè)計(jì)風(fēng)格 ························13
1.5.1 擬物化風(fēng)格 ·················································.13
1.5.2 扁平化風(fēng)格 ·················································.13
1.5.3 極簡(jiǎn)化風(fēng)格 ·················································.14
1.5.4 3D 風(fēng)格 ·······················································.14
1.5.5 插畫(huà)風(fēng)格 ·····················································.15
1.5.6 低多邊形風(fēng)格 ·············································.15
1.5.7 無(wú)邊框風(fēng)格 ·················································.15
1.5.8 縱向分割風(fēng)格 ·············································.16
1.5.9 超級(jí)頭版風(fēng)格 ·············································.17
1.6 設(shè)計(jì)網(wǎng)頁(yè)UI的常用工具 ··················17
1.6.1 Axure RP 9 ···················································.17
1.6.2 Photoshop 和Illustrator·······························.18
1.6.3 Sketch 和Adobe XD ···································.21
1.6.4 PxCook 和Cutterman ·································.23
1.7 本章小結(jié) ····································24
第2章合理的網(wǎng)頁(yè)版式與布局
2.1 了解網(wǎng)頁(yè)布局 ······························25
2.1.1 網(wǎng)頁(yè)布局的目的 ·········································.25
2.1.2 網(wǎng)頁(yè)布局的操作流程 ·································.26
2.2 網(wǎng)頁(yè)布局的基本方法 ·····················27
2.2.1 網(wǎng)頁(yè)的布局設(shè)計(jì) ·········································.27
2.2.2 網(wǎng)頁(yè)布局的原則 ·········································.28
2.3 網(wǎng)頁(yè)布局的常見(jiàn)類型 ·····················29
2.3.1 國(guó)字型 ·························································.30
2.3.2 拐角型 ·························································.30
2.3.3 標(biāo)題正文型 ·················································.31
2.3.4 左右框架型 ·················································.31
2.3.5 上下框架型 ·················································.31
2.3.6 封面型 ·························································.32
2.3.7 變化型 ·························································.33
2.4 根據(jù)內(nèi)容位置決定網(wǎng)頁(yè)布局方式 ······33
2.4.1 滿屏式網(wǎng)頁(yè)布局 ·········································.33
2.4.2 一欄式網(wǎng)頁(yè)布局 ·········································.34
實(shí)戰(zhàn)練習(xí)01——設(shè)計(jì)并制作白酒網(wǎng)頁(yè) ···············.35
2.4.3 兩欄式網(wǎng)頁(yè)布局 ·········································.40
實(shí)戰(zhàn)練習(xí)02——布局啤酒網(wǎng)站 ···························.42
2.4.4 三欄式網(wǎng)頁(yè)布局 ·········································.45
2.4.5 水平和垂直居中的網(wǎng)頁(yè)布局 ·····················.47
2.5 頁(yè)面分割方向的布局方式 ···············48
2.5.1 縱向分割 ·····················································.48
2.5.2 橫向分割 ·····················································.49
實(shí)戰(zhàn)練習(xí)03——布局家居網(wǎng)站 ···························.49
2.5.3 縱向與橫向復(fù)合型 ·····································.52
2.5.4 運(yùn)用固定區(qū)域的設(shè)計(jì) ·································.53
2.6 網(wǎng)頁(yè)布局的特性 ···························53
2.7 PC端與移動(dòng)端網(wǎng)頁(yè)布局的區(qū)別 ········55
2.8 本章小結(jié) ····································56
第3章奠定基礎(chǔ)的網(wǎng)頁(yè)構(gòu)成元素
3.1 網(wǎng)頁(yè)中的線條 ······························57
3.1.1 點(diǎn)、線、面的關(guān)系 ·····································.57
3.1.2 網(wǎng)頁(yè)中應(yīng)用的線條風(fēng)格 ·····························.58
3.1.3 線條在網(wǎng)頁(yè)UI 中的作用 ···························.62
3.2 網(wǎng)頁(yè)中的標(biāo)志 ······························66
3.2.1 網(wǎng)頁(yè)標(biāo)志的尺寸 ·········································.66
3.2.2 網(wǎng)頁(yè)標(biāo)志的特點(diǎn) ·········································.66
3.2.3 網(wǎng)頁(yè)標(biāo)志的設(shè)計(jì)規(guī)范 ·································.67
實(shí)戰(zhàn)練習(xí)01——設(shè)計(jì)并制作網(wǎng)頁(yè)標(biāo)志 ···············.69
3.2.4 網(wǎng)頁(yè)標(biāo)志的表現(xiàn)形式 ·································.71
3.3 網(wǎng)頁(yè)中的圖標(biāo)和按鈕 ·····················73
3.3.1 網(wǎng)頁(yè)圖標(biāo)的概念 ·········································.73
3.3.2 網(wǎng)頁(yè)圖標(biāo)的設(shè)計(jì)原則 ·································.73
3.3.3 網(wǎng)頁(yè)圖標(biāo)的應(yīng)用 ·····································3