|
關(guān)于我們
 書單推薦 新書推薦 |
移動UI設(shè)計(jì)項(xiàng)目化實(shí)戰(zhàn)教程 
定 價：69 元
9 7 4 8 4 7 0 1 2 2 9 1 8 讀者對象:本書適合作為應(yīng)用型本科院校、高職高專院校界面設(shè)計(jì)、平面設(shè)計(jì)等相關(guān)專業(yè)學(xué)生使用，也可以供相關(guān)技術(shù)人員參考。 
本書采用項(xiàng)目導(dǎo)向、任務(wù)驅(qū)動的模式進(jìn)行編寫，突破了傳統(tǒng)的教學(xué)模式，在充分汲取本課程教學(xué)改革的成果及作者多年教學(xué)與實(shí)踐經(jīng)驗(yàn)的基礎(chǔ)上，以案例教學(xué)和項(xiàng)目制作流程為課程導(dǎo)向，以移動UI設(shè)計(jì)的具體應(yīng)用為學(xué)習(xí)目標(biāo)，系統(tǒng)地介紹了移動UI設(shè)計(jì)的基本知識和設(shè)計(jì)技巧。 本書內(nèi)容由淺入深、通俗易懂、實(shí)例豐富、圖文并茂、直觀生動、可操作性強(qiáng)，較好地做到了理論與實(shí)踐的統(tǒng)一、內(nèi)容與形式的一致。本書內(nèi)容包括7個項(xiàng)目，分別為App界面設(shè)計(jì)概述、色彩在移動設(shè)備UI中的應(yīng)用、移動UI中的常用元素設(shè)計(jì)、UI元素的組合應(yīng)用、電商購物類App界面設(shè)計(jì)、《垃圾分類小能手》游戲界面設(shè)計(jì)、《病毒消消樂》游戲界面設(shè)計(jì)。在每個項(xiàng)目中以典型工作任務(wù)或?qū)嶋H產(chǎn)品開發(fā)為載體，介紹并應(yīng)用移動UI設(shè)計(jì)的知識點(diǎn)，使學(xué)生掌握所需的基本理論和技能。 本書可以作為本科院校、高職高專院校中移動UI設(shè)計(jì)相關(guān)課程的教材，也可以作為廣大UI設(shè)計(jì)人員的參考用書。
趙峰，副教授，職業(yè)資格二級（技師），中國職業(yè)技術(shù)教育學(xué)會教學(xué)工作委員會會員。畢業(yè)于北京交通大學(xué)計(jì)算機(jī)科學(xué)與技術(shù)專業(yè)，現(xiàn)為廣東創(chuàng)新科技職業(yè)學(xué)院動漫制作技術(shù)專業(yè)帶頭人，在高校從教二十余年。參與或主持廳局級、學(xué)會級教育教學(xué)改革科研課題三項(xiàng)，在各級各類期刊發(fā)表教育教學(xué)改革論文15篇。研究成果在職教學(xué)會、高教學(xué)會評比中獲得一等獎8項(xiàng)、二等獎3項(xiàng)、三等獎5項(xiàng)。指導(dǎo)學(xué)生參加各級各類技能大賽，多次獲得優(yōu)秀指導(dǎo)教師稱號。參與編寫多部教材，申報實(shí)用新型專利1項(xiàng)。
項(xiàng)目1 App UI 設(shè)計(jì)概述 ...................................................................................................... 1
1.1 UI 設(shè)計(jì)的基本概念及分類 ................................................................................................. 1 1.1.1 UI 設(shè)計(jì)的基本概念 ......................................................................................................................... 1 1.1.2 UI 設(shè)計(jì)的分類 ................................................................................................................................. 1 1.2 App UI 設(shè)計(jì)的要素及布局方式 ......................................................................................... 4 1.2.1 App UI 設(shè)計(jì)的要素 ......................................................................................................................... 4 1.2.2 App UI 設(shè)計(jì)的布局方式 ............................................................................................................... 13 1.3 App UI 設(shè)計(jì)的流程 ........................................................................................................... 15 1.4 App UI 設(shè)計(jì)的原則 ........................................................................................................... 16 1.5 App UI 設(shè)計(jì)的尺寸標(biāo)準(zhǔn) ................................................................................................... 17 1.5.1 設(shè)計(jì)尺寸標(biāo)準(zhǔn)和規(guī)范 .................................................................................................................... 17 1.5.2 平臺 ................................................................................................................................................ 17 1.5.3 單位尺寸 ........................................................................................................................................ 17 1.5.4 iOS 平臺的尺寸標(biāo)準(zhǔn) ..................................................................................................................... 18 1.5.5 Android 平臺的尺寸標(biāo)準(zhǔn) .............................................................................................................. 20 1.5.6 HarmonyOS 平臺的尺寸標(biāo)準(zhǔn) ....................................................................................................... 20 1.6 常用的UI 設(shè)計(jì)工具 .......................................................................................................... 22 1.6.1 Adobe Photoshop ............................................................................................................................ 22 1.6.2 Adobe Illustrator ............................................................................................................................. 24 1.6.3 數(shù)位板 ............................................................................................................................................ 24 1.6.4 數(shù)碼相機(jī) ........................................................................................................................................ 25 1.7 智能手機(jī)操作系統(tǒng)介紹 .................................................................................................... 26 1.7.1 HarmonyOS .................................................................................................................................... 26 1.7.2 iOS .................................................................................................................................................. 29 1.7.3 Android ........................................................................................................................................... 31 習(xí) 題 ......................................................................................................................................... 33 項(xiàng)目2 色彩在移動設(shè)備UI 中的應(yīng)用.................................................................................. 34 2.1 色彩的基本知識 ................................................................................................................ 34 2.2 色彩的組成 ........................................................................................................................ 35 2.3 色彩的對比 ........................................................................................................................ 36 2.4 色彩的調(diào)和 ........................................................................................................................ 39 2.5 色調(diào)的變化 ........................................................................................................................ 42 2.6 移動端UI 色彩搭配的原則 .............................................................................................. 42 2.6.1 UI 三色搭配原則 ........................................................................................................................... 42 2.6.2 色彩搭配的注意事項(xiàng) .................................................................................................................... 43 2.6.3 UI 設(shè)計(jì)的配色技巧 ....................................................................................................................... 43 習(xí) 題 ......................................................................................................................................... 44 項(xiàng)目3 移動UI 中的常用元素設(shè)計(jì) ..................................................................................... 45 3.1 圖標(biāo)概述 ............................................................................................................................ 45 3.1.1 圖標(biāo)設(shè)計(jì)流程 ................................................................................................................................ 46 3.1.2 圖標(biāo)設(shè)計(jì)原則 ................................................................................................................................ 46 3.2 任務(wù)1 創(chuàng)意線性圖標(biāo)的設(shè)計(jì) ........................................................................................... 49 3.2.1 任務(wù)描述 ........................................................................................................................................ 49 3.2.2 思路剖析 ........................................................................................................................................ 50 3.2.3 任務(wù)實(shí)現(xiàn) ........................................................................................................................................ 50 3.3 任務(wù)2 扁平化風(fēng)格圖標(biāo)的設(shè)計(jì) ....................................................................................... 51 3.3.1 任務(wù)描述 ........................................................................................................................................ 52 3.3.2 思路剖析 ........................................................................................................................................ 52 3.3.3 任務(wù)實(shí)現(xiàn) ........................................................................................................................................ 52 3.4 任務(wù)3 MBE 風(fēng)格圖標(biāo)的設(shè)計(jì) .......................................................................................... 53 3.4.1 任務(wù)描述 ........................................................................................................................................ 54 3.4.2 思路剖析 ........................................................................................................................................ 54 3.4.3 任務(wù)實(shí)現(xiàn) ........................................................................................................................................ 55 3.5 任務(wù)4 線性漸變圖標(biāo)設(shè)計(jì) ............................................................................................... 58 3.5.1 任務(wù)描述 ........................................................................................................................................ 58 3.5.2 思路剖析 ........................................................................................................................................ 58 3.5.3 任務(wù)實(shí)現(xiàn) ........................................................................................................................................ 59 習(xí) 題 ......................................................................................................................................... 66 項(xiàng)目4 UI 元素的組合應(yīng)用 ................................................................................................. 68 4.1 任務(wù)1 首頁設(shè)計(jì) ............................................................................................................... 68 4.1.1 任務(wù)描述 ........................................................................................................................................ 68 4.1.2 思路剖析 ........................................................................................................................................ 68 4.1.3 任務(wù)實(shí)現(xiàn) ........................................................................................................................................ 69 4.2 任務(wù)2 商品分類頁面設(shè)計(jì) ............................................................................................... 73 4.2.1 任務(wù)描述 ........................................................................................................................................ 73 4.2.2 思路剖析 ........................................................................................................................................ 73 4.2.3 任務(wù)實(shí)現(xiàn) ........................................................................................................................................ 74 4.3 任務(wù)3 詳情頁設(shè)計(jì) ............................................................................................................ 82 4.3.1 任務(wù)描述 ........................................................................................................................................ 82 4.3.2 思路剖析 ........................................................................................................................................ 82 4.3.3 任務(wù)實(shí)現(xiàn) ........................................................................................................................................ 82 4.4 任務(wù)4 個人中心頁面設(shè)計(jì) ............................................................................................... 87 4.4.1 任務(wù)描述 ........................................................................................................................................ 87 4.4.2 思路剖析 ........................................................................................................................................ 88 4.4.3 任務(wù)實(shí)現(xiàn) ........................................................................................................................................ 88 習(xí) 題 ......................................................................................................................................... 97 項(xiàng)目5 電商購物類App UI 設(shè)計(jì) ........................................................................................ 99 5.1 產(chǎn)品定位 ............................................................................................................................ 99 5.2 產(chǎn)品優(yōu)勢 ............................................................................................................................ 99 5.3 繪制草圖 .......................................................................................................................... 100 5.3.1 繪制《美食美刻》App 的草圖 ................................................................................................... 100 5.3.2 Axure RP ...................................................................................................................................... 100 5.4 繪制原型圖 ...................................................................................................................... 104 5.4.1 原型圖的作用 .............................................................................................................................. 105 5.4.2 原型圖的種類 .............................................................................................................................. 105 5.4.3 使用線框圖制作《美食美刻》App 的原型圖 ........................................................................... 105 5.5 設(shè)計(jì)風(fēng)格、顏色定位及字體設(shè)置 .................................................................................. 108 5.5.1 設(shè)計(jì)風(fēng)格 ...................................................................................................................................... 108 5.5.2 顏色定位 ...................................................................................................................................... 108 5.5.3 文字設(shè)置 ...................................................................................................................................... 108 5.6 啟動圖標(biāo) .......................................................................................................................... 109 5.6.1 啟動圖標(biāo)的詳細(xì)分析 .................................................................................................................. 109 5.6.2 啟動圖標(biāo)的參數(shù) .......................................................................................................................... 109 5.6.3 啟動圖標(biāo)的制作過程 .................................................................................................................. 110 5.7 加載頁 .............................................................................................................................. 113 5.7.1 頁面詳細(xì)分析 .............................................................................................................................. 113 5.7.2 頁面參數(shù) ...................................................................................................................................... 114 5.7.3 頁面制作過程 .............................................................................................................................. 114 5.8 引導(dǎo)頁 .............................................................................................................................. 116 5.8.1 頁面詳細(xì)分析 .............................................................................................................................. 116 5.8.2 頁面參數(shù) ...................................................................................................................................... 116 5.8.3 頁面制作過程 .............................................................................................................................. 117 5.9 首頁 .................................................................................................................................. 118 5.9.1 頁面詳細(xì)分析 .............................................................................................................................. 118 5.9.2 頁面參數(shù) ...................................................................................................................................... 118 5.9.3 頁面制作過程 .............................................................................................................................. 119 5.10 “商城”頁 ........................................................................................................................ 128 5.10.1 頁面詳細(xì)分析 ............................................................................................................................ 129 5.10.2 頁面參數(shù) .................................................................................................................................... 129 5.10.3 頁面制作過程 ............................................................................................................................ 130 5.11 “美食分享”頁 ................................................................................................................. 147 5.11.1 頁面詳細(xì)分析 ............................................................................................................................ 147 5.11.2 頁面參數(shù) .................................................................................................................................... 148 5.11.3 頁面制作過程 ............................................................................................................................ 149 5.12 “訂單”頁 ........................................................................................................................... 173 5.12.1 頁面詳細(xì)分析 ............................................................................................................................ 173 5.12.2 頁面參數(shù) .................................................................................................................................... 174 5.12.3 頁面制作過程 ............................................................................................................................ 174 5.13 “我的”頁 ........................................................................................................................... 175 5.13.1 頁面詳細(xì)分析 ............................................................................................................................ 175 5.13.2 頁面參數(shù) .................................................................................................................................... 176 5.13.3 頁面制作過程 ............................................................................................................................ 177 5.14 案例小結(jié) ........................................................................................................................ 178 習(xí) 題 ....................................................................................................................................... 178 項(xiàng)目6 《垃圾分類小能手》游戲UI 設(shè)計(jì) ........................................................................ 181 6.1 游戲定位 .......................................................................................................................... 181 6.2 繪制草圖 .......................................................................................................................... 181 6.2.1 啟動圖標(biāo)草圖 .............................................................................................................................. 181 6.2.2 加載頁草圖 .................................................................................................................................. 182 6.2.3 注冊引導(dǎo)頁草圖 .......................................................................................................................... 182 6.2.4 首頁草圖 ...................................................................................................................................... 182 6.2.5 幫助頁面草圖 .............................................................................................................................. 183 6.2.6 游戲頁面草圖 .............................................................................................................................. 183 6.2.7 通關(guān)頁面草圖 .............................................................................................................................. 184 6.3 啟動圖標(biāo) .......................................................................................................................... 185 6.4 加載頁 .............................................................................................................................. 188 6.5 注冊引導(dǎo)頁 ...................................................................................................................... 190 6.6 首頁 .................................................................................................................................. 194 6.7 幫助頁面 .......................................................................................................................... 197 6.8 游戲頁面 .......................................................................................................................... 200 6.9 通關(guān)頁面 .......................................................................................................................... 203 6.10 案例小結(jié) ........................................................................................................................ 206 習(xí) 題 ....................................................................................................................................... 206 項(xiàng)目7 《病毒消消樂》游戲UI 設(shè)計(jì) ................................................................................ 207 7.1 產(chǎn)品定位 .......................................................................................................................... 207 7.2 產(chǎn)品優(yōu)勢 .......................................................................................................................... 207 7.3 繪制草圖 .......................................................................................................................... 208 7.4 風(fēng)格定位、色彩定位 ...................................................................................................... 209 7.4.1 風(fēng)格定位 ...................................................................................................................................... 209 7.4.2 色彩定位 ...................................................................................................................................... 209 7.5 啟動圖標(biāo) .......................................................................................................................... 211 7.5.1 背景部分 ...................................................................................................................................... 212 7.5.2 點(diǎn)綴部分 ...................................................................................................................................... 213 7.5.3 主體部分 ...................................................................................................................................... 214 7.6 引導(dǎo)頁 .............................................................................................................................. 216 7.6.1 賽道 .............................................................................................................................................. 217 7.6.2 框架 .............................................................................................................................................. 219 7.6.3 引導(dǎo)圖標(biāo) ...................................................................................................................................... 222 7.6.4 其他小圖標(biāo) .................................................................................................................................. 224 7.7 主頁 .................................................................................................................................. 225 7.7.1 主頁點(diǎn)綴 ...................................................................................................................................... 226 7.7.2 主頁小圖標(biāo) .................................................................................................................................. 227 7.8 加載頁 .............................................................................................................................. 229 7.8.1 加載圖標(biāo) ...................................................................................................................................... 230 7.8.2 針管圖標(biāo) ...................................................................................................................................... 232 7.9 子頁面1 設(shè)計(jì) .................................................................................................................. 233 7.9.1 歌曲介紹欄 .................................................................................................................................. 234 7.9.2 頂部小圖標(biāo) .................................................................................................................................. 236 7.10 子頁面2 設(shè)計(jì) ................................................................................................................ 237 7.10.1 主體文案 .................................................................................................................................... 238 7.11 子頁面3 設(shè)計(jì) ................................................................................................................ 241 7.11.1 內(nèi)部符號圖標(biāo) ............................................................................................................................ 242 7.12 案例小結(jié) ........................................................................................................................ 244 習(xí) 題 ....................................................................................................................................... 244
你還可能感興趣
我要評論
|
