为什么好产品都那么重视反馈机制?

有没有看过有人在电梯里面反复不停地按上下按钮?或者在电脑桌面界面上不停地刷新,等待某个一直没有完成的加载操作?

所有的这些案例当中,大多有一个共同点:系统没有给予反馈。你希望你所操作的对象能够正常运作,但是在没有反馈的状况下,你连它是否在运行都不知道。

最早的数码相机,在拍摄照片的时候,是没有机械相机那样的触觉和声音反馈的,这导致拍摄者并不知道他们是否拍摄了照片。现在绝大多数的数码相机和智能手机在拍照的时候,都会有相应的声音。即使是在静音状态下,也会有震动反馈。这相比上一个时代的早期数码相机强了太多。

反馈是我们生命的核心特征。生命系统中无处不在的反馈机制是促使我们不断成长、不断完成各种目标的重要因素。我们应对不同的刺激和外部变化,身体的体温、血压、胆固醇水平都会有相应的变化。这些变化会作用到我们身体的不同层面,从细胞中蛋白质的互相作用到复杂的生态系统当中,不一而足。——M.B. Hoagland & B.Dodson , The Way Life Works

反馈无处不在。从我们的身体反应到具体生活中的各种设计、交互,反馈都是非常具体且非常有用的存在。吃了糟糕的食物,胃会告诉你,被流感病毒入侵了,你的身体会发热流鼻涕。越来越先进的数字化产品,也需要给予用户具体而灵敏的反馈。

这意味着,整个数字产品的交互和产品的逻辑,都应该在反馈上服务于用户,在用户操作的时候给予明确的回应。如果没有反馈,就像拿着枪射击一个看不到的目标。良好的反馈的重要性怎么强调都不为过,但是太多一线的著名公司都在自家的产品中忽略了这一点。

反馈要足够即时

即时的反馈不会让用户感到迷惑。有的时候,哪怕是延迟0.1秒都会让用户感到混淆。如果延迟太严重,用户可能会不停点击导致误操作,或者是直接放弃。尤其对于一个收费的软件或者 APP 而言,反馈不即时或者不明显,都会让用户感到尤其失望和不值。这就像某些政府企业机构试图在灯泡、水电等基础设施上省钱,所带来的糟糕的体验一样。当用户碰到反馈不足的情形的时候,会很容易陷入迷惑:「接下来我要怎么办?」「我做错了嘛?」「如果出了问题怎么办?」但是,反馈足够清晰和即时,就会很大程度上减弱这些问题。

音频反馈

音频反馈是一种非常常见的反馈机制,它在很多时候会避免出现事故:

  • 面包机弹出吐司时候的咔哒声;
  • 打印机墨盒用完的时候发出的警报声;
  • 门关好和没有关好的时候声音通常不一样;
  • 汽车的喇叭声;
  • 各种安全设施操作失误时候的警报声。

数字产品当中,在关键和重要的环节加入相应的音频反馈,能够强化用户对于操作完成与否的感知。对于重要的信息,尤其需要注意。有一次,我家里的烟雾警报器每隔10分钟就会发出奇怪的哔哔声,由于它的位置很高,在很长的一段时间内,我都没有办法搞清楚声音的来源。直到最近我才发现,这个噪音的原因是烟雾警报器的电池电量低所导致的。对于这种涉及人身安全的关键设备,音频反馈、反馈机制以及提醒方式都应该反复斟酌,否则非常误事。

视觉反馈

值得注意的是,在视觉反馈的选取上也需要注意方式方法。如果是闪光式的反馈,要注意是不是会有死角或者是否足够引人注意。如果这种视觉反馈对于时机、角度要求比较苛刻,那么就需要改进。当然,在这里给出非常具体的建议是很有难度的,很多视觉反馈需要根据界面的具体情况来定的。不过,下面的小贴士应该对你有帮助:

  • 被点击的交互元素需要通过视觉效果凸显;
  • 进度指示器应当一直保持可视状态,用以指明当前的运行状态;
  • 动画效果有助于阐明操作和交互的结果。

案例:带有反馈的涂料

如今成熟的产品中大多会用到成熟的反馈机制,即使是油漆和涂料。如果有一天你想给自己的天花板重新上白色的涂料的时候,会碰到一个很直接的问题,在白色的填泥(补土、腻子) 上涂白色的油漆,你能够清晰的分辨么?很难,因为两者同色。很多人在上白色涂料的时候,会发现油漆干了之后有些地方没有盖住。为了解决这个问题,有个聪明的开发商发明了一种在湿的时候是粉红色,干透之后是白色的涂料,即使是色盲的工人也能完全涂好的白色涂料。

弱反馈可能比无反馈更坏

为什么会这么说呢?因为弱反馈本身的不合理性会分散用户注意力,或者给用户带来误导,甚至让用户感到恼火,就像半夜三点将你唤醒的洗碗机。但是过多的反馈也会让人烦躁,它们会像坐在副驾驶位上的驾校教练一样一直在你耳边叨念你要这样或者那样。当然,在有的时候,这些反馈是有帮助的,但是更多的情况下,只会让人崩溃。手机APP的通知则是一个更加典型的案例:太多的通知会让用户焦躁不安,当这种推送通知的量超过一定阈值之后,用户会选择全部忽略,这样它本身的价值就被全盘否定了。反馈是必不可少的,多少合适,需要设计者反复斟酌。

为何有时候反馈会出问题

有一种最常见的反馈是警告类的反馈,尤其是可能会出现问题的时候。比如笔记本电脑在低电量的时候,会先提醒用户电量不足,需要充电,电量过低的时候会主动进入休眠模式。在这种情况下,设计师需要控制警告的频率,情况紧急,但是也不能提供太多的通知,干扰用户正常使用。

另外一方面,也需要控制一些日常的反馈机制。有的操作系统会在用户打开文件的时候提示「您确定要打开这个文件吗?」下面是选项「是」和「否」,这样的通知反馈对于经常需要打开此类文件的用户而言,会显得过于频繁。当用户长期在这样的提示和操作之下,会形成固定的条件反射,某次碰到不同的弹出框,或者是需要点击「否」的情况,他也会点击「是」,这就麻烦了。为了避免类似的误操作,设计师同样需要衡量某些操作的可能使用频次,提供合理的解决方案。在有的成熟的系统和软件中,选项中会提供类似「今后不显示此弹出框」的选项,可以让用户避免这类反馈。

案例:电动车和盲人

反馈是我们感知世界的一种方式。10万年前,我们的祖先可能需要警惕灌木丛中微小的响动,躲避可能存在的野兽。如今的人类,需要警惕岔路口上的汽车的发动机和鸣笛的声音,避免交通意外带来的伤害。

技术进步使得原本恼人的声音消失了,但是对于人而言,反而可能会造成不方便。以特斯拉为代表的新能源和电动汽车越来越受欢迎,静默的发动机和流线型的车身让它们在道路上无声地前进,但是对于通过声音来感知世界的盲人而言,这简直是个灾难。

最早试图解决这一问题的品牌是保时捷,它们在开发 Mission E 系列电轿跑的时候,意识到这个问题。有趣的是,保时捷的工程师认为他们的汽车引擎有着保时捷独有的频率和声音,所以在原本静默的电动车引擎中加入了传统保时捷燃油引擎的声音,给电动汽车以燃油汽车的「声音签名」,确保路人感受到来自保时捷的声音反馈,隐性地传递品牌气质的同时,还确保了双方的安全性。

给产品添加声音反馈其实很普遍

其实,保时捷这个并不是个案。在商用卡车和工程器械领域,添加各种警告声音、闪烁的警报系统是一件非常常见的事情。甚至在很多国家和地区,会有相应的法律规定使用大型卡车和工程机械的时候,需要发出警告通知周围的行人和车辆,哪怕令人烦躁也必须存在,必须确保安全。当然,警报的音量和灯管闪烁的频率也有相关规定。

当然,在智能手机的相机程序当中,加入模拟机械相机的咔哒声也是给予用户以反馈。更有意思的是,在日本和韩国,为了避免偷拍这类问题,法律要求手机在拍照的时候必须发出声音,并且音量必须最大,这种声音反馈就是同时告知拍摄者和被拍摄者的。

所以,在很多领域,反馈机制有约定俗成的方式,甚至有相关法律,这个是设计师需要了解的。

告知,但不要打扰

