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

除了设备多样化的现状与趋势之外,响应式设计能够带来多终端体验的一致性,因此作为全球企业间(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体验设计践行之路》中,目前处于新书发行的内容保护期,所以更多内容请大家在实体书中查看。

购买请移步天猫>

作为体验设计的一部分,动效设计在过去一直不愠不火。直到Facebook Paper在设计圈的风靡,一种全新的体验迅速征服了用户,此后,越来越多的移动应用开始使用动效,以便在交互和视觉之外使用更丰富的关联工具,提供当前状态的上下文背景,来完善信息传达的方式。美妙细腻的动效遍布移动平台上优秀应用界面之中,提供了动态和沉浸的体验。App动效如今随处可见,动效的作用越来越被认可和重视。

一、App动效设计的必要性

设计师偏爱细节,然而诸多设计细节依旧建立在传统静态元素上,不断追求像素上的完美,却忽视了对过程的表达。当用户不能在视觉上捕捉界面的连续变化时,往往无法对新旧状态的更替有清晰的认识。屏幕中现在的事物与不久之的事物有什么关系?它们是同一个么,亦或是已经被替换为不同的事物?哪些变化是直接与用户操作相关的,哪些又是附属的?例如,用户在界面上点击了一个漂亮的按钮,一个对话框突然就闪现在屏幕中;用户点击页面中的列表项,下一个页面就这么毫无征兆的全屏覆盖。这些现象不仅怪异,而且难以理解。设计行业传统静态交互方式,不仅无法承载如此多维的信息,而且受数字时代界面趋势的影响,诸多设计细节已经与原本生活中的映射环节脱钩,无法展现新媒介的优势,同时也无法借势于新技术的革新,将它们的运作过程呈现出来。

动效在app设计中的作用从未如此重要,因为我们看到了目前移动应用交互存在如下缺陷:

1、感官反馈有限 现实世界中的质感和温度代表着每一种事物的特性,它们分担了人们眼睛的负担,随手拿起一件物品仔细抚摸,我们可以通过触摸来感知它们是什么,多种感官汇聚起来我们更加容易了解也更容易记住这个物品的特性,使用起来也更加得心应手。然而,移动设备的触摸屏只能提供冰冷的屏幕触感,缺少了不同事物的质感和温度区别,触觉反馈显得不是那么丰富,使得用户的感知程度打了折扣。

2、与物理世界脱节 我们在使用现实物品的时候,我们可以创造出很多种新颖的交互方式,来便利我们更高效的工作与生活,以一张A4纸来说,我们可以将它撕成一个个小块,让我们当做便利贴来用,而当我们不再用的到的时候,我们可以将它揉成一团,扔进垃圾篓。而在这里,我们需要采用点击、拖动这一类不符合实物认知习惯的操作。

3、无法提供可及性(Affordance) 扁平化的视觉呈现,缺乏情景性的操作体验,不利于用户记忆。以电子书阅读为例:在心理学家眼里,记忆与辨识是有区别的,前者是在有上下文细节(人物、时间、地点、事件等)的情况回忆一段信息,而后者则是在不记得如何掌握信息的情况下辨认事物。

总的说来,回忆属于一种较弱的记忆形式,如果不能转化为此后变为“已知”的更稳定的长期记忆的话,很容易逐渐消失。在屏幕前研读材料的志愿者在进行测试的时候,更多的是依赖于记忆而非认识,而在纸张上面阅读的学生则是同时依赖于记忆和认知。Garland 等人认为在纸张上面阅读的学生对材料掌握得更快更彻底;他们不需要花费太多的时间针对文本中的信息搜索自己的脑海,以便触发正确的记忆,因为他们往往已经知道答案了。

动效的出现,引入了交互中被忽视的维度“时间”,同时赋予了交互更全面的定义: “设计不仅是外形和感觉,设计关乎如何运作。”恰当的动效正如人的肢体语言一样,将更立体更富有关联的信息传达出去,提高了沟通的效率。缺乏了动效的移动应用,带给人们一种死气沉沉的感觉,所有内容平铺直叙了无生机,即使界面再美,也缺乏一种灵动细腻的气质。

我们意识到,动效已逐渐成为移动设计的标配内容,动效设计能力已经是移动体验设计师的必备技能与核心竞争力之一。为了更好的帮助设计师们了解app动效设计的基本原理、设计原则和制作技巧,我们撰写了这个文档,希望可以带动设计师们在app动效设计方面的成长,为自己的产品创造更加令人惊叹的体验细节。

二、App动效分类和意义

App界面动效形式繁多,根据app动效的作用,我们将其划分成四类:情境(Context)、引导(Orientation)、响应(Response)和情感(Emotive),如图1-1所示:

MotionTheory

图1-1 App动效分类

1、情境:描述当前的位置和环境,使用户了解目前的处境

1)转场过渡 以舒适平滑的方式处理页面或视图之间的逻辑关联,帮助用户熟悉新界面及前后逻辑关系(整体与局部、包含与被包含等),而非粗暴的突然显现。

