澳纽网

优设 - 澳纽网Ausnz.net聚合阅读



原来日本设计还能这么萌!53岁老顽童的“脑洞之作”风靡日本!

本文转自日本设计小站(ID:japandesign),已获得其授权。

说起日本设计,你脑子里冒出的第一个印象是不是「性冷淡」?

MUJI、优衣库、nendo工作室,清一色的简单灰白挂,看了就让人想到「断舍离」。

但是,并非所有的日本设计,都是这个调调的,也有可能是下面这样的。

平淡无奇的红绿灯,摇身一变竟然变成了枫叶的形状?

绿、黄、红三色正好对应不同季节下枫叶的颜色,有了它就算一路碰到红灯,情绪也不会暴躁咯。

那些乘电梯永远不看脚下的小孩,银杏落叶铺成的电梯,足够吸引你的目光了吧?这玩意儿可比「注意脚下」的标语好使多了。

以上这些脑洞大开的设计全都来自于日本GOES公司创始人前田贤刚,他是个53岁的老顽童,低调到日站君只能找到他的这么一张小照片。

虽然公司总共就5个人,但却和资生堂、奥林巴斯、加拿大观光局等大客户都合作过。

看了他们的作品之后,或许会颠覆你对日本设计的认知。原来日本人认真卖起萌来,也是一把好手呐!

居家好物篇

看到这个日站君忍不住哼出声「童年的纸飞机终于飞回我手里~」

但是千万别真飞出去,因为它的真实身份其实是一个盐罐。

「灵魂撒盐」都弱爆了,「纸飞机撒盐」了解一下,做饭的时候还能顺便追忆下童年。

欸,这堆雪是干嘛的?

答案揭晓,其实这是一个门挡。

或者用来做书立也可以。永远不化的积雪,简直圆了南方孩子一个「看雪梦」,以后再也不用花5块钱,雇北方人在雪上写名字了。

虽然摸清了前田贤刚「不按套路出牌」的秉性,但日站君看到下面这个还是迷茫了,曲别针被掰弯了?

而它的实际用途竟然是固定海报的钉子!一眼扫过去,毫无违和感。不知道的可能还想求链接,哪家的回形针这么刚连墙都能戳穿。

回形针都能钉海报了,所以这肯定不是普通办公用的燕尾夹。

没错,从底部的杆子就能看出些端倪,人家就是个吧台椅。

事情变得没那么简单了,看GOES家的作品,仿佛演变成了一个「猜猜我是谁」的游戏。偶尔加班来一瓶啤酒,还挺有情调的。

哈哈你又猜错了,它只是提醒你工作的便利贴。

有情调的来了,磁带卷笔刀。

高科技仪器卷笔刀,连削铅笔都能变成一件有仪式感的事。

吃货篇

一块吐司,看上去松软香甜,让人忍不住想咬上一口。

不过别真咬,因为它是个如假包换的手机壳。这样的手机壳千万别给我,我每天都会饿醒的。

藏了块「蛋糕」的茶杯,有了它喝水都是甜甜的。

一箱来自远方的包裹,中间透出的红苹果又大又圆,任哪个快递小哥看了,都会轻拿轻放吧。

嘿嘿又被骗啦,人家只是一卷胶带,就是长得逼真了点。

夏日炎炎,来把「五花肉扇子」扇扇风。友情提醒,别在午饭前夕使用,不然可能会惨遭同事群殴!

再穿双「牛排拖鞋」,总觉得脚底板好像油油的。

冰淇淋挂钩,牢固性有待检验,总担心天一热就化了……

还有新鲜出炉的「蔬菜瓜果戒指」,青椒、草莓、胡萝卜、玉米,应有尽有,敢戴出去的,日站君敬你是条汉子。

萌宠篇

之前的巧克力总算知道是被谁偷吃的了,巧克力上的猫脚印透露了一切。

想和你家阿喵玩躲猫猫吗?纸袋子就是个不错的藏身处噢,露出的一截小尾巴,能萌死个人。

往袋子里一瞅,果然在这儿躲着呢。

喵星人款「暗中观察」插座,你家主子盯着呢,看你还敢忘拔插头!

路障也贴上阿喵的照片,醒目值立马翻了个倍。

这只萌萌的小兔子表盘,总觉得少了点什么。

如果你穿的是小白鞋,调整好角度抬眼看,少的两兔子耳朵终于补齐了。

难以想象,这些居然全出自一个大叔之手,所以说,千万别小看大叔,他可能比20多岁的你更有少女心。

宅男篇

一个画着美女的扇子,就能够成为宅男爱用品了吗?

那是你没get它的正确使用方式,只要角度找的好,就能营造出下图的场景,简直是单身男性的福音哇。

谁说露肩装是女性的专属?

男生照样可以拥有。穿上它,保准你是整条街最靓的仔。

精神病人思维广,中二少年欢乐多,漫画式镜子专为每一位中二魂爆棚的你而设。

每天起床一照镜子,谁还不是故事的主人公。

一般的伞都不够符合中二少年的气质,得撑这一把才行。

别人在明你在暗,再也不怕和陌生人进行迷之眼神对视了。

要是嫌那把不够炫酷,八星八箭全钻石豪华版足够闪瞎你的眼了吧?

下面是新时代年轻人必备的手机三件套,自带打光板的手机,绝对的合影利器!

手机也得好好防晒,「脸基尼」也给用上。

手指不够长的少年,只需一根「手指加长器」,单手按到手机屏的各个角落,从此不再是梦。

这突破银河系的脑洞,日站君不禁想为它们双击666。

GOES公司的理念是要做「引人注意而独特的idea」,看了他们的作品应该没有人会觉得他们没做到吧。

人们总会忽视眼前的风景,前田把生活中的小物件摘出来,再融入自己的脑洞。

于是当大家再看到它们时会眼前一亮,然后会心一笑,感受到创意的美好,这就是设计的意义吧。

当性冷淡、极简风大行其道,他们却致力于把普通平凡的事物玩出新花样,告别无聊的日常。果然有趣的灵魂才是万里挑一!

以上小物均为良心介绍,如有种草概不负责,别问日站君要链接,因为日站君也没有。2019年都到了,我们也稍微来点改变呗,或许比起性冷淡,不如卖萌来的赞。

每日正午十二点,和日站站长说一句:“设计说” 三个字,站长会为您推送一条设计物语,365天,365句经典,我们相约每日正午时分,不见不散。

优设大课堂

Source: 优设网 – UISDC | 20 Jan 2019 | 7:59 am(NZT)

是时候从头了解一下游戏化设计的基本要素

编者按:我们看过太多游戏化设计的文章,其中太多内容都只是关于技巧,而很少从内核上把握游戏化设计。Eugen Eşanu 的这个新系列则从头开始梳理游戏化设计的基本要素,道在术前,也许你所一直迷惑的问题,在这里就有答案。这是整个系列的第一篇。

人们常说游戏使人上瘾,是对现实的逃离。我也认同这个说法,沉浸在游戏的世界里,确实更容易从痛苦的现实中逃离出来,这样没有任何好处。但是事物从来都具有两面性,对于游戏,和游戏背后的原理,我们不能简单的一刀切。

十岁那年我得到了人生第一台游戏机,从那时起我便玩起了游戏。对于游戏这件事情,我也是有所体会的。

而针对游戏成瘾这个问题,我们当然可以持有不同的观点,在道德层面上的辩论也从未停止,但是这不是今天我们要讨论的重点。我更想深入探讨一下游戏的基本原理,和很多其他工具、方法一样,它同样可以满足人们真正的需求,并使我们成为更好的人。在今天的文章中,我们将会深入探讨这一问题,并逐步揭示游戏化设计是如何应用于设计,创造更好的产品。

根据调研,世界各地的游戏玩家每周的游戏时间总和大约为30亿小时,我想这一事实可以说明一些问题。从某种意义上来说,我们构建的现实世界正在被游戏所改变,虚拟世界某种意义上更能满足我们的需求。换句话来说,现实世界并不足以满足我们全部的需求。

在游戏中,玩家可以获得现实世界中所没有的奖赏。游戏以不同于现实世界的方式来引导和激励玩家,也因此而吸引人。另一方面,如果我们不做些什么而放任游戏肆意发展,十年后地球上一半以上的人口,将会沉浸在游戏的世界中,一如电影《头号玩家》中的设定。不过,另一方面,我们也可以围绕这一趋势的特征,设计出帮助我们提升自我的产品。

刚刚读完Jane McGonigal的《游戏改变世界》一书,我想分享一些我从中获得的启发,这些想法是关于如何将游戏化做得更好的。

数据所展现的广阔图景

美国是世界上最大的游戏市场,我们可以从这些数据入手,了解游戏化设计的特征。调研数据表明:

我常说研究人类行为是最重要的,因为这会让你以不同的视角看待事物。看看这些仍在不断增长的数据,可以说在游戏化设计上的投入,会在未来为你带来积极的回报。

了解游戏运作模式

游戏开发者们比任何人都了解如何激励玩家尽量努力,如何正确给予用户奖励。他们也懂得如何最大程度地简化协作方式。在激励玩家组建更大的团队、更持久的游戏、挑战更困难的关卡上,游戏开发者们确实在不断创新。相比之下,使用这样丰富的游戏化设计经验,去给在线课程设计激励制度,或者是给街角的自助餐厅设计方案,绝对属于降维打击。

如何界定游戏

剔除游戏的技术和开发之后,游戏的本身的四个基本元素就清晰了:目标、规则、反馈系统和参与的意愿。

  1. 目标

目标是玩家要努力达成的一个具体结果,游戏中目标和任务会给予玩家一种使命感。

  2. 规则

规则则是玩家在达成目标过程中所设定的约束和限制。我在《Why Small Teams Win and Bigger Ones Fail》这一文章中曾提及,在限制的约束之下,玩家有时候会为解决问题或达成目标,而探索出创造性的思路。

  3. 反馈系统

反馈系统能告诉玩家他们目标有多远。反馈系统的呈现形式比较丰富多样,积分、等级、进度条等都是它的组成部分。我在《The Importance of a Feedback System》一文中有具体的描述。更直白地说,反馈系统就是用来告诉你「游戏什么时候结束」。

  4. 参与的意愿

参与的意愿是游戏必不可少的一个部分,它意味着每个玩家都认同游戏的目标、规则以及反馈系统。也就是说,只有当玩家认同游戏,并且自愿参与到游戏当中来,整个游戏才会有效。

这一定义也许会让你觉得惊讶,因为通常我们在说游戏和游戏化设计的时候,会直接探讨游戏的叙事,成就,视觉和奖励系统等因素。这些元素固然重要,但它们并不能成就一个游戏。一个游戏是由我在上文中写到的四大元素构成的——目标、规则、反馈系统和参与的意愿。

玩游戏是一种克服非必需障碍的自愿尝试。—— Bernard Suits

游戏化设计的本质

多数试图进行游戏化设计的人都会犯一个错误:游戏化并不等同于提供什么样的积分系统或者多少种成就勋章,关键在于玩家需要付出多少辛苦和努力。

在这里要纠正一个广泛存在的误解,那就是玩游戏本身并不轻松,几乎所有的游戏都需要玩家高度集中注意力,需要非常努力才能达成目标。

我们通常会觉得那些沉浸于游戏的玩家都很懒惰,因为他们每天只知道玩游戏、玩游戏、玩游戏。但是,我们如何解释这些玩家为了游戏所付出的那些显而易见的努力?我们又该如何解释他们为了达成成就不断克服重重困境的艰难过程?

现实情况和主流观点在这个地方是相悖的,实际上游戏玩家们的表现告诉我们——我们是喜欢努力的。不过这里所说的「努力」区别于现实生活语境下常说的努力。因此当我们在讨论游戏化的时候,我们需要将目光放得更长远一些,而不是将视野仅仅局限于积分系统或者成就勋章。勋章或者积分只是整个反馈体系中很小的一部分。我们需要思考如何鼓励玩家在游戏过程做更多的努力,获得成就感。

一款好游戏是让你总是能够很好地卡在你的技能临界点之上。你很可能会在当前关卡中失败,但是当你失败的时候,总会有种再努力一点就会成功的感觉,再来一局的冲动由此而来。没有什么比在你能力的临界点上玩游戏更有吸引力的了,这种状态下会促使玩家全身心地投入其中,也就是许多游戏开发者和心理学家所说的「心流」状态。当你处于心流状态时,无论成功还是失败,都让人愉悦。——Jane McGonigal《游戏改变世界》

游戏让人在努力中得到快乐

游戏让我们快乐,是因为这种努力是我们自愿选择的。没有什么比努力本身更令人开心的了。但通常我们不会把玩游戏时候的努力和通常意义下的努力等同起来。毕竟在我们所受的教育中,玩游戏和「努力」是对立的。但事实远非如此。

游戏的对立面不是工作,是绝望。——心理学家 Brian Sutton-Smith

