编者按：移动端设计指南终结篇来咯，这个系列的教程由@网秦UEC 的蒋灿同学翻译，从移动的信息架构到界面交互，再到今天的视觉设计都有全面深入的解读，很值得新手以及初阶设计师学习哟。

在Elaine McVicar移动端设计系列文章的最后一节中，我们将共同探索在移动应用中设计师应通过哪些视觉元素来有效传达讯息。

为了利用平台化的功能，历史上第一批移动网站不得不在很多方面做出“让步”，因此远达不到“佳作”的水平。而如今，功能更加完备的设备让我们有机会 打造出更具视觉吸引力的设计，这些设计不仅能够刺激和吸引用户，更能够提高用户体验的实用性。不过，机会的出现同时也伴随着挑战。

在《移动设计指南！如何理解移动信息架构？（一）》，我们共同探索了移动端在物理特性和规格方面有别于电脑的地方；我们使用移动设备的时间、地点和方式，以及使用移动设备时的行为方式及感觉。之后在《移动设计指南！界面交互方法与技巧超全总结（二）》，我们探讨了这些区别对于结构和功能的开发有着哪些影响。上面这两篇文章为优秀的手机和平板电脑设计提供了基石。下面，我们进入移动端设计研究的第3部分：探索视觉设计解决方案以及打造漂亮、好用的应用所需遵循的一些最佳实践。

首先我们来看如何针对移动设备的物理制约进行设计（包括各项最佳实践），然后聊聊讯息传递方面（也就是使用视觉设计支持移动网站和应用上的内容）的设计。

针对移动设备物理制约进行设计

手机和平板电脑的物理形式和触摸屏界面限定了其在使用方面的几项基本注意事项。对于电脑，用户可以在宽广的内容空间内任意滚动或通过鼠标悬浮查看细 节信息，但移动用户所面对的空间则较为有限，因此必须采取不同的交互方式。要创造出直观的用户体验，我们就必须要牢记有关移动布局和移动交互的特定限制因 素。

移动屏幕上有限的空间对内容和交互的有效呈现提出了一些有趣限制。具体来说就是：布局务求精简、专注。

布局结构

为了给设计提供强有力的基础，我们需要考虑如何最有效的运用有限的屏幕空间。在这方面网格系统可以给设计师带来很大帮助：均匀分布的垂直线条结构可 以起到引导和安置内容的作用。网格能够界定出空间是否均匀，从而能让设计师更轻松地判断出放置按钮、标题或图像的最佳位置。沿网格放置元素一方面能够给用 户的旅程带来方向感，同时也能带来清爽、美观的视觉效果。

滚动及滑动的空间

在用户浏览内容或者滚动屏幕时，一定要保证他们不会意外执行预期外的操作，或者激活不需要的对象。换句话说，屏幕上各个元素之间的间距必须足够大，让用户能够轻松在其间进行导航。

用户友好的交互

移动设备采用触摸屏界面还意味着视觉设计必须起到强化交互的作用；换句话说，视觉元素大小和位置的安排要保证使用的方便，并突出不同操作的重要性及相互之间的联系。

按钮点击区域

如第2节所讨论：按钮大小和间距的充足与否决定了交互能否轻松实现。在理想情况下，标准屏幕上的按钮大小应为44px到57px，高密度屏（视网膜屏）上为88px到114px。这个大小可以保证正常人的指尖能够轻松激活按钮。

能够得到看得见的控件

相关的交互对象应该能轻松用手指够得到，以方便用户更快捷地在彼此之间进行过渡切换。这样有助于减弱用户对交互操作之间彼此联系的困惑，进而提高复杂交互流程的进展速度。

讯息传递设计

在进行移动端设计时，物理方面的制约还只是我们所面临的难题之一。另一项难题是如何传递讯息。“移动为先”的理念教导我们移动用户通过移动设备和电脑所获得的价值应该是相同的。记住这一点后，我们就会发现，移动端讯息传递的设计会影响到各位设计师所要传递讯息的内容。

为了提高讯息传递效率，我们需要善加利用我们理解和解构信息的方式。人脑解译视觉信息的速度要远远快于文字信息，也就是说使用视觉元素和图像能够更 加有效地提高讯息传递效率。优秀的视觉样式能够提高价值、为内容或交互的目的提供支持，并改善整体用户体验（既适用于移动端也适用于电脑）。

垂直节奏

我们要考虑的第一个提高讯息传递效率的方式是利用垂直节奏。信息架构能够创建出一套合理的内容流，而通过视觉设计我们可以进一步在内容的视觉层级内 实现更高的明晰度。合理利用不同内容板块的大小和相互之间的间距可以创造出优秀的垂直节奏感，从而为内容层级的讯息传递提供支持。

