本文通过探索视觉设计解决方案和相关的最佳实践来研究移动设计，从而做出既美观又好用的应用。

作为一个直接响应式的功能平台，第一个手机网站只是一个“试验品”，而不是“成品”。在今天，如此多的智能设备的确给了我们机会去做更多的视觉设计，但这不仅能激发和吸引用户，而且增加了用户体验。当然伴随着机会就以为着更多的挑战。

本文是做出总结，即通过探索视觉设计解决方案和相关的最佳实践来研究移动设计，从而做出既美观又好用的应用。

首先我们来看看移动端设计上的物理限制，其中包括最佳实践案例；然后我们将着眼于通信设计，用视觉设计为移动站和应用的内容提供支持。

在束缚下做设计

移动设备和平板设备的外形和可触控性，给我们带来了一些基本的可用性方面的思考。在桌面端，用户所面对的是更大的显示区域和更多的内容（相对于移动端），或者将鼠标悬浮在某个元素上时能够获得更多的信息。

但是移动端的用户则只能将视线集中在一块较小的屏幕上，而且必须以各种不同的方式来与设备进行交互。通过记住定义一个移动端布局和移动端交互规范的细节，我们可以在移动端上创造一个直观的体验。

1. 可用的布局

移动端屏幕的空间局限性，给设计工作带来了一个有趣的限制——如何在有限的屏幕上以最优的方式，显示内容以及提供最好交互方式。具体来说，布局要既精简又能让用户集中注意力。

（1 ）布局的结构

为了给设计打好基础（造房先打地基，设计页面先设计布局），我们需要考虑如何最有效地使用屏幕空间。”栅格系统” 1（Grid System）有助于设计师做到这点：均匀分布的垂直线结构可以作为放置内容根据。

用这个方法，能让设计师更容易将按钮、标题或图像放在最有效的地方。将页面组件放在网格上有助于引导正在“使用”页面的用户，同时创造一个干净美观的视觉体验。

滚动和滑动的空间：用户在浏览页面内容时，不应该有任何与浏览页面无关的操作被用户“激活”，在用户尝试滚动页面时不应该“打开一个链接/页面”，这一点很重要。

换句话说就是，元素之间要有足够的间距来允许用户轻松地浏览页面。

2. 人性化的交互

在移动设备上的触摸屏界面，也意味着视觉设计必须加强交互。换句话说，元素的大小和位置应确保其易用性，并指出动作之间的重要性和相关性。

按钮点击区域：足够的按钮尺寸和间距将确保它们可以被轻松地激活。，理想情况下，标准屏幕上的按钮应该在44px到57px之间，在高密度（视网膜）屏幕上按钮应该在88px到114px之间。 这允许均匀的指尖有足够区域去更容易地激活一个按钮。

可触及的和显著的控件：如果相关连的交互模块彼此之间很容易点击，它将允许用户更快地在它们之间转换。 这将有助于减少用户在交互连接方面的困惑，并加快更复杂的流程。

为通信而设计

物理条件限制这方面只是我们为移动设备设计时所面临挑战的一半，另一半则是在信息传达方面。“移动第一”（mobile first），这个理论提示我们，移动用户应该从网站上获得与桌面用户相同的信息价值。考虑到这一点，为移动通信而设计影响了这个方式——所有设计师需要接触他们正在交流的消息。

为了加强通信，我们需要充分利用我们对信息的理解和解读。人脑解读视觉信息要比文字信息快得多，这就意味着使用视觉和图像来加强通信是非常有价值的。 良好的视觉样式能够增加价值，支撑内容或者交互的主体，并改善整体的用户体验（移动端和桌面端）。

垂直排版规律

我们优先考虑使用垂直排版来传达信息，信息结构创建了一个合理的内容流，而可视化设计可以进一步明确区分内容的层级。在内容排版上使用合适的尺寸和间距，可以创建一个良好的垂直方向的视觉流，更清晰的传达不同层级的内容。

除了前面提到的垂直网格系统，基线网格（baseline grid）可以在垂直方向上创建一个良好的的排版，使用户更容易阅读和理解内容。

具体来说，基线网格是通过行高的规范来创建的一种网格结构。它在排版上明确的规定了行距和尺寸，同时也有助于确定垂直方向上不同的内容组之间的间距。遵循这些规则可以确保内容段落的可读性，并且可以使用户清楚地区分一段内容和整体内容的差别。

