流动法则跟响应度量——1688网站响应式设计-何玉婵.pdfVIP

流动法则与响应度量——1688 网站的响应式设计 ／何玉婵 流动法则与响应度量——1688 网站的响应式设计 文 / 何玉婵 引言： 新的设备不断增加，旧的设备依然存在，这种快速增长且日趋加剧的可联网设备的多样化，使 得网页设计已不再有标准的屏幕尺寸。基于一个固定尺寸对网站页面进行设计的模式，已无法 满足用户设备多样化的通用需求。理想的情况是分别为每种设备单独创建一个版本，然而这对 于大多数网站来说是不切实际的，于是越来越多的网站选择成为响应式，响应式设计已成为网 页设计的一大主流模式。 除了设备多样化的现状与趋势之外，响应式设计能够带来多终端体验的一致性，因此作为全球 企业间 (B2B)电子商务平台的我们 （1688 网站）也在积极研究适用于本站的响应式设计方式。 本文将对目前主要的响应式设计方式进行梳理，把不同响应方式的响应规则与体验改善程度通 过可视化的方式进行量化评估，并基于 1688 网站的设计现状及用户设备环境，反思网站的响 应式设计模式，从而探索适用于本站的响应式栅格系统及普适规则。 一、什么是响应式设计 自2010 年 5 月，伊桑.马科特（Ethan Marcotte）提出并实践了响应式网页设计，便引起了广 泛关注，许多设计师、工程师们纷纷加入到响应式设计的研究和实践中来。响应式设计发展到 目前的阶段，已不仅仅是一些技术工具（如流动布局①、媒介查询②、弹性图片③ ）的集合， 更是一种设计技术、设计策略的能力体现。 响应式设计的本质目标是：通过识别用户设备屏幕的尺寸环境，选择最佳的内容展示方式，让 页面有能力覆盖所有设备环境的良好用户体验。它应该有三个特质： 1） 内容灵活性：内容可以像水一样，能够根据容器的不同，而展现出不同的形状。 2）设备多样性：页面能够适配多种类型终端设备，兼容已有或未来的设备。 3）体验一致性：网站在多种设备场景中均能保持统一的良好体验。 二、响应式设计的三种方式 许多网站为实现响应式设计，有各自的不同做法，主要可以归结为以下 3 种方式： 1） 多个固定尺寸切换的响应方式 2）为移动端、桌面端分别打造两套区间尺寸的响应方式 3）跨终端无缝体验的响应方式 1 流动法则与响应度量——1688 网站的响应式设计 ／何玉婵 1、多个固定尺寸切换的响应方式 基于核心用户的主流设备，选择典型的分辨率，分别设计出几个尺寸版本，投射到相应的设备 中去。严格意义来说，这不是真正意义上的响应式，或者可以称之为伪响应，它并没有从根本 上解决让页面有能力去适应多种设备屏幕的问题，而是让一些屏幕尺寸相近的设备使用同一套 尺寸页面。其主要案例有：1688.com、、... 该响应方式的优缺点分别为： 1）优点：不用考虑同一断点内的拉伸规则，基于现有固定尺寸的页面设计流程和模式就可 以完成网站的设计开发，主要可用于一些桌面端的设备环境。 2）缺点：它只能在几个特定分辨率设备下显示非常好的体验效果, 而除这几个值之外的设 备上的体验效果将大打折；另外用户的设备无法穷举，随着用户主流设备屏幕尺寸的变 更，网站仍需要不断增加或更换尺寸版本。 2、为移动端、桌面端分别打造两套区间尺寸的响应方式 通过综合评估网站用户设备的终端类型、屏幕尺寸、网站定位，以及不同终端环境的用户使用 特性，分别为移动端和桌面端打造两套独立页面，它可以实现所有用户设备屏幕尺寸中的部分 区间段的理想体验覆盖。有人说这是残疾版响应式，但基于移动端与桌面端完全不同的用户行 为方式及体验环境，以及从小屏手机到大屏电脑的大尺寸跨度给设计带来的局限性，这种方式 就现阶段而言，尤其是对一些内容较为丰富的综合型网站来说，是一个不错的选择。其主要案 例有：、、... 该响应方式的优缺点分别为： 1）优点：能较好地基于不同终端设备的体验环境，考虑不同的用户行为习惯及操作方式， 分别为移动端及桌面端打造不同的用户体验。 2）缺点：所有的页面都要单独开发两套，有较大的工作量，也不利于体验的一致性；另外 不同类型终端间的尺寸界线已渐渐模糊（如大屏手机与小屏平板、大屏平板与小屏笔记 本电脑），两套方案尺寸