当然,绝大多数的反馈机制应该遵循着「告知但不打扰」的基本规则。让用户的神经系统收到信息,确保操作的正确性,如果错了,应该从反馈和提示中获得正确操作的提示,尽量柔和且不要让人觉得烦躁。

让反馈做到最好并不容易,这需要设计师拿捏好对的时间,对的速度,并且传递对的信息。

优设大课堂

优设轻访谈!6位顶尖设计师的独家工作习惯分享

@N可可洛N@爆炒地瓜:新的一年,优设邀请到了一拨超优秀的设计师,每周与我们一起探讨设计师关心的话题,有 Dribbble 的第一人气设计师 Mike、产品视觉设计大神 Gleb Kuznetsov、顶尖品牌设计团队 Ramotion、顶级UX设计团队 Cuberto、火遍追波的设计工作室 Zajno Crew、Behance 人气设计师李宜轩,希望他们的思想碰撞能为大家带来设计生活和工作上的帮助。

今天是优设轻访谈第一期,我们的话题是——「回顾过去一年,你觉得有什么工作上的好习惯值得分享?」

Mike

△ Dribbble 人气第一名设计师 Mike

Dribbble:https://dribbble.com/creativemints

好习惯嘛,我总是习惯把笔和笔记本放在手边,即便我只是在床上看书或和朋友一起出去玩时,我都常备纸笔。

你永远不知道什么时候会出现一个灵感!所以能够及时的捕捉和记录这些想法就显得尤为重要。

在我的日常生活中发挥重要作用的另一件事就是寻找自己的理想环境。它能让你感觉舒适,在这里你经常会想到好的主意,让你的创意源源不断。听说很多设计师的创意都来自洗澡的时候。

至于我,我经常会在客厅的沙发上产出绝妙的想法。如果我开始觉得自己失去了创造力,我会泡一杯茶窝进沙发,然后裹着毯子,很快我就会放松下来,很多想法也会自然涌现。我想每个人都有自己喜欢的地方。就像我的朋友查克曾告诉我,他的一些创意想法诞生于一个嘈杂的咖啡馆,是他在吧台的餐巾纸上勾勒出来的。

Gleb Kuznetsov✈

△ Fantasy 产品设计总监 Gleb Kuznetsov✈

Dribbble:https://dribbble.com/glebich

在我开始做任何设计之前,我会先做好计划,并按照我的计划进行,直到一天结束。每天的第一件事都是开会、UX回顾和业务目标讨论。

接下来就是进行设计工作和日常的实际工作。当我打开Photoshop 制作 UI 或交互原型时,我首先会在记事本中绘制草图和方案,以确保一切对产品都有意义。这样才能确保我应该做什么样的东西,然后再开始探索具体的设计实施。

其中一个主要原则始终是探索,我从未为自己设定目标,或者立刻做出最终结果,因为只有在探索过程中,你才能找到真正令人惊叹的UI设计解决方案。

Ramotion

△ 为Adobe 做过品牌设计的顶尖团队Ramotion

官网:https://www.ramotion.com

Instagram:http://instagram.com/ramotion

Dribbble:https://dribbble.com/Ramotion

Behance:http://behance.net/ramotion

我不能低估每天确定优先事项的重要性。听起来很简单,有些人可能会说它没用。但请相信我,事实并非如此。

我要说的是,2018年我每天的工作生活中都有一份优先事项清单/我每天必须做的事情清单。

自从我开始经营 Ramotion 设计工作室,每天都有大量的实际业务开发工作,有一些工作每天都在重复,每次我分心时,清单都会帮助我缕清思路和确定当前应该做的事情。它真的非常强大。

Cuberto

△ 数字创意机构艺术总监 Cuberto

Dribbble:https://dribbble.com/cuberto

官网:https://cuberto.com

来自我们艺术总监的几点建议:

  • 预留一些时间来浏览最新的设计作品,如Uisdc,Behance或Dribbble,我们可以进行批判性地思考,找到好的和坏的点子。它将使您能够提升自己的技能,并为将来的工作储藏出更多的想法。
  • 一次只专注于一项任务(虽然非常明显,但依旧是很重要的一条。)
  • 不要习惯每天准备详细的日常计划。创造性的工作需要一些创造性的自由,在任务或活动之间切换,灵活一点。
  • 不要害怕重做一些设计,即使你已经认为它很酷。但它可能会变的更好。

Zajno Crew

△ 专业设计工作室 Zajno Crew

Dribbble:https://dribbble.com/zajno

官网:https://zajno.com,https://grid.zajno.com

Medium:https://medium.com/zajnocrew

我们是专业设计工作室Zajno,我们热爱设计与创意,现在我们和你分享一些日常工作中能让我们保持创意感、高效性和积极性的好习惯。

每日早会。不要觉得这就是一件很平常的事儿,我们觉得这是一个必须被提及的习惯,因为它真的很重要。自从 Zajno 的14人小团队成立,我们就开始决定,出席每日早会,这对我们每个人来说都很好,这里我们可以分享每日消息、计划、我们进行的案例和其他需要跟进的事情,这样每个人都会清楚公司发生的事情和信息。

帮助别人。感谢早会,使得我们与每个人都保持联系,所以我们总是知道什么时候有人需要帮助。每个人都乐于帮助需要的同事,帮助分享的同时,也是学习的过程。开明和乐于助人是良好合作关系的关键。

分享你关心的事物。我们特别喜欢每天探索新事物、学习酷知识。在我们碰到特别不一样的东西,我们有个习惯——把它分享出来。我们觉得如果有这么个地方,能够方便快捷地与大家分享这些好东西就太棒了。于是我们开设了 Zajno Weekly Music Playlists 与大家分享,当然只有这个是不够的,我们后来开发了 Zajno Grid,在这里,我们分享了一些我们深受启发的超棒的设计、网站和流行的、阅读量高的作品。

放松。我们不只是同事,我们也是朋友。我们享受在一起的时光,不只是在一起工作,还有工作之余的快乐时光。除了时不时的轰趴,几乎每周五我们都会在下班之后,一起玩音乐,度过美好时光,我们办公室里也有电吉他和电子鼓哦!

一起旅行。没有变化就无法取得进展,所以有时候我们就会时不时地揉着下巴,远远望去,我们意识到是时候体验新事物了。这时,我们站起来,打包并搬到一个不错的遥远的地方,有时会在地球的另一边,在那里一起工作大约一个月。这种做法使我们能够找到解决问题的新方法,让我们精神焕发,充满活力,让我们在旅途中想到一些新的创意想法。

最后,一个创意来自健康的身体。工作中的身体健康对于提高工作效率至关重要。长时间对着屏幕对身体不好,但这又是必要的,所以找到解决方案至关重要。我们决定聘请专业的按摩师,说实话,这是一个绝妙的主意。要爱你周围的世界,你必须先学会爱自己。

李宜轩

△ 曾获金点设计奖的90后新锐设计师李宜轩

Behance:www.behance.net/yihsuanli

随着从事设计产业的时间拉长,越来越体会到设计方法的重要性,刚⼊⾏时原本以为设计只需要会⽤软件,有足够的美感就可以了,但之后发现一切不只是这样。魔⻤藏在细节里,要有效率的做好一个设计作品,其中牵涉到很多的⽅法和技巧,以下是我个⼈觉得蛮有帮助的几个习惯,我的习惯不一定会完全适合每个⼈,各位可以酌量参考使⽤。

1. 将提案尽可能整理成一份简报,⽽不是直接丢完成的图⽚

「要如何提升提案成功的机率?」这是之前常有设计师问我的一个问题,我认为其中一个必要的关键就是要让客户感受到设计师很专业,因为当客户⼼里觉得设计师很专业,就会产⽣信任感,这个信任感会让说服的过程容易许多。

要让⾃己看起来很专业的⽅法有很多,但我认为其中很重要的一个关键就是千万不要在提案时只给客户设计图。例如:客户找你做Logo,提案时你只给客户一张或数张上面有 Logo 的图片。我们都知道每一个 logo 或设计稿,都是设计师绞尽脑汁,费尽心思收敛后的成果,这个图像在创作者的脑中有很完整的创作故事和逻辑,但问题是,客户并不知道,设计太主观了,就算你花了一大段时间设计,在他眼里,或许认为你一⼩时就做完了。因此,我认为把自⼰的逻辑简单的整理至简报内非常重要,以我来说,我的提案内一定会有几个部分:

  • Coverphoto – 有工作室 Logo 的⾸页
  • Agenda or purpose – 简报的流程或目的
  • Moodphoto – 代表设计视觉的情感氛围照片
  • 创作介绍
  • 设计图
  • 下一阶段的任务说明