基线网格在HTML和CSS中很难精确地实现（implement accurately） ，但是它在设计过程中可以为开发尺寸和确定间距提供良好的指导。

使用颜色

颜色是另外一种非常有价值的传达信息的工具，可以有多种方式来保证内容和信息交互。

传达一种色调或风格：色彩设计是非常主观的，它依赖于个人经验和文化。使用特定的色调和明暗程度，可以帮助我们传达目标的整体印象。明亮大胆的色彩营造出一种趣味性，暗色调营造出一种优雅的氛围或基调，而加入了灰的浅色调会营造出一种复古感。了解更多的色彩理论（color theory）有助于我们选择最适合设计目标的颜色。

区分细节：颜色可以用来突出内容项，说明内容项之间的联系，或维持结构化的内容，比如保持内容之间的独立性。

区分静态项和交互功能：使用强烈的对比有助于传达用途的不同，或者在内容或功能之间的连接。混合使用中性色和明亮色，或者用对比色以确保对于用户来说这个特定项目是显眼的。创建一致的用色，例如：跨静态的、激活的、未激活的项目，通过设计可以更清晰的展示内容和功能之间的不同。

传达状态的变换：颜色可以智能的使用，在用户对一个元素进行交互后，它可以突出消息、提示和错误等显示。例如，许多网站使用绿色来表示成功，红色表示错误信息来代替更长更复杂的文本消息。这有助于提高设计的可用性，通过使用一致的颜色约定来快速传递新信息。

使用隐喻

最近，当通过视觉设计进行交流的时候隐喻可以作为一个有力的解决方案。隐喻通过唤起人们已经熟悉的元素，或者可视的对象使用户快速的理解内容和功能。

拟物化就是视觉隐喻的极致使用，界面元素被设计成与现实世界中的事物完全相似的模拟现实世界的对象。虽然它最近名声不怎么好并且Windows8和iOS7都远离隐喻设计（ iOS7 moving further away from it），但这些操作系统和其它移动网站和APP都在使用简单的隐喻界面设计，如可被删除的垃圾、照相机的摄像头和邮箱的信件。

隐喻可以被用于不同的方式去支持传达信息和思想。

维持一个根本的思想：隐喻可以延伸单个设计元素所能表达的含义，从而成为设计或功能的关键中心点。在Flipboard（飞丽博） APP，翻转过渡这个动作是用户交互的一个完整部分，而这一过程的顺利实现是应用程序成功的一个因素。通过这种方式使用隐喻，可以快速的传达概念给用户，同时有助于APP展现自己的亮点。

按钮和交互：设计按钮使用的拟物化，是一种模拟真实生活互动元素并使功能变得清晰明了的有效途径。然而，值得注意的是，如果扁平风格必须符合品牌或风格的指导方针，那么静态物料项目的颜色和样式被清晰划分时才得以有效实现，Wunderlist软件按钮运用了逼真的样式。

图标解读：在设计移动设备，图标就非常用，用于在有限的屏幕空间允许快速交流复杂的概念。图标在视觉隐喻的运用——特殊的图标已成为网络标准，例如：我们提到的删除、网络摄像头和电子邮件的图标——也就意味着，人们在工作时可以不需要解释也可以一目了然。

设计简单而清晰的图标是一项具有挑战性的任务，因此了解图标怎样影响你的设计（icons affect the clarity of your design）的清晰性就很重要的。

未来的手机

一个清晰明了的规范准则，比如本系列描述的，对任何移动设计人员都是有价值的。然而只有当我们掌握了这些准则，我们才能超越准则，打破规则，打破创造性的界限，创造出一些辉煌而独特的东西。随着对用户持续不断的考虑，会让我们创造出的主意在功能和美感得以平衡。

移动设计面临着一些令人兴奋的挑战和巨大的机遇，技术的快速发展和不断发生变化的用户场景，意味着今日的限定可能在几年后不复存在。对于这些挑战，创新思维和创造力可以帮助我们探索新方法，并且让我们在面对设计问题时可以持续发现新的、漂亮的、具有可解决性的解决方案。

名词解释：

1、栅格系统（Grid System）：栅格设计系统（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。

原文链接：http://www.uxbooth.com/articles/designing-mobile-part-3-visual-design/

本文由 @兔子翻译组 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议