移动设计之视觉设计

                                                                 
                                    

图片版权所属：站长之家
作为一个直接响应式的功能平台，第一个手机网站只是一个“试验品”，而不是“成品”。在今天，如此多的智能设备的确给了我们机会去做更多的视觉设计，但这不仅能激发和吸引用户，而且增加了用户体验。当然伴随着机会就以为着更多的挑战。
本文是做出总结，即通过探索视觉设计解决方案和相关的最佳实践来研究移动设计，从而做出既美观又好用的应用。
首先我们来看看移动端设计上的物理限制，其中包括最佳实践案例；然后我们将着眼于通信设计，用视觉设计为移动站和应用的内容提供支持。
在束缚下做设计移动设备和平板设备的外形和可触控性，给我们带来了一些基本的可用性方面的思考。在桌面端，用户所面对的是更大的显示区域和更多的内容（相对于移动端），或者将鼠标悬浮在某个元素上时能够获得更多的信息。
但是移动端的用户则只能将视线集中在一块较小的屏幕上，而且必须以各种不同的方式来与设备进行交互。通过记住定义一个移动端布局和移动端交互规范的细节，我们可以在移动端上创造一个直观的体验。
1. 可用的布局移动端屏幕的空间局限性，给设计工作带来了一个有趣的限制——如何在有限的屏幕上以最优的方式，显示内容以及提供最好交互方式。具体来说，布局要既精简又能让用户集中注意力。
（1 ）布局的结构
为了给设计打好基础（造房先打地基，设计页面先设计布局），我们需要考虑如何最有效地使用屏幕空间。”栅格系统” 1（Grid System）有助于设计师做到这点：均匀分布的垂直线结构可以作为放置内容根据。
用这个方法，能让设计师更容易将按钮、标题或图像放在最有效的地方。将页面组件放在网格上有助于引导正在“使用”页面的用户，同时创造一个干净美观的视觉体验。

滚动和滑动的空间：用户在浏览页面内容时，不应该有任何与浏览页面无关的操作被用户“激活”，在用户尝试滚动页面时不应该“打开一个链接/页面”，这一点很重要。
换句话说就是，元素之间要有足够的间距来允许用户轻松地浏览页面。
2. 人性化的交互在移动设备上的触摸屏界面，也意味着视觉设计必须加强交互。换句话说，元素的大小和位置应确保其易用性，并指出动作之间的重要性和相关性。
按钮点击区域：足够的按钮尺寸和间距将确保它们可以被轻松地激活。，理想情况下，标准屏幕上的按钮应该在44px到57px之间，在高密度（视网膜）屏幕上按钮应该在88px到114px之间。 这允许均匀的指尖有足够区域去更容易地激活一个按钮。

可触及的和显著的控件：如果相关连的交互模块彼此之间很容易点击，它将允许用户更快地在它们之间转换。 这将有助于减少用户在交互连接方面的困惑，并加快更复杂的流程。
为通信而设计物理条件限制这方面只是我们为移动设备设计时所面临挑战的一半，另一半则是在信息传达方面。“移动第一”（mobile first），这个理论提示我们，移动用户应该从网站上获得与桌面用户相同的信息价值。考虑到这一点，为移动通信而设计影响了这个方式——所有设计师需要接触他们正在交流的消息。
为了加强通信，我们需要充分利用我们对信息的理解和解读。人脑解读视觉信息要比文字信息快得多，这就意味着使用视觉和图像来加强通信是非常有价值的。 良好的视觉样式能够增加价值，支撑内容或者交互的主体，并改善整体的用户体验（移动端和桌面端）。
垂直排版规律我们优先考虑使用垂直排版来传达信息，信息结构创建了一个合理的内容流，而可视化设计可以进一步明确区分内容的层级。在内容排版上使用合适的尺寸和间距，可以创建一个良好的垂直方向的视觉流，更清晰的传达不同层级的内容。

除了前面提到的垂直网格系统，基线网格（baseline grid）可以在垂直方向上创建一个良好的的排版，使用户更容易阅读和理解内容。
具体来说，基线网格是通过行高的规范来创建的一种网格结构。它在排版上明确的规定了行距和尺寸，同时也有助于确定垂直方向上不同的内容组之间的间距。遵循这些规则可以确保内容段落的可读性，并且可以使用户清楚地区分一段内容和整体内容的差别。
基线网格在HTML和CSS中很难精确地实现（implement accurately） ，但是它在设计过程中可以为开发尺寸和确定间距提供良好的指导。