目 錄 第 1篇 UI設(shè)計(jì)入門篇 單元1 走進(jìn)UI設(shè)計(jì) 1.1 UI設(shè)計(jì)介紹　2 1.1.1 UI設(shè)計(jì)的概念　2 1.1.2 UI設(shè)計(jì)原則　3 1.1.3 UI設(shè)計(jì)分類　3 1.1.4 UI設(shè)計(jì)尺寸相關(guān)知識(shí)　4 1.2 UI設(shè)計(jì)流程　4 1.2.1 需求分析　4 1.2.2 原型設(shè)計(jì)　5 1.2.3 視覺設(shè)計(jì)　5 1.2.4 切圖與標(biāo)注　5 1.3 UI設(shè)計(jì)圖像　5 1.3.1 圖像類型　6 1.3.2 圖像格式　6 1.4 UI設(shè)計(jì)風(fēng)格　7 1.4.1 扁平化風(fēng)格　7 1.4.2 幾何風(fēng)格　8 1.4.3 擬物化風(fēng)格　8 1.4.4 玻璃風(fēng)格　9 1.5 本單元小結(jié)　9 1.6 課后練習(xí)題　9 單元2 UI設(shè)計(jì)要素 2.1 UI設(shè)計(jì)布局　10 2.1.1 宮格布局　10 2.1.2 列表布局　10 2.1.3 卡片布局　11 2.1.4 瀑布流式布局　11 2.1.5 多面板布局　12 2.2 UI設(shè)計(jì)色彩　13 2.2.1 色彩的構(gòu)成　13 2.2.2 色彩的混合　14 2.2.3 色彩的調(diào)和　14 2.2.4 色彩的推移　15 2.2.5 色彩的聯(lián)想　16 2.2.6 色彩的心理應(yīng)用　16 2.3 本單元小結(jié)　17 2.4 課后練習(xí)題　17 單元3 移動(dòng)端操作系統(tǒng) 3.1 iOS　18 3.1.1 主題明確　18 3.1.2 色彩一致　18 3.1.3 留白設(shè)計(jì)　18 3.1.4 良好布局　19 3.2 Android系統(tǒng)　19 3.2.1 布局靈活　19 3.2.2 色彩艷麗　19 3.2.3 操作便捷　19 3.3 本單元小結(jié)　20 3.4 課后練習(xí)題　20 第 2篇 UI設(shè)計(jì)圖標(biāo)篇 單元4 移動(dòng)App圖標(biāo)基礎(chǔ) 4.1 圖標(biāo)基礎(chǔ)概念　22 4.1.1 圖案的概念　22 4.1.2 圖標(biāo)的概念　23 4.1.3 圖標(biāo)的分類　23 4.2 圖標(biāo)設(shè)計(jì)流程　25 4.2.1 明確主題　25 4.2.2 提煉核心形狀　26 4.2.3 草圖繪制　26 4.2.4 選擇標(biāo)準(zhǔn)色　26 4.2.5 圖標(biāo)設(shè)計(jì)　26 4.2.6 切圖輸出　27 4.3 圖標(biāo)設(shè)計(jì)初探　27 【課堂案例4-1】時(shí)鐘圖標(biāo)繪制　27 【課堂案例4-2】學(xué)位帽圖標(biāo)繪制　28 【課堂案例4-3】折頁圖標(biāo)繪制　30 4.4 本單元小結(jié)　32 4.5 課后練習(xí)題　32 單元5 移動(dòng)App圖標(biāo)風(fēng)格 5.1 剪影圖標(biāo)設(shè)計(jì)　33 5.1.1 線性剪影圖標(biāo)設(shè)計(jì)　33 【課堂案例5-1】線性天氣圖標(biāo)繪制　35 【課堂案例5-2】線性開關(guān)圖標(biāo)繪制　37 【課堂案例5-3】線性刪除圖標(biāo)繪制　38 5.1.2 面性剪影圖標(biāo)設(shè)計(jì)　40 【課堂案例5-4】面性確認(rèn)圖標(biāo)繪制　40 【課堂案例5-5】面性設(shè)置圖標(biāo)繪制　42 【課堂案例5-6】面性笑臉圖標(biāo)繪制　44 【課堂案例5-7】面性相機(jī)圖標(biāo)繪制　46 【課堂案例5-8】面性文檔圖標(biāo)繪制　48 5.2 扁平化圖標(biāo)設(shè)計(jì)　49 5.2.1 純平面扁平化圖標(biāo)　50 【課堂案例5-9】純平面扁平化電池圖標(biāo)設(shè)計(jì)　50 5.2.2 折紙風(fēng)扁平化圖標(biāo)　51 【課堂案例5-10】折紙風(fēng)扁平化信封愛心未讀圖標(biāo)設(shè)計(jì)　52 【課堂案例5-11】折紙風(fēng)扁平化信封愛心已讀圖標(biāo)設(shè)計(jì)　56 5.2.3 長(zhǎng)投影扁平化圖標(biāo)　58 【課堂案例5-12】長(zhǎng)投影下載圖標(biāo)設(shè)計(jì)　58 5.2.4 輕折疊扁平化圖標(biāo)　59 【課堂案例5-13】輕折疊多媒體圖標(biāo)設(shè)計(jì)　59 【課堂案例5-14】輕折疊扁平化計(jì)算器圖標(biāo)設(shè)計(jì)　61 5.2.5 微立體扁平化圖標(biāo)　62 【課堂案例5-15】微立體定位圖標(biāo)設(shè)計(jì)　62 5.3 擬物化圖標(biāo)設(shè)計(jì)　64 5.3.1 擬物化圖標(biāo)的特點(diǎn)　64 5.3.2 擬物化圖標(biāo)案例　64 【課堂案例5-16】擬物化旋轉(zhuǎn)按鈕圖標(biāo)設(shè)計(jì)　65 【課堂案例5-17】擬物化卡包圖標(biāo)設(shè)計(jì)（橫版）　70 【課堂案例5-18】擬物化卡包圖標(biāo)設(shè)計(jì)（豎版）　78 5.4 本單元小結(jié)　80 5.5 課后練習(xí)題　80 第3篇 UI設(shè)計(jì)界面篇 單元6 界面常用控件 6.1 滑塊設(shè)計(jì)　82 6.1.1 滑塊構(gòu)成　82 6.1.2 滑塊分類　82 【課堂案例6-1】線條滑塊設(shè)計(jì)　83 【課堂案例6-2】旋轉(zhuǎn)滑塊設(shè)計(jì)　86 6.2 表單設(shè)計(jì)　88 6.2.1 表單類型　88 6.2.2 下拉列表框設(shè)計(jì)　89 【課堂案例6-3】類目下拉列表框設(shè)計(jì)　89 6.2.3 搜索框設(shè)計(jì)　92 【課堂案例6-4】移動(dòng)端App搜索框設(shè)計(jì)　92 6.2.4 選擇器設(shè)計(jì)　93 【課堂案例6-5】日歷界面設(shè)計(jì)　94 6.2.5 開關(guān)設(shè)計(jì)　100 【課堂案例6-6】開關(guān)設(shè)計(jì)　100 6.3 按鈕設(shè)計(jì)　102 6.3.1 按鈕類型　102 6.3.2 簡(jiǎn)約按鈕設(shè)計(jì)　102 【課堂案例6-7】簡(jiǎn)約確認(rèn)按鈕設(shè)計(jì)　102 6.3.3 水晶按鈕設(shè)計(jì)　104 【課堂案例6-8】水晶確認(rèn)按鈕設(shè)計(jì)　104 6.4 本單元小結(jié)　108 6.5 課后練習(xí)題　108 單元7 App界面類型 7.1 啟動(dòng)頁　109 7.1.1 啟動(dòng)頁的意義　109 7.1.2 啟動(dòng)頁的特點(diǎn)　109 【課堂案例7-1】啟動(dòng)頁案例分析　109 7.2 閃屏頁　111 7.3 引導(dǎo)頁　111 7.3.1 引導(dǎo)頁的意義　111 7.3.2 引導(dǎo)頁的特點(diǎn)　111 【課堂案例7-2】引導(dǎo)頁案例分析　111 7.4 首頁　113 7.5 注冊(cè)登錄頁　114 7.5.1 注冊(cè)登錄頁的意義　114 7.5.2 注冊(cè)登錄頁的特點(diǎn)　114 【課堂案例7-3】注冊(cè)登錄頁案例分析　114 7.6 子頁　115 7.7 本單元小結(jié)　116 7.8 課后練習(xí)題　116 第4篇 UI設(shè)計(jì)實(shí)戰(zhàn)篇 單元8 iOS界面設(shè)計(jì) 8.1 iOS界面設(shè)計(jì)規(guī)范　118 8.2 iOS字體設(shè)計(jì)規(guī)范　119 8.3 iOS音樂App界面設(shè)計(jì)實(shí)戰(zhàn)　120 8.3.1 音樂App項(xiàng)目分析　121 8.3.2 音樂App原型設(shè)計(jì)　121 8.3.3 音樂App風(fēng)格分析　125 【項(xiàng)目實(shí)戰(zhàn)8-1】設(shè)計(jì)音樂App啟動(dòng)圖標(biāo)　126 【項(xiàng)目實(shí)戰(zhàn)8-2】設(shè)計(jì)音樂App主題界面　133 【項(xiàng)目實(shí)戰(zhàn)8-3】設(shè)計(jì)音樂App啟動(dòng)頁　134 【項(xiàng)目實(shí)戰(zhàn)8-4】設(shè)計(jì)音樂App引導(dǎo)頁　136 【項(xiàng)目實(shí)戰(zhàn)8-5】設(shè)計(jì)音樂App注冊(cè)登錄頁　142 【項(xiàng)目實(shí)戰(zhàn)8-6】設(shè)計(jì)音樂App首頁　145 【項(xiàng)目實(shí)戰(zhàn)8-7】設(shè)計(jì)音樂App播放頁　151 【項(xiàng)目實(shí)戰(zhàn)8-8】設(shè)計(jì)音樂App歌詞頁　155 8.4 本單元小結(jié)　157 8.5 課后練習(xí)題　157 單元9 Android系統(tǒng)界面設(shè)計(jì) 9.1 Android系統(tǒng)界面設(shè)計(jì)規(guī)范　158 9.2 Android系統(tǒng)字體設(shè)計(jì)規(guī)范　159 9.3 Android系統(tǒng)寵物App界面設(shè)計(jì)實(shí)戰(zhàn)　159 9.3.1 寵物App項(xiàng)目分析　160 9.3.2 寵物App原型設(shè)計(jì)　160 9.3.3 寵物App風(fēng)格分析　164 【項(xiàng)目實(shí)戰(zhàn)9-1】設(shè)計(jì)寵物App啟動(dòng)圖標(biāo)　164 【項(xiàng)目實(shí)戰(zhàn)9-2】設(shè)計(jì)寵物App引導(dǎo)頁　165 【項(xiàng)目實(shí)戰(zhàn)9-3】設(shè)計(jì)寵物App注冊(cè)登錄頁　167 【項(xiàng)目實(shí)戰(zhàn)9-4】設(shè)計(jì)寵物App首頁　170 【項(xiàng)目實(shí)戰(zhàn)9-5】設(shè)計(jì)寵物App寵物圈頁面　175 【項(xiàng)目實(shí)戰(zhàn)9-6】設(shè)計(jì)寵物App購物車頁面　178 【項(xiàng)目實(shí)戰(zhàn)9-7】設(shè)計(jì)寵物App設(shè)置頁面　182 9.4 本單元小結(jié)　184 9.5 課后練習(xí)題　184 電子活頁（拓展閱讀1）界面設(shè)計(jì)工具應(yīng)用　185 電子活頁（拓展閱讀2）原型設(shè)計(jì)工具應(yīng)用　186