游戏创造出一个局面,让我们自然而然地将精力投注在自己感兴趣的事情上。而游戏化的设计通过合理的构建,使我们成为更好的自己,做我们所擅长的事情,做使我们愉悦的事情。正如上文所说,游戏是绝望的对立面。

这也从另一方面解释了为什么那么多游戏使人成瘾:游戏本身强化了人们对于达成某些成就的积极想法。从生物学的角度上来说,当我们处于一种积极参与的状态中的时候,我们更容易产生积极想法。我们开始相信自己可以在生命中达成某些成就,相信自己是有价值的。

如果在现实世界中,努力也可以带来同样的效果就好了。

为什么是游戏改变了世界?

而很多时候情况更糟,现实世界中我们所遭遇的难题还「不够难」。对,你没看错。我们感到乏味,感到自己没有用武之地。当你身处大公司,发现自己的工作内容平平无奇,并没有发挥很大的用处,此时这种感觉尤为强烈。这是「马斯洛需要理论」的其中一个层次,认同感——感到自己所做的一切和付出的努力希望被人认可。游戏便可以给予你这种认同感。

想象一下,如果每个人都变得更加努力,那么这个世界将会发生怎样巨大的改变呢?这就是当下的游戏产业正在做的事情。因此如果你正在设计一款游戏化应用或产品,那么你需要思考这个问题:我如何让用户变得更加努力?

心理学家Sonja Lyubomirsky曾经在一项研究报告中写过为什么努力使人快乐:

有些活动能够带来持久的幸福感,原因在于完成它们是通过努力得来的。你付出了时间和精力在实践中达成了目标,那么你就有能力让它们再次发生。这种掌控感和责任感本身就是一种推动力。

游戏中的内在奖励

为了使产品或应用程序坚持游戏化模式,你必须要提供更好的内在奖励。因为你提供越多可以通过努力获取的东西,人们就越感到愉悦。内在奖励有许多种,我们在这里列举了其中一些。

  1. 令人满意的任务

其实我们每时每刻都在这样渴望。诚然,对于满意工作的界定会因人而异,但每个人都抱有这种渴望。满意的工作让我们能够感受到自己有影响力和改变局面的能力。

  2. 获得成功的希望

我们需要通过生活获得价值感,渴望向别人展示自己的优点,我们也希望随着时光流逝,自己最终能够功成名就。

  3. 社会认同感

我们是社会性动物,我们倾向于构建连接、建立新的关系,以及成为组织或社群的一部分。同时我们也希望在组织中从事有意义的工作,获得社会认同感。

  4. 有意义的人生

这一点大概和第一点有些相似,因为我们会在工作中渴望寻求意义。我们希望成为更大组织的一部分,并贡献出持久的价值。

这些内在奖励是人类经验中超越对于食物、安全感等需求的至关重要的部分。因此如果你可以在产品中提供这样的内在奖励,你将更有可能帮助人们达成某个目标。

在魔兽世界中学习游戏化设计

魔兽世界是暴雪旗下最著名的游戏之一,也是全世界最受欢迎的游戏之一。即使魔兽世界现在已经没有那么火爆了,但是它依然可以给你很多关于游戏化的启发,揭示我们真正所渴望的东西。那么,是什么让这款游戏风靡全球?

Jane McGonigal 在她的书中用一个词给予了非常精准的总结:「幸福生产力」。

幸福生产力,指的是沉浸在能立即产生显著结果的工作中的体验。结果越清晰,越容易实现它,就越能体验到这种即时的幸福感。

在魔兽世界中,你的首要任务是自我提升。大家都希望得到自我提升。因此在游戏中,你化身一个角色,你的任务便是想尽一切办法让这个角色变得更强大更富有:更多经验值,更好的装备,更强的技能以及更高的声望。这所有的属性能直接从你的角色上体现出来。

对等级系统的误解

当下的许多游戏化的应用都采用了等级系统和积分体系,但是它们都没有真正领悟到等级和积分系统的本质。因此,我们接下来深入聊聊这个问题。

还是通过具体实例探讨魔兽世界的运作机制。你可以投入超过500小时的努力来达到最高级别,如果没记错的话,目前最高等级应该是120级。有意思的地方在于,当你终于抵达120级的时候,整个游戏精彩的地方才真正开始。这就是我们对等级体系理解有误的地方——在达到最高等级时应当解锁更多的挑战和成就。而绝大多数的产品,达到最高等级就意味着游戏的终结。

玩家应该可以在每一关卡解锁不同的技能、不同的故事线、开启更多任务和挑战,差不多就是这一类的东西,不要让等级系统成为游戏的全部和唯一的过程。这对于勋章和成就系统,也同样适用。它们只是表征我们完成任务的反馈体系中很小的一部分,而不是整个产品奖励制度的核心。玩家和用户付出的努力才是核心,勋章只是对这些努力的一种外在认可而已。

应用于现实世界

以在线课程为例,你可以为产品设计积分、勋章或等级系统,并让用户只从其中一些课程开始学习。只有当他们完成了初级课程的时候,才能解锁更多课程。在每一等级用户都会接受新的任务和挑战。

当然,达到最高等级和解锁最好的课程的难度系数,应该设置高一些,这也是十分重要的。为什么这么说呢?试想,当你费劲九牛二虎之力升到最高级,却发现这是所有人都可以轻易做到的事,这种等级设定还有什么意义呢?人们需要在完成其他人无法完成的任务中所带来的成就感。

因此,你可以为每一个任务设定积分,然后叠加积分用以升级。在每抵达一个新的等级,都可以解锁新的角色形象。其他人就可以清晰地看出你所处的某个等级。

当然这只是对于如何运用这些元素的一个小建议。

如何激励玩家投入超过500小时?

只需要让玩家明白最有趣的部分即将开始。魔兽世界作出很多承诺。对于一些玩家,魔兽世界保证他们为最终的挑战投入前期巨大的工作量是值得的。在达到最高等级时,你会经历肾上腺素的极度飙升。对于另一些渴望高风险度任务和极致精神刺激的玩家,它同样保证他们可以快速升级以便进入终章游戏。为什么要这样做呢?因为最有趣的部分是你和最具有挑战性的对手战斗的时候,是你获得最好的奖品,以及开启新地图和剧情等诸如此类的时刻。

另外一个关键点在于,升级体系和终章游戏一样重要,甚至更重要。正如一位玩家所说:「如果只是想跑来跑去打打怪的话,我还不如去玩反恐精英好了,那还是款免费游戏呢。」

这种反馈则再一次印证了这样一个事实:游戏化设计不应该只是给用户提供更简单的任务,而是要将每一关都设置得比卡到刚好处更难一点,这样人们就可以感到被激励、推动着去尝试更难的任务,直到达成最高成就。

大家玩魔兽世界是为了体会幸福生产力,感受投入心力的感觉、体会失败的挫败以及高风险的成功奖励。

补充一个有趣的知识点:当玩家们发现新型多人在线游戏「科南时代」平均只需要花250小时就可以通关时,大多数游戏评论家都认为玩家们不会去玩这款游戏,因为它需要玩家的付出太少了,毫无挑战性。

Jane McGonigal 在她的书中总结道:「电脑是为我们服务的,但是电子游戏则需要的是我们玩家为它卖命。」此话不假,但从根源上来说,最终还是需要玩家站在主导地位。

仔细琢磨一下,这样的想法还是挺疯狂的,对吧?通常认知当中,我们每个人都试图逃离激烈的竞争,享受平淡快乐的生活。但是,这种想法很大程度是因为大多数人在先前都未曾经历过富有意义的活动。我们内心身处渴望得到的是更多的工作与任务,或者说,去完成更让自己满意、有意义的任务。

如何提供令人满意的任务

Jane McGonigal 也在书中说过,令人满意的任务始于两大要素:一个是明确的目标,另一个则是达成目标的可行步骤,两者缺一不可。清晰的目标激励人行动,让玩家知道应该做什么。而可行的步骤确保玩家在朝着目标努力过程中不会迷惑。

魔兽世界的每一个关卡都有明确的任务目标,和清晰的收益,比如击杀10个怪或带回一个特定物品,带回特定物品后会得到相应奖赏。你也可以获得经验值用来升级或者开启新的挑战和剧情,每一个关卡都环环相扣,这样就构成了属于它的幸福生产力。

魔兽世界不是一款益智游戏,或者试错调查。你只需要完成任务,收获奖励。

令人渴望的幸福生产力

Sonja Lyubomirsky 在《幸福之道》中说,提高一个人生活质量最快捷的方法是「给他一个明确的目标,一些需要完成的事项和一些值得期待的奖赏。」她说,「当出现一个匹配相应目标的任务时,它会给我们推动力和目的感。」因此在魔兽世界中的任务伴随着奖励。每一次升级和每一个关卡都在激励玩家挑战比先前难度更高的任务,我们也热衷于此。

提供激励和适度进步

一个令人满意的任务始于激励和适度进步。想要让完成任务的玩家感到满意和高兴,首先这个任务需要足够明确,并且完成过程要迅速,并且玩家要能直观地看到努力所带来的结果。

可见的结果令人愉悦,是因为它们积极地反映玩家的能力。当看到自己的成就时,玩家会产生自我价值感。魔兽世界的精彩之处便在于它实时展现玩家能达成的成就。当玩家的眼前不断闪过「耐力+1、智力+1、力量+1」的提示,会让他们清晰地感知到自己的每一次努力都使得自身变得更强大。这就是适度的进步感。

玩家同样可以通过观察自己的角色形象来感知进步。角色会随着时间推移,获得更多更好的盔甲、宝石和武器,这是一种可视的反馈。这种方式也同样可以应用在APP的游戏化设计中,随着每一个任务的完成,可以针对每一个等级给用户提供不同的奖励。当用户对比自身和其他人的时候,就可以清晰地看出谁的级别更高。

如果不能从视觉上判断自己努力的成果,那么我们是不会在前进过程中产生真正的自我满足感的。但遗憾的是,大多数人的工作都是如此。── Jane McGonigal

游戏不仅让人获得自我提升,同时也会给人归属感,比如玩家可以加入不同的工会,召集10到25人的队伍刷各种各样的任务。还有一项有趣的统计数据证明,如果和朋友一起做某件事,人们会更加容易坚持下去。

在健身人群中曾做过这样一个实验——如果你和朋友或健身教练一起锻炼,你完成锻炼计划的几率会高出90%。如果你自己健身,你有50%的几率半途而废。这也是游戏化的一个重要方面——围绕它构建的社群。有时候,和朋友一起玩总比自己一个人好。

所以,令人满意的任务所需要的是:它必须向我们展示清晰、可立即实施的目标,并向我们展示我们实现了这些目标后的直接和即时反馈。

结语

我们获得的奖励是真实的还是虚拟的并不重要,仔细想想,其实我们并不是很在意这个。我们在意的是真实的情感奖励。魔兽世界是一个很好的范例,当然,你带入其他的优秀游戏也同样可以得到类似的结论。玩家在游戏中投入大量的时间,按McGonigal的话来讲,魔兽世界的玩家退出率是0%。如果你可以把这些规律应用于自己产品的游戏化设计,你便可以取得成功。

后记:文中大量数据和信息来源于Jane McGonigal的《游戏改变世界》一书。如果你是一个和数据打交道的人,我建议你阅读这本书,获取所有必要的数据和研究报告。就算你不是热爱数据分析的人,这本书也有很高的阅读价值。

优设大课堂

Source: 优设网 – UISDC | 20 Jan 2019 | 7:57 am(NZT)

在构思方案的时候,开外挂是一种什么样的状态?

@研习设K先生 :在我们欣赏优秀作品的时候,内心之中总会爆发出一阵阵惊叹,有想法、有创意、做的真好,同时也会扪心自问,明明都是很简单的变化,我为什么就想不到呢?是因为自己太笨了?不是的,其实寻找所谓的灵感和创意也是有套路的,我们只要掌握了合适的方法,也能和别人一样设计出优秀的图形创意作品。今天的内容就教给大家一种设计师在工作中最常用的方法,这种方法可以帮助我们打破大脑的固定思维、拓展自己的创意边界,并且能把创意点筛选结合,成为优质的创意方法。

我们是如何寻找灵感的

在平时设计的过程中,我们大部分设计师都是从思维与工具这两个层面来寻找创意点的。

  1. 思维层面

思维是指人脑对客观存在事物的概括与间接的反应,这是百度说的,如果你不需要去参加什么心理学之类的考试,我们把他理解成一种思考的方式就可以了。把平凡的东西变得不平凡,就需要通过我们的思维实现。

使用方法还是凭借直觉

思维层面包括两种方式,一种是依靠理性的方法来寻找创意点的。比如思维导图,它就是偏向计划、构思的工作方式,这是一种遵循逻辑的方法;一种是凭借直觉灵感来寻找创意,灵光一现的感觉,偏向感性,如果找到了我们需要的创意,就会产生类似顿悟的感觉。

  2. 工具层面