其实这些内容并不难整理,只要有了基本版型,之后每份简报都可以沿用。这些内容除了可以让你的专业感提升外,还可以帮助你理清设计逻辑,当然我会依据不同的案子增加更多的设计提案内容,但无论如何,这些部分是一定会有的。

△ coverphoto(有工作室logo的⾸页)

△ agenda or purpose(简报的流程或目的)

△ moodphoto(代表设计的情感照片)

2. 拥有⾃己的设计师资源库

在执行每一个设计案前,我认为了解在该产业顶尖的设计案例是⾮常重要的,因此我在 Behance 或IG 都有整理一群我非常崇拜的设计师或设计工作室,这群人不能太多(我认为200-300⼈差不多,可以快速的找到⾃己想看的风格),⽽且要拥有足够的风格区分度。例如当要做一个咖啡厅品牌时,我可以先在我收集的资源中找到特别擅长此领域的设计师(ex:savvy或bond),先从他的作品中了解到一个好的咖啡厅品牌要到达的⾼度,这可以让接下来的设计规划更有目标。

以下是我的Behance及 Instagram 的关注,里面的资源是我花了许多时间所收敛⼜收集的设计师,欢迎大家在其中找资源。

3. 在做完每个专案后的一个⽉内快速整理好作品集

将一个作品整理好对我而言是一个蛮大的压力,就算客户买单,在心里还是会担心放到网络上受到的回响不大,因此我都尽可能将要放上去的作品整理的很完整,希望在网络上有最好的呈现,这个压⼒会让我一直想拖延。之前曾经一个作品拖了了快一年才整理好,拖得越久,就越没有动力整理,⽽且还会忘记设计理念,更有可能发现自己想到的新概念别⼈早你一步发表了。所以我现在都规定⾃己尽量在一个⽉内把作品整理好并放到网络上,就算没有很完整也没关系,可以慢慢的优化和修正。

4. 档案做好分类,档案夹内的设计档以档名+时间命名

档案是否好好整理直接影响了工作的效率,刚做设计时常会低估客户的改稿需求,完成作品后就会直接命名final,客户一直改,文档后面就会有很多final,然后桌面上就出现一大堆档案,不确定哪个是终稿,得花时间一个一个打开确认。因此,目前我的工作文件都是统一以档名+种类+⽇期命名(ex:projectname_logo_190101),这样除了可以一眼了解文件的先后顺序,还可以让文件夹整齐许多。如果在之后的过程中需要某一张图,就可以方便找到。⽽为了快速找到最终的设计稿,我会再另外开一个 final 文件夹,将所有的送印文件放在一起。

非常感谢6位优秀设计师带来的精彩分享,每期一个设计师关心的话题,我们下期见。

优设大课堂

设计道理谁都懂,为什么换自己就不会?(二)

@研习社K先生 :「设计道理谁都懂,换自己就不会」这一作品修改系列从推出以来就一直受到大家的欢迎,那么本期我们会继续挑选具有代表性的设计案例进行诊断修改,希望能够为设计师们在今后的工作当中提供一些借鉴的新思路。接下来让我们一起进入今天的内容吧。

上期回顾:《设计道理谁都懂,为什么换自己就不会?》

本期为我们提供设计源文件的是邮箱尾号2902的这位朋友,感谢这位朋友给我们提供的设计内容。经过网络上的资料查询,我们大概了解到了这是中国邮政9月19日的电商节日海报,内容上是销售金条藏品的促销活动。

思路优点

首先我们先说说这个海报都有哪些优点,我们不光要知道作品哪些地方有不足之处,也要明白有些想法并不是这样做就不对,而仅仅没有处理好而已。

  1. 字形选择

在字形的选择上并没有出现过于花哨的字体。没有拉伸变形和各种光效,在字号上也具有层级的对比。通篇选择了比较中性的黑体和无衬线体,仅在一段文字上添加了宋体,形成字形上的对比作用。因为大部分内容是在说价格与活动的信息,所以从字义上选择黑体也更加体现了这种促销的印象。

  2. 色彩搭配

版面一共用了两种色相和黑白的无彩色相搭配,其中黑色与黄红的搭配也是设计中比较常见的色彩组合。

以黑色为主的视觉会给人带来具有高级与品质感的印象。

  3. 创意思路

在元素的编排思路上也是可以保留的点。版面中的主体由一个图形加产品组成,问题在于底部的这一图形从外形上看并没有与产品具备太大的关联性。从外形上看并不知道是黄金的拼音首字母,还是产品名的开头汉字。

黄色的产品在黑色的烘托下成为了绝对的视觉焦点,同时在位置上也是在版面的中心,这都会让产品变得备受瞩目。版面底部倾斜的图形会提供一些动态的不稳定感,这也是一种防止版面变得呆板的手法,与之对应的其他元素就可以编排的规范整齐一些了。

中间图形的加入提升了整体的层次感,它最大的作用就是让版面中内容变得更加丰富。

我们对文字的基础印象都是建立在水平的基础之上的。一旦角度发生变化,原本熟悉的文字也就会变得陌生起来,字义识别性的降低会让我们更容易把它当做一个图形来进行认知。

细心的你可能也已经发现了,画面中的图形文字并不是简单的旋转了角度,而是加入了透视的变化,这种踩着文字的形式在近年来的电影海报中也会经常被用到。

在我们《聊聊图文叠加的四种常用技法》那篇文章中也有提到过这种图形与空间融合的手法,对比简单的图形叠压。带有透视效果的图形会更有空间的感觉,整个画面的纵深感也会随之加强。

缺点不足

那么说完了版面中的优点,接下来我们在探讨一下这个版面中都有哪些可以改进的不足之处。

  1. 缺少秩序感

首先映入眼帘的问题应该就是秩序感的缺失了,那么秩序感一般都会体现在哪些地方呢?对齐自然是创建规律与秩序的首要选择,新人设计师最容易被总监指出的问题也就是对齐了,除对齐之外这个版面中的凌乱感也来源于元素的分散,设计者划分出了太多的文字块。

凌乱的色块自然就会让周围的空间变得同样复杂多变。而对齐至少能够保证元素的编排具有某种秩序感。当然太过规整的版面也是需要做出变化的,否则就会变得呆板无趣起来。

  2. 字重的均衡

文字的粗细对比太过强烈,虽然说粗细对比能够起到强调信息的作用,但是过度的对比也会让人们忽视掉对比薄弱的部分。

所以在修改文字大小后,我们需要尽量让他们的粗细保持均衡,我们用线条来模拟版面中的文字灰度。可以看出,粗细均等的线条与背景混合后能够得到非常匀称的版面灰度。

对于大小差距过大的文字,我们只需要尽量让他们的粗细在视觉上近似就可以了。同样的我们用线条来模拟文字,能够得到比较均衡的版面灰度。

但极端的对比会带来什么后果呢?如果版面中充满了极端的粗细对比,结果就是版面会变得非常复杂,到处都是所谓的重点信息,严重的干扰了内容的传达。

  3. 空间的划分

留白与负空间的零碎也是让版面变得凌乱的关键因素。图中方框的位置都是我们标注的负空间部分。可以明显看到负空间被划分的非常零散不够完整。

  4. 阅读缺少逻辑

版面编排的目的通常是为让内容信息变得更容易理解。但是如果因为编排的原因让内容的传达受阻,就失去了本身应该起到的作用了。

  5. 氛围烘托

原设计稿的背景中使用了纯底色加三条分割线的组合,这样的搭配虽然具有一些层次感,但由于细节的缺失也会显得有些单调乏味,没有起到有效的氛围烘托作用。

  6. 主视觉刻画

接下来我们来说一下主体视觉的刻画问题,我们将元素等大处理来观察一下,产品一共提供了两种角度,中间的这一个还加入了一些高光和气泡进行点缀。抠图不完全的粗糙边缘会给人一种很廉价的感觉。还有一个问题就是这种带有文字的主体千万不要随意进行镜像,这样很容易穿帮的。

 

修改演示

说完了优点与不足,接下来我们试着重新设计一下这个版面。首先提取出文案信息和具有两种视角的产品主体。

右上角和左下角的这个闪光有点太过梦幻了,真实性并不是很强,我们先去掉它,下面的这个气泡好像也没有什么逻辑。

接下来和另一个金条进行组合,让另一个金条覆盖在四分之一的位置。这个组合就完成了。

