关于设计,我们到底该如何定义抄袭、借鉴、临摹和原创?

@做设计的面条 :我最近有一个奇怪的发现,就是原创这个概念可能很多人是理解的,但是抄袭、借鉴、临摹三者之间的关系大家貌似就不太能区分了。所以今天,干脆就来展开讲解一下这几者之间的区别。

我们先来看几个问题:

我想象了一下这位同学的描述,最终得出的结论是,如果你原封不动把这 ABCD 的内容临摹下来,并且一点都不做出改动,那依然将会被视作是抄袭,而不是借鉴。但如果你懂得适当的调整,最终得到的作品有了自己的特点,让人一眼都认不出和原来的作品有明显的相似之处,那就只能算是借鉴。而能力更强的人,他能把它借鉴到让人压根就看不出相似之处,并且那就可能被称为是原创了。

再比如这个问题:

毫无疑问,你这样做出来的作品,肯定是抄袭了,而且这种抄袭还可以有其他的方式表现,比如其他的都不变,只是把别人的文案换成自己的文案,再或者是其他的都不变,只是把别人的产品换成自己的产品等等,这些都可以说是抄袭。

比如大家看看今年双11某个店铺的页面:

再对比看下另一家店铺的页面:

大家发现没有,这两者一眼就能看出完全是一样的,只是文案和产品替换了而已,所以其中一个肯定就是抄袭了我们这里说是抄袭,而不是临摹,是因为这属于商业作品了,临摹只是针对于非商业作品的练习或者学习目的为准。

据群里的小伙伴说,是 tutu 抄袭了韩后。

不过 tutu 后来又换了另外一个页面:

那么这个时候,你看,虽然依旧是用的礼盒和展台陈列的创意,依旧是大红+金色的颜色搭配,依旧是金属高光立体质感的效果处理,但是这个 Banner 就与之前的视觉效果完全不一样了,成为了另外一个作品,只能说是借鉴,不能说是抄袭,原创倒是称不上了,因为这种效果处理和创意方向太常见了,已经不能算作是原创了。

所以到这里,大家应该能够理解临摹、 抄袭、借鉴、原创之间的差别和联系了吧。

通俗点,我给大家总结一下。

一、临摹

临摹是指,比如你看到一些很不错的作品,你很想做成它那样的效果,想拥有那样的创意,你想学习,那么你可以去临摹,也就是把别人的配色、布局、效果、文案、产品、细节、点缀元素、场景等等全部都复制一遍做出来,并且这只是你个人学习的用途,非商业用途,那么我们就称之为临摹。

但这里要说明的是,临摹和模仿还是有一些差别的,模仿大多数是针对某一种行为,比如模仿某个人作图的动作、习惯、喜好、方式等等,而临摹则是针对的某一件作品。

二、抄袭

抄袭是指,比如你看到某一件作品,你觉得人家做的很不错,然后你又很懒或者你能力有限,所以你干脆直接把别人的作品拿来做项目商用了,最主要的场景或者主要的元素基本就没变,你只是更改了其中某一样或几样东西,比如文案,产品,或者配色等等,但是最终出来的效果和感觉跟原图放在一起,别人一眼就能认出他们几乎是同一个作品,那么我们就认定为这是抄袭了。

抄袭和临摹最主要的差别就是,一个是商用的,一个是非商用的,而且抄袭行为是被业内认为不齿的,一旦被发现很可能就会影响自己的名声,而临摹则是大家都允许的一种学习方式。

三、借鉴

借鉴是指,比如你看到某一件作品,你觉得人家做得很不错,然后你会仔细去思考和分析,到底人家哪里做的不错,再结合自己要做的项目或者练习作品,你觉得人家哪些做得不错的地方你可以用在自己身上,融合进去,而不是照搬人家的成果,这样最终出来的作品,必定也是有了你自己的思想和灵魂在里面了,而且显得比较协调,看不出来和原作品有较明显的相似之处。

四、原创

至于原创,其实我们大多数人做的作品,目前也都只能算是这种借鉴得来的作品,大家也心知肚明,真正能算得上是原创的,还是比较少的。

因为严格意义上的所谓原创,几乎是没有的,因为我们每天都会接触各种信息、看到各种各样的人和物,有时你都没在意,但这些却存在了你的潜意识里,某一天可能会突然蹦出来,变成了自己的灵感。

除非你从出生之日起,你不看任何东西,不跟任何人交流,也不听任何人讲话,那么你所做出来的作品才可能算是真正意义上的完全原创,但这大概也只有天才才做得到这样吧。

所以,我们做设计去纠结原创不原创,其实没有意义,因为我们其实都只是在借鉴的基础上原创罢了。

这也是为什么我们需要多看,多想,多交流,多思考,提倡跨界学习等等,因为借鉴并不可耻,因为懂得从他人身上、别的领域、大自然等等提取精华并运用,形成自己独特的作品本身就是一件了不起的能力和创新,我们也正是在这种互相学习借鉴的氛围下获得成长的。

设计也好,科技也好,其他任何领域也好,都是这样的道理。

写在最后

很多人刚入行做设计,可能会比较纠结这些概念方面的问题,也比较迷惑到底什么行为是可以做的,什么行为是不可以做的,也不清楚自己做了到底会有什么用,那么你只需要记住下面这条建议就好了:

  • 如果你确认了自己并不是天才,那就不要一开始入行就老想着原创了,因为你可能还 hold不住,还是好好打好基础,从临摹做起吧。
  • 可以临摹学习,但是不要一直只是停留在模仿的阶段,因为你的思维可能会僵化,你会失去思考的能力,到那一天,你可能就被人工智能淘汰了。
  • 可以临摹学习,也可以借鉴别人优秀的点商用,但不要抄袭。
  • 量变决定质变,光靠项目作品磨练自己是不够的,没有人是可以不做练习不下苦功夫就可以成为很厉害的设计师的。

欢迎关注作者的微信公众号「做设计的面条」,一个干货与文笔俱佳的美女设计师。

微信公众号简介:专注开拓电商设计思维,不定期分享一些个人见解干货,当然也会分享一些顶级创意、摄影、人生感悟方面的好文啦。

tttt-1qr1111

图片素材作者:Slanted Publishers

「设计师的临摹方法集结」

优设大课堂

拍一张照片,就能做出一幅海报!(实操分享第四波)

@做设计的面条 :借着今天的随手拍照片做海报分享的机会,重点给大家分享一些我在海报设计排版方面的心得和思路。

往期回顾:

依照惯例,我依旧是会分享5张照片海报,需要说明的是:

  • 所有照片都是手机随手拍的,有可能是手机旧了的缘故也有可能是光线不好的缘故,所以有些照片的画质可能不太好;
  • 因为觉得生活其实可以更有意思,所以我喜欢以玩的心态做设计,但既然是以玩的心态做设计,就不会把自己局限于某种固定的语言、排版、配色、技法等等;
  • 手机随手拍照片设计成海报的形式是我突发奇想的,没想到现在已经坚持了那么久,这可得多亏了你们经常催我做海报并且喜欢我这种形式的分享。

接下来我们就看具体的海报分享吧。

照片一

我承认,年纪越大越喜欢粉色,这条诅咒成功的在我身上应验了。

有一天在小区里溜达,刚好看到有粉色的花,就手欠摘了一朵回家,拿回家后我就把这些洒在了我的粉色贴纸周围,所以就有了前面那张照片。

拍好照片后,说实话我是不太想拿这张照片做海报的,因为要构图没构图,要含义也说不上来有什么含义,但就是觉得照片上有一些朦胧的光影还有点意思,再加上粉色、花花之类的,所以就会联想到一种朦胧的画面,我想也许我可以把这张照片打造出朦胧感。

如果经常有看我做的海报或者以前拍的照片,估计大家就发现了,我是个喜欢藤蔓的人,喜欢各种弯弯曲曲的线条,喜欢看着它们在我手里绕来绕去,我觉得这样才够仙够美。

所以,我就以这张照片为原型,做出了下面这幅海报:

贴纸本身就已经有文案信息了,所以无需我再打字赘述,整个画面也就是简单的点、线、面的组合玩法。

我从前就重复过很多次一个关于排版的概念:你就假想你画面里的所有文字、图形、产品、模特等等就是我们平面构成里的点、线、面,然后把平面构成基础知识里的几个原则掌握好,把握好其中的规律和韵律,你就可以想怎么玩排版就可以怎么玩排版了。关于点线面的讲解,你可以看这篇文章→《非科班设计师如何提高自己的能力和收入?》

比如我做的很多海报,我有时候会着重突出文字信息,有时又会更看重整体的协调感,而有时候又故意让画面看起来很凌乱,有时又故意大片留白,这每一种形式和排版其实都是可以的,因为我的目的就是借助设计来玩,就是要吸引同样觉得好玩觉得好看的人。

所以在我看来,每一种排版其实都对应着一种目的或一种想法,想法是没有对错之分的,只在于对于受众来说合不合适罢了,也就关乎于你的目的是否能达到的问题了。

当然,以上说的是很轻松,但关键在于要多练,你才能够轻松驾驭这些点线面,你才能打造出你理想中的画面,毕竟熟才能生巧。

照片二

看出来了吗?这是我吃剩下的水果遗骸。

其实原本我只吃了一块榴莲和一串提子,吃完后觉得这个榴莲核的形状有点意思,还有这个提子枝的骨架也挺美的,所以就把它俩放一起拍了一张照片,就是下面这张:

然后丧心病狂的我看到这么有意境的一张照片是不可能放过做海报的机会的,所以我当时原本是打算用这张照片做海报的,可是大概是当时状态不佳吧,我总觉得画面里缺点什么,所以我看了看家里的水果,只剩下几颗枣和几个桔子了,为了把这张海报做完,我又强迫自己大晚上多吃了几颗枣和一个桔子,只为了得到几个让画面饱满起来的元素——枣核和橘子皮。

就是下面这样了:

不过其实,如果我家里当时有其他各种水果任我挑选,我可能会拍的更好看,海报也做得更好看。

所以这张海报出来的效果就是下面这样了,而且画面里我还是继续用上了我的贴纸元素,因为我太懒了,都懒得打多余的字了:

这幅海报其实没有任何特殊的意义,文字就是与水果有关的一些文字科普,大致意思就是我爱吃水果,吃水果很好,吃完水果我觉得它们有点美,所以我就瞎折腾了一张海报出来,你们可以理解为这是一幅为了悼念我爱吃的水果们而做的一副海报。

照片三

这张照片,是我在日本拍的,其实是在大阪拍的,我在日本呆了9天,从东京到京都到大阪,一共下了6天雨,所以这把伞其实出门我都是随身带着的。

当时是打着雨伞在一个公园里转悠,然后时不时会有一些乌鸦飞过,日本的乌鸦超级多,但是我想抓拍到一张乌鸦飞过的照片却不容易,所以我就撑着伞一直抬头往天空看,一只手举伞,一只手举着手机,随时准备抓拍飞过来的乌鸦。

但是等了好久,就是抓怕不到,即使拍到了也不理想,所以我就打算放弃了,这时候正好看着雨伞,伞面上有很多水珠,搭配着伞骨架,简直就是一幅绝美的点线面构图画面。

我当时一拍完这张照片就特别喜欢,所以就发了朋友圈,然后很多人留言说:「做海报做海报!」,我其实也正有此意,只是当时在日本我也没空做海报,所以回武汉,我的状态也恢复的差不多之后,我就结合当时下雨的那种氛围和情景,做了这幅海报:

不过我当时做海报的时候也记不太清原来这张照片是在大阪拍的,我一直以为是在京都拍的,因为做海报的时候潜意识里觉得《京都的雨》这名字更适合这个氛围这个意境,更有韵味,所以拍摄场地在哪里就不那么重要了,重要的是,我就希望这雨是在京都下的,而且《京都的雨》这个名字怎么听都觉得比《大阪的雨》有意境啊。

另外我在前面讲了,我本来是想拍乌鸦的,但是乌鸦没拍到,就拍了雨伞,你们可以想象一下当时的场景:天灰蒙蒙的,时不时有乌鸦在头顶飞过,我站在雨里,撑着伞,抬头看着天空,于是顺着这个思路,我这张海报就做出来了,文字排版是比较有韵律节奏的,并且将「雨」这个字拆分开,把雨点拿出来散落下来,仿佛是乌鸦也是雨滴飘落下来,那种视觉冲击力和意境就都出来了。

照片四

这应该是我第n次拍自己的腿子,并且第三次决定把它做成海报了吧。

武汉开始降温了,那天我准备出门吃饭,就随意套了一件卡其色大衣,鞋子也是追求舒适的马丁靴,包包就是简洁轻奢范儿,包上的挂饰是在日本买的,你看我这一身随意的搭配,除了显腿短,整个色调还是蛮舒服的吧。

刚好在拍这张照片之前,我经过了一片银杏树,很多银杏叶撒落在一条一条的木质地板上,画面很有秋天的味道,所以当我吃完饭回到家,我就赶紧打开 ps,把我脑海里的画面做成了海报:

不过我并没有用银杏叶这个元素,而是用了秋天,而且依旧是用的日文,大概是9月份去了趟日本,感受了那边的景色,虽然没能有眼福见到大片大片的枫叶,但是心里还是有念想吧,所以不自觉的用了日文和枫叶来做这幅海报,整个卡其棕色系也是很有秋天的韵味。

而且假装有几片枫叶溜进了我的包包口袋。每当我做完一幅照片海报,我就感觉当设计师可真好啊,我好像有了一双有魔力的双手,想要的画面我可以自己去创造,顿时幸福感满满。

另外再对比一下我之前做的几张关于腿的海报,其实你会发现,不要局限自己的思维,排版真的有很多种玩法。

走路时的照片:

做成了海报:

走路时的照片:

做成了海报:

是不是很有意思?同样的腿和姿势,不同的排版、配色、元素、字体的运用,得到的画面感觉真的很不一样。

那么,你也可以这样玩起来的,排版没那么难,不信你也试一试。

照片五

实在是不好意思,这张照片是我手拿自己的证件照。

上周六我又去拍了证件照,上一次拍证件照还是7月份的时候,所以当时我拿到证件照的第一反应就是心里嘀咕着:「人这一辈子,到底要拍多少证件照才罢休?」

内心非常有想要恶搞证件照一番的冲动,然后我也想过一个问题,虽然我做了那么多手机照片海报,但我还从来没有动过用自己的照片做海报的念头,所以这一次不如就突破一次,看看可以怎么玩呗?

刚好前些天写了一篇分析2018年天猫双11品牌宣传海报的文章《天猫2018年双11海报,一场字体设计的Battle》,那个老干妈的海报确实让我印象很深刻,因为一个老牌而且只是一个辣椒酱而已居然会想到用波普风格去做海报,确实让眼前一亮,但其实提到波普风,就不得不提到梦露的这幅海报了:

而老干妈今年双十一海报的灵感来源其实就是出自梦露的这幅海报,所以我们看到老干妈的海报是这种画风的:

所以大概是被这种画风给毒害了,而我又刚好想恶搞一番自己的证件照,又联想到每次拍证件照可不就是白色背景、蓝色背景、红色背景上面配一张自己的大头照嘛,所以最终决定,就玩一次波普风得了,顺便突破一下自己,看看自己的手生疏了没有,于是一张海报就出来了:

所以当我把这幅海报发到朋友圈,很多人第一反应就是:「啊!老干妈!哈哈哈哈」或者是:「啊,梦露波普风海报!」。

接下来我说一说海报制作思路,顺便解答一下大家关于这幅海报的疑问,比如有人问:这种色调和画风怎么做到的?

面条解答:就是用 ps钢笔工具先把人像勾勒出来,然后做一些高光、阴影的图层,再根据自己喜欢的颜色去配色,波普风喜欢用的颜色总是这些:玫红、柠檬黄、湖蓝、荧光绿等等,根据喜好调成偏白或偏灰的色调就好了,接着把这些画好的大头照放入不同颜色的色块里拼接起来,最后一步用蒙板擦出一些做旧的质感或者直接叠加一些颓废做旧的素材也可以达到效果。

当然还有很多其他的方式,都可以达到效果,而且每个人都可以有自己的想法,不一定完全照搬梦露那样或者老干妈那样的,自己学会变通差不多就行,每个人做出来都可以不一样,那就是独一无二的了。

今天的照片海报分享和问答就到这里了,我们下期再见。

欢迎关注作者的微信公众号「做设计的面条」,一个干货与文笔俱佳的美女设计师。

微信公众号简介:专注开拓电商设计思维,不定期分享一些个人见解干货,当然也会分享一些顶级创意、摄影、人生感悟方面的好文啦。

tttt-1qr1111

「快速做出满意的海报设计」

优设大课堂

7条组件3个案例,这篇文章帮你彻底搞懂游戏化设计

对于童年关于游戏的记忆,通常是比较单纯直接的。就像我的童年记忆当中,事情大多是分为两类:有趣的和无趣的,有趣的这一类当中包括玩游戏和吃巧克力,而无趣的通常是做作业和吃蔬菜。

具有讽刺意味的是,成年之后,面对看似丰富多彩的网络世界,情况依然没有变化。对我而言,发邮件、买东西、订票这类事情必须认真对待,是无趣的;在 instagram 和 Youtube 上浪费时间,比如看人用机器碾碎一堆小熊软糖的视频,这是有趣的。事情依然是这样分类。

可是,这种有趣和无趣到底是怎么产生的?怎么能让无趣的事情变得有趣呢?

一、到底要如何界定有趣

在剑桥词典当中,「有趣的事」被界定为「令人愉快的行为或者活动」,而词典当中最意思的地方在于,它的反义词列表当中,并不是「严肃的事」,而是「无聊的事」。

所以,当我们想通过设计来解决问题的时候,我们体验和事情变得有趣一点,意味着我们所要设计的体验并非向着「不严肃」的方向,而是要对抗「无聊」。

二、游戏化设计

游戏化设计就是答案。我们通常会认为游戏是有趣的事情,这也使得将游戏元素添加到非游戏产品和服务当中,成为了设计师所热衷的事情,因为它确实发挥作用了。

三、游戏化设计的7个基本组件

有很多著名的设计师都撰写过和游戏化设计有关的文章,比如 Karl Kapp、Kai Erenli、Darina Dicheva 等。经过这些年的迭代,大家通过摸索发现游戏化设计包含5个基本组成部分,还有2个提升效果的条件。

1. 目标

为用户设定目标,因为用户需要系统给予他们明确的目的感。当人们达成目标的时候,会体会到成就感和愉悦感,而这就是乐趣的重要组成部分。

2. 规则

同意并遵循「游戏」的规则。实际上,限制会让我们变得更加富有创意,而我们大多也都欣赏这种乐趣。规则是重复性的,用户需要与产品进行持续、密集的交互,并且与产品本身构成一体的。

最好的规则通常是易于理解并易于执行的,用户不需要执行太多,或者太过费力。当你所设定的交互或者操作足够简单的时候,每个简单的操作都会带来转化。