在设计网页时,依赖信息架构、标签分类站点地图等让用户快速获得所需信息。并依赖视觉焦点的打造,让用户的眼球快速自然的定在视觉焦点附近。但在为移动端设计时,页面空间有限,不能把页面所有导航完全呈现。对于用户来说,很难弄清楚应该在应用的何处集中注意力,也很难弄清当前页面的来源。

通过页面转场动效来缓和界面转换的突兀感,让用户感到愉悦。并且转场动效提示了用户,这一界面从何处来,到哪里去,提供了充分的视觉线索,让用户更好的理解信息。同时,审慎、精心设计的动效能够高效引导用户的视觉注意点,让整体效果循序渐进,避免用户因为布局改变而感到混淆。

转场过渡

图1-2 转场过渡案例说明

2)层级展示 以空间构建等方式表达页面或视图之间的位置关联,展示当前界面所处位置,有助于理解局部与整体的关系。当构造了多层次、三维系统的界面时,特别是扁平设计界面去除了原本拟物界面带给用户的认知,界面中存在元素拥有不同层次时,适当的动效可以帮助用户理清它们之间的位置关系,以动效来构建整个系统的空间感(相邻、连通、叠加等),甚至扩展到理解应用背后更广泛的心智模型。

层级展示

图1-3 层级展示案例说明

2、引导:通过注意力吸引等方式让用户明确可以进行的行动

1)空间扩展 由于移动界面的屏幕空间有限,为了减轻移动界面的信息认知负担,需要将更多的信息进行渐进披露。通过缩放、折叠、翻转、弹出等方式,在必要时拓展更多空间,引导用户了解更多内容。

空间扩展

图1-4 空间扩展案例说明

2)聚焦关注 在移动界面上有数种唤起用户注意的方式,位置布局、视觉强调、视线引导、微妙动效等等。使用动效来聚焦关注,能在保持界面简单清爽的情况下,优雅轻盈的告诉用户有什么地方需要留意或值得探索,吸引用户注意力。它们往往在需要时适时出现,然后消失。

在系统需要进行交互时给与提示,引导用户执行相关下一步操作,确保用户操作的有效性与准确性。

聚焦关注

图1-5 聚焦关注案例说明

3、响应:告知用户正在发生的事情,反映现状并减轻焦虑

1)内容呈现 页面内容是用户获取信息的主要来源,在网页上,一般所有内容都是经过浏览器渲染完成后同时显示出来。

移动端页面能展示的内容偏少,由于用户使用场景的不同,页面上的内容更强调聚焦和引导。此时,所有内容同时出现可能无法帮助用户快速了解内容重点和彼此关系。 通过对页面内容元素进行必要拆解,按照一定逻辑秩序让它们异步出现,利用时差和速率变化形成一定韵律,能够很好的帮助用户感知到页面的布局、层级结构和关键内容,形成良好的自解释性,一定程度上也能够为内容界面带来生气和活力。