接下来我们来修正它的色温,目前来看色彩上稍微有些偏冷了。我们将它尽量调整的偏暖一些,这样一来整体上会更舒服。这是因为自然界中黄色的明度变暗时也会向红色偏移。

接下来重新绘制它的光影,为图像添加暗部细节。

绘制光影与材质,我们在给它添加一些高光,这样主体部分的刻画就完成了。

主体部分的刻画就完成了底部的文字换成「福」字,这样不仅画面会变得更加丰富一些,也让底层的图形能够和内容产生关联性。

为底层文字添加红色来烘托产品的高级感,主体内容的面积与整个页面的比例是一个黄金分割比。

明度高的色彩会显得距离近,明度底的位置会显得比较远。

接下来通过笔触来丰富底下书法字的细节。

在文字内部添加肌理。这样这个主视觉部分就完成了。

为了符合产品的光影,在底部我们在添加一个投射的探照灯效果。

接下来就是为画面添加阴影和倒影,这里需要注意的是,在这个角度下的倒影应该怎么做呢?复制一层然后反转镜像,这样显然是不行的。这种情况下我们需要重新修改一下这个投影的图形才行。

接下来添加一些火星点来起到烘托版面氛围的作用,让画面显得更饱满一些。同时火与金条的铸造也具有一定的关联性。图像部分设计好后,接下来编排文字的部分,将信息按照大中小的层级安排在版面的顶部空白位置。这里以色块的形式编排会更容易我们理解版面中文字的组成结构。

在高度上文字部分占据了版面顶部五分之一的大小,宽度上则是左边占据两栏,右边占据一栏的宽度。左右两个文字组合之间预留的空间正好是一个右侧的标题文字组宽度。页边距的大小与主标题的最大字号相同,重复着相等的大小比例,两种粗细的线条也是在重复着大小文字的粗细度。

这与绘画的思路是一样的,先确定轮廓然后逐步添加更多细节,于此同时确定整体的结构和比例关系,然后在进一步绘制细节部分。

问题回顾

以上就是本期的内容了,希望大家能在今后的工作中多去思考,也许下一次你也会遇到我们今天所遇到的这些问题。只有看到明确的问题所在才能找到解决这一问题的方法对症下药。

优设大课堂

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

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

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

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

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

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

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

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

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

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

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

居家好物篇

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

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

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

欸,这堆雪是干嘛的?

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

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

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

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

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

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

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

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

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

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

吃货篇

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

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

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

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

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

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

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

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

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

萌宠篇

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

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

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

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

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

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

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

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

宅男篇

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

优设大课堂

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

@研习设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」

优设大课堂

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

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

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

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

项目背景

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

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

  • 交互方面,框架拓展性不足,优质内容缺少曝光;
  • 基础体验方面,功能堆叠较多,急需梳理简化;
  • UI方面,样式陈旧,缺乏一致性。

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

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

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

优设大课堂

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

对于许多设计师朋友而言,今天早上大概被花瓣网升级维护一个月的消息给刷屏了。而与此同时,国际著名设计师网站 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

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

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

优设大课堂

王者荣耀和 M·A·C 跨界合作了一款口红,这是幕后的设计故事

@腾讯游戏TGideas :《王者荣耀》与 M·A·C 魅可跨界合作的幕后故事。

《王者荣耀》是腾讯游戏开发运营的一款热门 5V5 团队公平竞技游戏,其经典的竞技类玩法与推陈出新的游戏模式在全球范围内受到不同年龄,各行各业男女生的追捧,让耳熟能详的东方英雄带你领略团队竞技的酣畅淋漓。而创立于1984年的 M·A·C 魅可向来以大胆创新的色彩与颠覆传统的作风赢得全球消费者的青睐。

此次《王者荣耀》与 M·A·C 魅可的跨界,是手游和国际美妆界的首次合作,双方希望通过这次合作可以突破圈层获取新用户,为美妆品牌增添流行度,助力游戏更加时尚,战无不胜。

  • 合作产品:M·A·C 魅可子弹头小黑管口红
  • 目标用户:18~24岁,有消费力,年轻时尚的女性和年轻游戏玩家

创意初期:挖掘两大IP的核心亮点

1. M·A·C魅可——色彩丰富

M·A·C 魅可一直以色彩大胆创新,在美妆界独具一格。之前我在电视媒体行业工作时,合作过很多舞台、电视、摄影的化妆师,他们都非常喜欢用 M·A·C 魅可的彩妆,主要原因正是 M·A·C 魅可的色彩丰富,可以满足不同的妆面需求。

2. 王者荣耀——东方幻想风——中国复古风

《王者荣耀》的美术风格是东方幻想风,游戏中的貂蝉、花木兰、大乔等女英雄们,各自具备着中国人对于美女的不同定义,深受玩家们喜爱。可以说在2017年随着这款手游的流行,同时间年轻女孩们开始流行自称「小仙女」——在女玩家的心目中,是期望自己可以与游戏里的女英雄一样,或温柔似水,或英姿飒爽。

3. 怎样把中国古典美和擅长色彩的 M·A·C 魅可结合碰撞出火花呢?

记得当时是2018年的大年初一,我正在看 CCTV1 的《经典咏流传》,这是一个文化音乐类节目,用「和诗以歌」的形式将传统诗词经典与现代流行相融合,深度挖掘诗词背后的内涵,讲述了文化知识、阐释人文价值、解读思想观念,中国古诗词之美让我感触颇深,感动的同时也给了我创意的灵感。

「白雪凝琼貌,明珠点绛唇。」中国传统色彩的命名非常美,比如胭脂、黛蓝、妃红、嫣红、绛紫等等。

△ 中国传统色彩名

更多中国传统色彩 → https://color.uisdc.com/

我们是否可以从《王者荣耀》中的女英雄中提取出代表色,参考中国传统色彩的名称来重新定义口红色号名称,同时把合作口红的小黑管变个色?把这个 idea 抛出后,立刻得到研发、品牌和BD部门的支持,于是我们立刻展开了策划和设计。

创意策划

1. 确定代言女英雄和口红色号

设计开始之前,我们需要先定下来这次合作的英雄和口红色号,是单支口红还是多支?

《王者荣耀》是一款 5V5 团队公平竞技游戏,「五五开黑」已经深入人心,所以合作口红确定是选择五位女英雄代言五款不同色号,这个内外部一直通过。

合作女性英雄,我们从不同的定位、性格中,挑选出花木兰、公孙离、貂蝉、大乔和露娜,同时这五位女英雄都被赋予了代表自我的鲜明色调。其中在露娜的颜色提炼和口红色号上,我们内外部出现了意见不统一。M·A·C 魅可推荐的色号是 on and on,见下图。

我们在和 M·A·C 魅可沟通讨论中,对方给了推荐理由:一个是它上唇的效果是 blingbling 的,和露娜的「月光女神」很吻合;二是 ON AND OND 和 SOFT HINT 是他们全球最热卖的两个色号。

没错,就是这一紫一绿,全球热卖!得到这个信号,我对于 M·A·C 魅可的用户层更加清晰:年轻、时尚、叛逆,更勇于大胆尝鲜,这和我们这次合作的目标用户群体非常契合。另外创意阶段正是嘻哈、街舞、滑板等街头文化正流行的时候,时尚大胆的装扮已经屡见不鲜。作为深受年轻人喜爱的手游,为什么不大胆尝试一个非红色的口红呢?谁说口红一定要是红色的?

几经讨论,我们最终确定了代言的五位女英雄和色号,并参考中国传统色彩的名称,融合女英雄们的特点,重新定义了中文色号名称。

设计执行

1. 口红管身及包装设计

说到管身设计,这就要倒回去说了。最初一听说《王者荣耀》会合作出口红,作为爱美的小仙女很好奇地想看看策划方案,结果……

面对这样的农药口红,电竞少女只想说 NO!于是我主动认领(强行接下)了这个项目,才有了后面的故事……

抱着「一个爱美又爱打王者荣耀的电竞少女,会想要什么样的农药口红」这样的想法,我们设计了这样的管身和包装。

  • 内管身使用英雄的属性颜色;
  • 英雄 icon 提取,激光雕刻在管身内壳上;
  • 外管身提取英雄角色的两个主色调细闪渐变,打造 blingbling 的效果;
  • 包装采用盒盖UV压印英雄ICON +单支英雄元素提炼纹饰的半透明包装。

2. 插画设计与应用

