元旦已立,新春即临,这是中国人最重要的传统节日,也代表了农村淘宝年度最为重要大型促销活动年货节的即将上线。我们在本次大促之中除了完成常规的需求之外也进行了多项创新性尝试与自发的创新项目,包括针对线下营销场景特点的视频制作,创新大屏的全新功能上线等等。

新的一年时光的车轮又留下了一道深深的印痕,寒冷虽然刺透骨髓,但阳光依然明媚。

项目总结_01

项目总结_02 [封面2]3

感谢林孙佳、江凯师、恬乐鼎力支持

鸣谢222

16年9月8日的拿货节是1688全年所有行业和业务参与度最高的一次大促,“打造一个完整B2B供应链的营销大促”是98大促设计的核心思路。刚接到这个任务时,有一点君也是惊!呆!了!300多个会场,几千个外投资源位,还要打造1688的营销品牌,一个B类大促,在服务透传、商家浮现、市场放声的基础上,还要玩出设计的特色,要促销氛围,也要高效导购。HolyHigh!在UED资源非常有限的情况下,该如何在短短一个月的时间内搞定体量如此巨大的一次大促呢?

有一点君将从以下几个部分分别阐述如何用产品思维做大促: PART 01 拿货节品牌标志定义 PART 02 整体页面框架&导流策略 PART 03 会场设计策略 PART 04 会场动效设计方案 PART 05 组件&外投资源位设计方案 PART 06 自动化设计&流程标准化 PART 07 买家调研&数据衡量模型 PART 08 小结&未来方向

1

海量的会场、资源位和组件需求,不同垂直行业和横向业务的运营策略,如何在一个活动中进行统一呢?我们需要定义一个具有广泛适用性的图形化品牌标志,来代表1688拿货节这个大活动。结合1688的阿牛形象,最终采用了牛头作为统一的大促形象塑造,复用到了大促的各个角落。

2

在以往大促中,由于爆发日流量巨大,很多时候大促主会场成为了各个项目组划分势力范围的对象,对于B类买家这样一个行业特色明显的群体来说,并不是最优的用户体验。本次大促ued在整体导流的设计策略上提出新的思路:将所有分会场打散,重新按行业聚合各个(横向业务、场景导购、垂直行业的)分会场。从买家视角,按行业组织好货、尖货等各具特色的货源,形成丰富的行业一盘货特色导购,缩短买家寻找、浏览的操作路径,提升分会场的曝光率和到达率;

3

4

在不断地与整个大促项目组的同学沟通过程中,逐渐确定了以B类买家视角为主要设计方针98主会场框架: 原来大促导流上的问题: 部分相关、相近会场之间割据,流量没有形成良性流动; 花钱导入的流量最后形成的浏览路径不深; 各个会场曝光机会相差悬殊; 加剧各横向业务争着独立去外面投放争流量资源;

新的导流思路改进: 主会场和行业首页按行业聚合所有相关垂直和横向会场为主,以按业务聚合为辅,方便行业用户看全某行业的一盘货; 促使运营挖掘各个分会场的特色,作出会场差异; 强化相近分会场之间互链,给用户更多连续逛的机会; 最终新导流思路落地在主会场页面上进行试点,行业主会场还是由垂直行业自运营:

5

制定了页面整体框架&流量策略后,会场的设计开始执行“打造一个完整B2B供应链的营销大促”的思路方针,通过牛头的营销图形化品牌标志,复用到了各个垂直行业&横向业务会场中。

6

主会场视觉主要围绕以下三个方面来凸显 -文案:突出“1688拿货节主文案”辅助展现“金秋备货季”副文案,同时突出利益点; -品牌:增加新版“牛头”图形化设计元素,与本次98大促的二级、三级会场形成联动,打造1688全网品牌化大促方案; -场景:供应链场景围绕“1688拿货节”主文案,设定从源头原材料->工厂->分销商->物流->线下档口&零售店的完整供应链通路,打通完善整个B类链路的视觉 呈现,同时主会场选择了3D建模的手法,将整个场景围绕拿货节和牛头的主文案进行渲染。

7

8

9

10

11

12

主会场的楼层设计

13

新导流思路在主会场上执行后,以女装楼层为例,集中导购后用户的人均浏览会场数相比女装整体的会场曝光效果有大幅提升,高出15%以上。

14

以牛头作为核心视觉元素进行分会场拓展,在风格上做到百花齐放的同时也保证了很强的活动统一性。

15

16

17

18

19

20

21

分会场视觉设计则着重考虑以下三个方面: -品牌统一性:为与主会场及二级分会场保持统一,深化1688的全网品牌化,分会场设计中采用“牛头”图形化设计元素,并将主会场3D建模的视觉效果延展其中。 -行业丰富性:为凸显行业差异化,行业分会场与伙拼、代销、进口横向分会场在构图方式、背景氛围渲染上有一定区别,在辅助图形元素及配色方式等方面可融入行业独有特性。 -设计效率与成本:在短短两周时间内,输出300+个页面,在保证页面质量的同时,设计效率尤为重要,分会场设计需考虑模板的修改成本,通过清晰明了的模板规范、一键修改背景色、多种文案排版参照等等方式,提高页面产出效率。

22

23

24

以往大促中,当设计师设计了复杂题图动效的时候,往往会占用较多前端资源,但动效一般上线时间较短(爆发期1~3天),同时技术手段实现的动画效果有限,为了彻底释放前端资源,同时减少设计师做动效时所受的限制,进而通过更加酷炫的效果来烘托大促氛围、突出利益点,在98大促中整个主会场题图使用视频方式进行展示。

25

综合选定的视频技术实现方式和各个技术手段对比如下——

26

主会场线上效果均以Webm技术手段实现——

27

28

29

banner资源位根据大促各个阶段的不同分为要求来进行打造

30

1688首页氛围

31

搜索LOGO动效

32

红包宝箱

33

34

流程标准化: 大促全角色工作流程作为营销体系策略的重要一环,涉及到外部角色及UED内部角色较多,流程的标准化可使大型促销活动组织更有序,减少沟通成本,提升质量及效率。例如UED内部全角色工作流,包含设计接口、交互设计、主会场设计、横向主会场设计、分会场设计、组件及氛围设计、买家调研等9个主要角色,从大促KICK OFF到返场结束,分为10个时间段,其中包括需求评审、设计初稿及组件评审、设计评审、开发评审、页面上线5个关键节点,每个时间段的工作事宜,关键节点的输入输出都进行了具体的细分,各角色可快速找到工作重点,紧紧围绕业务制定工作计划,提高工作效率。

35

36

自动化设计中心,利用优质的模板和外包计件平台帮助运营快速搭建页面

37

38

39

建立大促数据指标衡量模型:积累历次数据

40

划分大促买家调研的重点用户群体为其中3类人,样本提取逻辑如下:

41

汇总用户群买家问题,并归类总结反馈。

42

总结一下,每年1688全站大促有4-5次,其中穿插各个垂直&横向业务的大促活动更是数不胜数,在如此密集的活动需求情况下,用产品化的思维做大促在品牌传递、大促体系化设计、项目组提效、大促玩法&组件复用等方面都起到很好的作用。未来的B2B营销设计一定是走向更加的智能化和个性化,流量的分配导流也会更加合理和高效,这也是我们B类营销设计师未来研究的方向。

BY 阿里巴巴_B2B_UED 营销设计组

【译者注】Shopify是一家位于加拿大渥太华的电商软件开发公司,专门为中小零售商提供建立网店的Saas服务,能对接主流ERP系统,为客户提供打单、发货、运单号自动回传、订单业绩汇总、利润计算、仓储、采购及供货管理等一体化管理流程,按月收取咨询服务费用。阿里巴巴也有自己的零售通业务,我们UED团队会探索各种方式通过体验为业务赋能,其中就有一些产品页面插画设计的使用场景与本文描述内容有关。本文作者对产品插画中“如何利用比喻来找准信息传达的关键,提供有价值的无形体验”有自己独特的见解,在视觉设计角度对大家应该有一些启示。无线U递组以往更多选择产品设计与交互设计方面文章翻译,之后也会适当触及视觉设计领域的优质内容。

在产品插画中合理使用比喻既不是在插画中使用比喻的修辞方式,也不是在把比喻内容用插画表现出来这么简单。

最近我被问到蛮多的一个问题是:在招聘插画师时你主要考核什么方面?

既不是拥有独特的个人特质,也不是深谙多种风格,更不是曾服务过的知名客户列表或者作品出展过的地方,当然拥有这些资质也挺不错的。我的答案是:设计师对比喻的使用程度。为团队招聘插画师的时候,我最想了解候选人是否理解如何通过愉悦轻松易懂的方式,借助比喻来传递复杂的想法。

对使用比喻的能力如此看重使得我的学生及同事们都很惊讶,那么我还是解释一下在Shopify插画团队里我们如何使用和理解比喻

