随着CSS3和HTML5的发展,越来越多狂拽炫酷叼炸天的动效在网页设计上遍地开花,根据最新的浏览器市场份额报告,IE6的份额已经降到了5.21%,这简直是一个喜大普奔的消息,做动效可以完全不care低端浏览器的时代已经在向我们招手了。俗话说得好,颜值不够,动效来凑,Web动效已经不仅仅是网页设计的润滑剂了,它的功能更多的体现在了交互逻辑、视觉渲染和创新实践上,上能引人注目,下能潜移默化。

下面将通过经典的黄金圈法则来为大家讲解我们在B2B聚合页——1688首页项目上的动效设计,主要分为三个部分,动效设计的目的、方法和方案。

首先来一发大师金句,迪士尼动画大师乃特维克的毕生经验浓缩成一句话就是“动画的一切皆在于时间点和空间幅度”,动效设计和做动画是一脉相通的,我们不是要做写实主义的动画,而是要通过时间点和空间幅度的设置为用户建立运动的可信度。

在设计开发的过程中,当设计师做好了一套静态页面而且设想出N种有趣的交互动画,再交付前端进行重构还原页面的时候,由于无法提供精确的动态参数,导致沟通和制作的成本增加,而最终的测试demo也差强人意。因此,我们在1688首页项目的动效设计中总结归纳出一套适于设计师表达动效概念的方法和流程。

biaoti1 首先,为什么做动效,在动效设计的初期阶段,我们需要从业务和用户两个方面对对项目本身进行一个需求分析,从中得出动效在其中的作用,业务方面是引导用户,层级信息展示,用户方面是页面过度,改善用户体验,动效设计的目的是为了自然流畅的呈现B类电商网站信息,并且,体现出专业和诚信的气质。 12

biaoti2 接下来,具体到如何做动效,正所谓设计来源于生活,运动过程的定义都是基于我们日常的生活经验的,为了给B类用户制造熟悉感,我们设置了一个动效设计的切入点——B类商务特色动作,并为每一个动作提炼了一个动效方式,包括:

盖章,状态切换不好把控,动作衔接有难度; 未标题-1

交换名片,切换动作可参考; 未标题-2

扫码,科技感过重,应用较难; 未标题-3

包装,3D动作幅度大,过度不自然; 未标题-4

握手,效果单一,可参考; 未标题-5

签名,这个效果是无法应用的; 未标题-6

流水线,一个完整的流水线场景中基本包含页面motion的所有动作,可提炼易发散,同时,我们B类电商承载了从设计师、原料商、生产商、批发商、零售商中各个环节的业务,包含底层的支付物流等等,就是一个宏观的传送带,因此作为B2B业务的聚合页,我们把传送带作为1688首页动效设计的基本动作。 未标题-7

确定好了基本动作之后,我们需要结合页面的交互框架对区块进行一个层次分级,设定节奏,突出重点。从用户看到一个页面的瞬间开始,如果在展示面积相同的情况下,用户的注意力被吸引的情况是:动态>颜色>形状。判断一个区块是否需要动效主要基于以下两点:1.交互上,是否包含隐藏信息;2.视觉上,是否需要辅助渲染。所以,对于1688首页上点击率最高的搜索和隐藏信息最多的类目、banner将会是我们设计的重点。

14

下面我们来具体分析一下刚才确定的三个重点区块的动效设计,对于一般的输入框,需要用户在输入框中产生点击之后才能开始输入操作,在1688首页项目中,我们改进了输入框的方式,设定了一个阈值的时间,让用户鼠标hover到输入框后,停留时间超过阈值则激活输入框,用户可以直接进行输入的操作,减少用户点击,让操作更加流畅。 15

类目区域,共分为三级菜单,我们用次级物体运动来表达这三级菜单之间的关系,附属性质的次级物体运动是伴随着主要物体运动产生的,次级运动相较主要物体运动有一定的延迟,所以我们在类目区域也是通过运动的时间差带来逻辑上的关系,一级菜单牵引出二级菜单,二级菜单牵引出三级菜单。 16

banner的视差滚动效果以及楼层的分屏加载效果是模拟传送带的运动过程,我们把主体看成是受力方,传送带看成是施力方来进行分析。整个运动过程分为三种状态,启动态、中间态、收尾态,根据牛顿第二定律得到物体分别作匀加速、匀速和匀减速直线运动。 17

根据之前的分析,我们可以绘制出物体运动的速度-时间曲线和位移-时间曲线,大家可以看到下面这条曲线就是由上面这条曲线积分得到的,那么问题来了!为什么动效设计要画出这样的运动曲线呢? 18

前端同学可以运用曲线进行运动定义,CSS属性中的transition和animation可指定缓动函数,但不支持全部函数,可通过贝塞尔曲线的绘制达到自定义的运动效果,固定贝塞尔曲线中头、尾两个点,通过这两个点引申出的锚点来确定曲线的弧度,任何运动曲线都可以拆解为一段段的贝塞尔曲线来进行定义。 贝塞尔曲线绘制函数:http://cubic-bezier.com/#.63,0,1,1 19 通过CSS为运动曲线专门设置的VIP属性来确定两个锚点位置,流畅的动效就搞定了

这里再给大家提供一个更加省事儿的办法,SCSS,也就是CSS的进阶版本,还有Javascript可以直接调用缓动函数库,大家或许会对下面这种复杂扭曲的函数有疑惑,其实这些是具有反馈效果的运动曲线。根据我们之前的分析,由于1688首页采用的是内容靠前的设计策略以及简约的视觉风格,所以我们的动效动作一定是“稳、准、狠”,绝不拖泥带水,也绝不喧宾夺主,所以这样比较Q弹的动作是我们极力避免的。其实这些曲线更适合应用在无线端,由于在无线端用户直接使用手指来进行操作,当我们需要表达区块元素的弹性、纸质或者是卡片的材料隐喻时,用反馈效果来表达材料和重力是比较恰当的。 缓动函数速查表:http://easings.net/zh-cn# 20

biaoti3 最终我们会得到一个包含时间点、关键帧、触发条件、运动过程和空间幅度的完整时间轴,清晰的显示出页面区块元素在每一个时间点的样式和样式之间的过度,有了这样的规范输出,麻麻再也不用担心我的动效还原了。具体动效请线上查看:http://www.1688.com/ 其实今天文中提到的技术方案是有一个保质期的,由于技术的迭代迅猛,也不知道这个保质期能够持续多久,但是按照时间轴和关键帧的动效设计思路是不会过期的,迪士尼从白雪公主时期建立的动画设计精髓到了今天的超能陆战队上依然成立,大白的每一个动作设计从本质上来说仍旧是时间点和空间幅度,所以说,作为动效设计师,只要谨记这一点,一个好的动效方案就成功了一半,另外的一半就是结合业务和用户的思考了。 21

最后总结一下动效设计的工作流程,通过对项目需求和架构的综合分析找到动效的切入点,提炼发散出一个关键动作,结合前端的实现框架,确定流程逻辑和运动,反复实践检验得到最优方案,别忘了为用户设置一个惊喜,就大功告成了! 22