内容呈现

图1-6 内容呈现案例说明

2)操作反馈 即时响应用户的操作,以确认操作结果。信息传递的过程中,单向信息容易造成失联,形成沟通不畅,此时,反馈如同你问我答般,对用户的操作予以肯定。

移动端任何交互动作在理想情况下都应该拥有操作反馈,无论是点击、划动、推拉、缩放,每一个动作背后都会激发系统的响应,将其以视觉化或者动效的形式表现,能够很大程度上带给用户操作上的安全感。

用户在移动界面进行交互时引入控制感和沉浸感,帮助用户感知数字界面与真实世界的联系,从而降低认知成本,更熟练的掌握移动应用的使用方法。

操作反馈

图1-7 操作反馈案例说明

4、情感:添加引人入胜的动效细节,唤起情感方面的舒适感受 借助模拟重力、增加惯性、缓入缓出、赋予弹性等方式,提供自然顺畅的个性化动效,很容易调动用户的积极情绪,从而对产品的使用产生好感和依赖。

App动效的意义

在一个理想的交互流程中,app动效能够帮助用户理解当前所处情境(Context),随后引导相关操作(Orientation),并对操作产生即时响应(Response),从而进入新的情境中。交互流即上述过程的不断循环,设计精妙的app动效在逐步迭代和演绎中对用户的情感持续产生影响,从而引发自然连贯的情感体验(Emotive)。

如下图所示:

Motion CORE Model

图1-8 App动效的意义

三、App动效设计指南

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

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

购买请移步天猫>

【译者注】

自计算机诞生开始,人类就一直希望能够以数字方式来模拟真实世界。虚拟现实的概念早在19世纪60年代就已经出现,电影制片人Mort Heilig开发了第一套真正的VR系统Sensorama,只是受限于当时的技术条件,除了简单的3D显示、震动座椅和味觉模拟之外,无法更近一步描绘虚拟体验的终极愿景。译者在近年来的E3、Games Com等专业游戏展会消息中经常接触到虚拟现实技术,对Project Morpheus和Oculus VR等设备在游戏上的应用印象深刻。除了科学与游戏应用之外,虚拟现实也成为交互体验中一种全新的互动媒介,理应在教育、医疗、建筑等传统行业得到更大的发展。

本文作者Matt Sundstrom热衷前瞻研究、绘画和用户体验,就职于美国俄勒冈州波特兰市一家独立的数字创新机构Instrument,该公司专注于多屏间的品牌、产品、活动和交互体验。通过这篇他对虚拟现实设计的经验总结,希望能帮助小伙伴们更加了解这个极富科幻特质和未来魅力的领域。

【正文】
1*CARCqJX-mfkhRnO_ACCn0A

1995年,任天堂公司的“Virtual Boy”游戏机在美国发售,可惜好景不长,1年后即宣布退出市场,当时在我家乡游戏界引起了轩然大波。我弟弟在一次旧货拍卖中用其整个暑假打工的收入换来了一台Virtual Boy,只为投身未来世界的游戏体验。可惜的是,它不仅引起了剧烈的头痛,在使用过后还会给玩家带来长期的红色残影。
1*Z5hgUjKwcwk2A7B2YtgbNA

摘自任天堂Wikia
“两个1X224的线性阵列能够产生3D效果,每个阵列对准一只眼睛,通过振荡镜像让Virtual Boy以混杂图像形式呈现给玩家。3D效果可能导致眼睛受损(实际上,由于它对眼睛存在潜在危害,任天堂呼吁家长们不要让7岁以下的儿童接触Virtual Boy),因此任天堂在Virtual Boy的游戏中都设置了可以每隔15或30分钟让游戏暂停的选项。”

1*wOFJPp3EAgDTcBsIL9A6UA