除了铅笔、手写笔或者咖啡,比喻叙词表(更实在点说,我们电脑里保留了一份比喻使用的参照文档)也是是插画师经常使用的工具。冒着“插画师有一定的创作套路”被外人熟知的风险,我们在辅助设计师进行插画设计关键创意时也使用这种方法。插画设计的确有一种捷径。尽管立场坚定的站在设计阵营,顶着设计师的尊敬称呼,我也得承认:插画本身就是一种内容表达。正如作家撰写的故事里,产品是如何无缝融入我们生活的,插画师使用比喻这类文学工具将复杂的想法与背后相关体验连接起来,努力挖掘深层原因,使得用户被产品的无形利益吸引。

在产品设计中熟练有效的使用比喻,首先得找到需要传递的核心信息。常见的错误包括:在图形中传递了多重目标或信息;允许一个图标包含两个物体而不是一个;允许一个背景物品吸引了场景中大量的注意力(因为大部分设计师偏爱这样)。从16像素的图标设计到精致入微的场景设计,比喻都可以作为一个优秀工具。但无论如何都要通过比喻赋予图形具体意义,以帮助用户更方便的进行产品导航。随着插画复杂度的增加,我们需要定义视觉层级,其中每个层级的元素为插画传递核心信息的整体故事服务。当你为插画添加元素时,必须反问自己“这个元素对整个画面表达的故事有帮助么?”“这部分有益于核心信息传递么?”,如果答案为否,请准备好删掉它们。

产品设计比喻的类型

好吧,在没有理解什么是比喻之前,我不确定大家能读懂后文。在未说明定义之前就谈论分类听起来很怪,以防万一我还是解释一下。比喻(隐喻或明喻)是文学中以非字面意思连接两个想法的修辞方式,而不是单纯的夸大想法本身或者夸大表现互动方式。

一、标准比喻

这个元素与那个元素在某刻具备相似性。如下图所示,它不需要展示实际产品就能让用户理解。图中并不是真正在讨论冰激凌,而是通过插画以比喻的方式传递了“正如用户能够按口味喜好用配料调制成个人专属的冰激凌一样,你也能根据自己的需要为利用我们提供的服务(App)来打造你的专属店铺”的理念。

这招在产品设计中特别管用,尤其是那种无形、复杂的数字产品。 1

二、融合比喻

这个元素与那个元素融合,就能表达我们想要传递的内容。可能这类比喻使用起来需要更老道的经验,但在产品插画里的确更受重视,或者说一般设计都会考虑它,因为它是让用户获知你的产品或功能卖点的捷径。如下图所示,没错,你知道我们提供了“购买”的按钮,但瞧瞧旁边摆放的画笔,基于对画笔的了解,你就会明白你能定制“购买”按钮的颜色。将刷子的功能与按钮的功能混合起来,刷子可以自定义颜色,因此我们的按钮也可以。与品牌和营销设计一样,这种比喻在图标设计中也时常出现。 2

三、相似类比

这个元素在线上和线下有相似之处。尽管我不认为它是一类比喻,但在产品设计中我还是将它单独拿出来说。比喻常用来展现触动人心的部分,那是一件事情或者一个行动产生的积极感觉。不过,对于内容传递给用户的方式,团队更倾向于中立精确的写实表达。不必告诉用户我们的感受如何,只需简洁传达信息。用插画的专业术语来表达则是:我们只愿意通过绘制写实状态下的物品,来帮助用户理解线上的内容。当然,谈到产品时,我们大多是在电脑上作画,比如,你可以绘制20多个互相连接的空状态页面,来表达重复性。这也是我们在为用户传达内容时增加的一种类比方式。比如下图的例子,线上电子商务可以让用户通过优惠码输入实现折扣,那么线下实体销售折扣该如何表达呢?可能是一堆贴纸和带着折扣价格的红色标记。我们能借助全新怀旧风格的插画为用户带来愉悦,同时还能保持中立,只是简单清晰的表达信息。 3 提醒:使用陈旧或过时的物品做相似类比时,信息会有误传风险。

在产品设计中使用比喻

当有了新想法,试图找到合适的切入点来讲个好故事时,我们通常问自己“为什么商家在乎?”,接着就是“这种无形的体验究竟是什么?”“如何把故事讲好?”这些问题。

【案例:用插画表达用户能够购买自定义域名的功能】

备注:这些想法来自我们极具才华的插画实习生Erin,他现在负责通过插画宣传自定义域名的功能。早上我们有过交流,我认为与其绞尽脑汁编一个,还不如直接用身边这个触动我的完美案例。

Q:为什么商家在乎?

他们在乎该功能因为他们不再愿意告诉用户他们的冗长域名breadpoetsociety.myshopify.com。像他们承诺提供稞麦粉出售、松脆饼打包、甜甜圈贩卖服务一样,商家希望购买自定义域名也能被认真对待。

Q:这种无形的体验究竟是什么?

插画要能体现用户以下感受:他们已经为“打造面包诗人公社”的目标做好一切准备,这不再是周末萌发的天真想法,而是一个成熟的业务,包括随之而来的激情与期待。

Q:如何把故事讲好?从哪里切入?

1、标准比喻。

首先绘制一个小屋或店面,因为线上与线下类似。一个设计概念能以多种方式传达,取决于你打算聚焦于哪些元素,以及你如何从宏观和微观角度表达它们。

例如,对整个店面,经纪人标识,店铺里的装修的视觉表达。

2、融合比喻。

将“家/店铺”与“域名/线上”的概念以任何穷举组合的方式融合起来。

例如,将家与路由器、店铺与一系列结点、符号与网络的特点进行融合。

3、相似类比。

可以从名片切入,模拟现实里将承诺的个性化名称与有形物品的结合实现。无论是线下打印出来还是线上展示,尝试用插画去捕捉和表达“客户看到定制的业务名字被写出来,初次被当做自己的生意提及时的那种激动感受”。

用户通过我们的产品,基于数据对定价策略、销售渠道和潜在买家行为进行有形决策。而我们则使用插画来表达那份无形的体验:用户掌控日程的自由,打造专属物品的满足,初次销售后发自内心的喜悦。这些无形的体验或许不会成为用户界面的一部分,也不会成为对老板汇报的内容,更不容易以实打实的可见产品价值论证自身的设计价值,但它们不仅是产品设计的重要内容,也是我们所倡导的设计方式。产品插画中的比喻逐渐成为这部分从未尝试过的触动人心体验的代表,超越了那些使得用户爱上产品的有形功能内核,升华了整个故事。

原文地址:

https://medium.com/shopify-ux/effectively-using-metaphor-in-product-illustration-62bdccbe14e4#.ljarg9a16

译者:

阿里巴巴/1688UED/无线交互/舒舟

写在前面:视觉宝宝们,在设计界全民视频化,VR,动效满天飞,每天都在创新的互联网设计新时代浪潮下,你还在为自己精心堆砌出的完美像素沾沾自喜么?

残忍的告诉你,这已经远远不够了,得让你的设计动起来!不仅能让前端工程师更清楚的理解你脑中的呈现效果,减少沟通及返工成本,同时也能让我们的设计输出更加完整专业并且B格满满。

然而传统的用Photoshop时间线来制作动效的方法,过于复杂,并且不够灵活,在需要做到位移和缩放效果并行的时候就显得尤为笨拙,往往需要一帧一帧的设置并不断调试,太耗费精力,并且呈现效果还不一定顺畅, 而能够做出细腻动效的像AfterEffects等专业动效软件学习成本又过高,让人望而却步…

不要蓝瘦,不要香菇,这个时候其实我们完全可以偷个懒,弯道超车!

来,先看张图:

如此流畅细腻的动效当然不是用Photoshop一帧帧做出来的~ 我们用Keynote,3分钟就能实现,快来一起get这个技能吧!

首先,你的电脑里需要安装以下2个软件:

Step 1,先将你需要制作动效的源文件在Photoshop里分好层,并导出png文件(以进口无线伙拼题图动效为例);

Step 2,再拖移至Keynote里,并将分层的图片按照设计稿中的最终位置及图层顺序排列;

Step 3,为每个需要动态效果的图层设置动作,可以是位移并同时缩小; 操作:动画效果 > 动作 > 添加效果 > 移到,然后鼠标拖动图层至需要移到的位置及尺寸

同时可以分别针对每个图层动作设置 “持续时间”,使动作呈现效果更有层次;

Step 4,全部设置完成后,点击右下角 “动作顺序” , 将构件顺序全部设置为 “与构件1一起”,至此你的动效设计已经完成一大半了!点击预览,查看呈现效果,如不够完美,可回到Step 3,继续对每个图层动作进行微调。

Step 5,预览确认视频效果ok后导出MP4,保存; 操作:文件 > 导出到 > Quicktime

将等待时间全部设置为0秒,如需小尺寸输出可将格式设置为720P,导出尺寸会更小。