过去,视觉设计师被称为美工。其实美工本身没有什么不好,所形容的是一批能对平面,色彩,基调,创意等进行处理的技术人才。可是在设计师出现之后,久而久之,似乎美工一词,成了大多数视觉设计师的痛与阻碍。

视觉设计师们需要得到同行或伙伴的肯定和认同,只有抛弃曾经那些“凭感觉”,“就是这样才好看啊”,“这样感觉会很奇怪”等等这样的主观臆断。因为大部分的人更愿意听你的设计思路是如何的,设计背后的故事又是怎样的。也许,很多时候,许多设计师都会灵光一现,灵感大发,设计出让人震撼的作品,但是却不能保证这种状态的持续,时常会让设计师们遇到瓶颈。因此,我们需要一种流程化的设计方法,以一种有理有据的设计思路,帮助设计师更好的稳固设计质量。本章,就给大家分享一种我们在多个项目中经过课题小组同学共同讨论总结出来的设计方法,如何打动用户的内心,营造触动人心的氛围。

古人云:“动人心者,莫先乎情”,同样的,我们从约翰.奈斯比特的语言中发现:“无论何处都需要高补偿的情感,社会中高技术的越多,我们就越渴望高情感的环境,用设计软性的一面来平衡技术硬的一面。设计作为人的创造性活动,不是摒除激情或者情感,而是要创造一种中性的、能容纳和激起使用者情感的东西,这种东西是一种境界。”

为了编织这种视觉设计师的语言,1688UED组建了人文情怀课题研究小组专门来探讨如何进行“触动人心的设计”, 课题研究的范围从马斯诺需求到各种效应理论以及设计心理学。大家在浩瀚的知识学说中徜徉,并不断碰撞产生了各种的灵感火花,最后得到了一个关于“DesignO2O”的设计思路以及“CORE”的方法模型,同时找到了如何验证我们“触动人心的设计”是否有效的方法。

一、缘起 为什么能触动人心?

1、千丝万缕的两组关键词

在说起这个起因之前,我们先来看以下两组关键词。

图1.1 两组关键词的对比 图1.1 两组关键词的对比

2、祖先的一天

图1.2 祖先靓照 图1.2 祖先靓照

讲一个曾经在一本书上看到过一个关于我们祖先们一天的故事: 说是在很久很久以前,我们的祖先打了一大头猎物,大家都很高兴,于是围着火炉把猎物烤了,闻着很香,于是大家围在一块吃烧烤。酒足饭饱后,看看天色尚早,想干点什么消消食,于是有人捡起一块烧焦的木头在石头上面乱写乱画,绘画就出现了,有人扯着嗓子大叫,音乐也出现了,还有的人在火堆旁摇头晃脑,跳来跳去,舞蹈也出现了…这故事,基本上描述了我们祖先的一天。

在刚才的故事中,看见猎物,抓住烤了,闻着很香,吃着更香,唱首歌,跳支舞,画个画,这都是人的情绪行为。

看见,视觉。 抓住,触觉。 闻着,嗅觉。 吃着,味觉。 唱歌,听觉。 没错,五感。

继续我们的话题…

3、心与脑的关系

看到这段的标题,大家是否能把关系都对接上了,进入正题。

图1.3 心与脑的关系图 图1.3 心与脑的关系图

简单点说,我们的大脑垂体会分泌出激素来调节心跳和呼吸,而心脏推动血液流动给大脑输送氧和营养,使人适应环境的变化,做出相应的情绪和行为。我们接受信息都是通过五感。五感通过神经元把这些碎片传递给大脑,大脑整理了这些碎片又重新通过神经元传递到五感表达出来,这个过程。

从以上案例总结一点:要触动人心,需刺激大脑。

二、揭秘 触动人心链路

刚给大家举了几个案例, 线下还有很多依赖智能电子设备渗入用户生活的公司也都在开发能通过五感来触动用户的产品。有关于嗅觉,触觉,味觉这里就不一一举例了,我们是从事互联网设计行业,因此主要能发挥的还是视觉和听觉。那接下来将给大家带来的并不是那些触动大家内心的设计的案例和解析,而是给大家介绍一种方法,但不是唯一的方式。

把综上所述用一张关系图简要的表示: 图2 大脑行为链路图 图2大脑行为链路图

我们的大脑是个超级存储器,之前也提起过通过五感接收信息。在这个过程中,所有的信息会被大脑识记,并且保存在记忆当中,识记、保存、重现是记忆的主要过程,重现的含义是曾经识记过的事物不在眼前,在其他刺激物的影响下,把他的印象重新呈现出来的过程。说到这里,需要注意的一点是,本章所述的方法都是基于有记忆的人群,如果大脑没有记忆,几乎不可能触动内心。回到刚才,所带记忆的人通过看见了一些事物或者听见了某些信息,和大脑所保存的过去进行了匹配,记忆被唤醒,画面重现。这时,人的大脑已经不知不觉中招了,被刺激了,也是人们口中常说的“想都没想就做了”,“条件反射”等等。以我们自身为例,按照互联网平台用户的行为影响到的就是购买决策,是否在冷静下来之后,回头也会对自己的行为和冲动咬牙切齿呢。

把这种关系与设计结合,这是一种怎样的思路?我们经过多次的碰撞讨论把这样的方式总结为“DesignO2O”(O2O:Offline 2 Online)。很好理解,offline是指线下或过去的场景,甚至包括曾经人物在某个时期发生的事件,把这些还原到我们的设计中,公式简单好记,才能被广泛应用,这也是O2O业务模式的延伸。这种业务模式是将线下的商务机会与互联网结合,让互联网成为线下交易的前台。我们的设计也是一样将线下的事件、人物、场景相连,让他们成为我们的设计灵感之源,链接线下和线上的桥梁,就是我们的设计表现。通过不同的设计师的设计手法会有不一样的结果展现,但是,只要符合了这个公式所描述的对应关系,他们都可以触动人心。当然这个只是其中的一种设计方法,并非是代表所有能触动人心的设计都要这样去做。

这同样印证了一句哲学思想:万事万物都是互相联系的。

听起来似乎觉得很神奇, 我们有很多用这种方式的设计展现在业务当中,增加粘度,趣味。下面来给大家详细解说一下,这种设计方法的思路核心,如何具体的打开思路,运用到设计中。

三、探究 触动人心的设计方法核心

CORE的概述

之前在文章中提到DesignO2O,那这个designO2O的思路核心到底是什么?如何通过这个思路去指导我们完成触动人心的设计呢?其实这个思路核心就是一个叫CORE的设计方法模型,他包含4个阶段,分别是采集(collect)、组织(organize)、反应(reaction)、评估(estimate)。他们彼此间的相互作用形成了一种做触动人心设计的方法,接下来我将对整个模型进行细分拆解来讲述一下每个阶段我们需要做的一些事情。

图3 DesignO2O核心思路 图3 DesignO2O核心思路

……

”本文章发表在《U一点料》中,目前处于新书发行的内容保护期,所以更多内容请大家在实体书中查看。购买请移步天猫

