術(shù)與道 移動(dòng)應(yīng)用UI設(shè)計(jì)必修課

術(shù)之篇01 基礎(chǔ)知識(shí) 1.1 什么是UI設(shè)計(jì) / 20 1.1.1 UI的相關(guān)概念 / 20 1.1.2 UI的學(xué)習(xí)方法 / 22 1.2 什么是App / 25 1.2.1 App的概念 / 25 1.2.2 App的開發(fā)流程 / 25 1.3 智能手機(jī)的屏幕 / 26 1.3.1 英寸（Inch） / 27 1.3.2 像素（Pixel） / 27 1.3.3 分辨率（Resolution） / 28 1.4 網(wǎng)點(diǎn)密度與像素密度 / 28 1.4.1 網(wǎng)點(diǎn)密度（DPI） / 28 1.4.2 像素密度（PPI） / 29 1.4.3 DPI與PPI / 29 1.4.4 邏輯分辨率與像素倍率 / 30 1.4.5 視網(wǎng)膜屏幕 / 30 1.5 常見手機(jī)屏幕規(guī)格 / 31 1.5.1 熱門手機(jī)規(guī)格 / 31 1.5.2 熱門手機(jī)分辨率 / 33 1.6 iPhone 6 Plus的屏幕 / 34 1.7 智能手機(jī)的傳感器 / 37 1.7.1 攝像頭 / 37 1.7.2 麥克風(fēng) / 38 1.7.3 GPS / 38 1.7.4 電子羅盤 / 39 1.7.5 重力感應(yīng)器 / 39 1.7.6 加速度傳感器 / 40 1.7.7 光線傳感器 / 41 1.7.8 距離傳感器 / 41 1.7.9 氣壓傳感器 / 42 1.7.10 三軸陀螺儀 / 43 02 設(shè)計(jì)風(fēng)格 2.1 風(fēng)格 / 46 2.1.1 什么是設(shè)計(jì)風(fēng)格 / 46 2.1.2 如何確立設(shè)計(jì)風(fēng)格 / 47 2.2 顏色 / 50 2.2.1 認(rèn)識(shí)色彩 / 50 2.2.2 RGB與HSB / 50 2.2.3 顏色搭配基礎(chǔ) / 52 2.3 如何選擇顏色 / 53 2.3.1 常見App的顏色 / 53 2.3.2 顏色的性格 / 55 2.4 字體 / 61 2.4.1 襯線體和無襯線體 / 61 2.4.2 系統(tǒng)內(nèi)置字體 / 62 2.4.3 什么時(shí)候選擇內(nèi)嵌字體 / 62 2.4.4 如何使用內(nèi)嵌字體 / 63 03 圖標(biāo)與圖片 3.1 App圖標(biāo)特點(diǎn) / 66 3.1.1 獨(dú)特的圖形 / 66 3.1.2 表意準(zhǔn)確 / 67 3.1.3 謹(jǐn)慎用色 / 67 3.1.4 避免使用大量文字 / 68 3.1.5 避免使用照片 / 68 3.1.6 適應(yīng)不同場(chǎng)景 / 69 3.2 App圖標(biāo)設(shè)計(jì)流程 / 69 3.2.1 第一步：尋找隱喻 / 69 3.2.2 第二步：抽象圖形 / 70 3.2.3 第三步：競(jìng)品分析 / 71 3.2.4 第四步：確定風(fēng)格 / 71 3.2.5 第五步：調(diào)整細(xì)節(jié) / 72 3.2.6 第六步：場(chǎng)景測(cè)試 / 73 3.3 App圖標(biāo)設(shè)計(jì)方法 / 74 3.3.1 正負(fù)形組合 / 74 3.3.2 折疊圖形 / 75 3.3.3 局部提取 / 75 3.3.4 線性圖標(biāo) / 75 3.3.5 透明漸變 / 76 3.3.6 色塊拼接 / 76 3.3.7 圖形復(fù)用 / 76 3.3.8 背景組合 / 77 3.4 iOS圖標(biāo)規(guī)范 / 77 3.4.1 iOS圖標(biāo)適配 / 77 3.4.2 iOS圖標(biāo)標(biāo)準(zhǔn) / 78 3.5 Android圖標(biāo)規(guī)范 / 79 3.5.1 Android圖標(biāo)適配 / 79 3.5.2 圖標(biāo)的視覺統(tǒng)一 / 80 3.5.3 Android圖標(biāo)標(biāo)準(zhǔn) / 81 3.6 設(shè)計(jì)線性圖標(biāo) / 83 3.6.1 線性圖標(biāo)的風(fēng)格 / 83 3.6.2 線性圖標(biāo)的繪制方法 / 84 3.7 像素對(duì)齊 / 87 3.7.1 像素為什么要對(duì)齊 / 87 3.7.2 像素如何對(duì)齊 / 88 3.7.3 像素縮放的對(duì)齊 / 89 3.7.4 像素對(duì)齊的微調(diào) / 89 3.8 圖片的使用 / 89 3.8.1 矢量圖與位圖 / 89 3.8.2 圖片的格式 / 90 3.8.3 圖片的使用 / 91 3.8.4 圖片的存儲(chǔ) / 92 3.8.5 圖片的比例 / 92 04 iOS系統(tǒng)界面 4.1 欄 / 94 4.1.1 狀態(tài)欄 / 94 4.1.2 導(dǎo)航欄 / 94 4.1.3 標(biāo)簽欄 / 95 4.1.4 工具欄 / 96 4.2 內(nèi)容視圖 / 97 4.2.1 表格視圖 / 97 4.2.2 文本視圖 / 99 4.2.3 Web視圖 / 99 4.3 臨時(shí)視圖 / 100 4.3.1 對(duì)話框 / 100 4.3.2 操作列表 / 100 05 Android系統(tǒng)界面 5.1 導(dǎo)航機(jī)制 / 102 5.1.1 硬件特性 / 102 5.1.2 iOS導(dǎo)航機(jī)制 / 102 5.1.3 Android導(dǎo)航機(jī)制 / 103 5.2 界面布局 / 105 5.2.1 結(jié)構(gòu)差異 / 105 5.2.2 操作欄 / 106 5.2.3 多任務(wù) / 107 5.3 消息推送 / 108 5.3.1 推送方式 / 108 5.3.2 通知方式 / 109 5.4 操作方式 / 110 5.4.1 編輯 / 110 5.4.2 選擇 / 111 5.4.3 復(fù)制粘貼 / 112 5.4.4 刪除 / 113 5.5 Android系統(tǒng)的插件 / 114 5.5.1 桌面插件 / 114 5.5.2 設(shè)計(jì)趨勢(shì) / 114道之篇 06 建立規(guī)范 6.1 組建規(guī)范 / 116 6.1.1 設(shè)計(jì)規(guī)范的目的 / 116 6.1.2 規(guī)范的組成 / 116 6.2 顏色規(guī)范 / 119 6.2.1 為什么選擇HSB / 119 6.2.2 創(chuàng)建調(diào)色板 / 120 6.2.3 調(diào)色板應(yīng)用 / 121 6.3 文字規(guī)范 / 123 6.3.1 iOS系統(tǒng) / 123 6.3.2 Android系統(tǒng) / 123 6.3.3 系統(tǒng)字號(hào) / 123 6.4 布局 / 125 6.4.1 框架 / 125 6.4.2 頂部導(dǎo)航欄 / 126 6.4.3 頂部標(biāo)簽欄 / 126 6.4.4 底部標(biāo)簽欄 / 127 6.5 圖片規(guī)范 / 127 6.5.1 用戶頭像 / 127 6.5.2 商品圖片 / 129 6.5.3 無數(shù)據(jù)圖片 / 129 07 設(shè)計(jì)組件 7.1 控制元素 / 132 7.1.1 活動(dòng)指示器 / 132 7.1.2 進(jìn)度指示器 / 132 7.1.3 頁碼控制器 / 134 7.1.4 刷新控件 / 134 7.1.5 滑動(dòng)器 / 137 7.1.6 開關(guān) / 137 7.1.7 步進(jìn)器 / 137 7.2 篩選器 / 138 7.2.1 選擇器 / 138 7.2.2 日期時(shí)間選擇器 / 138 7.2.3 分段控件 / 139 7.2.4 選項(xiàng)卡 / 139 7.2.5 排序 / 140 7.2.6 地區(qū)選擇 / 140 7.3 表單控件 / 141 7.3.1 單選框 / 141 7.3.2 復(fù)選框 / 142 7.3.3 文本框 / 142 7.3.4 下拉框 / 143 7.3.5 表格 / 144 7.4 按鈕規(guī)范 / 144 7.4.1 背景+文字 / 144 7.4.2 背景+圖標(biāo) / 145 7.4.3 圖標(biāo)+文字 / 146 7.4.4 文字 / 146 7.5 其他組件 / 147 7.5.1 加載更多 / 147 7.5.2 非模態(tài)浮層 / 147 7.5.3 模態(tài)浮層 / 148 08 導(dǎo)航設(shè)計(jì) 8.1 扁平導(dǎo)航 / 150 8.1.1 標(biāo)簽導(dǎo)航 / 150 8.1.2 舵式導(dǎo)航 / 151 8.1.3 宮格式導(dǎo)航 / 152 8.2 內(nèi)容主導(dǎo)式導(dǎo)航 / 153 8.2.1 陳列式導(dǎo)航 / 153 8.2.2 旋轉(zhuǎn)木馬式導(dǎo)航 / 154 8.3 列表式導(dǎo)航 / 155 8.3.1 列表式 / 155 8.3.2 抽屜式 / 156 8.4 其他導(dǎo)航 / 157 8.4.1 點(diǎn)聚式導(dǎo)航 / 157 8.4.2 瀑布式導(dǎo)航 / 158 09 界面設(shè)計(jì) 9.1 首頁 / 160 9.1.1 搜索欄 / 160 9.1.2 標(biāo)簽欄 / 161 9.1.3 卡片式設(shè)計(jì) / 161 9.1.4 樓層設(shè)計(jì) / 162 9.2 列表頁 / 163 9.2.1 消息列表 / 163 9.2.2 橫向卡片 / 163 9.2.3 瀑布流 / 164 9.3 詳情頁 / 165 9.3.1 全局按鈕 / 165 9.3.2 快速通道 / 166 9.4 個(gè)人中心 167 9.4.1 頭像區(qū)域 / 167 9.4.2 個(gè)人信息 / 168 9.4.3 功能模塊 / 169 9.5 啟動(dòng)頁 / 170 9.5.1 品牌宣傳類 / 170 9.5.2 首頁樣式類 / 171 9.5.3 情感故事類 / 172 9.5.4 節(jié)日氛圍類 / 173 9.6 引導(dǎo)頁 / 173 9.6.1 功能介紹類 / 173 9.6.2 使用說明類 / 176 9.6.3 情感故事類 / 177 10 設(shè)計(jì)適配 10.1 iOS系統(tǒng)適配 / 180 10.1.1 設(shè)計(jì)基準(zhǔn) / 180 10.1.2 設(shè)計(jì)適配 / 181 10.1.3 適配規(guī)則 / 182 10.2 Android系統(tǒng)適配 / 183 10.2.1 密度獨(dú)立像素 / 183 10.2.2 設(shè)計(jì)基準(zhǔn) / 184 10.2.3 適配方法 / 185 10.3 iOS系統(tǒng)適配Android系統(tǒng) / 185 10.3.1 設(shè)計(jì)目的 / 185 10.3.2 換算關(guān)系 / 185 10.3.3 適配方法 / 186 10.4標(biāo)注設(shè)計(jì) / 186 10.4.1 標(biāo)注基準(zhǔn) / 187 10.4.2 標(biāo)注方法 / 187 10.5 點(diǎn)九圖 / 189 10.5.1 什么是點(diǎn)九圖 / 189 10.5.2 如何制作點(diǎn)九圖 / 191 10.6 切圖 / 191 10.6.1 界面切圖 / 191 10.6.2 圖標(biāo)切圖 / 192 10.6.3 命名規(guī)則 / 192 11 手勢(shì)應(yīng)用 11.1 為什么使用手勢(shì) / 194 11.2 常用手勢(shì)操作 / 195 11.2.1 單擊 / 195 11.2.2 雙擊 / 195 11.2.3 上下滑動(dòng) / 196 11.2.4 左右滑動(dòng) / 196 11.2.5 拖曳 / 197 11.2.6 張開 / 閉合 / 197 11.2.7 長(zhǎng)按 / 198 11.2.8 搖晃 / 198 11.3 手勢(shì)設(shè)計(jì)禁忌 / 199 11.3.1 使用標(biāo)準(zhǔn)手勢(shì) / 199 11.3.2 定義標(biāo)準(zhǔn)手勢(shì) / 199 11.3.3 使用簡(jiǎn)單手勢(shì) / 199 11.3.4 手勢(shì)使用說明 / 199 12 設(shè)計(jì)資源 12.1 網(wǎng)站資源 / 201 12.2 圖標(biāo)資源 / 202 12.3 圖片資源 / 203 參考文獻(xiàn) / 204