3. 反馈

向用户提供反馈,特别是对于进度的反馈。用户需要了解他们向着设定的目标前进了多远,他们在规则之下表现如何。通常反馈有不同的表现形式,小到交互上的反馈,大到进度条、关卡提示、成就清单、鼓励信息、动画效果等。

4. 奖励

为用户提供相应的奖励。这是用户为产品投入了足够的时间和精力之后,给予他们的回馈。这可以是虚拟的奖章、积分、奖杯,还可以是排名、贴纸、头像甚至金钱和实物奖励。

常见的奖励可以是量化用户的表现,给用户提供积分兑换之类的系统,提供特殊的成就奖励徽章,以及根据用户的综合表现来提供排行榜。

通常,这种混合机制被称为 「BPL」(徽章Badges,积分Points,排行榜Leaderboards),但是这只是游戏化设计当中的一环,很多人会将 BPL 误解为游戏化设计本身。

5. 动机

为用户提供行动的动机。动机有两种,一种是内在动机,来自于我们内心,比如好奇心,骄傲,有一种是外在动机,比如金钱奖励、成就或者赞美。

研究表明,内在动机比外在动机要强大得多。而赢得胜利之后的冲动感,被认为是最终的内在激励因素。

同时,如果具备下面的两个条件,游戏化设计的效果将会更好。

6. 自主选择的自由

当用户选择自愿参加并愿意遵循规则,追随目标的时候,整个系统才会显得有趣。当他们被迫或者被欺骗时,效果则不会好。

7. 允许失败的自由

如果用户可以没有后顾之忧地失败,那么他们会更加投入,相反惩罚并不会带来更多投入,只会降低参与感。

四、在现实生活中要如何看待?

下面通过3个成功的游戏化设计的案例,来帮你更好地理解。这三个案例分别是 Fitbit、Waze 和 Duolingo。

1. Fitbit

Fitbit 包含硬件设备和 APP 两个部分,用来记录用户的健康数据,并且督促用户健身。

目标:每天达到10000步。当用户达到目标的时候, Fitbit 的智能手表会记录并提示用户,不但提升用户的使用黏度,用户的完成率是产品的核心。

规则:步行。行走是用户最基本的活动,跟踪器会自动记录这一步骤,用户不需要管它。当用户在步行过程中,是不会有其他的转化。

反馈:当用户在执行过程中,会通过跟踪器看到自己完成了多少,还要走多少才能达成目标。

奖励:Fitbit 的奖励主要是特殊成就的徽章和奖杯,并且通过用户每天的运动量来构建排行榜,提供对比和进步的参考。

动机:除了奖励之外,用户的主要内在动机是为了健康,这是一个非常良好的内在驱动力。

△ Fitbit 内的游戏化系统

2. Waze

Waze 是一个免费应用,可在苹果的设备以及基于谷歌 Android 移动操作系统和微软的 WindowsPhone 的设备上运行,目前其用户已遍及全球约190个国家。Waze 利用移动设备的 GPS信息来获取有关路面交通流量的信息,从而向汽车驾驶员提供更好的行车路线。Waze 还拥有一个由7万多名会员组成的社区,这些会员帮助 Waze 编辑地图和添加一些细节信息,如特定加油站的汽油价格,或是驾驶员在何处应留心超速监视区和避免发生交通事故等。

目标:你需要成为 Waze 社区的一员,给予其他的 Wazer 以帮助,并且获得其他的 Wazer 的帮助。成员越多,用户产出的内容越多,最终从平台上获得的广告用户就越多。

规则:Waze 需要用户提供各种事件报告。用户在提交报告的时候,可以从内置的11种类型(包括子类型)当中选择,在行驶过程中将当前正在发生的事情提交上来。由于规则的复杂性,参与到其中的用户的比例倒不会太高。

反馈:用户提交的报告将会获得相应的点赞和回复,然后这些参数将会帮助用户提升级别和经验值,这是一种非常好的互动方式,让他们可以获得交互的反馈。

奖励:Waze 通过积分来奖励用户,让他们可以不断提升等级。此外,Waze 还为用户开放了成就系统,并且提供排名系统供用户了解自己所处的位置,提供奋斗方向。

动机:由于 Waze 提交的报告最终会帮助到他人,所以用户所提交的报告最终会以帮助的形式让他人生活更加便捷,从而获得相应的成就感和赞美。作为群体的一部分,每个用户都会感到被需要和有用,这是成为贡献者的动力源泉。

△ Waze 当中的游戏化系统

3. Duolingo

Duolingo 是一个语言学习平台,以自然且循序渐进的方式为用户提供语言学习的路径。

目标:学习一门新的语言。它的功能非常强大,能够从专业和个人的角度来帮助用户学习语言。同时,Duolingo 所提供的学习路径也有一定的挑战性。Duolingo 知道如何通过有趣的学习和互动来吸引对语言感兴趣的人。

规则:上课的练习,其实就这么简单。没有时间限制,这是一个非常灵活的机制,同时可以让用户最大程度地参与其中。

反馈:用户可以通过一些视觉元素(进度条和步骤,章节等)来了解他们的进度,以及学习的表现。

奖励:Duolingo 会特别在意用户的学习路径以及获得的成就,因此会给用户提供相应的成就勋章,也提供一些其他的小额奖励,比如鼓励性的信息,或者是进展测试。平台内每个操作都被视作为强化关联,提升交互性的机会。

动机:由于产品本身吸引来的用户,就有学习语言、改善自身职业架构和能力的趋势,结交朋友、发现和了解新的文化的趋势和目的,所以并不缺少用户的内在动机作为驱动力。

△ Duolingo 的游戏化系统

五、游戏化设计是为了让体验更加有趣

用户会记住产品所带来的高峰体验,也会记住结束时的感受,无论好坏。在心理学当中,它被称为峰值规则。

因此,当我们在构建产品的时候,没有给用户提供有趣愉悦的体验,其实也就是在让他们感受负面的情绪,经历无趣的过程。从长远来看,这样也是很糟糕的。

△ 峰值规则

1. 吸引用户回来

因为游戏化系统是产品和用户之间产生关联的桥梁,因此需要用户不断返回完成任务、达成目标以获得奖励。

根据蔡加尼克效应,人们也是倾向于完成某个过程,而不是半途而废。因此,产品当中应该有一些持续吸引用户回来的东西,这样才有机会提升用户黏度。

△ 环节之间的桥梁

2. 5个关键组件

游戏化设计通常与 BPL(徽章、积分、排行榜)相关联,毫无疑问,奖励很重要,但是这只是整个系统的一部分。

成功的游戏化设计系统还应当设定目标和规则,为用户提供反馈,当然,给用户提供动机也是最关键的部分。

号称游戏化设计没有用,就像你手握着飞机的螺旋桨,说它没法让你飞。

在优先级上,产品首先要具备基本的功能性和可用性。如果用户由于操作不当,或者交互设计不够好而导致他们无法完成任务,那么肯定就更加谈不上游戏化设计了。

游戏化设计是在产品基本功能的基础上搭建的体系,它无法解决产品先天的硬伤,也无法提供技术性的功能或者解决基本的可用性问题。

△ 需求优先

3. 必须和产品结合在一起

当游戏化设计和产品本身的核心功能紧密地联接在一起的时候,才会发挥作用。而有史以来最好的游戏化的系统,通常是作为产品不可或缺的一部分来开发和设计的。

当然,如果目前产品属性上允许添加游戏化系统,也不妨在后续再来添加。

优设大课堂

流动的质感!流体效果是怎样赋予页面以生命力

在拟物化设计大行其道的时代,设计师在设计的时候会试图在数字界面中复刻现实世界中的元素和质感,大家戏称为「抄现实」。如今拟物化设计的热潮褪去,但是在设计UI和网页的时候依然在「抄现实」,只不过所「抄」的是更加深层的物理规则、运动特征和质感。

物理是一门相当古老的学科,但是并不是每个人都能理解其中的规则,但是几乎所有人都能本能地感知到它的存在,当某个动效运动不合理的时候,会很本能地感知到它「不自然」,因为日常生活已经教会我们所有人什么样的特征是「自然」的。

「自然」是安全的,是顺应我们习惯的,自然也是吸引人的。对于设计师而言,我们的生活和自然的规律是最好的老师。

怎么借鉴呢?不妨看看Kikk Festival 和 Wed’ze Goggles这两个网站的设计。

Kikk Festival 的首页设计相当的壮观,动态效果下的海洋场景近乎真实,而海岛和大猩猩的合成效果则巧妙地借助相似的形体创造出错位而双关式的视觉语言。水是整个设计中看起来最自然的东西,也是创造错位感的环境。

相比之下,Wed’ze Goggles 的页面设计就没有那么令人难忘了,但是它向我们展示了如何充分利用简单的元素来制造充满自然流体质感的视觉元素。他们的设计团队使用类似流体的斑点来装饰背景,巧妙地让原本简约空旷的页面显得不那么单调。

借助 WebGL、GSAP、Three.js 等较为前卫的技术,将物理运动质感带入 Web项目,在这些项目中得到了体现。虽然我们绝大多数人在享受这些效果的时候,硬件设备的CPU 和 GPU 不可避免地更加消耗性能,但是这并不会带来矛盾,我们也无法阻止设计师和开发者实现这样的效果。合理地运用不同的代码技术和各种成熟的特效库,再惊人的效果都可以实现,以假乱真的质感,模拟现实的运动,这些都不成问题。

