用戶至上 移動UI設(shè)計實戰(zhàn)指南

第1章 定義UI設(shè)計 009
1．1 如何設(shè)計出具有“寄生性”的應(yīng)用 010
1．1．1 用戶目標(biāo)——合乎情理的設(shè)計讓產(chǎn)品更受歡迎 010
1．1．2 品牌目標(biāo)——系統(tǒng)性設(shè)計給產(chǎn)品加分 013
1．1．3 業(yè)務(wù)目標(biāo)——設(shè)計方案影響業(yè)務(wù)能力 015
1．2 設(shè)計師的使命 019
1．2．1 為使用場景做設(shè)計 020
1．2．2 為特定的目的做設(shè)計 022
1．3 設(shè)計師需要懂得的3個心理學(xué)知識 025
1．3．1 用戶不喜歡使用令人有壓力的產(chǎn)品 025
1．3．2 為“懶人”做設(shè)計 030
1．3．3 模仿好的產(chǎn)品 033
1．4 移動互聯(lián)網(wǎng)終端設(shè)計規(guī)則 039
1．4．1 iOS系統(tǒng)觸動人心的設(shè)計規(guī)則 039
1．4．2 Android系統(tǒng)工程師式的設(shè)計規(guī)則 045
1．4．3 Windows Phone系統(tǒng)的設(shè)計規(guī)則 053
1．4．4 針對不同的規(guī)則做設(shè)計 057
第2章 如何設(shè)計好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è)計 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è)計產(chǎn)品框架 111
2．10．1 設(shè)計范圍圖例 111
2．10．2 頁面值 112
2．10．3 設(shè)計方法 115
第3章 提升用戶體驗的設(shè)計 119
3．1 目標(biāo)明確的設(shè)計 120
3．1．1 新手用戶 121
3．1．2 中級用戶 124
3．1．3 專家用戶 127
3．2 只做夠用的設(shè)計 129
3．2．1 產(chǎn)品基調(diào)設(shè)定 129
3．2．2 信息有效傳遞 132
3．2．3 推動用戶行為 134
3．2．4 提升商業(yè)價值 136
3．3 良好的行為設(shè)計 140
3．3．1 身體 140
3．3．2 心理 143
3．3．3 經(jīng)濟(jì) 145
3．4 考慮不同的設(shè)備和實現(xiàn)方案 147
3．4．1 為不同的設(shè)備適配設(shè)計 147
3．4．2 為實現(xiàn)不同的技術(shù)做設(shè)計 150
3．5 硬件交互 153
3．5．1 屏幕上的手勢 153
3．5．2 硬件特性 155
3．6 啟發(fā)式評估十原則對設(shè)計的作用 158
3．6．1 狀態(tài)可視性 158
3．6．2 系統(tǒng)和現(xiàn)實的協(xié)調(diào) 158
3．6．3 用戶操控自由 158
3．6．4 一致性原則 159
3．6．5 防止錯誤 159
3．6．6 識別比回憶容易 159
3．6．7 靈活性和高效率 160
3．6．8 簡潔美觀的設(shè)計 160
3．6．9 幫助用戶認(rèn)知、判斷及修復(fù)錯誤 160
3．6．10 幫助文檔及用戶手冊 160
第4章 細(xì)節(jié)提升設(shè)計 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)入頁面時加載 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 個人資料編輯 182
4．6 動畫設(shè)計 184
4．6．1 頁面層級關(guān)系指示 184
4．6．2 操作狀態(tài)指示 185
4．6．3 用戶行為引導(dǎo) 187
4．6．4 設(shè)計原則 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è)計在未來的發(fā)展趨勢 198
給UI設(shè)計師的職業(yè)規(guī)劃建議 199