插画师:六厘蛰羊 ,美国插画家协会society of illustrators会员,风格独特,现居纽约,自由插画家。

插画风格:线条及颜色可与管身渐变呼应,结合金箔印刷工艺营造视觉的「梳妆」质感。

△ 六厘蛰羊作品

在插画合作的沟通中,我们做了以下工作:

找出气质相符的三次元明星照片,确定插画中的女英雄气质。

请研发团队美术先确定女英雄的重点元素。

插画师的作品非常有自己的风格,为了还原英雄在游戏内的原设定,我们内部的美术大大海华在研发的监修下,对女英雄的面部进行了多次调整,增强用户的辨识度。

△ 六厘蛰羊线稿阶段,面部结构和英雄设定有一定距离

经过多次调整,最终有了插画定稿。

为了体现中国古典美人,我们还为五个女英雄设计了五款铜镜边框,还原女英雄们战场归来后,在铜镜前芳容绽放的一瞬间。

3. 插画在产品套装、海报、页面等延展应用

产品套装

官方海报

游戏内活动页面

官方公众号头图

项目总结

主动认领项目,理解此次合作产品的核心消费群,同时加上对游戏IP的理解,从用户角度出发,以创意打动内外部合作伙伴,得以成功开工。

用设计打动官方和客户,使得研发、品牌对项目树立信心,最终撬动更多资源,展开一次较完整的彩妆跨界营销:定制产品、创意TVC、媒介推广、线下活动、游戏内运营活动等等。

实时销售数据:1月8日上线第一天的销量相当于 M·A·C 一个月的销售量。

欢迎关注「腾讯游戏TGideas」公众号:

「腾讯团队的实战案例」

优设大课堂

谷歌设计师:看起来很高大上的设计思维到底是什么?

提到设计思维,我们大部分时间会把它理解成「用设计师的思维去设计」,但其实它并非一种思维,而是一种方法论。Interaction Design Foundation 把「设计思维」(DesignThinking)定义为一种可反复使用的模式,并要遵循「以人为本」的核心去了解用户,挑战老旧的思想和重新定义问题所在,并通过五个程序:共情(Empathise)、确定(Define)、形成概念(Ideate)、原型(Prototype)、测试(Test)来找出适当的解决方案。

△ 设计思维的五个步骤(图片来源:99U)

无论是创造一个新产品,或者是给现有的产品添加新功能,革新教育,改善一个企业的运营。设计思维(Design Thinking),这个存在了差不多半个世纪的方法论已经渗透到了各行各业。

前不久,Khoi Vinh(平面设计大神,前纽约时报的设计总监)在他的博客Subtraction.com 上面发表了一篇很有趣的文章《In defense of Design Thinking,Which is terrible》(为设计思维辩护)。这篇文章是他和 Natasha Jen「Pentagram(五角)合伙人之一,她在去年在99U上发表的演说《DesignThinking is Bullshit》(设计思维就是纯扯淡)引发了一波对设计思维的讨论,在第三届Phil Patton讲座上的交流记录总结,再加上他自己的一些感触而成。那时,我深度接触设计思维这个方法论也有段时间了。这篇文章以及 Natasha 的演讲引发了我对这套方法论的思考。就这个话题,我跟国内外的设计师朋友,产品项目经理进行了一些交流,加上本人的工作经历,跟大家谈谈我对这个方法论以及设计本身的看法。

△ 图片来源:https://www.subtraction.com

先总结一下两位大神的观点。Natasha 认为,设计不是一个线性的过程,它不能被简简单单流程化,并且可以运用在任何一个行业去解决任何问题。她还认为设计思维这个词盛行的现象是令人担忧的,设计思维里的五个环节中也完全缺乏了批判这个板块。而批判、总结,再加以改进设计方案是直接影响一个作品/产品成功与否的重要因素。所以,如果这种缺乏批判的设计(方法论)被越来越多的人接受并且加以使用,这有可能会导致设计的「下坡路」,而且会误导大众对设计本身的理解。所以在她看来,设计思维是纯扯淡的,除非她能看到一些真实存在的证据,证明设计思维的优点。Khoi 从非常客观的角度跟大家探究了设计思维,比如它让许多不同领域的人都能参与到设计,解决问题的过程当中(设计的一大功能就是解决问题 problem solving)。Khoi 从 Natasha 演讲里感觉到了她对设计民主化的一种恐惧,他认为 Natasha 觉得只有设计师才能设计,而且只有设计师应该设计。让非设计专业的人来设计会直接导致差设计的产生。Khoi 认为这种领土性质想法是有问题的。当更多人了解并且投入于设计当中后,并不会导致设计的整体质量下滑。如果能有更多非设计专业的人来解读设计并尝试设计,这其实对设计本身是非常好的。就像科技,当它被更多人学习,应用并加以改进之后,才会有更多的突破和革新,设计也应该如此。但是他也同意,设计思维是一把双刃剑,也有不足之处。比如它不可避免的方言性,和它促进设计民主化的效应力其实并不高。

对于他们两个所说的观点,我觉得都对。但是更准确的说,他们两者所提到的设计并不能相比,因为设计思维(方法论)与设计其实是两个非常不一样的东西,从名词上来说已经能嗅出它们的不同。

文章目录

  • Natasha Jen – 批判在哪里?
  • 为什么设计思维是纯扯淡?
  • 谷歌的设计冲刺
  • Khoi Vinh – 设计(思维)的方言性
  • 「当你都不会这门语言」的时候…
  • 「那就更别提去理解这门语言了」
  • 总结

Natasha Jen – 批判在哪里?

Natasha 所说的设计是设计师们通过自己的独特风格以及对当前的设计潮流的敏锐感觉来创造出满足客户/大众审美的作品。这里的设计,狭隘地来讲,可以定义为一种主观的行为。那么这个行为可以通过很多不同的方式实行。Natasha 本身作为一个非常成功的设计师,她对视觉的敏感是不用说的,在 Pentagram 这种设计巨头里,她也是创造设计潮流的那批人。「虽然我们公司涉及到的项目种类非常广,包括企业形象设计,展览设计,出版物,动态图形等等。我还是会用平面设计师来定义自己。」她的开场白「设计思维现在是个流行语。这就是问题所在,当今社会尤其是设计师圈子里,并没有很多对设计思维的批判。我认为像我这样非常在乎自己发布的作品质量的设计师们,真的应该好好思考一下设计思维的含义,以及它会给设计领域乃至社会带来的影响。」之后,Natasha 讲解了设计思维的五个环节以及通过在谷歌图片搜索「设计思维」得到的答案,也就是五个排列整齐的六角形以及密密麻麻的3M便利贴,风趣的总结了社会对设计思维的理解,并简单介绍了设计思维的由来。

△ 图片来源:https://99u.adobe.com/videos/55967/natasha-jen-design-thinking-is-bullshit#

什么是批判?如果你就读过设计学院,你肯定知道在设计过程中的每一个步骤,每一次讨论中,批判都是非常重要的。你提出一个创意,并展示出支持你创意的证据,然后在场的各位就开始各种建设性质的喷你。这才能真正促使你的提高啊,对吧?与此同时你也能开始真正掂量和反省,到底什么是好的?但是批判在设计思维里面完全不存在。──Natasha Jen

我完全同意她所说的,但是 Natasha 的设计并不是设计思维,设计也确实不是一个线性的流程。当然啦,打草稿,被喷,修改,再被喷,再修改,最终结束,大体有一个套路。这个设计也不完全能被模式化,并用于任何行业去解决任何问题。咱们再来看看设计思维的五个环节,里面真的没有批判么?其实也是有的,而且每一步都有批判,只是它存在的形式跟 Natasha 所讲的批判不一样。怎么讲?我马上跟你们慢慢道来。在那之前我们来看看设计思维到底扯淡在哪里。

为什么设计思维是纯扯淡?

设计思维为什么扯淡?同学们先要明白,设计思维并非是一种思维,它是一个方法论。那么这个方法论本身是没有正面也没有负面的。其实就看企业和团队如何使用这个方法论了。挪威设计师 Lillian Ayla Ersoy 发表的《为什么设计思维在走下坡路,我们应该做些什么?》一文中探究了这一话题。她提到了她近几年周游世界参加各种设计研讨会所看到的新发布的产品已经变得千篇一律。她提出,设计思维不应该是一种生产线。它其实应该促进新创意和解决问题的方案,如今的设计思维已经变成了一个差不多产品的生产线。平面设计,动效设计,情感设计等都在慢慢失去它们的价值,但是决定产品成功与否的重要因素也都是它们。这其实跟 Natasha 提到的观点非常相似,她认为对于很多企业来讲设计(思维)只是一个需要被打勾勾的盒子,并没有注重这个方法论能够带来的潜在价值。当一个团队发现一个可行的解决方案,却又只是发现了冰山一角的时候,就赶紧实现产品然后发布,并没有经过多轮的改进探究来让方案变得更加成熟。设计师们有时候也要为多个权益人展示进度和解释设计而头疼。权益人太多也会不必要的拖延设计的进度,让设计师们花费不必要的精力和时间。