工具层面很好理解,就是在思维层面的基础上,使用工具绘制图形,在绘制的过程中不断的思考推演改进,最后找到最优质的创意。

先画草图还是直接制作

手绘草图是指设计师在纸张或使用手绘板等工具绘制草稿找创意的过程,很常用的方式。软件绘制指的是直接使用软件绘制图形,寻找创意点。这是工作方式和习惯的问题,只要创意点找到了,只要不是抄的,先画草图还是直接在软件中绘制都没问题。

  3. 哪种方式更好

这四种方式不分好坏,只是四种常用的方式而已,他们之间的关系是可以相互转化的,最后能不能出好的结果才最重要。

其实,每个人的工作习惯都不一样。我的答案是,他们都很合理,都用得上。因为在思考的过程中,你可能先有了想法,又用思维导图把想法整合成了创意点;也可能通过手绘想到了好点子,再用电脑制作,甚至在制作的时候,发现了更好的点子,又用笔画出了几个方向,再回到电脑上绘制。今天要谈的头脑风暴这些方法,在里面基本都用得上。

优势与作用

头脑风暴发散思维

注意,我们在设计的过程中使用的头脑风暴,和你在百度搜到的或者其他行业所使用的头脑风暴是不一样的。

  1. 什么是头脑风暴

头脑风暴通过集思广益、发挥集体智慧,迅速地获得大量的新设想与创意,这是一种极为有效的开启创新思维的方法。广义上的头脑风暴简单来说就是一种大家一起思考,来解决一个具体问题的方法。

这种方法经常被各种企业用在会议、团队建设等地方,用来搜集想法或者在团队建设中培养员工的活跃性很不错。头脑风暴有一套成型的规则流程,感兴趣的话可以去了解一下,这里就不多说了,对我们的工作帮助不大。

我们设计师在寻找创意的时候,不会喜欢有一大群人凑在一起畅所欲言,搞什么会议类的风暴,一群指点江山的神在你的周围叽叽喳喳的,这种场景想想就很可怕。这里的头脑风暴其实指的是一种发散性思维,我们自己就可以。

  2. 什么是发散性思维

同样一个问题,前面提到的头脑风暴是一群人来解决,而发散性思维说的是设计师个人的思考。他是把关键信息向外拓展的过程,是围绕一个点,向不同的方向、角度,全面扩散思维方法,能给我们的方案,提供更多的选择。

发散性思维的核心是对关键信息尽量产生多个发散点,即创意点,每个创意点都可以继续产生新的发散点,不断重复几乎没有尽头。形成的创意点越多,产生优质创意的几率也就越大。类似上图的雪花扩散的形状。

  3. 不要限制思维

在进行发散性思维的过程中,不要限制自己的思维想法,理性的、符合逻辑的创意点可以,感性的、天马行空的想法也没关系,想到了就记录下来。这个过程重视的不是创意点的质量,而是数量。

图A从关键信息中发散出了8个创意点,如果我们的思维被各种规定、规则束缚的话,留给我们的思考空间就是有限的,这就不利于我们找到更多的可能性。而图B把这些束缚打开,就可以提供给我们无限的发散思考的空间,帮助我们找到更多的可能性,从而获取更多优质的创意。下面我们以圆形为关键字,来简单的联系一下发散性思维的过程。

圆形能想到单色的圆、空心的圆、点组成的圆、有材质的圆、立体的圆等等。不过,这都是在圆形的本身做文章,想的还不够远。

思维再往外散一些,圆形的东西有什么?足球、小朋友的脑袋、瓶盖、瓢虫、蒲公英、海螺,他们都是圆形的。那圆形他的含义有哪些?能代表什么?我想到了猴子,他是我们人类的祖先,有起源的含义;团团圆圆,又能想到家庭;大海,生命的起源;玫瑰,缘分、爱情;宇宙,万物的起源;放在一起的手,团结有爱、团队合作都可以,这些只能算第一层的联想。

我们选择小朋友继续发散,小朋友也是人类对吧?人还能分成老人、男人、女人、人妖、强壮的人、神秘的人、正脸、侧脸、二次元的漫画人物的头像,或者正在做某件事的人,比如在做瑜伽的女人,完整的人。用他来继续发散。

有整体就有部分,我们把整个人拆开,又可以在这第三层得到更多的创意点。头发、脚、指甲、腿、手、嘴、鼻子、眼睛、耳朵、人头等。这是第三层了,还不够的话我们继续,把人头拿出来继续。

从人头开始第四层联想,这一层我们尝试一下由浅到深的联想。皮肤之下是什么?肌肉组织对吧?肌肉的下面还藏着头骨,在头骨的下面还有人的大脑,大脑中又包含着神经元,由神经元又让我想到了 DNA,这也差不多了,就不再继续往下拓展了。

这就是一组简单的发散性思维联想的过程,从一个圆形就能发散出几乎无限的事物。通过这种方式可以帮我们找到那些在别人看来脑洞大开的创意。给你一个圆形,作为正常人,你很难想到骷髅、大脑、DNA之类的东西吧?

小贴士

一个小规律,发散联想出的信息离关键字越近,他们和项目主题的关联性就越强;发散联想出的信息离关键字越远,我们就越容易从这些信息中找到别人或自己没想到过的优质创意。

思维导图集中思维

头脑风暴与发散性思维搞清楚了,下面我们来研究一下思维导图与集中思维的关系与应用,是为了配合头脑风暴使用的,也可以看作是他的一部分。

  1. 什么是思维导图

什么是思维导图?把他看成是帮你思考的辅助工具就行,作用有点像我们玩游戏用的辅助软件——外挂。他属于视觉化的头脑风暴工具。

思维导图还有很多叫法以及变种,比如脑图、心智地图、脑力激荡图、灵感触发图、概念地图、树状图、树枝图或思维地图,很多很杂,但是他们的原理都是一样的,没必要去逐个研究。

一个作用是帮我们记忆的,一个是方便我们思考、找联系的,还有一个,是帮我们有重点的学习的。不过记忆和学习对找灵感,帮助不大。思考,方便我们找到信息之间联系,这个作用,对我们来说,才是最重要的。只要找到了事物之间的联系,就可以进入到集中思维的阶段了。

  2. 集中思维激活创意点

头脑风暴能想出一堆信息,在集中思维的阶段,就可以把那些和主题没关系的去掉了。发散思维是由点到面,集中思维又把面引向了点。

在发散性思维联想的过程中,思考空间被局限是不对的,但是集中思维中,我们现在已经开始筛选创意了,最后的方案不需要那些没用的信息。这时候,限制、规定、原则能帮助我们画出一个思考范围。在这个范围内的信息,向主题集中,进行比较、筛选,符合我们要求的才是创意点。

在我们筛选方案的过程中,可以选择单个创意点完成项目,也可以多个创意点同时结合来形成方案。

比如苹果的LOGO,这里拿他举个例子,关于苹果LOGO的故事太多了,就是打个比方。一个被咬过的苹果就搞定了这个LOGO。

图钉的就是两个创意点完成的,一个公司名字的首字母P,再结合图钉这个物体就很好的传达出了图钉这个网站的产品属性。

这是一款关于游戏或玩具的LOGO图形,他这里就使用了拼图、骰子、笑脸这三个创意点,不错的方案。

  3. 如何寻找联系

这个时候会有同学问了,我们通过关键字发散出那么多的创意点,由一个创意点设计出的作品倒好说,两个以上的创意点怎么把它们联系到一起?

最常用的两种,一是根据形态特征来寻找相似之处;二是通过关键信息含义内容的联想来引申出联系。柠檬与切割的西瓜含义相似,都是水果,而西瓜与金字塔的外形相似,形状都是三角型,这就是他们的联系。

形态相似

形态相似不一定就是形状一样的,信息之间的某些特征有组合关系的话,一样算在里面。右边的这个图形就是钢琴、字母P、琴键组合在一起的。

这个图形是在《平面高手课堂!系统梳理 LOGO 里的正负形知识》的教程里做的案例。它也是从这些具有沟通、交流含义的信息里找形态相似的两个元素拼在一起的。

含义相连

德国足球队的logo,他的主体用的是一只老鹰。这么多具有运动精神的小动物,为什么要选老鹰?狮子很凶猛、豹子跑得快、乌鸦聪明对吧?这个是因为和其他小动物相比,鹰在德国自古以来就是很神圣的象征,更能代表德国的精神。这就是这个图形和德国风俗文化的联系,也就是内容相连。

同样是足球队,日本选的就是乌鸦。别看有些地方觉得乌鸦是不详之物,它在日本的地位可是正经的神鸟。其实它在中国也是神鸟,在很久以前,一只凤凰来到了锅炉房,然后变成了烧煤的凤凰。

使用抽象的思维思考

在用头脑风暴找创意的时候,思考的方式也同样重要。抽象的思考方式就要比具象的好。为什么这么说?主要有三个好处。

  1. 产生更多联想

信息抽象化以后,抽象的观察能帮助我们产生更多联想,方便我们找到更多的信息,就容易产生更多的创意方案。

当我们看到一张具象的地球图片,想到的一定地球。把地球抽象为圆形,看到它,联想出的信息就要比单纯的地球多,信息多了,想到的方案自然就多。

  2. 使交叉联系成为可能

抽象的事物更容易找到共同点,这种共同点能把两个原本不相关的事物联系到一起,在我们设计LOGO或者创意海报中极其有用。

篮球与地球在逻辑上是不能相等的,他们在含义上没什么联系。但是当把他们抽象化,把细节去掉以后发现,他们本质上就是两个圆形,关系是相等的,这就使他们之间产生了联系。

  3. 方便找到共同点

抽象的思考可以方便我们认识和察觉到信息之间的联系,找到他们之间的联系是设计一款优质创意图形的基础。

他们之间的共同点是什么?

太阳、冰雪、烟花,我们看这种具象的图片很难看出他们三者之间存在着什么联系。如果非要硬上的话也行,比如说太阳融化了冰雪之后,欢乐的老百姓放起了烟花,但太牵强了是吧?

把他们三个抽象化,他们的共同点是交叉的、向外发散的。这样就把看似没什么联系的三个图形联系到一起。一种交叉、向外发散的图形可以同时代表太阳、冰雪、烟花这三个信息,图形的含义就大大增加了。

抽象化的思维与抽象化的元素,能帮助我们找到元素与元素,或元素与主题的共同点与关联性;反过来也一样,这些共同点与关联性也会在头脑风暴的过程中帮我们带来更多的想法与创意。

使用步骤与方法

上面的内容大致把头脑风暴思维导图的概念、规则、方法以及一些需要注意的事项讲完了。下面通过一个案例的设计思考的过程,来帮助大家把这些内容串起来,看看在具体的项目中这种方法是如何使用的。

  1. 提炼关键字

许多设计师在设计LOGO的时候喜欢使用将单个字母图形化,这是一种比较容易上手的方式。不过这种方式设计的作品,如果构思创意不够巧妙的话,就算你能设计的炫酷、漂亮,也算不上是好方案。

下面我们以字母H与沟通这个关键字,来尝试设计一款LOGO图形。这就是我们进行设计的第一步,提取关于项目的关键字。

  2. 头脑风暴

确定了关键字以后,拿出纸和笔,使用头脑风暴进行联想,从关键字向外发散信息。

这个过程你想到什么信息就在纸上写什么,可以有逻辑的发散,也可以凭感觉去写,不要限制自己的思维。这里我写的只是简单的发散,如果是大型的商业项目,我们需要想的更多,这个阶段要的就是数量。

文字信息提炼出来以后,就可以把靠谱的信息图形化、抽象化,尝试寻找H与这些信息的联系。当然了,这个过程也可以边写字边画出来,顺序没有关系,凭借自己的习惯就可以。

  3. 筛选创意

找到了大量与字母H契合的信息图形,从里面选出一些相对优质的方案。可以把它们在另一张纸上重新画出来,并进行简单的优化。

把他们整理出来。注意,这些方案都是我们自己花时间想出来的,没用的草稿都可以留着,以后遇到合适的项目还能用,别浪费自己的创意。

  4. 创意对比

这么多方案,不能每个都用软件做出来,浪费时间,用排除法选出那个最靠谱的就好,简单的分析一下这些创意。

字母H加音乐符号,这是一个指向性很强的符号。如果是音乐交流之类的主题,用这个是不错的,不过表现广义上的沟通还不太合适;H和电梯开关组成的符号,也不错,但是,同样也有局限性;迷宫,这个符号传递出的信息,更多是关于选择,或者不太顺畅的沟通;H变形成的光柱,也有沟通的含义,但聚焦、展示、表演的含义更多一些。

文化、历史等方面的交流、沟通,用印章就不错。但是这种形式被用的太多,我以前就做过好多这种形式的方案;手牵手的两个人,是一种近距离的沟通,不过图形太普通了;两个十字架拼成的H,关于通灵之类的主题,他就很好用;吸血鬼牙齿组成的H,如果你遇到了他,他肯定是用牙齿和你沟通的。针对性很强的创意,用在和吸血鬼有关的题材都不错。

