術與道 移動應用UI設計必修課

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