最终它无法带来身临其境的沉浸体验,只能通过视差形成伪3D效果,2D游戏增强的玩法让所谓的“虚拟现实”一词徒有虚名。

15年后,虚拟现实技术随着Oculus,Samsung Gear VR,Project Morpheus,Google Cardboard,HTC Vibe,OSVR等设备的出现宣告回归。
1*mGWz9YBY5Y2DcWI2wgcAsw
(图)尽管虚拟现实技术已经有了长足进步,但是对虚拟现实体验的思考却刚刚开始

为扁平屏幕设计和为沉浸环境设计,是截然不同的两类挑战。以下是我在Instrument公司进行了一些虚拟现实实验后的收获:
1*hcpzLmpkZZoIdVMgXpYSlA

像人一样思考

人类进化后的20000年里,地球上发生了天翻地覆的变化。
1*2iN1d5KDFFzvG1yZn41r_g

我们从凶险与回报并存的野外,到依赖信号传递的城市中…最终使用了基于图形界面沟通的电脑。
1*08yYyTYjBaLwg2XOzNLeJw

以上都可以看做是自身的一种交互模式:
1*P72hrig0H-cD4q2xUrDXrA
(图)萨凡纳草原

最古老的交互模式是,我们所看到和接触到的一切内容都服从于空间。当前目标近在咫尺,未来摆在我们面前,历史在后方延续。
1*Dok2F1wnRojUzJvZIj9gMw
(图)商店

正如savannah的商店一样,它营造了一种人们能够以更高维密度形式在其中移动的空间,所有物品被限制在空间内的墙上或货架上。
1*8ao0Xi5FhlSIKAvKkkcSgw
(图)抽象

过去的40年,人类见证了数字景象的崛起,它将真实世界概念(如书写、使用日历、在文件夹中储存文档)以用户界面元素的形式纳入抽象的二维平面之中。这种方式允许更高维的信息密度和多任务处理,不足的是这种全新的交互模式需要通过学习掌握,同时在行动决策达成之前面临着更多的认知负荷。

我认为过往这种本能性的认知模式更容易掌握。例如,在虚拟景象中,一侧是深坑,另外一侧是马路,即使没有真正的风险,人们也会自然的选择马路。我们确信大部分人不愿意花时间阅读过多内容,假如我们放置的是一个深坑和一条马路的符号,人们需要时间来阅读和理解这些符号(认知负荷),最终结果是大约一半的掉进坑里,其余的选择马路。
1*XTRa5JYnGlBX0_veqRvLuQ

利用视角

设计师使用尺寸、对比和颜色来表达层级。在虚拟现实中,这些方法依然适用,但略有区别。尺寸取决于用户与内容的距离。
1*yVgXKtvzlI6Su2NDJgaKdg

内容可以被认为是平视显示,反映了距观看者的一组距离。
1*5vkHHsfV9K5q7k7e_0jDVQ

内容也能与环境关联起来,用户看到的内容视角随着他们在环境中移动而变化。
1*OuHAdPXXPa45Z2ALyy1xtw

内容还能悬浮于虚拟世界之中。
1*0WNbD7eGjrknO3bqW5GO0w

若提及环顾周围,设计师习惯在平面视图中观察,而普通人则习惯于转动头部或身体进行观察。

“尽管如此,设计师依旧试图将2D平面的解决方案应用到3D空间中,正如Virtual Boy一样。”

其诸多可知的原因之一为:锥形焦点。

在Cardboard或者Gear VR这样的虚拟现实装置中,单屏被一分为二,分辨率也因此被变为两个区域。人眼集中在这块区域中心时,锥形焦点会快速落下,驶向模糊中心,从而产生一个相当小并且相当低分辨率的区域。
1*mtWG5W_Jsg8JrjqWS3XA4w

有多种办法来克服锥形焦点,使用常见的瓷片菜单时有以下几类方式:
1*-GMbKwQN2A9OUvqw9TLRIA

