用戶體驗至上：移動UI完美視覺設計法則

前言
如何獲取雲空間資料

第1章 你需要了解移動UI視覺設計1
1.1移動UI視覺設計原則2
1.1.1移耐UI的相關概念2
1.1.2移動UI視覺設計與用戶體驗15
1.2宏觀認知移動UI視覺設計22
1.2.1移動UI視覺設計的重要性22
1.2.2移動UI視覺設計的設計流程26
1.2.3移動UI視覺設計的設計總則30

第2章 彰顯界面中的文字可讀性33
2.1讓用戶能夠更快更准地辨識文字34
法則一避免使用易產生歧義的字體34
法則二盡量使用熟悉的詞匯與搭配36
法則三把握字體粗細避免含糊視覺效果38
2.2巧用大小寫讓界面富有視賞變化的樂趣40
法則一大小寫的穿插帶來活力感40
法則二大小寫的搭配也能均衡界面42
法則三利用大小寫的變化吸引用戶的注意力42
2.3字體、字體尺寸與易讀性46
法則一統一的字體不統一的尺寸46
法則二無須縮放操控也能輕易閱讀48
2.4間距與閱讀流暢體驗51
法則一適當調整間距別讓文字擁擠51
法則二調節間距帶來閱讀界面的節奏感54
2.5用戶被文字色彩的交替所吸引56
法則一轉換文字色彩突出界面重點信息56
法則二調節文字色彩與背景色彩的對比關系59

第3章 移動IU中不容輕視的「圖」的存在61
3.1圈片在界面中的布局展示形式62
法則一傳統矩陣式平鋪布局62
法則二定寬不定高瀑布式布局66
法則三承接關系的瀏覽布局69
法則四打破屏幕局限的全景式布局73
3.2注意界面中圈片的尺寸與l例76
法則一不要破壞圖片的品質視覺感76
法則二過度拉伸讓圖片失真78
3.3圖片處理突顯界面魅力80
法則一透明和疊加效果帶來的精致享受80
法則二「模糊」質感也是一種美的體驗82
3.4圖形符號的裝飾與引導84
法則一提高效率的反饋圖形符號84
法則二讓圖形符號具有方向的引導性88
3.5能讓用戶識別的圈標設計89
法則一保持設計的一致性89
法則二准確地隱喻塑造辨識度93

第4章 APP中的色彩誘惑97
？4.1界面色彩中隱藏的秘密98
法則一色彩也能「綁架」用戶的眼球98
法則二有時「無色」勝「有色」100
4.2色彩間的格葡腦羽環同界面風格102
法則一淡色調和粉色系展現甜美與柔和102
法則二暗色調中的沉穩與時尚104
法則三高純度色彩帶來的活力感107
法則四冷色調和藍色系突顯科技與智慧109
4.3影響視覺感受的對比度的控制113
法則一在明度對比中突出界面重點113
法則二利用純度對比刺激用戶眼球116
法則三過度刺激只會使用戶退縮118
4.4色彩面積決定界面關鍵點一120
法則一在大面積中突顯點睛色120
法則二面積均等中的無彩色調節123

第5章 用格式塔理論武裝設計思維與界面125
5.1接近性與相似性原理126
法則一合理安排信息間的組合位置126
法則二利用線條或色塊增強信息的聯系128
5.2連續性原理131
法則一別讓圖形的裝飾破壞連續性131
法則二添加背景裝飾圖形增強整體感133
法則三適當的交互說明讓連續感更明顯135
法則五低純度色彩和中性色中的朴實與復古111
5.3封閉性與簡化對稱性原理137
法則一封閉性帶來的界面美化137
法則二簡化對稱性讓界面更為簡潔140
5.4主體與背景原理142
法則發揮背景的誘導性142
法則二別讓背景裝飾與主體脫節144
5.5共同命運原理146
法則一去掉多余的裝飾說明146
法則二界面元素與操控習慣的連接要合理148

第6章 圖表化表達、界面空間與操控趣味149
6.1利用信息可視化圖表濃縮界面內容150
法則一少告訴，多展示150
法則二打破常規去表達153
法則三讓視覺形成焦點156
法則四清晰的文字說明讓信息氣味更濃郁160
6.2利用顏色加強圖表視覺效果一164
法則一選擇符合信息表述的顏色164
法則二合理利用色彩的
對比突顯信息167
6.3動態圖表為界面增添表現力171
法則一前后變化增加操控與參與感171
法則二添加動態設計
博取用戶關注點173

第7章 界面布局與用戶體驗175
7.1格式化布局176
法則一合理划分信息的層次176
法則二巧用首屏展現信息181
法則三將重點放在看得見的地方186
7.2界面導航的布局形式一188
法則一跳板式布局188
法則二列表菜單式布局190
法則三選項卡式布局191
法則四陳列館式布局193
法則五儀表式布局193
法則六超級菜單式布局193
法則七隱喻式布局194
7.3更具情感的界面布局197
法則一利用插圖活躍界面氛圍197
法則二步驟圖標讓布局
更加人性化198

第8章 不可忽視的交互設計199
8.1觸控模式的設計200
法則一設計界面交互元素讓手勢更加輕松200
法則二通過元素變化增添觸感體驗205
8.2注意用戶的觸控范圍207
法則一交互按鈕能使用戶命中目標207
法則二不居中更好用209
8.3將次級信息「隱藏」起來210
法則一滾動式「隱藏」210
法則二抽屜式「隱藏」217
法則三菜單式「隱藏」219
法則四圖標式「隱藏」223