接下来,我们看看三个令人难忘的案例:Julie BonnemoyStudio GustoIbiza Music Artists 这三个网站。出色的液体流动效果让这些网页足够出彩,接下来我们挨个看看。

Julie Bonnemoy 的页面当中加入了非常惊人的液态泡泡动画,作为动态背景来使用,加上温暖柔和的色调,整个页面给人非常诱人的感觉。

Studio Gusto 的首页上使用了类似的设计,不过泡泡的质感不像液体,更加接近于肥皂泡的感觉,轻盈随性。这个网站的设计是用于作品集展示的。

最后一个网页是 Ibiza Music Artists,网站并没有用水泡的设计,而是将页面背景设计成了俯视角度下的水面,整体质感简约,优雅,精致。

就像现实生活中水无常形一样,在网页设计当中,液体也可以以多种多样的方式存在着。开发人员通过不同的流态,不同的视角,不同的色彩来构建不同的解决方案。就像之前的几个案例所看到的:

  • 液体可以构成平面,就像 Ibiza Music Artist 这个案例,带着非常漂亮的波浪效果。
  • 液体可以如同浓稠的溶液一样向外扩散,就像 Booreiland 的网页中那样。
  • 液体也可以具有方向性,向着特定的方向流动,就像 Republic 的页面中所使用的效果,你甚至可以在它流动的效果中感受到液体表面的稠度。
  • Les Animals 中的液体效果则显得更加轻盈,流畅顺滑的效果更接近2D。
  • Designmodo Postcards 的页面中则使用了静态的气泡,结合微妙的视差和渐变效果,来达到有趣的视觉效果。

网页中液体效果是千变万化的,不同的视觉效果带来的感觉截然不同,但是它们大都遵循物理规律。你可以利用这些规律,让设计服务于你的想法。

使用范围

网页中的液体效果通常都是装饰性的,营造氛围,传递感受,提升设计感。

所以,在设计的时候,可以像 Intangible Matter 这样占据整个页面的区域,就像水面一样,不留下一点空隙。也可以像 Miew Creative Studio 或者 Loaded 这样,仅仅只是让液态效果占据首屏,用来吸引用户的注意力。

而在 Viennese modernism 2018 这个网页当中,液态效果甚至是网页所涉及到的展览当中的一个组成部分。这个案例当中,液态效果是现代主义设计的代表,为整个网页的氛围作出了贡献。

通过这些案例,我们可以了解到液态效果的作用主要有:

  • 丰富用户体验
  • 给人留下深刻的印象
  • 完善整个页面给人的感觉
  • 优雅地填充留白或背景
  • 避免页面看起来太简单

液态效果所带来的功能其实也可以很重要:

  • 放置视觉锚点,以不那么引人瞩目的方式来引导用户注意力到特定的地方。
  • 通过动效,为用户提供视觉路径
  • 为整个设计提供一致性
  • 提升项目本身的创造性和专业性

当然值得注意的是,液态效果本身对于服务器和用户的电脑本身的性能要求比较高,开发的时候需要注意。

结语

水是人类最熟悉的元素,对于人类而言,有着本能上的吸引力。虽然这并不是设计师和开发者在网页中使用它的主要原因,但是它确实做到了抓人眼球这一点。如果技术支持,不妨多尝试一下。

优设大课堂

2018年11月设计圈超实用干货大合集

优秀的设计工具和高素质的设计资源能够让设计师的工作更加轻松便捷。专门针对设计师的效率工具让协同和设计上花费的时间更少,最新的图标合集、UI Kits和字体素材,则可以更快让你的设计作品更上一层楼。下面是这个月的干货大合集,希望能够帮到你。

Drafta

Drafta 是一款团队协作工具,你可以借助它来储存和分享设计好的 Web 和 UI 界面,在其中组织好了之后,借助 URL 分享出来。你可以借助 Drafta 来存储设计稿、分享更新,甚至可以从其他的项目中获取灵感。这款工具有收费和免费两个不同的版本,根据需求选择吧。

Galio

Galio 是一款免费开源的框架,能帮你创建移动端 APP。它拥有大量现成的组件,各种排版的功能,以及足够漂亮时尚的基本主题,足以应对不同的设计项目。整个框架内置了11个不同的界面,超过60种不同的元素,并且还在持续增加中。

DesignBase

DesignBase 可能会是这个合集当中最吸引人的东西,这个网站当中都是精心挑选的各种设计资源合集,包括 UI Kit 工具包,各种视觉稿、插画、配色方案、字体、图标和数据库。一站式服务哦 ~

Playroom

Playroom 是一款非常有用的工具,能够帮你同时针对不同的主题和不同尺寸的屏幕来进行设计,这款工具需要 JSX的组件库作为支持。在它的帮助下,你可以创建一个无需安装的、面向代码的设计环境,它内置于独立的捆绑包当中,可以和现有的设计系统和文档一起部署。

Dribbble for Sketch

Dribbble 如今可以和 Sketch 联动了。新的集成方案可以将你最喜欢的平台和你最喜欢的工具结合到一起,无需导出设计素材就能发布出去。安装插件试试吧。

Experimental Gradient Editor

如果你喜欢使用渐变,那么这款工具会非常对你的胃口。你只需要使用滚轮查看不同的选项,选择色彩就可以了。你甚至可以使用不同的灯光模式来查看色彩在不同条件下的外观,帮你更好地选择更合理的配色。

Chatkit

Chatkit 是用来构建 APP 内的消息传递系统的,让用户无需离开 APP 就可以和产品背后的开发团队进行联系。无论是已有的APP 还是开发中的APP,都可以将它加进去。

reCAPTCHA v3

reCAPTCHA v3 是谷歌旗下最著名的验证码系统的最新版本,它是一个API,哪怕在没有用户交互的情况下也能帮你检测网站流量滥用的情况。reCAPTCHA 并不会显示验证信息,但是会为你提供相应的数据,你可以在此基础上挑选最合理的解决方案。

Flashcards for Developers

使用抽卡的形式,来帮你学习开发技术,这算得上是一种非常老派的学习方法了吧?Flashcards 包含了不同编程语言的拍组,包括 Python、JavaScript、C/C++和基础的计算机科学的合集。

Glorious Codes

Glorious Codes 为你提供一种更为便捷度的方式,借助动效来显示代码。它是一个 JavaScript 库,它使用 API 帮你将代码以动效形式展现。

Cosmos Pattern

Cosmos Pattern 是一组使用 SVG 来创建的图案纹理。

Toggle Buttons

这组开关按钮的功能是完全使用 CSS 写出来的,你可以看看它们的效果,看是否适宜于用到你的项目当中。

Colorblindly

Colorblindly 是一个模拟测试工具,开发者可以借助它将配色模拟成色盲用户看到的样子,从而可以有针对性地调整配色,确保界面的可用性。它的运作原理是在网页上叠加一个CSS 滤镜。

April Landing Page Template

April 是一个着陆页模板,专门为初创公司所设计。整个设计当中包含了足够的留白,免费的 HTML 代码,可以适用于不同类型的设备。

Evericons

Evericons 是一组免费的线性图标,包含多种可供选择的样式。直接使用,或者增加色彩,可以让它们在界面中看起来更舒服。

Folder Icons

Folder Icons 包含了一组25个免费的图标,每个图标都代表着不同的关于文件夹的操作。图标都是可供编辑的矢量格式,你可以在不同的项目中使用。

Error Screen Illustrations

这组插画绝对是 UI设计师的福音,它包含了一组非常有趣的插画,用于出错的界面。它们能够让用户感到愉悦,降低出错给他们带来的不良情绪。

Report: The Business Value of Design

这份来自麦肯锡的分析报告,为你指出了设计对于商业的价值。之前优设所撰写的文章《研究了300个顶级企业之后,他们发现了这4个设计关键点》当中,对于这一报告的分析和结论进行了总结式的阐述。

100 Days CSS Challenge

如果你想通过挑战来进行学习,那么这份100天 CSS挑战能够让你在学习CSS 过程中,每天都有挑战,不断地前进。完成挑战之后,你可以在社区中分享你的经验和想法。

How Facebook 3D Photos Work

许多 Facebook 用户已经可以在他们的时间流当中看到一些3D的图片了,这些图片是怎么实现的?这篇文章能够给你答案。

Graphpack

Graphpack 能够帮你创建零配置的 GraphQL 服务器,它包括 Live Reloading、GraphQL Playground、GraphQL Imports 等功能。

Anaheim Script

Anaheim Script 是一款手写风格的字体,非常有魅力。它的笔触可读性很强,并且包含大量有趣的元素,比如装饰和可选样式。这套字体包含完整的字符集和数字。

Classy Beautiful Sans

Classy Beautiful Sans 这套字体当中,所包含的字符集数量有限,仅有基本的大写字母和相关的几个字符,风格复古。用来做展示和品牌设计是不错的选择。

Kontiki

Kontiki 是一款非常酷的字体,用来模拟手工制品和木版刻字的效果是非常不错的。为了创建这套字体,设计师手工雕刻了193块木版,印制出来,其中包含560多个所用到的字符。整套字符集完整,视觉效果极佳。

Lineall Medium

Lineall Medium 是一款时髦的字体,在字体的细节处理上非常独特,可以提供有趣的显示效果。

TT Firs Neue

TT Firs Neue 是一个高度可读的无衬线字体,风格偏现代。

优设大课堂

设计不是一蹴而就:专访印度设计师 Ranganath Krishnamani