1、平面式:常见方案 对3D空间来说,界面是平的。无法适用于具备透视效果的文字或图像阅读,因为没有任何空间概念,仅仅像一面墙一样。

2、曲面式:边缘效果更加的方案 内容以曲面呈现的形式围绕用户,瓷片总能对准用户,使得阅读文字或图像更容易。

3、简化内容式:更优方案 内容偏少更佳,即使需要移动来阅读它。

4、环绕式:最佳方案 层次结构能通过与锥形焦点的距离来暗示,次级内容即便不在中心视图上,依旧可以访问。

或许为不同设备采用单独的复杂交互产生的效果更佳。例如,Google Cardboard的屏幕密度相当低,与其试图将复杂和高维的界面引入虚拟现实环境,还不如利用手机先将你带到目的地,然后再进入虚拟现实环境探索。
1*2P-8qLaSgAFQHy2V4n8yqQ

不断演进

技术始终在不断进化,头戴装置会更轻,屏幕密度会更高,我们会拥有更多与虚拟环境互动的方式。如今这些输入方式受限较多,甚至依赖不同平台,但我们可以为它们创造一致的可及性。

可及性(Affordance)是用户体验行业比较常见的一个术语,它指: 物体的感官特征能够直觉性的暗示其功用的情形。(定义来自usabilityfirst.com) 1*r2F7F9q62O-gU1sw9g6eMA

网上能找到可及性定义的简单版本。鼠标掠过文字链接时,箭头光标应该变为手指光标暗示可点击。无论使用鼠标、触控板还是手写笔,掠过一个链接时不会改变可及性,它依旧是手指光标的形式。因为不论何种输入方式,我们都期望表现相同的行为。
1*1UaRjr97fGePBtuMFkbqpw

虚拟现实需要可及性来表明哪些地方可以交互和什么时候会发生交互。这些可及性的感官显示应该随着科技的发展而进化,正如屏幕的可及性一样。如今以视线追踪来辨识用户行为,将来无论通过手势追踪、微手势或者心灵感应等哪种方式,都应该达到同样的目的。

聚焦体验

虚拟现实是沉浸式的体验,设计应该增强用户在虚拟环境中的存在感。

a.避免快速移动,因为它可能造成用户不适。

b.如果有水平(参考)线,确保它处于稳定状态。在虚拟现实中让水平(参考)线出现起伏波动,好比在波浪翻滚的船上,它容易使人眩晕。

c.避免快速或突兀的空间过渡,这样的引导效果较差。

d.避免要求用户过多的移动头部或身体,否则不仅承接效果差,还会让用户使用这类头戴装置时感觉身处无法转身的境地,好比在飞机上一样。

e.谨慎处理2D界面与3D环境的混合,这种变化可能不够自然。

f.保持屏幕上的物体和信息密度处于较低的状况,远低于传统屏幕界面设计,并非所有东西都需要引入视图中。

g.需要时借助真实世界的暗示。

h.明亮的场景容易引起视觉疲劳。

i.不确定时反复测试。

结语

我们体验世界的方式一直处于变化之中,并且会更颠覆的持续变化下去。回顾20年前,现实增强和虚拟现实技术的出现,被认为是与互联网等20世纪的主要范式一样极具影响力。

目前体验设计进入了令人兴奋的阶段,因为它跳出了传统的交互模式,现在所遇到的问题都是全新的挑战。或许我们终将失败,一旦成功,却足以改变我们体验世界的模式。

虚拟现实体验推荐:
Jaunt: Cinematic VR
Oculus Story Studio
Alien Isolation
Doom 2 on the Rift!
Samsung Milk VR

延伸阅读: Landscape and Memory by Simon Schama
The Sword of Damocles
The Rise and Fall and Rise of VR
Rainbows End by Vernor Vinge

原文地址: https://medium.com/backchannel/immersive-design-76499204d5f6

译者: 阿里巴巴1688事业部/无线交互/舒舟