除了前面提到的垂直网格体系之外，也可以用基线网格创造合适的垂直节奏感，让阅读和理解内容变得更加容易。明确地说，基线网格能够通过规范线条的粗 细来创造结构。这样可以给文字方向和尺寸的界定提供明确的水平标尺，同时也能够确定不同内容组之间的间距。使用这些标尺可以保证文案的清晰易读，而且用户 能够明确区分不同的板块和功能组。基线网格在HTML和CSS中的具体操作可能比较困难，但确实能够为设计流程中的大小和间距设定提供指导。

颜色使用

颜色是讯息传递的又一有力工具，其可通过多种不同方式支持内容和交互。

表现基调或样式

设计中的颜色是个非常主观，而且严重依赖于个人感觉和文化背景的东西。但是，通过使用特别的色调和阴影有助于表现设计师脑中想给人的整体印象。明亮 大胆的颜色能给人带来乐趣感，较深的色调能营造优雅的气氛，而柔和的色调则可带来古典感觉。深入研究颜色理论可以帮助我们根据设局目标选择最适合的颜色。

区分不同板块

颜色可以用来区分不同的内容对象、显示对象之间的关联，或者支持内容结构，例如表现内容之间是彼此分离的。

区分静态对象和互动功能

使用强烈的对比有助于传达出你要表现出的区别或者不同内容及功能之间的联系。混合使用中性和明亮的色彩或对比强烈的色彩可以让特定的对象在用户眼中 表现地更加突出。在设计中对颜色的连贯使用（例如全部静态对象使用相同色调，激活和非激活对象使用不同色调）可以更加明确地彰显出内容和功能之间的区别。

传达状态改变

颜色还可以用来在用户与某个元素进行交互后巧妙地表现信息、通知和错误状态。举例来说，很多网站使用绿色表示操作成功、红色表现错误信息，而不是使用冗长繁复的文字。通过连贯的使用颜色来快速传递新信息有助于提高整体设计的实用性。

使用象征

最后来讲讲象征。象征在视觉设计的信息传递中是一个非常强大的解决方案。通过象征手法，可以让用户联想到自己本来就比较熟悉的元素或视觉对象，从而 达到快速理解内容和功能的目的。拟物化就是在数字空间内使用视觉象征的极致。拟物化是指将界面元素设计地和真实世界中对应的物体高度相似。另外，尽管 Windows8和iOS7对拟物化的摒弃给这一风格带来了不好的名声，但它们以及其他很多应用还是在很大程度上于界面上使用了简约化的拟物设计。例如用 垃圾桶表示删除、照相机表示摄像头、信封表示邮件等。

象征可以通过多种方法来支持讯息或主题的表现。

支持潜在的主题

象征手法可以用来对单一的设计元素进行延展，从而使其成为设计或功能的关键主题。在Flipboard这个应用中，翻转效果是用户交互操作中的一个 不可或缺的组成部分，而这一效果的顺畅与否则是这个应用成功的关键因素。这一象征手法的使用可以快速向用户传达产品的理念，同时奠定产品独特的定位。

按钮与交互

在设计按钮时使用简单的拟物化来模拟真实生活中的交互元素，让功能更加明确。但有一点需要引起我们的注意：如果品牌或样式指南中要求使用比较简约的 风格，那么可以让颜色和样式与静态对象产生明显的区别，从而让这一方法达到更佳的效果。Wunderlist的按钮就是用了模拟真实生活的风格

图标

考虑到有限的屏幕空间要求快速传递复杂的概念，因此图标对于移动端的设计非常重要。对图标使用视觉象征手法（特别是已经成为网上标准的图标，例如删 除、摄像头和电子邮件的图标）意味着即便不附上说明标签，用户也能一看就懂。设计简单但明确的图标是一项有难度的工作，所以一定要理解图标对设计明晰度有 何影响。

移动的未来

明确理解移动设备的制约和标准（正如本系列文章所述）对于移动设计师来说非常关键。但是，只有真正掌握了这些内容，我们才能够突破规范的限制、打破陈规，将创意发挥到更加独特、出彩的东西上。除此之外，我们还要不断思考用户的需求，努力实现功能与美观之间的平衡。

移动端的设计既是挑战也是机遇。技术的飞速发展和用户背景的不断改变意味着今天的制约在未来几年内就可能会消失。革新的思维和创意能够帮助我们探索发现看待这些挑战的新角度，让我们持之以恒地发现新的、漂亮的而且好用的针对设计问题的解决方案。

原文地址：uxbooth

译文地址：uec.nq

译者：蒋灿