设计师和创意人士所处的环境也是决定他们个人提升的重要因素,如果一个本身很有天赋的设计师把大部分的精力都花在给其他人解释TA的设计决定,而没有在自我深造上面的话,那么过几年TA的设计水平不会提高反而会下降。──Lillian Ayla Ersoy《为什么设计思维在走下坡路,我们应该做什么?》

创意环境,工作氛围很重要,我觉得不管是管理阶级或是我们这些手艺人都应该积极地为对方打造一种可持续发展的创意环境,这样才能推进创意的发展以及对我们本身实力的提高。

「刚刚发现到冰山一角之后,赶紧投入生产然后发布,然后赶紧失败,看看大众的反应。」和「没有真正的结束,只有没完没了的发布!」

我不知道国内的具体情况是什么,我也知道这肯定是极个别情况,但是上面这两句话让我想到一位在国内一家科技公司的朋友分享他工作经历的时候提到的,团队里设计了一个新功能之后赶紧实现,然后发布,用真实用户做实验,看看反应怎么样,行就接着来,然后根据用户回馈来改进方案,不行的话直接把这个功能取消,再想下一个功能。这种实验型的做法OK么,必须OK。结合团队所处的整体环境,包括市场,文化,以及用户对新科技/新产品的认知度/接受度的不同,设计、开发、发布的步骤有不同的套路和节奏是正常的。而且,通过测试所得来的回馈是对产品最好的批判。我觉得这种方法有一定的优势,这也有可能是国内的发展能如此迅速的因素之一吧。但是什么都是有利有弊的。那就是在这个节奏如此之快的过程中,我们作为设计师是否在逐渐丧失批判性思考的能力,设计不再是利用我们设计师本身的思维,以人为本的核心以及对视觉的敏感去解决用户的问题,而变成了一个纯粹的实验,然后通过用户测试/调查,再改变参数,再测试,如此反复最终产出一个理想的产品/功能。在这个过程中设计本身的价值有没有得到提升?长久来说,设计师对自己本身的看法会不会改变,甚至会不会丧失了对「设计」的信念,并因为这种机械化的创意模式而变得萎靡不振?如果真的这样下去估计设计师早晚也可以被自动化取代。

好的设计不是赶出来,也不完全是实验出来,好的设计需要足够时间,加上队员们积极的思考,突破,设想,测试所造出来的产物。

拿撰写动效规范来举个例子,前前后后参加不同的设计冲刺,收集证据,并反复提炼语言就花了差不多一年的时间。当然了,撰写动效规范与视觉设计不是一个东西,但是为了取得高质量的结果,两者步骤上面还是有相似之处的。我也是非常有幸能有我现在的工作环境,上司对我信任,队友们互相给予支持。我的经理为了方便我收集材料,让我尽可能多参加设计冲刺,了解其他的产品在干什么,未来的目标是什么,需要解决的问题是什么。我在撰写规范的同时,也会参与到决定这些产品的未来方向是什么的过程中,更重要的是在这个过程中更加了解动效设计到底是什么,动效规范应该怎样改进,怎么样设计动效以及它在现行科技领域的一个定位和走向。那么下面让我通过谷歌里的设计思维实践来证明,批判在设计思维里其实无处不在。

谷歌的设计冲刺

△ 图片来源:https://www.charitydigitalnews.co.uk

在谷歌里我们会定期做 Design Sprint(设计冲刺,时长通常为三天,利用这三天来集中精力解决UI/UX问题,并且总结出可执行的下一步。)它可以是为了解决一个产品的某一个功能的用户流程(User Journey)定一个大方向,也可以是为了让不同产品之间更好的相互合作而研制一套相同的设计框架。格式其实就跟设计思维一样。第一步,Empathize(共情)。在每一个 Design Sprint 的开始,我们都得要明白这次活动的目的,现在所面临的问题是什么。通常会有来自不同队伍的关于主题的演讲(LightningTalk,闪电说),其实批判从这里已经开始了。在听演讲内容的同时我们得把值得探究,改进的地方记录在便利贴上面(叫做How might we,我们能怎么样去……),这里批判的思考就已经开始了。而且由于组员们的专业不同,思维方式不同,在同一个关键点上面,设计师,工程师,项目经理,调研员所考虑的事情都是不一样的。在共情环节结束之后,我们会把这些便利贴贴在墙上,开始第二步,Define(确定)。把捕捉到的观点综合处理,归类,把大家达成共识认为重要的内容按照种类排好,再把不重要或不相关的内容除去。我们得批判的思考才能更好的分辨便利贴们之间的潜在关系,以及哪些保留,哪些需要被除。咱们再看下一环节,也就是 Ideate(形成概念),这里也是我认为是批判最多的一个环节。我们先会做一个叫做 Crazy Eight(就叫它疯狂8分钟吧)的小活动,针对需要解决的问题,每个组员在8分钟内想出8个点子,然后相互分享。接着全员投票,把最有可能成为解决方案的点子选出来加以点评并且定制出冲刺接下来的计划。之后,我们会安排固定的时间来分享我们的设计进度,在分享与展示的过程中,组员们就得给出建设性的批判。我作为动效设计师,需要思考在设计出来的界面之间符合活动主题范围内的潜在交互实践范例,找出界面与交互设计方面的漏洞,以动画的形式展现给大家并加以讲解。经过至少三轮的分享与改进,冲刺的最后一天的末尾,我们才会给利益相关人展示我们得出的结论。这就是我们的设计冲刺格式。我注意到的是,设计冲刺不是为了解决问题,而是在短时间内得出一个具象的结论/共识,以便之后的设计与开发。

那原型(Prototype)和测试(Testing)呢?是的,不是所有的设计冲刺都会涉及到原型与测试。工程师们在冲刺当中除了与我们设计师一起发散的思考之外,他们还会提出方案在实现方面的可能与局限。现在有很多工具可以非常迅速的制作出原型,原型也确实在展示设计漏洞方面有很大的用处,但是它也有局限性,比如在展示一些特定交互实例的时候,无法展现动效过程中具体发生了什么。比如说允许用户在过渡中途转向或返回,这种我没有在原型工具里看到,不知道大家有没有遇到过有这种功能的原型工具。再说如果能利用有限的时间尽可能多设计,为什么不呢?再说测试,其再经过几轮冲刺后,我发现,测试最好别在冲刺的时候做。一次冲刺只有三天,好钢用在刀刃上。文章上面提到过,测试也是一个很好的批判。通过测试原型所收集来的回馈,加上我们的分析并找出解决问题的机会所在,才能更好的改进产品/功能。当然不排除是因为谷歌的财大气粗,所以可以给原型和测试环节足够的时间和资源,让他们撒欢儿地玩耍。

所以这样看,其实在冲刺的过程中,批判是无处不在的。

关于 Natasha 有关设计思维属于纯扯淡就谈到这儿,下面看看 Khoi 的设计思维是把双刃剑的论断。

Khoi Vinh – 设计(思维)的方言性

设计思维使得来自不同领域的人一起合作解决问题。它促进了设计的民主化,让更多的人来了解设计。设计思维有很多正面的元素,但是当然也有它不好的地方。──Khoi Vinh 《Indefense of Design Thinking,Which is terrible》

△ Khoi Vinh 图片来源:https://www.designweek.co.uk

Khoi 的观点使我产生了许多共鸣。他在文中所提到的设计民主化,以及用工程领域的开源对科技的提升乃至对社会的影响,这个话题太大了,我就不聊了。但是从毕业到工作,我的经历可以好比从 Natasha 的设计思维是纯扯淡到设计思维是一把双刃剑的过程。我个人认为,因为设计思维本身作为方法论,它其实是中性的。所以与其说设计思维的方言性,应该是设计或者任何一种专业的方言性。

我们先来看看这两句话:

When you lack language,you also lack the capacity to understand.