相比于语言表达能力,设计师的共情和理解能力更有价值。也正是因为独特的理解和视觉传达能力, Ranganath Krishnamani 成为了印度设计圈中最受关注的设计师之一。充满印度传统气息的内容,更为现代而细腻的视觉风格,在他的作品中融为一体,这种植根于印度本土风情的插画在 Dribbble 和 Behance 同样受到了世界各地设计师的认可。目前担任 Liquid Ink Designs 创意总监的 Ranganath ,在 Roots 的初版发布活动上,和其他与会的设计师分享了他成为设计师和插画师的经历。

缘起

「15年前,我父母最不希望我去做的事情,就是成为艺术家。当年最理想的职业选择是医生,律师和工程师。如果这些职业我都做不了,他们会怜悯地看着我:好吧,反正你也没法做别的什么,搞搞艺术也合乎情理。」

Ranganath 出生在一个 Kannada 的家族,从小就和艺术结缘。小时候,他会在家里樱桃色的壁炉上,描摹头顶神龛中的印度神灵。由于只有这么一个画板,他不得不每次画完之后擦掉,这样才能画新的。上学之后,在美术课上,他音乐感知到自己对于绘画的热爱和努力的大概方向。

不过生活要继续,想要不饿肚子还是要挣足面包。掌握设计,成为艺术家,和挣钱之间,多少都存在矛盾。尽管在经济上有压力,但是 Ranganath 依然从他的母亲身上获得了精神支持,面对着学习和生活中的种种困难,艰难地开始设计,走进艺术。「这几乎就像直接跳到水里之后,再琢磨如何学习游泳。」

随着时间的推移,Ranganath 开始学会从自己周边获取灵感,打磨想法。Ranganath 在大学时代有两个要好的同学,他们之间在设计上的「良性竞争」开始帮助 Ranganath 越来越好地设计。「我们仨从一开始就比较温和谦逊,这使得我们非常重视每一件事情,我们学会尊重各种限制,戴着镣铐去创造新东西。」

时间

「从试图触碰设计到真正感知到设计,我经历了整整15年。」

毕业之后开始工作。在那个网络还不甚发达的阶段,Ranganath 并没有从事和艺术相关的工作,这样的工作一做就是8年。这8年时间里,他接触技术,了解了现代设计,明白现代团队中产品迭代的方法,明白协作和用户/产品的反馈机制,慢慢的,他开始注意到设计过程中,怎么将风格融入到实际产品里面。

偏离方向的这些年当中,他虽然一直在工作,但是也一直在质疑自己。「能做设计的时间很有限。一旦有想法,开始试图落地,可是很快又会有别的东西影响它,不得不去改变。与此同时,艺术在我心底的影子,从未淡忘。」

几年后,Ranganath 决定摆脱现有的工作,开始按照内心所指引的方向去努力。他发现生活中的一切,都能让事情变的更加有趣。「在周末我会花些时间绘画,将之前积累的草稿变成有趣的东西。灵感和打磨让整个过程不会显得单调。」

「其实我想要的东西一直都在我手边,过去的工作让我忙着各种事情,忽略了绘画本身。」

公立学校 vs. 私立学校

「对于那些谦逊并且自学成才的人,我更加敬重。因为这种选择,意味着得比别人更加努力,因为这意味着没有其他人所拥有的支持。」

Ranganath 认为,公立学校的教育和私立学校所嗲来的教育是截然不同的。

「私立学校会更加有名,他们吸引着特定的人群,它能让你全面发展,更好地展示自己。私立学校教授的内容更加基础坚实,你将学会如何平衡自己的技能,并将自己的想法变为现实。」

在公立学校学习设计的 Ranganath 确实不是那种善于展示自己的人,但是他善于将想法变为现实,是一个真正意义上的实干者。

创作

「对我而言,创造是每天都要做的事情。这就像跑马拉松一样,你需要持续的准备,而不能突然想跑就立刻开始,而开始了之后就不能随便结束。每天持续性地创作,无论是半小时还是半天,每天都要坚持下去。」

对于 Ranganath 而言,创作就像每天必经的训练一样。坚持下去,他能越来越快地修改,调整。不断地将不同的创意点连在一起,一个项目可能就因此成型。「设计师需要走出去,在探索中获取足以支撑设计的东西。」

努力

「当你看到音乐大师表演的时候,是看不到他日常为了日臻完美的努力过程的。没人会在意努力的过程,因为所有人都在欣赏大师放松随性完美的演奏状态,可是,这是努力练习在时间积累下才能抵达的状态。」

当我们看到 Ranganath 的那些看起来近乎完美的作品的时候,想不到的是为了达到这样的状态,日复一日的练习。当我们问到他到底平时都在练习什么的时候,他拿那些著名的音乐家来举例说明。

对作品的态度

「不要为了吸引人来创作,好的作品自然而然会吸引人。」

通过 Dribbble 和 Behance ,Ranganath 持续不断地将自己的作品发到网站,和全世界的同行分享。通过这些线上的作品集,他在圈内的人气持续地增长着。「最重要的是,不断地呈现作品。」Ranganath 说道,但是随后他又补充道:「不过如果你太刻意去更新,就很难保持轻松,发作品就成了一件单调乏味的事情。不要专注于发作品,而是专注于手头最重要、最在意的事情。不要满足于社交媒体所带来的即时的享受,专注于持续的成长,才是设计师应该在意的事情。」

关于印度

「这种源于本土文化的呼唤,是带我不断更快靠近主题的动力。而这只能源自于观察。之所以如此着迷于观察,是因为我发现,即时是普通印度人折叠槟榔叶的方式都可以帮我获取灵感。」

在 Ranganath 看来,获取灵感其实是不断内化的心灵旅程。刚刚开始的时候,其实并不容易,可是当他开始动笔绘画的时候,才会感受到这种源于文化的激励和吸引,透过观察,他开始将散乱的思绪逐渐梳理清晰,整合到一起。

「我越是观察,越是发现周围的人和物都是我理当尽力捕捉的对象。每个人,每个物品上都有那种独属于印度文化的焦点。我觉得所有的这些都代表着什么,而我想通过设计,在多样的文化中找到共性。」

未来

「越多的人参与进来,你就会碰到越多的问题。每个人都会有不同的想法,大家各自有不同的背景,不同人的思维方式会在这里发生碰撞。在未来,你是有机会摆脱单调的。」

在 Ranganath 看来,印度在设计领域的潜力巨大,因为印度巨大的人口基数,同时印度也是新兴市场。通过线上协作,印度的艺术家和设计师可以千里之外的同行协作,这将带来更多的机遇。

关于好设计

「寻找联系,讲述故事。」

当问到他对于好设计的看法的时候,Ranganath 认为好设计理应简单,并且应当具备层次性和想象的空间,应当具备简约和故事性的特征,只有这样才能以燃烧的方式,让观看它的人,真正获得信息,最终被设计所感染。

开发 vs 设计

「如果你将设计视作为职业,那么你需要坚持并持续不断地设计。你需要有职业道德。其次,你需要提出问题,只有问题才能引导你思考,并且寻求答案。你的思想因此而诞生。最后,你要享受设计。当然,有时候你会觉得无聊,但是你得学会调动情绪和兴趣,享受设计带来的愉悦感。」

设计师在印度远不是一个成熟稳定的行当。相比之下,学习开发或者工程才是「正道」。但是在 Ranganath 看来,这种状况在网络普及的今天正在发生改变。即时是学习工程学的学生想要进入设计的领域也并非难事,虽然少之又少,但是设计和开发/工程的结合,往往能带来意想不到的效果。

「像我这样只会设计不会开发的人,其实在信息和产品的感知上是有缺陷的。但是一个冒险进入设计领域的开发者,则能够慢慢开始体会不同领域的差异,发现问题,同时也能更好更合理地完成项目。因为精通两个互相协同的领域,就不需要其他人来告知需要做什么,自己判断可行性就行了。」

优设大课堂

设计画面显乱,该如何解决?

在日常工作中,很多设计师都会碰到画面整体太乱的问题。乱,就会给人一种杂乱无章,甚至心烦意乱的感受,这也恰恰与设计的目的是相悖的。很多情况下设计的目的在于传达信息,那么「设计画面太乱」就会影响视觉传达的效果。能够有效的避免画面太乱的技巧有哪些呢?

一、运用对齐的原则

对齐在设计中算是很基础的知识点,画面显乱很多情况是元素的胡乱摆放,毫无规律可循,那么合理的运用对齐的手法是避免画面乱很好的解决方式,对齐的过程也就是规整画面元素的过程。比如常见的:

左侧给人的感觉是杂乱无章的、毫无规律可言,很容易让用户反感,而右侧虽然在形态上参差不齐,但是因为运用了对齐的手法,并不会在视觉上呈现出很乱的感觉,因为无论什么模块,都按照了左对齐的方式摆放,这就起到了很好的规整作用。对齐手法,无论是在文字编排、海报设计、页面设计等等方面都是基础的,也是最常用的。其实对齐也能起到很好的串联作用,因为视觉上按某种规律存在的元素会被用户下意识的认为是具有相关联的。

二、串联视觉元素

画面太乱最常见的原因之一是因为元素之间没有形成呼应,也就是每个元素都是独立的,互无关联性,在用户脑海中无法形成一条完整的视觉链条,而这样的画面相对是容易呈现出乱的感觉。那么避免画面太乱常用的技法之一:将原本各自为战的视觉元素串联起来,在视觉上呈现出关联性,形成一条不会断开的视觉链条。比如视觉形态的串联:

