用戶至上 移動(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 為使用場(chǎng)景做設(shè)計(jì) 020
1．2．2 為特定的目的做設(shè)計(jì) 022
1．3 設(shè)計(jì)師需要懂得的3個(gè)心理學(xué)知識(shí) 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 針對(duì)不同的規(guī)則做設(shè)計(jì) 057
第2章 如何設(shè)計(jì)好UI 059
2．1 如何規(guī)劃導(dǎo)航 060
2．1．1 5種常見(jiàn)的一級(jí)導(dǎo)航 061
2．1．2 3種常見(jiàn)的二級(jí)導(dǎo)航 067
2．2 常見(jiàn)的圖文混排頁(yè)面 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 常見(jiàn)的應(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 常見(jiàn)的評(píng)論列表方式 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 注冊(cè)和登錄 096
2．7．1 手機(jī)號(hào)注冊(cè) 096
2．7．2 第三方賬號(hào)注冊(cè) 098
2．7．3 第三方+綁定手機(jī)號(hào)注冊(cè) 099
2．7．4 指紋登錄/人臉識(shí)別登錄 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 頁(yè)面值 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 中級(jí)用戶 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 屏幕上的手勢(shì) 153
3．5．2 硬件特性 155
3．6 啟發(fā)式評(píng)估十原則對(duì)設(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 識(shí)別比回憶容易 159
3．6．7 靈活性和高效率 160
3．6．8 簡(jiǎn)潔美觀的設(shè)計(jì) 160
3．6．9 幫助用戶認(rèn)知、判斷及修復(fù)錯(cuò)誤 160
3．6．10 幫助文檔及用戶手冊(cè) 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)入頁(yè)面時(shí)加載 169
4．2．2 當(dāng)前頁(yè)刷新加載 170
4．2．3 頁(yè)面跳轉(zhuǎn)加載 171
4．2．4 懶加載 173
4．2．5 在加載過(guò)程中植入品牌并強(qiáng)化情感 174
4．3 編輯操作啟示 175
4．4 管理復(fù)雜的頁(yè)面 177
4．4．1 數(shù)據(jù)內(nèi)容復(fù)雜的頁(yè)面 177
4．4．2 如何優(yōu)化復(fù)雜的頁(yè)面 180
4．5 個(gè)人資料編輯 182
4．6 動(dòng)畫設(shè)計(jì) 184
4．6．1 頁(yè)面層級(jí)關(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 針對(duì)iOS系統(tǒng)和Android系統(tǒng)的標(biāo)注參考 196
5．2．1 工具介紹 196
5．2．2 同一套UI復(fù)用標(biāo)注 197
結(jié)束語(yǔ) 198
UI設(shè)計(jì)在未來(lái)的發(fā)展趨勢(shì) 198
給UI設(shè)計(jì)師的職業(yè)規(guī)劃建議 199