当你都不会这门语言,那就更别提去理解这门语言了。──Khoi Vinh

还有:

抵押支持债券,次级抵押贷款,国际货币基金贷款划分的「部分」。听起来让人有点摸不着头脑对吧?这些词儿是不是让你觉得很无聊,甚至让你怀疑你的智商?呵呵,它们作用不过如此。华尔街那帮人特别喜欢用这种模棱两可的词语来让你觉得只有他们才能胜任他们的工作。也有可能,就是想把自己与其他人分割开来。── 电影《大空头》

电影《大空头》(The Big Short),里面的瑞恩·高斯林用上面这句话把 Khoi 所说的解释得淋漓尽致。Khoi 所说的也让我感触特别深刻。我认为他提到的这个是设计思维,也是设计双刃剑里最「锋利」的一面。先拿在用户体验这个专业的方言性举个例子。在谷歌刚入职的时候,我其实对这个岗位并不看好,干了个把月之后甚至开始跟朋友抱怨说谷歌里创意已死,只有古板的设计,办公室政治还有盲目的服从。因为那个时候我对动效设计这个专业的理解也只是停留在 UI动画制作上,对用户体验这整个专业那是七窍通六窍。那你们会问我是怎么进去的,当时他们雇佣我当合同工也只是让我制作动画素材。那时候,我并不知道,动效设计可以增加应用的连贯性(Continuity)和可用性 (Usability),促生心智模型(Mental Model),阐述界面中组件的空间关系(Spatial Relationship),主次关系(Hierarchy),以及暗示可执行交互动作(affordances)等等。

「当你都不会这门语言」的时候…

第一次参加设计冲刺,也是因为刚入职,所以并没有能真正参与到冲刺的过程当中,当时能做的就是帮设计师们制作动画素材,然后他们再研究设计中的漏洞。吊儿郎当的参加到冲刺第二天,开始第一轮的分享设计进程,一个来自瑞典的小哥开始讲解他们小组所做出的设计方案。我当时站在那里,真的一句都听不懂,所有词儿都知道是什么意思,但是放到一块儿我就不明白了。我以为是因为我的语言不达标,于是就问了站在旁边的一个美国本土小哥,他也是一个跟我有相似背景的动画师:「嘿,他在说什么?我听不懂啊。」意外的是,他竟然回答道:「我也不知道啊。」就是在那个点上,我被设计思维和用户体验狠狠的划了一刀。

单从用户体验来讲,得先学到多少的专有名词才能在这个专业里面轻松游走?直到现在,还是有很多专业术语会让我摸不着头脑。曾经读过一篇国内关于 Material Design 的文章,在评论区里看到这样一条评论:英文应该成为 UI设计师补习的第一个技能哎!之前在准备演讲的时候,我在翻译上面花了不少功夫。因为同一种组件用英文说是一个名词儿,但是用中文估计就不是直译那么简单了。举个例子,MaterialDesign 里面的旅游应用 Crane 使用了一个叫做「Back Drop」的组件。我当时给翻译成了「背幕」,之后觉得还是不妥所以干脆就不提这个组件了。后来跟礼包哥聊天的时候才发现这东西叫做「抽屉」。这里不是想说谁的名词儿才是官方的,只是觉得很有趣。

专业有方言性,不同团队其实也有。为了能更好的跟队友合作,不同团队都会不自觉的去创造一门「自己人」的语言。这也不纯粹限于语种的不同,举一个例子。我之前收到谷歌另外一个团队的动效问题,问我一个 Logo 动画在应用 Warm Start(暖开始)和 Cold Start(冷开始)之间的使用区别,当时我就迷茫了。就问道什么叫做暖开始和冷开始。后来解释说,暖开始就是你的应用已经是打开的状态下从别的应用回到该应用,而冷开始是从应用本身的关闭状态被打开。而我们队里,会直接说「When you open the app when it is closed/When you return to the app.(当你打开/回到这个应用的时候。)」 我其实就是觉得,你用来跟我解释「冷暖开始」的时间,都可以跟我说多少遍「当你打开/回到该应用」这句话呢?非得发明一些队外的人不明白的词句,还得再花更多的时间去解释,何必呢?

能说会道必须是一种能力,用天花乱坠的词语解释设计也并非易事。你也会发现,设计水平相当的时候,往往是那些听起来越「聪明」的人,越会说的人升迁越快。但是少一点逼格,多一点真诚,也绝非坏事啊。最近跟礼包哥交流,我问他关于对设计思维的看法,他提到了产品思维并解释道:「寻找用户痛点,刺激用户痒点,满足用户爽点。」就算你不是用户体验专业的,是否也能大概明白什么是产品思维?

我们都想让别人觉得我们很聪明,并用酷炫的语言还有别人不懂的专有名词讲解设计。这样众人会觉得设计是一种神秘的学科,不是什么人都可以做的。就像 Khoi 说的:「尤其是对于在广告机构,艺术工作室的自由设计师来讲,把设计的奥妙保护起来是正常的,毕竟设计师们有明确的利益动机嘛。」要是谁都懂我们的专业,都会干我们干的东西,那我们赚什么钱,吃什么去?不同专业的方言性绝对不可避免,你们也看到了,就连同公司内部队与队之间交流都存在困难。当然,我也不会说你必须得用大白话去解释你的专业。不过你可以试试看,跟你不是搞设计的朋友,聊聊设计,或者跟你爸妈解释一下你是干什么的,看看他们能不能明白。设计思维在设计民主化方面有一定的作用,但是它的效果真正有多少呢?国内外设计圈子还是相对来说比较小,大众对设计的认知度还是比较低,很大一部分原因是因为这种不可避免的「方言性」。当然还有好大一波儿认为「设计根本就是特别简单的东西,不值钱!」的人。

「那就更别提去理解这门语言了」

就好像你想要做出好的电脑动画,你得先要驾驭好电脑软件,不能让其变成你的绊脚石,然后才能更好地展示你的故事,构图,动画节奏等等。想要能够更好的跟队友们研讨工作,你得先懂得使用用户体验的语言。我因为从一开始对用户体验专业的知识缺失,不得不去读关于这方面的书籍与相关读物。现在已经养成了习惯,每天至少会拿出两个小时的时间在阅读上。但是讽刺的是,当我对这个方言掌握到一定程度,并能够跟同事交流甚至提出影响设计方案的建议的时候,我发现不但再没有觉得谷歌里创意已死,只有古板的设计,反而也能明白这个专业有意思的地方,并发现能够发挥创意的地方其实有很多。现在再看我之前的抱怨确实有点可笑。这也告诉我有时候如果不了解一个事物,还是少评论两句。

总结

设计思维会随着科技的发展不断进化。此文没有想定义设计思维是好是坏,只是呼吁大家用辩证的态度去对待设计思维,以及其他甚至还没出生的方法论。我们应该根据项目、团队的情况去选择不同的方法论,而且要更加注重设计的过程,学习怎样为不同的用户,交互情景做出适当的设计,并积极的思考。

设计思维只是一个起点,应该用它来激发新的创意和解决问题的方法,而不是一个加快产品生产速度的秘籍模式。

专业的方言性不可避免,在与其他队交流的时候,可以主动的解释一下「自己人」的语言,平时尽可能用易懂的词句解释设计思路。

一个团队,一个企业里每一员都有为对方打造一种可持续发展的创意环境的责任。

不知道大家对设计思维怎么看?设计再怎么说还是为解决问题而生,用什么方式去解决问题也只是设计的第一步。在2019年里,希望大家能用探究与批判的态度去看待设计和自己的工作。

参考文章:

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

「用设计思维工作」

优设大课堂

用薄荷健康的案例告诉你,设计是怎么解决问题的!

@小乖乖老爸 :作为一名设计师,在日常的设计工作之余,也许会问自己(或被问到)一个形而上的问题:设计是什么?设计的目的是什么?设计的本质是什么?设计的作用是什么?

每个人的回答都不尽相同,《网站设计的艺术与科学》一书的作者 Jeffrey Veen ,他的回答很有代表性:

△ 好的设计是解决问题

设计领域之外的人总是认为设计师的工作就是修饰,这让我感到惊讶。好的设计是解决问题。

「设计 = 解决问题」这个说法似乎有点空洞,不太容易理解,更不知道怎么运用在自己的工作中。

而且不光设计师认为自己在解决问题,产品经理也说我们是在帮用户解决问题啊。这就有点儿懵了。

没关系,接下来我们通过一个案例,看看设计是怎么解决问题的。

