隨著智能手機、平板電腦等移動設備的風靡,可以說移動UI成了一個熱門行業,其中移動UI視覺設計也成為了如今這個時代的熱門詞匯。本書便圍繞移動UI視覺設計這一熱點展開,并試著將一些設計的要點與注意事項總結為朗朗上口的設計法則,通過法則的總結讓讀者能夠較為全面與更為細節化地了解到什么是移動UI視覺設計以及如何進行移動UI視覺的設計與優化。本書將移動UI視覺設計的注意事項羅列為了呈點狀分布的法則形式,并且在對每條法則進行解析的同時也都列舉了大量與之相關的移動UI的設計案例,讓讀者能更為直觀地理解法則內容。雖然本書采用了散點的敘述方式,但這些“點”根據性質的不同,都被有序地歸納在了不同的章節之中,這使得讀者在閱讀時不會顯得繁亂,并且可以如同查閱工具書一般,在需要找尋設計靈感或在設計遇到瓶頸時,通過對本書進行對應的翻看而獲取設計的思路與創作的方法,這也是編者期望通過本書所達到的目的。
宏觀角度:移動UI視覺設計的關鍵點以及設計流程與總則。
微觀角度:結合具體的視覺設計元素,如文字、色彩、圖像與圖形符號等,逐一解析與之對應的移動UI視覺設計法則。
布局法則:格式塔理論,圖表化表達,界面空間與操控趣味,界面布局與用戶體驗等。
設計關聯:從交互設計的角度出發尋找關聯,進一步優化移動UI的視覺設計
如今越來越多的人已經離不開移動互聯網以及移動設備,它們的到來改變了人們的生活方式,也給人們帶來了極大的便利。隨之而來的是,移動UI設計等新興設計門類的出現,同時越來越多的人加入到這個設計的隊伍之中。因此,本書旨在抓住這一熱點信息,并以移動UI設計中視覺設計為主線,通過法則的形式,向讀者展示移動UI視覺設計的一片天地,給讀者一把開啟新興設計大門的鑰匙。
本書共分為8章,采用了總分結合散點的敘述方式,在總述了移動UI視覺設計的相關知識后,又分別以法則的形式,分“點”講解視覺設計的法則,使讀者建立對移動UI視覺設計的認知后,又進一步了解到更為具體與實用的設計法則,并在了解的基礎上能將這些法則運用到實際的設計之中。
首先,在本書的第1章中,編者試圖從整體上給讀者描繪一個與移動UI視覺設計有關的形象,讓讀者能夠了解“什么是移動UI視覺設計”并開啟進入法則學習的大門,而該章也成為本書的總述部分。
前言
如何獲取云空間資料
第 1 章 你需要了解的移動UI視覺設計
1.1 移動 UI視覺設計原則
1.1.1 移動 UI的相關概念
1.1.2 移動 UI視覺設計與用戶體驗
1.2 宏觀認知移動 UI視覺設計
1.2.1 移動 UI視覺設計的重要性
1.2.2 移動 UI視覺設計的設計流程
1.2.3 移動 UI視覺設計的設計總則
第 2 章 彰顯界面中文字的可讀性
2.1 讓用戶能夠更快更準地辨識文字
法則一 避免使用易產生歧義的字體
法則二 盡量使用熟悉的詞匯與搭配
法則三 把握字體粗細避免含糊視覺效果
2.2 巧用大小寫讓界面富有視覺變化的樂趣
法則一 大小寫的穿插帶來活力感
法則二 大小寫的搭配也能均衡界面
法則三 利用大小寫的變化吸引用戶的注意力
2.3 字體、字體尺寸與易讀性
法則一 統一的字體不統一的尺寸
法則二 無須縮放操控也能輕易閱讀
2.4 間距與閱讀流暢體驗
法則一 適當調整間距別讓文字擁擠
法則二 調節間距帶來閱讀界面的節奏感
2.5 用戶被文字色彩的交替所吸引
法則一 轉換文字色彩突出界面重點信息
法則二 調節文字色彩與背景色彩的對比關系
第 3 章 移動UI中不容輕視的“圖”的存在
3.1 圖片在界面中的布局展示形式
法則一 傳統矩陣式平鋪布局
法則二 定寬不定高瀑布式布局
法則三 承接關系的瀏覽布局
法則四 打破屏幕局限的全景式布局
3.2 注意界面中圖片的尺寸與比例
法則一 不要破壞圖片的品質視覺感
法則二 過度拉伸讓圖片失真
3.3 圖片處理突顯界面魅力
法則一 透明和疊加效果帶來的精致享受
法則二 “模糊 ”質感也是一種美的體驗
3.4 圖形符號的裝飾與引導
法則一 提高效率的反饋圖形符號
法則二 讓圖形符號具有方向的引導性
3.5 能讓用戶識別的圖標設計
法則一 保持設計的一致性
法則二 準確地隱喻塑造辨識度
第 4 章 APP中的色彩誘惑
4.1 界面色彩中隱藏的秘密
法則一 色彩也能“綁架”用戶的眼球
法則二 有時“無色”勝“有色”
4.2 色彩間的搭配體現不同界面風格
法則一 淡色調和粉色系展現甜美與柔和
法則二 暗色調中的沉穩與時尚
法則三 高純度色彩帶來的活力感
法則四 冷色調和藍色系突顯科技與智慧
法則五 低純度色彩和中性色中的樸實與復古
4.3 影響視覺感受的對比度的控制
法則一 在明度對比中突出界面重點
法則二 利用純度對比刺激用戶眼球
法則三 過度刺激只會使用戶退縮
4.4 色彩面積決定界面關鍵點
法則一 在大面積中突顯點睛色
法則二 面積均等中的無彩色調節
第 5 章 用格式塔理論武裝設計思維與界面
5.1 接近性與相似性原理
法則一 合理安排信息間的組合位置
法則二 利用線條或色塊增強信息的聯系
5.2 連續性原理
法則一 別讓圖形的裝飾破壞連續性
法則二 添加背景裝飾圖形增強整體感
法則三 適當的交互說明讓連續感更明顯
5.3 封閉性與簡化對稱性原理
法則一 封閉性帶來的界面美化
法則二 簡化對稱性讓界面更為簡潔
5.4 主體與背景原理
法則一 發揮背景的誘導性
法則二 別讓背景裝飾與主體脫節
5.5 共同命運原理
法則一 去掉多余的裝飾說明
法則二 界面元素與操控習慣的連接要合理
第 6 章 圖表化表達、界面空間與操控趣味
6.1 利用信息可視化圖表濃縮界面內容
法則一 少告訴,多展示
法則二 打破常規去表達
法則三 讓視覺形成焦點
法則四 清晰的文字說明讓信息氣味更濃郁
6.2 利用顏色加強圖表視覺效果
法則一 選擇符合信息表述的顏色
法則二 合理利用色彩的對比突顯信息
6.3 動態圖表為界面增添表現力
法則一 前后變化增加操控與參與感
法則二 添加動態設計博取用戶關注點
第 7 章 界面布局與用戶體驗
7.1 格式化布局
法則一 合理劃分信息的層次
法則二 巧用首屏展現信息
法則三 將重點放在看得見的地方
7.2 界面導航的布局形式
法則一 跳板式布局
法則二 列表菜單式布局
法則三 選項卡式布局
法則四 陳列館式布局
法則五 儀表式布局
法則六 超級菜單式布局
法則七 隱喻式布局
7.3 更具情感的界面布局
法則一 利用插圖活躍界面氛圍
法則二 步驟圖標讓布局更加人性化
第 8 章 不容忽視的交互設計
8.1 觸控模式的設計
法則一 設計界面交互元素讓手勢更加輕松
法則二 通過元素變化增添觸感體驗
8.2 注意用戶的觸控范圍
法則一 交互按鈕能使用戶命中目標
法則二 不居中更好用
8.3 將次級信息“隱藏”起來
法則一 滾動式“隱藏”
法則二 抽屜式“隱藏”
法則三 菜單式“隱藏”
法則四 圖標式“隱藏”