看到这个标题你内心里或许会充满疑惑,我在写这篇文章之前,也曾经有很多疑问。你去问任何一个人,他们都不会推荐使用轮播这种模式。但是轮播本身并不是那么一无是处。 本文将基于真实的数据,针对近期业界对轮播组件的各种争论做个回应,看看大家对它的评论是不是名副其实。我会针对各个观点进行剖析,看看我们的数据与预期是否一致。通过这些内容,我会详细阐述我们的研究发现和研究方法,并给大家一些建议,希望对大家未来在判断何时以及如何使用轮播组件有价值。 之前有很多人不看好轮播这种模式。从NNG的一篇文章开始;真正的转折点是Erik Runyon发表的关于圣母大学网站的一篇详细分析轮播模式的文章“轮播组件用法详解”;在Jared Smith的文章“是否应该使用轮播”中,他建议大家放弃使用轮播组件;Brad Frost也在他的文章“轮播组件”中呼应了这种对轮播的负面评价;紧接着Luke Wroblewski加入了反对派的阵营,他说从目前的数据来看,建议不要使用轮播,他的文章详情见“ 以后绝对不再使用轮播”,(他后来又补充数据说对他的结论有怀疑)。
在Mobify(提供移动建站服务的网站),我们开发用于移动设备的大型电子商务网站。很多情况下,这些网站都有一个轮播组件。我们这样做错了吗?是不是伤害了我们的用户?如果我们停止使用轮播组件,我们的网站是否就会变得更好?这些问题是我和这篇文章的共同作者Peter Maclachlan在审查我们开发的网站时反复问自己的。我和Peter决定做我们自己的研究,而不是盲目追随网上这些反对轮播组件的声音。
自此,我们开始研究那些我们能获取的数据。刚开始,我们充满好奇,我们的数据说明了什么呢?我们的发现令人非常惊喜,并且鼓舞着我们不断深入研究。我们在为期11个月的时间里审查了几个中型到大型的网站。我说的中型到大型网站,是指在过去一年里交易额不少于两千万美金的网站。在这11个月的时间里,我们研究了近750万次轮播组件的交互事件。这篇文章的结论都是基于这些数据所做的分析。

我们为什么要使用轮播组件

轮播组件存在的意义绝对不仅仅是为了在首页显示更多的市场营销信息。因为我们是专注于做无线端设计的,我们最大的顾虑就是要确保在有限的屏幕尺寸和信息的密度之间做好平衡。这意味着,我们总是要在有限的面积里做好水平和垂直方向上的空间利用。我们使用轮播组件可以增强信息的密度,并且不需要用户在查看时滚动页面。 使用情景也是理解轮播组件的一部分。我们的设计团队只是在规避使用轮播组件,而没有向用户提供具体的使用情景。大部分情况下,我们只是在一中情境中使用轮播组件:在商品详情页中展示更多的图片。在商品详情页中,用户知道左右滑动一个轮播组件可以查看更多的商品图片。在一个网站首页的市场营销轮播组件中,用户是没有办法知道下一张图片是什么内容的,也不清楚这里面的信息是否需要去关注。
反对轮播组件的理由
目前反对使用轮播组件的理由主要有以下几个方面:

    1、用户不会点击轮播组件中的内容;
    2、如果用户要点击轮播组件中的内容,他们只会点第一个;
    3、轮播组件不易理解;
    4、自动轮播对用户不友好;

针对前两条,我们将用我们自己的数据和Erik Runyon文中的数据作比较。最后两点更多的是定性的结论,我会针对性的剖析。

猜想一、用户不会使用轮播组件
大家的争议
这个猜想基于Erik Runyon文章中展现的圣母大学网站数据。只有1.07%的访问者点击了网站的Banner轮播图。只是查看Banner无法作为交互行为被记录,只有产生点击行为的用户才算数。为了反驳这一猜想,需要有数据能够显示实际上发生交互行为的人数高于1.07%才行。
我们的结论
用户对产品图片轮播产生交互行为的比例:72%的用户至少切换轮播图一次;23%的用户会放大图片。如果你看我们的研究结果,具体的以放大操作为例,你会发现23%的用户直接进行图片的放大以获得更多的信息。如果你更关心哪些用户有切换轮播图的行为,数据显示高达72%的用户直接产生了操作行为。下文中将会展示我们的数据是如果获取的,请留意“发现”部分。
猜想二、用户只对第一张轮播图感兴趣
大家的争议
Erik提到的点击了轮播图的1.07%的用户中,有89.1%的人点击了第一张轮播图。并且,我们猜测如果这个轮播组件是有效的,那么随着轮播图数量的不断增加,点击分布将会有一个合理的下降趋势。Erik的数据显示,在第二个位置的轮播图只有整个点击数据的3.1%。更客观地来看,圣母大学网站中3,755,297位访客中只有1,234人点击了第二个位置上的轮播图。第二个位置之后的轮播图的点击数据也符合我们预期的落差。我们如果要反驳这个猜想,那么就要有数据显示,对第二个位置上的轮播图有交互行为的用户比例高于3.1%。
我们的结论 我们的数据显示,和第二个位置上的产品图片轮播有交互行为的用户占比为15.7%。至少64%的用户从第二个位置的产品图切换到了第三个位置的产品图。用户切换轮播图有一个线性的变化规律。不同的轮播图切换方式会导致不同的数据结果。所有的数据都表明用户从当前的轮播图切换到其他轮播图的比例较高。和第一个位置上的轮播图有交互的用户中,有64%的人和第二个位置上的轮播图也产生了交互。 圣母大学的数据只是包含了用户的点击,而不是全部交互行为。为了确保我们的数据更有说服力,我们也会看产生直接交互行为的数据。对于我们的产品图轮播组件来说,那就是用户的放大操作。数据显示,有23%的用户产生了放大产品图的行为,其中54.1%的人放大的是第一个位置的产品图。所有的放大行为中,有15.7%发生在第二个位置的产品图。 这个图和Erik的数据很相似:第一个位置的轮播图占据了绝大多数交互行为。然而,我们的数据中随着轮播图位置而产生的数据衰减趋势更为合理;45.9%的直接交互行为发生在第一个位置之外的轮播图上。这就意味着,接近一半的直接交互行为产生在第一个位置的轮播图之外。 提示:关于这个数据的来源,详情请查看下文中“发现”部分。
猜想三、轮播组件不属于无障碍设计
接下来的问题是不好的,但是易于解释。这个争议整体上没有否定轮播组件,只是对于当前用法的质疑。轮播组件本身并没有所谓的无障碍问题。当然,我们在应用轮播组件的时候,可能存在设计上对无障碍的考虑。 这一点,我不认为是轮播组件本身的问题,但是当你决定要用轮播组件的时候,你必须要考虑。下一个版本中,我们一定会让我们的轮播组件变成一个无障碍的插件。这不是关于轮播组件有效性争议的一部分,所以这里我们就不做更多论述了。轮播组件本身不算是无障碍的,但是这并不能说明我们将来在应用的时候做不到无障碍。
猜想四、轮播组件的自动轮播对用户不友好
这个争议是说能自动轮播的轮播组件,想要去点击的用户会有障碍。我们完全同意这种观点。如果你想要用轮播组件,一定要避免使用自动轮播。如果你需要更多的理由,请看这篇Brad Frost的文章。 关于这个问题的可以阅读Jakob Nielsen的文章”用户不喜欢自动轮播的轮播组件以及手风琴组件”,没有那个轮播组件我们设计成自动轮播的。 如果你不得不使用自动轮播,那么在用户准备要产生交互行为的时候,请停止自动轮播。 当用户想要点击一个轮播图的时候,因为自动轮播到下一张,导致用户点击错误,这种体验非常糟糕。在PC端,这意味着当用户的光标Hover到轮播图的时候,停止自动轮播。在移动端,这意味着当用户准备触摸的时就停止自动轮播。自动轮播不友好。如果你要使用轮播组件,请不要让它自动轮播。
发现
提醒:这一部分主要是揭秘我们是如何做上述研究,数据是如何获取的。如果你对此感兴趣,请继续往下读,如果不感兴趣,请跳过这一部分。
研究方法及情景 这些数据来源于对几个中型到大型电子商务网站长达11个月的分析。在此期间,我们抽样了大约750万个轮播组件的交互事件。我们遵循隐私保护协议,没有保留任何个人信息。
为了针对上述的前两个猜想,我们的数据主要着眼于以下两点:
1、用户与轮播组件产生交互的频率;
2、用户与轮播组件中第一个位置之外的图片产生交互的频率;
定义交互方式
在研究中,我们跟踪了轮播图组件中的四种交互方式: 1、智能手机中,用左右滑动的手势切换轮播图; 2、单击轮播图组件中的箭头,每次切换一张图; 3、单击轮播图组件底部的缩略图切换; 4、单击轮播图中当前的图片,放大至全屏查看;

