新的设备不断增加,旧的设备依然存在,这种快速增长且日趋加剧的可联网设备的多样化,使得网页设计已不再有标准的屏幕尺寸。基于一个固定尺寸对网站页面进行设计的模式,已无法满足用户设备多样化的通用需求。理想的情况是分别为每种设备单独创建一个版本,然而这对于大多数网站来说是不切实际的,于是越来越多的网站选择成为响应式,响应式设计已成为网页设计的一大主流模式。

除了设备多样化的现状与趋势之外,响应式设计能够带来多终端体验的一致性,因此作为全球企业间(B2B)电子商务平台的我们(1688网站)也在积极研究适用于本站的响应式设计方式。

本文将对目前主要的响应式设计方式进行梳理,把不同响应方式的响应规则与体验改善程度通过可视化的方式进行量化评估,并基于1688网站的设计现状及用户设备环境,反思网站的响应式设计模式,从而探索适用于本站的响应式栅格系统及普适规则。

一、什么是响应式设计

自2010年5月,伊桑.马科特(Ethan Marcotte)提出并实践了响应式网页设计,便引起了广泛关注,许多设计师、工程师们纷纷加入到响应式设计的研究和实践中来。响应式设计发展到目前的阶段,已不仅仅是一些技术工具(如①流动布局、②媒介查询、③弹性图片)的集合,更是一种设计技术、设计策略的能力体现。

响应式设计的本质目标是:通过识别用户设备屏幕的尺寸环境,选择最佳的内容展示方式,让页面有能力覆盖所有设备环境的良好用户体验。它应该有三个特质: 1)内容灵活性:内容可以像水一样,能够根据容器的不同,而展现出不同的形状。 2)设备多样性:页面能够适配多种类型终端设备,兼容已有或未来的设备。 3)体验一致性:网站在多种设备场景中均能保持统一的良好体验。

二、响应式设计的三种方式

许多网站为实现响应式设计,有各自的不同做法,主要可以归结为以下3种方式: 1)多个固定尺寸切换的响应方式 2)为移动端、桌面端分别打造两套区间尺寸的响应方式 3)跨终端无缝体验的响应方式

1、多个固定尺寸切换的响应方式 基于核心用户的主流设备,选择典型的分辨率,分别设计出几个尺寸版本,投射到相应的设备中去。严格意义来说,这不是真正意义上的响应式,或者可以称之为伪响应,它并没有从根本上解决让页面有能力去适应多种设备屏幕的问题,而是让一些屏幕尺寸相近的设备使用同一套尺寸页面。其主要案例有:1688.com、taobao.com、etao.com…

该响应方式的优缺点分别为: 1)优点:不用考虑同一断点内的拉伸规则,基于现有固定尺寸的页面设计流程和模式就可以完成网站的设计开发,主要可用于一些桌面端的设备环境。 2)缺点:它只能在几个特定分辨率设备下显示非常好的体验效果, 而除这几个值之外的设备上的体验效果将大打折扣;另外用户的设备无法穷举,随着用户主流设备屏幕尺寸的变更,网站仍需要不断增加或更换尺寸版本。

2、为移动端、桌面端分别打造两套区间尺寸的响应方式 通过综合评估网站用户设备的终端类型、屏幕尺寸、网站定位,以及不同终端环境的用户使用特性,分别为移动端和桌面端打造两套独立页面,它可以实现所有用户设备屏幕尺寸中的部分区间段的理想体验覆盖。有人说这是残疾版响应式,但基于移动端与桌面端完全不同的用户行为方式及体验环境,以及从小屏手机到大屏电脑的大尺寸跨度给设计带来的局限性,这种方式就现阶段而言,尤其是对一些内容较为丰富的综合型网站来说,是一个不错的选择。其主要案例有:alibaba.com、aliexpress.com、amazon.com…

该响应方式的优缺点分别为: 1)优点:能较好地基于不同终端设备的体验环境,考虑不同的用户行为习惯及操作方式,分别为移动端及桌面端打造不同的用户体验。 2)缺点:所有的页面都要单独开发两套,有较大的工作量,也不利于体验的一致性;另外不同类型终端间的尺寸界线已渐渐模糊(如大屏手机与小屏平板、大屏平板与小屏笔记本电脑),两套方案尺寸分割点的划分会变得越来越尴尬。

3、跨终端无缝体验的响应方式 从小屏手机到大屏电脑所有用户设备全尺寸区间覆盖的一套完整页面系统,能兼顾不同类型终端的交互行为差异,带来跨终端设备的用户体验一致性。其主要案例有:smashingmagazine.com、bootcss.com、indochino.com、…

该响应方式的优缺点分别为: 1)优点:所有用户全设备的良好体验覆盖,能兼容已有或未来的设备,包括新兴起来的穿戴设备、电视、甚至其他物联网设备界面等的全场景。 2)缺点:对网站设计师及工程师们的能力都提出了更高的要求和挑战,从视觉设计、跨端交互、页面性能等方面都存在很多难点需要去攻克。

总结以上这三种方式(如下图),在广义上来说,他们都可以称之为响应式设计,只是不同方式的响应式设计分别对网站的设计能力与技术水平提出了不同等级的要求: 1)多个固定尺寸切换的响应方式:需要考虑页面体验的一致性,设计多个尺寸版本的页面方案。 2)为移动端、桌面端分别打造两套区间尺寸的响应方式:需要基于内容的可读性,扩大页面的尺寸覆盖范围,制定区间尺寸的内容拉伸规则。 3)跨终端无缝体验的响应方式:需要兼顾跨终端不同操作方式的交互行为差异与区间尺寸的内容拉伸规则。

……

———————— 我是华丽的分割线 —————————

特别说明

因本文章发表在《U一点 ● 料——阿里巴巴1688UED体验设计践行之路》中,目前处于新书发行的内容保护期,所以更多内容请大家在实体书中查看。

购买请移步天猫>

4 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

  1. 电子书说道:

    刚想留言说怎么写了一个开头就没了,结果就看到了最后的特别声明!

  2. heyuchan说道:

    哈哈~改天补上

  3. Kristy说道:

    Handle you I obtained coming from my friend, who have now On the web head over heels for that. I was searching for internet pages relating to this issue for a long time, however difficult to do liked in my exirepence much like the one you have!

  4. Akkurat den der har jeg kikket og lurt litt pÃ¥ ogsÃ¥! Siden jeg ikke kan smelle av gÃ¥rde mange tusen pÃ¥ fancy spiestoler at the moment 😉 Mer enn fancy nok den der. God design! God pÃ¥ske til deg! Klem