这里把每一个色块当做画面中的不同的视觉元素或者栏目,左侧和右侧都运用了对齐的原则,但是从视觉感受上说,相比而言左侧整体感觉还是乱,出现乱的原因在于:每个视觉元素在形态上毫无关联性,都是独立存在的,无法在用户脑海中形成很鲜明的视觉链条。而右侧相比而言减少了很多不同的视觉形态,这使得整体有了很好的统一,在排列方式上也是左右右左的形式,能在很短的时间内让用户形成一个视觉惯性,这样就很好的避免了画面乱问题的出现,但是也并不是说一定要让元素1:1重复摆放,而是说让每个元素之间相互有关联性,比如:

左侧和右侧视觉元素位置是一致的,但是左侧给人的感觉却是杂乱的,因为每个视觉元素之间毫无关联性,而右侧则是保持了同种调性,整体都采用了金属材质的感觉,把每个单独的视觉元素放在一个整体看,又能形成一个完整的视觉链条,最后通过简单改变形状,使得整体不至于因为太统一而显得单调,这就是在统一时找变化,在变化中找视觉联系。

串联视觉元素的方式也可以是色彩上的,通过颜色的呼应形成很好的串联作用,比如常见的:

这里要表达的就是尽可能把整体色彩串联起来,而不是毫无关联,颜色的多样性带来的是视觉上的不统一,这也是为什么配色时尽量做到色相不超过三个的原因,且尽量保持饱和度和明度接近,任何元素的完全独立都有可能带来视觉上的杂乱,尽量做到有种隐藏规律在约束视觉元素,且各个独立元素之间最终能形成一个视觉链。再比如,一些 WEB设计或者官网页面设计作品,对于颜色的呼应是要求很高的,呼应的目的就是为了使得元素与元素之间相互关联,形成视觉上的串联,下面举个例子:

这个页面视觉元素并不少,但是给人的感觉是很舒服且不显乱,原因之一:整体的视觉元素呼应很好,围绕植物盆栽,视觉形态上形成了很好的串联作用,每处图片的调性基本保持了一致,且页面整体既有大面积的颜色呼应又有点缀性的小面积呼应,能够很直观的将每处视觉元素串联在一起。原因之二:页面的上中下三个区域分别出现了重色,这也是色彩上呼应的一个表现,如果把最后一部分重色改为白色的话,会给人一种头重脚轻的感觉,或者把中间重色去掉,就会给人一种视觉链断层的感觉。原因之三:页面整体对齐做的很好,每处元素都不是胡乱摆放的,都有一条隐形的线在约束元素,所以整体给人的感觉很舒服且不显乱。

下面再举个例子:

这里同样也是整体图片、颜色调性保持一致,且上中下也是有很明显的重色呼应,在此中间也有一些小块色彩的呼应,整体视觉链已经有了很明显的体现。其次在重色区域用了波浪形的形状约束,其实这种波浪形状是不好把控的,稍微使用不得当就会显乱,但是通过呼应的关系,且只是出现在上中下三个区域,在进行活跃版式的同时兼顾了视觉串联,所以给人的感觉并不乱,反而版式很活跃。

说了这么多,其实就是要充分把原本独立存在的视觉元素有效的串联起来,让他们相互作用,再有效的结合对齐原则,这也是有效避免画面乱的一种常用手法,串联视觉元素的过程其实就是规整的过程。

三、重心平稳原则

在设计作品中,平稳的重心是最常见的,在之前的文章中也说过,画面中无论是颜色、色块、文字等等它们在视觉上都存在着一定的比重,如果重心不稳,就会给人一种视觉天平的倾向,给人一种「站不稳」的感觉,这并不是画面乱的绝对因素,因为也有些设计是故意改变画面重心寻求视觉上的差异化,所以在做好前两点的前提下,再去考虑重心,比如前面案例里上中下的色彩呼应,同时也起到了很好的平稳重心的作用,很多不错的海报、页面都喜欢采用平稳的构图方式,比如:

无关元素的多与少,整体重心的平稳使得画面不会因为视觉比重的缺失显得杂乱,而是给人一种稳定、协调的感觉,但是重心平稳并不是完全的视觉比重的1:1,而是整体协调即可。

四、做个案例

结合今天说的这些理论,我做了一个简单的网页,因为页面偏长,直接放最终版,然后说下具体思路:

首先整体每个模块都有严格的对齐形式,目的是让每处元素的摆放都有据可循,减少可以造成视觉杂乱的因素。其次同样采用了上中下重色呼应的形式,目的是让页面在视觉上有一定的分量,而不是整体轻飘飘的。最后尽可能的在每一屏都出现橙色,作为辅助色,同样也要做好呼应关系,形成一个完整的视觉链条,整体的调性尽可能的保持了一致,且是重心平稳的构图方式。

总结

当画面感觉乱的时候,可以通过结合今天所说的整体审查一遍,寻找问题的根源,当然这些手法只是一些常用的,并不是代表全部,要在这些基础上灵活运用,学会总结和扩展,而不是只局限于理论,很多设计理论是为大家提供一个方向,多体会、多理解、多运用,方法总比困难多。

欢迎关注作者的微信公众号:「美工美邦」

平面设计课堂」

优设大课堂

万字干货!可能是最全面的UI 设计师文件命名规范(二)

上一篇《万字干货!可能是最全面的UI 设计师文件命名规范(一)》我们讨论了 UI设计中文件命名的规范和要点,这一部分我们要讨论的是关于切图的命名、图层命名、版本管理的问题。

一、切图的部分

切图是什么,很多新人可能还是比较懵懂。简单讲解,任何 UI 类的设计图,要通过代码还原成软件界面时,没办法通过代码写出来的图形,就需要设计师导出对应的图形文件,给代码做补充。

比如你现在用手机看这篇文章所在的浏览器或 APP,上方任何图标都要通过导出的切图显示。

而一个完整的应用要导出的切图是有很多种类型的。从图形本身的含义或者是文件的格式。首先说图形的类型,包含有背景图、插画素材、动画素材、序列帧、图标、LOGO 等等。

所以了解怎么命名之前,我们先要知道切图的基本属性和规则。

1. 切图分类

图形种类不少,而且切图的数量可能比较庞大,所以大家一定要先认同一个观点,只依靠命名的方式就能解决所有检索问题的可能性几乎为零。我们还是要依靠文件夹的层级划分进行协助。

比如数量最多的图标、序列帧,势必要单独为它们创建一个文件夹,不能混合到一个目录中。如果有其它某种类型的图形数量也较多,那么都应该先为它们创建一个独立的文件夹。

例如我以前某项目中的切图文件夹划分是这样的:

而最需要我们重点讲解的就是图标部分,因为这里涉及到的下级分类最多也最复杂。比如我们看下面的这个案例:

从右上角到中间的分类底部的导航,出现了好几种不同的图标类型。这是我们在设计一套 APP 时经常会发生的情况,即一套图标规格没有办法满足我们的视觉场景需要。于是,这套项目就出现了多套图标的规格。

再看看下面支付宝服务类型界面,图标数量多,如「搜索」、「设置」这类功能图标有非常大的差别,把它们放到一个文件夹下面明显是不合适的。

所以文件的划分上,就要清晰。如果是以尺寸划分的,那么就用尺寸来命名文件夹,如果是类型的,那就按类型划分。比如下面的两种分类:

这些都比较好理解,但是,在所有细节从属上,还有一个优先级更高的问题,就是我们切图面向的手机系统。如果使用了两个平台独立的设计,或是针对平台导出矢量格式文件时,那么在最顶层就应该划分出 iOS 和 Android 两个文件夹,把文件分开导出,便于不同的前端工程师检索。

这里我们集中在只使用一套设计,并且只导出 PNG 的状态,不可能避免的要面对分辨率倍数的问题,即 @1x、@2x、@3x 的文件名后缀。我的结论就是不建议大家再为它们创建独立的文件夹。

iOS 开发中,是直接选取同一个文件的3种分辨率,拖进 Xcode 中即可,那么分文件夹就要多次跳转非常影响效率,如下图所示。而 Android 开发中,虽然程序目录会划分出 hdpi、xhdpi、xxhpi 等文件夹,但这个操作不需要设计师来做,程序员会自己复制出三种分辨率然后改名再置入开发的项目文件夹中。

根据以上的说明,完成切图的分类,那么就可以为我们后续的具体命名提供基础环境了。

2. 切图命名

前面之所以铺垫这么多现在才提分类,就是因为设计师导出的切图命名有个最重要的标准——说人话。

网上最常见完整的切图命名模式大致是这样的:模块_页面_下级页面_类型_状态,而且会给出一堆英语的常用单词供大家使用,那么最后的效果一般是这样的:

Community_PostList_ DiscussPage_ShareIcon_Defult@1x.png

相信大家已经发现问题了,这种命名实在太长了。不止是层级太多,且英文的字数难以控制。虽然很多时候有一些广泛应用的元素如导航、标题、背景之类的都有简写 (Nav、Tit、Bg),但至少会有一半的词汇你会发现它们是没有简写方式的。

而且,英语不是我们的母语,大多数人英语好点也就4、6级水平。如果一个抽象、不常见的词语,如 「拼团」、「发红包」、「种草」、「拔草」,确定你们词典查的英语词组是合理的吗,这些东西简写就更看不懂。

再者,开发命名之所以使用英语,是因为在代码里不能使用中文,如果直接用拼音的也太不敬业了。我们的标注是没有必要给自己框定这样的限制的,或者强行认为只有标注英文看起来才专业。强行英文的结果就是导致你自己以后看不懂,别人也看不懂。

有的人可能还会讲,命名就是要根据开发的习惯来。这里再解释一件事,就是除非切图命名这个规范是经团队商议,由开发整理给你的,不然不要企图认为自己的英文命名具有普适性。

