移动设计之视觉设计 - 站长之家

移动设计之视觉设计

QQ截图20180806161657.png

图片版权所属:站长之家

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

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

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

在束缚下做设计

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

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

1. 可用的布局

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

(1 )布局的结构

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

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

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

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

2. 人性化的交互

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

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

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

为通信而设计

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

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

垂直排版规律

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

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

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

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

声明:本文转载自第三方媒体,如需转载,请联系版权方授权转载。协助申请

相关文章

相关热点

查看更多