连接在一起的公路,能表达沟通的含义;屏幕解锁的轨迹组成的H,表达沟通、互动、开启都不错。但美中不足的是,用H解锁的话,手势会出现重复,就没有N或者Z这种字母那么连贯,转换成含义的话,就会变成沟通不太顺畅;线和网,穿插在一起,都能表达沟通连接的意思;大桥和H构成的方案,沟通、连接的意思非常清晰。反复的纠结之后,选了这个方案。

  5. 优化图形

选定了方案以后,我们可以在这个方案的基础上进行优化,这个过程中可以再继续用手绘的方式绘制,也可以直接拿到软件中绘制。

多做尝试,优化图形的过程也是一个图形创意横向发散的过程,从这个最终方案再延伸出更好的创意也不是不可能。

创意点确定了以后,我们在美观度上调整优化这个方案,选一个你认为最好的。画的比较潦草没关系,用矢量软件把它做出来就好了。

  6. 软件绘制

这种构成简洁的图形看似很容易做,但绘制的过程中会发现这些图形的细节都不是很好控制,差一点最后的效果就会差很多。

简洁不代表简陋,我们运用美学比例来优化图形的精细度。H的倾斜角度在这里使用的是黄金三角型两条边线的角度就很舒服。

确定了主体倾斜角度以后,主体H周围的斜线,都以H中最粗的线条为标准,成倍数关系分布的,目的也是为了强化图形的秩序与节奏感。

最后为绘制好的图形添加文字内容,注意文字组与图形之间的关系,他们的关系也是相互之间存在联系的,这个LOGO简单的设计流程就走完了。

总结

做一下总结,今天内容的主题是头脑风暴的使用方法,其实也是我们做设计的一套简单的流程。先提取关键信息,再做头脑风暴,然后筛选创意,做对比,选择一些比较好的方案,优化图形,最后在软件中绘制出来。

欢迎关注研习社的微信公众号:「Yanxishe2017」

优设大课堂

Source: 优设网 – UISDC | 18 Jan 2019 | 9:23 pm(NZT)

她为这部电影设计的海报,竟让大师黄海成了绿叶?

@你丫才美工 :想不到强大如设计师黄海,终于也给人当了一回绿叶。

提到「蹬蹬蹬蹬」有人会想到「英特尔」的专用曲,而童心未泯的人,就可能会唱起《千年等一回》。

无论是赵雅芝的《新白娘子传奇》,还是王祖贤张曼玉出演的《青蛇》,从记事开始,就是暑假标配。没能在电视中看到她们婀娜的身影,那么这个暑假,就算不上过得完美。

不过比起那个拨号上网的年代,现在的小孩子们可能又要多一个选项,就是正在热映的《白蛇:缘起》。

先说说动画电影拿8.0分是个什么概念,比《大鱼海棠》高出整整1分多,甚至比宫崎骏最新作还高0.1分。

而之所以能拿到这个成绩,离不开追光动画精益求精的动画技术水平,从流出的剧照就可见一斑。

你瞧瞧这光!

再瞧瞧这水!

这小破药铺子!

这白蛇、这蒲公英!

连头发丝都是一缕一缕的!

豆瓣上甚至有从业人员说,制作上「与迪士尼比,没有肉眼可见的差距」。

等等?国内有这么厉害的公司?我怎么没听说过?

没听说过就对了,故事还得从土豆网创始人王微说起。

自从土豆网和优酷网合并之后,王微拿着一大笔「养老金」离开了亲手创办的土豆网,过上了自己的「追梦生活」。创办「追光动画」,做动画。

新成立的「追光动画」并不缺钱,也张罗了一批国内顶尖的人才,接连产出了几部不输迪士尼的精美动画作品。

比如2016年的《小门神》:

2017年的《阿唐奇遇》:

2018年的《猫与桃花源》:

跟某些「国产动画」简直是云泥之别。那为什么视觉效果都这么好了,还是没什么名气呢?你可还记得土豆网的Slogan?

正是曾经触动无数用户的这句:

王微显然是把自己都绕进去了,创办了「追光动画」后,执意要担任动画的编剧、导演。

编导外行,害得每一部的剧情都烂得挺匀称的…

市面上几乎没有自来水不说,评论还齐刷刷都是「制作良心,就是剧情太烂」。

直到终于把老板逼到了幕后,这才有了《白蛇:缘起》今天这般的视效剧情两开花。

那么说完了这些花边新闻,该说说设计师黄海,怎么就给人当了绿叶呢?

这次《白蛇:缘起》的主打海报有两款,一款是出自黄海之手的「国际版」,一款出自张渔,且称呼为「东方版」。

首先得说,「国际版海报」依旧体现了黄海大师级的水平,无论构图、排版还是大小对比都是黄海最为善用的经典处理。

画面以白蛇的眼眸作为主视觉,睫毛低垂,根根分明,落泪的眸中,映出与前世许宣携手共渡的美好回忆。

仅凭借这一张海报,就贯通了,白蛇、许宣、许仙三人的故事。

但观众的注意力,却更多集中在了另一张不太寻常的「东方版」海报里。

画中的小白蛇许宣含情相望,却注定人妖有别不得相伴。

白蛇的温婉与许宣的坚毅,通过不同身姿呈现在纸上。

而无论周围如何暗流涌动也都无法斩断二人的缘分。

如果说「国际版」海报所采用的,是国际通行的设计语言。那么「东方版」海报中所使用的是饱含东方韵味的神秘方块字,不可不谓别有一番韵味。

海报的作者,就是张渔。

虽然你之前不知道张渔是谁,但你怕是早已见过她的海报。

张渔的作画都很有个人的风格看上去有点像水墨,却是与敦煌壁画同宗的岩彩画。

而原本学习水墨作画的张渔,在一次机缘巧合下来到敦煌,对先人的壁画感到震撼不已,并从此就爱上了岩彩这样一门颇为冷门的艺术。极写意的水墨与极繁复的岩彩造就了她如今独特的绘画风格。

所谓岩彩,是采用天然矿物质作为颜料进行创作,所谓画画一分钟,研墨半小时,只能手绘,板绘效果远不能及。所有令人惊艳不已的线条都来自于张渔扎实的功底,但这并不意味着岩彩作品只能是静态,提取自张渔岩彩画的素材稍加处理,就成就了几部电影水墨韵味极为强烈的开场片头。

点击查看完整《知否》片头

点击查看完整《画壁》片头

真可谓是外有黄海,内有张渔啊。

那看了这么多,有没有什么办法,让我也能画得这么好呢?答案当然是有的!傻愣着干什么,买颜料去吧!

欢迎同学们关注最充满智(dou)慧(bi)的设计账号:

nycmgwxqr

优设大课堂

Source: 优设网 – UISDC | 18 Jan 2019 | 8:23 pm(NZT)

如何做好大型视觉改版?来看全民K歌5.0 的改版经验总结!

文中比较系统的讲解了视觉设计师应该如何进行大型视觉改版。有方法论归纳,也有实例讲解,希望能给设计师们一些帮助。

对于所有的设计师来说,项目要进行大型视觉改版都是很重视很头疼的一件大事。有幸我在2018年年初完整的跟进推动了全民K歌5.0的大改版。此次改版是k歌项目成立以来最大的一次改版,获得了较好的业界口碑。而我自己全程参与,收获很多。

我在鹅厂工作数年,经历过 QQ音乐到全民K歌再到音兔项目,大大小小数次视觉大改版。我觉得能驾驭好大型视觉改版需要的知识、流程、套路是可复制可学习的。它就像是数学是一种工具。所以我将我的感悟,我的经验写下来形成文字。因为我觉得知识只有付诸于文字或是语言,才是最大发挥它的价值。同时也希望我的这些经验能给那些正在进行着视觉改版或即将进行视觉改版的设计师们一些启发,一些帮助。

项目背景

1. 为什么要做5.0视觉大改版

至2018年年初全民k歌已经三年了。经历了3年的全民K歌逐渐暴露了以下问题:

而作为年终的大版本,我们想借此机会对全民K歌的视觉做一次大的升级改造。

前期规划

1. 我们要做哪些,如何进行?

万事开头难,对于一个大的改版,制定规划尤为重要,我在这里是这么做的。

确定改版内容

产品方的主要诉求是对 app UI的升级。但是我觉得作为一个大的、关键性的改版,仅仅 UI 升级是不够的,于是我想将5.0的改版拔高一个高度,不仅限于 UI,而是一个整体的全面的改版。我将改版内容分为三部分:UI升级、品牌升级、VIP升级。后两者是设计主动提出推动的。品牌升级是因为全民K歌往期都没有健全的品牌KV体系,外部宣传时候设计随意性太大,想这次改版完善品牌体系。VIP升级是因为之前K歌的 VIP 没有独立的视觉体系,随着增值营收业务的增长,这部分诉求逐渐增长,现有的视觉样式尊贵感不够。

确定时间规划、以及老板汇报规划

大改版一大不确定因素就是前期发散方向上的不确定,这部分不确定会使得项目的时间不可控。这种不可控往往使得改版进度一拖再拖,陷入改版泥沼。

在我看来这里的进程也是有规律可循的。

这里的规律是发散 – 收紧 – 发散 – 收紧的过程。

从最初的启动项目到最终的定稿普遍要经历两至三轮发散 – 收紧的过程。

而这里面一般至少会有两轮老板汇报的过程。在初期设计发散的时候往往是交互还没有定型的时候,这时候视觉的束缚可以小一些,任由设计自己的理解自由发挥。这里的尝试可以是更大胆的方向性的探索,到第二轮第三轮的产出就需要回归到交互,依托于交互进行发挥。

进度上通常我会定制一个大致的时间规划。每周一次小会议沟通进度,约两轮碰面后积累足够的产出再找老板汇报收拢方向。

临时组队战副本

一个人的能力再强,效率再高,精力也是有限的。不可能凭借一个人去完成这样一个大的改版。必须要团队合作,要协调大家一起去完成任务。在我的理解中5.0改版就像是一个大的游戏副本,而面对这样的一个副本我们就需要拉起一支队伍去应对这样一个副本,就必须要有分工规划。

在初期所有人一起出探索方案,大致方向确定之后,我们就分了3组人来应对UI升级、品牌升级、VIP升级这3部分任务。

方案探索

1. 多方探索,集思广益

前期我和我的小伙伴们出了众多的视觉探索方向稿设计稿。具体内容如下。

方案1:

方案2:

方案3:

在此方案的基础上我们对 BOSS 进行了汇报,得到了批示反馈,再此基础上延展出了后续定稿。

归纳收拢

1. 经过几轮探索,最终方向收拢为以下方案

将品牌调性定义为:丰富多彩、活力、情感、乐趣。

解决思路是:年轻化、简洁性、一致性。并非只有年轻人才喜欢年轻化。

设计的理念因子是:活力、简洁、高效、自然。

设计迭代的思路本质上是要解决下述两个问题:

改版的整体风格

整体框架做了这样一个改动。依然保留品牌识别性较高的红色标题栏,但是采用了跟新品牌相同的渐变色处理。底部导航采用面性图标更简洁也更能压得住。

1. 动态的改版

动态的改版着重需要满足的是对视频内容的更好支持。原有样式字段杂乱,需要对展示信息作梳理,简化字段。

K歌的 feed类型非常复杂,将它梳理成2大类,8小类,共26种。

动态的整体视觉:

原来的推荐直达区模块用颜色去区分类型,对普通用户效果视觉感知很弱,且效果不可控,故此做了优化。

简化了 feed结构,梳理了展示字段。

去掉了之前的卡片间隔,给人一种连续不断使人下翻的感觉。

因为5.0新增了 POPUP 持续浏览的功能,不需要在当前界面播放视频,所以视频feed 也不再占用整屏宽度的空间。

新MV feed相对原来的会更高效。

短视频feed 对它的展示尺寸做了优化。短视频本身有1:1、16:9、9:16三种比例,直接用该比例显示的话在 feed流里会显得16:9的 feed 特别小,9:16的 feed 特别大。故此做了部分裁剪,16:9裁成4:3。9:16裁成3:4。裁剪区域不多不影响完整性,也能识别横屏竖屏。

将歌房和直播也梳理成跟 mv 一致的尺寸。减少 Feed流中不同规格的 feed 带来的界面混乱,提升一致性。

2. 发现的改版

如果说「动态」承载的是熟人社交,那么「发现」承载的就是提升内容的分发,促进优质的内容能得到足够的曝光。

满足想发现优质内容的用户,让他们在这里能持续的消费优质内容。

发现页的整体视觉:

3. 详情页的改版

详情页承载的是作品的播放以及社交互动的页面。所以这次优化一方面要梳理信息统一体验,另一方面要给到更多的相关内容推荐,形成浏览的体验闭环。

