用戶至上 移動(dòng)UI設(shè)計(jì)實(shí)戰(zhàn)指南

第1章 定義UI設(shè)計(jì) 009
1．1 如何設(shè)計(jì)出具有“寄生性”的應(yīng)用 010
1．1．1 用戶目標(biāo)——合乎情理的設(shè)計(jì)讓產(chǎn)品更受歡迎 010
1．1．2 品牌目標(biāo)——系統(tǒng)性設(shè)計(jì)給產(chǎn)品加分 013
1．1．3 業(yè)務(wù)目標(biāo)——設(shè)計(jì)方案影響業(yè)務(wù)能力 015
1．2 設(shè)計(jì)師的使命 019
1．2．1 為使用場景做設(shè)計(jì) 020
1．2．2 為特定的目的做設(shè)計(jì) 022
1．3 設(shè)計(jì)師需要懂得的3個(gè)心理學(xué)知識 025
1．3．1 用戶不喜歡使用令人有壓力的產(chǎn)品 025
1．3．2 為“懶人”做設(shè)計(jì) 030
1．3．3 模仿好的產(chǎn)品 033
1．4 移動(dòng)互聯(lián)網(wǎng)終端設(shè)計(jì)規(guī)則 039
1．4．1 iOS系統(tǒng)觸動(dòng)人心的設(shè)計(jì)規(guī)則 039
1．4．2 Android系統(tǒng)工程師式的設(shè)計(jì)規(guī)則 045
1．4．3 Windows Phone系統(tǒng)的設(shè)計(jì)規(guī)則 053
1．4．4 針對不同的規(guī)則做設(shè)計(jì) 057
第2章 如何設(shè)計(jì)好UI 059
2．1 如何規(guī)劃導(dǎo)航 060
2．1．1 5種常見的一級導(dǎo)航 061
2．1．2 3種常見的二級導(dǎo)航 067
2．2 常見的圖文混排頁面 070
2．2．1 橫向一張圖片 070
2．2．2 兩列圖片 072
2．2．3 3列圖片 073
2．2．4 4列圖片 074
2．2．5 左圖右文/左文右圖 075
2．2．6 橫向多列圖片 076
2．3 常見的應(yīng)用內(nèi)提醒方式 077
2．3．1 狀態(tài)欄提醒 077
2．3．2 導(dǎo)航條提醒 078
2．3．3 吸頂提醒 079
2．3．4 彈出框提醒 080
2．3．5 氣泡提醒 081
2．4 常見的評論列表方式 082
2．4．1 引用回復(fù) 083
2．4．2 嵌套回復(fù) 084
2．4．3 @用戶回復(fù) 084
2．4．4 邊緣情況設(shè)計(jì) 085
2．5 搜索 086
2．5．1 非文字搜索 086
2．5．2 文字搜索 088
2．6 訂單支付 092
2．6．1 積分支付 092
2．6．2 現(xiàn)金支付 094
2．7 注冊和登錄 096
2．7．1 手機(jī)號注冊 096
2．7．2 第三方賬號注冊 098
2．7．3 第三方+綁定手機(jī)號注冊 099
2．7．4 指紋登錄/人臉識別登錄 100
2．8 UGC發(fā)布內(nèi)容功能 101
2．8．1 內(nèi)容發(fā)布 102
2．8．2 內(nèi)容管理 104
2．9 消息中心 107
2．9．1 橫向分類排列 108
2．9．2 縱向混合排列 109
2．10 如何設(shè)計(jì)產(chǎn)品框架 111
2．10．1 設(shè)計(jì)范圍圖例 111
2．10．2 頁面值 112
2．10．3 設(shè)計(jì)方法 115
第3章 提升用戶體驗(yàn)的設(shè)計(jì) 119
3．1 目標(biāo)明確的設(shè)計(jì) 120
3．1．1 新手用戶 121
3．1．2 中級用戶 124
3．1．3 專家用戶 127
3．2 只做夠用的設(shè)計(jì) 129
3．2．1 產(chǎn)品基調(diào)設(shè)定 129
3．2．2 信息有效傳遞 132
3．2．3 推動(dòng)用戶行為 134
3．2．4 提升商業(yè)價(jià)值 136
3．3 良好的行為設(shè)計(jì) 140
3．3．1 身體 140
3．3．2 心理 143
3．3．3 經(jīng)濟(jì) 145
3．4 考慮不同的設(shè)備和實(shí)現(xiàn)方案 147
3．4．1 為不同的設(shè)備適配設(shè)計(jì) 147
3．4．2 為實(shí)現(xiàn)不同的技術(shù)做設(shè)計(jì) 150
3．5 硬件交互 153
3．5．1 屏幕上的手勢 153
3．5．2 硬件特性 155
3．6 啟發(fā)式評估十原則對設(shè)計(jì)的作用 158
3．6．1 狀態(tài)可視性 158
3．6．2 系統(tǒng)和現(xiàn)實(shí)的協(xié)調(diào) 158
3．6．3 用戶操控自由 158
3．6．4 一致性原則 159
3．6．5 防止錯(cuò)誤 159
3．6．6 識別比回憶容易 159
3．6．7 靈活性和高效率 160
3．6．8 簡潔美觀的設(shè)計(jì) 160
3．6．9 幫助用戶認(rèn)知、判斷及修復(fù)錯(cuò)誤 160
3．6．10 幫助文檔及用戶手冊 160
第4章 細(xì)節(jié)提升設(shè)計(jì) 161
4．1 圖標(biāo) 162
4．1．1 使用圖標(biāo)的目的 162
4．1．2 圖標(biāo)的制作原則 165
4．2 加載 169
4．2．1 進(jìn)入頁面時(shí)加載 169
4．2．2 當(dāng)前頁刷新加載 170
4．2．3 頁面跳轉(zhuǎn)加載 171
4．2．4 懶加載 173
4．2．5 在加載過程中植入品牌并強(qiáng)化情感 174
4．3 編輯操作啟示 175
4．4 管理復(fù)雜的頁面 177
4．4．1 數(shù)據(jù)內(nèi)容復(fù)雜的頁面 177
4．4．2 如何優(yōu)化復(fù)雜的頁面 180
4．5 個(gè)人資料編輯 182
4．6 動(dòng)畫設(shè)計(jì) 184
4．6．1 頁面層級關(guān)系指示 184
4．6．2 操作狀態(tài)指示 185
4．6．3 用戶行為引導(dǎo) 187
4．6．4 設(shè)計(jì)原則 188
第5章 輸出物 193
5．1 組件模塊狀態(tài)標(biāo)注 194
5．2 針對iOS系統(tǒng)和Android系統(tǒng)的標(biāo)注參考 196
5．2．1 工具介紹 196
5．2．2 同一套UI復(fù)用標(biāo)注 197
結(jié)束語 198
UI設(shè)計(jì)在未來的發(fā)展趨勢 198
給UI設(shè)計(jì)師的職業(yè)規(guī)劃建議 199