随着智能手机、平板电脑等移动设备的风靡，可以说移动UI成了一个热门行业，其中移动UI视觉设计也成为了如今这个时代的热门词汇。本书便围绕移动UI视觉设计这一热点展开，并试着将一些设计的要点与注意事项总结为朗朗上口的设计法则，通过法则的总结让读者能够较为全面与更为细节化地了解到什么是移动UI视觉设计以及如何进行移动UI视觉的设计与优化。
全书共分为八个章节，我们又可以将其分为四大部分，第一部分为第一章节，为全书的基础部分，从宏观的角度讲解与分析了移动UI视觉设计的关键点以及设计流程与总则，尝试使读者在阅读后能够形成对移动UI视觉设计的基本认知，为后面具体设计法则的学习打下知识基础。第二部分为第二章到第六章，这五个章节则从微观的角度结合具体的视觉设计元素——如文字、色彩、图形符号等元素，向读者逐一展示与解析了与之对应的移动UI视觉设计法则。第三部分为第七章，总结了视觉元素的布局方法，介绍了界面整体布局的相关法则。第四部分则为剩下的第八章，主要从交互设计的角度出发，但其本质也离不开本书的重点——移动UI视觉设计，其主要目的在于找到交互设计与视觉设计之间的联系，并企图通过让读者对交互知识的了解后来进一步优化移动UI的视觉设计。
本书将移动UI视觉设计的注意事项罗列为了呈点状分布的法则形式，并且在对每条法则进行解析的同时也都列举了大量与之相关的移动UI的设计案例，让读者能更为直观地理解法则内容。虽然本书采用了散点的叙述方式，但这些“点”根据性质的不同，都被有序地归纳在了不同的章节之中，这使得读者在阅读时不会显得繁乱，并且可以如同查阅工具书一般，在需要找寻设计灵感或在设计遇到瓶颈时，通过对本书进行对应的翻看而获取设计的思路与创作的方法，这也是编者期望通过本书所达到的目的。
如今越来越多的人已经离不开移动互联网以及移动设备，它们的到来改变了人们的生活方式，也给人们带来了极大的便利。随之而来的是，移动UI设计等新兴设计门类的出现，同时越来越多的人加入到这个设计的队伍之中。因此，本书旨在抓住这一热点信息，并以移动UI设计中视觉设计为主线，通过法则的形式，向读者展示移动UI视觉设计的一片天地，给读者一把开启新兴设计大门的钥匙。
本书共分为8章，采用了总分结合散点的叙述方式，在总述了移动UI视觉设计的相关知识后，又分别以法则的形式，分“点”讲解视觉设计的法则，使读者建立对移动UI视觉设计的认知后，又进一步了解到更为具体与实用的设计法则，并在了解的基础上能将这些法则运用到实际的设计之中。
首先，在本书的第1章中，编者试图从整体上给读者描绘一个与移动UI视觉设计有关的形象，让读者能够了解“什么是移动UI视觉设计”并开启进入法则学习的大门，而该章也成为本书的总述部分。
其次，第2~8章为法则分述部分，而分述部分也可以分为三个部分。第2~6章为一个部分，以视觉设计元素为阐释对象，细节化地讲解了移动UI视觉设计的法则：第2章主要从视觉元素“文字”的角度出发，讲解了在设计时，对界面中文字可读性的把握的重要性以及具体的设计方法与注意事项；第3章以“图”为出发点，讲解了界面中图片的布局形式与尺寸比例的相关设计法则，还展示了一些设计界面中图形图案与图标的方法；第4章以“色彩”为主线，解析了界面中色彩搭配的秘诀；第5章借鉴了格式塔理论，并结合具体界面设计对其进行了相应的解析，以此来扩展与武装读者的设计思维；第6章则讲述了界面中的“图表”表现形式，让读者了解界面设计时更多的表现形式与装饰元素。
第7章将所有的视觉元素整理在界面中，讲解了界面中元素的布局形式，该章是本书分述部分的第二个组成部分。
除了直观的视觉设计元素以外，界面还有一个最重要的功能，那便是交互，用户需要通过与界面形成交互才能产生操控感，然后对所需的功能进行使用。因此，第8章便从“交互”的角度出发，讲解了如何在考虑用户交互体验的同时进行视觉设计的优化，而它形成了分述的最后一个部分。
在本书的编写过程中，编者采用了图文并茂的编排方法，并通过穿插图表式的说明方法，使读者能够更加轻松地理解并运用理论知识。在对每条法则进行讲解时，会引用大量的移动UI视觉设计案例，对法则进行直观的解释，而在讲解结束时，增添了“界面解析”板块，对所述法则进行总结与提炼，以方便读者对知识点的整理，这也形成了本书的特色之一。
总之，本书主构架为总分的形式，在此基础上从法则，也就是设计点的角度出发，向读者细致、全面而较为生动地展示了移动UI视觉设计的方法，旨在使读者能从中获取一些设计的思路与灵感。
本书由河南工业大学设计艺术学院张颖老师编写。尽管作者在编写过程中力求准确、完善，但是书中难免会存在疏漏之处，恳请广大读者批评指正。让我们共同对书中的内容进行探讨，实现共同进步。
编者
2015年6月
计算机\数字艺术\视觉设计
宏观角度：移动UI视觉设计的
关键点以及设计流程与总则。
微观角度：结合具体的视觉设
计元素，如文字、色彩、图像
与图形符号等，逐一解析与之
对应的移动UI视觉设计法则。
布局法则：格式塔理论，图表
化表达， 界面空间与操控趣
味，界面布局与用户体验等。
设计关联：从交互设计的角度
出发寻找关联，进一步优化移
动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 章 移动UI中不容轻视的“图”的存在 61
3.1 图片在界面中的布局展示形式 ····· 62
法则一 传统矩阵式平铺布局 ················62
法则二 定宽不定高瀑布式布局 ············66
法则三 承接关系的浏览布局 ················69
法则四 打破屏幕局限的全景式布局 ·····73
3.2 注意界面中图片的尺寸与比例 ····· 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
法则五 低纯度色彩和中性色中的朴实与复古 ···············111
4.3 影响视觉感受的对比度的控制 ···113
法则一 在明度对比中突出界面重点 ···113
法则二 利用纯度对比刺激用户眼球 ···116
法则三 过度刺激只会使用户退缩 ·······118
4.4 色彩面积决定界面关键点 ··········120
法则一 在大面积中突显点睛色 ··········120
法则二 面积均等中的无彩色调节 ·······123
第 5 章 用格式塔理论武装设计思维与界面 125
5.1 接近性与相似性原理 ·················126
法则一 合理安排信息间的组合位置 ···126
法则二 利用线条或色块增强信息的联系 ·····················128
5.2 连续性原理 ······························131
法则一 别让图形的装饰破坏连续性 ···131
法则二 添加背景装饰图形增强整体感 ···················133
法则三 适当的交互说明让连续感更明显 ·····················135
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
法则四 陈列馆式布局 ·························192
法则五 仪表式布局 ·····························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