4. 个人主页的改版

原来的个人主页既要承载主人态的管理诉求,又要承担个人信息展示的诉求,内容非常繁多信息非常复杂。然而主人态和客人态他们的诉求是完全不同的,所以个人主页的改动点就是主客态分离,针对主客们的不同诉求做不同展示。

这一部分由于开发资源有限5.0改版的时候并没有上线个人主页的改版。但是这一部分作为储备依然会对后续的个人主页改版产生影响。

规范拓展

1. 统一的视觉风格是由一系列详尽的规则取舍组成的

风格稿确定虽然是改版中最重要的环节但并不是全部,风格稿确定的只是关键界面。K歌的功能界面纷繁芜杂,将关键界面的设计延展到所有界面并保证其一致性需要一套简介明确的规则。而规则就是一系列判断取舍的集合体。好的规则应该是简洁自洽的,是为美。

K歌的规范我准备从以下几点着手优化。

2. 文字

将字号收拢为四种。默认字体选用了苹方的 light字重,标题以及操作文案采用 medium字重。拉开粗细差距,来做信息层级区分。

3. 图标

我们规范了所有图标的切图尺寸,将所有图标切图都收拢为方形的六个尺寸。这样以后维护替换图标会更加方便。并且出了一套详细的图标设计指引,来统一同一 APP 里的多名设计师的输出的一致性。

4. 图片

收拢减少了图片规格,统一了图片的圆角处理。并且考虑到k歌的用户作品封面经常会遇到白色的图片跟 UI 相融,为了解决这一情况我们将所有图片都加了一层3%的黑。

5. 列表

减少了横向列表中间的间距,让区块化更明显,统一了图文列表的展示规则,字段限制。例如图片上尽量不压文字保持图片简洁;图文列表的用户展示尽量用头像代替用户名规避 emoji 带来的界面杂乱;图片下的文字字段不超过两个等等。

完整的体系

1. 好的视觉改版应该是从UI到品牌的一个完整的体系

前面说到过,在我的规划中,全民k歌的大改版,由UI的改版、品牌的改版、VIP体系的改版三部分组成。在这三部分里我参与较多的是UI的改版。品牌的改版和VIP的改版我只是少量的参与意见。但是组内的小伙伴们他们都完成的非常出色。小伙伴们的努力一起构建了完整的新的全民K歌视觉体系。

2. 全民K歌新品牌

3. 全民K歌新VIP体系

结束感悟

掌控大型视觉改版的秘诀:前期规划 + 节奏推动 + 协调合作 + 方案落地 + 规范拓展 + 完整体系。

一路跟完整个5.0的改版,在改版过程中我用前面文中的方法,一路把控整个改版节奏以及输出质量,应用起来得心应手。这些方式方法以前仿佛就像河边的一粒粒珍珠。这次总结的这个过程就是收集这些珍珠的过程,最终形成漂亮的首饰。所以写下这些我的知识经验与大家分享。希望我的这些经验能给那些正在进行着视觉改版或即将进行视觉改版的设计师们一些启发,一些帮助。

欢迎关注作者的微信公众号:「高设之路」

「优秀团队的改版设计案例」

优设大课堂

Source: 优设网 – UISDC | 17 Jan 2019 | 10:52 pm(NZT)


关于产品的需求分析方法,这篇全帮你总结好了!

随着互联网产品的不断向前发展,「产品设计导向」一类的概念已经不仅限于大公司中,在往日越来越注重「短期效率」的小公司也都纷纷开始注重产品设计方面的建设。

所谓的「产品设计导向」指的是产品建设之前要围绕着产品的立项、目标用户等等去规划产品的功能点,明确产品核心价值;在产品上线之后,通过数据分析和功能反馈,发掘更多的需求,去规划下一步的「功能增删改」,将产品的设计方向引导到更正确的位置,提升用户留存率,延伸挖掘出产品更多的可能。

另一方面,从现在的设计环境而言,对所有的设计师既是机遇,又是挑战。大量的 UI专用工具(Sketch、Principle、Flinto、Origami等)的出现,大大提升了产品前期 UI设计师的工作效率,所以现在「全链路思维」已经从刚出现时的「概念化思维」变成了「主流化趋势」。所以现在很多的 UI设计师在站酷发布自己的作品的时候大部分都喜欢加入一些产品前期分析(功能设计、用户画像等)内容。

但是很多设计师的分析环节明显就是为了证明「有」而去「做」,缺少了真正的分析部分。给我印象很深刻的就是之前看到的一个二手房买卖的UI设计作品,典型用户画像里主流用户是:「男、七十岁、目标是给自己的儿子购买婚房」。实际上这种所谓的产品分析流程对于设计师而言是没有任何帮助的,只是从形式上走个过场罢了。

本篇主要讲述产品设计中的一些分析方法,范围从「个人练习式设计」到「团队合作式运作」,适合初级产品经理、交互设计师,在工作中职能范围与产品规划有关的 UI设计师,想要学习产品设计的新人阅读。

产品运作流程概览

我遇到的比较普遍的问题是:很多设计师对于自己所在公司产品的运作流程并不是十分了解。这样会在你实际配合工作的时候感到无从下手。有的甚至于同一家公司的不同设计师对于产品设计方面的理解也不尽相同。所以说要从浅到深的学习产品功能设计,就必须先理清当前工作的常规流程,例如常见的产品运作流程。

上面是一个相对规范的产品开发流程,实际上你在看到上述流程图后,对照自己公司的情况,会发现有一些岗位上的缺失。出现这种情况最大的原因是因为很多公司会把一些职能进行合并用来节省成本,现在仍然有大多数的公司并没有交互设计师的岗位,但是交互设计的职能不代表没有,而是被产品经理或者视觉设计师兼任了。你需要明确团队中各个人负责的职能部分,才能更好地提升沟通效率。

个人思考方法(一):空·雨·伞

上面讲到了设计师的「全链路思维」现在已经成为了一种主流的观点,将来前期的铁三角「产品经理、交互设计师、UI设计师」很有可能结合变成是「交互视觉二合一」甚至是「产品交互视觉三合一」的状态。所以现在很多的设计师开始尝试自己去 DIY 一个需求或者做ReDesign 这样的设计,希望可以通过这样的方式完成自己跨领域能力的一个积累。但是当他们打开电脑的时候,大部分人会发现自己突然变得没有思路,从产品方向点确定到产品视觉产出之间出现了断层。

其实做过设计练习的人都知道,由于一些现实场景的不同,一些人在做设计练习的过程中会受到很多条件的局限,尤其是在孤立无援的情况下,你面对自己的练习作品往往会无从下手。当然,不同的场景下有不同的分析方法。

在团队协作的时候,分析方法要全面、严谨、反复推敲。

在个人练习的时候,分析方法要高效、直接、简化不必要的流程,以培养自己的分析能力为主。在这种场景下,空·雨·伞就是一个非常好的思考提升方法。

简单概述「空雨伞」思考方式:观察(事实) → 思考(内在) → 产出(解决方案)。

运用在设计上就是:发现痛点 → 思考原因 → 提出解决方案。「空·雨·伞」因为简单、成本低、易上手,可以作为设计入门培养思考能力的一种方法,但是在使用空·雨·伞的分析方法时需要结合一定的具体调研(或者轻量级的用户研究)相配合,不然又会变成一味的「拍脑门儿」式的主观臆测,对于分析能力提升没有丝毫帮助。

个人思考方法(二):逻辑树

逻辑树又称问题树、演绎树或分解树等。很多咨询公司分析问题最常使用的工具就是「逻辑树」。逻辑树是将问题的所有子问题分层罗列,从最高层开始,并逐步向下扩展。

简单来形容一下逻辑树:把一个已知问题当成树干,然后开始考虑这个问题和哪些相关问题或者子任务有关。每想到一点,就给这个问题(也就是树干)加一个「树枝」,并标明这个「树枝」代表什么问题。一个大的「树枝」上还可以有小的「树枝」,如此类推,找出问题的所有相关联项目。逻辑树主要是帮助你理清自己的思路,不进行重复和无关的思考。

如果你要运用逻辑树方法去分析产品,主要的一点在于学会细化拆解目标。

举个例子:在2017年我创建了自己的个人号,但在发布了一部分的文章之后,我开始意识到文章的可读性始终不高。在这个时候我们就可以按照逻辑树的分析方法去进行拆解分析,去发现自己提升的空间。

如上图,就是逻辑树最简单的一种场景应用。确定目标后向下进行拆分,拆分出三级逻辑树是比较容易的,甚至你可以沿着已经列出来的大纲继续深入细化,再拆分出更细更深层的各种提升点。

逻辑树分析法在个人作品中的主要作用是发散思维;在实际工作中的作用则是针对特定问题进行分析,理清思路。总而言之,是让你在分析的过程中更加有条理,避免重复思考。但是逻辑树分析也有一个缺陷,就是在逻辑树分析的过程中,根据现象分裂出子层级的步骤十分依赖你的认知能力,就如同做设计一样,当你感觉界面的视觉出现问题的时候,需要利用你学出来的知识去进行视觉优化,如果你对设计理论知识掌握程度并不是很强,那就不能采用逻辑树分析法解决问题。

总而言之,逻辑树分析法适用于对问题研究十分深入的情况下,如果你对当前的环境认知并不充足,那么就很容易走入歪路,跑偏主题。

实际项目:用户调研访谈

在一些实际项目中,用户调研是需求来源的主要渠道。提起用户调研,很多人会觉得这不属于 UI设计师应该做的事情。其实行业逐渐规范的现在,用户调研、分析需求的能力也成为了衡量 UI设计师能力的一个标准。现在的互联网产品种类繁多,从早期只做主流行业,到现在基本所有的冷门行业都有涉及。作为设计者,大多数设计师已经开始在设计的过程中心有余而力不足。

造成这种现象的主要原因是随着行业的细分以及范围的扩大,我们距离用户的真实场景偏离太远,导致我们在设计中很容易理所当然地赋予给用户大量无用的东西,偏离了用户所需要的主要轨道。因此对于很多的设计师来说,学会了解用户以及分析需求成为了十分重要的事情。

下面是我整理的在用户调研过程中的几点认知。

  1. 保证调研的目标的准确性

我们需要明确,我们希望通过调研达到怎样的目的?例如:提升部分页面转化率,收集用户对于产品不满意的地方,通过用户使用产品发现用户潜在的痛点。

  2. 有目标的选择用户

一般来讲互联网公司都有收集客户反馈的部门,他们掌握着所有客户的反馈意见。我们在选择调研用户的时候,最好可以根据我们在调研行动确立初期拟定的目标去选择调研目标。

  3. 适当的准备调研内容

当我们确定了调研目标和调研用户之后,就可以根据现有状况去准备调研内容。调研内容一定是要在事先拟定好(开始调研之后根据实际情况进行改动)。

一般市场调研细分的维度通常有四种,分别是:地理、人口统计、行为、心理统计。运用在互联网产品里面就更加的复杂。以B端产品为例:我们在调研中可能要把调研对象分为客户(老板)和用户(业务员)去进行不同情况的信息跟踪,而且根据产品的属性不同,需要提前预设好调研内容的侧重。

  4. 调研过程中

在调研过程中,我们可以适当结合上文讲述到的「空雨伞」方式去进行调研观察,收集用户需求。

在调研过程中,除了思考之外更多需要注意的是对用户洞察的记录与剖析,在记录用户行为的过程中,需要遵循「不干扰」、「不引导」、「记录客观」等原则,这样才可以保持用户行为记录的准确性。

  5. 获取反馈整理结果

在调研结束后,我们应该产出一份完整的调查报告,按照本次调研预设目标进行整理,规划出合适的大纲,把调研收获转化为明确的产出,产出形式最好以报告(PPT、PDF),而不是口述或者微信消息,这两者之间差别很大。

需求归类:KANO模型

虽然说现在很多的公司都开始建立了用户体验类的部门,但是因为用户调研或者体验类的工作很难去量化产出。而且在大部分情况下当产品按照用户调研反馈的结果进行调整后,往往很少会出现我们幻想中的「逆袭」、「口碑急剧上升」,有时还会因为受到一部分用户观点的带偏导致产品口碑下降,用户表示不满;又或者会出现需求级规划混乱,重要功能反而后上线这种尴尬的情况。

所以这驱使着团队中负担「用户体验」职能的角色对用户需求进行正确的分类和排序。

这个时候就可以运用到卡诺模型(KANO模型)。

KANO模型是东京理工大学教授狩野纪昭(Noriaki Kano)发明的对用户需求分类和优先排序的有用工具,以分析用户需求对用户满意的影响为基础,体现了产品性能和用户满意之间的非线性关系。根据不同类型的质量特性与用户满意度之间的关系,狩野教授将产品服务的质量特性分为五类。

  1. 基本型需求

