为移动而设计系列三：视觉设计.pdfVIP

为移动而设计系列三 ：视觉设计 在Elaine McVicar移动端设计系列文章的最后一节中 ，我们将共同探索在移动应 中设计师应通过哪 些视觉元素来有效传达讯息。 为了利 平台化的功能 ，历史上第一批移动网站不得不在很多方面做出“让步” ，因此远达不到“佳作” 的水平。而如今 ，功能更加完备的设备让我们有机会打造出更具视觉吸引力的设计 ，这些设计不仅 能够刺激和吸引 户 ，更能够提高 户体验的实 性。不过 ，机会的出现同时也伴随着挑战。 在第一节 ：信息架构中 ，我们共同探索了移动端在物理特性和规格方面有别于电脑的地方 ；我们使 移动设备的时间、地点和方式 ，以及使 移动设备时的行为方式及感觉。之后在第二节 ：交互设 计中 ，我们探讨了这些区别对于结构和功能的开发有着哪些影响。上面这两篇文章为优秀的手机和 平板电脑设计提供了基石。下面 ，我们进入移动端设计研究的第3部分 ：探索视觉设计解决方案以及 打造漂亮、好 的应 所需遵循的一些最佳实践。 首先我们来看如何针对移动设备的物理制约进行设计 （包括各项最佳实践 ），然后聊聊讯息传递方 面 （也就是使 视觉设计支持移动网站和应 上的内容 ）的设计。 针对移动设备物理制约进行设计 手机和平板电脑的物理形式和触摸屏界面限定了其在使 方面的几项基本注意事项。对于电脑 ， 户可以在宽广的内容空间内任意滚动或通过鼠标悬浮查看细节信息 ，但移动 户所面对的空间则较 为有限 ，因此必须采取不同的交互方式。要创造出直观的 户体验 ，我们就必须要牢记有关移动布 局和移动交互的特定限制因素。 实用布局 移动屏幕上有限的空间对内容和交互的有效呈现提出了一些有趣限制。具体来说就是 ：布局务求 精简、专注。 · 布局结构-为了给设计提供强有力的基础 ，我们需要考虑如何最有效的运 有限的屏幕空间。在这 方面网格系统可以给设计师带来很大帮助 ：均匀分布的垂直线条结构可以起到引导和安置内容的 作 。网格能够界定出空间是否均匀 ，从而能让设计师更轻松地判断出放置按钮、标题或图像的最 佳位置。沿网格放置元素一方面能够给 户的旅程带来方向感 ，同时也能带来清爽、美观的视觉 效果。 · 滚动及滑动的空间-在 户浏览内容或者滚动屏幕时 ，一定要保证他们不会意外执行预期外的 操作 ，或者激活不需要的对象。换句话说 ，屏幕上各个元素之间的间距必须足够大 ，让 户能够轻 松在其间进行导航。 用户友好的交互 移动设备采 触摸屏界面还意味着视觉设计必须起到强化交互的作 ；换句话说 ，视觉元素大小和 位置的安排要保证使 的方便 ，并突出不同操作的重要性及相互之间的联系。 · 按 点击区域-如第2节所讨论 ：按钮大小和间距的充足与否决定了交互能否轻松实现。在理想情 况下 ，标准屏幕上的按钮大小应为44 px到57px ，高密度屏 （视网膜屏 ）上为88px到114 px。这个大 小可以保证正常人的指尖能够轻松激活按钮。 · 能够得到看得见的控件—相关的交互对象应该能轻松 手指够得到 ，以方便 户更快捷地在彼 此之间进行过渡切换。这样有助于减弱 户对交互操作之间彼此联系的困惑 ，进而提高复杂交互流 程的进展速度。 讯息传递设计 在进行移动端设计时 ，物理方面的制约还只是我们所面临的难题之一。另一项难题是如何传递 讯息。“移动为先”的理念教导我们移动 户通过移动设备和电脑所获得的价值应该是相同的。记住 这一点后 ，我们就会发现 ，移动端讯息传递的设计会影响到各位设计师所要传递讯息的内容。 为了提高讯息传递效率 ，我们需要善加利 我们理解和解构信息的方式。人脑解译视觉信息的速度 要远远快于文字信息 ，也就是说使 视觉元素和图像能够更加有效地提高讯息传递效率。优秀的视 觉样式能够提高价值、为内容或交互的目的提供支持 ，并改善整体 户体验 （既适 于移动端也适 于电脑 ）。 垂直节奏 我们要考虑的第一个提高讯息传递效率的方式是利 垂直节奏。信息架构能够创建出一套合理的内 容流 ，而通过视觉设计我们可以进一步在内容的视觉层级内实现更高的明晰度。合理利 不同内容 板块的大小和相互之间的间距可以创造出优秀的垂直节奏感 ，从而为内容层级的讯息传递提供支持 。 除了前面提到的垂直网格体系之外 ，也可以 基线网格创造合适的垂直节奏感 ，让阅读和理解内容 变得更加容易。明确地说 ，基线网格能够通过规范线条的粗细来创造结构。这样可以给文字方向和 尺寸的界定提供明确的水平标尺 ，同时也能够确定不同内容组之间的间距。使 这些标尺可以保证 文案的清晰易读