用戶至上 : 移動 UI 設計實戰指南

芒果道长

zi深App产品经理，人人都是产品经理专栏作家。

深度参与多个App设计和规划，精通移动端UI/UE设计工作，曾创立过生鲜电商App平台。

第1章 定義UI設計 009

1.1 如何設計出具有“寄生性”的應用 010

1.1.1 用戶目標——合乎情理的設計讓產品更受歡迎 010

1.1.2 品牌目標——系統性設計給產品加分 013

1.1.3 業務目標——設計方案影響業務能力 015

1.2 設計師的使命 019

1.2.1 為使用場景做設計 020

1.2.2 為特定的目的做設計 022

1.3 設計師需要懂得的3個心理學知識 025

1.3.1 用戶不喜歡使用令人有壓力的產品 025

1.3.2 為“懶人”做設計 030

1.3.3 模仿好的產品 033

1.4 移動互聯網終端設計規則 039

1.4.1 iOS系統觸動人心的設計規則 039

1.4.2 Android系統工程師式的設計規則 045

1.4.3 Windows Phone系統的設計規則 053

1.4.4 針對不同的規則做設計 057

 

第2章 如何設計好UI 059

2.1 如何規劃導航 060

2.1.1 5種常見的一級導航 061

2.1.2 3種常見的二級導航 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 常見的應用內提醒方式 077

2.3.1 狀態欄提醒 077

2.3.2 導航條提醒 078

2.3.3 吸頂提醒 079

2.3.4 彈出框提醒 080

2.3.5 氣泡提醒 081

2.4 常見的評論列表方式 082

2.4.1 引用回復 083

2.4.2 嵌套回復 084

2.4.3 @用戶回復 084

2.4.4 邊緣情況設計 085

2.5 搜索 086

2.5.1 非文字搜索 086

2.5.2 文字搜索 088

2.6 訂單支付 092

2.6.1 積分支付 092

2.6.2 現金支付 094

2.7 註冊和登錄 096

2.7.1 手機號註冊 096

2.7.2 第三方賬號註冊 098

2.7.3 第三方+綁定手機號註冊 099

2.7.4 指紋登錄/人臉識別登錄 100

2.8 UGC發布內容功能 101

2.8.1 內容發布 102

2.8.2 內容管理 104

2.9 消息中心 107

2.9.1 橫向分類排列 108

2.9.2 縱向混合排列 109

2.10 如何設計產品框架 111

2.10.1 設計範圍圖例 111

2.10.2 頁面值 112

2.10.3 設計方法 115

 

第3章 提升用戶體驗的設計 119

3.1 目標明確的設計 120

3.1.1 新手用戶 121

3.1.2 中級用戶 124

3.1.3 專家用戶 127

3.2 只做夠用的設計 129

3.2.1 產品基調設定 129

3.2.2 信息有效傳遞 132

3.2.3 推動用戶行為 134

3.2.4 提升商業價值 136

3.3 良好的行為設計 140

3.3.1 身體 140

3.3.2 心理 143

3.3.3 經濟 145

3.4 考慮不同的設備和實現方案 147

3.4.1 為不同的設備適配設計 147

3.4.2 為實現不同的技術做設計 150

3.5 硬件交互 153

3.5.1 屏幕上的手勢 153

3.5.2 硬件特性 155

3.6 啟發式評估十原則對設計的作用 158

3.6.1 狀態可視性 158

3.6.2 系統和現實的協調 158

3.6.3 用戶操控自由 158

3.6.4 一致性原則 159

3.6.5 防止錯誤 159

3.6.6 識別比回憶容易 159

3.6.7 靈活性和高效率 160

3.6.8 簡潔美觀的設計 160

3.6.9 幫助用戶認知、判斷及修復錯誤 160

3.6.10 幫助文檔及用戶手冊 160

 

第4章 細節提升設計 161

4.1 圖標 162

4.1.1 使用圖標的目的 162

4.1.2 圖標的製作原則 165

4.2 加載 169

4.2.1 進入頁面時加載 169

4.2.2 當前頁刷新加載 170

4.2.3 頁面跳轉加載 171

4.2.4 懶加載 173

4.2.5 在加載過程中植入品牌並強化情感 174

4.3 編輯操作啟示 175

4.4 管理復雜的頁面 177

4.4.1 數據內容復雜的頁面 177

4.4.2 如何優化復雜的頁面 180

4.5 個人資料編輯 182

4.6 動畫設計 184

4.6.1 頁面層級關系指示 184

4.6.2 操作狀態指示 185

4.6.3 用戶行為引導 187

4.6.4 設計原則 188

 

第5章 輸出物 193

5.1 組件模塊狀態標註 194

5.2 針對iOS系統和Android系統的標註參考 196

5.2.1 工具介紹 196

5.2.2 同一套UI復用標註 197

 

結束語 198

UI設計在未來的發展趨勢 198

給UI設計師的職業規劃建議 199