用户对企业提供的产品或服务因素的基本要求。是用户认为产品「必须有」的属性或功能。当其特性不充足(不满足顾客需求)时,用户很不满意;当其特性充足(满足用户需求)时,用户也可能不会因而表现出满意。对于基本型需求,即使超过了用户的期望,但用户充其量达到满意,不会对此表现出更多的好感。

例如对于网盘类产品来说,用户的基本需求是能快速地上传和下载。如果下载速度达不到用户的期望,则用户满意度将一落千丈。对于顾客而言,这些需求是必须满足的,理所当然的。对于这类需求,企业的做法应该是注意不要在这方面失分,需要企业不断地调查和了解顾客需求,并通过合适的方法在产品中体现这些要求。

  2. 期望型需求

提供该功能,用户满意度提高,如果不提供该功能,用户会感觉到不满。当然在这里要补充一句,这里的需求并不都是我们整理出的主观需求,也有可能是用户在使用的过程中产生的客观类需求,例如遇到不会的体验,需求得到响应时我们给的反馈。

例如对于一些 O2O类的产品,虽然做的都比较成熟,但是由于体量庞大的原因,偶尔也会受到糟糕的体验,用户在受到糟糕的体验之后往往会期望能通过反馈得到心理上的安慰。例如携程(旅程预计时间偏差)、美团(酒店体验差)、饿了么(用餐体验差)等。在用户遇到这种糟糕体验之后,期望能通过投诉建议获得官方的反馈,那么官方把这种问题解决的越圆满,用户的满意度也会随之提高。

  3. 兴奋型需求

兴奋型需求又称魅力型需求,指的是不会被用户过分期望的需求。对于兴奋型需求,随着满足用户期望程度的增加,用户满意度也会急剧上升,但一旦得到满足,即使表现并不完善,用户表现出的满意状况也是非常高的。反之,即使在期望不满足时,用户也不会因而表现出明显的不满意。

  4. 无差异型需求

不论提供与否,对用户体验无影响。是质量中既不好也不坏的方面,它们不会导致顾客满意或不满意。

  5. 反向型需求

用户没有这个需求,提供后用户满意度反而会下降。

按照 KANO模型分析可以对收集到的产品需求进行分类,筛选掉一些不合理的需求。更好更有目的性的完成产品待办清单的记录。

最后

对于设计师来讲,不管是个人设计练习还是团队项目,都应该掌握一定的产品需求收集和分析的方法。如果你真的下定决心要向交互设计、用户体验方向发展,那就更需要下定一些功夫去学习相关的知识,学会形成自己的思考方法。一开始可能会很痛苦很累,但是如果一味的试图走捷径,最后只会得不偿失。

设计需求的应对方法」

优设大课堂

Source: 优设网 – UISDC | 17 Jan 2019 | 9:53 pm(NZT)

用10分钟,向你展示QQ团队短视频的完整设计过程

作者将向你展示 QQ团队在打磨短视频拍摄能力的思考和经验沉淀,展现一个完整的设计过程。

文章概述

短视频产品成为年轻用户社交娱乐的主场景,QQ 在短视频社交的耕耘过程中,打造了丰富的发表能力,让用户更方便的记录生活精彩瞬间,同时也更方便的与好友互动,今天我们对设计过程进行复盘,将过程难点与设计思路从能力建构、设计切入、设计亮点引入、设计亮点深挖简述供各位参考。

发表能力建构

1. 同质化竞争突围

发表能力构建方面从最轻的发表成本以及最多的发表回馈两个维度做横向的铺陈,建构了除了拍摄以外,轻量主观表达的文字视频,不受时空与题材影响发表动机的影集,勾引起共同参与及话题的游戏,最多社交参与感的问答等发表能力等四种发表方式。打造轻量发表成本的文字视频可以确保发表量足够,以解决发表量与观看量不对等的问题,在小游戏与问答等发表方式,除了可以营造社交场景以外,创新的玩法也能与竞品拉开差异,在众多的短视频产品中具有自身的特色。

然而单纯的发表能力差异容易被模仿,能够保持自身优势与特色的时间十分短暂,建立起与用户情感上的连接可以有效的加深用户对服务的认可以及归属感。举个例子,前段时间笔者至上海出差数日,意料之外的一份小礼物却促使我成为该酒店的常客,这证明了建立情感连接确实可以成为与同业同质化竞争时不错的突围点。

设计切入角度

1. 建立情感连接,是视频设计「双面性」的一面

参考诺曼的理论,情感化设计分为本能,行为,反思三个层面。在打造视频制作工具的过程中,满足本能的外观愉悦以及确保行为过程的顺畅性属于基本要求,可以参照过去设计工具的手法,保证架构流程界面反馈每一环节的使用效能和低理解成本,而反思的范畴则与内容相关。为制作视频内容而设计,需要将用户的经验,喜好,文化转化成特殊符号,以触及情感连接最重要的反思环节。

用户与产品接触的过程按时间展开分为初次接触、逐渐了解、熟悉依赖三个阶段,若在每个阶段都能与用户保持情感连接,必能逐步加深用户印象,达到竞争差异化的目的。下文两个案例演示我们如何在引入期和成长期选择合适触点,制定相应设计策略和方案,从而达到此目的。

设计亮点引入

唤起情感,拉近与用户的距离。

为了让用户更主动地发表相册视频,QQ团队在影集发表模块上规划了智能相册的能力,借助用户回忆塑造超级符号,把用户的亲身经历与产品功能建立联系,提高使用意愿。在影集的引导步骤中,寻找合宜的契机,把零散的照片按特定线索重新组织,经过精心包装以回忆墙的方式重新呈现给用户。

影集功能的重新包装:

  1. 场景搭建

QQ 经授权后访问用户相册,沿时间和位置线索用聚类算法对照片归类,产生与特定场景关联的照片组,再用图像识别技术从照片组中精选特定 n 张合成视频,为后续情绪升级埋下基础。

  2. 意境传达

为视频搭配转场音乐是主要增色手段。

转场效果设计要以情绪传达为目的,过渡动画和快慢节奏的灵活搭配打造大片质感,叠加细节特效让画面生动不僵硬。

在配乐标准上,我们基于用户习惯推导,明晰场景 + 节奏的音乐选择维度。

转场和音乐的挑选需贴合场景特征。在「聚会」场景中,设计师选用翻转重组的效果传递欢快愉悦氛围,曝光和光晕细节可以模拟真实光影效果。「往年今日」则表现出安静氛围,沉浸的复古滤镜和低调的叠黑效果让情绪表达含蓄收敛,涟漪波动仿若时光倒流。

  3. 捕捉时机,宣传专属回忆

在信息架构层的设计使用卡片横滑的方式,一方面可以暗喻时光隧道,另一方面考虑到大卡片比其他尺寸的缩略图在陈列和交互行为上更利于突出视频的优势。

4. 案例回顾

我们采用情感符号引导发表的策略,得到数据的支撑,影集发表总量和发表转化率均有明显提升。经过市场横向对比,QQ团队在对影集的功能规划和整体设计理念上占据了优势位置。

设计亮点深挖

打造情感体验峰值,强化用户印象。

在任何体验中,都应该重视体验过程中的情感峰值,如同丹尼尔卡曼说,体验产品时能够被记住的只有峰值与终值的体验,我们在智能相册的环节之中建立起与用户情感上的链结,而链结后的情感峰值,则选择在最低发表成本最高发表频率的文字视频中深挖,让体验情感的峰值在高频率的场景中发生获取最高的投入回馈。

  1. 过程波折

文字视频上线后发现用户发表意愿未达预期,症结在于其过程缺少能激发用户主观意愿表达的情绪触发点。我们提出两个优化思路:

对比实验后发现2既可增加文字视频的意境表达又不干扰基础操作,是更佳的方案。

文字视频的初期方案和优化方向:

  2. 策略制定

QQ团队基于对用户发表场景统计,确定以传达心情和高频发表时间点为线索,策略制定是考虑到既要与用户表达有耦合但不能具体有所指。

  3. 意境传达

背景模板设计有以下原则:

界限分明,背景效果不要干扰主体信息。

意象与认知相符,有情理之中意料之外的惊喜,引起用户好奇心。

表义避免太具象。抽象表达腾出更大想象空间,让用户创意不受缚于环境。

以下是全部模板效果展示。

  4. 案例回顾

经优化后文字视频的背景从纯视觉角度转变成带动用户情绪刺激发表的触发点,后续团队结合运营策略,在特殊节日或特殊事件前更新模板可以持续刺激拉升文字视频发表量,该策略的运用屡建奇效。

总结心得

产品体验路径中植入情感因素意义重大。在引入期唤起情感降低用户心理戒备,产生熟悉亲切感。接触期有效调动用户情绪制造情感峰值,加深印象。成熟期创造互动机会,让情感得到延伸寄托进而巩固市场地位。此过程环环相扣层层递进,在用户心理推波助澜。

好设计是能影响用户非理性,改变情绪最终影响他的行为。设计的高境界在于只影响不明说,用户不需要领会设计意图,但情绪已经被感染了,在情绪的作用下,按照设计者预定的轨迹,自然做出选择。

优设大课堂

Source: 优设网 – UISDC | 17 Jan 2019 | 8:53 pm(NZT)

如今的你,到底算是哪种设计师?

编者按:很多人都在做设计,但是不同的设计师职位到底要匹配什么样的设计技能,并不是每个人都搞得清楚,当你问很多不同的人的时候,得到的答案也千差万别。今天分享的是来自资深设计师 Jasper Stephenson 的文章,你可以看看国外设计行业是如何来划分不同设计职能和角色的,作为一个参考,对比一下你的位置,也许你未来的发展方向也藏在最后那张图当中~

最近,我的同事 Mariko Sugita 想要为她的网站雇佣一名设计师。她是一名城市规划师,对于数字产品的设计和开发并没有太清晰的概念。所以,她找到了身为设计师的我,希望从我这里得到一些建议甚至答案:「我应该寻找什么样的设计师?」我仔细想了一下,脑中已经浮现了几个答案,但是并没有一个相对准确的答案,能够帮我概括当前设计领域中各个角色的清晰职能和能力范畴。

时值2018年年末,这件事情让我忍不住思考当下数字设计领域当中,各个职位中,所有人所扮演的角色分别是什么。为了准备这篇文章,我花费了不少时间来梳理这些职能和相关的信息,而当 Mariko Sugita 看到我的笔记的时候,不由得惊呼「这正是我想知道的事情!」

同样的,我也希望我梳理出来的信息对你一样有用。

技能漆痕模型

从微观上来说,没有任何两个设计师在技能上是完全相同的。那么,随随便便地将所有的设计师都笼统地归为一类,这本身就是不负责任的。在这里,我必须借用 Sam Jarman 的一个概念,他在 Dev.to 上发表过一个很棒的帖子,文中阐述了一个非常形象、有用的技能模型。曾有人提出过一个T型模型,用来描述人的技能模型,字母 T 上面一横代表一个人的技能宽度,而下面的一竖则代表着这个人在特定技能上挖掘出来的深度。

但是 Jarman 则认为,绝大多数人的技能模型并不是T型的,因为一个人通常会拥有多个不同纵深的技能,所以每个人的技能模型,应该更像是用饱蘸颜料的画笔在画布上画出一横之后,颜料自然向下流动所产生的痕迹,这些深浅不一的痕迹则代表着一个人不同的能力,我们姑且将这个模型称之为「漆痕模型」。

每个设计师的能力都不尽相同,而不同能力的深浅层次也不一样。处于相同职位的设计师,可能在矢量设计、原型设计、用户调研、代码、动画效果的处理能力,都不一样,程度不一。另一方面,在现代设计团队当中,对于不同职位的能力要求、技能需求也不一样。

因此,我们也很难使用单一定性指标来界定一个人的知识范围,或者评判一个人的全部能力。不过,我们可以使用一些其他的单一的、确定的指标,来勾勒出一个人或者一个职位的能力范畴。

「好吧,看了这些,我大概知道了我应该去找什么类型的设计师了。」Mariko 看着笔记对我说。

在阅读下面的图表的时候,每个职能或者设计光谱的宽度,代表着它横跨的职能的广度和领域,它下方笔触的高度变化,则代表着它需要深入这些深度的变化。

1. 聚焦型的设计角色

「Jasper,可是你说 T型设计师是不存在的,怎么存在聚焦单一焦点的设计师呢?」

是的,我确实这么说过,确实几乎不存在只具备一项能力的设计师角色。绝大多数人都会有多方面的能力,他可以像激光一样聚焦在一个点上做一件特定的事情,并且基于这些能力和职能,他们通常可以以极高的质量来完成这些特定的任务,这里所说的聚焦型设计角色指的是职能聚焦于特定领域的角色。如果你需要的人需要特别专精于一个领域,那么你想要的可能是一个特定职能的专家。