多数开发人员有自己命名的习惯,你的习惯和他的不可能完全匹配上,所以正常项目中程序员会根据他们自己或开发团队的习惯命名,那就有另一套体系,我们的命名只是为了让他们能快速找到指定的文件而已。

所以,前面的文件夹分类就是帮助我们分割不同类型的图标,让我们的命名可以更简洁精准,逻辑更连贯,降低查找图标所需要的检索成本。这时在每个文件夹中,切图的命名就可以只用3级以内搞定。即:

  • 模块_名称_状态

在真实环境下,使用的名称基本就是:

  • 设置_钱包_高亮@1x.png
  • 动态_评论_默认@1x.png
  • 登录按钮_点击@2x.png

紧跟交流中使用的习惯来制定,这样的命名才是简单易懂易用。只是纯形式化又复杂的命名规范,只会倒逼程序员通过放大切图缩略图来查找指定的图形。

二、图层的部分

图层命名放到切图后面来说,就是因为我们对图层的命名首先要根据切图的需要制定,养成保证导出的时候不需要对切图文件有额外的命名修改,图层命名直接可用。

虽然大家都推崇在设计文件中命名要细致,恨不得每个图层都写上清楚的图层命名,但我要在这边给出不同的意见。

1. PS的图层命名

先讲使用 PS ,命名是非常的。原因和 PS 的操作逻辑有非常大的关系,难以用鼠标直接在画布中选中指定的内容。比如下图这种比较常见的 PS合成场景。

这种场景起码有几百个图层组合而成,而这么多图层中,还有大量的光影效果层覆盖在手表上方。如果我要用鼠标直接在画布中选定手表,那基本只会选择到手表上方的高光层,还不清楚是哪层高光。所以,选中和调整 PS 图层内容都要直接从图层列表中查找。

而这种情况不把图层命名清楚,那源文件只会是大型车祸现场。随着图层堆叠的数量增加,到后面你每做一个改动都会非常艰难。删除无效图层、修改前后关系、对某个部分的所有图层进行调色处理……

所以在 PS 中命名多细致都不过分,因为这样自己才能看的懂,别人才明白怎么修改你的源文件。

2. Sketch / Adobe XD 图层

但是,在现在新的 UI设计工具中,环境就发生了变化。需要我们进行细致命名的绝对条件已经不存在了。

UI 的设计没有那么多不可见并堆叠的图层,按住 Ctrl 或 Command键,你几乎可以选中任何看的见的图层,这时候对图层列表的依赖也就远远没有 PS 那么深。

而且,一个 UI 项目的页面和零碎的元素实在是太多了,如果真以细致到每个图层都不会出现默认新建图层字样的地步,需要耗费极其庞大的精力去维护,而这个维护的结果可以增加的团队效率并不显著。

因为无论是你自己还是别人,修改文件的时候直接用鼠标去选中对应图层就可以了,你命不命名对操作都没有太多直接的影响。当然,我们还要有一个好的习惯,就是不要依赖隐藏的图层,尽量使用一个新的画布来表现不同的状态。

基于这样的性质,在 Sketch 或 XD 的文件中,只建议大家做出适当的命名操作,而不用太纠结于形式的细节,要把每个图层都想命名的无用强迫症,应用在对整个项目文件的管理和思考上。

第一,我们要能在画板根目录上,编组所有层级最高的模块/组件,命名这部分的内容。下级中相对重要的模块文件夹,也可以适当增加命名。

第二,尽可能的将类似图标、LOGO这些必然要导出的图形,制作成 Symbol,并做好清晰的命名。

第三,Sketch 中如果将一个完整的组件做成了 Symbol,那么要对其中文字图层的命名做出清晰的排序和命名,这样才能正常更改其中的内容。

当然,图层和命名和前面关于切图的命名有一样的要求,就是——说人话。图层名可以显示的字符比文件夹列表模式可以显示得少得多,很多喜欢用英文命名的源文件,经常图层名长到只显示了一半就「…」,这样的命名更没有意义。

三、版本的管理

最后,就是关于版本管理的问题了,网上有层出不穷的关于怎么管理版本的方法,这里奉劝各位,希望借助外力和工具的版本管理方式,都是不切实际的。

无论是 SVN、GIT 的技术类管理方案,还是使用坚果云、Folio之类的第三方工具,会将本来不是太复杂的问题高度复杂化。这是因为造成我们文件版本变更迭代的事件太多了,使用这些方法不仅要大量精力维护,而且其中会有很多不可控的因素产生,造成混乱。

在我过去的项目经验里,只推荐一种关于版本管理的方式,那就还是文件夹和命名,简单的才是管理复杂最有效的方法。

即每次遇到设计文件、文档需要更新替换,或是大改动(不是只加新的内容进去),那么就在同级目录中,创建一个版本回收文件夹,复制一份当前的文件进去,再开始修改。

每个复制进回收站的文件,命名都要做下修改,方便后面可能的查找。通常命名的格式为——日期_版本简单说明_,效果如下:

这样不仅自己操作起来方便,而且其他人也可以很容易的访问查找你的指定历史版本。得益于目前 UI 文件体积的精简,一个 Sketch 文件通常几十 MB 就能搞定,所以记录很多版本也无所谓。当然,如果项目出现比较大型的 PSD 或者视频文件,那么对于版本的管理就尽可能的精简而不是多多益善,否则会在共享和传输上造成极大的压力。

而除了具体到某个文件的版本管理以外,还要考虑一个更高层级的管理,即项目版本。相信很多人有这样的经历,在开始后面的版本时都创建新的文件夹和设计文件,于是在几个版本过后要反复在几个项目之间切换查找页面。

所以,我的方式是设计第一个版本是 v1.0,那么在开始 v2.0 版本时,直接复制一份原版本的文件夹出来。这样,不仅保留完整的 v1.0 所有项目文件,文件夹层级可以保留下来。

复制完成后,只要再将除了界面设计源文件以外的其它文档、切图等文件全部删除即可。保留设计文件,目的就是要保持最新版本设计文件的集中和唯一性。所有和项目相关的设计文件都集中在一个目录下,才有利于我们的更新和协作。

要说一个题外话,在我过去的项目中,非常在意设计文件唯一性的标准。当一个产品团队有几个设计师,程序员直接查看源文件的标注,如果源文件不具备唯一性,项目调整中每个人电脑上都存了几个版本,且各自添加了新的内容进去,不能直接覆盖合并,最后只能演变成一场开发灾难。

结尾

以上就是我对于项目文件管理和命名完整的经验和思考,经过了好几年的试验和改进,我相信它可以应付绝大多数的情况与协同需要。

还要牢记,这些看似麻烦的过程,不只是做了给我们自己使用,还要方便所有项目的成员,这种能力一样是一个 UI设计师应该保有的专业素养之一。

最后极度推荐大家使用同步云盘进行工作协同,首要推荐的是使用自建的云盘群辉 Nas,然后是国内现在势头正盛的坚果云。如果是比较国际化的团队,那么无论是 Dropbox 或者 GoogleDrive 都可以,传统的 QQ传输或是移动硬盘拷贝,都已经不适应今天的生产力需求。

如果光靠上面文字描述,对整体的管理和命名还是无法起到清晰记忆作用的话,我另外准备了一张完整的思维导图。

高清大图请前往百度云下载,链接:https://pan.baidu.com/s/1GsDeB9aM6vXc0J4l3ZgukQ,密码:xtnc

欢迎关注作者的微信公众号:「超人的电话亭」

图片素材作者:Evgeniy Dolgov

「超全面!设计新手必备的切图指南」

优设大课堂

紧跟这6个 UI 背景设计趋势,能让你的界面更出彩

无论是设计网页还是海报,背景图片都是最常用、也最能体现当下设计趋势的一种设计元素。在设计APP 的时候同样是如此。过去的10年当中,用的品味发生了不小的变化,而现在,整个设计趋势上,似乎正处在一个关键的转折点上。

在我们所能观察到的诸多设计当中,浅色的背景是当之无愧的主流。浅色背景本身就不太可能喧宾夺主,让视觉主体更加突出。而如今,我们逐渐发现,背景还具备补充主体的功能,并且这种补充是潜移默化的。背景的功能性其实还可以强化,这种思路可以在如今的APP 界面设计当中应用,让整体设计更加平衡。

如今的UI设计师大都明白在背景中融入元素来吸引用户的眼球,提升产品调性,提高内容的可读性。而这也促使图片、插画、色块等元素在背景当中发挥了更大的作用。

1、为创造戏剧感,使用色彩分割背景

分屏式设计并不新鲜,它是一个存在了很长时间的设计趋势了。在桌面端的屏幕上,分屏式设计一直都很有效,宽广的屏幕让设计师有足够的施展空间,但是在移动端上则是个挑战。

好在 UI 设计师们找到了解决方案,对比色是增加视觉吸引力的最佳方式。

在 Tubik Studio 的这个设计案例当中,设计师使用不均等分布的色块来分割屏幕,同时使用白色背景区块来承载主体内容,避免被背景色彩干扰。设计师充分利用了对比色的对抗性,以及和白色之间的对比度,功能完善,但是有趣又漂亮。

2、为营造氛围,在背景上叠加辅助性图形元素

虽然在背景图片中叠加各种图形化的元素听起来很奇怪,但是确实是逐渐流行起来的一种背景设计玩法。不过,这存在一种风险,就是如果叠加太多的图形化元素,会让整体看起来过于杂乱。尽量在丰富视觉和制造视觉污染之间找到平衡,最终的设计效果,能够给你带来意料之外的优质效果。