为了和圣母大学的数据相对应,我们选择了第四种交互方式,单击放大,这个操作和点击比较类似。两种情况下,用户都是对当前的轮播图比较感兴趣,并且希望了解更多内容。补充另外一点,我们关注的交互方式是指那些最核心的交互,不包含那些无法触发交互事件的操作。没有导致轮播图切换的意外滑动也不算是能触发交互事件的交互。

结论

1.各种交互方式的使用占比 我们首先研究的是用户使用手机中轮播图组件的频率,我们是通过独立的交互事件来看这一现象。这里所说的独立交互事件,是指用户通过上述的交互方式和轮播图组件的首次交互行为。如果一个用户点击了5个轮播图的缩略图,那么我们计算的时候还是只算一个独立的交互事件。下文中我们将更详尽的阐述独立交互事件。数据显示,一个页面中大约72%的用户以各种方式对轮播图进行了操作。缩略图是最清晰地,能够提前预知内容的交互方式:55%的用户至少点击一个缩略图。

1a.各种交互方式的占比 我们的数据表明,缩略图是最受用户欢迎的交互方式。事实上,缩略图的使用率是其他类型的轮播图切换方式的两倍,受欢迎程度比箭头和左右滑动加起来还要高。 放大操作是用户进行的操作中频次仅次于点击缩略图的操作。放大和左右滑动的共性是,可以出发操作的区域都比较大,几乎是点击轮播图的任何位置都可以触发。我们猜想用户的放大操作中又不部分可能是误操作。话虽这么说,放大操作仍然是用户目的性比较强的一个操作,所以产生意外操作的概率不高。大约23%的访客进行了放大操作。左右滑动是用户使用率最低的操作。这一点强有力的说明,给用户提供一个清晰的控制系统有利于引导用户进行操作。箭头和左右滑动操作都是为了切换到下一张轮播图。如果我们把这两种交互方式整合在一起,他们的使用率和缩略图比较接近。

2.所有类型的操作 总体上看,每个轮播图平均有2.4次交互事件。这表明与轮播图产生交互的72%的访客中,产生多次交互行为是很正常的。

2a.各种类型的交互方式操作次数占比(非独立) 点击缩略图的用户中更倾向于使用缩略图而不是其他交互方式,平均在一个轮播图中点击6张缩略图。 左右滑动和点击箭头进行操作的用户有近似的操作频率:平均数分别是3.5和3.9次。放大操作的交互次数较少,这表明用户只有在对某张产品图非常感兴趣的情况下才会放大。 操作缩略图的用户拥有最高的点击次数,这说明略缩图的交互方式比箭头和左右滑动有更高的用户参与度。探索这一层次的参与度所导致的额外转化,比如“加入购物车”将会是件有趣的事情。如果结合箭头和左右滑动两种交互方式来看,数据和我们分析的独立交互方式比较接近,前后移动(滑动或箭头操作)是轮播图中最普遍的交互方式。

3.交互频次衰减率

从我们统计到的数据,可以画出用户每次操作时之后再次操作的概率曲线。在轮播图切换的案例中,这就是说在用户从第一张轮播图切换到第二张轮播图之后,再从第二张轮播图切换到第三张轮播图。 在直接交互的案例中,这就是说点击放大第一张轮播图之后再去点击放大其他的轮播图。我们画出了各种不同交互方式下的曲线:缩略图、箭头、滑动、放大。

3a.缩略图

每一张被点击过的缩略图,用户有大约69%的可能性会继续点击其他缩略图。从下图中的指数衰减曲线可以更精确的看出这一变化趋势。尽管用户点击缩略图可以有很多可能的顺序,但是大部分的缩略图用户还是按照轮播图中默认给定顺序查看。

3b.箭头

对于每个被点击的箭头,我们发现用一个接近线性的衰减曲线来描述是比较准确的。在这种线性衰减中,用户有大约76%的可能性会会再次点击这个箭头来查看下一张轮播图。

3c.左右滑动

左右滑动的衰减也是线性的,用户有64%的可能性会再次滑动。下图是一个更精准的指数变化趋势图。 3d.放大 放大操作的规律遵循幂定律,线性的变化不能准确描述这一趋势,下图的函数能够比较真实的反映其趋势。

一些思考

营销类轮播图 VS 图片轮播

这是我们在用我们的数据和Erik统计的圣母大学的数据作比较时发现的问题。我们用的轮播图类型不同。我认为这个问题并不影响我们的研究结论。这两种轮播图或许在视觉样式上不相同,但是我们的研究说明他们的基本模式是成功的。我们这项研究的目的是为了验证这种水平滚动的多页轮播图是不是有缺陷。从数据来看,并没有明显的缺陷。圣母大学轮播图的问题可能不在轮播图组件本身,而是设计问题。

用户对营销Banner的认知本身就比较疑惑。这类轮播Banner可能根本就不能给用户提供有效信息。有很多的原因会导致轮播Banner的无效,以至于大家认为这个UI模式本身就有问题。我们的网站有时也会使用营销类轮播Banner。接下来我们将会用我们的数据和圣母大学网站的数据作一个很有意思的比较。