Step 6,将导出的视频文件在MAC系统自带的Quicktime Player中打开,快速剪辑(如不在意动效前后停顿时间过长可省略此步骤); 操作:编辑 > 修剪,此时可以看到播放窗口中的视频文件部分出现了一个黄色的边框,拖动黄色边框两端部分,裁切掉视频前后部分的空白内容,保留中间动作部分,并储存;

Step 7,在Photoshop中打开剪辑好的视频文件(如需要,可在Photoshop中对视频尺寸进行裁切),输出gif格式; 操作:文件 > 储存为web所用格式,选择Gif格式,并将动画循环选项设置为永远;

至此,祝贺你,动效已经完美生成,预览一下看看,是否足够顺滑流畅。

写这么多,其实就是抛个砖,大家可以发挥想象力,开大脑洞,制作出更为精细顺滑的动态效果。

附:操作演示视频链接,有兴趣的同学可移步优酷 http://v.youku.com/v_show/id_XMTgzMTYyNjM5Ng==.html

关键词:兴趣派、创意团队、徽派风格、极简主义、表现异同、文化差异、产品本地化、产品国际化。

能工摹形,巧匠窃意。—— 毕加索
Good artists copy, great artists steal. —— Pablo Picasso

第一次看到这句话是在苹果公司总部的墙上,这也是早期乔布斯在访谈中所提到的:让自己了解和熟悉人类在各种领域的优秀成果,并尝试把它们运用到你现在在做的事情中。Macintosh团队中有音乐家、诗人、动物学家,而这些人也刚好懂电脑,所以Macintosh才会有和其他产品不同的体验。多样化的团队更有创意,更有创意的团队打造更好的产品并带来成功。我想这也是我们鼓励各种兴趣派开展活动的初衷。

11月初户外派自驾去了中国最美乡村——婺源。
清晨的婺源给了我这样的视觉联系。
wyfinal
图:从最原始的徽派建筑,到贝聿铭基于徽派风格设计的苏州博物馆新馆,到画家蒙德里安的系列作品,最后一张是进口无线组最近设计的二维码。

从建筑上出发,取其抽象元素,分析传统构成在现代美学中的运用是视觉创意的来源。但通过对徽派风格和极简主义更多的了解,发现背后的“交互思路”是截然不同的。徽派风格秉持了中国文化中的先抑后扬,外形简洁,屋内木雕极具匠心,并且被强烈的宗法思想影响,整个屋内是精神意蕴的大世界。屋顶的马头墙也把中国文化的一马当先、马到成功很好的借喻在其中。而极简主义是为了反对先前的抽象表现主义,去除作品对观者意识的压迫性,让观者自主参与对作品的构建。作者与观者有着流动的精神互动,从而形成一个完整的作品。
wuyuan2

流动的设计,因人的思想和自然变化而变化,这里不仅仅只是作者在创作:贝聿铭设计的苏州博物馆新馆运用自然光线投影作为设计辅助材料与观者互动;我们清晨在婺源拍摄徽派建筑群,利用雾气的渲染给安静的小镇罩上一层自然的滤镜。

每一天都是不同的创作。
%e5%a9%ba%e6%ba%90
表象类似,背后存在差异性。在商业产品中的例子是国内的滴滴打车和欧洲的BlaBlaCar(卟啦卟啦车)。同是当地主流打车软件,由于文化背景的不同,体验和营销侧重点也会不同。基于红包的传统文化,滴滴顺风车和拼车主打车主省油费,并且从车主思维角度出发做营销推广。乘客有优惠低价,再读读超赞车主故事。BlaBlaCar重点在于全级用户在狭小空间对于陌生人的信任和相处交流舒适度的体验升级。用户可以在个人信息中选择等级,Bla:让我静静; BlaBla:聊个五块钱; BlaBlaBla:让我们从东三省一路聊到海南吧!✧。٩(ˊᗜˋ)و✧*。

从小我们都被教育:不要和陌生人说话,不要进陌生人的车。但现在,体验的优化改变了人们对于信任固有的观念。相同的功能,不同的需求带来不同的体验,而不同体验的引导性设计造就人们日常固有行为的转化。
wuyuan3
如果说字、画、建筑是我们触摸历史最近的渠道,如今的互联网则是设计师传达自己思想的最佳媒介 (archive.org/web/ 真实记录和还原了国内外279万亿网站的每一个迭代上线)。文学家、艺术家、设计师作为先觉者、先行者、先倡者用自己的作品记录和推进整个时代文化的传承。

如果没有互联网,我们可能会从事其他行业,是互联网让我们走到了一起。我们所经历的生活,每一个人身上的特质都潜移默化的在我们设计中体现,影响着团队中每一个人成长,影响着翻阅和使用我们设计的每一个人。
wuyuan4
“The world is a stunning place, full of outstanding works of art… One lifetime is not enough to experience all cultures. But travel, especially while young, is an essential step to becoming more aware of other cultures and people. “

0 8月5日晚7:00的《UP夜校》第五期可谓是一场知识盛宴,PD和UED的诸位大牛汇聚一堂,婷婷结合个人经历和过往产品设计的经验阐述了供应链探索的心得;小玉从自身专业出发,结合零售通业务阐述了供应链中的服务设计思维;最后,顺应业务发展的变化,望望和小帅讲述了对新岗位UX设计师的要求和期望。满满的干货让在场的小伙伴“应接不暇”。 01 虽然之前对婷婷有过了解,但万万没想到产品思维如此清晰的美女之前是学Java开发出身的。婷婷首先结合近几年业务的发展形象说明了供应链的推进势在必行,通过对买家价值的梳理以及对供应链模型的理解,自然引出目前零售通的业务架构: 选择通过与供应商联营模拟自营模型,提供确定性的商品和服务,引导买家与平台长期合作。通过对零售通目前各个角色以及生态的细致剖析,让我们对零售通的未来充满希望。 02 小玉是一个非常追求极致的全面发展的设计师,每次听她的分享都会有不一样的收货。此次分享小玉首先阐述了供应链目前服务生态的现状,并结合食物链的形象比喻表达了个人对供应链的独特观点:我们不消灭任何角色,仅仅是做桥梁。让角色间的衔接更高效、合作更顺畅。随后结合具体案例小玉给出了服务设计思维的三个关键点:1.以全局的视野理解问题。2.以系统的角度思考问题。3.以开放的观点激发创新。我们不妨按照这三点提示,有意识的将服务设计思维运用在以后的设计中,相信每个设计师都会有所收获。 03 最后压轴的望望和小帅分别阐述了UX设计师的特质以及具体要求。望望首先提出了现有UED的普遍问题:交互设计师和视觉设计师普遍觉得成就感不强。针对这种现状UED设立了新的岗位UX,UX设计师可以细分为三种类型:1.理性感性全面发展,比如女神。2.偏理性,比如小帅。3.偏感性,比如大师。发展通道有两种:1.“全能”用户体验设计师,渗透上下游。2.“创意”视觉设计师,用艺术和美的品味塑造个人风格,打造业务品牌。小帅首先带大家一起回忆了UED的岗位观以及设计观,随后详细阐述了新岗位UX设计师的要求,对于不同级别的设计师,自下而上需要有见解鲜明、感觉敏锐、技法突出、匠心独具、从容驾驭、独树一帜的特质。虽然目前UX设计师有一定的门槛限制,不过这个不是最关键的,相信听了望望和小帅的描述大家会更清晰的知道自己未来的岗位规划,以及组织上对我们的期望,每个UED的同学肯定都能找到最适合自己职业发展的那条道路。 04 昨晚干货太多所以大家可以结合嘉宾PPT慢慢消化:PPT云盘链接

感谢摄影派的屠钰钦,为我们留下了精彩瞬间。

小调研:你有干货要分享么?你想听什么分享? 请戳这里:https://www.wenjuan.com/s/2eemmm/

夜校四期 6月16日晚7:00,由网站产品部与用户体验部联合举办的《UP夜校》第四期——《1688基础产品体验优化项目分享》如期举行。妙乐和梅郁分别从产品和交互设计的角度阐述了基础产品体验优化的心得,干货满满,在场的小伙伴收货颇多。 1 妙乐结合无线端大额支付以及生意参谋两个案例分析了现有基础产品的体验问题:产品割裂,缺乏整体规划;持续优化计划缺失;部分产品变为无头案。针对现有问题提出了1234的针对性解决方案——1个小组,2 个机制,3个月,4个输出,同时给出了详细的项目效果评估机制以及关键节点的项目产出。思路清晰严谨,分析透彻细致。 2 梅郁首先结合UED最熟悉的五导家阐述了现有基础产品为何会产生那么多的体验问题,有些是因为我们为了赶工忽略了用户诉求,有些是因为在做小功能叠加的时候直接忽略了设计目标,这些问题值得所有UED的小伙伴反思。 3 随后梅郁结合生动的案例指出了设计师需要注意的几大问题:1.补上用户角色,明确设计目标。2.易用性和易学性的抉择。3.区分功能和需求。4.逻辑与场景的权衡。讲述风趣幽默,结合现场互动,让晦涩的理论变得有趣易懂。 4
现有的基础产品体验确实存在诸多问题,但是通过妙乐和梅郁的分享让我们对体验的优化充满希望。当然基础产品体验不是一两个人的事情,也不是一个项目组的事情,应该群策群力,大家一起为网站的体验优化贡献一份力量。