虽然手机越来越大,但是屏幕空间依然很宝贵。通过叠加一些特定的图形元素来创造视觉深度,给用户以空间感。

这种背景设计的另外一个好处在于,你可以让整个UI显得更加富有视觉吸引力。在设计的时候,需要注意的是,要保持元素之间的一致性,确保不同的元素在屏幕上呈现的时候,仍然保持协调。

3、为保持整体感,使用整图作为背景

使用整张图片作为背景,一直被UI/UX领域的设计师所争论。对,你没看错,这个事情一直存在争议。有人非常喜欢使用图片背景,有人则完全无法接受这种呈现方式。

但是撇开个人喜好,趋势上,这种背景运用方式还是越来越流行了。在APP的UI界面中,如果你能灵活自由地使用全屏背景的化,对于接下来的设计肯定是有所助益的。

图片所呈现的信息量当然是毋庸置疑的,更重要的是如何贴合品牌和氛围,呈现出应有的气场。

当然,最核心的技巧,是在于透明度的控制,和内容框的设计。为了避免信息和背景之间的对比度不足,合理的方法是使用内容框将前景的元素承载起来。而为了避免背景图片喧宾夺主,还可以借助透明度的控制,来确保背景图片更加平滑自然,不会影响到阅读和使用。

4、需要强化感受和情绪,使用渐变色背景

渐变色在几年前回归之后,在设计当中的运用范围越来越广。渐变色不仅赋予设计更加强烈的个性,而且能够和用户之间产生足够的情感共鸣。

你可以使用渐变色来营造调性,创造对比,甚至还可以借助渐变色才来作为视觉线索和引导。比如当你在背景中使用蓝色的时候,可以通过深浅渐变来创造方向性,引导用户向特定的地方浏览。

但是,渐变色背景流行起来最重要的原因还是它的情感共鸣的能力。许多 UI 设计师已经意识到心理因素在移动端设备中的巨大影响,能否唤醒用户的情感是关键。

渐变色背景的设计玩法有很多,变化幅度的大小,方向,对比度和亮度的变化差异,都会带来不同的影响。当然,渐变背景同样必须遵循一个原则,那就不能喧宾夺主。在设计的时候,同样可以借助透明度的调整,来降低它和CTA按钮之间的对比度。

5、为了强化故事性,使用插画背景

插画师可以根据需求更加自由地绘制足以满足不同需求的插画,独特,个性,定制化。不过,想要创建足以代表企业、团队、产品或者用户角色的插画,并不能凭空创建,而是需要一个研究过程,通过调研和分析,才能提出需求,再做执行。它是一个机器人,还是一个更加拟真的角色?又或者使用动物拟人化的形象更合适?

许多设计师更加倾向于在APP中使用自定义插画,因为这样更加自由轻松地达成各种目标,从新用户引导,到提供教程。

6、基础但通用,使用几何图形来构建背景

几何图形本身是非常基础的元素,它们的含义和感觉非常基础,也具有普世性。虽然它们很简单,但是在UI 设计中非常强大。单一的几何形状是简单的,但是结合不同的效果、不同的组合,即使使用简单的几何形状,也能够发挥出多样的变化。

当然,具体怎么运用几何图形,还要看你的UI界面上,有哪些东西,作为背景的几何图形和 UI 中的主体元素之间,空间关系要怎么控制,怎样保持优雅简洁,确保品牌信息的传达。

结语

就像 UI 界面中其他的元素一样,背景同样值得关注和规划。最重要的是,你想表达什么,传达什么样的信息,想借助整个UI 界面来实现什么样的功能,规划好了才能更好地呈现内容。

背景的选取之所以会成为UI设计趋势的关注点,很大程度是因为UI 和UX 设计的关注点开始越来也深入到设计的方方面面,大家考虑问题也需要越来越细致。

优设大课堂

想创造一套自己的视觉语言,要从哪几个方面入手?

我们使用语言与人进行沟通,传达信息,记录内容,而视觉语言也发挥着类似的作用。从色彩到排版样式,从插画到品牌构建,视觉语言同样承担着类似的功能,它和传统的语言有着类似的特征包括结构化和沟通功能。

所以,视觉语言也是规范化的,标准化的,它足够自由,也保有约束。视觉语言本身也可以具备足够明显清晰的特色,就像每个人的表达方式和口音一样,这使得视觉语言本身可以强化和凸显品牌特色。那么想要创建一套属于自己的视觉语言,可以从下面的9个方面入手。

1. 构建品牌独有的配色方案

我们总是说,色彩和形体是用户第一眼最快注意到的东西。配色方案的视觉表现力最强,这使得配色方案成为视觉语言中辨识度最高的组成部分。配色方案本身需要具备一定的独特性,确保它整体上能够让人记住,区别于其他,品牌不至于在繁杂的互联网世界中迷失,也不会让用户无法记住。

另一方面,配色方案应该具备良好的兼容性,能够调和品牌不同模块,比如网站、APP、社交媒体、包装、名片等。

配色也应该体现品牌的价值。想想麦当劳的配色吧,黄色和红色为主。这两种色彩本身能够触发幸福(黄色)和饥饿(红色)的感觉,两者搭配加上经典的金拱门的LOGO,麦当劳的视觉识别度可以说是相当高的。此外,麦当劳旗下的许多其他的设计,也是在这个配色的基础上构建的。

2. 构建排版的层次结构

排版层次结构的构建,和选择字体同样重要。不同的排版层次,能够给人截然不同的感受,清晰还是粗糙,雅致还是有趣。在排版的层次结构上,并不存在对错,更多需要考虑的是合适不合适,风格和感受上的一致性。

当然,不同层级的信息,在排版层级上还是要有比较清晰的体现的,大小疏密对比度不足,会难以让用户感知到内容之间的重要性的差异。

以 Airbnb 为例,网站的排版有着清晰的层次结构,字体的大小、字重、间距和配色都已经标准化了。相应的,给人的体验也始终保持着应有的一贯性。

3. 建立栅格来规范内容之间的空间关系

视觉元素之间的位置关系,和它们本身的设计是同等重要的。如果你希望整个设计在细节上是清晰明确的,那么栅格会给你想要的。

FreeCodeCamp 对此有很明确的描述:

栅格赋予了UI界面元素以模块化的清晰结构,这使得整个设计团队能在此基础上更好地合作。这使得产品能够快速清晰地输出到不同的平台上。如果你是基于某个想法来构建概念设计,那么这种方法更加实用有效。

简而言之,栅格让视觉呈现的复杂度降低了。

4. 创建组件库

从按钮、图标再到卡片,你应当创建出一整套可用的、风格一致的UI组件库。

同样功能的控件,在页面不同的地方、或者不同的页面上有着截然不同的风格,是让人迷惑而糟心的。一个好的组件库,应当包含全部常用的UI组件,以及针对 iOS 和 Android 平台所适配之后的UI组件。虽然构建组件库本身的工作量并不小,但是在完成之后,能让后续的工作事半功倍。

5. 强调图片的风格和特征

在诸多图形化的元素当中,图片和插画是视觉性最突出的元素,这也是整个视觉语言当中最重要的因素之一,因为它从某种意义上是和品牌关系最紧密的素材。

构成视觉语言涉及到图片素材的方方面面,构图,色彩,滤镜,甚至相关动效的细节。

下面是 Smashmallow 中的网页设计,即使它们并不是同期设计也不是服务于相同的功能,但是很明显插画所采用的视觉风格是一致的,并且每幅插画当中都使用了共同的元素:热气球。这一元素和品牌本身是有着紧密关联的,而用户也可以从这些插画图片的内容,迅速意识到品牌本身的一些概念。

6. 为动效设定规则

动画效果同样是要遵循一些规则的。是快速移动还是慢速移动,是悬停触发还是自动运行?这些动效的运动规则其实是有着明显的视觉识别度的,就像日漫和美漫在视觉和运动规则上存在差别一样。

就像下面这个来自Dribbble 的动效,它大体上做着匀速的圆周运动,速度适中,其中有些元素并没有完全按照圆周运动。那么想想看,是否所有的做圆周运动的物体都和它一样呢?它们是否会带来不一样的视觉观感呢?

7. 让视觉和文本内容匹配起来

视觉语言并不是只涉及到视觉元素,文本并不是与之割裂的,在设计的时候,两者需要合理地配合,在体验上达成一致,传达一致的信息。

在下面的 Steffany 这个网站当中,整体设计呈现出非常明显的女性化的特征,文本内容在表达方式和调性上和整体的视觉语言保持着一致,并没有出现两者冲突或者竞争的状况。

8. 可信且可靠

视觉语言只有在用户接纳的情况下,才会最大程度地发挥作用,它要给人可靠的感觉。所以,整个视觉语言需要和你的品牌定位、气质表里合一,而不能让设计和产品、企业的气质割裂开来。

你能想象没有主角的芝麻街会是怎样的一种气场么?

整个品牌和视觉形象都是围绕着 Big Bird 和 Elmo 等角色建立起来的,每一个细节的设计都是围绕着这些角色来创建的。注意网站中角色和其他视觉元素之间的映射关系,它们让用户清晰地感知到角色和整体设计之间的关系是表里如一的,这使得整个网站的设计更容易为用户所接受,视觉语言在此发挥了作用。

9. 落实到具体标准文档当中

整个视觉语言在构建起来之后,需要保持各方面的一致性,在具体设计的时候,则得有一份详实具体的设计文档供整个设计团队和利益相关人员,作为参考。所以,完成整个设计之后,将整个视觉语言相关的内容和素材制作成设计风格指南,和整个品牌的设计规范统一到一起。

优设大课堂