0 Comments

设计好脾气的Web页面(2)

发布于:2013-09-25  |   作者:广州网站建设  |   已聚集:人围观

响应式设计方案

市面上有很多关于这个话题的讨论,不过它们大多是围绕着各种相关的开发技术来进行的。其实,“响应化”本身不是目的,我们真正需要的是一种机制,它能够帮助网站根据不同的设备平台对内容、媒体文件和布局结构进行相应的调整与优化,从而使网站在各种环境下都能为用户提供一种最优且相对统一的体验模式。

响应式方案离不开全局化的用户体验设计。正像我们在前文当中提到的,这类方案固然可以在一定程度上帮助我们面向不同的环境调整设计方案,但不是所有的UI元素或模块都可以被赋予弹性,我们仍然需要在很多地方通过“好脾气”的设计思路权衡出一种最优的全局化解决之道。在这方面,波士顿环球报(Boston Globe’s)的网站就是一个不错的例子。

广州网站建设,网站建设,广州网页设计,广州网站设计

ui-user-experience-interactive-responsive-solution-boston-globe

 

各位可以试着使用不同类型的设备来访问这个站点,或是直接在桌面设备中不断调整浏览器窗口的尺寸,以观察页面的响应化调整规则。

响应式策略可以使同一套设计方案适应于各种类型的显示设备,用户甚至可以通过老旧的苹果Newton掌上电脑来浏览波士顿环球报的页面。不过,这不只是前端开发方面的成就,实际上,这种策略所体现出的具有高度适应性的设计思路才是最重要的。

我想,如果我们只需要面向桌面设备进行设计,那么最终的方案应该是更加纯粹的,包括视觉效果及交互体验等方面。毕竟,在这种情况下,我们拥有足够的时间和资源来使一种设计方案尽量趋于完美。一旦要考虑到不同类型的设备环境,我们就必须做出某种程度的权衡,以便“弹奏出全部调式”。

有兴趣的同学不妨参考我们之前的相关文章,对响应式Web设计的概念及实践方式进行深入了解:

专题:响应式Web设计

什么是响应式Web设计?怎样进行?

通过CSS3 Media Query实现响应式Web设计

响应式网站的产品需求和设计流程详解

移动优先的设计

之前的话题主要偏向于页面的视觉设计。其实,“好脾气”的设计思路同样可以体现在产品设计、用户体验、信息架构等诸多方面。接下来让我们来看看产品设计当中的移动优先策略。

在这个概念里,我们会从移动的角度入手开始产品设计工作,并始终围绕着移动平台的软硬件特性来打造最符合移动设备上下文环境的产品基本功能。正如Luke Wroblewski在《移动优先》一书中所说:

如果一个团队以移动优先为策略原则开展设计工作,其产品最终所带来的体验将是具有高度的任务驱动性的。用户可以将注意力聚焦在需要完成的关键任务当中,而不会被传统风格的桌面版本网站产品当中过多的无关因素所干扰。这对于产品的用户体验及业务发展都是有好处的。

对这种设计策略进行扩展,使其超越移动体验的范畴,并上升到整个产品的层面,我们就可以在它身上发现很明显的“好脾气”特征。Twitter最近的一次改版当中就很好的体现出了这方面的概念。

广州网站建设,网站建设,广州网页设计,广州网站设计

ui-desgin-user-experience-interactive-new-twitter-design

 

Twitter这轮改版的一个主要目的就是在不同类型的设备当中实现具有一致性的体验模式。保持界面外观的统一只是其中的一个方面,更重要的是能否在整个产品体验的层面上实现这一目标。移动优先的设计策略可以保证相关的工作能够朝着正确的方向前进。

我们可以在Twitter的这次改版当中很明显的感受到移动化的体验模式对于整个产品设计方案的影响作用。例如其客户端底部的“Home”、“Connect”、“Discover”、“Me”这四个导航标签,从数量上来说正好适用于移动设备的小尺寸屏幕规格,这正体现出了产品的信息架构针对移动环境所进行的优化调整。而同样的导航结构也出现在了Twitter桌面版的网站当中。我们可以在上面的截图当中看到,虽然桌面环境相对于移动设备来说拥有更大的界面显示空间,但这些导航元素的尺寸及外观效果却几乎与客户端当中的完全一致,只是在整体布局方面进行了调整。可以说,整个桌面版的设计方案在某种程度上就是为了能够保持与移动版本的体验一致性而刻意受限的。

飞机