小调研:你有干货要分享么?你想听什么分享? 请戳:https://www.wenjuan.com/s/2eemmm/

妙乐PPT:http://yunpan.alibaba-inc.com/share/link/N3VTS7mj4p
梅郁PPT:http://yunpan.alibaba-inc.com/share/link/S3VTS7ijuO

感谢摄影派的苏林,为我们留下了精彩瞬间。

0 UP=UED&PD,是由用户体验部与网站产品部联合举办的UP夜校,目的是希望UED同学与PD同学能够有一个在工作之外一起交流与学习的平台。目前夜校每两周举办一期,围绕全网产品体验一致性规划思考,Work-平台整体规划,DPL模板落地,优秀作品案例,专家经验分享以及客户原声学习、讨论等课题展开。

《UP夜校》第二期由高级产品专家张建忠带来《1688全网产品体验一致性规划思考》的分享。 1

建忠首先对网站现有的主要问题进行了透彻的分析,结合SAAS类等竞品提出1688网站在体验一致性上的发力点,针对产品体验一致性的目标、实现策略及节奏发表了个人的独到见解,在场的小伙伴收货颇多。

2

针对1688网站现有的体验一致性问题建忠提出了“约束增量,改进存量”的改进策略,对现有的业务结构进行了梳理,希望能从新产品开始发力,逐步优化老产品。 3

用户体验部的望望也就网站体验一致性的问题发表了个人见解:如果我们从新产品开始优化,那如果新产品和老产品混杂在一套系统里面,仍然不是最好的体验。B2B中台DPL即将建成,我们能不能借助DPL,实现整个1688网站后台的整体升级,这样既能敏捷开发,也能更优地实现体验一致性。 4

现场的小伙伴和两位老大就网站一致性展开激烈讨论,相信每一次的思想碰撞都会让1688网站变得更好。 5

你对1688网站体验一致性有什么见解么?欢迎大家一起参与讨论,我们一起来共建。

WUP夜校

UP=UED&PD,W=WE,WUP=我们上夜校。此次由用户体验部与网站产品部联合举办的UP夜校,目的是希望UED同学与PD同学能够有一个在工作之外一起交流与学习的平台。夜校会围绕今年网站的业务重点、难点,例如供应链管理、体验一致性等等展开。

《WUP夜校》第一期———《1688中台DPL分享》,60多位小伙伴来到分享现场。石校长和望校长的精彩开场,嘉宾的干货分享,为我们的《WUP夜校》定下基调。大家满满的收获,也让我们对后续的夜校课程充满期待。

望望、石岩分享 用户体验部与网站产品部的掌门人对今年B2B的形式及发展方向进行了阐述,激励大家在B2B的发展道路上走的更远、更深。

主持现场 帅气主持的开场,为我们介绍WUP的来源及我们后续的计划与目标。爆满的现场体现了UED与PD同学的求知欲。

嘉宾分享三位分享嘉宾分别从中台、技术和业务的角度为大家介绍了DPL的来源、构成、实现及落地。DPL的开展为我们的1688全站体验的统一性提供了非常大的促进作用。

现场积极提问和讨论的同学获得阿牛白膜作为奖品。

1688骨架DPL已成功发布,有兴趣的同学可以回复评论,我们私下聊。

20161.001 如果说我们做的业务最终输出的是一首歌,那我们设计师就是歌曲的编曲者。产品和运营进行歌曲本身的创作,我们设计师在了解了歌曲主题、听众是谁之后,选择乐器进行编配,最终输出一个编曲DEMO,由工程师进行录音、均衡和输出。我们的设计过程应该如音乐创作一般美好~

一、背景:

见网友、见笔友已经成了一种见光死的另一种说法,在线上聊天时浪漫深情忧郁的才子,见面时成了这样:满脸胡渣的黑脸大叔,在一条垃圾随处见的小巷子里请你吃烤串:
20161.003
这是因为触点发生了变化。 在线上聊天时用户触点是聊天工具,网友设计的是语言艺术,他的设计目标是把自己打造成深情忧郁男子,你们之间的交互也仅限于聊天工具提供的功能如文字、表情等;但见面时,触点不是数字设备,而是真实的人、真实的饭堂,触点发生变化,但设计方案却没有因为触点的变化去结合设计目标“忧郁深情男子”对触点界面进行调整。这就是一种一致性体验上的断裂。 除此之外,还有体验流程的断裂或不可用、不易用,很多都是由于对用户的连续行为、行为地点、触点考虑不全导致的,随着O2O业务的发展这些问题随处可见。
左:比如这个支付成功页,单独看是没有一点问题的。但是当餐厅服务员告诉我要把这个页面展示给他,并且他咪着眼睛抄写订单编号的时候,我和服务员的体验都不好。一来没有引导我需要打开这个页面,二来服务员弯下腰来靠近我的手机同时拿纸笔记录很麻烦。解决方案有很多,就不说了。
右:这个天花板上的旗帜,里面的二维码非常小,根本无法扫码成功。这也是典型的没有考虑到用户行为场景和触点导致的体验断裂。
20161.004 用户行为就像音乐一样,是连续的,以往互联网设计只针对一类触点比如PC端的某套系统、无线端的某个APP,而通过制定DPL,也可以将跨实体触点的数字触点保持在体验上的连续和一致性。但O2O中随着用户行为在不同场景的切换,单独对一类触点进行分析去设计是不完整甚至是割裂的。

二、《O2O用户体验五线谱》方法:

1.方法论概念
早在20世纪九十年代初,Richard Buchanan教授就清晰地把交互设计的对象定义为行为,“creating and supporting human activities through the mediating influence of products”(通过产品的媒介作用来创造和支持人的行为)。【《交互设计:从物理逻辑到行为逻辑》–辛向阳】在这里的媒介(本文称为触点),可以是软硬件,也可能是身体的某个部位,甚至可能是外在的环境媒介。产品界面仅是媒介的一种,O2O场景下的触点会有更多真实实体、人物等。
所以在这里介绍O2O用户体验五线谱,我们使用线的形式,表现出用户在我们设定的业务场景中连续的行为,像音乐一样连续不间断,并且线谱的形式扩展性较好,增加一条线即可增加一个维度。在这个方法里我们使用5条线,包括用户行为、地点、触点、设计策略、设计方案,其中用户行为、地点、触点是即定的,也就是在进行设计前已确定好内容的维度,属于产品与运营层面,同时随着行为的变化,地点与触点发生变化,设计策略与设计方案需要结合地点与触点特性进行推导;而在整个过程中常量维度为用户、设计目标(设计目标推导方法建议使用《五导家——设计师的Think-flow》–李龙),就像一首曲子事先的定调与定速度一样,设计策略与方案需要遵循整体目标为特定用户打造。
所以五线谱的方法核心是,在多触点任务过程中,以用户连续行为为主线,随着行为与地点、触点的变化,围绕设计目标,结合地点、触点特性进行设计,保证用户获得符合场景的体验。 20161.005

纵向在针对单个用户行为进行设计时首先需要有以下几点考虑:
-考虑用户行为,是否为主动行为,主动行为是指用户主动选择的,是经过思考,选项很多,需要我们进行激励才会转化到的行为。业务层面并没有在用户的主动行为上做强激励,就需要我们用设计的力量引导用户的主动行为,我称之为转化关键点(标红星),也就是要唤起用户何种感受时会转化。被动行为是指不需激励自然会产生的一步,比如我在餐厅点完菜了,下一步自然是吃饭。再考虑主动行为前是否有合力行为,就是连续的用户行为共同唤起用户的转化关键点,在这部分行为中要反复关注到唤起用户转化的感受。
-分析地点特性,用户行为的环境有什么特点,会对用户行为有什么影响,如何辅助设计
-分析触点特性,O2O业务中,触点会以实体、数字两种形式出现,要清楚这些触点都有怎样的特性,如何辅助设计。

然后进行设计的推导时,可以用以下的方式去辅助自己思考:
-用户在(什么特性)的地方
-利用有(什么特性)的触点
-做(什么动作、交互)的用户行为
-为让用户体验达到(怎样)的设计目标
-考虑到(什么用户感受、激励)的转化关键点
-在这1步或多步,有(怎样)的设计策略。设计策略是围绕整体目标针对这这1步或多步行为的设计方向,到这一步为止我们在这个场景的设计思考已经比较周全了。
-最后是设计方案的推导,就是针对具体设计的对象产生具体方案,可以思考,为实现(怎样)的设计策略,利用(哪个/些具体的)地点或场景的特性,利用(哪个/些具体的)的触点特性。
推导.001.jpeg.001

