移動UI設(shè)計實戰(zhàn)（微課版）

定　價：￥69.80

作　者：	張磊，黃瑋雯著
出版社：	人民郵電出版社
叢編項：
標　簽：	暫缺

購買這本書可以去

ISBN：	9787115546722	出版時間：	2021-08-01	包裝：	平裝
開本：	16開	頁數(shù)：	196	字數(shù)：

內(nèi)容簡介

　　內(nèi)容提要本書以項目引入的方式講解，針對iOS系統(tǒng)和Android系統(tǒng)兩種移動設(shè)備界面的結(jié)構(gòu)及設(shè)計規(guī)范進行學習。采用案例帶動知識點的教學方式，將枯燥的知識點融入豐富有趣的案例制作中，全面解析移動端App界面設(shè)計的流程及設(shè)計技巧。書中案例使用Adobe XD、Photoshop和PxCook主流UI設(shè)計軟件制作。本書共5個項目。項目1，移動UI界面設(shè)計基礎(chǔ)；項目2，掌握移動UI圖標設(shè)計；項目3，iOS系統(tǒng)電子商務(wù)App界面設(shè)計；項目4，iOS系統(tǒng)美食App界面設(shè)計；項目5，Android系統(tǒng)創(chuàng)意家居App界面設(shè)計。本書將提供全部案例的素材、源文件和教學視頻，讀者可以結(jié)合書、練習文件和教學視頻，提升移動端App UI界面設(shè)計的學習效率。本書適合UI設(shè)計愛好者、App界面設(shè)計、移動UI設(shè)計從業(yè)者閱讀，也適合作為各院校相關(guān)設(shè)計專業(yè)的參考教材。

作者簡介

　　Adobe專家組成員。國家軟件協(xié)會會員，國家863專業(yè)講師。出版過多本暢銷教材，深受讀者好評從事UI設(shè)計工作多年，曾出版多本UI設(shè)計方面的暢銷書籍。

圖書目錄