值得注意的是,我确实将前端开发者放在这个关于设计师的图表当中了,因为如今在设计师和开发者之间的界限已经非常模糊了,在我看来,这个图表当中需要标明全职开发者的位置,一方面是因为他们在很多时候会深入到设计领域当中来,另一方面则需要他们的职能范围作为设计类角色的工作能力范畴的参考。

2. 跨学科的设计角色

在这个图表当中,我们可以看到一些职能范围更加模糊的跨学科的设计角色。在过去的几年当中,最典型的跨学科设计师角色应该是 UX设计师了。在实际的团队协作当中,以 UX设计师为代表的设计角色有着宽广到令人难以置信的职能范畴,这些设计角色在实际工作中会用到包罗万象的术语,并且你很难确定这类设计师到底精通哪些技能。也许你能够通过访谈和他们的作品集网站,来相对清晰地了解他们在设计思维、视觉设计、设计落地上的能力强弱。

3. 全频段的设计角色

我们现在所提到的这些设计角色,他们更像是我们之前提到的全栈设计师,他们什么都能做,但是他们必须掌控多个领域的专业知识,才能胜任这样的角色。通常,这类角色会供职于一个甚至多个创业公司,他们被要求做一些专业以外的事情,承担专业之外的职能,或者他们有着其他的个人项目,这促使他们逐渐具备了相对更宽广的技能组合。

有不少能力出众,兴趣广泛且接受力强的设计师,会在工作中,逐步发现同时掌控多个领域知识的秘密和能力。我倾向于认为那些有着非凡能力和丰富工作经验的设计师可以挑战这些职位,特别是当一个设计师有着远超他人的同理心和认知理解能力的时候,是有这个可能性的。

如果将所有的这些不同职能的角色摆在一起,就是下面这个样子:

虽然有点乱,但是应该是不难理解的。

结语

如今复杂多变的数字设计行业,让设计相关的职业变得不再那么简单清晰。你想寻找什么样的设计师,或者你想成为什么样的设计师?对比一下如今的设计角色和职能分类,找个目标吧。

补充说明

优设大课堂

Source: 优设网 – UISDC | 17 Jan 2019 | 8:53 pm(NZT)

花瓣网整修一个月,你需要这份灵感素材收集整理指南

对于许多设计师朋友而言,今天早上大概被花瓣网升级维护一个月的消息给刷屏了。而与此同时,国际著名设计师网站 Behance 也进行了改版升级,不过并未在国内掀起波澜。关于花瓣网升级维护这件事情,在版权意识越来越高的今天,对于平台进行适时调整本是应有之义。

和花瓣功能类似的爱集网,则在花瓣之前放出了声明,并且准备直接关闭网站:

互联网提供了无与伦比的便捷,但是其中也暗藏着不确定性。在花瓣之前,著名的灵感搜集网站 Pinterest 更是早早的无法访问了:

当然,相对而言,在中国大陆受众更广的花瓣网的维护修整影响更大。对于依赖花瓣网搜集和存储灵感的设计师而言,这一修整就是一个月,未免有点不方便。

其实,触手可及的素材和灵感素材才是最重要的,为了确保这一个月没有花瓣网的过渡期甚至今后可以更加便捷地获取灵感,不妨借此机会给自己升级一下灵感的获取方式和存储方案。今天的文章将会分两个部分来帮你解决这个问题,第一部分帮你筛选出了目前比较不错的本地存储方案,另一部分则推荐一些精品灵感网站,作为搜集的素材的素材池。

本地存储方案

这种瞬息万变的局面之下,没有什么比本地存储更安全。无论是使用本地的文件管理器还是借助第三方的工具,都确保了素材和灵感图片的安全性。

1、使用自带的文件管理器

最简单粗暴的方式,则是将你所搜集的灵感素材、图片、资源等存储在本地硬盘当中,借助电脑文件管理器(PC中的「我的电脑」或者Mac中的「访达」直接进行管理)。在文件管理器中按照你的需求来管理文件素材,需要你具备极强的分类和管理能力,可以参考这篇文章,了解如何借助这些工具来管理素材。

这篇《高手私藏方法!教你从0到1整理素材库》就提供了详细的使用Mac中的自带文件管理器访达和标签体系来构建自己的素材库的方法。

类似的文章还有《用一个实战案例,教你7招做出完整的文件管理体系》,教你构建属于自己的文件管理系统。

当然,还有更加便捷的本地管理工具,帮你一站式地管理相关素材,这些高素质的工具同样不容错过。

2、灵感素材管理神器 Eagle

作为一款国人所设计和开发的灵感素材搜集和管理工具,Eagle 洞悉设计师和设计相关职业的实际需求,提供了一个兼顾到本地化管理和网络资源的一体化解决方案,它不仅可以高效收藏和整理各种图片、截图、Sketch 组件等,而且查找非常方便,协同功能强大,操作体验超群,支持 Mac 与 Windows 系统。

关于 Eagle 的具体使用方案,这里就不赘述,你可以参看这篇文章进行了解—>《收集和管理素材灵感的最佳利器Eagle》

近期优设会有Eagle 相关的团购福利,具体请关注优设的官方微博—>@优秀网页设计

3、灵感素材整合工具 Zoommy

和Eagle 相比,Zoommy 的功能显得稍微弱一些,Zoommy 整合了超过50个全球范围内的免费图库到其中,总计超过50000张高素质的精美图片,其中大部分照片都可以商用,根据你的需求进行修改。具体的介绍可以看这里:《超过5万张!免费高清可商用图库Zoommy 3.0重磅来袭!》

4、新生代图片管理工具InBoard

InBoard 是一个更加富有凝聚力的软件,它更加专注于图片素材的搜集,相对其他的同类软件更加轻盈易用,在Chrome 和 Safari 插件的帮助下,InBoard 能将整个互联网变成你的花瓣和 Pinterest,快速地将全部你感兴趣的图片素材搜集到一起。更详细的信息,可以戳这篇文章了解一下:《新生代图片素材管理神器Inboard》

5、Adobe图片素材管理工具 Bridge

在安装 PS的时候,很多时候就顺路把 Bridge 装到电脑里面了,这款同样有着 Adobe 血统的免费工具同样有着强大的管理功能,同时它也和 PS、AI 等工具无缝地连接在一起,它的强大自然是毋庸置疑的。看看这篇介绍 Adobe Bridge 的老文章《超方便神器Bridge!设计师的终极图像管理术》,同样帮你梳理出使用这款强大的工具管理本地素材的方法。

高素质的灵感获取网站

有了好的存储方案之后,接下来就需要有好的素材来源。优质素材虽然不少,但是挑对网站和来源能够帮你事半功倍地获取素材与灵感。

1、创意灵感网站

创意灵感类网站并不少,素质高、更新频繁、内容丰富的灵感网站有不少都值得推荐。离开花瓣,你应该拥有更大的世界:

Baubauhaus:不仅是创意设计,还有创意背后的故事
Booooooom:来自加拿大的创意和艺术灵感网站,为你推荐创意爆棚的设计作品
ArtStation:真正的数字艺术家的集散地,CG、插画、3D建模、创意作品,不一而足
Sakiroo:来自韩国的人设和插画网站,插画师和设计师不容错过的优质网站
Scene360:横跨艺术和设计领域的惊人创意设计,带你进入一个不一样的世界
Deviantart:最国际化的插画设计平台,每天更新近20万设计作品

2、UI和网页类灵感网站

UI和网页这类数字设计需求巨大,也是许多设计师耐以生存的设计领域,而优秀的UI和动效设计也是需求大户:

Dribbble:目前无需梯子就能访问的顶尖设计平台,最优秀的设计作品都汇集于此
Awwwards:每天一个优秀的网页设计,在真实的案例中感知好设计
UI Movement:优质动效设计推荐,对于UI和交互设计师而言都是不可多得的网站
Collectui:分门别类的 UI 设计展示,无论设计什么样的UI,总能在这里找II
InspirationDE:横跨创意、艺术、平面、UI等多领域的灵感网站

3、高素质免费图库

免费图库总是最值得收藏的:

Unsplash:素质最高的免费图库网站,免费可商用
Splitshire:免费可商用的图库网站,图片素质非常过硬
Pexels:著名免费可商用图库,还有专用的PS插件
Stocksnap:拥有先进检索功能,能帮你精确定位更合适的图片素材
Pixabay:数百万高素质免费的图片素材,关键时刻足够给力

4、优设导航

https://hao.uisdc.com/
优设设计导航就不用过多介绍了吧?目前最全面最专业的设计导航网站,垂直到不同设计领域和设计目标的专业指引,在你最没有想法的时候,提供通往不同设计宇宙的传送门。总会有一个链接能帮你找到答案。

5、优优灵感频道

https://uiiiuiii.com/inspiration

经过编辑精选的灵感素材,总能够在你设计的时候事半功倍地找到设计的方向。你要的设计灵感素材,都已经在这里被打包好了,不要错过 ~

对于许多设计师而言,这可能是一次闭卷考试,希望我们的这份小抄,能帮你安然过稿 ~

优设大课堂

Source: 优设网 – UISDC | 16 Jan 2019 | 10:57 pm(NZT)

刚发布的社交产品马桶MT,为什么留不住用户?

人在江湖,免不了要体验一波那3个同一天发布的社交产品,相比「土味聊天宝」与「年轻的多闪」,王铁匠家的「马桶MT」着实令人懵圈,也不知慕名来参观这款匿名社交产品的百万大军,有多少人已经失望卸载?

先来看看「马桶」产品层的几个感人逻辑,社交最重要的是人与关系链,新用户刚进来自然要引导建立关系链,但是主打匿名社交的「马桶」竟然要我发个短信邀请好友,是要假装成陌生人再次认识么?

既然暂时没有什么好友也不愿意发短信,那就先发起个话题。说实话,没有上下文场景的引导就要用户创建一个高质量的话题,通常是比较有难度的。更有意思的是,创建话题还需要创建者塞一个红包,用户对结果没有预期的情况下,刚来就要掏钱,更是一个门槛,这大概是没钱就聊不下去的节奏吧。

再后来,「马桶MT」开始通过通讯录与地理位置的算法推荐,用户可以看到一些「认识的人」与「附近的人」,但大家发的更多的是一些低质量话题,没有可消费性,也确实很难聊下去。

其实明眼人都能大概看出「马桶MT」中「悄悄话」的属性更接近「无秘」匿名吐槽倾诉,「群聊话题」更像是「立问人脉」的付费打听小道八卦消息的属性,这两个产品都算是当年的现象级爆款,也确实切中了人性中的某些刚需,只是这次王铁匠的产品组织缺少一些适当的引导,多少有些让新用户玩不下去。

今天这里也顺道聊聊产品设计中,如何在用户生命周期中的激活(Activation)环节,做好新用户引导,降低获客之后的流失率。

通常获取到用户的下一步是引导用户完成一些「指定动作」,使之成为「有感」的活跃用户,即激活。

增长大师Andrew Chen 曾研究表明,约77%的用户在下载 APP 后的3天内就会放弃该 APP。用户初次使用一款产品如同初次约会,在这种互动中,如果一方对另一方产生了负面的第一印象,关系将迅速结束。

而一个优质的 Onboarding(新用户引导流程),能够在用户与产品初次接触的较短时间内,让用户快速熟悉产品并了解价值,建立良好的第一印象。那么如何设计一个优质的 Onboarding,就成为了激活环节的关键。

找到Aha moment(惊喜时刻)

新用户对产品的认识,通常会从一个模糊的概念到清晰的认知,Aha moment 则是新用户第一次清晰感受到产品带给他价值和改变的瞬间,比如第一次用滴滴APP 足不出户就能打到出租车的瞬间。

在硅谷一些具有成熟增长体系的公司,他们都会对 Aha moment 有一个清晰可量化的定义,通常的格式是(谁)在(多长时间内)完成(多少次)(何种行为)。

找到 Aha moment 的意义在于帮助我们找到哪些行为促进了用户的留存,以及为团队定义一个清晰的聚焦目标,同时,这个指标在激活与留存环节中,有着比较重要的指导意义。那么下面简单介绍如何找到 Aha moment:

举个例子,2009年的时候 Twitter 用户流失率曾高达75%,当时的增长负责人 Josh Elman 深入研究剩下25%的用户为什么没有走,发现这些留存用户关注的用户数都在30人以上,所以他们重新设计了产品,在新用户引导流程中推荐关注,以此来提高新用户的关注数量,并最终提升了留存率。

基于核心价值设计引导任务

引导流程常见的错误是把产品每个新功能、新特性都秀一遍。因为新用户在评估产品的价值,产品需要在引导流程中快速展现能为用户解决问题的能力,而非完整展示产品功能结构。相比口头讲述/纯展示的引导流程,交互式任务行为更能帮助用户体会并获知产品的核心价值。

如 canva(一款在线图片设计工具),在早前的版本中用23秒的无语音视频帮助用户快速查看他们即将实现的功能,然后引导用户完成一些基础操作,快速让用户体会到无需安装,也无需专业学习就能做出好看图片的快感。