2.方法论具体应用
我们下面就以一个通俗的例子来诠释这种方法。
有个男孩为了追求自己心仪的女孩,希望通过做亲自为她做饭的形式提升女孩对她的好感度,在这里业务方就是男孩,用户就是女孩。 20161.007 根据业务诉求,为了让我心仪的女生感觉我重视她,为她亲自做一顿晚餐,使我们有更多时间相处并且她对我产生好感,和用户诉求,一位文艺、日系的单纯女生,对浪漫恋情还有向往,希望身边的人与出入场所都有文艺气质,内心的声音是成为苍井优一般的文艺女神。我们推导出了这次的设计目标是“让她感觉我重视她、相处时感到舒适,将自己打造成日系无公害暖男,晚餐整体(菜品、环境)的文艺浪漫气息”。
然后我们梳理出在“邀请女孩到家就餐”的过程中,她的行为是“收到邀请—接受邀请—到访家中—等待晚餐—共享晚餐…”,在接受邀请的一步属于主动行为,我们先将其标红星,很遗憾在业务层面男孩子没有能力将女孩的偶像请来共进晚餐,我们只能通过设计的力量去加强主动行为的转化;各个行为对应的地点与触点,也就是前期在产品运营层面(即男孩)已确定的用户行为触点分别为“微信—家的玄关—客厅及相关配套—晚餐及相关配套—微信”,过程中触点有四种变化,这样的情况我们就可以用“五线谱”的方法对各个触点进行设计推导。地点的维度帮助我们了解用户触点所在场景,辅助我们进行设计方案的发散。这里我们把两个在过程中的常量,用户与设计目标作为指导,不同触点的设计关键点的考虑,都围绕着用户与设计目标展开,以保证整体设计方向。
20161.009
下一步我们就可以针对每一步用户行为,结合地点与触点特性进行设计策略与方案的发散。以“收到邀请—接受邀请”这两个行为为例。地点与触点均一样,我们使用同一套设计策略(在地点与触点类型相同或性质类似的连续行为下可使用同一套设计策略)。首先分析行为,接受邀请是主动行为,由于男孩在业务层面没有进行强化,我们需要用设计唤起女孩“男生无害,晚餐有趣”的感受,能激励她接受邀请;然后分析行为地点,使用微信接受邀请可以在任何地点,为显得“男生无害”,我们可以进行地点的假设,是在一个“在有安全感的、舒适的地方”女孩更容易接受邀请;再进行触点的分析,“微信自带各种沟通辅助工具如表情包、照片、视频、位置、分享等”。

所以辅助设计推导的思考过程为:
-女孩在(有安全感、舒适)的地方
-利用(微信以及其自带沟通辅助工具如表情包、照片、视频、位置、分享等)的触点
-做(收到邀请与接受邀请)的用户行为
-为让用户体验达到(让她感觉我重视她、我是日系无公害暖男、相处感到舒适)的目标
-考虑到(让她感到我无害、约会有趣)的转化关键点

推导出的设计策略为: 选择用户有安全感与舒适的地点与时间,利用微信中可体现无害、温暖的视觉元素,使用日系风格照片、分享等工具体现对约会重视程度以及展示个人魅力。

设计方案是针对具体对象进行具体设计,即为:
-在晚上8点至10点间发起聊天(即假设女孩在家);
-聊天语气温柔,使用兔斯基表情;
-向对方展示自己曾经的厨艺作品使用日系风格滤镜;
-发送用MAKA制作的精美邀请函;
-对方接受邀请后表示开心;
-用位置发送家庭地址,给女孩出行建议;
-提示她早点休息,给她分享一首安静的轻音乐;
20161.010

女孩到访男孩家后的有连续行为“到达家中—等待晚餐—共享晚餐—离开”,触点都是实体,地点都是在男孩家中,因此我们可使用一套设计策略,这些连续行为下女孩的感受,会合力影响到下一个用户行为“女孩再次收到邀请与接受”,转化的关键点在于女孩在整个合力行为的过程中感到“放松、感动”。因此在这个过程的设计中需要反复关注到女孩这种感受。所以结合设计目标、地点、触点特性,在这几步用户行为,推导的设计策略就是,“在女孩的触点,视觉、听觉、触觉、嗅觉等多方面针对女孩日系的喜好进行设计,让女孩感受到放松与舒适,同时在女孩触点表现出家庭型文艺暖男气息”,再进一步推导的设计方案,例如在“等待晚餐”时,地点在客厅,触点是“沙发、茶具、水果、糖果等招待相关”,设计方案则是“沙发与茶几整洁干净,准备亚麻质感靠垫;准备日系茶具、果盘,水果摆放精美;为她泡一杯日式抹茶;茶几错落放几本文艺书,其中一本为正读状态;播放小野丽莎音乐;提示女孩可使用的服务比如电视、IPAD等”
201611.001
20161.001

三、回顾几个重要的点:

1.五线谱设计方法,适用于多触点任务的业务。

2.五线谱是以用户连续行为为主线,随着行为与地点、触点的变化,围绕设计目标,结合地点、触点特性进行设计,保证用户获得符合场景的体验。

3.在做多触点设计时多思考:用户在做(什么动作、交互)的行为时,在(什么特性)的地方,可利用(哪个/些具体的)地点或场景的特性;使用有(什么特性)的触点,可利用(哪个/些具体的)的触点特性;为让用户体验达到(怎样)的设计目标;考虑到(什么用户感受、激励…)的转化关键点。

文 / 张梨

引言

相信许多从事设计工作的设计师们都有一个漫长而又心酸的成长史。空白的从学校毕业,走入工作岗位。紧张又焦虑的第一次做需求,在很长一段时间内都在苦苦的思考设计方法,如何做出好的设计,证明自己的价值同时顺利的完成需求。 首先来弄清楚一个问题,一个好的设计应该包括哪些呢?

1688UED高级交互设计专家李龙,在他五导家中也提到设计的质量会被一个设计师的洞见、创新、情怀、审美等诸多因素影响。这样看来一个好的设计无非是好看、对用户有洞见,有感人的设计哲学和创新点。那么如何提高设计师的洞见、创新、情怀、审美呢?我将由梵高的艺术带来的启发来谈谈,也希望能够借此帮助到更多的刚刚从事设计工作的设计师们从恐慌、不安、迷茫中找到一些思路方法。

一、艺术和设计的关系: 1、Vincent Willem van Gogh文森特·威廉·梵高,生于1853死于1890,27岁正式开始了他的绘画之路,在他一生的艺术生涯追求中,崇尚自然之美,对艺术保持着高抗的激情。即使每次靠写信给弟弟提奥请求在金钱上的帮助来维持自己对梦想的追求,他依然在自己10年余生中不断努力坚持着,创造着那个时代无法接受的美。 看了纪录梵高一生的几百封随手笔信,每一幅用生命创作的作品。内心真的是非常感慨着究竟是怎样的一个人,对梦想的追求的力量让活着的人感到羞愧。现实残酷使他变的抑郁…每一天睁开眼睛忍受着饥饿和债务,依然坚持画画努力不放弃。他用生命述说着艺术的价值。那么, 艺术是什么? 设计是什么? 艺术和设计存在着怎样的关系呢? 艺术家们在创作作品时,或用新奇的绘画手法,或艳丽的张扬的色彩,无时无刻都在表达着自己的思想,抒发着灵魂深处的声音。设计呢,每一个设计都在艺术美的基石上去解决用户真实的需求。如果说艺术是展现自我,设计是解决问题,那么在目的这个层面上艺术和设计存在着本质差异。但我们这些现代的设计师都是从学习绘画审美开始培养自己对艺术欣赏基础,才拥有专业的美学审美。然后开始做设计的,即便最后与展现自我的那条路分开,我们依然做着用艺术设计在解决问题的事情。因此,在这个层面上,艺术决定了设计的高度。在本次课题中我将会针对来自梵高艺术的设计启发进行一些方法设计的方法探讨。

二、关于梵高 梵高究竟是个什么样的人呢? 艺术在尚未上升到一个高度的时候是他的价值时相对较弱的。所以,梵高的一生都被谋生这样的问题所困扰,如果生存都是问题如何继续梦想。梵高每一封信都在述说自己忍受困苦的生活,展现对绘画的热爱。不断努力学习某些画风或者临摹某些作品,希望弟弟提奥可以在他的艺术还没有形成价值的时候在金钱上支持他。 案例一:1881年,遇到一个被遗弃的孕妇,尽管自己的情况已经非常不好,但仍将她带回家,将自己的面包分给他提供住的地方。

案例二:1875年梵高在巴黎古币公司买画工作,工作期间会嘲笑顾客买画的品味,不让顾客买自己不喜欢的画,也不愿意把自己喜爱的画卖给有钱但是毫无品味的人。又因圣诞节期间公司最繁忙的时候擅自离开,被解雇。

案例三:1882年1月21日再给提奥的信中写到“虽然100法郎一个月就足够我的开支了,但我必须每天付钱给模特并供他们吃饭。还有颜料、纸张的费用,希望你早点写信给我,并对钱的事情造作安排。”