文章目录

  • 案例的背景介绍
  • 信息如何展示
  • 如何帮助小白用户快速决策
  • 如何让中阶用户看得懂
  • 如何向高阶用户解释复杂问题
  • 吐槽

案例的背景介绍

我们来看一个案例:食物详情页面的设计。

先交代下项目的背景:会关注食物热量和营养信息的用户,主要是减肥和健身人群。

△ 不同人群关注的饮食

减肥用户总是会问:这个食物减肥时能不能吃?吃了会不会长胖?他们比较关心食物的热量、脂肪、碳水化合物。

健身用户也有类似的问题,他们比较关心食物的蛋白质。

还有,孕妇会关注叶酸和钙,糖尿病患者会关注 GI 和 GL,妈妈会关心儿童生长所需的钙和锌,高血压患者会关心钠、钾、镁……

薄荷健康App 在设计食物详情页面的过程中,踩过许多坑,以下是几个有代表性的历史版本。

△ 历史版本

左边第一个是2014年的,那时流行拟物风,设计师会花很大精力在怎么体现质感上。然后一步步的扁平化,过渡到最右边的,2018年的大标题的简约风格。

不要觉得以前的版本土,人都是猴子变的。要是一直觉得以前的好,说明没有进步了。欢迎大家对现在的版本提出意见和建议,帮助我们做得更好。

信息如何展示

食物的基本信息有不少:名称、热量、三大营养素(蛋白质、脂肪、碳水化合物),以及近20项营养素(膳食纤维、维生素、胆固醇、钙……)

这么多信息要如何展示呢?对比下国内外竞品的做法。

△ 国内外竞品

薄荷的做法是:名称等基本信息放在顶部,热量信息放在明显位置,次要的三大营养素放次要位置,更多的营养素就折叠在次级页面。

△ 薄荷的食物详情布局

薄荷的食物详情页面,似乎比竞品多了些东西,这是为什么,下面会分析。

如何帮助小白用户快速决策

第二个问题来了:这些字我都认识,可这些数字意味着什么呢?比如我是个减肥的小白用户,我就想知道这个东西能不能吃,能不能简单明了地告诉我?

为此,薄荷推出了食物评价体系。

方案A:分为10档

△ 分成10档的评价体系

你觉得评级A 和评级D+ 哪个更好?

应该是 A 吧(犹豫中)?你再看看10个档的颜色变化,确定了,应该是 A 比较好。

A 并不必然比 B 好。就像钢琴十级比一级厉害,跆拳道则是一级(红黑带)比十级(白带)厉害。

虽然能看懂,但是不够直观,不够符合直觉。

方案B:红绿灯

我们借用了交通红绿灯,这是大家已经熟知的概念。看到红灯食物就别吃了,黄灯食物就少吃点,绿灯食物就放心吃。

△ 红绿灯

小白用户不需要正确的大量文案,他需要你的态度,你的结论,越简单粗暴越好,这才能迅速地帮助他决定吃还是不吃。

如何让中阶用户看得懂

中阶用户并不满足于简单粗暴的结论,他还想知道得更多,想自己来判断。

比如一个苹果的热量是53千卡/100克,这意味着什么?53算是高热量还是低热量?没概念。

要理解数字的含义,就得有相对比较。

方案A:参照物

不同类的食物不能简单的对比,我们就多找了几个参照物。主食类的参照物是一碗米饭,水果类的参照物是一个苹果,饼干类的参照物是一块奥利奥……

△ 参照物

这个方案效果不佳,用户对参照物本身都没有什么概念,还怎么用参照物来衡量?

方案B:参照系

比如苹果的热量,比55%的水果都要低,那么苹果的热量是相对一般,不算高也不算低的。榴莲的热量,只比8%的水果低,那么榴莲的热量就相对较高了。

△ 参照系

相比第一个方案,这就更容易被理解了。

需要注意的是,参照系会占用较大的面积,可以用,但不能滥用。如果热量有参照系,三大营养素(蛋白质、脂肪、碳水化合物)不落人后,也都来一个参照系,那整个页面就没法看了。

怎么办呢?有办法。

方案C:标签

根据数值,给出「低脂肪」、「高蛋白」等标签,也能帮助用户理解,又比参照系更轻量。

△ 参照系与标签

所以薄荷App 上是方案B和C都有用到,而且还有「食物亮点」,列出该食物进入了 xx 榜单,来拓展阅读。

如何向高阶用户解释复杂问题

三大营养素的数据,最早是纯数字展示,后来为了更直观的展示,运用了可视化的表达。三大营养素各有一个圆环,三个圆环加起来是100%。

△ 番茄的三大营养素

细心的用户会自己去算,然后反馈说,这三个环里的比例是错的。比如,100克番茄,蛋白质0.9克,脂肪0.2克、碳水化合物3.3克。算起来,脂肪的比例 = 0.2 /(0.9 + 0.2 + 3.3)= 4.5%,但圆环上显示的是10%,明显是错了嘛。

我们想表达的是:这不是重量比例,是供能比例,是这样算的:

三大营养素都会产生热量:蛋白质的热量 = 0.9克 * 4 = 3.6千卡,脂肪的热量 = 0.2克 * 9 = 1.8千卡,碳水化合物的热量 = 3.3克 * 4 = 13.2千卡。

总热量 = 3.6 + 1.8 + 13.2 = 19千卡。

于是,脂肪的供能比例 = 1.8千卡 / 19千卡 = 10%

请用尽可能少的篇幅,尽可能浅显的方式,向用户解释。这怎么说得清呢?

△ 数学易,设计难

△ 三个解释的方案

方案A:示意图

见上图左,我们试图告诉用户,三大营养素各自会提供热量,加起来就是食物的总热量。

用户反馈:这组织架构图似的玩意是什么?完全理解不了我们想表达的点。

方案B:公式

见上图中,我们试图告诉用户,三大营养素是通过这个公式,算出热量的。

注:0.9 x 4 + 0.2 x 9 + 3.3 x 4 ≈ 15千卡

用户反馈:这个公式是怎么冒出来的,跟我解释解释?

方案C:一句话

见上图右。在与运营同事一起反复斟酌文案之后,终于算是解释清楚了。

注:以上为三大营养素的供能比例,不是重量比例。其中,脂肪的供能效率比较高,是碳水化合物和蛋白质的2.25倍。

这个故事告诉我们:「学好数理化,走遍天下都不怕」这句话是不对的。论学好语文的重要性。

吐槽

如果借吐槽别人做得多烂,来显得自己做得多好,这不太厚道。我们就来吐槽薄荷自己家做的小程序:「薄荷食物库」,来看看有哪些坑,我们可以引以为戒。

△ 薄荷食物库小程序

1. 标签

这里把标签放在了很明显的位置。其实这个信息并没有特别的重要,而且对于小白用户,没有红绿灯那么简单直接。

2. 颜色

在健康类的 App 里,红色是要慎用的。因为有些地方你需要用红色来表示警告,而有些地方又没有这个意思,用户就猜不透这红色到底有没有倾向性了。保持一致性,是设计的基本要求。

3. 运动参照物

用运动来作为参照物是个不错的点子,但有三点没做好。

不能所有食物都用运动参照物,比如吃一个包子要打羽毛球50分钟,那我是不吃么?

为了避免误导用户去节食,可以在红灯食物上显示运动参照物,而绿灯食物、黄灯食物就不要显示了。

运动参照物不能只有一个,比如现在是晚上,我上哪儿去打羽毛球?最好有几个可选项,最好不要有场地限制。更不能是随机出现,一会儿让我遛狗60分钟,一会儿让我工作40分钟,让人摸不着头脑。

△ 运动参照物

上图左是薄荷食物库小程序,上图右是薄荷健康App。

设计师总是倾向于让用户知道:有新功能咯,在这里,快来用用吧。

新版本突出了标签,增加了运动参照物,以及返回首页的按钮。你可以看到,这三个就特别的明显。

要克制住这种冲动,新增加的元素,不要破坏整体效果,不要喧宾夺主。

结语

△ 在混乱中创造常态

设计师可以在混乱中创造常态,他们可以通过组织和操纵文字和图片来清晰地表达信息。──Jeffrey Veen

在人机交互中,我们要传递的信息,用户并不能完全吸收。很大部分都像水过鸭背,在传递的过程中损耗掉了。设计师的工作,就是要解决信息损耗的问题,把信息清晰地传达给用户。

「App分析让你对产品理解更深刻」

优设大课堂