第 1章 初識(shí)用戶體驗(yàn)設(shè)計(jì) 013 1.1何為用戶體驗(yàn) 014 1.1.1 生活中的用戶體驗(yàn) 014 1.1.2 互聯(lián)網(wǎng)產(chǎn)品中的用戶體驗(yàn) 015 1.2 用戶體驗(yàn)設(shè)計(jì)與平面設(shè)計(jì)的區(qū)別 018 1.2.1 內(nèi)容響應(yīng)式 019 1.2.2 長(zhǎng)時(shí)間停留 020 1.2.3 閱讀效率 020 1.2.4 層級(jí)多樣化 021 1.3 用戶體驗(yàn)只是主觀感受 021 1.4 用戶體驗(yàn)設(shè)計(jì)師的職責(zé)與價(jià)值 023 第 2章 App 設(shè)計(jì)中的基礎(chǔ)規(guī)范 025 2.1 App 基礎(chǔ)布局規(guī)范 026 2.1.1 常見(jiàn)的手機(jī)屏幕尺寸 026 2.1.2 界面設(shè)計(jì)中的柵格系統(tǒng) 036 2.1.3 常見(jiàn)的布局和適用場(chǎng)景 039 2.2 App 基礎(chǔ)組件規(guī)范 043 2.2.1 狀態(tài)欄 044 2.2.2 導(dǎo)航欄 044 2.2.3 標(biāo)簽欄 044 2.2.4 工具欄 045 2.3 App 字體規(guī)范 046 2.3.1 系統(tǒng)默認(rèn)字體介紹 046 2.3.2 基本的字號(hào)規(guī)范 047 第3章 視覺(jué)體驗(yàn)基礎(chǔ) 049 3.1 用戶界面設(shè)計(jì)中的色彩 050 3.1.1 對(duì)色彩的基本認(rèn)識(shí) 050 3.1.2 色彩在界面設(shè)計(jì)中的作用 052 3.1.3 色彩的對(duì)比 054 3.1.4 色彩的性格 059 3.1.5 色彩的重量 062 3.1.6 不同色彩的應(yīng)用場(chǎng)景 063 3.2 用戶界面設(shè)計(jì)中的版式 065 3.2.1 統(tǒng)一與變化 066 3.2.2 對(duì)比與調(diào)和 068 3.2.3 對(duì)稱與平衡 069 3.2.4 節(jié)奏與韻律 070 3.2.5 親密性原則 071 3.2.6 相似性原則 073 3.2.7 卡片 / 分界線 / 無(wú)框 074 3.2.8 留白 076 3.3 用戶界面設(shè)計(jì)中的圖標(biāo) 077 3.3.1 App 圖標(biāo) 078 3.3.2 App 功能圖標(biāo) 081 3.3.3 常用的圖標(biāo)庫(kù) 087 3.4 用戶界面設(shè)計(jì)中的字體 087 3.4.1 襯線體與無(wú)襯線體 088 3.4.2 字體性格的形成 089 3.5 用戶界面設(shè)計(jì)中的細(xì)節(jié)規(guī)律 092 3.5.1 圓角與尖角的使用規(guī)律 092 3.5.2 箭頭的使用規(guī)律 094 3.5.3 投影的使用規(guī)律 098 3.5.4 分界線的使用規(guī)律 099 3.5.5 對(duì)齊方式的使用規(guī)律 100 第4章 視覺(jué)體驗(yàn)進(jìn)階 103 4.1 設(shè)計(jì)中的感性與理性 104 4.2 引導(dǎo)頁(yè)的設(shè)計(jì) 105 4.2.1 引導(dǎo)頁(yè)的制作形式 105 4.2.2 引導(dǎo)頁(yè)的設(shè)計(jì)規(guī)律 107 4.3 空狀態(tài)的設(shè)計(jì) 109 4.3.1 空狀態(tài)的分類 110 4.3.2 空狀態(tài)的設(shè)計(jì)技巧與注意事項(xiàng) 112 4.4 Banner 的設(shè)計(jì) 113 4.4.1 組成 Banner 的五要素 114 4.4.2 Banner 的組成形式 115 4.4.3 Banner 的風(fēng)格分類 116 4.4.4 Banner 的設(shè)計(jì)技巧及注意事項(xiàng) 119 4.5 啟動(dòng)頁(yè)的設(shè)計(jì) 125 4.5.1 啟動(dòng)頁(yè)的設(shè)計(jì)形式 126 4.5.2 啟動(dòng)頁(yè)的設(shè)計(jì)技巧及注意事項(xiàng) 129 4.6 界面設(shè)計(jì)中的層次感表現(xiàn) 130 4.6.1 文字的層級(jí)區(qū)分 130 4.6.2 元素的復(fù)雜程度 133 4.6.3 間距的合理性 135 4.6.4 學(xué)會(huì)信息歸類 138 4.6.5 色彩的合理把控 140 4.7 界面設(shè)計(jì)中的選圖規(guī)律 142 4.7.1 圖片的比例選擇 143 4.7.2 選圖的統(tǒng)一性 145 4.7.3 選圖的清晰度 147 4.7.4 圖片與主題的貼合性 148 4.8 界面設(shè)計(jì)的風(fēng)格體現(xiàn) 149 4.8.1 如何確定產(chǎn)品風(fēng)格 149 4.8.2 影響產(chǎn)品風(fēng)格的元素 162 第5章 交互體驗(yàn)基礎(chǔ) 167 5.1 產(chǎn)品思維 168 5.1.1 初識(shí)產(chǎn)品線 168 5.1.2 用戶調(diào)研的方法 169 5.1.3 用戶畫(huà)像 170 5.1.4 需求分析 170 5.1.5 競(jìng)品分析 171 5.1.6 可用性測(cè)試 171 5.1.7 低保真原型圖 172 5.1.8 5W1H 產(chǎn)品分析法 172 5.2 交互動(dòng)效規(guī)律 174 5.2.1 動(dòng)效設(shè)計(jì)的意義 174 5.2.2 動(dòng)效設(shè)計(jì)的原則 177 5.2.3 微交互設(shè)計(jì) 182 第6章 交互體驗(yàn)進(jìn)階 187 6.1 交互體驗(yàn)的可用性 188 6.1.1 為用戶決策提供充足的信息 188 6.1.2 操作均給予明確的反饋 189 6.1.3 容錯(cuò)原則 192 6.1.4 交互方式的一致性 196 6.1.5 讓用戶知道當(dāng)前所處的位置 199 6.2 交互體驗(yàn)的易用性 200 6.2.1 減少用戶的操作步驟 200 6.2.2 降低用戶的學(xué)習(xí)成本 205 6.2.3 減輕用戶的記憶負(fù)擔(dān) 207 6.2.4 一個(gè)結(jié)果可有多種交互 209 6.2.5 產(chǎn)品符合人體工程學(xué) 212 6.2.6 輸入表單時(shí)給予提示 214 6.3 交互體驗(yàn)的好用性 215 6.3.1 讓用戶做選擇題而不是填空題 216 6.3.2 預(yù)知用戶的下一步操作 218 6.3.3 交互次數(shù)與界面信息量的關(guān)系 219 6.3.4 圖形比文字更易讀 221 6.3.5 基于用戶使用場(chǎng)景 223 第7章 情感化體驗(yàn) 227 7.1 情感化體驗(yàn)的安全感 228 7.1.1 符合用戶的心理預(yù)期 228 7.1.2 不可或缺的提示框 230 7.1.3 安全感需要主動(dòng)傳達(dá) 231 7.2 情感化體驗(yàn)的友好感 235 7.2.1 拒絕與“冰冷”的機(jī)器交流 235 7.2.2 營(yíng)造熱點(diǎn)氣氛 236 7.2.3 無(wú)障礙設(shè)計(jì) 238 7.2.4 讓用戶的意見(jiàn)有處發(fā)表 238 7.3 情感化體驗(yàn)的滿足感 240 7.3.1 營(yíng)造用戶差異 240 7.3.2 讓“免費(fèi)”有點(diǎn)難度 242 7.3.3 每一個(gè)用戶都是特殊的 243 7.3.4 超越用戶的期望值 245 第8章 自我提升 247 8.1 “瓶頸期”該如何突破 248 8.1.1 審美期 248 8.1.2 洞察期 251 8.1.3 技法期 255 8.1.4 思想期 257 8.2 設(shè)計(jì)師的氣質(zhì)養(yǎng)成 259 8.2.1 少即是多 259 8.2.2 點(diǎn)到為止 261 8.2.3 設(shè)計(jì)，我說(shuō)了算 263