項目1 移動UI界面設(shè)計基礎(chǔ)
1．1　熟悉移動UI設(shè)計　1
1．1．1　了解UI設(shè)計　1
1．1．2　了解移動UI設(shè)計　2
1．1．3　移動UI與平面UI　2
1．2　移動UI設(shè)計的平臺分類　4
1．2．1　Android系統(tǒng)　4
1．2．2　iOS系統(tǒng)　6
1．2．3　Wear OS系統(tǒng)和Watch OS系統(tǒng)　7
1．3　了解移動UI設(shè)計常用軟件　8
1．3．1　Axure RP和Adobe XD　8
1．3．2　Photoshop和Sketch　9
1．3．3　PxCook和Assistor PS　10
1．4　分析互聯(lián)網(wǎng)產(chǎn)品的需求　11
1．4．1　知識鏈接——互聯(lián)網(wǎng)產(chǎn)品設(shè)計流程　11
1．4．2　技術(shù)引入——了解互聯(lián)網(wǎng)產(chǎn)品職業(yè)劃分　11
1．4．3　實戰(zhàn)案例——分析互聯(lián)網(wǎng)產(chǎn)品需求　13
1．5　設(shè)計互聯(lián)網(wǎng)產(chǎn)品交互效果　15
1．5．1　知識鏈接——互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計流程　15
1．5．2　技術(shù)引入——了解交互設(shè)計和交互設(shè)計師　16
1．5．3　實戰(zhàn)案例——分析互聯(lián)網(wǎng)產(chǎn)品交互設(shè)計　17
1．6　設(shè)計互聯(lián)網(wǎng)產(chǎn)品視覺效果　19
1．6．1　知識鏈接——互聯(lián)網(wǎng)產(chǎn)品配色趨勢　20
1．6．2　技術(shù)引入——頁面布局影響視覺效果　22
1．6．3　實戰(zhàn)案例——互聯(lián)網(wǎng)產(chǎn)品視覺設(shè)計流程　24
1．6　舉一反三——互聯(lián)網(wǎng)產(chǎn)品專屬色彩的變更　25
1．7　本章小結(jié)　27
1．8　課后測試　27
1．8．1　選擇題　27
1．8．2　判斷題　28
1．8．3　創(chuàng)新題　28
項目2　掌握移動UI圖標設(shè)計
2．1　圖標設(shè)計的必要性　29
2．2　了解圖標柵格系統(tǒng)　30
2．2．1　系統(tǒng)圖標柵格　31
2．2．2　不同造型圖標的柵格規(guī)范　31
2．3　圖標集的制作流程　33
2．31．　創(chuàng)建制作清單　33
2．3．2　設(shè)計草圖　33
2．3．3　數(shù)字呈現(xiàn)　34
2．3．4　確定最終效果　34
2．3．5　命名并導(dǎo)出　34
2．4　移動UI圖標設(shè)計形式　34
2．4．1　中文形式　34
2．4．2　英文形式　36
2．4．3　圖形形式　37
2．4．4　數(shù)字和特殊符號形式　37
2．5　設(shè)計制作工具圖標　38
2．5．1　知識鏈接——工具圖標的設(shè)計風格　38
2．5．2　技術(shù)引入——Android系統(tǒng)圖標分類和尺寸　39
2．5．3　實戰(zhàn)案例——設(shè)計制作產(chǎn)品工具圖標　41
2．6　設(shè)計制作裝飾圖標　45
2．6．1　知識鏈接——裝飾圖標設(shè)計風格　46
2．6．2　技術(shù)引入——iOS系統(tǒng)圖標尺寸　47
2．6．3　實戰(zhàn)案例——設(shè)計制作饒舌音樂風格裝飾圖標　48
2．7　設(shè)計制作啟動圖標　51
2．7．1　知識鏈接——啟動圖標設(shè)計形式　51
2．7．2　技術(shù)引入——啟動圖標設(shè)計要求與規(guī)范　52
2．7．3　實戰(zhàn)案例——設(shè)計制作收音機APP啟動圖標　54
2．8　舉一反三——設(shè)計制作iOS系統(tǒng)圖標　60
2．9　本章小結(jié)　60
2．10　課后測試　61
2．10．1　選擇題　61
2．10．2　判斷題　61
2．10．3　創(chuàng)新題　61
項目3　iOS系統(tǒng)電子商務(wù)APP界面設(shè)計
3．1　電子商務(wù)APP項目——“約起”界面設(shè)計　63
3．1．1　分析電子商務(wù)APP項目背景　63
3．1．2　繪制電子商務(wù)APP項目用戶畫像　64
3．2　電子商務(wù)APP草圖制作　64
3．2．1　電子商務(wù)類APP界面尺寸　64
3．2．2　電子商務(wù)類APP界面布局類型　65
3．2．3　實戰(zhàn)案例——設(shè)計制作電子商務(wù)APP“首頁”草圖　66
3．3　電子商務(wù)APP界面色彩搭配　69
3．3．1　電子商務(wù)APP界面主色的確定　69
3．3．2　電子商務(wù)APP輔色的確定　69
3．3．3　電子商務(wù)APP文本色確定　69
3．4　電子商務(wù)APP界面頁面元素分析　70
3．4．1　界面中的圖標設(shè)置　70
3．4．2　界面中的圖片設(shè)置　70
3．4．3　界面中的文字設(shè)置　71
3．4．4　實戰(zhàn)案例——設(shè)計制作電子商務(wù)APP圖標組　71
3．5　電子商務(wù)APP界面設(shè)計　73
3．5．1　知識鏈接——了解像素與分辨率　73
3．5．2　技術(shù)引入——iOS系統(tǒng)界面設(shè)計尺寸　74
3．5．3　實戰(zhàn)案例——設(shè)計制作電子商務(wù)APP界面　75
3．6　電子商務(wù)APP交互設(shè)計　80
3．6．1　交互設(shè)計的重要性　80
3．6．2　交互設(shè)計的基本流程　81
3．6．3　實戰(zhàn)案例——設(shè)計制作電子商務(wù)APP交互效果　82
3．7　電子商務(wù)APP界面的標注　84
3．7．1　位置與尺寸標注　84
3．7．2　色彩與字號標注　85
3．7．3　實戰(zhàn)案例——使用PxCook完成“首頁”界面的標注　85
3．8　電子商務(wù)APP界面適配　89
3．8．1　iOS系統(tǒng)向下和向上適配　89
3．8．2　適配切片命名規(guī)范　91
3．8．3　實戰(zhàn)案例——使用Adobe XD完成“首頁”界面的適配輸出　92
3．9　舉一反三——設(shè)計制作電子商務(wù)APP界面　94
3．10　本章小結(jié)　94
3．11　課后測試　95
3．11．1　選擇題　95
3．11．2　判斷題　95
3．11．3　創(chuàng)新題　95
項目4　iOS系統(tǒng)美食APP界面設(shè)計
4．1　美食APP項目——“吃吃喝喝”界面設(shè)計　97
4．1．1　分析美食APP項目背景　97
4．1．2　繪制美食APP項目用戶畫像　98
4．2　美食APP草圖制作　98
4．2．1　美食APP界面尺寸　98
4．2．2　美食APP界面布局類型　99
4．2．3　實戰(zhàn)案例——設(shè)計制作美食APP“首頁”草圖　100
4．3　美食APP界面色彩搭配　104
4．3．1　美食APP界面主色的確定　104
4．3．2　美食APP輔色的確定　104
4．3．3　美食APP文本色確定　105
4．4　美食APP界面頁面元素分析　105
4．4．1　界面中的圖片設(shè)置　105
4．4．2　界面中的文字設(shè)置　106
4．4．3　界面中的圖標設(shè)置　106
4．4．4　實戰(zhàn)案例——設(shè)計制作美食APP圖標組　107
4．5　美食APP界面設(shè)計　109
4．5．1　知識鏈接——了解APP界面中的邊距　109
4．5．2　技術(shù)引入——設(shè)置APP內(nèi)容間距　110
4．5．3　實戰(zhàn)案例——設(shè)計制作美食APP界面　111
4．6　美食APP交互設(shè)計　115
4．6．1　Adobe XD檢查APP界面交互　115
4．6．2　實戰(zhàn)案例——設(shè)計制作電子商務(wù)APP交互效果　116
4．7　美食APP界面標注　118
4．7．1　APP界面標注內(nèi)容　118
4．7．2　列一份總表　118
4．7．3　實戰(zhàn)案例——使用PxCook標注美食APP界面　119
4．8　美食APP界面適配與切圖　122
4．8．1　iOS系統(tǒng)適配iPhone X　122
4．8．2　切圖操作中的兩個重要因素　123
4．8．3　實戰(zhàn)案例——完成“首頁”界面素材切片輸出　123
4．9　舉一反三——設(shè)計制作外賣APP界面　125
4．10　本章小結(jié)　126
4．11　課后測試　126
4．11．1　選擇題　126
4．11．2　判斷題　127
4．11．3　創(chuàng)新題　127
項目5　Android系統(tǒng)創(chuàng)意家居APP界面設(shè)計
5．1　創(chuàng)意家居APP項目——“ICON”界面設(shè)計　128
4．1．1　完成創(chuàng)意家居APP思維導(dǎo)圖　128
4．1．2　繪制創(chuàng)意家居APP項目用戶畫像　130
5．2　創(chuàng)意家居APP草圖制作　130
5．2．1　創(chuàng)意家居APP界面布局分析　130
5．2．2　創(chuàng)意家居APP界面布局類型　131
5．2．3　實戰(zhàn)案例——設(shè)計制作創(chuàng)意家居APP草圖　132
5．3　創(chuàng)意家居APP界面色彩搭配　138
5．3．1　創(chuàng)意家居APP界面主色的確定　138
5．3．2　創(chuàng)意家居APP輔色的確定　139
5．3．3　創(chuàng)意家居APP文本色確定　139
5．4　創(chuàng)意家居APP界面頁面元素分析　139
5．4．1　界面元素間距設(shè)置　139
5．4．2　界面中的文本設(shè)置　140
5．4．3　界面中的圖標設(shè)置　141
5．4．4　實戰(zhàn)案例——設(shè)計制作創(chuàng)意家居APP圖標組　142
5．5　創(chuàng)意家居APP界面設(shè)計　146
5．5．1　知識鏈接——了解屏幕密度和開發(fā)單位　146
5．5．2　技術(shù)引入——了解Android系統(tǒng)的開發(fā)單位　147
5．5．3　實戰(zhàn)案例——設(shè)計制作創(chuàng)意家居APP界面　147
5．6　創(chuàng)意家居APP交互設(shè)計　152
5．6．1　交互設(shè)計需要考慮的內(nèi)容　153
5．6．2　交互設(shè)計需要遵循的習慣　153
5．6．3　實戰(zhàn)案例——設(shè)計制作創(chuàng)意教具APP交互效果　154
5．7　創(chuàng)意家居APP界面標注　158
5．7．1　Android系統(tǒng)界面的標注　158
5．7．2　實戰(zhàn)案例——使用PxCook標注創(chuàng)意家居APP界面　159
5．8　創(chuàng)意家居APP界面切圖與適配　163
5．8．1　Android系統(tǒng)中的“點9”切圖　163
5．8．2　如何做到一稿兩用　166
5．8．3　實戰(zhàn)案例——完成“首頁”界面素材切片輸出　167
5．9　舉一反三——設(shè)計制作創(chuàng)意家居APP其他頁面　169
5．10　本章小結(jié)　169
5．11　課后測試　169
5．11．1　選擇題　169
5．11．2　判斷題　170
5．11．3　創(chuàng)新題　170