告知每个操作行为的意义,前置预期并增强动机

用户在完成引导任务过程中,难免会产生惰性情绪,在任务进行前讲清楚将获得的好处,有助于提升用户行为的动机。如脉脉希望用户尽可能完善个人的职场资料,在用户引导上首先告知用户资料完善度的量化值,当用户看到与100%的数据差值时,容易产生填补差距的动力。继而文案又将行为结果进行说明「提升你的影响力和来访人数」,这样引导比一句生硬的让用户「完善你的职场资料」更有效。

对于比较复杂的产品服务系统,用户获得价值的行为路径比较长,也可以通过前置演示产品效果来提升用户行为动机。如 Airbnb,在将房子完成出租之前需要做很多工作,但 Airbnb 向新用户房东提供一个小工具,只要输入房子的位置、房间的基本情况,就能估算他们可以通过出租闲置房子赚得多少钱。

建立循序渐进的新手任务系统

对于高门槛的大型复杂项目,渐进式的新手任务系统能更有效进行用户激活,它在所有阶段的互动中综合运用了对用户不产生任何干扰作用的学习指南、提示和激励方法。

通过从易到难的操作引导,在任务清单与进度条的助推下,「承诺与一致」的用户心理将帮助新手提升耐心程度,并可以更低成本理解与使用产品。通常专业性较强的企业软件、大型游戏会采用该策略进行新手引导。

去除障碍,给予用户「可控感」

在用户引导中,给予「可控感」是对用户的一种尊重。产品引导流程可以有自己的主张,用户也有权利按自己的习惯进行操作,两者需要适当权衡。

因而,对于那些操作费时或让用户纠结的任务,应该明确地为用户提供「跳过」的步骤,并告知可待后续完成,这也在一定程度上减少用户接受新事物的焦虑感,从而降低激活环节的流失率。

如项目管理工具 Basecamp 在新用户引导的第五步(最后一步),希望让用户邀请同事使用产品,但也允许用户跳过这个步骤,后续再来补充。

善用产品之外的触发

新用户引导中,用户可能随时被各种外在因素打断操作并离开产品,对于这种不可控因素的暂时离开,产品需要有一定的机制,通过产品之外的渠道(如邮件、短信、应用push等)再次告知并召回用户,帮助他们继续完成被暂时搁置的激活流程。

如 airbnb 房东新户添加房源过程被中断后,airbnb 会发送好几封 Email 告知并引导用户继续完成新手任务,以保证后续的服务流程可以顺利进行。

结尾

无论是线上产品,还是线下的服务,用户(顾客)的初体验真的很关键,它能否成为美好关系的开始,取决于用户能够在此次体验中感受到产品服务的价值,以及是否能够留下良好的印象。

即便是自带流量,可以轻易获取百万新户,也都请重视第一次「接客」的服务流程,因为这个时代的用户们并没有那么多的耐心。毕竟,让用户「留下来」,只是「活下去」的第一步!

欢迎关注作者的微信公众号:「TalkUX」

「提高用户留存率的方法」

优设大课堂

Source: 优设网 – UISDC | 16 Jan 2019 | 9:40 pm(NZT)

从设计到落地!途家APP 核心流程改版思路全面总结

@途家UED :从设计目标到方案落地,带你了解途家App 的核心流程改版思路。

途家网是全球民宿预订平台,与传统酒店住宿不同,致力于为用户提供更个性化、更人性化的出行体验。作为电商类产品,改版最终的目的自然是提升转化率、提升 GMV,除了这个简单粗暴的商业目标,设计团队同时需要考虑如何改善产品的用户体验。本文主要围绕途家App 中的首页、列表页、详情页三个环节,为大家分享改版的思路和最终的设计方案。

核心流程

核心流程指的是用户进入途家App 到完成一单预订所经历的过程,主要包含以下几个环节:搜索&浏览、比较、决策、预订、支付。要提升用户体验,就需要设计师在每一个环节中,思考如何更好的帮助用户达成他们的目标,以促使用户进入下一个环节,最终完成预订。

首页

进入 App 首页的用户,大致会分为两类。一类是需求明确的用户,他们有比较清晰的出行日期和目的地,这类用户大多会直接通过搜索来寻找房源,因此首页上需要有明显的搜索框来引导他们说出出行需求,这样他们就会顺利进入核心流程。另一类进入 app 的用户则没有明确的出行需求,甚至可能是不太了解产品的新用户,直接使用搜索会让他们感到不知所措,他们需要通过先逛一逛来汲取灵感。那么对于这一部分用户,首页就需要给予一些有吸引力的内容,推荐一些好东西给用户,让他们能随意看看,一方面旨在激发用户消费欲进入核心流程,另一方面能够让用户对产品产生好感和信任感。

列表页

列表页是承载房源卡片集合的搜索结果页,用户通常会经过首页的搜索框,在输入了位置和日期后,进入列表页。当然通过城市、位置和日期搜索得到的结果,只能是一个初步的搜索结果,用户还需要通过入住人数、价格、户型等缩小范围,筛选出更符合自己入住需求的房源,以便于逐一比较和进行查看。所以在用户进入列表页后,如何帮助他们得到符合入住需求的精细化搜索结果,是我们首先需要解决的问题。

详情页

房屋详情页是用户进行购买决策的重要环节。用户在详情页停留时间相对较长且有较强烈的购买意愿,因此,在详情页充分展示房屋优势,吸引用户,是对于提升转化率十分重要的。详情页的信息涵盖了多个维度,比如有关于房屋的描述,关于房东的介绍,还有来自房客的评价,入住须知等,如何将大量的信息合理的分组,突出房屋优势,并以合适的顺序清晰地展示给用户,是详情页的设计难点。

结语

每一次改版都需要公司多个业务方及团队的支持,作为设计师会收到来自各方的需求及关于方案的反馈。面对来自四面八方的观点输入,我们要时刻牢记改版目标,并且明白方案的好坏并不能简单地用对与错来评判,而是当下面对此人此情此景,取舍是否合理,是否尽力做到了权衡。同时,作为可能是唯一能够单纯为用户说话的角色,设计师还是要在考虑商业目标之外,多为用户争取一丝闲暇吧。

欢迎关注「途家UED」公众号:

「优秀团队的改版设计案例」

优设大课堂

Source: 优设网 – UISDC | 16 Jan 2019 | 9:38 pm(NZT)

高手都在用!9个实用小技巧提升你的动效设计功力

迪士尼动画的12条原则是设计师必须要掌握的经典指导性原则,是由 Ollie Johnston 和 Frank Thomas 在他们的书《The Illusion of Life》中提出来的观点(译者注:这本书在豆瓣的评分有9.3分,值得一看)。这些原则最初是用来为动画片这种传统的形式设计的,然而,这些原则也同样适用于 UI设计。所以,我想在这里做一个有趣的尝试,看能否将这些动画原则联系起来。

挤压和拉伸

在动画中,挤压和拉伸代表了物体的重力,质量,重量和灵活性。举例来说,当一个弹球在它撞击地面时会发生形态变化,就是挤压和拉伸。

在界面中,挤压和拉伸很容易就联想到按钮。当一个按钮被按下时,就可以理解为受到了挤压,通过控制按钮的挤压和拉伸,我们可以很轻易地做好一个按钮的交互动画。除了按钮之外,这种原则也可以应用于 UI 中的任何交互元素上。

△ 按钮在交互时的挤压和拉伸

△ 挤压和拉伸被应用于侧边栏

预期动作

让观众能预先知道接下来将会发生什么,它是先于下一步会发生的动作。举例来说,迪士尼动画里经常有从高空往下跳跃时会先弯曲膝盖再跳,正在跑步的人要停止跑步前会逐渐变慢步伐等等。

在界面中,悬停状态就是很好的例子。当我们把鼠标悬停在元素上时,元素会提供反馈,表明它是可以点击的,并且在点击时,又会有一些别的反馈。

△ 悬停的交互通常会暗示这个按钮是可以点的

在有水平滚动界面里,通常在交互时会显示下一个元素的部分内容。这其实是一个很好的例子,因为它是在告知用户下一步的一些信息。

时间节奏

在传统动画中,时间会决定关键帧的绘制方式。帧数越多,动画就越流畅,同时也更慢,时间能够给动画赋予情绪和性格。

时间的节奏感是任何动画的基础,速度在元素编排中起着非常重要的作用。速度太慢,用户会不耐烦;速度太快,用户又会错过一些内容。一般来说,大多数 UI动画在200-600ms之间,其中悬停和反馈交互时长大约为300ms,精细的转场动画大约在500ms。也可以去参考谷歌的动画规范(https://material.io/design/motion/speed.html#duration),里面非常详细地解释了每种动画类型的持续时间。

一些设计系统,如 Carbon(https://www.carbondesignsystem.com/guidelines/motion/)、 Lightning(https://www.lightningdesignsystem.com/guidelines/animation/styleguidelines/)都把运动的节奏感视为一个很重要的方面,并为每种类型的过渡都制定了严格的规范。

△ 右边的过渡动画显得太过于漫长,繁琐。

渐快与渐慢

在现实世界中,大多数物体都遵循着缓动运动规律。也就是说,物体的运动并不会瞬间开始或瞬间结束,就像一个物体自由落体,也是一开始很慢后面才会变快。

△ 左侧的卡片是没有缓动的,右侧的是带有缓动的,看起来会自然很多。

给 UI 中的元素加上缓动会让它看起来更加自然,缓动和节奏感都是可以有效的提升动画的品质。

呈现方式

舞台中的表演需要合适的编排才会精彩。也就是说,对象在场景中如何摆放,每个动画又如何出现,关乎演出的质量。通过这种编排,能够将注意力引向最重要的角色。

在界面中,呈现方式能够决定元素的位置,以及在交互时,它应该如何编排才能将用户的注意力引向预期的元素。

比如现在有一个基于兴趣的音乐APP,对这个应用来说,最重要的事就是让动画引导用户选择他们所喜欢的音乐。因此,有必要将类似的操作与其他元素分开编排,有目的的引导用户。

弧形轨迹

一个从高处抛出的小球,运动轨迹会做抛物线轨迹运动,弧线能使物体的运动更加自然。

在界面中,沿着对角线的元素沿着弧线轨迹将会使运动变得更加自然。当需要凸显出元素的运动路径时,多尝试使用弧线轨迹。

△ 通过对比,能够发现右侧的弧线运动轨迹会比左侧的直线运动轨迹显得更加自然。

附属动作

在动画中,次要动作能够起到烘托主要动作,比如动画中的角色在走路时,头部的晃动就是次要动作,却能够让角色行走显得更加自然。

在界面中,次要操作能够起到强化关键动作,当元素需要向用户提供反馈时,这个方法非常管用。所有的微交互都是基于这个附属动作原理。

△ 按钮边上的粒子效果强化了主按钮的点击效果

夸张和吸引力

场景中的重要角色通常会采用一些比较夸张的动作来获得更多的注意力。

在界面中,重要的交互也会通过一些夸张的动画来引起用户的注意。谷歌设计规范中的 FAB按钮就是一个很好的例子,FAB按钮在不动的时候也比较能引起注意,因为它通常会带有比较鲜明的颜色,并且是独立悬浮在界面元素之上的。当它被点击时,FAB的动画被放大,把整个界面都占满,使得它完全占据用户的注意力。

△ FAB夸张的交互形式

△ 对于支付这么重要功能的按钮,通过夸张的动效引起用户的注意

跟随动作和重叠动作

想象一只兔子从高处跳下来,当兔子开始起跳时,它的耳朵动作会与身体动作发生错位。然后当它着陆时,它的身体停下来了,但是耳朵还在动。前者称之为跟随动作,后者被称为重叠动作。其原理说的就是:没有任何一种物体会突然停止,物体的运动是一个部分接着另一个部分的。

在界面中,可以使元素在停止之前超过它们原本的位置,使得元素运动更加自然。(译者注:大白话就是我们常说的回弹效果。)

△ 界面有一定的回弹,会显得更加自然。

△ 当界面滚动时,文字会跟随图片的运动,图片与文字以不同的速度运动会更加自然。(译者注:像是被拖着走的那种感觉)

总结

界面中的每一次交互都必须在适当的场景中精心设计,让整个体验更具沉浸感。在正确的地方使用这些原则能够确保产品中的交互体验更加协调自然。

这些原则正在以不同的形式应用于当今的数字产品中,值得敬畏的是,30年前设计的一套规则到今天仍然适用。

(译者注:这又应了迪特·拉姆斯的设计十诫,好的设计是不会过时的。)

原文链接:《Disney’s motion principles in designing interface animations》  Ruthi

欢迎关注译者的微信公众号:「彩云译设计」

「动效设计合集」

优设大课堂

Source: 优设网 – UISDC | 16 Jan 2019 | 8:58 pm(NZT)











© 澳纽网 Ausnz.net