-
>
全國計算機(jī)等級考試最新真考題庫模擬考場及詳解·二級MSOffice高級應(yīng)用
-
>
決戰(zhàn)行測5000題(言語理解與表達(dá))
-
>
軟件性能測試.分析與調(diào)優(yōu)實踐之路
-
>
第一行代碼Android
-
>
JAVA持續(xù)交付
-
>
EXCEL最強教科書(完全版)(全彩印刷)
-
>
深度學(xué)習(xí)
移動UI設(shè)計(微課版) 版權(quán)信息
- ISBN:9787115582126
- 條形碼:9787115582126 ; 978-7-115-58212-6
- 裝幀:一般膠版紙
- 冊數(shù):暫無
- 重量:暫無
- 所屬分類:>
移動UI設(shè)計(微課版) 本書特色
適讀人群 :數(shù)字媒體、藝術(shù)設(shè)計相關(guān)專業(yè)學(xué)生,適合零售和培訓(xùn)本書采用“知識點+案例”的教學(xué)方式,向讀者全面介紹了不同類型移動UI設(shè)計的相關(guān)知識和所需的操作技巧。本書的案例與目前行業(yè)使用軟件一致,采用的制作軟件Adobe XD和Axure RP 10來完成移動UI的原型展示,使用Photoshop CC和Adobe XD完成多個案例的界面設(shè)計和交互設(shè)計的制作,并使用PxCook完成標(biāo)注和切圖操作。● 多種配套資源輔助學(xué)習(xí)本書提供了本書中所有案例的相關(guān)素材、源文件和教學(xué)視頻。讀者可以參考本書案例實現(xiàn)相應(yīng)的效果,并能夠?qū)⑺鶎W(xué)知識與技巧快速應(yīng)用于實際工作中。
移動UI設(shè)計(微課版) 內(nèi)容簡介
本書采用全流程設(shè)計的方式,對iOS和Android系統(tǒng)移動設(shè)備界面的結(jié)構(gòu)及設(shè)計規(guī)范進(jìn)行講解。全書采用知識點輔助案例的教學(xué)方式,在大量的知識點中融入豐富有趣的案例制作,全面解析移動端App界面設(shè)計的流程及設(shè)計技巧。書中案例使用Axure RP 10、Adobe XD、Adobe Photoshop CC、Adobe Illustrator CC和PxCook等主流UI設(shè)計軟件制作。 本書共8章:第1章,關(guān)于移動UI設(shè)計;第2章,移動UI策劃與原型設(shè)計;第3章,優(yōu)秀的移動UI色彩搭配;第4章,出色的移動圖標(biāo)設(shè)計;第5章,移動App 的UI設(shè)計;第6章,移動App交互設(shè)計;第7章,適配與輸出移動UI設(shè)計;第8章,設(shè)計制作移動App項目。 本書將提供全部案例的素材、源文件和教學(xué)視頻,讀者可以結(jié)合書、練習(xí)文件和教學(xué)視頻,提高移動UI設(shè)計的學(xué)習(xí)效率。本書適合UI 設(shè)計愛好者、移動UI 設(shè)計從業(yè)者閱讀,也適合作為各院校設(shè)計相關(guān)專業(yè)的教材。
移動UI設(shè)計(微課版) 目錄
1.1 了解移動UI設(shè)計 1
1.1.1 初識UI設(shè)計 1
1.1.2 移動UI設(shè)計的概念 2
1.1.3 移動UI與PC端UI 2
1.1.4 PC端UI重置為移動UI 4
1.2 移動UI的系統(tǒng)分類 6
1.2.1 iOS系統(tǒng) 6
1.2.2 HarmonyOS系統(tǒng) 7
1.2.3 Android系統(tǒng) 7
1.2.4 Wear OS和Watch OS系統(tǒng) 9
1.3 移動UI設(shè)計流程 9
1.3.1 需求分析 10
1.3.2 原型設(shè)計 12
1.3.3 UI設(shè)計 15
1.4 移動UI設(shè)計原則 16
1.4.1 風(fēng)格一致性原則 16
1.4.2 元素準(zhǔn)確性原則 17
1.4.3 界面布局合理化原則 17
1.4.4 系統(tǒng)響應(yīng)時間原則 18
1.5 移動UI流程的職位劃分 18
1.5.1 產(chǎn)品經(jīng)理 19
1.5.2 項目經(jīng)理 19
1.5.3 UI設(shè)計師 19
1.5.4 開發(fā)工程師 20
1.6 本章小結(jié) 20
第 2章 移動UI策劃與原型設(shè)計
2.1 確定移動UI目標(biāo)用戶 21
2.1.1 分析移動UI項目背景 21
2.1.2 掌握用戶畫像分析法 23
2.2 完成移動UI策劃書 24
2.3 了解思維導(dǎo)圖 25
2.3.1 思維導(dǎo)圖的設(shè)計依據(jù) 25
2.3.2 思維導(dǎo)圖的特點 25
2.3.3 思維導(dǎo)圖的作用 26
2.4 思維導(dǎo)圖的常用軟件 27
2.4.1 MindMeister 27
2.4.2 MindManager 27
2.4.3 XMind 28
2.4.4 操作案例——下載并安裝Xmind 28
2.5 繪制移動UI思維導(dǎo)圖 29
2.5.1 思維導(dǎo)圖的操作流程 30
2.5.2 思維導(dǎo)圖的基本類型 31
2.5.3 操作案例——繪制美妝App的首頁思維導(dǎo)圖 33
2.6 繪制移動UI草圖 34
2.6.1 了解草圖的概念 35
2.6.2 認(rèn)識草圖的特點 36
2.6.3 草圖功能的體現(xiàn) 36
2.6.4 常見的草圖形式 39
2.7 了解原型設(shè)計 41
2.7.1 原型設(shè)計的概念 41
2.7.2 原型設(shè)計的參與者 41
2.8 制作原型的常用軟件 42
2.8.1 Axure RP 42
2.8.2 Adobe XD 43
2.8.3 操作案例——安裝Axure RP 10 43
2.9 繪制移動UI原型圖 45
2.9.1 原型的表現(xiàn)手法 45
2.9.2 原型的重要性 47
2.9.3 操作案例——繪制美妝App首頁草圖 49
2.9.4 App原型設(shè)計與用戶體驗 51
2.9.5 操作案例——繪制美妝App分類界面原型 54
2.10 本章小結(jié) 55
第3章 優(yōu)秀的移動UI色彩搭配
3.1 認(rèn)識色彩 56
3.1.1 色彩的基礎(chǔ) 56
3.1.2 色彩三屬性 57
3.2 和諧、統(tǒng)一的色彩搭配方法 58
3.2.1 同色系配色方法 58
3.2.2 鄰近色配色方法 59
3.2.3 類似色配色方法 60
3.2.4 同色調(diào)配色方法 60
3.2.5 類似色調(diào)配色方法 61
3.3 突出、對比的配色方法 62
3.3.1 中差色配色方法 62
3.3.2 對比色配色方法 62
3.3.3 互補色配色方法 63
3.3.4 對比色調(diào)配色方法 64
3.4 構(gòu)建移動UI顏色系統(tǒng) 65
3.4.1 確定設(shè)計風(fēng)格 65
3.4.2 確定主色 66
3.4.3 確定輔色 69
3.4.4 操作案例——構(gòu)建美妝App顏色系統(tǒng) 69
3.4.5 調(diào)整配色 70
3.5 移動UI色彩搭配的注意事項 71
3.5.1 切忌將精致美觀放在第 一位 72
3.5.2 配色方案要符合用戶的心理印象 72
3.5.3 操作案例——美妝App首頁界面配色設(shè)計 73
3.5.4 App界面內(nèi)容必須便于閱讀 74
3.5.5 保守的使用色彩 75
3.5.6 規(guī)避雜亂的配色方案 75
3.5.7 操作案例——美妝App分類界面配色設(shè)計 76
3.6 本章小結(jié) 77
第4章 出色的移動圖標(biāo)設(shè)計
4.1 初識App圖標(biāo) 78
4.1.1 App圖標(biāo)的概念 78
4.1.2 App圖標(biāo)的重要性 78
4.2 圖標(biāo)設(shè)計常用軟件 79
4.2.1 Illustrator 79
4.2.2 Photoshop 80
4.2.3 CorelDRAW 80
4.3 熟悉圖標(biāo)柵格系統(tǒng) 80
4.3.1 系統(tǒng)圖標(biāo)柵格 81
4.3.2 圖標(biāo)柵格規(guī)范 81
4.4 圖標(biāo)設(shè)計形式 83
4.4.1 中文風(fēng)格 83
4.4.2 英文風(fēng)格 84
4.4.3 圖形風(fēng)格 85
4.4.4 數(shù)字風(fēng)格 86
4.4.5 特殊符號風(fēng)格 86
4.5 App圖標(biāo)的分類 86
4.5.1 工具圖標(biāo) 86
4.5.2 操作案例——設(shè)計制作磨砂質(zhì)感工具圖標(biāo) 91
4.5.3 裝飾圖標(biāo) 94
4.5.4 啟動圖標(biāo) 95
4.6 圖標(biāo)尺寸 97
4.6.1 Android系統(tǒng)的圖標(biāo)設(shè)計尺寸 97
4.6.2 操作案例——設(shè)計制作水果裝飾圖標(biāo) 99
4.6.3 iOS系統(tǒng)的圖標(biāo)設(shè)計尺寸 102
4.6.4 操作案例——設(shè)計制作時鐘啟動圖標(biāo) 102
4.7 圖標(biāo)組設(shè)計規(guī)范 106
4.7.1 創(chuàng)建制作清單 106
4.7.2 設(shè)計草圖 106
4.7.3 數(shù)字呈現(xiàn) 106
4.7.4 確定*終效果 107
4.7.5 命名并導(dǎo)出 107
4.8 本章小結(jié) 107
第5章 移動AppUI設(shè)計
5.1 移動UI的基礎(chǔ)元素 108
5.2 常見的UI設(shè)計軟件 108
5.2.1 Photoshop 108
5.2.2 Sketch 108
5.2.3 Adobe XD 109
5.3 移動UI的設(shè)計基礎(chǔ) 109
5.3.1 iOS系統(tǒng)的開發(fā)單位 109
5.3.2 iOS系統(tǒng)的界面尺寸規(guī)范 110
5.3.3 操作案例——設(shè)計制作iOS系統(tǒng)App啟動界面 111
5.3.4 Android系統(tǒng)的開發(fā)單位 115
5.3.5 Android系統(tǒng)的界面尺寸規(guī)范 115
5.3.6 操作案例——設(shè)計制作Android系統(tǒng)App界面 116
5.4 移動UI的字體規(guī)范 119
5.4.1 iOS系統(tǒng)字體規(guī)范 119
5.4.2 操作案例——設(shè)計制作iOS系統(tǒng)App登錄界面 120
5.4.3 Android系統(tǒng)字體規(guī)范 122
5.4.4 操作案例——設(shè)計制作Android系統(tǒng)App分類界面 123
5.5 移動UI圖片尺寸規(guī)范 125
5.6 移動App內(nèi)容布局 126
5.6.1 了解App界面中的全局邊距 126
5.6.2 操作案例——設(shè)計制作iOS系統(tǒng)App首頁界面 126
5.6.3 設(shè)置App界面中的內(nèi)容間距 130
5.6.4 操作案例——設(shè)計制作iOS系統(tǒng)App側(cè)面菜單界面 131
5.6.5 移動App界面的布局方式 133
5.7 本章小結(jié) 135
第6章 移動App交互設(shè)計
6.1 了解UI交互設(shè)計 135
6.1.1 交互動效的概念 135
6.1.2 基礎(chǔ)動效類型 135
6.2 常見的交互設(shè)計軟件 137
6.2.1 Affter Effect 137
6.2.2 Adobe XD 138
6.3 交互設(shè)計的基本流程 138
6.3.1 提出交互設(shè)計創(chuàng)意想法 139
6.3.2 根據(jù)想法進(jìn)行豐滿實現(xiàn) 140
6.4 移動UI交互的類型 140
6.4.1 轉(zhuǎn)場過渡 140
6.4.2 操作案例——設(shè)計制作App轉(zhuǎn)場交互 141
6.4.3 層級展示 143
6.4.4 空間擴(kuò)展 144
6.4.5 關(guān)注聚焦 144
6.4.6 內(nèi)容呈現(xiàn) 144
6.4.7 操作案例——設(shè)計制作相冊App內(nèi)容呈現(xiàn)交互 145
6.4.8 操作反饋 148
6.4.9 操作案例——設(shè)計制作App點贊反饋交互 149
6.5 動效在UI界面中的作用 150
6.5.1 吸引用戶注意力 150
6.5.2 為用戶提供操作反饋 151
6.5.3 加強指向性 151
6.5.4 操作案例——設(shè)計制作App后臺交互 151
6.5.5 傳遞信息深度 155
6.6 交互設(shè)計需要遵循的習(xí)慣 155
6.7 本章小結(jié) 156
第7章 適配與輸出移動UI設(shè)計
7.1 標(biāo)注的重要性 157
7.2 常見的標(biāo)注與輸出軟件 157
7.2.1 PxCook 157
7.2.2 Assistor PS 158
7.3 標(biāo)注移動UI 158
7.3.1 移動App標(biāo)注內(nèi)容 158
7.3.2 操作案例——標(biāo)注iOS系統(tǒng)App界面 158
7.3.3 標(biāo)注的聲明文檔 161
7.3.4 操作案例——標(biāo)注Android系統(tǒng)App界面 161
7.4 移動UI標(biāo)注規(guī)范 164
7.4.1 位置與尺寸的標(biāo)注規(guī)范 164
7.4.2 色彩和文字的標(biāo)注規(guī)范 165
7.4.3 切圖資源的尺寸必須是雙數(shù) 165
7.5 輸出與適配iOS系統(tǒng)UI設(shè)計 166
7.5.1 向上適配與向下適配 166
7.5.2 適配切片命名規(guī)范 168
7.5.3 操作案例——導(dǎo)出iOS系統(tǒng)App界面切圖資源 169
7.6 輸出與適配Android系統(tǒng)UI設(shè)計 171
7.6.1 Android系統(tǒng)中的“點9”切圖 171
7.6.2 輸出與適配的一稿兩用 174
7.6.3 操作案例——導(dǎo)出Android系統(tǒng)App切圖資源 175
7.7 本章小結(jié) 176
第8章 設(shè)計制作移動App項目
8.1 設(shè)計制作美妝電商App項目 177
8.1.1 分析美妝電商App的項目背景 177
8.1.2 制作美妝電商App的草圖原型 177
8.1.3 構(gòu)建美妝電商App的顏色系統(tǒng) 179
8.1.4 設(shè)計制作美妝電商App的圖標(biāo)組 180
8.1.5 完成美妝電商App的界面設(shè)計 182
8.1.6 完成美妝電商App的交互設(shè)計 185
8.1.7 完成美妝電商App的界面標(biāo)注 186
8.1.8 導(dǎo)出美妝電商App的切圖資源 188
8.2 設(shè)計制作美食外賣App項目 189
8.2.1 分析美食外賣App的項目背景 189
8.2.2 制作美食外賣App的草圖原型 190
8.2.3 創(chuàng)建美食外賣App的顏色系統(tǒng) 192
8.2.4 設(shè)計制作美食外賣App的圖標(biāo)組 193
8.2.5 完成美食外賣App的界面設(shè)計 196
8.2.6 完成美食外賣App的交互設(shè)計 200
8.2.7 完成美食外賣App的界面標(biāo)注 201
8.2.8 導(dǎo)出美食外賣App的切圖資源 203
移動UI設(shè)計(微課版) 作者簡介
藝術(shù)設(shè)計類暢銷書作者,編寫過多本設(shè)計類圖書,包括《移動應(yīng)用UI設(shè)計》《HTML+CSS+Javascript網(wǎng)站制作案例教程》等。
- >
名家?guī)阕x魯迅:故事新編
- >
隨園食單
- >
中國歷史的瞬間
- >
回憶愛瑪儂
- >
姑媽的寶刀
- >
上帝之肋:男人的真實旅程
- >
中國人在烏蘇里邊疆區(qū):歷史與人類學(xué)概述
- >
自卑與超越