Luke Wroblewski在Google的一次演讲中提到Amazon UX经理PJ McCormick的数据。PJ展示了Amazon使用营销Banner轮播图组件的一些积极乐观的数据。Luke认为目前的营销轮播组件最大的设计问题是控制轮播的部分不够明确。下图中,Amazon的轮播图组件设计明确的将控制轮播的部分单独出来,这样做就很好地回避了控制部分不够明确的问题。

手机端交互 VS PC端交互

我们的轮播组件只在手机端有。圣母大学的网站只在PC端有轮播组件。用户在手机端的交互要比PC端频繁。这有可能是因为手机端有滑动操作,也可能是因为PC端用鼠标操作小控件比较难。还有可能是由于轮播组件原本就是更适合手机上实用的一种模式。

轮播组件成功应用的标准 我们这里说的轮播组件成功应用的标准和Erik的标准不同。Erik的更在意用户是否通过轮播图点击到了里面的内容,重点看这个转化率。我们的标准是看用户是否有查看更多的意图,是否看了所有产品图片。前者的标准显然更高,要求用户点击打开新的页面。这就是为什么圣母大学网站中的轮播组件数据相对于我们的数据更低。

大学的网站VS电子商务网站 我们拿圣母大学的网站和我们的网站作比较,有一个局限性,那就是圣母大学的网站用户和我们的网站用户使用情景不同,两个网站或许没有可比性。电子商务网站用户的目标是发现更多关于产品的信息以便于做出购买决策。大学网站的用户是为了学习或者找到关于大学的一个具体信息。

对未来的一些思考

这一次的数据分析使我明白了,对于轮播组件,我们还有很多研究工作要做。下面的这些内容使我希望自己将来可以进一步研究,也希望看到其他同行可以针对此进行一些研究: 1、针对不同类型的轮播组件做对比研究。这将有助于研究我们的营销类轮播组件和 Erik Runyon的数据有何不同。 2、衡量交互方式是如何影响用户的操作行为趋势。如果他们操作的是一个产品图片集合,他们是更愿意还是更不意愿使用加入购物车呢? 3、我希望知道是否有办法衡量手机端、PAD端、PC端用户在轮播组件的交互方式的差异。不幸的是,我们不做PC端的站点,所以我们缺乏PC端的数据。我们期望做直接的对比,而不仅仅是从已知数据去做推测。 4、数据显示,在手机端,滑动是最低频的操作。我认为滑动操作在手机上被其他交互方式弱化了,或许也是因为在PC端,用户对滑动操作还没有什么认知。通过提供额外的控件,用户可以很明确的获得操作轮播组件的交互方式,因此,他们更愿意选择这样的交互方式。假如移除了轮播组件中其他的可操作控件,那么滑动的交互方式是否会增加?

结论

这篇文章是在彻底调查Mobify为什么以及如何使用我们提供的轮播组件,构建自己的网站。不同类型的轮播组件之间差别很大。给用户提供了额外的上下文情景之后,不用迫使用户做滚动操作,他们就很乐意使用轮播了。 目前关于轮播组件的数据都是关于市场营销Banner的。这些数据都说明了一点,用户对轮播组件中的内容很少产生交互。同时也说明了,用户切换轮播组件中的内容,翻到下一张轮播图的概率非常低。当然,这些数据也证明了一些普适性的观点:轮播组件不易于理解,自动轮播不友好。 我们的数据和Erik Runyon提供的关于圣母大学的数据共性比较少。用户在我们的网站上交互行为更多。相对于圣母大学网站的用户数据,我们的用户对当前轮播图之外的内容有更高的交互行为比率。产生这些差异是是有很多原因的,这也是我们想在总结的环节去探讨的。不同的的轮播组件形式适用于不同的产品目标。 对我而言,这就是本文最大的结论。 轮播组件有很多的形状和尺寸。有一些很有效,有一些效果并不好。在盲目的批判之前,我们应该针对不同的情况收集更为丰富的数据,来充分了解真实的状况。Erik的研究结果认为,首页的市场营销轮播效果不好也是事实。用户不知道能从轮播组件的内容中获取到什么信息,因此,他们也不想去操作。如果你能够很清晰的告诉用户你将会获得什么信息,这些信息对你有什么用,那么,用户肯定也乐意去做更多的操作。

那么,你到底会不会用轮播组件呢?

不要仅仅是为了在有限的屏幕空间展示更多内容而去用轮播组件。轮播组件主要是用于为用户提供特定情境下更多的内容。在手机端,当横向的屏幕空间有限,内容彼此有关联性,并且这个内容对用户有意义的时候通常会用轮播组件。 当内容根本就无趣或对用户无意义时不要用轮播组件。第一张展示给用户的轮播图一定要能传达出其他剩余轮播图将要给用户传递的内容。用户从当前轮播图切换到其他轮播图的时候必然是因为这样可以获得更多有用的信息。轮播的内容要有吸引力,这样才能保障轮播的有效性。如果用户对你的轮播不感兴趣,这不一定是是轮播组件本身的问题。 不要为了让用户看到你要展示的全部的容而使用轮播。即使你的轮播是有效的,用户也不会查看所有的内容。第一个展示的轮播内容应该是最重要的,所有的轮播图应该按照重要性的顺序展示。如果查看多个内容很重要,但是这不是必要的操作,那么我推荐使用缩略图轮播的方式。 这个问题并没有唯一的答案。在某些情况下,与市场营销Banner轮播一样,答案是NO。在其他情况下,与产品轮播图一样,答案是YES。在各种不同的设计模式下,如果你要问“我是不是应该用轮播组件”,这的确有一个正确的回答:如果这适合你的用户就是对的。