可见梵高是一个有正义感、体恤帮助弱小、对梦想执着、坚韧、 又有着艺术家的桀骜不驯、敏感、对绘画痴迷的爱 勇敢直面生活的困苦

A8B6BA35-0E2C-4A07-A9EF-E48748AAF3C2

三、梵高绘画成长过程 绘画临摹——以下这七幅纪录梨梵高一生的绘画成长的重要过程 c2b5fbf9f4b776954f65edef302e8d3a 1880年一份源于对绘画的执着,辞去传教士学习机会,在弟弟提奥的支持下开始自学绘画。 6b1847db149fad531033e657ca46c01e fa2952841022d7c7f63e6304c6fb5cc8 1881年临摹米勒的播种者,由此开启了绘画之路 c03aaf066f5ddd9c2b045e0e87f0ef86 (1) 1882年,第一次开始尝试创作《裸女半身像》 SM3OY6@9E}T[Y6RBDA3VOYH 1882年,第一幅融入梵高的情怀的素描。采用了类似米勒版画和英国素描的简洁,勾画出一个怀孕裸体女人轮廓;她披头散发,四肢干瘦,肚子凸起,坐在树桩上蜷缩着身体哭泣 26f36bc71f257af69b4b4fbad067f846 1883年3月11月,在我看来我常常富有如大富翁,尽管它不是每天发生的。因为在绘画中发现可以讲心灵和灵魂全部投入的东西,并赋予生命灵感和意义。无论如何我认为找到喜欢的工作很大的福气,所以不将自己列入不幸者的行列。我可能处在相当大的困境中,我的生活会暗淡。但是我不把自己归于不幸者的行列,也不是说这样就会有改观。 aa50a178cddfcc15478ebdd225dfd9b6 1889年进入圣保罗精神病院,依然在创作。一生当中唯一卖出一副画《红色的葡萄园》,最后一幅作品《麦田上的群鸦》 8fc8c464799d203271eba55ca837e0b9 四、梵高绘画启发的设计一 绘画临摹——成为大师之前先要穿上大师的妥协走一走

梵高在绘画初期通过不断模仿别人的作品积累绘画的感觉开始的,下面的例子是梵高曾经模仿的作品,可以看到构图框架是一致的,但在其中也融入了自己的一些想法,如改变人物在整体画中的占比,色彩和手法的改变等等。梵高先生的临摹作品:

1881年临摹米勒的播种者 模仿点:构图方式、人物的比例、明暗对比

6b1847db149fad531033e657ca46c01e 1889-1890年仿米勒,一天之中之午睡。 模仿点:柔和的线条手法、近景和远景之间的比例、实虚

795b8ff239a969b3b7e4585256cd3f1d 五、绘画临摹方法再设计中的应用 模仿图形设计保罗·兰德作品

在我们创作初期还没有能力有自己的独特风格时,我们不防穿上别人的鞋子,走别人走过的路。 保罗·兰德(1914年8月15日–1996年11月26日)是一位美国艺术总监和平面设计师,他最出名的企业标志设计,包括IBM,UPS,ABC标志以及史蒂夫·乔布斯的NeXT.。他是美国第一个应用瑞士平面设计风格商业艺术家。是当今美国乃至世界上最杰出的图形设计师、思想家及设计教育家之一。 aa9744f0d771dbcc58565b0f9d4aeb94 保罗兰德设计作品欣赏 161f4828f9b5418e9c02217aad1fea39 下面是临摹杰出的图形设计师保罗·兰德的作品案例: 临摹点:用类似同样的布局和模版呈现类似的设计手法,寻找设计版式中的规律。重点在图像上,文字则是辅助。

六、梵高绘画得到的启发二 多种手法做画——好的作品不是只画出来的还要选出来

当我拜读梵高的一生时惊喜的发现绘画有着和设计惊人相似的地方,比如梵高会用不同的手法对行同一幅作品进行创作,梵高先生的同一作品不同方式创作,找出最适合这幅画的绘画手法,进行对比挑选出最满意的作品。

1888年播种者 荷兰阿姆斯特丹梵高博物馆 Z9XMCHM($R86D}X~R)$Z9@2 1888年播种者 ,分别用布面油画的方式画了三幅画,巨大的柠檬黄色盘状物时太阳。黄色的天空飘着粉色的云朵。土地时紫色的,播种人和树木时铁蓝色。

第三次画的时候将整个画的结构改变,人、风景、太阳在整幅画中的的比例,大面积黄色,大面积紫色

第三幅每一幅油画中都相应的调整了构图的比例以及人和景物的占比,使得每一幅画作都有独特之处。

七、多种手法作画再设计中的应用 多方案icon设计案例:

当我拜读梵高的一生时惊喜的发现绘画有着和设计惊人相似的地方,比如梵高会用不同的手法对行同一幅作品进行创作,梵高先生的同一作品不同方式创作,找出最适合这幅画的绘画手法,进行对比挑选出最满意的作品。

设计中也可以用不同的方案来呈现同一个设计,这样会带来更多的启发沉淀,有利于完美设计的实现。下面就是一个icon 多方案设计案例。

产品需求: 为采购商城产品有保障设计一个图标;

设计理念: “保障”要传达给用户的感受是安全、可靠、信赖。

产品设计图形抽取: “盾牌”和“正方形”发撒设计。