原文地址:[http://www.smashingmagazine.com/2015/02/09/carousel-usage-exploration-on-mobile-e-commerce-websites] 原文作者:Kyle Peatt

ztsj_img1 开战之前先鼓舞一下士气:字体设计就像一场未知的战役,需要我们去探求以及耐下心来反复琢磨与调整,只有这样才能够创造出富有个性的文字,从而在这场战役中展露头脚。txt1字体的外形有着一段长期的演变过程,到现在已形成固定的模式,但随着人类文化发展到一定程度,常规的字体显得越来越呆板,然而打破常规,从灵活多变的角度出发将字体变形,赋予它新的含义与活力,已成为现代设计的方向之一。 与此同时,我们进行字体设计最主要目的是为了将准确清晰的信息传递给用户,因此字体设计非常关键的一点就是要符合主题的要求,与主题内容达成一致,不能相互脱离,更不能相互冲突,如果主题确定完毕,接着就可以考虑字体的美感了,也就是使字体变得更富表现力和感染力,不仅仅要把主题传递给用户,而且还要感动用户,唤起用户美的感受,所以将字体进行改造才是硬道理。 在这里我将会把字体设计的嫁接技术分享给大家,包学包会,如有照顾不周的,还请海涵… 嘿嘿,废话不多说,那我就开始班门弄斧啦!

开战开始前,先来个抛砖引玉。 txt2 移花接木是个比较委婉的说法,直白一点就是嫁接,把一种植物的枝干嫁接到另一种植物枝干上边。 生活中的仙人球(顶部各种颜色的球体)和杜鹃花(几种颜色的花朵)都是常见的例子。 ztsj_img2 txt3 植物枝干嫁接和字体比划嫁接目的都是为了使其变的独具特色,并且都是从a嫁接到b,因此其原理也是一样一样的。 ztsj_img3 txt4 字体嫁接首先要了解它的结构和组合形式,也就是笔划的来龙去脉,嫁接的主要部位一般在文字笔划的开始和结尾处,这样字体会比较符合章法上的逻辑,并且也会使其显得更有张力,还有中间区域也可稍加修饰,这个由字形而定。 拿书法字体“能”字举个例子,举例之前再发个牢骚,很多同学问我为啥手写书法和专题海报中的书法不同,其实我们常用的类似书法风韵的字体并非现实中真正意义上的书法,真正意义上的书法是有章可循的,我们用的字体是经过改造的,只是感觉像而已,目的是为了使其更加有张力和感染力。我去,又说了这么多,请看例子吧。相信这个示意图大家一看便懂。 ztsj_img4 ztsj_img5. ztsj_img6 上边的书法字体是RiWenMaoBi体,本身是一个比较美观的字体,稍微经过嫁接就可变得具有冲击力,还有很多同学会问我比较喜欢用啥样的笔触,我一般会用AI格式的素材笔触(墨迹)或者将书法字体转换为形状后截取的笔触,如果条件允许也可以自己手工绘制笔触,至于笔触笔刷,这玩意儿吗!相信哥,确实不好用。 txt5 接下来我把日常工作中做过的案例给大家分析一下,第一个小案例是团队趣味运动会暗黑篇的一个字体设计,字体的原形是造字工房的朗宋体,这家的字体是禁止商用的因此必须经过变形后才能使用,最好变的连它亲爹也不认识了,哈哈,并且字体看起来非常平淡,又跟暗黑风格相差甚远,这就促使了我们进行字体改造的欲望,嘿嘿…嫁接之前还有一段变形的过程哦! ztsj_img7 ztsj_img8 ztsj_img9 ztsj_img10 ztsj_img11 ztsj_img12ztsj_img13 ztsj_img14 ztsj_img15 这个案例并不是一个纯粹的嫁接,之前会有一些变形的过程,不过要使字体设计达到一定的深度,必须要经历一翻周折,只有经过思考和不断调整后的字体才会更加灵动。 第二个案例是大促启动页的字体设计,这个字体嫁接相对上个案例来说会更纯粹更简单一些,为什么要进行字体嫁接,因为作为启动页在短短的两秒钟里要想给用户留下深刻印象,必须在原字体基础上,进行改造,使字体变的更加有张力,同时给用户创造一种紧迫感,从而勾起用户抓紧抢购的欲望。 ztsj_img16 ztsj_img17 ztsj_img18 ztsj_img19 ztsj_img20 哈哈,就先说到这里吧,当然现在关于字体设计的话题非常多,并且设计师思考的纬度以及切入点各不相同,因此我的观点也并非绝对,只是希望能够给大家带来一点帮助,如有不到之处,请尽管拍砖。

战役才刚刚开始,我时刻准备着,等待下一场的战斗。 img21

【译者注】本文是设计师Golden Krishna新书《The Best Interface is No Interface》中的部分节选,探讨了“屏幕外的用户体验”相关内容。清楚记得2013年UXPA上,Josh Clark的演讲《Design out of the Screen》也是类似主题,移动设计并非只与线框图、布局、切图、设备适配等内容相关,借助设备的传感器进行屏幕外的设计更加重要,精彩的观点和无数生动案例让我印象颇深。如今的移动用户体验设计师们,包括我自己,痴迷在数字信息框架、界面设计模式及丰富流畅的动效之中,这篇文章的及时出现,为定义移动用户体验点亮了新方向。作为用户体验的缔造者,设计师应该避免局限于屏幕中埋头创作数字输出物,而是从对用户痛点的切实理解出发,结合工业设计、产品设计与界面设计等设计方法的优缺点,充分利用现有技术的革新,跳出固有思维框架,才能更好的打造用户真正喜爱的体验。让我们随正文开始逐步学习Golden Krishna的观点跟思路吧。

设想在不考虑触控系统且不涉及屏幕的前提下,利用典型流程,设计一些不必从兜里掏出手机就能发挥作用的移动应用会是怎样的情形呢?

“Charles意识到自己的生命中充斥着各种移动应用,他厌倦了打开它们做着平淡无奇的事情。如果能跟朋友面对面的畅谈,而不是做低头族玩着各自的手机,那肯定很棒。他希望借助最新的技术帮助自己摆脱移动设备的束缚,也想知道如今强大的手机能力是否可以让生活更轻松,而不是疲于应付屏幕上的各种应用。”

多么熟悉而美妙的开场。正如定性和定量研究、历史典故与主题采访,它能帮助体验设计师们挖掘一组既定目标客户的独特问题。然后,以屏幕上的一张草图作为完成以下目标的常规出发点:

1、设计尽可能优雅的方案; 2、打造独一无二的数字产品; 3、定期有效。

screen_goldenkrishna 图1.移动应用设计师的典型思路

这绝非易事。大多设计师往往拘泥于屏幕进行各种折腾,而忽略了对用户典型路径的思考。

受限于像素的困扰

从屏幕画布中创造别具风格的优秀体验不难,但给出基于屏幕的方案面临着先天的挑战。从口袋或钱包里掏出手机,解锁屏幕,找到并启动应用,输入账户,打开菜单,寻找目标,以及应付移动操作系统中的其它设置…这样无法被称为一个优雅的体验吧。

使用汉堡菜单、无衬线体视觉风、视差滚动、顺应流行设计趋势、添加极尽绚丽的动效,尽管很多应用被包装的很现代,但除了依葫芦画瓢之外,缺乏让人为之振奋的地方,还是没有脱颖而出的体验。

buns_goldenkrishna 图2.使用性感圆角矩形组成的汉堡菜单,包含了你需要的所有内容

这些应用大多带来了无休止的消息推送和震动提示,令人懊恼。KPCB调查发现,人们平均每天要检查手机150次左右。在《时代》杂志发起的一项投票中,四分之一的用户每30分钟查看一次手机,五分之一的用户每10分钟查看一次。更何况“幻想震动症候群&铃声幻听(在手机并未有消息和震动时误认为有)”已经影响超过90%的大学生。

另一种观点

考虑另外一种限制:手机揣兜里时。

Moves

上图意味着以不掏出手机为目标的截然不同解决方案。让应用在兜里工作的方式是重图形界面时代后期相对比较容易实现的。这是被弃用的Moves应用图标,但却通过拟物化的方式揭示了下一代移动应用的方向:在兜里就可以完美工作。

想象不需要消息推送和震动提示的应用,其主体体验已不局限在基于屏幕的数字界面了。在用户最看重的朋友、家庭和时间等美好事物面前,它能够悄悄的取悦并服务用户。它利用用户口袋里强大的计算优势,而不是三十年以来基于“窗口、图标、菜单和光标”的图形用户界面,允许手机内置的传感器和无线电技术帮助我们实现目标。

一旦掌握了这种独特的思路,未来拥有了更多的可能。

一家从事无钥匙启动技术名的公司叫Lockitron,它拥有一个从既定旧思维转型成功的团队。华尔街日报曾报道说,英国保险公司的调查发现,英国成年人平均每天有9次找不着物品,其中最令人沮丧的就是找不到公寓大门钥匙。Lockitron正是瞄准解决此类问题,他们宣称可以做到“使用手机打开房门”。

听起来令人销魂,然而却需要更换特殊的插销。初始的解决方案局限在手机屏幕上,要求用户每天进行繁琐的操作,基于屏幕的思路并不比传统的门锁搭配钥匙方便。用户需要按以下步骤完成目标:

  1. 走到公寓门前;
  2. 拿出智能手机;
  3. 点击电源唤醒手机;
  4. 滑动解锁;
  5. 输入密码;
  6. 退出上次使用的应用;
  7. 退出上次打开的应用文件夹;
  8. 在几个屏幕的应用堆中挑选目标应用;
  9. 点击启动应用;
  10. 等待应用加载;
  11. 点击应用里的“开门”按钮;
  12. 打开公寓大门。

screenbased_goldenkrishna

一年之后,Lockitron团队将整个方案以全新的体验方式进行了重设计。

首要的变化就是他们去掉了定制的插销,而是在客户已有的门锁上添加一个锁套。

更让人钦佩的是,他们考虑了客户屏幕之外的所处环境,并不需要用户掏出手机。该应用依然需要在智能手机上下载和安装,不过一旦设置完毕,就不必再次掏出手机使用了。

借助蓝牙技术,第二代Lockitron应用帮助手机直接与插销进行感应,无需外部数字交互过程。所以当客户站在公寓门前时,Lockitron很方便的将他们领入家中,而不再像之前那样,需要进行无数不够顺畅的点击操作。他们的应用通过简化开锁流程更好的满足了客户的需求,如下所示:

  1. 走到公寓门前;
  2. 打开公寓大门。

screenless_goldenkrishna

结果第二代的Lockitron在众筹网站Kickstarter上,从潜在客户中募集到了220万美元,对一家门锁公司来说太赞了,不是吗?

comparison_goldenkrishna

后续方向

考虑屏幕外的设计并非适合任何问题,但是一旦找到机会,它就能以无法预见的方式愉悦用户。在设计你的下一款应用时考虑一下4条tip吧,它们的原则都是“基于典型流程而非屏幕”:

  1. 从理解用户的典型流程开始。 在用户可能进行任务或遭遇问题的真实环境下观察他们的行为,这能帮助我们基于典型用户流程设计系统,以真实世界的设定作为设计限制(而不是虚拟像素空间)。

  2. 寻找我们可以解决问题的触发器。 正如站在公寓门前就可以开锁的案例,通过了解用户典型流程,我们或许能发现一些更简单的方案来解决问题。在提供更复杂的解决方案时,需要对触发器进行组合,才能确保系统执行必要的动作。比方说,只有对用户所处情境的当前时间、星期几、位置及手机是否激活等信息进行合理识别,手机或许才可以大胆的认为用户正在休息,并自动设置在此之后8小时的闹铃。

  3. 设计前更多的熟悉智能手机技术,而不只是屏幕像素与尺寸。 智能手机技术发展迅速,作为设计师,我们必须了解最新手机端的传感器技术,无线电和其它机器输入手段。大家可以参考这份文档

  4. 适应物理体验的可用性模式。 Apple,Google和Microsoft等公司都在普及低耗能数字模式,例如自动移门、自动扶梯和电梯,它们均以取自真实物理世界的可及性见长,在缺少数字界面的情况下帮助人们很自然的学会使用。开始留意并收集优秀工业设计的精彩案例吧。

学习另辟蹊径的思维方式、异类方法,以及了解如何设计科技方案的新思路,可以阅读我的《The Best Interface is No Interface》

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

原文地址: http://www.uxbooth.com/articles/back-pocket-apps-lets-reconsider-wireframe/

作者介绍: Golden Krishna,出道于旧金山著名交互设计咨询机构Cooper公司,著有《The Best Interface is No Interface》,曾就职于三星、Zappos的创新实验室,专注于未来科技创新。

【译者注】作为一个移动界面设计师,如果你已经细细读过Material Design的设计指引,那么这篇文章是一篇很好的设计案例。如果你还没有读过,那这篇文章一定是个最容易最生动的起点,以小窥大得帮助你进入Material Design的世界。

大家知道,google最近发布了Android的Lollipop系统,系统的一个重大改动是引入了一种新的视觉语言:Material Design。随着新系统的发布,安卓也发布了一个跨平台的视觉、动效、交互设计的全面指引。10月7日,Google的Material Design体验团队组织了一个workshop,跟第三方app团队分享了一些设计见解和小技巧,来指导他们在Android平台的设计。

在我看来,Android的这次改进,是在对的方向上又迈进了实实在在的一步。这个新系统目前已经拥有足够的一致性和灵活性,足以兼容任何新app的设计。所以呢,我在回来之后也重新回到我feedly的设计稿,尝试将feedly的界面根据Material Design的设计指引,做一次重新设计的尝试。

这次尝试,我的主要目的是创造一个完全根据Google的Material Design原则优化的全新版本。这个版本可以指引设计团队的未来设计。同时,我们还可以选用其中的一些设计点,立即落地并发布在以后的版本中。这次尝试的第二个目的,是为feedly获得一些用户反馈。所以如果你有任何建议,请留下些评论。

这篇文章里,不仅有这次重新设计的结果,也讲述了过程中的设计思考。

好了,进入正题,让我们马上开始Material Design的探索。

总览

在这次重新设计中,我着重设计feedly的几个主要界面。下图是设计前(上排)和设计后(下排)的对比图。

material design_01

Material Design的设计指引要是全面描述的话,会太繁杂。所以在这里我提取出四个核心设计要点,这四个核心要点也是我用来重新设计的主要依据。

一、有形的界面(Tangible Interfaces)

Material Design 设计原则

“在material design中,app里的每个像素都被呈现在一张纸(a sheet of paper)上。这张纸有单一的背景颜色,并且根据不同的环境可以被随意缩放。一个典型的界面排版,可能由好几张不同大小的纸张的重叠构成。”

设计原则在feedly的运用

Feedly原有的界面已经在运用类似的纸张隐喻,我们的主要设计元素是一叠叠的卡片,每个卡片上都有文章列表或文章。上滑卡片,下一张卡片就会被显示出来。这种隐喻正好和Material Design可以完美契合。

Feedly的导航位于左侧的面板上,面板可以被滑出,盖在那叠卡片上。Feedly的“发现”界面也是同样逻辑,只是位于右侧。

material design_02

material design_03

二、让设计更像印刷品

Material Design 设计原则

“印刷品设计的基本元素包括字体排印、网格、间隙、尺寸、颜色和图像的运用方式。这些元素的意义远不仅仅是好看而已,他们一起能创造层次、制造意义及带来视觉焦点。”

设计原则在feedly的运用

8点网格

Google提供了一些很好的资源,来帮助设计师在设计app的时候,能以一种保有一致性的方式来缩放和安排视觉元素。但是你仍然需要了解这背后的总体网格系统。虽然这是一个8点的网格系统,Android常常将边距设置为16点。除了在各个界面贯彻网格系统,我还将我们的杂志视图页面边距设置成了16点(2×8)宽,将缩略图设置为96点(12×8)宽。

material design_04

颜色和图像

Google推荐在工具栏和状态栏使用app的主色(主色一般是品牌的主色调)。但因为feedly是一个阅读应用,如果在这些区域运用我们的亮绿色,会对视线造成强烈的干扰,打扰用户对实际内容的阅读。因此,我选择在这些区域运用浅灰色,减少对内容的打扰。

在左边栏中,我设计了一个运用亮绿主色的顶栏,顶栏用来突出显示当日的热点话题。这种方式即强调了关键信息,又变现了品牌色,我对这种方式还比较满意。

图像也是设计中非常重要的元素。在杂志视图中,我用了全出血尺寸的图像来呈现需要深度阅读的文章。在发现界面中选中某话题时,也运用了全出血的图片作为界面头部。

material design_05

三、有意义的转场

Material Design 设计原则

“有时候,用户会搞不清楚需要关注界面的哪部分,或在一个元素从A位置变换到B位置的时候感到迷惑。通过经过精心编排的动效设计,可以在app使用过程中有效地引导用户的注意力和视觉焦点,避免当布局变化或元素重新排布时引起的迷惑,同时提升整体的体验美感。动效设计应该满足功能性的目标,不仅仅是炫技。”

设计原则在feedly的运用

打开文章和关闭文章,是feedly中最重要的转场。在这个过程中,用户在文章的列表和整篇文章内容中切换。制作这个转场动效时,我参考了Material Design设计原则中推荐的3个主要设计指引。

表面的反馈

当用户点击文章预览时,我运用了点击波纹效果来提供即时反馈。波纹效果会扩大充满整个文章预览元素。同样,当用户关闭文章时,点击波纹效果也会在顶栏中出现。

视觉连续

在杂志视图中的预览图片,会在界面转换到文章视图的过程中放大,并移动到相应的位置。通过这样的转场,用户能完美感知到他所点击的元素和最终界面元素之间的关系。但这其中有一个挑战:有时在预览视图中的图片并不出现在文章的首屏,而是好几屏之后才会看到。这时,我们不得不在转场时将文章内容渐显,而将缩略图渐隐来过渡。

有形的表面

这很可能是Material Design中最重要的要素。根据设计指引,我们需要将内容处理为像打印在有形表面上一般。当用户点击了列表中的文章预览区域时,这个模块会向上升起,创造出属于这篇文章的一个新的平面。同时考虑到视觉的连续,这个新平面会放大,使其成为界面中最主要的一个面。在这个过程中,文章的内容也渐显出现。

综合这些设计指引,我们得到的最终动效是:

material-design_06_new

根据相同的方式,我还设计了在发现面板中选中某个话题的动效:

material-design_07_new

四、自适应设计

Material Design 设计原则

“Material Design的最后一个核心理念,是创造出一个自适应的设计,他能适用在从小手表到大电视的任何尺寸的平台上。一个自适应的设计,实际上是在同一个底层结构的体系中,演变出适应于不同尺寸界面的设计。在每一种设计中,尺寸和交互方式用最适合这个尺寸界面的方式展现;但在颜色、图标语言、层级和空间关系上却保持不变。Material Design通过提供灵活的元素和样式,帮助你搭建可自适应的界面。”

设计原则在feedly的运用

从第一版开始,feedly就已经是一个可自适应的应用。自适应时,最主要需要考虑的元素就是用来呈现文章的卡片。考虑如何将这些卡片排布在杂志视图中,是一件很有意思也很有挑战的事情。正如你在下图看到的,不同尺寸的屏幕采用了不同的、但都很有趣的布局。

material design_08

最后,希望你在跟随我进行Material Design探索的时候能乐在其中。如果你有任何的反馈或想法,能让feedly更好地兼容这些设计原则,请不要犹豫留下你的评论。

翻译:1688事业部/资深交互设计师/郭楠

原文地址:https://medium.com/feedly-behind-the-curtain/an-exploration-in-material-design-by-feedly-8c1a1cbdfdcd

原文作者:Arthur Bodolec,feedly联合创始人,设计师

在谈响应式布局前,我们先梳理下网页设计中整体页面排版布局,常见的主要有如下几种类型:

布局类型  

布局实现

采用何种方式实现布局设计,也有不同的方式,这里基于页面的实现单位而言,分为四种类型:固定布局、可切换的固定布局、弹性布局、混合布局。

  1. 固定布局:以像素作为页面的基本单位,不管设备屏幕及浏览器宽度,只设计一套尺寸;
  2. 可切换的固定布局:同样以像素作为页面单位,参考主流设备尺寸,设计几套不同宽度的布局。通过设别的屏幕尺寸或浏览器宽度,选择最合适的那套宽度布局;
  3. 弹性布局:以百分比作为页面的基本单位,可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度,并能完美利用有效空间展现最佳效果;
  4. 混合布局:同弹性布局类似,可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度,并能完美利用有效空间展现最佳效果;只是混合像素、和百分比两种单位作为页面单位。

可切换的固定布局、弹性布局、混合布局都是目前可被采用的响应式布局方式:其中可切换的固定布局的实现成本最低,但拓展性比较差;而弹性布局与混合布局效果具响应性,都是比较理想的响应式布局实现方式。只是对于不同类型的页面排版布局实现响应式设计,需要采用不用的实现方式。通栏、等分结构的适合采用弹性布局方式、而对于非等分的多栏结构往往需要采用混合布局的实现方式。

布局响应 对页面进行响应式的设计实现,需要对相同内容进行不同宽度的布局设计,有两种方式:桌面优先(从桌面端开始向下设计);移动优先(从移动端向上设计); 无论基于那种模式的设计,要兼容所有设备,布局响应时不可避免地需要对模块布局做一些变化(发生布局改变的临界点称之为断点), 我们通过JS获取设备的屏幕宽度,来改变网页的布局,这一过程我们可以称之为布局响应屏幕。常见的主要有如下几种方式:

布局不变,即页面中整体模块布局不发生变化,主要有: * 模块中内容:挤压-拉伸; * 模块中内容:换行-平铺; * 模块中内容:删减-增加;

 

布局改变,即页面中的整体模块布局发生变化,主要有: * 模块位置变换; * 模块展示方式改变:隐藏-展开; * 模块数量改变:删减-增加;

 

很多时候,单一方式的布局响应无法满足理想效果,需要结合多种组合方式,但原则上尽可能时保持简单轻巧,而且同一断点内(发生布局改变的临界点称之为断点)保持统一逻辑。否则页面实现得太过复杂,也会影响整体体验和页面性能。

(原文链接地址:http://heyuchan.com/?p=803 )