图标风格: 采购产品整体色系为蓝色,设计风格为扁平化;采用了实色色块和线条设计;发撒图形为盾牌、坚固的正方体; 138}}6I80Z%(LE1XJ6Z_E~6 线上实际的效果演示,最后结论:结合采购整体品牌特色以及线上效果,相信你心中已经答案了。 S}FIA)7W{29}NHH1V%OQ52D8618`6M05RKH0T(CL@[@JIO 八、多梵高绘画得到的启发三 大师的绘画哲学——画家要赋予绘画灵魂:

在梵高绘画中发现绘画有着和设计惊奇的相似的地方,他将自己的情感融入到画中,给画除了本身特有的魅力之外赋予另外一种独特的特质,这种特质使得画不仅好看,而且更带有画家的思想和所要想别人传达的内心深处的想法。让画不在只是单单一幅画,而带有更多灵魂深处的力量。

创作背景: 梵高父母极其反对他从事绘画。而使得梵高不得不离开父母离开家人独自开始梦想。而个时候他母亲正在生病,他不能在家里照顾,只能用逃避的方式远离,种种的不尽如意的情况下梵高创作了这幅画,哀伤《TheSaeeow》 这幅画的女人四肢干瘪,头发脏乱,乳房下垂,周围长满杂草,看似没有希望,但画家却给她留住了一片生机希望。因为她的肚皮微凸,里面有新生的生命正在酝酿。寓意着画家自己对目前生活境况的真实写照。就像梵高自己当时的心情一样,虽然环境看不到希望,但他内心对绘画梦想的热情就像这妇人肚子里孕育的生命一般,依然充满希望。 26f36bc71f257af69b4b4fbad067f846 767334bd16fc1e0677f2e3fc5292d761 八、绘画要有灵魂再设计中也适用 一个有灵魂的简单banner设计案例:

读梵高的一生的时候惊喜的发现绘画有着和设计惊奇的相似的地方,比如梵高会用不同的手法进行统一幅作品创作,而设计中完美也尝尝用不同的想法来呈现一个设计。所以用不同的手法绘画同一个作品,会带来更多的启发沉淀,同样也适用于设计中。 Y]50@QOWVN9DYM3FYI%SM{D 视觉设计呈现 将实际钢材的纹理运用到真实的banner设计中,让用户通过设计可以感知到钢材的氛围,钢材的硬度贴近事实。

钢材banner推导 九、设计创作总结: 在我们还没有形成自己风格的时候,通过临摹一些好的作品可以帮助我们找到自己的设计风格。 画每一幅画的方法、技巧,尝试不同的风格努力尝试,找出最适合的。同样设计也适用。 每一次创造都赋予除了画本身之外的发自灵魂深处的东西。如果你的设计中有你对设计本身的思考,那么你的设计将不同。

十、有一种精神交梵高 书信摘要; 1880年9月7日:关于《播种者》我已经画了五次,两次是小幅的,三次是大幅的,我会再画的,我是那么热切地要融入人物之中。 1881年10月12日:最近我画了大量的模特儿,我找了许多人,他们都很愿意做模特儿,有挖掘者、播种人等,男人和女人。现在我正在画大量的炭笔和黑色蜡笔画。并且我也在尝试乌贼墨盒水彩。好了,我不敢冒昧说我在绘画方面取得了一些进步,但至少有一些改变。… 越来越高兴,我已经找到画人物的特殊思路了,其中受到风景画很大的影响,因为精力集中在那里。

1881年1月1日:这几天变得好一些了,我至少完成了一打画,更确切点说是一些铅笔和钢笔的素描,在我看来这些话多少药好一些。它们有几分 含糊地像拉索瓦的一些画,或者一些英国的木版画,尽管他们看起来有几分笨拙和粗糙。它们表现了一个门房、一个煤矿工、一个扫雪人、一个 雪中的行路的老女人、一类老年人等。我寄给你两幅小的作品《在途中》(EN ROUTE)《灭火之前》(DEVANT LES TISONS)。我对他们很满意, 尽管它们并不完美,但是越来越像一些东西了。

1882年1月21日:相信我,我整天创作、操劳、干苦差事,但我身心愉悦。如果不能继续努力画画或更努力画画,我将变得气馁。

1882年3月11日:对艺术而言,诚实是最好的策略。宁为了一副严谨的习作增添麻烦,也不愿投机取巧,讨好大众。我偶尔心中烦闷,想过走一些 捷径。但思考过后,让我忠于我自己,以一种粗旷的风格来表现纯朴、粗鲁单真实的东西。

1882年8月10日:我非常喜欢绘画,因为这是一个非常强烈的表达方式。

1882年7月21日:我虽然常处在痛苦的深渊,但内心深处仍有宁静、纯碎的和谐。在最穷的困的小屋,在最肮脏的角落里,我看到素描和图画。 我的心灵将被一股无法抗拒的力量引向这些食物。其他的事物渐渐对我失效,它们使我的视线越来越快的落于哪些如画的事物上。艺术需要 顽强的工作,不顾一切工作,连续的工作。至于顽强,我是说首先要不断劳作,并且不要因为这人或那人的主张丧失自己的观点。

1890年6月5日:我像个疯子一样的画画,特别是画花,是玫瑰和一束紫色…。

1883年3月11日:无论如何,我认为找到喜欢的工作是很大福气,所以我不将自己列入不幸者的行列。我的意思是为可能出在相当大的困境中, 可能我的生活会暗淡,但是,我不把自己归于不幸者的行列,也不是说会有改观。 有一种精神叫梵高: 对艺术的执着和疯狂的热情 对每一幅的感情投入 为创作出好的画坚持不懈的努力

艺术家最美好的品格; 生活真的对他来说很困苦,每一天面对生存的最基本问题。但面对这些困苦依然为自己能坚持做自己喜欢的工作而庆幸而努力,在这样环境中的梵高依然坚持不懈努力,对于我们来说我们有什么理由不去努力面对工作,面对梦想。 超凡的艺术信念,与他而言绘画好比生命。

十、梵高的死 现实残酷使他变的抑郁… 每一天睁开眼睛忍受着饥饿和债务 坚持绘画 但他的面对梦想的精神 足以让人们敬仰

随着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一点料》中,目前处于新书发行的内容保护期,所以更多内容请大家在实体书中查看。购买请移步天猫

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

01 在设计运营类需求时,我们采用的比较常规的设计形式是先设计一个漂亮的头图然后再将信息内容进行排版填充,当遇到页面中的文字元素比较繁冗时,大量内容的堆砌不仅很容易让用户浏览时产生疲劳,而且设计师在这个过程中也会容易陷入在传统框框里无法突破,在设计时感到枯燥乏味、越做越无趣。平时采集设计灵感时我们会注意到现在很多优秀的运营设计已经不仅仅局限于常规的形式,而是越来越注重整体画面给用户带来的更多愉悦感及融入感。怎样突破常规,让页面在形式及情感上更吸引用户是我们设计师值得思考的问题。

什么样的设计形式能更有趣、更容易打动用户?运营设计主要表现手法之一就是通过制造情景来渲染主题气氛。对“情景”的理解一层指场景、环境;氛围有了,那试试再增加一些情绪上的感染和共鸣把,“情景”的另一层就是指人物,情节,景物唤起人的情绪和内心境界。制造情景体验一方面是把页面信息放置到贴近生活的真实环境中,让画面符合主题并且非常直观,另一方面能引导用户展开想象,唤起某种记忆,让用户有身临其境的感受。

用户不仅作为一个看客,还能以第一人物的视角参与到画面中,让用户迅速置身场景中,带动情绪,引发用户兴趣去完成后续操作。这里总结出一些打造情景体验的具体方法及例子帮助大家去设计更有意思的运营页面:

02 空间感的渲染能让人更有“身临其境”的感觉,这种方式主要根据主题模拟真实场景,再通过整体透视的构图使画面呈现立体空间感,增加画面冲击力强,一下子吸引把用户代入到氛围中。我们来看几个例子: f1b526899771c5bc73175dcf19723b42fad4a5fa37d8e7-sl1IKu_fw658 088816d3b9db391b9a7f45adf0ffde218f3a339773c92-RVWqba_fw658副本副本

以上的例子都通过空间打造增加画面代入感,画面的气氛和现实生活中的场景极其相似,用户很容易被吸引到气氛中。需要注意的是这种立体场景的搭建对素材及整体层次的控制力要求比较高,在设计的时候需要先搭建大的画面关系,再往里头添细节和内容,同时也要注意不要让场景抢了内容的视觉焦点,在适当的时候还需要做些减法。

03 不同于上面提到的逼真空间搭建方法,这种设计方式虽然也是选取现实存在的对象,但是需要提炼一个可以将内容信息巧妙的融合串联的承载容器构建出主体轮廓,然后再将内容填充到轮廓里面。这种形式能够让用户一眼就能了解到一些信息,同时又能贴合主题很好地传达情景氛围,让页面生动更有趣味性,特别适合一些节日主题的运营页面。 5077dac3ea7dee103ef37f9464326d7041974e7a1b117d-iHuvLr_fw658副本 0d269c480df4b003df7c424cdca56de86035b09f203eda-pDFfmy副本副本

把内容放到盒子里或者一封情书中,顿时就产生了亲切感,抽象的主题通过实体显性化地表达出来,第一眼就能明白主题。这种方法需要选取合适的现实元素并对其高度概括,注意将形状尽量精简强调,避免太具象,适当地舍弃一些繁琐的、不必要的元素,以免影响阅读的内容。

04 除了还原真实场景,角度的不同也会呈现不一样的形式和感受,千篇一律的规则视角会难免让页面显得单调平庸。不妨试试模拟真实生活中的视角,我们来看几个例子: b58a4d7ad8c94c8393dd88017a78b66568fc1d0865f97-h82bVk_fw658 11054IZ5-1

这些例子往往是我们生活中很熟悉的情景却容易被忽略,工作中俯视看到正在写作的区域,对页面的倾斜还原最真实的状态;吃饭时关注自己盘子中食物的角度,亲切的视觉感受令人置身其中,感染力非常强。同样的元素主题往往变换一下画面视角的方式能巧妙的打破常规构图的呆板并不落俗套,让页面轻松活跃。同时真实的场景一下次拉近了和用户的距离,也很容易和用户内心产生共鸣。不过变换角度可能不太适合文字正常阅读,要注意文字排版保证流量的舒适性。

05 我们常常看到很多电影海报的设计中会截取某部分的方式作为的重心集中表现,最大化也是最突出,以小见大来引起注意,同时“犹抱琵琶半遮面”的方式制造更多悬念,引起观众兴趣及思考。具体运用在运营设计中又是怎么做的呢?我们来看几个例子来体会其中的设计思路。 518f2701c8473e2dc35d01ec77e07488ed2c5a9010be58-Bg82jV_fw658 bdc815cf6b602fdb13e271a43fd2e8f4f84da8866ca8e-U7fvZ0_fw658

以上的例子都是通过截取局部来吸引眼球,这种某个局部特征被放大强调的方式推翻我们常规的视觉习惯从而让感情集中强化,视觉充满神秘感瞬间抓住了用户的眼球,页面的目的也就达到了。这种方法可以多从电影、摄影中借鉴手法,通过特殊的视角打造出精彩的画面。

06 制造页面中情景体验主要通过还原现实场景再加以艺术化的表达来增强页面的整体气氛,让用户不用去阅读文字就能很快明白这是个跟主题相关的页面,代入感极强,能比较直观获取信息;同时拟物具象的方式也减少了用户认知成本,亲和的设计形式在情感上给用户更多情共鸣。当然这种方式需要设计师日常要注意观察生活中的细节,多联想与各场景相关的事物,不一定需要靠素材的堆积也能打造出动人的页面一击击中用户。

运营设计现在越来越注重个性、趣味性以及视觉冲击力,页面的形式和技巧也是多种多样,以上总结的方法希望能帮助大家在设计遭遇瓶颈时找寻一些解决思路。设计师需要时刻灵活创新汲取灵感,才能够避免按习惯性的思维去设计,不断创造出新的视觉表现。当然还有更重要的是运用方法多多进行实践转化成自己的东西,才能得到能力上的有更大地提高。

9 还记得那年的中秋节,我们捐过半盒月饼,我们成打成打的团购,不知道今年的月亮还是不是那么圆,你们期待吗? 1 记得多回家看看,小得时候,父母为我们付出了很多,安静下来的时候,我们总会沉浸到无忧无虑小时候的欢乐中,现在,偶尔,会悲伤吗? 2 现在学校劳动节好像真的会组织小朋友去种树了,我们那时候,每年老师都说要种树,大家高兴了半天,结果都是在各自的包干区扫地拖地擦玻璃,你们是吗? 3 “清明时节雨纷纷,路上行人欲断魂,借问酒家何处有,牧童遥指杏花村”…这个大家都会背吧,那…你们扫墓了吗,春游了吗,吃团粑粑了吗? 4 那个叫屈原的古人,到底跳没跳江,我不知道,但是吃粽子大家都知道,一个吃货的世界就是你能想到的粽子馅儿他有,你想不到的馅儿他还会有! 5 国庆节嘛~其实基本上都是天安门口在放鞭炮,吹口哨,外加几百个解放军叔叔走步调,为什么大家都这么happy呢,因为有7天假期丫。 6 至于圣诞节,那跟我们更是没啥关系,可是越没关系,就越显得你高大上,有木有,都说不能“闭门造车窝里搞,冲出亚洲融入洋人才算翘”~~ 7 以上文字纯属歪歪,还请大家把注意力放在我们用心营造的画面里,感受这一刻,感动在路上… 8 愿你们喜欢我们的作品,愿我们合作更愉快~ 欢迎来滨江园区6-4用户体验部来参观我们的黑板报。

动效设计的物理法则

动效作为当今提升网页感官效果的利器,在各种类型的网页中已经全面开花,如何做到自然流畅让用户感觉舒适的动画效果呢?今天就来跟大家聊一聊动效设计的物理法则,以及它是如何应用的。

首先来一发大师金句,迪士尼动画大师格里穆·乃特维克曾经说过: 1

动画制作和动效设计是本质相通的,我们需要为用户建立一种“视觉的真实”,即动作是可信的,我们需要获得的不是照搬线下场景的写实主义,而是“可信度”,要让用户感知到这个动作是成立的。这里,就要搬出高大上的物理学了!

物理学四大基本力——万有引力、电磁相互作用力、弱相互作用力、强相互作用力,我们在现实生活中能够感知到的基本上都源自万有引力(其他三种力咱也分析不出来啥)。换句话说,用户在现实生活中建立的动作经验,皆源于物体的“重量感”。要分析万有引力,就得翻出牛顿大大的课本章节了。 2

(一)牛顿第一定律

根据牛顿第一定律——惯性定律,任何物体都要保持匀速直线运动或静止状态,直到外力迫使它改变运动状态为止,说白了,就是不考虑任何力的作用的物体运动,其速度大小和方向是没有任何变化的,用公式表示: 3

通过以上公式我们可以绘制出匀速直线运动的位移-时间曲线: 11

应用到网页设计中,为了实现过渡效果,我们必须模拟出页面区块的位移-时间曲线,对于运动拆解分析得到的分段曲线,可以运用计算机图形图像造型的基本工具——贝塞尔曲线绘制出来,调用CSS3 animation-timing-function 属性中的贝塞尔曲线绘制函数cubic-bezier可以轻松的用程序模拟运动轨迹。 00 例如上图所示的贝塞尔曲线可以用四个点来定义,其中P0、P3是固定的点,它们的坐标值是默认的[0,0],[1,1]。P1、P2两点则用来控制曲线的形状和曲率,PS中的钢笔工具的锚点具有相同功能,这两个控制点的坐标值是需要我们通过cubic-bezier(x1, y1, x2, y2)自定义的,范围在[0, 1]。 对于匀速直线运动,将运动时间设置为1s,通过cubic-bezier模拟运动如下: 111

linear 动画从头到尾的速度是相同的。应用到网页的banner区域切换动效中的效果(动图需加载): 1111

感觉不是很自然,由于空气阻力的存在,程序模拟的匀速直线运动在现实生活中是很难实现的,因此对于这样一个用户平时很少感知到的运动是很难建立信任感的。这样的匀速直线运动也是我们在进行动效设计时需要极力避免的。考虑到需要分析物体运动的受力情况,我们借助牛顿第二定律来拆解运动。

(二)牛顿第二定律

根据牛顿第二定律——物体加速度的大小跟作用力成正比,跟物体的质量成反比,加速度的方向跟作用力的方向相同。当物体持续受到一个不变的力的作用时,它将做匀加速直线运动,用公式表示: 4

绘制出匀加速直线运动的位移-时间曲线: 22

通过cubic-bezier模拟运动如下: 111in

ease-in 动画从低速开始,逐渐加速,收尾态速度最快。应用效果: 1111in

开始状态符合静止物体开始运动的物理规律,但是收尾态不太符合,物体在结束运动之前速度是整个运动过程中最快的,这是不合逻辑的。 如果我们让收尾状态符合物理法则,那么就是需要让物体减速下来,匀减速运动的公式如下: 5

绘制出匀加速直线运动的位移-时间曲线: 33

通过cubic-bezier模拟运动如下: 111out

ease-out 动画从高速开始,以低速结束。应用效果: 1111out

模拟的是物体收到一个持续时间很短的推力作用后自然滑行并慢慢停止的过程。在本应用场景使用这种效果是比较合适的,banner图片刚开始切换运动时,需要用一个比较快的速度来吸引用户的注意力“嗨!这儿有新的信息!”,在快要抵达最终位置的时候,需要逐渐慢下来,因为此时用户已经将注意力转移到新的banner图上了,用户需要的是这一区块逐渐慢下来好看清楚上面的内容,获取信息。

如果想要让banner图片在起始阶段也是柔和地出现,可以缓入缓出一起使用,位移-时间曲线: 44

通过cubic-bezier模拟运动如下: 111in-out

ease-in-out 动画从低速开始,以低速结束。应用效果: 1111in-out

切换效果非常的柔和,也就是我们常说的“缓入缓出”。

(三)赋予材质——速度、形变和反馈

好的动效在满足了基本的物理原则之后还有很多“材质”上的细节补充,主要有速度、形变和反馈这三个方面。 如果我们想要给上面的案例加上一点重量感,也就是让物体看上去“有质量”,可以再速度上做一点文章,调节一下运动曲线; 55

通过cubic-bezier模拟运动: 111ease

ease动画从低速开始,动画以低速开始,然后加快,在结束前变慢。应用效果: 1111ease

我们可以用这种开始态和结束态绝对值不等的加速度让运动产生“粘滞感”,可以让运动的区块产生更加真实的互动效果。但是另一方面,不对等的加速和减速过程有可能会让动效产生拖泥带水、不干脆的感觉,具体应用还是要具体情况具体分析。

做到对物体运动过程的拆解分析再程序模拟之后,我们还可以对运动物体的形状上花一些小心思,通过物体形变和运动的反馈效果可以为物体赋予“材质”,来看几个不错的Web动效案例。

5a 采用ease-out的参数设置,使得所有元素迅速进入用户视线,又缓慢到达目标位置,动画流畅自然。

5b 通过不同区块速度差来实现拉伸页面的效果,但是仔细看每一个区块的运动,发现实际上是没有形变的,巧妙的速度变化也可以让整个页面的切换变得生动起来。

5c 通过形变的设置,使得不同高度的柱状图形变会显得很有弹性,仔细看该网页表现的都是“Top”的数据,为柱状图赋予弹性效果也是非常符合其所表现的数据“情绪”的,整个页面都会显得趣味生动。

5d 通过下拉框的反弹效果现实区块的“窗帘”设计,运动反馈也可以为网页元素赋予材质。

本文主要分析的案例集中在网页动效当中运用最广泛的线性运动,对于基本动效的其他动作,如缩放、旋转、不透明度等等效果的变化,其本质上是相通的,结合物理法则的分析实践均可以做出自然流畅的效果, 总结一下应用流程: 1. 分析具体内容区块的运动,结合需求本身绘制出区块运动的运动数值-运动时间曲线。 2. 拆解曲线,运用贝塞尔曲线模拟运动。 3. 通过速度调整、材质形状变化和运动反馈来为区块赋予动效丰富的细节。

感谢越澄同学的技术支持,送上脚本传送门: http://www.w3school.com.cn/cssref/pr_animation-timing-function.asp http://cubic-bezier.com/#.63,0,1,1

1 02 网站产品客户声音收集通道分散,不易聚集。Pd难以收集优质客户需求,ued无法获得一手用户声音。客户没有统一的提建议的概念及更加有效的反馈机制,1688需要更加完整的建议系统。

前台用户:面对1688网站全体用户。
用户性别/年龄分析:以30岁上下的男性为主

04 1.色彩制定

首先来平台提建议的用户往往是在使用网站时遇到问题或不满,可能是带有情绪的,这个建议平台在颜色的运用方面就希望能起到一些安抚作用,绿色往往给人视觉感受通常是心情平静、舒适、健康、希望,也有优化产品的含义,对于30岁左右的主要用户而言,这个颜色也比较能表现活力、明快的视觉感受。同时又不希望给人过冷的感觉,所以和一些黄色搭配设计,页面的底色并非简单的浅灰,而是饱和度较低的米黄色。
原生关键词收集: 2 查看更多