澳纽网

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



不止好看的皮囊!那些被娱乐圈耽误的设计师男神

娱乐圈是最不缺少男神的地方,但好看的皮囊千篇一律,有趣的灵魂却是万里挑一。有才华和有趣灵魂的男生总是比帅气的外表更加让人动心。娱乐圈其实有这样一些特殊的男神,他们除了是大家所熟知的演员、歌手,也是被演艺事业耽误的设计师。看了男神们的作品与艺术才华,你会发现原来好看是他们最不值一提的优点。

肖战:如果没做演员,我现在应该还在电脑前辛苦的做设计

如果要问今年夏天迷倒最多少女心的男艺人是谁? 除了你们的「现男友」,就属肖战和王一博了。从小学习美术大学学习设计专业的肖战,大二开始就与朋友成立了设计工作室做Logo、VI设计,后来还开过摄影工作室当摄影师。

从学校毕业后与大多数同学一样,肖战成为了一名上班族,在老师的设计公司做平面设计师。如果不是机缘巧合进入演艺圈,他可能还和此刻很多屏幕前的你一样在设计师的人生轨迹里前行着。上班做图,下班改图,和甲方爸爸斗智斗勇。

不说你肯定不知道,小战现在的微博头像就是16年春节自己在家设计的。

小哥哥还曾今在「微博」与大家分享过大学期间为孩子们做的公益海报。

传说中肖战参与过的重庆象里咖啡馆VI设计也被大家扒了出来。Logo中大象的耳朵与少女的裙摆头同构,是可爱的巧思了!

在一次专访中,记者问肖战:「有人说做设计的人脾气不能太好,不然应付起客户会很麻烦是这样吗?」肖战马上激动地答道:「一看就是没做过设计,就得脾气特别好,甲方叫你怎么改就怎么改。」小战同学对于「设计师的自我修养」可谓修炼地相当到位呀。

进入娱乐圈后,被粉丝称为「商业鬼才」的经纪公司甚至在肖战出道后的一段时间里,让他一边当爱豆,一边兼职公司的插画师。他主演的第一部作品《超星星学园》的宣发PPT就是自己画的,连自己演唱会的背景动画都亲自上手做。

直到现在成为人气与实力俱佳的演员,即使行程满满抽不开身,肖战还会坚持画画和做些小设计。「从小学这个,有些东西不是说停就能停下来的。」他表示设计对演戏其实也有帮助,「色彩也好,灵感也好,设计师总是非常感性的,能帮助我理解角色。」

接受《时尚芭莎》采访时帮工作人员调试摄影设备,出镜《时尚COSMO》电子刊时,小战还亲自参与了封面设计与排版。你的日系小清新肖设计师已上线:)

热爱可抵岁月漫长,男神受到少女们追捧的「少年感」,除了帅气的容颜,更是勇敢追梦永远坚持不妥协的热血精神。

彭磊:画痰盂画手绢儿,我们学校教我们干这个

今年暑假,除了《陈情令》大火,还有《乐队的夏天》让我们认识了许多优秀的音乐人。其中Hot 5 之首的「新裤子乐队」无疑是最火最具话题性的那一个。除了收获大批女粉丝的「共享鼓手」 Hayato以及斩获一众男粉的贝斯手梦姐,主唱彭磊则是因为奇特的「彭言彭语」和特立独行的行事风格,无比吸睛。

赚钱难,乐队乐手大都浑身斜杠,然后从斜杠青年一路斜杠到中年。彭磊是其中的佼佼者。

彭磊在学校从来都不是受欢迎的类型,没有出众的外表和招人喜欢的性格,漫长的青少年时期音乐就是解救自己的诸多方式之一。彭磊的父亲本就是儿童漫画家,从小就受到薰陶的彭磊选择考北京工艺美术学校并不让人意外。但关于工艺美校的描述从他嘴里说出来,就显得非常「彭言彭语」了:

画尿盆儿、痰盂儿或者画手绢儿。 我们工艺美校专门培养我们干这些。

中专毕业,彭磊考去了北影美术系的动画专业。从工艺美校到北影,他渐渐成为很多人眼里的「另类男神」。

他是风格独到的漫画家,天马行空的插画师。他笔下最出名的IP《咪咪和嘎嘎》灵感来自于米老鼠和唐老鸭,这两个角色流窜于他的MV、图书、电影和海报当中。更加中国化的咪咪和嘎嘎,牙尖齿利,怪诞可爱。这两个角色的漫画当中,藏着太多关于90年代的记忆,和彭磊的奇诡想象。

彭磊签名版画《高兴的咪咪》&《高兴的嘎嘎》

“他们代表了我阴暗的心理,世俗的一面,普通的和不堪的经历,也像我周围的朋友,一直陪伴着我。”

自诩「反大众人格」的彭磊是重度「皮搂爱好者」,经典的铁皮玩具在他眼里价值非凡,而对于各种玩具的热爱,也曾促使他在鼓楼开了间模型玩具店。

彭磊,7号飞船,布面油画,120x80cm,2008

这种复古摩登的情节一直延续到他的音乐、MV乃至于电影当中。他就要和大众拧着来。

他是国内首个动画MV 的拍摄者,他给新裤子首张专辑中《爱情催泪弹》制作MV的时候,用到了自己的专业技能。

在第二张专辑 《Disco Girl》的主打歌《我爱你》中,他还首次尝试了黏土动画(又一个中国首次),并斩获了「神州最佳音乐录影带」等若干大奖。

身为导演,彭磊也是从地下一路拍到地上。他执导的第一部电影《北海怪兽》是一个科幻片,讲述的是一个中国科学家利用古代怪兽对抗外星人的故事。广电总局审了6遍没有通过。不过最后他还是出了一本同名画册《北海怪兽》。

写书的时候,他自嘲自己已经成为一个导演,然而后来自嘲成为现实。《北海怪兽》《熊猫奶糖》《野人也有爱》成了他的个人三部曲,而讲述乐队青年状况的电影《乐队》则给他带来了一尊上海电影节亚洲新人导演奖。

当然,他身上标签不止于此。他是先锋又复古的平面设计师,乐队海报自己设计:

彭累的奇特和真实使人着迷。他给自己的闺女起名「末日小朋友」,在出生的时候把自己皮衣慎而重之的盖在闺女身上。40岁重做乐队练习生,他一直在尝试新的东西,一直在最先锋、最真实、最自我的地方尝试,并不拘泥于音乐领域本身。

2019年3月23日,新裤子首次在北京工人体育馆开唱,彭磊在演唱会上有一段独白:

何以解忧,音乐、电影、戏剧、绘画都只为我们编织了一个梦。我们一直努力为自己解忧,更多的还是失望。我觉得潮流就是你不跟随它,它就过去了,但你要跟着它,你就是傻逼。

好多次觉得这个时代结束了,可是我还活着,还在工作,如果还有人喜欢我们的作品,那我们就一直活。

庞宽:学平面设计就是糊纸壳的

和彭磊一样,新裤子乐队的键盘手庞宽也毕业于北京工艺美术学校。不同于环艺专业的彭磊,庞宽学习的是平面设计专业,但当时两人在学校的处境相似,一样的不受待见。

因为我们学校教的是实用美术,跟纯艺术不一样。服装设计系出来的就是裁缝;工业设计就是木匠,因为他们要做木头模型;彭磊他们是环境艺术专业,要和泥做城市雕塑,所以就是泥瓦匠。我学平面设计,但是当时不叫平面设计,叫装潢,我们就是糊纸壳的。

但与「一脸不合时宜」的彭磊不同,身为键盘手的庞宽长着一张更加贴近男神的脸,四分像沈腾,六分王思聪。

我在乐队里不止是键盘手,主要还参与演唱,伴舞,煽乎情绪。

在「新裤子」还是「金属车间的形体师傅」乐队的时候,摩登天空的老板沈黎晖把其他的仨人当乐队签了,然后把庞宽当作设计师签约。玩音乐玩回自己老本行,人生际遇真的奇妙。

在做唱片设计之前,庞宽没少给企业做VI和CI之类的东西。加入摩登天空之后,庞宽给「摩登天空1」这张拼盘专辑设计了封面,就使用 PS 中的 KPT功能实现了假3D效果。而专辑封面中摩登天空的字体效果和样式,也成了后续摩登天空官方的标准字。

2001年的时候,在摩登天空做设计的庞宽与同公司的其他同事一样,在腿上搁着类似《+81》这样的国外的设计杂志作为排版参考。《摩登天空》杂志上,他们用「Copy1」「Copy2」 这样的代号署名,没敢写自己的名字。

当然,给自己的新裤子乐队做设计,庞宽一点都不含糊。有彭磊提供素材,很多活儿熬一宿就出来了。

做设计越到后面门槛越低,就和做音乐是一样的。

彭磊的黏土动画元素和庞宽自己设计的摩登复古字体,在21世纪初那个阶段,也是非常先锋的设计。

奇特的太空元素和 Low Fi 的定格动画合为一体,低配星战与浓郁的手作感,就是庞宽设计的一大特色。此刻还只是2003年。

那个时候开设计工作室,给人设计海报或者专辑封面,其实都没有什么创作空间,都是弄一大头(像)……做设计真的是一个特别考验情商的工作,需求总是一个特别空泛的要求,比如「国际化」,但是当你看他拍的照片给的图像,就能够大概判断出他是什么样的一种气质,是小清新,还是大浑浊。从艺人,到助理,老板,都要沟通。基本上沟通搞定了,熬一宿怎么都能做出来。

坏蛋调频:和新裤子聊聊唱片设计

当时的唱片设计,从封面到海报加内页,通常是8000一套。千奇百怪的需求什么都有,从磨皮到丰胸不一而足,多艺人和公司要求一定要把脸给修大一点,在货架上老远可以看到。

喜欢 Vintage 的庞宽在奇装异服上的口味更甚于彭磊。38块钱的水晶凉鞋,新疆烤羊肉串的白大褂,他都能在舞台上穿出独树一帜的风范。这种独特的偏好也引领着庞宽的个人风格发生转变。庞宽自己风格的确定,是从《龙虎人丹》开始,到了这个阶段,彻底告别做设计在腿上搁一本设计书的做法了。

摩登复古新裤子,庞宽功不可没。

在出自己不出专辑的日子里,庞宽没少为别的乐队设计专辑封面。

拼贴,复古,暖壶,奇妙和错位的设计的元素,庞宽的小学毕业照里没有自己,自己的照片是自己从别的照片里面剪贴进来的。而这一点最终促成了刺猬这张专辑封面的设计思路,疯狂拼贴,最终所流露出的独特气质,令人无法忘怀。

在我看来做设计最难的是做字体,中文字体,尤其是汉字。英文里面各种字体都有,但是我们的各种字库里的字体都不好看,我们有时候会把英文字拆开拼成汉字,或者下日文字体。日文汉字在转折的转折笔画会,更加柔润了,有汉字的美感。

为木马乐队的《果冻帝国》这张专辑的冷战气质,是借助大量的80年代东欧谍战电影里的元素来营造的。

工艺美校毕业的庞宽一样画得一手好画,但是他从来没有严肃正经地好好画。现实的冲突和打破边界的奇妙想象,野人故事里有爱,黏土人身上有故事,机器人的脑子里则藏着远方。

机器人的名字叫“两室一厅”,是根据“三宅一生”来的。现在年轻人在大城市里生活,比起高晓松说的“诗和远方”,他们最想要的是更现实层面的东西,比如说不动产,安居以后才能去想诗和远方。

陈坤:我曾梦想着长大后要当一名室内设计师

最近「冻龄男神」陈坤又上热搜了,因为参加伦敦时装周的一身风衣造型机场照,满满的少年感如同校园里的忧郁学长,完全难以让人将他与43岁的年纪和拥有十几岁儿子的爸爸身份联系起来。「帅」一直以来都是陈坤行走娱乐圈的标签,但男神除了长相迷人、演技过硬,其实还有不为人知的设计才华。成为一名室内设计师是从小热爱画画的男神的梦想,而朝九晚五有稳定的工作是他憧憬的生活。如果细数娱乐圈被演员身份耽误的设计师,陈坤一定榜上有名。

为了实现自己的梦想,陈坤在2014年成立了属于自己的设计公司——东申空间。他组建了一个由众多归国才子组成的专业设计团队,承接不同的空间设计项目,比如三里屯的棒棒糖餐厅还有一些展览场地。

陈设计师人生第一个作品,是设计自己的工作室。他曾自嘲「这个项目中,我是甲方也是乙方。以边给他们提要求压预算,一边给他们出主意想办法。」

工作室由一个破败不堪、杂草丛生的厂房改造而成。改造后的空间既有东方的中式设计韵味,又有西方现代极简雅致的调性。

大量的原木和玻璃材质与原有的水泥元素相结合,打破了之前的封闭空间和视觉单一性。大面积的落地玻璃窗让整个空间透光十足,露出窗外的翠绿竹林和草坪给空间增添了生机并带来诗情画意的美感,自然与建筑结合得相得益彰。陈坤说他最喜欢的就是走廊交接处的开放式茶室。当庭院里的阳光洒到身上,水泥与木材结合的建筑让人觉得温暖和踏实。

我不喜欢别人用经验跟我对话,我们这个小小的团队,最大的优势就是不着急。我们就是要在一起犯错、探讨和进步。

吴彦祖:我喜欢自由设计,喜欢无拘束带来的成就感

除了宝藏男孩肖战,被娱乐圈「耽误」的设计师还有不老男神吴彦祖。毕业于美国俄勒冈大学建筑系的吴彦祖,是个不折不扣的学霸。读书的时候就获得过建筑副修奖学金,早在1994年就赢得了 California Martial Art Competitions 的亚军。

去年男神参加浙江卫视的综艺节目《漂亮的房子》所完成的老宅改造项目,甚至获得了2018年的「英国皇家建筑师学会奖」(RIBA International Prize 2018)。这个据说全球仅61个作品被提名的奖项,堪比「建筑界的奥斯卡」。如果没有进入演艺圈,花费全部时间和精力去做设计师的吴彦祖,应该也会成为一位优秀的建筑设计师吧。

男神获奖的项目,是位于河北与内蒙古草原接壤的「木兰围场」的草原星空图书馆项目「木兰坊」。他带领团队以80万元人民币(约97万港元)的预算为当地居民建了一座可居住的图书馆。

两个圆形蒙古包联合在一起的形态,既结合了中国传统文化中「双环圆」象征如意的美好寓意,又保留了蒙古包传统的结构体现文化传承。从平面,立面到纹饰,无一不向传统致敬。木质镂空结构,以及大面积的落地窗设计,让房子与大自然巧妙融合,草原美景和星空一览无遗。

将图书带给生活在大草原上与外面的世界鲜少接触的留守儿童,希望孩子们在仰望星空享受自然美好的同时,也能从阅读中获益,触摸到更广阔广世界的脉络。

在香港,吴彦祖有自己的木作工坊,对于设计的初心始终在他心里。即使成为了出色的演员,他也从未放弃过做设计。当找不到自己想要的家具时,吴彦祖会在自己的小工坊亲自做一套,连老婆的鞋柜都是他的独家定制。

虽然吴彦祖曾表示「我喜欢自由设计,喜欢无拘束带来的成就感。在我建筑快读完的时候,我就已经知道我不想做建筑师了。因为我们在学校里可以实现自己100%的创意,但在公司里可能连2%都没有。」但对于设计的爱是流淌在骨子里的,设计于他而言不仅是兴趣,更是一种生活与人生态度。

参考资料:

Source: 优设网 – UISDC | 18 Sep 2019 | 6:43 am(NZT)

为什么客户总是不信任我的设计?

@研习设K先生 :当我们在推销某样产品或者是服务的时候,首先要做的,就是获取客户的信任,让客户相信他所购买的产品或服务是物有所值的。那么我们应该怎么说服客户呢?除了可以从产品的品质、品牌的口碑、销售人员的口才等等方面下手,我们还可以从设计的角度去提升客户对产品的信赖感。今天我就带着大家一起来学习一下,如何做出具有信赖感的设计!

在课程开始之前,我们首先来想一下什么是信赖感?emmmm~是不是觉得这个问题有一点抽象,一时间难以得出答案呢?那么我们不妨换一个思路?

我们可以先想一下我们遇到什么事物,会产生信赖感?我们身边的人和事,有哪一些是值得我们信赖的?

在我们不懂事的时候,父母便是我们的小小世界里最厉害的人,也是我们最信赖的人,无论遇到什么问题或是需要,都会找父母解决。

后来我们长大一些,开始上学了,老师便成为了另一个值得我们信赖的人,懵懂的我们可以从老师那学到许多不曾了解的知识。

伴侣也是我们值得信赖的一位,伴侣之间有感情的基础,也有法律的见证,很可能会是我们相伴走完下半辈子的那一位。

一般我们发工资了,钱都是放在银行卡里,这是因为我们对银行足够的信赖,放银行总比放在身上安全。

在我们购物的时候也会习惯性的瞄准大品牌,因为这些大品牌我们会认为他的质量比较有保障,售后服务也会更加完善一些。

刚刚我们提到了五个值得我们信赖的人或者是事物,接下来我们尝试一下找出他们的共同特征,看看能不能从中总结出信赖感的特征或是规律。

首先我们来分析一下父母和伴侣。父母是陪伴着我们长大的人,小时候我们事无大小都会想与父母分享,而长大之后,伴侣便是陪伴着我们慢慢老去的人,相濡以沫。所以父母和伴侣都是我们最亲近的人。那么我们便可以总结出,父母与伴侣的一个共同特征就是和我们都具有亲近的关系。

接下来我们来分析一下父母、伴侣、老师和银行。刚刚我们提到了,父母和伴侣分别是陪伴我们成长和陪伴我们老去的人;那么老师,有一句古语是一日为师,终生为父,一天是我们的老师,那么一辈子都会当作老师来对待;最后一个银行,因为银行是国有企业,所以基本上不可能会垮台,钱放银行放多久也不必担心。好了,那么我们就可以总结出来这四个人或事的共同特征就是长久稳定的关系。

最后我们尝试来总结这四个,在我们小的时候,父母、老师都拥有比我们多得多的人生阅历和知识储备;银行作为国家的支柱企业,有国家作为后盾,具有几乎无法撼动的经济实力;大品牌相较于小企业,拥有更大的规模,更好的生产技术和服务;所以通过分析,我们可以得出他们的共同特征是具备强大的实力。

我们再进一步分析,强大实力的背后是什么呢?父母,老师拥有比我们更多的知识,我们便可以获得更多的成长;银行拥有强大的实力,我们存钱或者投资就会更加有保障和低风险;大品牌拥有强大的实力就可以确保我们所买的产品具有高品质和享受到优质的服务。所以发现了没,我们信赖他们并不是因为他们拥有强大的实力,而是通过他们,我们可以获得稳定的收益,和降低我们受到的风险。

通过上面的总结分析,我们可以得出信赖感具备三个特征,分别是亲密的关系、稳定持久的关系以及强大的实力,而强大的实力背后是稳定收益和低风险。那么我们就可以总结出信赖感其实就是一种稳定感,有可能像伴侣或是父母一样很容易靠近,也可能像银行一样冰冷不具备感情,但是他们都能让我们获得稳定的成长或是收益。我们在设计中想要传达出信赖感,就需要将画面塑造得更稳定一些,接下来我们来看一看,怎么样做出一个有信赖感的画面吧。

平面构成的三种基本元素

点、线、面作为平面构成的三种基本元素,我们首先来看看点线面如何传达信赖感。

1. 点

由于点元素的面积很小,放在画面中会显得比较零碎,而且点元素的使用会使画面带有活泼热闹的气质,并不适合放在稳定的画面中,所以我们应该尽量避免画面中有点元素的出现。

如果必须要使用点元素的话,选择整齐排列的点元素会比凌乱的点更利于体现信赖感。

我们用一个小案例来对比一下。首先这是一个做好的网页界面。

我们在画面的背景上添加一些整齐的点元素,我们可以看出虽然加入了点元素,但是由于这些点整齐的排列,具有一定的秩序感,并不会对画面的稳定性带来太多影响。

接下来我们将背景上的点打乱,就可以明显感觉到画面变得活泼热闹了,可是稳定性却被打破了。

2. 线

不同的线具有不同的气质和属性,从线的形态上来分,线可以分为直线、曲线和曲折线,直线给人静止稳定的感觉;而曲线则具备运动感;曲折线会让人感觉不安定。所以从线的形态上来看,直线最能够表达信赖感。

然后我们从线的倾斜角度来分析一下,垂直的线条会有严肃、庄重的感觉;水平线则会让人感到静止、安定、平和;而倾斜的直线则带有飞跃、冲刺的动感,所以从线的倾斜角度看来,垂直的线条和水平线都适合表达信赖感,垂直线会更冰冷严肃一些,符合银行等权威机构的气质,而水平线则会更有亲和力一些。

最后我们看看线的粗细,粗线条具有稳定、力量、温和的属性;而细线条则是灵活、冷酷的,并且还会有一点神经质的感觉,并不利于稳定画面的塑造。

我们可以看看这些产品包装,粗直线的使用会使产品更具信赖感,让客户更愿意购买。

而在海报中,直线的应用除了分隔画面之外,还可以使得画面更加稳定可靠。

3. 面

从面的形状上我们可以将面分为直线形面、曲线形面、自由曲线形面和偶然形面。

直线形面,能够强调垂直线和水平线的效果,呈现安定的秩序感,心理上具有简洁、安定、井然有序的感觉。

曲线形面,比直线形柔软一些,由于具有几何特征,所以具有数理性的秩序感。但是会有一些呆板和缺少变化的缺陷。

自由曲线形面,能够体现个性或女性的特性,适合展示优雅、魅力、柔软和带有人情味的温暖感觉,但是却有散漫无秩序的短板。

最后一种偶然形面是由水墨,笔迹等偶然形成的面的图形,每一个偶然形都是不一样,难以复制的,具有朴素自然、随机的特性。

所以在表达信赖感这一层面上,直线形和曲线形都是比较合适的面,虽然具有呆板缺乏变化等缺点,可是却在塑造稳定感上特别适用。

看看这些要表达信赖感的画面中,使用的图形也多为直线形和曲线形的面。

另外,通过使用色块区分画面,能使内容的传达更加清晰,让客户觉得真实可靠,从而在一定程度上增加客户的信赖感。

点、线、面是平面构成中最基础的三个元素,可是却很容易被忽略,希望大家在做设计的时候要多留意一下这些小细节。但是设计可不只有点、线、面,我们知道,不同的字体拥有的气质也不一样,宋体有文化气息,黑体具有力量感,圆体十分可爱活泼,而艺术字体则能很好地吸引人的眼球,所以字体的选择对画面的气质的影响是非常大的,我们接下来看看字体选择有哪些需要注意的地方吧!

字体

宋体、黑体、圆体是我们最常使用的三款字体,那么到底哪种字体适合表达信赖感呢?

先来看看宋体,宋体具有文化感,历史感和人情味,适合表达学校、培训机构之类的易亲近的信赖感。

而黑体则具有现代感,力量感,以及有冰冷不具备感情的特征,所以黑体则可用于表达银行等权威机构,涉及金钱、投资等的信赖感。

圆体由于圆润的笔画特征,它具有活泼可爱、儿童稚嫩的属性,所以除了儿童用品等特殊情况下,一般来说圆体并不适用于塑造信赖感。

西文中相对应的,与宋体相似的衬线体适合表达易亲近的信赖感。

而与黑体相似的无衬线体则可用于表达权威严肃的信赖感。

这是两张分别使用了宋体和黑体的海报,左边使用了宋体的海报是一张具有亲和力的高校海报,而右边的这张使用了黑体,要突出的是演讲人的权威感。

但使用黑体或是无衬线体时我们需要注意笔画的粗细度,过细的字体会有轻佻的气质,不利于稳重踏实的信赖感塑造。

除了宋体、黑体和圆体之外还会有许多别的字体,那么应该怎么辨别这款字体是否适合表达信赖感呢?我们可以大致按照一条规律进行判断。修饰多的字体十分吸引人的注意,魅力十足,可是却会容易有轻浮、不稳定的印象,而相反装饰细节少、中规中矩的字体却能给人踏实稳重的印象,反而更利于塑造信赖感。

在字距方面,宽松的字距会带来轻松活泼的气氛,而稍微紧凑的字距则会带来更加流畅的阅读体验,由于我们要塑造一个稳定可靠的形象,所以在保证文字识别度和可读性的情况下,应该尽可能避免宽松的字距。

构图

接下来给大家介绍三种能够传达稳定感和信赖感的构图方式。

1. 对称构图

先来讲讲对称结构,在版面中,将元素进行对称排列能够带来稳定整齐的感觉。

在自然界中,大多数东西其实都是具有对称性的。例如枫叶。

△ 雪花

人的脸也是对称的结构。

而我们在发明和生产事物的时候,大多数情况也会将其设计成对称的,例如电脑,桌子和锅。

在设计中,对称的方式有四种,分别为左右对称,镜像对称,中心对称和平移对称。

其中居中对齐是对称结构中最为经典的一种方式,以版面的中轴线为中心,居中排布文字和图片,保证了重心位于画面中心,给人正式、端正及稳定的印象。

这两张海报都是使用了居中对齐的结构,很强烈的传达出一种稳定的,值得信赖的感觉。

2. 上下构图

上下结构也是特别传统、特别普通的构图方式,是想起构图就马上会想到的一个形式,他有一些中规中矩甚至有时候会显得有些呆板,但是在塑造稳定感和亲和感时,却格外的好用。

这些海报是用了上下结构来传达信赖感的例子。

3. 三角构图

在所有的图形中,三角形是最具有稳定性的,所以在版面中建立三个基点的三角形构图,能够使版面很轻易的达到稳定的状态。

这两张海报通过解构,其实都是使用了三角构图。

版面率

版面率指的是版面占整个画面的大小,版面率高的左边能够传达出活泼、热闹和动态的感觉,而版面率低则会显得比较的冷静稳重。

我们来看看这两个保险的海报,左边的满版的方式会显得更加热闹和有冲击力,而右边的版面率比较低,会更加的稳定克制一些。

图版率

图版率指的是图片占版面的大小比例,图版率高的画面会显得热闹而活跃,而图版率低的则会更显沉稳一些。

这次我们用一个画册来做示范,左边的画册图片占据了其中的一页,会给人带来较大的视觉冲击,而右边的只占据了右侧页面的上半部分,则会带来沉稳的印象。

跳跃率

1. 文字跳跃率

接下来我们来讲讲跳跃率对版面稳定程度的影响,跳跃率分为文字跳跃率和图片跳跃率。

文字跳跃率指的是不同字号的文字之间的大小比例,文字跳跃率高的版面活泼欢乐,而文字跳跃率低的则具有内敛、安静、稳重的印象,甚至会带有一些成熟的氛围。

看这两个案例,文字跳跃率高的左侧虽然更容易吸引人的眼球,可是却叫人难以信服,而右侧的跳跃率低一些,虽然有些低调,可是却更加精致一些,更叫人容易接受。

2. 图片跳跃率

和文字跳跃率相似,图片跳跃率指的是图片之间的大小比例,大的图片跳跃率同样也会显得活泼欢快,小的则会显得沉稳柔和。

这次我们用画册的其中一页作为案例,左侧的跳跃率大显得欢快,具有较强的冲击力,而右侧则更显沉稳。

但是我们需要注意的是,不是说跳跃率低,让版面稳定就好,大多数时候我们都需要利用一定的大小对比,去强调一些比较重要的内容,比如说标题要足够明显、重要的照片需要放大,次要的则要缩小。无论版面再稳定也需要有视觉焦点的存在,所以当我们在塑造信赖感画面的时候,需要控制好跳跃率,应该是在保证视觉焦点足够明显,层级关系区分足够清晰的基础上,尽量降低跳跃率,而非盲目地降低跳跃率,使得画面所有元素都一般大小。

图片

接下来我们来看看在图片的使用上有什么需要注意的。

1. 图片视角

在打造信赖感画面的时候,我们经常会放上人物的图片,因为人物的图片会比单纯冰冷的产品图更容易带来共情感。

正视的人物视角会传达出正式、庄重、可信任、严肃、规律有条理的印象,在传达信赖感的画面中最为常见。

侧视的角度则会有自然、可亲近的感觉,可用于表达补习机构等带有一些亲切感觉的信赖感画面。

仰视的人物象征着高大、权力、至高无上、雄伟的印象,适用于领导人、或是名人演讲等强调权威的信赖感画面。

俯视的角度会有温和、亲切、客观性的感觉,可是由于是由上往下看,会有一种长辈看晚辈的感觉,甚至有一些藐视感,所以这样的视角不太适合表现信赖感。

人物的背影视角会给人一种神秘的感觉,可是捉摸不清的感觉却是展现信赖感的大忌,所以这种角度在做信赖感的画面中并不适用。

这三张海报分别用到了正视、侧视和仰视的角度去传达信赖感。

2. 表现形式

首先可以将图片分为矩形图片和去底图片,去底的图片会显得比较热闹活泼一些,而矩形图片则显得稳重,而且由于矩形图片的背景一般为实景,所以更加具有真实感,所以在展现信赖感时,我们最好选择使用带底的矩形图片。

那么我们便可以把我们需要的主体抠下来,然后在背后叠加一个色块,去增加其稳定感。

然后我们看看这两张图片,很明显左边的照片会比右边的手绘图片更具有真实感和信赖感,手绘的元素比较适合用于展示一些比较抽象的想法或是一些调皮活泼的画面,而要展示信赖感的话,实景照片才是首选。

色彩

色彩在设计中占据了很重要的地位,能够很大程度上影响画面的气质和调性,我们来看看信赖感应该使用什么样的颜色吧!

1. 冷暖色调

靠近红色的暖色调会刺激人的脑部神经,令人易于兴奋,使得画面变得活泼热闹或者是紧张富有动感,而靠近蓝色的冷色调会令人冷静,使画面变得冷静而克制。

所以在展示信赖感时,我们首选蓝色和绿色等冷系色调。蓝色和绿色在企业商标和商品中频繁被用到,具有清爽、干净利落、可靠的印象。

蓝色是能够在沉着冷静中体现诚实印象的色彩,在银行、培训机构等行业经常会被使用。

绿色则具有消除疲劳等疗伤效果,且具有天然可靠的印象,适用于医疗场合、保健品等等。

2. 色彩纯度

纯度越低,越能传达沉着冷静的印象,即便是热情躁动的红色橙色,将纯度降低之后,同样也能传递信赖感。

这张海报便是使用了低纯度的红色来表达信赖感。

橙色降低纯度之后同样也可以传达信赖感。

2. 色彩统一

在传达信赖感的画面中,需要克制地使用色彩,画面中最好只出现一种主色调,例如这两张海报,分别用了蓝色和绿色作为主色调,其他颜色只是小范围的点缀,甚至不使用其他的颜色。

如果画面中必须出现多种颜色的话,我们还可以使用色相一致、明度一致或是纯度一致的配色方法去保证画面的和谐稳定。

例如这张海报中,出现了最少六种的颜色,可是却能保持一个比较和谐稳定的状态。

数据的使用

数据能够最真实的反应产品的品质和效果,最能够让客户信赖,所以我们在做设计的时候,如果有相关的数据的话,我们不妨将这些数据放大处理,把数据放在一个显眼突出的位置,让客户一眼就能够被数据说服,从而信赖我们的产品或服务。

前面的部分我们一直强调稳定感,没错,稳定感是可以让画面变得更加稳重可靠,更值得信赖,不过在我们心中也应该有一台天平,把握好稳定的尺度,不能一味地追求稳定而使画面变得过于呆板,缺乏吸引力。有时候在很整齐的画面中添加一点点图形化的元素就能让版面活起来,接下来我们就用一个案例来实操一下前面的理论部分,看看如何做到稳重而不呆板吧!

首先来看看文案,我们要做的是一个留学机构的宣传单张,和以往的海报案例不同,宣传单张的信息量会比较大一些。而且由于是留学机构,所以在强调稳定感的同时,也要尽量的让画面别太呆板,希望能够让客户信赖,也能保留一些学生的活泼属性。

我希望将这个版面做一个中规中矩的上下结构,所以我将版面横向分成三块,然后画面的主色调选用蓝绿色调,在最下方的一栏叠加一块蓝绿色的色块。

然后将画面竖向分为三栏,通过三分法将我们的人物形象放在右侧两栏上。由于人物是去底图,所以我们在人物底部添加一个淡淡的渐变色增加图片的真实感。

确定好画面的页边距,将标题文字做成文字组的形式,放在横向三栏的中间一栏,注意在标题组合中我们有添加一些图形的元素,不过使用的都是直线形或是几何曲线形的面。

将人物介绍信息的文字组放在人物的左上方,并占上方一栏的一半。

人物的右侧的留白则用获得资格认证的文案将其填上。

上半部分排好了,接下来就是底下的正文部分。我们先将底下的边距做好,然后将最大的一部分文案用色块和表格的形式放于版面中。

最后将联系方式和地址等与一些小图形结合做成文字组排列于画面底部,那么我们这个案例就完成了。

我来总结一下今天都讲了一些什么内容。首先我通过分析得出信赖感其实就是一种稳定感,我们想要做出具有信赖感的设计,就需要将版面刻画的更稳定一些,接下来我们分别从点线面、字体、构图形式、版面率、图版率、跳跃率、图片选择、色彩使用以及数据使用等方面去阐述如何使画面更加稳定,最后我们用案例的部分对前面所讲的理论知识进行了实操,展示了如何让版面显得稳重而不呆板。

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

Source: 优设网 – UISDC | 17 Sep 2019 | 8:59 pm(NZT)

拍一张照片,就能设计成一幅海报!(附实操改稿案例)

@做设计的面条 :发布《拍一张照片,就是一幅海报》系列创作分享后,大家纷纷表示看得很过瘾,也想设计海报试试看,所以后面我就为小可爱们举办了 3 期《设影活动练习》并抽取了部分作品做了点评。

大家纷纷表示超喜欢看我的点评,但又觉得如果能附带改稿演示就好了。所以这一次我就带着 5 张照片变海报的改稿案例来了。

往期回顾:

  1. 《拍一张照片就能设计成一张海报!》
  2. 《拍一张照片,就能设计成一张海报!(实操分享第二波)》
  3. 《拍一张照片,就能做出一幅海报!(实操分享第三波)》
  4. 《拍一张照片,就能做出一幅海报!(实操分享第四波)》
  5. 《拍一张照片,就能做出一幅海报!(实操分享第五波)》
  6. 《拍一张照片,就能做出一幅海报!(实操分享第六波)》
  7. 《随手拍一张照片,就能设计成一幅海报的秘诀到底是什么?!》
  8. 《拍一张照片,就能做出一幅海报!(实操分享第八波)》
  9. 《拍一张照片就能设计成一幅海报,这种技能要不要?》
  10. 《拍一张照片就能设计成一幅海报,这种技能快来学!》
  11. 《拍一张照片,就能设计成一幅海报,这种技能要不要?》
  12. 《拍一张照片,就能设计成一幅海报!这个技能太好玩了!》

改稿案例一

这幅海报说是改稿案例,其实前后都是我自己设计的,算是设计优化前后的对比图,而原照片如下图所示:

1. 分析照片素材的优劣

拍这张照片的时候,只是想着臭美,只要脸好看就行了,根本没想过后面会设计成海报,所以有蛮多缺点:

分析完缺点,还是有一些可取之处的,比如这种红配绿的配色不错,构图也不错,最重要的是,这模特也不错的样子。

2. 确定设计主题

在设计前,先确定一个主题,就是这幅海报设计出来是干什么用的?

虽然我们是设计着玩玩,但能够用作商业用途肯定是最好的嘛。考虑到我是电商设计师出身,干脆把它设计成一幅卖耳环的海报好了。

3. 确定文案

按照我的习惯,我会去分析产品的气质和照片里的一些元素,来提取关键词信息。因为我拿着这种大片的叶子,很有森林的气息,这个耳环是我在宜昌旅游的时候买的,很有民族特色。

思来想去,干脆给我这幅海报起名叫「翡翠森林系列」。

因为我假想的是公司里有好几款产品分成系列,每一款产品都有一个让人浮想联翩的名字才好玩。

4. 确定设计风格

跟前面想文案的方法一样,可以根据原本的素材照片去联想,再加上文案也是有「森林」、「翡翠」的字眼,所以带点森林气息,自然气息的画风也是可以的。

原照片本身的条件,缺了条胳膊,画质又很渣,怎么办呢?肯定是要想办法把我的胳膊遮起来,而且画质很渣的素材,要走高大上路线也不合适,所以一定要选能够包容渣画质的画风,比如手绘的,带点古朴气息的都是可以考虑的。

设计师也要分析自己的优势劣势,找一个能够执行得出来的设计方案。

所以设计风格就往手绘、大自然、古朴气息方向去设计。

5. 设计要点

字体为什么这么设计?

你看我手上拿的叶子,像不像一个标题设计?字体设计灵感来源于叶子,然后结合了小篆书法的形式,这种字型原本就取自于大自然,跟我手上的叶子纹理相结合莫名觉得很搭调。

耳环为什么要替换掉,你是怎么 P 正的?

设想的是一幅卖耳环的海报,耳环得好好展示,客户才有购买的欲望。那么把耳环戴正,重新抠图很有必要。

头发和叶子为什么要处理?怎么处理的?

画质真的太差了,几乎就是重新画了一头头发,真的是一根根画出来的。

原本我也不想处理叶子的,可是其他地方都修精致了,叶子粗粗糙糙的总感觉不搭调,所以最后把叶子也重新画了一遍。

具体怎么设计的,我录了一个步骤视频,大家看看就明白了。

点击查看视频教程

接下来的四个案例都是我的面粉的照片海报,然后我帮他们改的稿子,我们接着往下看吧。

改稿案例二

这幅海报原照片是这样的:

我们可以看到,其实原照片设计成海报后,还是比较有创意的,配色也还可以,粉粉嫩嫩的,但是这幅海报却存在着以下几个问题:

既然是爱心早餐,我们要设计出甜美的,干干净净、清清爽爽,最好是带一点可爱甜蜜的味道在里面。

蓝色版:

粉色版:

我主要做了以下几个方面的修改:

总而言之,我的改稿思路都是围绕着要让普通的东西变得美好,让画面有序又不呆板的思路来执行的。

改稿案例三

这幅海报原照片本来长这样:

我们可以看到,原海报创意是很不错的,但是却存在着以下几个问题:

总而言之,这幅海报整体创意不错,但是产品的质感要提升,还有文字部分的调整。

于是,我做了下面这个改稿处理:

主要做了以下几个方面的修改:

既然是走品牌路线,画面简简单单的就好,把背景的蓝色撞色换成了与瓶身同色的柠檬黄,虽然看起来产品是不如原先的撞色突出,但是在氛围感受上却更舒服,更清爽干净了。

原图手拿的姿势不太好看,不够伸展,得替换,所以我拍了一张自己的手,合成了一下,再把原图修了一下,就是大家现在看到的效果。

头部文案的颜色改成了产品本身文字固有的绿色,并且将字母「O」部分做了一些白色跳色处理,这样感觉会更活泼一些。

我以为这张海报应该是改稿时间比较短的,结果却是最费事的。我以前说过,像这类型大面积留白的海报,对产品图的品质要求是相当高的,仿佛诺大一个场地所有的灯光都对着你,所有的眼睛都盯着你看,有一丁点缺点就暴露无遗了。

所以要精修,不然这海报就没法看,谁让产品图是唯一的主角呢?

改稿案例四

估计很多人想知道调色是怎么出来的,因为它的原图长这样:

其实调色,无非就是用好 ps 里面的这几个工具,再结合色彩的情感来调整:

不同的色彩给人的情绪感受不一样,比如原作者的照片调色,给人感觉就比较神秘,还略带压抑,因为它是蓝紫色里还带点黑,画面比较暗。

存在以下几个方面的问题:

这幅海报,还可以做得更大胆一点,更酷一点,更骚一点,不要扭扭捏捏,于是,改了下面这版海报:

我这里主要做了以下几个方面的修改:

1. 字体重新设计

原图看起来是很复杂的楼梯,我联想到了矛盾空间,所以重新设计了一个矛盾空间字体,跟主题更搭调。

2. 将原文案去掉了一个字

做设计的时候,不一定需求方给什么文案,就必须原封不动都放上去。可以多思考,该精简的精简,但前提是需求方允许这么做,或者你的文案功底确实不错,让人信服,所以设计师提升文案能力也是有必要的。

3. 文字放置

将所有的文字有秩序地放置起来,同时把复杂的背景弱化,阅读会更流畅。

4. 色彩搭配

色彩搭配没有对错之分,但我选择将普通的蓝紫搭配改成骚气冲天的大红+玫红色,因为这个色彩更适合我的设计样式,我想要更前卫一点,更刺激一点的色彩。

不过考虑到大家的喜好不同,我也在原色调基础上,优化调整了一版:

在这幅海报改稿过程中,我想告诉大家同一个文案,不同的设计师脑海里的画面可能是不一样的,不同的需求人他所需要的画面可能也是不一样的,所以作为设计师,要多一些选择,思维可以放开一些。同时你有能力执行出来,并且,你还得学会看人和沟通。这样,不管你遇到什么样的客户都可以搞定。

改稿案例五

第一眼看到这幅海报的原图,就想给它改个稿,它的原照片长这样:

看到原海报的第一感觉就是,文案用的还可以,一层一层的方形既是玩构成里的透视,又跟回家的「回」字相呼应,想法很不错,有点艺术家的气质,但是这幅海报却存在着以下几个问题:

当我看到这四个字的时候,我的感觉是有点悲伤的。但作为设计师,我更希望用自己的设计做一些改变,我想带给人美好的,温暖治愈的感觉,于是改了下面这版海报:

我最开始想的是,要给那只猫的窗口上面画一个屋顶,周围再点缀一些小花。「何以为家」这四个字到底该怎么设计,整体构图会比较好,所以我就画了些草稿:

画着画着,就觉得何以为家的「家」字,很像一只猫坐着的姿势:

虽然「家」下面的「豕」是猪的意思,可我们这里的主角刚好是一只猫咪。那么,我干脆把「家」字抽象成一只猫头顶上有一个盖子。那什么可以当盖子呢?我想到了向日葵。

向日葵是一种带给人温暖阳光的花,在一个花瓣纷飞的午后,一只猫咪蹲在向日葵下面看着另一只猫咪,它也想有个家,故事就这么开始了。

原本想设定的故事情节是两只渴望家庭温暖的猫咪相遇了,在向日葵下,互生爱慕之情。可惜,ps 没有将猫咪的头扭转 30 度角的功能,所以,最后变成了蹲着的黑猫暗恋上面的白猫,上演了一出「我在窗户下面看你,而你却看着镜头」的苦情剧。

给大家录了一个视频,看看就知道是怎么设计出来的了:

点击查看视频教程

发布完这幅海报后,很多人都表示被治愈到了,那么,我的目的也就达到啦。

写在最后

之所以会想到把这些海报创作思路分享给大家,是因为看到很多人抱怨没有素材,所以做不好设计。而且很多公司是没有专门的摄影师的,找人拍照也不舍得花钱,所以很多设计师往往都不得不拿着很渣画质的素材做设计,可以说是叫苦连天。

用手机拍的渣素材设计海报,就是想告诉大家:如果我们改变不了他人或环境,那就改变自己吧,提高自己的手上功夫,去开阔自己的脑洞和思维。

希望我的设计分享,不止是能给大家带来思维上的启发和设计能力上的提升,也能带给大家好心情。

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

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

tttt-1qr1111

Source: 优设网 – UISDC | 17 Sep 2019 | 8:47 pm(NZT)

内部分享!平面设计入门知识基础科普

本文由英语流利说设计团队成员出品。自学设计的我,结合多年工作经验,做一期平面设计分享。

平面设计的四个原则

关于平面设计的 4 大原则,在 RobinWilliams 所著的《写给大家看的设计书》里面已经写得很详细了,很多小伙伴也都看过。

现代主义设计的先驱 Jan Tschichold 说过「对比是平面设计中最重要的元素」。对比不光有我们最熟悉的大小对比,还有颜色的对比(撞色)、空间上的对比(清晰&模糊)、时间上的对比(传统&未来);表现形式的对比(杂乱&整齐)等等。

重复并不是单调的复制,重复可以用少数的元素快速传达画面想要传达的信息。重复还可以形成一种风格,运用在品牌设计中就是一种符号,也是奢侈品常用的视觉手法。

△ 去年 Burburry 升级新 logo 重复排列组成图案

排列手法有一个很大作用是视觉引导,让画面中的元素找到平衡,更理论化的是排列形成一个系统,例如「网格」。

△ 企鹅图书封面 – 用网格设计排列的经典案例

「亲近」是英文的直译,简单来说就是元素与元素之间关系的处理。我们把画面中的元素按一定逻辑关系排列。关联的元素之间相互靠近,无关的元素之间相互远离。

下面「道士下山」的海报,对设计原则的使用你都看明白了吗?

虽然这 4 点是平面设计中最基础的原则,但最简单的东西也往往是最「复杂」的。无论是平面设计还是 UI 设计都脱离不了这些基础原则框架,这是打好基础的第一步。

比例和网格

很多小伙伴往往都会使用 4 原则,但是在设计排版一些结构复杂的内容时,往往无从下手。

这时候借助一些「工具」来搭建框架是个简单有效且快速的方法。这里说的「工具」就是比例和网格,它在设计布局中的作用是非常重要的,但非平面科班毕业的设计师可能很少有机会深入了解。

平面设计中常用的比例:

黄金分割 / 黄金比例大家都知道,就是 0.618 ,这个比例在 logo 设计中比较常用。最简单的用法:b=a*0.618,这里的 a、b 指代是线段长度、圆的大小等任意尺寸单位。

三等分/九宫格在摄影构图中使用的比较多,简单容易理解就不多介绍。

斐波那契额数列听起来很厉害,它其实就是黄金比例的数学近似版。数列规则即后一个数字是前 2 个数字相加的和。也就是 0,1,1,2,3,5,8,13,21,34,55,89,144,233 ……

知道这个数列后,具体怎么使用呢?最简单的就是依照数列画参考线网格作为排版的依据。

最后一个 √2矩形,听起来很奇葩,但它其实就是我们平时最常见的A系列纸张尺寸(A2、A3、A4等)。

它的构成方法是,先画一个正方形,然后连上对角线,再将对角线以一终点为圆点画圆旋转,转到与正方形一边重合时,构成「√2矩形」的长边,正方形的边则是「√2矩形」的短边。

「小知识」:再延展一下,继续连上「√2矩形」的对角线,旋转,重合构成更长边的矩形是 √3矩形。以此类推还可以有 √4矩形,√5矩形,√6矩形 ……

了解了一些比例规则后,让我们来看一下 Josef Müller-Brockmann 设计的海报。不知道你有没有发现一些比例上的规律?

可能有的小伙伴虽然对上面的海报不明觉历,但感觉有点花里胡哨没什么作用。其实不然, Josef Müller-Brockmann 就是《网格系统》的作者,书里介绍的强大的网格工具让平面设计师面对复杂的书籍、杂志、报纸排版时也可以轻松愉快。书中的方法对网页、APP 的设计也有很多参考价值。

点线面的使用

在基本平面设计当中,你可以把点当做一个文字或单独小元素,线是一句文案,而面,则是一段文字等等。

需要注意的是,点线面之间,没有绝对的界线。它们可以通过程度的变化自由变换。例如下图 B 相对于 A 来看,B 是面;B 相对 C 来看,B 是点。E 可以看成是更密集的 D;F 可以看成是更高的 E。

点成线,线成面,点是几何中最基本的组成部分。很多点聚在一起可以组成韵律和图案,点的疏密,重复,规模和数量变化都能对画面效果产生影响。

线具有很强的视觉引导性,它是连接任意两个点的路径。表现形式可以有直线、斜线、曲线、实线、虚线等等。

面有一定的长度和宽度。不同形态的面可以在视觉上表现出不同的情感。直线形的面具有稳定、秩序感;曲线形的面柔软、轻松、活泼;不规则的面则会更自然生动。

无印良品的海报就是点线面运用最简化的经典案例:

一些小细节 tips

细节决定成败,平面设计中有很多值得注意的小细节。

注意按钮内部上下留白,留白多可以简单快速地让界面看起来更大气。

软件中开启避头尾和间距组合,可以避免标点符号出现在句首,为中西文混排时增加半角空隙。(sketch 和 figma 等 UI 设计工具还不支持)。

因为中文是方块字,所以字符高度一般比常见的非衬线西文字符更高。所以在中西文混排时可以手动调整西文大小,让中西文保持在一个和谐的高度上。做法通常是增大西文的字号,再使用基线参数向下偏移西文位置。

△ 手机横过来看比较清楚

注意视觉平衡/对齐,不同造型的元素有不同的视觉大小,例如一个边长 400px 的正方形和直径 450px 的圆形在视觉大小上其实是相当的。

背景的深浅会影响对齐的方式。

设计长表格列表时背景色(条纹)分割比线分割更好。

欢迎关注「流利说设计团队」公众号:

Source: 优设网 – UISDC | 17 Sep 2019 | 3:47 pm(NZT)

用手机拍人,如何才能拍出高级感?

终于要好好说说用手机拍人物的事情了。

首先,在原画册的概念中,拍人物从来都不是和建筑、风景等类型相独立的,一幅人物照成立,必然先带着环境表达和人物精神的,其次才是关于景深(背景虚化),肤质,身材的修饰。如果本末倒置,更多工夫花在背景虚化、美白、过度磨皮等操作上,人物照会很容易变得糖水、油腻。

如何避免将 TA 拍成油腻的人?

建立一点儿环境观

那需要一点「勇气」,例如将人物比例缩小到一定程度。

△ 韩松/摄 iPhone 7p干净的背景,融入环境的小比例人物

△ 韩松/摄 iPhone 7p博物馆,和画一起的人

△ 韩松/摄 iPhone 7p日本天桥立,面对大海,俏皮的情节

△ 韩松/摄 iPhone 7p树美术馆,圆窗后的女孩

△ 韩松/摄 iPhone 7p 莫斯科倒影,背景建筑颇有当地色彩,女孩像是走入画中

△ 韩松/摄 iPhone 7p红砖美术馆,用倒影构建的人物场景

△ 韩松/摄 iPhone 7p,倒影构建的人物场景

△ 韩松/摄 iPhone 7p长曝光的使用,构建非写实般的场景

手机拍照,纠结画质不如玩味光线

手机拍人物,没有长焦镜头和良好的浅景深背景虚化,更多的摄影材料是光线。

想让照片获得更多的情绪表达,可以用镜头记录逆光人物,获得剪影的效果:

△ 韩松/摄 iPhone 7p 逆光剪影

△ 韩松/摄 iPhone 7p 逆光剪影

运用侧逆光,寻找微妙的「头部」与阳光的关系,当出现「边缘光」时,会给人物带来神秘的视觉力量。

△ 韩松/摄 iPhone 7p 用人物头部挡住一部分阳光

△ 韩松/摄 iPhone 7p 侧逆光带来人物头部的边缘光

△ 韩松/摄 iPhone 7p 人物头部的边缘光

或者直接引入侧逆光,让光线和影子成为构图的一部分:

△ 韩松/摄 iPhone 6s 透过窗棱的光线

△ 韩松/摄 华为p10 透过窗棱的光线

更美的角度,更有趣的瞬间

对于想获得更美更瘦人像的朋友,俯视拍摄和舌抵上颚不是传说,是让面部肌肉紧绷和「看起来脸小」的良药。人眼睛不一定要直面镜头,可以低头,仰视,回头,拍摄背影等。

△ 韩松/摄 华为p10 各种角度(不一定直面镜头,低头,回头,背影等)

△ 韩松/摄 华为p10 各种角度(不一定直面镜头,低头,回头,背影等)

△ 韩松/摄 一加5 背影

△ 韩松/摄 iPhone 7p 原画册小伙伴街头小聚,wmm和kkm被飞驰而过的摩托挡住部分身体

△ 韩松/摄 iPhone 6s 小鹿在中间,好似给画面带来了更多的趣味感

△ 韩松/摄 iPhone 7p 用帽子遮住一些面部

△ 韩松/摄 iPhone 7p 用气球遮住面部

△ 韩松/摄 iPhone 7p 气球遮住一半面部

△ 韩松/摄 iPhone 7p 使用低视角拍摄草原上的鸿宇

△ 韩松/摄 iPhone 7p 鸿宇在草原上唱歌,手机低到草上,营造出小人国般的氛围

组照和自拍的修养

△ 韩松/摄 iPhone 6s 四张照片有着相似的色调,不同的拍摄距离,其中一张为无人的空场景,从侧面反映出当时的情绪

最后,其实韩松老师也是要自拍的。

△ 韩松/摄 iPhone 7p 柏林,归国前的自拍,镜子里的镜子里的我

如果你想和作者学摄影,只要有一个能拍照的手机(无论是 iPhone 还是安卓),能装上 Snapseed 和 VSCO (iOS 和安卓都有,后期只用这俩就够了),以及一门高效快速又干货满满的摄影课,就够了:

十个章节,不到 30 课时的快速课程,教给你摄影大赛冠军的摄影秘诀:

想要来一发?桌面端访问你可以戳这个链接:「iPhone 摄影大赛金奖得主:刷爆朋友圈的30堂手机摄影课」

手机访问直接扫描下面的二维码:

Source: 优设网 – UISDC | 17 Sep 2019 | 2:25 pm(NZT)


顶尖设计师系列!平面设计界毕加索,教父级人物「保罗·兰德」

@研习设K先生 :保罗·兰德是20世纪杰出的平面设计师、思想家、教育家。从事设计工作60多年,一生斩获荣誉无数。这篇文章我们就来了解一下这位传奇设计师的生平经历、主要作品以及他对设计这个行业的一些观点与思考。

大师简介

保罗·兰德是1914年出生在美国纽约,从事设计工作60多年,担任过《服装艺术》、《方向》、《时尚先生》的艺术总监,做过IBM的商业顾问,也在耶鲁大学艺术设计学院、普拉特设计学院、库柏设计学院等著名的院校担任设计教授。

他是IBM、Next、ABC、UPS、西屋电气、耶鲁大学等知名企业、机构logo的设计者,其作品涉及书籍装帧设计、广告海报、插图、字体设计和企业形象设计等领域,优秀的作品也被欧洲和日本的多家博物馆收藏。纽约的艺术设计家协会,英国的皇家设计师协会,耶鲁大学,哈佛大学等著名机构也授予他的多项荣誉。

由于保罗·兰德在平面设计领域的突出贡献与地位,也被誉为「平面设计界的毕加索」。他是史蒂夫·乔布斯眼中的平面设计「教父」,史上最伟大的平面设计师。

突出贡献

保罗·兰德之所以能够在业内、业外都收获了如此多的赞誉,作品过硬是一方面,这是基础。另一方面,他也通过自己对设计、商业领域的突出贡献,赢得了客户、设计师乃至合作伙伴的尊重。

保罗·兰德从欧洲学成归来以后,把当时前卫艺术运动中的建构主义与立体主义引入了美国平面设计领域,新的形式丰富了当时的设计手法和表现形式,强化了设计作品视觉冲击力,给一成不变的广告行业注入了新的活力。

由于深受包豪斯风格与欧洲字体艺术的影响,其作品在当时具有非常强的视觉效果与功能性。他在logo设计中提出的,logo扮演的基本角色就是指示,简洁即它的手段,写实只会将信息变得更晦涩。logo的效用需要依靠独特性、可视性、适应性、可记忆性、普遍性以及持久性。这些在我们现在看来很基本的设计原则,当时几乎颠覆了全世界logo设计的概念。

在IBM这个项目中,保罗·兰德把logo的形象延展应用到了每一个与公司有关的场景中,为的就是让受众熟悉并记住企业的视觉形象。最后这个兼具标准图、标准字、标准色的logo,得到了极高的评价,在成就了IBM这个蓝色巨人的同时,也成就了保罗·兰德自己。作为最早使用企业视觉识别系统的设计师之一,IBM的视觉形象但今天还是我们学习企业形象设计中重要的案例之一。

对我们设计师来说,保罗·兰德还做过一件很重要的事情,他通过与伯恩巴克的合作,形成了我们广告行业里的艺术总监及文案的团队概念,这种集体创意既能使设计更具表现力,又能将创意融会贯通。在之前的广告行业里,文案才是办公室里的王者,设计师的地位在当时和现在的美工几乎没什么区别,这也可以看做是设计师地位的提升。

其著作《关于设计的思考》(Thoughts on Design)、《设计与本能》(Design and the Play instinct)、《保罗·兰德作品集》(Paul Rand:A Designer’s Art)等书籍的知名度丝毫不亚于他的设计作品,影响了一代又一代的设计师。保罗·兰德在作品输出、探索精神、商业领域、教育理念包括对于整个设计师群体地位的提升都做出了巨大的贡献,对整个行业产生了深远的影响。他所获得的赞誉,完全配得上他对整个社会的付出。

传奇故事

保罗·兰德在设计Next这个公司logo的时候,与乔布斯发生了一些交际,合作的过程和一些小故事很有意思,可以给大家分享一下。

Next这公司是乔布斯创立的,创立这家公司的目的其实是为了打败苹果公司。乔布斯有一段时间被赶出了苹果公司,被赶走的原因一个是因为他出了名的暴脾气,看不起人,几乎所有的员工都不喜欢他。还有一个原因就是当时的苹果业绩也不是很好,内部存在很多问题。传说当年比尔盖茨只是想给苹果做小老弟,安心的开发office,但是苹果不给人家兼容技术上的支持,最后小老弟受不了了,只能自己去开发了操作系统,Windows。

当时的董事会估计也是想调整一下公司的构架,最后乔布斯被他亲自聘请的CEO斯卡利,连同董事会弄走了。(PS:斯卡利是1983年加入苹果公司的,乔布斯当时为了让百事可乐总裁约翰·斯卡利加入苹果,说出了那段至今仍被人们津津乐道的话——「你是想卖一辈子糖水,还是跟着我们改变世界」)蜜月期总是短暂的。总之,Next这个品牌就是乔布斯对苹果复仇的工具。

乔布斯花重金来找保罗·兰德设计logo,并不是因为他们很熟,是因为他看过保罗·兰德设计的IBM的logo,特别的喜欢,在为新公司打造品牌的时候,他没有想过找任何其他设计师,只想找保罗·兰德。合作的过程中就让保罗·兰德顶了两次。第一次是乔布斯问保罗·兰德,钱都给你了,你能给我交几个方案?你可以想想如果客户问你这个问题,你一般是怎么回答的。兰德给他的回答是,就一个,要方案多的你去找别人,我会给你提供最好的方式解决你的问题,你爱用不用,但是钱你要付给我。

第二次是这个方案已经出来了,乔布斯特别满意,但是希望做一点小改动,就是把logo里面的小写字母e的黄色变得更亮一些。这种改动换成我们,肯定就给他调整了,稍微调整一点点,大家都开心。但是保罗兰德对这种改动都坚决不同意,因为他知道自己的设计是效果最好的,乔布斯这一次又让步了。

这个合作的过程是在一次对乔布斯的采访中提到的,他说兰德的做法有一种「让人耳目一新的清晰度」。每个客户都应该记住,不要让对方给你选项。你雇用的是一个比你更清楚该如何解决问题的人——就像你聘请会计师或营销专家一样」。而这次的合作他也学到了一些关于品牌的重要教训,这对他后来的工作产生了很多影响。

都说乔布斯脾气不好,但不难看出,他对保罗·兰德的评价却非常高,在乔布斯重新回到苹果以后,1997年苹果著名的系列广告think different里,保罗·兰德是和毕加索、爱因斯坦、甘地、爱迪生等人物并列的天才。他对保罗·兰德的评价是具有艺术家的纯粹品质,但精于解决商业问题。他外表强硬,像个倔老头,但内心和泰迪熊一样。

作品解析

1. next

既然前面的故事中提到了Next,下面我们就深入了解一下这个logo的设计思路,看看真正有水平的设计师是如何进行logo创意,并且把创意表达出来的。

我们来看Next这个logo的设计思路。保罗·兰德认为logo设计选择一款基础的字体是设计logo的便捷的开端。项目一开始就尝试了大量的不同字体,观察不同字母组合之间的关系,寻找视觉上的异同效果,并且尝试从一个字母或者是一组字母的设计中寻找创新的灵感。

但是由于Next这个单词被使用的太频繁了,不管使用何种形式的字体,给人的感觉还是一个我们非常熟悉的单词,而不是一个logo。想让他看起来像一个logo,就要想办法使他陌生化,让他看起来不一样,让他能够唤起更多的联想,而不仅仅是一个介词或者副词,这个才是问题的核心。

有一个简单的方式可以解决这个问题,就是把所有的字母都变成大写的,大写字母她能让这个单词本身变得更让人陌生,因为大写的字母比小写字母更难识别,对我们中国人是这样,对外国人也是一样的。不过当NEXT变成了大写以后,又容易和EXIT,也就是安全出口的那个单词混淆,这个可能是因为EXT这个组合太显眼了。为了要避免这个问题,保罗·兰德使用了一种方法,这个方法在现在的不少logo里都能看到,大小写字母相结合的方式。

在NeXT这个单词的大写组合里,把小写的e突出出来,让他成为一个焦点做视觉上的对比。而且e这个被突出的字母还能代表很多正面的含义,e打头的单词有教育、优秀、专长、卓越、激动等等,这等于给logo额外附加了很多的正面含义。通过这种大小写的对比,还产生了既有趣又易懂的效果。

这个logo选择的字体是几何感很强的无衬线字体,因为和类似caslon那种复杂的衬线字体相比,几何体的字母更容易实现视觉创意的表达和调整。在NeXT这个案例中,小写的e就是视觉焦点,能让人记住的元素。

为了强化公司名称的创意,保罗·兰德设计了一个黑色的立方体,把logo的字母分割成了上下两排,装在里面,这个立方体与字母的组合具有相当的视觉呈现力,容易让人记住,并且有能力展示含义,让人轻松识别。而分割成两排的字母在增加了字母尺寸、辨识度的同时,也让单词有了新的面貌。这个单词几乎是不会被误读的,因为它太常见了,就算把它上下分割了也一样。如果我们要是遇到不太常见的单词或者是汉字组合,那分割的时候就要注意文字本身的可读性了。、

这就是Next这个经典logo的诞生过程。可惜的是Next这个公司在1996年12月被苹果公司收购,logo虽然很棒,但是他的商业意义已经可有可无了,不过保罗·兰德为测试这个logo所定的基础性标准,就是前面提到的那6条原则,颠覆了全球的logo设计界概念。Next被收购以后,乔布斯也重新回到了苹果公司,之后就是苹果公司重新崛起,乔布斯开始改变世界的故事了。

2. IBM

在二十世纪中期,美国的「国际商业机器公司」是一个以生产打字机、电脑和计时器为主要业务的企业,为了便于记忆,保罗·兰德将其名缩写为IBM(International Business Machines)以便更好的传播公司形象。

在对这几个字进行设计时,结合IBM公司以事务机器及打字机起家这一历史,将「IBM」三个字母的形象特征设计成打字机打印风格,「B」字母中间负形设计成两个方孔,与其经营打孔机这一业务紧密相扣。标志醒目、简洁、贴切,透过这个崭新的外形传达出IBM最基本的营业内容。

1976年,保罗·兰德又为IBM公司设计了八条横纹的变体标志,并选定标准色为蓝色。水平的等线构成处理让人心里产生电磁波振动的动感,既传达了公司高科技行业的性质,又寓意了公司发展理念,严谨、科学、前卫且充满激情。这个标志简练概括、新颖大方且具有强烈的视觉冲击力。

3. Education First 英孚

EF英孚教育的全称「Education First」,于1965年由Bertil Hult创办。旗下有16个下属机构及非盈利性组织,提供各种教育类课程,包括语言学习、留学旅游及学位课程以及文化交流。

保罗·兰德认为logo是公司信念,管理和产品的图形升华。其主要目的是引起注意、指出、识别。像签名或指纹一样,logo是独一无二的。英孚教育提供的服务主要以语言、交流为主,所以将声波的抽象图形置入到EF的字母中是很恰当的。而且声波的抽象图形还会给原本平淡的字母提供了装饰性,让图形与文字自然的结合在了一起,为logo提供了辅助记忆的功能。

4. Morningstar 晨星

晨星于1984年在美国芝加哥创立,旨在为投资者提供专业的财经资讯、基金及股票的分析和评级,以及方便、实用、功能卓著的分析应用软件工具,是目前美国最主要的投资研究机构之一和国际基金评级的权威机构。2003年2月20日晨星中国总部在深圳成立,目前中国员工人数约1000人。

Morningstar的名字是两个词的结合形式,它既不短也不容易阅读。为了解决这个问题,保罗·兰德将字距收紧、文字拉长,节省每个字母的空间,并确保紧凑,让名字更短更容易处理。这样做虽然降低了文字的可读性,但是提升了独特性与识别性,作为logo能让人快速记住,远比能让人很快读出来更重要。而字母「O」被处理成了太阳缓缓升起的感觉,作为视觉焦点存在,也增加了logo的趣味性并强化了logo的意义——晨星,初生的星辰。

5. 美国快递公司UPS

UPS快递 (United Parcel Service)在1907 年作为一家信使公司成立于美国华盛顿州西雅图,是一家全球性的公司,其商标是世界上知名商标之一。作为世界上最大的快递承运商与包裹递送公司,同时也是运输、物流、资本与电子商务服务的领导性的提供者。

保罗·兰德在设计这款logo的时候,使用的同样是字母与图形组合的方式,把ups、盾形纹章和包裹同构在一起。ups是企业的名称缩写,盾形纹章代表保护、守护,是企业理念的延续,而包裹则是企业所提供服务的具象化表现。由于企业业务拓展的原因,现在这个版本里的包裹被去掉了,但是保罗·兰德的设计还是会被作为经典的案例,在我们设计师的圈子里不断的传承下去。

大师观点

保罗·兰德认为,设计与商业同样面对着道德问题。一个设计差劲但好用的产品比一件徒有其表却没用的产品更不道德。前者不尊重消费者,后者欺骗了消费者。好的设计永远不该用于推广糟糕的产品。而市面上糟糕的设计之所以越来越多,主要有三个原因。第一,管理层对优秀设计的无知或忽视;第二、市场调研者的既得利益;第三、设计师的话语权或能力的不足。因为大多数人都将设计师看做是一套绘图工具、一个供应商,而不是一项业务重要的组成部分。

好的设计,不管是对设计师、对企业、还是对于整个社会来说都是有价值的,而这种价值给予我们最直观的回报就是信誉。企业建立信誉的方式不单单只有提供好的产品、好的服务、赢得好的口碑这些,好的设计同样可以给企业的形象加分。因为受众更容易记住的是设计精美而不是糟糕的形象,好的设计能够从侧面折射出一个考虑周全、目标明确的企业,反映了他的产品与服务的品质。它展现出了一种好的社会关系——预示着好的信誉。它在对消费者说:「我们很用心」。

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

Source: 优设网 – UISDC | 17 Sep 2019 | 1:15 am(NZT)

做设计时,怎样理解和构建业务场景闭环?

在很长一段时期,产品经理和设计师在谈产品体验时,更多的是关注于用户本身,如今开始更加深入地探究用户和产品所处的业务场景,这样视野更大。

将业务场景纳入整个产品设计体系中,其实是将以往设计过程中被忽略的重要变量重新纳入考量,不仅更加准确地定义了产品的属性、流程和体验的诸多维度,而且为设计提供了更加准确的方向和依据。

从整个外部大环境来看,无论2B还是2C的产品,大都面临着激烈的竞争,只有基于业务场景的细分和有针对性的设计规划,才有可能在复杂的局面下杀出重围。

从用户场景到业务场景

用户场景我们之前已经提得很多了,而业务场景这个词在近几年出现的频率越来越高。这中间存在一个微妙的差别:我们不仅要关注用户本身,还要从用户的诉求和产品业务本身的诉求 ,使用多个角度,更加综合性的考虑问题。

看起来很好理解是吧?我们在以往讨论「场景」的时候,通常会使用一个简单粗略的方式来说,用在哪里,做什么。但是真的落实到实际应用场景中,这个颗粒度还是太过粗了,它并没有覆盖到全部影响业务和产品走向的因素。

所以,当我们谈产品的业务场景的时候,不妨更具体地将业务场景所涉及到的时间、空间、触发机制和业务过程4个关键点来切入,便于更加精准的拿捏产品的走向。

1、时间属性

用户在不同的时间打开产品可能是截然不同的诉求。比如周一中午12点打开美团可能是点外卖,周六晚上9点打开则可能是为了搜索周围的KTV。单就时间属性而言,会直接影响到设计的走向。

近年来疯狂流行的高沉浸的深色模式界面的运用,就是考虑到低亮度使用场景——而这是和时间属性高度相关的场景。在很多现有的产品当中,深色模式大都需要用户去手动切换。但是在最新的 iOS 13当中,这一功能被设置成为可按照时间属性自动变更的一个功能,比如在晚上8点之后进入深色模式,早7点之后恢复普通的浅色模式。这就是一个典型的基于时间属性的优化。

图片来自苹果官网

如果更深入一点,它还可以基于国家地区的特征,更加智能一些,比如将夏时制之类的因素纳入进来,自动调整深色模式的切换时间,而在北欧有极夜的国家地区,甚至可以在极夜的时候全天24小时自动保持深色模式,等等。

时间和用户行为、需求有着紧密的关联和深刻的内在逻辑,这是一个关键因素。

2、空间属性

用户在不同的地点打开应用也同样是出于截然不同的动机,环境的差异会导致用户的实际需求会有明显差异。比如滴滴打车的司机的客户端,是典型的考虑到司机开车时的空间属性而设计的,高对比度的配色,显著的按钮,语音播报等等。这一切明显是在兼顾到特定的场景需求,而专门定制的。

3、触发机制

触发用户打开应用的理由其实是一个相对复杂的变量。为什么要用微信而不是QQ?想要看视频的时候,是打开爱奇异还是B站?到底是哪些因素在这一时间这一地点,推动他去使用特定的产品?所以,要将用户在触发这一刻所产生的外部因素和内部因素,都清楚的拆解出来。

值得注意的是,用户在某一刻进行决策的时候,并不会花费太长的时间,不会经过太过复杂的逻辑思考,「下意识决定」是最常见的局面,可能是情绪驱动,或者贴合某个相对固定的心智模型。触发是在特定时间地点,用户切入并使用产品的关键节点。正确的触发机制,是撬动用户推动产品的关键之一!在后面我们会详细讲这一点。

4、业务过程

触发之后,紧接着的是使用产品功能并且达成诉求的一个完整过程。这可能是聊的最多的一件事情,也是在设计过程中牵涉得最多的内容:要有哪些功能,如何构建交互,怎样打磨体验,等等等。所以,当我谈及业务场景的时候,实际涉及到的,是这一时间这一地点,用户被触发了,并且在此完成了操作过程, 达成了完整的或者部分的目标。

既然如此,为什么不说是「用户场景」呢?因为「业务」的存在感和重要性,同样重要,需要强调。产品设计要满足用户的诉求,同样也需要达到产品和企业的业务诉求,这才是探讨「业务场景」的目标。

两个关键的闭环

基本上,这就是我们在谈及业务场景的时候,所涉及到的4个核心的影响因素,或者说组件。

业务场景在产品设计当中是讨论得最多的一个点,在今天的文章中就不继续细说了。但是和业务场景紧密关联的两件事情必须得深挖。

那么我们先来谈第一件事情。我们都知道要触发用户,那么在触发用户打开产品这个关键的操作上,到底要考虑哪些层面呢?这就涉及到触发机制的分类和内外触发机制之间的协同:内外触发机制的闭环。

另外一件事情,则涉及到一个很自然的逻辑:用户在一个场景结束之后,是否会跟着另外一个场景?产品是否能满足用户在一系列连贯场景下的核心诉求?这就涉及到一个更为宏观的视角:业务闭环。

内外触发机制的闭环

触发用户使用产品的机制,分为外部触发机制和内部触发机制两种。

外部触发机制不难理解。外部触发最常见的三种是广告宣传触发、用户分享触发和主动推送触发。

广告宣传触发

平时投放到各大平台上的广告是最常见的外部触发机制,线上的网页广告、APP闪屏广告,线下的广告牌和电梯海报,是非常常见和普遍存在的外部触发广告。这种触发机制需要平台持续的投入,并且这种触发机制,会随着时间的变化而变化:曝光时间越久,用户潜意识存在的痕迹就会越深,比如神一样的拼多多广告宣传曲。

用户分享触发
用户通过在朋友圈分享、直接推送链接,或者在社交媒体上分享推荐某个内容或产品,我们常说病毒营销、水军、自来水之类的,它所带来的转化和触发,都是属于这一类的触发。这种「非官方」的触发机制,也是目前关注多比较高的一种触发机制。

主动推送触发

如果你已经安装了某个APP,或者订阅了某个公众号,那么它所主动推送的信息和内容,它所带来的触发就是一种典型的主动式的触发。

这三种外部触发机制有一个微妙的差别,前两者大多是作为一种拉新获客的触发,而第三种通常是针对既有用户的一种触发机制。

相较而言,更加软性但是持久的,则是内部触发机制。内部触发机制主要是来源于用户本身的情绪需求和直接功能需求。和外部触发不同的地方,内部触发机制从更深的层面上来说,是一种情绪和情感需求上的满足。

对于内部触发有一种流传比较广泛的总结,就是「痛点」、「痒点」和「爽点」这样的三个触发点的总结。

痛点

我们所说的很多刚需很大程度上是「痛点」的外化表现。往深处挖掘「痛点」的情绪本质,是恐惧。比如网约车相比于传统的出租车服务而言,满足的是「害怕打不到车」的这种恐惧。这种情绪在程度和外化形式上,很多时候相对比较隐性。

痒点

「痒点」则对应的是用户的自我映射,更通俗的是用户会显性或者隐性地去想「如果这是我」。网络小说和很多影视剧之所以能够如此火热,其中一方面就是满足了用户的隐性的自我投射。而知识付费这类产品,则很大程度上也对应的是「如果我学会了我也可以」这样的心理投射。用户是不是会在使用过程中将自己代入进去,是不是能够抓住用户内心深处无法言述的那个点?

爽点

「爽点」是产品是否能够给予用户「即时满足」。「我想要,现在就要」的心理状态是即时满足的一种典型外化表现。各种外卖服务是对饥饿和食欲的即时满足,社交媒体和各种资讯应用是对信息的一种即时满足,次日达甚至当日达的物流服务是对物品获得的一种即时满足,更短周期的游戏则是对用户成就感和愉悦感的即时获得。

用户有烦恼,无论这个烦恼是来自于痛点,痒点还是爽点,它都是用户本身的硬性诉求。如果在这个时候,向用户提供一个外部触发,比如在饭点的时候,一个外卖应用基于地理位置和用户之前的口味,推送最近最快最热门的外卖信息,加上相应的优惠券,这就是一个典型的外部触发机制和内部触发机制的双重作用。

这种触发在可实现性上很强,效果也相当的给力。在2019年这个时间节点,相当大的一部分用户已经习惯了使用APP来完成各种生活服务:

打开APP → 下单(提出服务请求)→ 支付(进行交易)→ 收取(完成交易)→ 评价/分享(反馈)

这样的心智模型是已经成型的,当你在产品设计上规划好整个触发机制,后面的整个流程完成起来其实是非常顺畅的。

更进一步,业务场景之间一旦打通,这种无需离开应用的服务体系,是能够相对顺畅地满足用户「即时获得」的爽点,结合多样的奖励机制,从获客到沉淀用户,形成正向循环是不难的。

规划业务场景的闭环

当用户结束了一个业务过程的体验后,尚且还处于一个单一特定的业务场景当中,用户是否已经达成了诉求?其实在很多特定的业务场景之中,用户在完成一件事情之后,接下来要做的事情是可预测的——至少在相当程度上是规律的。当用户的下一个可预期的需求出现的时候,你的产品和功能能否接得住?一系列的功能能否构成闭环?你的产品是否在一系列的场景链条上,做到完美契合?很多时候,这件事情是可规划的。

而美团近期的一系列的产品规划,则正好是场景闭环构建的一个典型案例。

美团的业务结构,一直是围绕着吃喝玩乐来进行的。在布局衣食住行各个领域的过程中,出行一直都是美团的短板。在到达服务上,美团在收购摩拜之后,单车业务被整合到了美团的服务当中,出行似乎更加方便了,但是最有力的网约车服务,依然没有完全铺开。

在此之前,美团仅在南京和上海两地作为试点,推行了美团的网约车服务,而北京地区网约车服务的牌照直到去年年底才拿到。

如果美团的网约车服务能够顺利地铺开,这意味着用户在日常工作和生活中,可以借助美团外卖达成吃的诉求,而在周末出去约饭的时候,借助美团完成预订、出行、吃饭、娱乐等一系列的目的,所有的业务场景几乎都是无缝地衔接起来的。

通过合理的设计,从预订点餐到叫车,从下车到吃饭,在吃饭的时候预约晚上的KTV,甚至住宿的酒店或者民宿——结合算法和用户数据,这甚至可以提前制定整套方案。

有意思的是,美团为了构建整个场景闭环,在很多其他的城市以合作的方式,引入其他的网约车活动方,来弥补自己在出行场景上的不足。

倘若美团能建立起一个高效低成本的本地生活营销体系,那么就有机会将网约车变成为营销中重要环节。让想做广告的商家为网约车推广买单,以换得精细流量和用户。产品、流量、转化率是互联网商业竞争的核心三要素,如果美团通过产品业务场景的串联,打通了流量矩阵,转化率的提升就不是什么难事了。

那么场景闭环本身,就是增强用户黏度,沉淀用户的最有效方法。

宏观从功能上规划出了整体业务闭环是远远不够的。产品毕竟不止是功能的集合,我们之所以要强调场景,为了让产品更好的连接用户,沉淀用户,产生正向的反馈,形成循环,这也是我们如今强调业务场景的真实诉求。

以往我们强调培养用户习惯,但是从获得用户,到留存用户,简单的习惯二字是不够的,设计产品的目标最好从更大的用户心智模型上切入。

构建场景闭环来占领心智

产品的场景已经构成闭环,接下来要做的事情就是不断打通场景,提升用户使用产品的频次。 当产品切入到用户的心智模型中之后,用户使用产品的惯性会越来越明显而自然。两个闭环的构建是相辅相承的。

其实在此之前也有一些相对粗糙的数据支撑。比如很多银行在用户开通信用卡之后,会要求用户每年至少完成3次支付,而支付宝团队在很早期的时候,也注意到每年使用3次以上支付宝的用户,会在次年继续使用支付宝的机率会非常的高,3次支付成了支付宝的重要业务指标。

在支付宝团队的社交梦折戟沉沙之后,他们发现,高频可以留住人。阿里2018年 Q2的财报当中,曾经提及当时国内的7亿用户当中,70%的用户用到了支付宝的3个功能。在此之前,支付宝团队就已经将「三场景用户」作为一个核心的指标来运营了,而支付宝本身的各大服务,也一直都是奔着闭环来构建的。而如今,能用到3个场景的用户,留存率高达95%。

在用户心智资源越来越珍贵的今天,构建场景闭环,势在必行。

Source: 优设网 – UISDC | 16 Sep 2019 | 7:36 pm(NZT)

数位屏和iPad哪个更适合画画?来看这个超详细的分析评测

工具的进化,直接影响着绘画创作的方式和形态。相比于在纸上直接绘制图画,使用键盘鼠标来操作更加灵活了,但是相应的也缺少操作的直觉性和感知。好在数位板的出现弥补了这一缺陷。数位板和数位笔借助压感元件来感知笔触的力度和角度,和绘图软件结合到一起,既兼顾了手绘的手感体验,也充分地利用上了数字软件的优势。数位屏则更加彻底,笔触所至,效果即可显现,所见即所得。

可以说,数位屏这样的产品也是艺术家、插画师和设计师创作的极佳的伴侣。相应的,这种依托于桌面端操作系统的硬件,生产成本和价格也相应的更为高昂。而这其中,最为著名就是Wocom 的新地系列, Wacom Cintiq Pro 。

与此同时,iPad 和 Apple Pencil 的组合,也日渐受到手绘爱好者的青睐。这种功能上的交叉和对抗是如此之明显,以至于越来越多的设计师和插画师开始对两者之间的优劣对比有所好奇。

今天我们就来做一个快速的梳理和对比。

Wacom Cintiq Pro :专业设计师的伴侣

某种意义上来说,Wocom 在业界的积淀和探索,奠定了新地系列的口碑。Wacom 在压感触摸和绘图上积累了大量的专利,并且最终落实到手绘板产品上,新地系列的数位屏就是技术积淀的结晶。

不过,就如同它名字所揭示的,新地系列的数位屏毕竟只是一块精准专业能够识别压感、便于绘画的屏幕,它依然要依托于既有的电脑,来承担系统和软件。新地系列的数位屏最小的13英寸,最大的32英寸,几乎可以满足各种不同设计师和插画师的需求。

所以,总体上数位屏的优缺点就很明显了:

优点:

缺点:

iPad :新晋的便携手绘神器

iPad Pro 和 Apple Pencil 设计,几乎是直指创意设计和手绘这样的使用场景。随着整条 iPad 产品线开始支持 Apple Pencil ,整条平板生产线都支持了 4096 级压感,碾压了绝大多数的入门级的手绘板。

而诸如 Procreate 这类针对手绘深入定制的 APP ,充分利用了 iPad 和 Apple Pencil 的功能特性,提供了丰富多样的功能。

另一方面,iPad 和 Apple Pencil 这样的组合毕竟没有 Wocom 这样长时间的积淀,在体验和细节的打磨上确有不足,专业性也不够强。但是 iPad 平台本身的灵活性却也不能忽略,更重要的是各大开发团队孜孜不倦地迭代升级,这无疑是一个比桌面端进化更快的体系。

所以 iPad + Apple Pencil 的组合,优缺点也非常显著:

优点:

缺点:

屏幕和分辨率

从目前来看,绝大多数的用户会选择入门款的 iPad、iPad Air,或者直接上性能最强的 iPad Pro 11 和 12.9 来搭配 Apple Pencil,而选择 iPad Pro 的用户更多会搭配 Apple Pencil 二代。

目前,虽然10~11寸的 iPad /iPad Pro 在便携性上更有优势,不过很多职业插画师和艺术家会更加倾向于选择 iPad Pro 12.9 和 Apple Pencil 二代的搭配方式,牺牲一点便携性,换取更大的绘图面积。

而 Wacom 新地系列数位屏,则还是延续了普通屏幕的分辨率体系,最小的 13.3 英寸的屏幕,采用的是 Full HD 显示,也就是我们常说的 1080 x 1920 这样的分辨率。往上还有15.6 英寸、21英寸、23英寸、32英寸等不同大小,而这些则采用的 4K 分辨率,也就是4096 × 2160。

iPad 平板不论是最小的 iPad Mini 、最便宜的入门款 iPad 2019 还是 iPad Pro 12.9 ,都已经是视网膜屏幕了。iPad mini 的分辨率是 2048×1536,最新的 iPad 2019 分辨率为 2160×1620,而12.9英寸的 iPad Pro 更是到了 2732 x 2048 级别的分辨率。可以说,在显示的细腻程度上,iPad 系列所带来的体验是相当高的。不过值得一提的是,iPad Pro 系列的屏幕有高达 120Hz 的刷新率,这使得显示和交互体验更加顺滑。

但是,为了追求更好的体验,iPad 会根据周围的环境来调整屏幕的色温,这会让很多用户觉得爽,但是对于创作者而言,这种变化会影响到绘图色彩的准确性。而 Wacom 的数位屏则不存在这个问题。

电池续航

iPad 系列更加适合随时随地的画画,是为随性的「游击式」创作而生的工具。Wacom 的新地数位屏则是阵地战中的高手,除开为便携而生的 13.3 英寸的那款,其他的数位屏均是用来在桌面上固定好的「阵地战」专用设备。

也正是因此,iPad 这样的独立设备不仅内置了电池,而且能够在充满电之后能够轻松达到10+小时的续航,iPad Pro 更是能够借助快充在1个半小时内,将电量充到 80%。

而 Wacom 新地系列的屏幕的「阵地战」定位使得它本身没有内置电池,它需要在使用的时候借助外接电源来使用。

为了弥补移动端创作的缺陷 Wacom 甚至开发了 MobileStudio Pro 系列,这个系列干脆是内置了一个完整的电脑模块进去,将数位屏和电脑结合到一起。这确实更加强大了,但是15.6 英寸的超大尺寸,2kg 的重量和大约3小时的续航,确实不够方便,和 iPad 没法比。

手绘笔的绘图手感

数字绘图的手感这件事情上,笔本身的握持感、笔和屏幕玻璃之间的接触摩擦力以及交互方式,是主要的影响因素。

由于 iPad 本身是作为多功能娱乐设备而存在,和手绘笔进行交互则是比较靠后才出现的功能,使用光滑的高强度玻璃,也是为了保持体验的一贯性。但是这也使得 iPad 和 Apple Pencil 的塑料笔头在交互的过程中,摩擦力不大,甚至可以说是非常滑的。

在这方面,Wacom 则有所不同。Wacom 的目标用户群体非常清晰,他们很清楚许多画手和用户是从纸质材质绘图开始的,所以他们采用了蚀刻玻璃来制作屏幕,即使使用塑料材质的笔头,在屏幕上绘制的时候,也会有非常适中的阻尼感,带来和纸面绘图相近的使用体验。

iPad 用户可以选择使用类纸质材质的磨砂保护膜来达到类似的效果,不过这种保护膜有一定机率在绘图过程中接触不良,这也是缺陷所在。

在笔上,Wacom Pro Pen 2 和苹果所提供的 Apple Pencil 确实是市面上最好的手绘板触控板之二,但是两者在实现原理和体验上,也有不小的差别。

手绘笔的比较

Wacom Pro Pen 2 和 Apple Pencil 基本上是市场上最好的电子手绘笔,两者在功能上非常相似,但是原理截然不同。Apple Pencil 是需要内置供电的主动式手绘笔,它是为了搭配iPad的电容屏幕来使用的。但是 Wacom Pro Pen 2 则没有内置电源,而 Wacom 新地系列的屏幕也并非是普通电容屏幕,而是另外一个独立的品类:电磁屏幕。

Wacom Pro Pen 2 本身的电磁场和电磁屏幕下的感应元件感应,精确地予以识别和反馈,再呈现在屏幕上。目前,Wacom Pro Pen 2 具有 8192 级别的压力敏感度,而苹果官方并没有公布 Apple pencil 的压感数据,但是根据民间测试,它的压感敏感度和 4096级的 Surface Pen 是同一水准,和 Wacom Pro Pen 2 相去不远。

最新一代的 Apple Pencil 在侧面内置了一个感应式的单键,简约,可设置,非常符合 iPad 的使用场景。而 Wacom Pro Pen 2 则和很多同类产品一样,内置了2个物理按键,顶部还有一个橡皮擦。这些同样也是可以进行后续设置的。

在交互的过程中,Wacom Pro Pen 2 悬停在数位屏上的时候,屏幕可以识别出笔的存在,并且会有光标显示笔的位置。但是 Apple Pencil 在悬停的时候,则不会出现类似的显示。

手感上,Wacom Pro Pen 2 会更接近我们日常所用的中性笔的握感,有一个贴合指度的人体工程学弧度,而 Apple Pencil 则更加接近于铅笔的握持体验,整体重量偏重一点。

APP 应用支持

不得不说的是,iPad 所属的 iOS/iPadOS 平台,和桌面端丰富、专业的各类设计软件相比,确实还比较弱。无论是基本的绘图软件 Photoshop,Corel Painter,Krita ,还是 Maya、C4D、3Ds Max 这类专业的建模工具,iPad 都无法企及。

但是另外一方面,绝大多数的桌面端软件是针对桌面端交互来设计的,在很多时候并非是针对触摸交互而创造的。从另一个角度上来看,iPad 的优势也正在这个地方。

在手绘这一基本功能上,iPad 上的 ProCreate 已经提供了相当完善、合理的功能,交互和效率上专门针对触摸屏进行优化。此外,Affinity Photo 的修图功能,Clip Studio Paint 也都各有千秋。当然,在3D 建模上,iPad 平台上的软件都比较原始,比如 Porger 这样的APP 还有很长的路要走。

使用延迟和效率体验

无路是 Wacom 还是苹果,在设计产品的时候,都在接近全力去提升性能,提升效率。但是,Wacom 新地数位屏定位本身就是一个电脑的延伸外设,实际的性能主要取决于电脑本身的性能,如果处理器不够快,出现使用延迟是非常自然的情况。

但是在这方面,iPad 系列产品基本上就不存在这方面的问题。目前绝大多数的 iPad 系列产品都已经用上了 A12 系列具有神经网络加持的高性能芯片了,从解锁到打开 APP ,整体效率其实比起臃肿庞大的桌面端应用,效率高了不止一星半点。

配件和外设

Wacom 的专业性在外设的选择上,体现得淋漓尽致。比如 Wacom Expresskey 遥控器,就可以帮助设计师自定义各种快捷功能,优化设计流程。而苹果并没有推出过类似的产品。

整体体验和便携性

虽然 Wacom 的数位屏是有触摸识别的,但是它作为一个电磁感应优先的屏幕,在很多时候并没有 iPad 这种触摸优先的屏幕来的灵敏快速。

iPad 和 Apple Pencil 最大限度地利用了触摸交互,以及 iOS/iPadOS 平台的本身的独占性,确保了体验的一致、合理和自恰,这一点比起力图兼顾桌面端的数位屏来的更加高效和合理。

在便携性上,就如同上文我所说道的,数位屏几乎是「被桌面束缚了灵魂」,想要移动着使用,几乎是不可能的,即便是可供携带的最小款,也相当的沉重。

但是重量控制得非常良好的 iPad 几乎不存在不好拿的问题,而使用磁力吸附的 iPad Pro 系列则让 Apple Pencil 的携带和收纳便捷到了极致。

所以,选择哪个更合理?

其实,讨论这么多,我们都很清楚两者各有优劣,并不存在一个非常确切的优劣,很大程度上,选择还是取决于你的需求。

如果你是一个浸淫数字设计领域多年,工作内容对特定的桌面端软件有高度的依赖性,并且需要借助数位屏来进行绘图创作的话,那么选购一款尺寸合适的桌面级的 Wacom 数位屏是对你工作最有助益的选项。

可是如果你希望在远离桌面的地方,一样可以进行灵活自由的创作,希望有一个高度便携、即开即用的手绘终端的话,iPad 可能是最好的选择,甚至好过多数的 Surface 系列的设备。

当然,更常见的一种情况是,你已经拥有 iPad 或者 iPad Pro了,甚至都已经买好了 Apple Pencil 2,但是它在日常生活中又仅仅只是拿来看片打游戏。你觉得不应该如此浪费,那么你唯一缺少的,可能是一门价格大概是 iPad Pro 价格 1% 的一门 iPad 插画入门系统课程:

桌面端访问可以直接戳链接获得:「零基础 iPad 手绘插画课(基础入门篇)」

Source: 优设网 – UISDC | 16 Sep 2019 | 4:51 pm(NZT)

实战案例!全面解析一张 IPPA 获奖照片的诞生过程

除了构图法和后期,我们还应该关注什么?

一个误导很多人的摄影学习公式

不好意思了我又要贴出 IPPA 获奖照片了。

△ 韩松 / 摄 iPhone5c,015年全球iPhone摄影大赛人物类金奖照片

如果我将这张照片代入一个公式,这张照片应该是:

​「鸽子与老人」= iPhone5c + 动静结合 + 中心对称式构图 + vsco方形裁图及滤镜10

据我观察,很大一部分朋友学摄影就是遵循着这样的公式:「好照片=好器材+好想法+好构图+好后期」。于是他们在自己搭建的框架下将每一个点通通学习一遍,甚至学得很深入,却发现并没有什么用。

问题出在哪?学习技术并没有错,只是他们忽视了将各个技术环节系统串接起来的过程。如果将摄影比作是产品生产的话,器材、构图、想法、后期等好比是设备、原料、包装等,而真正实现的是「一条好的生产线和优质的生产工艺」。这一部分是最细腻,最难以名状,同时是最带有鲜明的个人色彩,运气和天赋的。

这篇文章我试图以一张照片来粗浅破解一下「生产工艺」的问题。

那生产工艺是什么呢?以及为什么拍摄者要把上面的「公式」赋予那几个值,这才是拍照片,尤其是手机摄影的重点?

拍这张照片的前后发生了什么

1. 在什么情况下拍摄的?

在伊斯坦布尔的旅行中拍摄的。当时我在大街小巷散步,来到耶尼清真寺前的广场。当时贩卖鸽饲料的老人坐在远处的红房子里,近处的儿童跑过,惊起了鸽群,老人却非常淡然地看着眼前这一切的发生。

我觉得这个动静结合的场景十分有趣和美好,就把它拍了下来。

2. 花了多长时间拍摄?拍了多少张原片?

15 分钟,前后 50 张左右原片。

△ 韩松 / 摄 iPhone5c

一个场景的多种尝试,尝试不同的角度,等待鸽子合适的分布情况。

3. 这么多原片,都是同一个场景么?为什么选择这个场景?

基本是同一个场景,就是石墙前面的红房子。选择这个场景是因为我见到它的时候第一时间判断了它至少从视觉上是很美的──石墙衬托下鲜红的色彩对比,并且老人一直在发呆,和前面飞舞的鸽子形成鲜明的对比。

但是,这一个场景并不是死的,我还在离红房子不同距离和不同的距地拍摄高度进行了场景调整。所以原片里会见到单个红房子或几个红房子的排列,还有红房子后面窗户对应起来的场景,这些都是我对场景的斟酌。

当晚我就在手机上比较了白天的原片,选出了几张还比较满意的做了后期。至于最后投比赛那张,觉得那张是中心式构图,视觉语言还是最干净明快的。

△ 韩松 / 摄 iPhone5c, 选片1

场景有点调整,红房子比例比较小,上面的方窗子成为背景重要元素。主体可视作是下面的女人。

△ 韩松 / 摄 iPhone5c,选片2,

场景中地面比重比较多,主体应看作妇女和房子中老人的对比。不过头戴黑纱的女人和鸽子的分布有点冲突。

△ 韩松 / 摄 iPhone5c,场景3

场景和上一张类似,后期试试调成黑白。

4. 您是在试错,还是胸有成竹只是在等待时机?

大部分照片在拍摄前的观察期,脑海中就有大体完整但绝不教条的预设。这张照片,「红房子与后面墙壁的质感对比」就是一个相对固定的场景预设,而前面红房子、人物、鸽子的分布位置,比例,就是我的「斟酌」了。

但我不觉得这是盲目的试错,所有的斟酌还是基于一些有意无意的构图原理,形式美规律等。等待时机的部分,只有行人和鸽子的分布,这确实需要一点运气和敏锐地判断。

用手机做了什么

1. 有用到特别的手机操作吗?

很巧这张照片用到了 iPhone 摄影中最重要的几个隐藏功能。

锁定曝光/对焦:因为鸽子飞起来太混乱了,如果在按快门前不按住屏幕锁定焦点的话,很容易被 iPhone 自动识别着焦点到处跑,还影响快门响应速度。

曝光调节:锁定焦点后屏幕往下划了一点,降低了曝光。因为此时室外的光照条件不算好,减少曝光时间有利于稳定的拍摄。

连拍:鸽子飞起来很难捕捉,按住快门连拍有利于提高最后选片成功率。

2. 透露一下后期细节?

只用了 vsco。

之所以选那张的原片,是因为鸽子群的分布不算太乱,并且有一只大鸽子在前面,显得有重点。

△ 韩松 / 摄 iPhone5c,原片

裁图,裁切掉多余的、尴尬的部分。裁成方形,让画面变得饱满和具有中心性,因为周围还是有很多多余的元素。

滤镜,选的 10 号滤镜。在彩色、高对比度的滤镜范围内尝试。

调整:加了一点亮度和对比度,微调一下色温,让画面不显得那么脏和灰。

说实话我已经记不清楚很详尽的细节了,但对照片的分析和调色的目标肯定是没变的,所以我现在也能调出与当时很接近的照片。

3. 和原片对比我看你选出来的片很多有严重的裁切,这是否违背了摄影的原则?

我不知道摄影的「原则」是怎么定的,我只觉得不至于是欺骗观众,对画面的取舍和调整都是很正常的。裁切和调成黑白照片、多重曝光等都是一个道理。

至于为什么很多照片有裁切,这个跟手机有关系。手机镜头是定焦的,构图大多就需要靠腿前后跑或者后期裁切才能完成。我个人不是很喜欢用手机的电子变焦。

拍照是件全身心的事

1. 您自己觉得拍好这张照片最重要的点在哪?

其实现在看来这张照片确实「好看」,但不见得好。这还是属于摄影中的「通俗作品」。

我觉得吧,这张照片显而易见的「中心式构图」「颜色对比」「动静对比」都是马后炮了,任何人拿起手机都能拍一堆。现在一年以后我再回想起来,能有这张照片真正要诀,还是在于自己有能发现好素材的行动方式,以及有敏锐地对美的观察。

△ 韩松 / 摄 iPhone5c,就它了

2. 能简单说说您的拍摄行动方式和观察心得吗?

不知有没有人注意到,我前面说的是自己在「在大街小巷散步」,并在这个场景前拍了 15 分钟左右得到的。

「在大街小巷散步」是我最喜欢的旅游行动方式了。实际上我很多片子就是在这样的状态下拍的。这意味着,如果是匆匆地定点旅游的游客可能就没法有机会接触到这样的场景。

另外一个就是耐心。如果喜欢一个场景,为何不多尝试一下,多等待一下,多研究一下来拍呢?很多瞬间是靠机遇、等待和预判得来的。

我没有在拍摄前给自己非要定义一个流程,但这种流程自然而然就成了习惯。最近在葡萄牙拍摄的照片,也用了上面的流程。

△ 韩松 / 摄 iPhone7p

里斯本街头,尝试不同远近,不同人物分布,不同的比例。拍摄中我在等待,也在思考。

△ 韩松 / 摄 iPhone7p

最后得到了人物比例和形态都比较满意的一张。

3. 这种方法适合大家的旅行摄影么?

我不知你是不是又在套用「在大街小巷散步」和「耐心」了(笑)。但光就这两个方法而言,应该是适合大部分自助游的游客,尤其适用于节奏不快的深度游客。

我想说的是,一张照片构图和后期反倒是最简单的事情了,重要的还是拍摄的状态和观察、审美。拍照是件全身心的事情,不是「10条技巧」「20条法则」就能解决的。

但是,全身心享受旅行和生活,并让它们自然流露在照片中才最好。「10条技巧」「20条法则」,用一用就能熟练了,但真没必要套用。

总结

然而,我告诉你「iPhone5c + 动静结合 + 中心对称式构图 + vsco方形裁图及滤镜10」是没有用的,这只是照片形成后我告诉你的药方而已。

真正的成片工艺:

其中的想法、构图和后期,虽然很重要,但只是碎片化的一部分罢了。

如果你想和作者学摄影,只要有一个能拍照的手机(无论是 iPhone 还是安卓),能装上 Snapseed 和 VSCO (iOS 和安卓都有,后期只用这俩就够了),以及一门高效快速又干货满满的摄影课,就够了:

十个章节,不到 30 课时的快速课程,教给你摄影大赛冠军的摄影秘诀:

想要来一发?桌面端访问你可以戳这个链接:「iPhone 摄影大赛金奖得主:刷爆朋友圈的30堂手机摄影课」

手机访问直接扫描下面的二维码:

Source: 优设网 – UISDC | 16 Sep 2019 | 3:45 pm(NZT)

整整16年!书籍装帧设计大师王志弘经典作品盘点

@研习设K先生 :对于经常看书的我们,认识作者,认识译者是很平常的事情,却很少去了解书籍的另一位制作者──书籍设计师。如果说内容是一本书籍的灵魂,那优秀的装帧绝对是一本书的再生父母了。

看脸的时代,读者越发习惯用选美的眼光去挑选书籍,对于陈列在展架上的众多书籍,读者给予每本书的眼光可能只有 1 秒左右,如果没有精美且吸引人的装帧,就吸引不了读者的眼光。

人物梗概

知道王志弘的人都会觉得他是一位书籍设计师,他自己是非常喜欢书籍,可却不希望被定位为书籍设计师,但是他也不介意自己设计生涯的起落点都与书籍有关。作为台湾新生代设计师,专注于书籍装帧设计、排版设计,将中国台湾、中国、日本和西方文化元素融合在一起,形成自己独具一格的设计风格──古典与现代相结合。

△ 王志弘部分作品展示

在设计方面,他专注于字体设计,力求将文字元素与影像元素双方相平衡,达到一种秩序与平衡的境界。王志弘通过对现代版式的解构再创作,将自己的想法与中国文字,文化相结合再传播出去让更多人认识和了解。对中国文字的发展和传承起到促进的作用。

「外面很吵闹,我一个人独自在安静的屋子里。」

这是王志弘对自己描述。王志弘是个极为低调的人,极少公开讨论自己对设计的看法,理念等。他表示自己的表达能力不好,所以很少通过写作或者演讲的形式表达自己的观点,只好将自己的东西做好,通过网站等其他途径呈现给大众看。

书籍设计是整本设计

对于书籍设计,王志弘一直坚持整本书籍的设计,每一个细节都由负责的设计师一手包办,让阅读体验统一连贯,好比看一场电影从头到尾的享受过程,所以在 08 年时王志弘就向出版社提出一个崭新的合作模式,以设计师的身份去介入出版过程,从选书、推广文案到设计。

△ 王志弘部分作品展示

在借助出版社的资源和经验协助完成最接近理想的出版方式。至今为止,已经为读者们引入众多的设计师与艺术家的相关作品。例:荒木经惟、佐藤可士和、横尾忠则等等。这个合作计划的目的是为了给更多的读者们提供更多更好地选择,从而在此过程中与读者一同成长。

对设计的匠人之心

匠人之心,走自己的路。这一匠心,一方面表现在他的低调,无论名气多大,他始终谨守本分,公私不分、日以继夜,沉浸在自己的世界里。另一方面,与王志弘合作过的出版社都知道他特别难搞,不接受改稿、不允许这边高一点、书名小些、留白太多等等琐碎意见。

早在王志弘出道时他就这样做了,自然这种「不容调整,不肯妥协」的做法也让他吃了不少苦头,但也是如此一路走来,始终如一,完成出来的作品也备受业界好评,无形中提升了台湾装帧设计者的地位。

△ 王志弘家中部分场景

王志弘除了性格内敛外,同时也是个超级宅男工作狂,他的家就是他工作的地方。每天公私不分,除了睡觉、吃饭,其他时间都在工作。据说连新年也不休息,是个彻头彻尾的工作狂。

获得奖项

是个极为低调的设计师,参与赛事不多。

人物详情

1975 年生于台北,1995 年富兴商工广告设计科毕业,2000 年成立个人工作室,并先后于 2008 年、2012 年与出版社合作,自创 INSIGHT、SOURCE 书系,以设计、艺术为主题,引介如佐藤可士和、荒木经惟、原研哉、草间弥生、横尾忠则等人之著作。2015 年入选为 AGI 会员(国际平面设计联盟)。

△ 富兴商工校内场景

王志弘出生于 1975 年,成长于相对宽容的 80、90 年代,1995 年从私立复兴高级商工职业学校毕业。服完兵役出社会时,电脑时代已经来临,他是第一批使用电脑设备的设计师,电脑设备让他工作时轻易跨越了前辈难以解决的问题,工具的便利让他的工作达到了快、稳、准,网络的便捷使大量的信息呈现在他眼前,扩大他的见识,可以与国内外作品相接触,搜索即得,用心观摩,视野广阔达到了前辈无从拥有的广度。

虽然搭上了电脑时代的第一班车,但是后面的路却没有想象中那么好走。那时候的他为了进入主流出版领域,去接触更多他感兴趣的书籍,电影、音乐、建筑等,因此他寄出自己的简历给三十多家出版社,只有一家出版社回复了电话,不过最后也是不了了之。显然无论是谁都躲不过艰辛的成长期。

好在「水晶唱片」的任将达联系他,随后合作了几期水晶唱片的封套设计。后来王志弘曾在诚品书店《家饰》短期任职,任职期间有幸认识到建筑圈的阮庆岳先生。在离开《家饰》杂志后,阮庆岳询问他是否能接下他即将要出版的《阮庆岳四色书》。

《阮庆岳四色书》的设计工作,是两人首度合作的作品,也成了王志弘进入主流出版圈的重要关键之一。另一个关键则是任将达将王志弘介绍给何颖怡,为他设计《迷幻異域》后进入城邦出版集团,从而拥有了更多的机会,事业也逐步上升,直到今天。

作品解析

1. 《阮庆岳四色书》(2001)

这本书是王志弘成长至今的关键之一,王志弘自述那时候的他手上没有任何的案子,接到阮庆岳先生的来电,请他设计,抱着做完这本就回去上班的心态做完了这本书。首先他从文字入手,从书中搜线索,寻找书中表达的含义。

因为书中分为四个部分:身体、戏剧、建筑、文学,从四方,四角再到四等分,整个版面和内容都是围绕着「四」做规划。通过这次案子,王志弘获得丰富的经验,让他第一次懂得在设计中运用自己熟悉的设计方式,传达书中的含义。那时候因为台湾极少有这样的设计风格,许多人对王志弘留下了深刻的印象。

2. 《屋顶上的石斛兰》(2003)

这本是王志弘与阮庆岳的第二次合作,此书内容是阮庆岳与谢英俊两人的书信过程。将两个人英文名的首字母「H」和「R」作为代号,针对两人书信往返过程,然后以小写字母来代表聆听,「r」是阮庆岳在聆听,大写「R」表示阮庆岳在发言。以大小写来表示二人的书信的来往前后关系。

从这时候就已经能从作品中看出王志弘独有的 Typography 风格了。

3. 《不如去流浪》(2006)

此书是为了纪念出版社两周年的纪念作品,当时自转星球出版社只有一个人,社长很懂得与设计师打交道,他不限制王志弘的工作方式,在两人相互探讨合作,配合下完成,作品以最真实包装做概念,全书只有 0.6kg。让该形式去贴合本书的内容,让没有实际参与的读者,拥有一种代入感。

4. 《反叛的凝视》(2007)

看到这个的时候是不是以为王志弘在吸烟时,不小心把烟灰掉书上造成的。其实不是这样的,这个封面的想法可以说我们每个人都想过,也都实验过。

从书名开始解构,凝视:代表一种意识的集中,可以是个人也可以是群众,是将巨大,分散的力量聚焦于一个点上。王志弘以小学实验为概念入手,利用放大镜将太阳光的热量集中在纸上的一点,当热量足够时纸就会燃烧起来,非常符合凝视的意思,同时他还充满着热度,因为反叛通常需要极大的勇气和热情。

5. 《银色的月亮》(2008)

《银色的月亮》是建筑师王大閎的散文作品,以月亮为主题来命名,在设计时对书籍的空间布置上做了重新的思考,认为书籍封面不应该是一个向内包裹的空间,而应该是一个向外翻转的裸露空间。在此概念下,想要呈现一个完整的宇宙空间,就要将书籍的色彩统一,以全黑的色彩做主色,代表黑暗的太空。月球以烫银表现,下方对立着一个同样尺寸的黑色烫金圆型,来让月球产生悬浮的作用。

6. 《流水账》(2009)

王志弘以流水账为概念将其具象化,将流水账写在纸上,趁他没干之前用水冲洗掉部分字迹,形成文字经过流水的冲洗剥落的效果。既要考虑文字的辨析度,同时还要兼顾美感,在制作的过程中这一步也是很难把握的。

7. 《荒木经惟写真的话》(2009)

这是荒木经惟首次在台湾出版的写真集,那时候的荒木经惟在台湾就具有极高的知名度和人气。写真集书封的思路源自王志弘对荒木经惟的印象:「不正经的正经」。

王志弘从荒木经惟的名字入手,将他的名字「ARAKI」翻转,每个字母都翻转了 45°,从 A 到 I 结束看样子是回到了正确的方向,实则不然,I 实际上是完全翻转的,这个翻转的印象代表着王志弘对荒木经惟的印象。

8. 《为什么设计-原研哉与阿部雅世的对话》(2009)

该书内容是以原研哉和阿部雅世的对话,两人分隔两地,一位在日本,一位在柏林,居住在两个不同城市的设计者进行的一场对话。

王志弘以一个空心圆为底,中间是一条反向 45° 的斜线,斜线的两端一边指着东京,一边指着柏林,空心圆的符号代表着跨越东西方文化的象征,而符号周围,则围绕着两人的对话。同时将两个设计师的相片改为网络头像尺寸,置放与封面上,也代表着生活在大数据时代,地理位置不再是限制交流的难题,同时也象征着两人的互动。

9. 《青春》(2010)

《青春》是韩寒因为当时富士康员工多次跳楼的事件,有感于现今年轻人对生命的不重视,和生活上可悲之事所写的一篇博文。本书的宣传文案「本该在心中的热血,他涂在地上」,也是王志弘想要突出的重点,他认为心中的热血就应该是无声,膨胀,溢出的,而「他涂在地上」也代表着死亡。

王志弘将书指作人,在书口上方绘制了象征血液的液体图案,并用烫红色箔进行加工,加强色彩的反射效果,将液体图案安置于物体边缘处,表示着热血从内而外溢出的用意。血液滴落的意思不言而喻即可明白。

10. 《直到路的尽头》(2010)

该书作者一个人骑着自行车,从西安出发横穿欧亚大陆,骑向陆地的尽头葡萄牙罗卡角,通过这样的旅行去思考生命的意义。王志弘将作者旅行时的笔记,票据,友人的告白等所有旅行所留下来的东西整合在一起,设计成一本拥有众多真实物品所构成的作品,让读者在阅读时有身临其境般的感觉,一起去经历他所经历过的。

11. 《安迪·霍尔的普普人生》(2010)

安迪·霍尔的作品常常和生活中的商品有着直接关系,我们随手可得的物品到他手里都能成为颠覆我们认识的艺术品。在设计这本书的时候就决定从他的包装上入手,书籍本来就是商品,通过包装来让它更加商品化。

在材质上选择了瓦楞纸做书盒,并且将书盒设计成其他商品样式,让人觉得他是某种食品或者其他生活用品。瓦楞盒作为典型资本主义生产方式的包装材质,将其作为包装物料,有便于将大众普遍对商品的认知,传递给读者。书的反面让商品的标签不断重复,把安迪·霍尔被自身所创造的商品淹没,表示着安迪自身的强大影响力和波普艺术的核心概念。

12. 《无限的网:草间弥生自传》(2011)

本书作为草间弥生第一本自传,叙述了她充满传奇的艺术生涯。王志弘以一个普通平面设计师的角度去切入,圆点又代表着什么、在过往的生活,工作中,又是如何去接触这些圆点?他从自己的经历与经验中去寻找人跟圆点的关系。

后来他在印刷工艺中找到了答案,印刷中的网,既是网,也是点,并且隐藏在他所有的作品之中。这是他与草间弥生之间的一种联系。他表示对于设计思路、想法,除了要围绕主题,主角之外,也要考虑双方之间存在的某种联系,只要寻找到这一点,就能从特殊的角度去贴近对方的核心理念。

13. 《第六病房》(2011)

小说《第六病房》曾被称为整个俄国文学中「最可怕的小说」,小说中的第六病房是监禁精神病患者的特别病房,故事就发生在这个遗世但不独立的空间。

王志弘通过凸显这个被遗忘的空间,让他显得异常重要。利用特殊的纸张与独特的印刷工艺,让介于 5 和 7 之间的 6 不那么明显。代表第六病房的「6」几乎消失,却又留下痕迹。白色的封面除了让人感觉到平静之外,还能带来一种诡异的紧张感。

14. 《时代之眼》摄影集(2011)

时代,在设计中是一个不好表现的主题。它的氛围性广、包容性强、内容主题多样。但王志弘认为:唯独时间是无所不在,它随时都在积累,只要能抓住时间感,就能与时代这个主题对接。对于王志弘来说,他常年与纸打交道,想在纸上表现出时间的痕迹,是很容易的事,破损的碎纸,泛黄堆积的旧纸,这些都是充满时间感的表现。

只要适度地模拟出这样的视觉与触感,并将其运用在封面上给予人们一种饱经风霜的时代感。在制作工艺上,通过利用镭射去雕刻纸片,让其边缘呈现不规则的破损轮廓,在经过人工手撕边缘的护封包裹。让读者翻阅时对这些特殊加工的部分,产生一种珍惜感。

15. 《幽谈》(2012)

《幽谈》是王志弘第一次设计的怪谈类小说,也是独步文化全新系列「恠」的第一本,当时除了设计书封外,还负责设计该书系的 logo。王志弘希望能够避开以往,恐怖、怪谈类的小说给人带来的那种明显的恐怖和诡异的视觉氛围,以一种不一样的方式改变,让读者对怪谈类小说产生一种不同的印象。他表示鬼怪对于他来说是一种很原始欲望的想象,通过设计标准字来传达这种非科学能验证的力量,感受一种「既现代又原始」的氛围。

几何图形除了本身自带的现代性外,同时也能够表现出一种原始感,现代性来自几何线条的非自然表现,比如正方形、三角形等等,「原始感」同样也来自于他的形状,简单的形式就如同一种象形文字。

16. 《冥谈》(2012)

「冥」字自有黑暗的意思,光明出现即藏之,反之光明藏之即出现,两者即有一种互相转换的意思。而本身的含义自有昏暗、黑夜等意思,将文字所表示的含义延伸思考之后,决定从「影子」入手做为《冥谈》的设计概念。

利用「斜投影」的手法营造出一个几何空间,而投影本身就包含了明与暗的概念。「冥」和「谈」二字,在这种形式上形成了一种互为表里的关系,既如「冥」在暗,「谈」在明的意味。因此在几何图形的设计上,另两者产生了一种特殊的前后关系。在观看图形时读者无法明确地说出谁在谁前面,这取决于读者的个人判断,就像一枚银币的正反面一样。所有的事物都是「一体两面」的关系,恐怖小说中所谓的「另一个世界」和我们真实生活的世界或许就存在着这样的关系。

17. 《开门见山色》(2013)

《开门见山色》是阮庆岳所著,该书两次出版都是由王志弘经手。初版发售于 2005 年,与新版差距有八年之久。面对相同的主题和内容,现在再经手已经是完全不一样的理解了。我想无论是谁,同样的命题在不同的时间段都会产出不一样的设计。2005 年时的王志弘设计该书封的时候,需要依靠大量信息在封面上进行编排设计。再看 2013 年这版时,王志弘已经有更多的自信去控制好一个版面,不需要依靠大量的文案信息,也能从中找到可发挥的地方。

「开门见山色」本就是一句颇具中国禅意的话,字面上它包含了动作与景观的含义,若尝试用影像元素表现的话,会让本身所具有的禅意深度流失,且容易与世面上的作品相似变得世俗。好在中文字本身就是一种历史文化的体现,王志弘在文字的笔画、偏旁部首之间寻得灵感,让设计融入字形与字意之中。

18. 《模仿犯》(2013)

小说《模仿犯》描述的是一个社会事件,既然是社会问题,所以犯人就不止是一、两个人。王志弘把设计的重点放在文字上,并且试图传达出这样的一个概念,通过文字的重复,复制来突显出这是一个群体的社会问题。封面上横竖不断重复的「模仿犯」,无论是横向还是斜角都能圈选出「模仿犯」三个字,被圈选的文字就如同在群体之中被捕获般,而圈选后的图案又呈现出猫脸的形状。同时也表达出一种 Copy Cat 的意思。(Copy Cat可以翻译复制猫的意思,又可翻译成盲目模仿者。在社会事件群体中,多数人只是盲目的跟随不明事理的。)

19. 《鄰人的犯罪》(2014)

王志弘将鄰人的「人」做为这次设计的重点,「人」字在这里指的是可疑的、不明确的。通过特殊的制作工艺将「人」字的能见度降低,使它的存在感减少。而鄰字在字意中又有着复数、相邻等空间关系。

因此在书封左下角绘制了两个屋型剪影。小说《鄰人的犯罪》与以往的犯罪推理小说不同,其中故事并没有一点流血,死亡的身影,甚至其中许多桥段令人发笑,虽然书封使用了大量的黑色做主色调,但由于纸质本身的颜色原因,使得印刷后色彩带有一些暖色调,同时在文字上进行了加工,使得文字的字感偏圆润,让人感觉到轻松的氛围。

20. 《你是人间的四月天》(2014)

往往我们在设计一个产品时也会去调查同行业,同类型的产品是怎样的设计,即便是王志弘也不例外。在设计开始之前,他先去调查了市面上以往的林徽因作品,几乎全是从传统的角度入手设计书法,这种表现形式我们已经看太多了。

他希望能有一个完全不同以往的设计,强调年轻、现代、设计感,同时能让女性所特有的气质隐喻其中。林徽因除了是诗人外还是一位建筑师,以往过去出版的设计少有从建筑这个角度入手。

书名《你是人间的四月天》中的「四月天」让人感受最为明显,他是一年当中的某个时节,而书中的诗句又是充满对季节的描述。因此从书中提取了六个关键的元素,将他提炼成关键的符号,搭配上经过设计而充满图形感的「四月天」三字,在将他们置入网格之中去规范。使呈现出来的产品既充满诗情画意,又有合乎情理的理性逻辑。

21. 《繁华落尽的黄金时代》(2014)

本书描述的时间点,锁定在第一次世界大战的前一年。1913 年,作者将这关键转折的年代给记录下来,并以月份作为章节做区分,统一将欧洲的几个重要城市用名人轶事给串联起来。王志弘认为此书结构明确且有它的独特之处,而时间本身就是该书的重要元素,必须将它妥善运用在封面上。

以时间为设计核心,表现出时间中「风起云涌」的变化。将书中内容的主要架构「月份」陈列在封面上形成一个画面,并且在月份的底下置入一层云雾,来表现时间低下暗藏的变化。在选材上选用了深蓝色珠光质感的欧洲美术字,搭配白色与金色的 UV 印刷,让书籍呈现出特有的繁华感,起到点题作用。封面在用色上刻意选用偏暗沉的色调,映射着繁华最后还是走到了尽头。

22. 《枕草子》(2015)

《枕草子》是一千年前平安时代女作家清少纳言的著作,内容描述的是对于日常生活的观察与想法,取材氛围极广,自然、四季、宫中生活琐事等等,从中也能看出作者本人的一些品味喜好。通过搜索到的资料,王志弘得出这样的概念:「枕草子」是由无数个极其琐碎的「点」集结构成,同时也是通过这些「细微」才能渗透入人们的感官之中。为了表达琐碎的「点」,制作出了大量大小不一的圆点,渗透于封面两端「枕草子」之间,而这些圆点对于「枕草子」三个字而言是双向的。圆点向右散发是思想的凝聚形成力量散播的表现。

23. 《浮世澡堂》(2015)

澡堂里面充满了漂浮的蒸汽和沐浴人们的汗味,除了使用图片表现外,王志弘还对文字进行了设计,他通过观察书名发现书名中的「浮」与「澡」两个字皆为三点水偏旁,王志弘以这一点为发力点,舍弃原有的部首,使用烫金加工处理成水流,蒸汽的形状,让文字结构产生有趣的变化。除了改变字形外,还在字的笔画中加上了一些装饰物,这些装饰物代表着泡澡人们身上残留的汗味。改变后的文字除了容易让人产生联想外,还使文字充满了温度感。

24. 《教父》(2015)

《教父》是 70 年代初的美国黑帮电影,而英文电影片名「The Godfather」的标准字设计是从《教父1》到《教父3》都一直延用,早已在人们心中留下深刻的印象,对此设计中文版的《教父》小说时,首先要面对的就是这个广为人知的标准字。

「The Godfather」在中文版本封面上势必会出现,那是最容易让人辨认的部分,决不能舍弃,而中文「教父」二字若无法延续这种特征,也将无法传递出相同经典的感受。

25. 《黄昏的故事》(2016)

书名《黄昏的故事》具有浓浓的怀旧感,对于不熟悉书中内容的人,通过名字也能自然地将文字与自身过去的记忆融合。纵观平面设计,在过去年代里的特征,去回顾捕捉过去小说所具有的时代感,比如街道上的看板用字,用色以及各式各样的出版物的特征,都可以用来当作表现手法来点明这个主题。

在过去没有电脑的情况下,平面设计的印刷、装订精确度不如现在,所产出的印刷品往往都会有些失误,那些错误放到此时此刻来看却有一番风味。因此《黄昏的故事》封面上有些细节是故意的安排,粗糙、重影都是现在的时代极少会有的。回想往昔,曾经持于手中的劣质印刷物,杂货铺架上的各式物品包装,都可能成为情感的触发物,而触发物往往都具有错版、色差、位移、扁字等等,这些特征是微小细微却又不可或缺的部分,他们的突然出现,总是能将你拉回某个年代,回想起当时的往往。

如果还想了解更多王志弘的作品可查阅官网。官网指路:http://wangzhihong.com/Project

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

Source: 优设网 – UISDC | 16 Sep 2019 | 4:49 am(NZT)

壹周速读:布尔运算/简历包装/建模设计/用户增长

壹周速读,每周一早上更新!

苹果 | 一篇文章看完这场9月新品发布会的亮点

苹果的9月发布会结束了。已经发布的产品毫不意外,相反还没发布的Mac 和 Airpower 大家发一直心心念念。而发布会以外的「讨论」比发布会本身精彩得多,而这些纠结和讨论更多是集中在iPhone 11 系列的后置镜头「浴霸」的设计上,不过在我看来,吐槽完了多数人依然会选择购买:

《快速汇总!2019年苹果秋季发布会看点》

安卓 | 最新的Android 10系统有哪些看点?

安卓这个操作系统进入了第十个年头,系统命名也回归了更具有辨识度的数字命名 Android 10 。而在这一个版本中,最初的三键和触屏点击式的交互彻底切换到多年前就规划使用的纯手势交互,除此之外,它还有很多新的改进。如果你想了解一下移动端操作系统的下一步会怎么变化,不要错过这篇文章:

《关于刚刚发布的 Android10,你必须知道这 6 大改进》

增长 | 爱彼迎的用户高速增长是怎么做到的?

也许你对于 AARRR 模型印象并不深刻,但是你肯定听说过「增长黑客」这种设计策略。全球最大的短租平台Airbnb 就是这套设计策略的受益者,即使是在最难的开始阶段,他们也借助这套方案让各方面数据得到了超过100倍的增长。Airbnb 是怎么玩儿的?这篇文章为你揭秘:

《如何应用AARRR策略成为全球第一大民宿平台?来看这份全面分析!》

改版 | 极简+深色模式这种流行设计,腾讯是怎么做的?

值得一提的是,简化和深色模式是今年各大厂商都在跟的两个趋势,从 Facebook 到 Twitter,国内的主流产品也均在跟随这一趋势来规划自家的产品。腾讯 QQ当然也没有落于人后,那么他们最新的 极简模式和夜间模式,在构思和细节的打理上有哪些独到的地方?戳下文:

《腾讯案例复盘!QQ 的极简与夜间模式设计过程总结!》

神器 | 帮你彻底搞懂「布尔运算」的神器网站

用了这么多年 PS 和 AI,你对于「布尔运算」真的熟嘛?小编山楂这就给你们推荐一个新网站,The Boolean Game,让你在游戏中掌握布尔运算的精髓!这款工具相当好玩:

《边玩边学!帮你轻松掌握布尔运算的游戏网站!》

求职 | 手把手教你实用的简历包装技巧!

作品包装对于想要寻求更好工作的设计师而言,是必修课。在上一篇文章当中,SA九五二七着重阐述了版心率和留白的控制,在作品包装中的作用,而第二篇文章中,他更深入地教你使用格式塔原理和信息分组的技巧来进一步优化:

《提高求职成功率!从零开始学作品包装(二)》

字体 | 汉仪官方推荐的中秋字体包!

这是来自汉仪字库的中秋福利,一组适合中秋主题的超强字体合集包!来看看这组字体是不是合你的口味吧:

《中秋节用哪些字体?收下这份官方推荐字体包!(非商用)》

方法 | 设计师对于设计方法论,到底要持什么样的态度?

你会发现,如今的设计圈当中,人人都讲方法论,似乎不懂几个像样的方法论,或者自己不「发明」几个方法论,都不能存活了。这种奇怪的现象到底要怎么看待?什么是「真正」的设计方法论?怎样才能输出「真正」的设计方法论?这篇文章,给你答案:

《熟读设计方法论,是否就能成为高级设计师?》

版式 | 从信息梳理到版式输出,设计师怎么处理最高效?

在实际设计的时候,客户和上游所提供的各种乱糟糟的文本内容,最终要转化为清晰明确的设计,需要设计师花费大气力来做版式规划。于是有了 K先生的这篇文章,你会从中学会如何快速整理文案,确定优先级,然后快速规划排版,非常给力:

《如何用一篇文章,帮新手快速入门版式规划?》

产品 | 风口浪尖的社交产品「绿洲」的设计细节

在新晋设计APP 绿洲的头上,标签很多。你肯定也听过它很多不同的称谓,比如中国版ins、意图称霸图片社交的新产品、趁小红书下架抢占用户的APP,等等,层出不穷。它身上的光环和争议都不少,从一个设计师的角度,来看看绿洲这款产品有什么不同:

《风靡社交圈的产品「绿洲」,有哪些值得关注的设计细节?》

干货 | 3D建模神器 MagicaVoxel 实用教程合集

建模这件事情说难也难,说简单也简单。也许你曾经听说过 MagicaVoxel 这款超棒的体素建模软件,也许你曾经尝试过但是中途放弃了,这回不用担心,我们带着超多学习参考资料来了,从建模到渲染,哪个不会点哪里:

《想学最好上手的3D建模软件MagicaVoxel?这里有超多教程!》

B端 | 这个做B端设计的超实用的乐高设计法,有什么独到之处?

随着互联网常规 C 端业务逐渐由蓝海转为红海,易变现的业务类型渐趋稳定,所以越来越多的设计师开始深耕 B 端设计。虽然 B 端设计依然是蓝海,但是以往的有些设计方法已经不再适用了。所以,网易UEDC 设计师卢小飞的这篇文章,就是针对这个问题,给你他的答案:

《如何做好B端产品设计?网易设计师总结了这个乐高设计法!》

图标 | 线性图标的设计过程中,有哪些坑需要规避的?

最基础的线性图标说起来并不难,但是要做好并不容易。细节处理的精准与否,将会直接影响到设计的实际效果,这中间有太多的坑,会让你的设计效果不够好。设计师 潘团子 专门梳理了自己在设计过程中踩过的坑,让你绘制线性图标的时候,少走弯路:

《想绘制线性图标,这里有 6 个前辈为你踩过的坑》

Source: 优设网 – UISDC | 16 Sep 2019 | 2:23 am(NZT)

历时2个月,整理了这篇动效落地输出指南!

针对动效输出的选择变得越来越多,然而作为设计师仅仅对动效输出有所了解,往往产出的结果还是不尽如人意。了解动效落地背后的原理,可以帮助我们在设计的前期阶段,就了解应该如何做设计才能更容易的对接和落地。

随着技术革新,用户对于产品细节的感知度和挑剔程度正在日益剧增,越来越多的产品都在尝试通过不同的手段来打造产品的差异化,而动效设计作为近年来大火的设计趋势之一也被越来越多的产品所青睐。动效日渐从「锦上添花」慢慢变成「必不可少」的优秀产品的构成元素。但是当我们去观察身边很多的线上产品,对于动效落地把控的现实结果往往并不尽如人意,很多优秀的概念在想法阶段到最终落地几乎被打磨得体无完肤。以往的经验告诉我们,可以通过简单的方式输出我们的设计作品,并且加以跟进就可以使线上的结果达到很高的完成度。但是当我们面临动效输出的时候会发现,输出的选择在日渐变多,但是输出的结果还是很难达到理想的状态。

目前市面上针对动效的输出与落地主要还是围绕着基础的几种输出方式,输出方式的选择就困扰着很多的设计师,而作为设计师我们要做的不仅是了解在什么情境下应该选择什么样的输出方式,更应该了解这些流程化的输出方式的原理,以及围绕这些原理我们可以在整个产品的设计流程中能做到的更多的事情。

产品中的动效分类

在了解动效落地方式的选择之前,我们需要明白的第一件事是互联网产品当中的动效分类与一般意义上的动效有很大的区别。广义的我们把 UI 动效分为三类。

1. 情感化动效

情感化动效偏向于感性的层面,主要目的是增加我们产品的气质和传达情绪,增加产品的魅力值,在一些小的细节上我们加入一些情感化的元素也可以以彩蛋的形式给用户惊喜。比较常见的有 app 中的 loading 动画,点赞动画等。

2. 交互动效

产品流程、交互行为的串联,不论可实际操作的交互原型,还是纯做 demo 展示的动效过场都可以算作交互动效设计。交互动效最基础的形态就是原型流程图的串联交互稿。交互动效又可以细分为转场动效和微交互,分别应用于页面衔接和基础组件的交互反馈。前者可以传达给用户产品的层次结构和空间关系,后者可以使用户减少操作成本。

3. 复合型动效

复合型动效不局限于感性层面的情绪传达,也不局限于交互行为的串联,往往真实场景当中更多的也是这一类动效,在与开发人员对接阶段也更容易存在各种各样的不稳定因素,对于设计师而言也存在更多层面的挑战性。

影响输出方式的因素

情感化动效一般情况下会受到三个方面的属性影响他的输出选择,分别是尺寸、时间、动画复杂度。

1. 动画尺寸

动画尺寸越大,占用系统空间越大,占用的系统性能也越大,但是这个等式仅仅成立于我们常见的一些所见即所得的格式上,例如 gif/视频/webp/apng 等。

类似这样的一些格式,是我们的设备所能接受的最简单最直白的格式。他产出一个动画的逻辑,一般都是不同的静态图像的堆栈,通过给定的次序和时间逐个播放。这里的每一个静态构成图,尺寸越大,整个动画的占用内存相应的也就越大。但是产品包的容量始终有限,不能允许太大内存的动效存在。

另一方面,大尺寸的静态图在预览过程中也需要耗费更多的设备计算。举一个很简单的例子,当我们在电脑上预览一张 800*600 的图和一张 2400*1800 的图,电脑打开它所需要的时间是不同的。相应的,动画格式多个大尺寸静态图做预览时耗费的系统性能是成倍数增长的。

2. 动画时长

影响原因与尺寸的影响原因类似,当图片堆栈的时间变长时,堆栈当中的图片数量也会增加,动画的占用内存相应的也就变得更大。所以,当我们的动画时间过长时也不适合使用这些所见即所得的格式类型。

需要注意的一点是,动画的时长对性能的影响会相对的小很多。

3. 动画复杂度

动画复杂度对在以上提到的输出格式当中不存在任何问题,更多的是在近几年比较时髦的输出工具上出现问题。对于复杂动画,我们要尽可能选择输出所见即所得的格式。当选择了其他的格式时也要尽可能的减少动画的复杂度,保留重点,去掉冗杂的细节。

情感化动效输出选择

一般情况下我们会根据动效的类型把输出方式分为两类:

所谓「所见即所得」就是输出之后即可预览的格式,比如 GIF 图/视频这种的格式,也是动效输出最基础的格式。

1. GIF图格式

GIF 图格式,可谓是作为设计师接触得最多的动态格式了,GIF 格式自 1987 年由 CompuServe 公司引入后,因其体积小而成像相对清晰,特别适合于初期慢速的互联网,而从此大受欢迎。因为时代背景使得他有非常强的兼容性,基本上可以在目前大多数的智能设备上直接预览。不论动效落地还是在各个平台上的兼容性也都是非常优秀的,尤其在一些设计平台上,也是选择最多的概念展示格式之一。也因为他在不同平台设备之间的兼容,他的传播性也是非常强的。

当然除了他自身所带的这么多优点之外,GIF 格式也因为他的应用年代技术限制,会有很多其他的缺陷。前面提到的很多优点往往也是因为诞生早给他自身带来的福利,他会有很多不可逆的问题。=第一点是对电脑的内存和性能占用非常大(根据 GIF 的时间尺寸等情况会有不同程度的影响)。第二点他是一个有损的文件格式,不论是色彩还是画面质感都会有一定程度的压缩。第三点是对透明通道的支持非常有限,输出结果会非常差,时常会有锯齿或白边的情况。以上是我们在输出 GIF 格式之前,需要提前思考是否可以接受的问题。

另外输出 GIF 图的过程也经常困扰着很多的设计师,我也为此录制了一篇关于 GIF 输出的经验分享:

常规的 GIF 输出(After effects)会有三种选择。

第一种:首先 AE 输出视频格式,然后通过 PS 输出 GIF 格式。这种方式是目前市面上最常见的输出方式,内存占用一般,输出质量一般。

第二种:在原有的基础上做部分优化,首先 AE 输出序列帧格式,然后通过 PS 选择针对图片的优化方式输出。这是目前为止所有输出方式中,内存最小、失真最低的方式。内存占用低,输出质量高。但是存在问题是无法输出 500fps 以上的动画(PhotoShop自身限制)。

第三种:直接通过 GIF Brewery3 输出。内存占用一般,输出质量低。一般是针对前两种方式无法输出时的选择, 优点是比较稳定,基本不会出现任何问题。

下图为不同输出方式输出结果对比:

另外还有第四种选择是通过 AE 插件 GIFGUN 直接导出,GIFGUN 插件是一个非常方便、操作简单的插件,但是这里不推荐使用的原因是 GIFGUN 有一个限制只能输出低的 30FPS 的动画,很多时候输出的结果会存在掉帧的情况。

EZGIF 压缩 GIF 图,当我们输出 GIF 图,内存无法达到理想大小时可以使用 https://ezgif.com 来压缩。

2. 视频格式

视频格式在大多数的产品上也都可以直接兼容,相比 GIF 格式他的内存在一些派生出的制式下可以更小,我们的智能设备也可以在更小的系统性能下读取视频格式。他的问题是对透明通道的支持很差,并且他也是一种有损的输出格式。所以在动画输出时我们也会尽可能地减少对视频格式的使用。

Handbrake

我们可以通过 Handbrake 软件来直接压缩视频格式,可以保证我们在输出视频格式时以最低的内存占用来呈现。

3. APNG/WEBP

前面提到的两种格式是我们所接触最古老,也最不容易出错的两种格式,但是随着技术进步这些格式很显然已经无法满足我们现在的动效。针对情感化动效我们也衍生出了很多新的格式,像 APNG、WEBP 之类的格式。这些格式是基于我们现有的像 JPEG、PNG、GIF 格式所衍生出来的。

APNG 格式是 Mozilla 代码社区出来的一个格式,是对 png 位图格式的动画扩展,但是目前还没有得到 png 格式官方的认可,他在目前主流的所有浏览器上都可以完美支持,在移动的设备上通过一些代码框架也可以完美支持,他相比 GIF 支持的色彩范围更广,更清晰,并且占用更低的内存,支持透明通道,有非常多的优势。

WEBP 是由 Google 推出,他目前也基本兼容所有的主流浏览器,相同的效果,webp 格式要比 png 格式小出来大概一半的大小,同时他也兼容所有的安卓设备,像一些 iOS 设备需要通过一定的方式才可以支持,不过相比来说各方面的表现都是非常优秀的。

这里推荐一款工具 iSparta ,这款工具可以帮助我们导出 APNG、WEBP 格式,也可以帮助我们导出带有透明通道的 GIF,但是以我的经验来说导出 GIF 并不是很理想。像这两种格式我们可以根据我们的设备不同,分开导出,可以在保证我们内容质量不被压缩的情况下保证更小的体积和性能占用。这些格式我们也可以直接拖到浏览器当中查看。

这种新型的格式虽然可以弥补 GIF 或视频带来的负面影响,但是他们本身也面临的问题是硬件需要各种辅助支持才能使用,很多时候在开发环节就不能很好的支持,这种时候就需要我们引出另一种格式──序列帧/精灵图。

4. 序列帧/精灵图

序列帧

在客户端上,我们可以把我们的动画导出单独的图层序列输出,并且可以通过一些工具来压缩单独的图层序列以达到最低的内存占用。

序列帧是一个无损且低内存的格式,但是他只能在客户端环境中使用,不建议在 Web 环境中使用。原因是序列帧一般都是随着 App 程序包一起下载下来的,但是 Web 中每次进入一个新的网页都需要重新下载。举个例子如果一个 60 帧的动画就得重复向服务器请求 60 次,在这种高频次的请求下很容易因为一个小的问题导致整个动画无法正常播放,为了避免这种错误我们一般会把这个 60 张图合并为一个,并且通过代码在指定时间内显示某一个区块,所以这里我们引出另一种格式──精灵图/雪碧图。

精灵图/雪碧图(Sprite)

当我们把所有序列合并在一张图片上往往还是不够的,我们还需要提供给开发具体哪个时间显示哪一部分的具体参数。我们可以直接通过 AE 插件 CSS Sprite Exporter(By Bigxixi)直接快速地输出开发所需的代码和精灵图。

5. Lottie

Lottie 可以说是近两年在动画输出方面不得不提的一个格式,它由 Airbnb 推出,并且迅速在国内外各种大小厂快速推广开来,目前已经是一个非常普遍常用的格式,他在 AE 中的插件叫 Bodymovin,他的原理是把我们的各种矢量元素、位图图层以及他们的效果关键节点打包的形式行成一个 json 格式的文件。

我们的开发人员拿到 Bodymovin 输出的 json 格式是无法直接使用的,他需要在代码中加入 Airbnb 提供的 Lottie 第三方库来读取播放,相当于 lottie 文件在我们各个端口设备上的播放器的作用,它会占用一定的系统空间,但是一般情况下也不会很大,从产品长远发展的角度来说肯定是可以给我们 App 节省非常多空间的,这也正是 Lottie 可以在这么短的时间内被这么多公司所认可的原因之一。

Lottie 是一个非常强大的输出工具,它可以满足很多种类的矢量动画和图片动画。但是他也有一些自身问题,首先他对缓动曲线的解析会占用非常多的内存,这点后面会展开解释;第二点是各平台效果的支持都不是很稳定,很多时候容易出 Bug。

下图为 Lottie 官方提供的对于 AE 特性的支持:

△ By Bigxixi

6. SVGA

针对 Lottie 对缓动曲线解析差带来的性能问题和稳定性问题,我们会有第二种备选方案是 SVGA,不管是导出之后的内存占用,还是在各个端的表现稳定性都会好很多。但是他的内存占用会比 Lottie 稍高,并且支持的特性也会比 Lottie 少一些。

SVGA 与 Lottie 最本质的区别在于代码对动画过程记录的方式, Lottie 基本上是按照我们在 AE 当中的关键帧及缓动的结合形式去记录动画。而 SVGA 则是通过记录我们每一个图层每一个时间上的动画状态,从而省去对缓动值的计算。跟序列帧的逻辑非常相似,但是因为他的素材可以复用,所以会比序列帧占用更低的内存。

基于实现方式,他会比 Lottie 稳定很多,相应的,他所支持的特性也要比 Lottie 少很多。

SVGA 格式可以组合 lottie 去使用,还有像很多效果在 Android 设备上 svga 的解析效果要比 iOS 好很多,所以很多安卓设备也会经常使用。

所见非所得格式与前几种最大的区别在于输出之后无法第一时间看到输出的结果,因为他们是更垂直于我们的智能设备的格式。但是好在他们也提供了一些在桌面端和移动端可以直接预览的软件,可以帮助我们在开发完全落地之前排除一部分错误问题,以及提前预知到效果的可行性。

7. AE2CSS(By Bigxixi)

他可以帮助我们从 AE 当中导出 CSS 格式,理论上这个插件可以支持我们所有的 AE 动画,并且在大多数情况下动画的质量无损且占用内存比所见即所得格式要小。

他的原理非常简单,他把所有的动画分为两种类型,基本动画属性记录状态信息,复杂效果变化属性直接导出为精灵图,并把他们的效果结合在一起打包,输出一套文件。它可以忽略我们前面各种情况会遇到的所有问题,但是有个限制就是目前只能用在 web 和 h5 页面上。

8. 第三方动效库

要知道这种第三方的导出方式其实是非常多的,但是目前市面上大家都比较认可的并不多,Lottie 之类的输出方式很大一个优势是他自身的社区生态,尤其 Lottie 目前在网上有非常多的开源动画资源可以下载使用,可以让我们以最低的成本获得一些动画效果。

交互动效&特殊效果输出选择

所谓交互动画,顾名思义动画的内容跟我们的交互操作相关联,根据我们的操作反馈相应的动效,因此他的实现原理也更多元更复杂。

1. 贝塞尔曲线

前文中我们提到大量的贝塞尔缓动曲线会带来系统运算压力上的问题,想要了解这点首先需要我们了解贝塞尔曲线是如何构成。并且我们在交互动画交接的时候会涉及到很多的手写缓动曲线,在这之前我们也需要简单地去了解他的原理。

以下视频为一个贝塞尔曲线在智能设备上构成的原理讲解:

在开发环境中我们向开发人员提供一个贝塞尔曲线需要提供以下几个参数:

在多数情况下我们完全可以按照前面提供的格式,直接对接我们的矢量形状。在少数情况下,尤其在一些交互类动效的情况下,很多就需要我们手动的去提供每一个曲线的参数了。但是我们不可能每个点的参数挨个去测量去输出,这是非常不现实的。目前在市面上大多数的设计软件和输出软件上都会提供一些简单的代码参数给我们。

但是这些都只是基于静态页面的情况,在动效页面的交接中我们如何去对接呢?以下图作为例子:

像这样一个例子,我们需要提供动画的前后两个状态给到开发人员,即 icon 搜索框的形式和输入光标的竖线形式。每一个路径的 svg 信息我们可以直接输出给开发人员,像 Sketch/Zeplin 这样的工具我们可以直接输出 Web 端所用的格式,但是他们都只是局限于 CSS 格式,但是在 Android 和 iOS 下就无法提供相应的代码。为了解决这个问题,这里推荐另一款软件──PaintCode 3。

PaintCode 3 是一款专门为设计师准备的简单的矢量图形绘图软件,通过 PaintCode 3,即使没有编程经验,设计师也可以输出适量图形的 iOS/Web/Android 相应的代码。并且他跟 sketch 之间有非常强的关联性,可以直接复制 sketch 当中的矢量形状,也可以直接在软件里编辑和新建矢量图形,非常强大。

2. 缓动贝塞尔曲线

缓动贝塞尔曲线,即我们在设计动效时使用的缓动曲线,他可以控制我们动效的速度缓急,可以直接控制我们动效的整体节奏感。在大多数情况下我们看到的缓动贝塞尔曲线都是如下图,他与我们的贝塞尔曲线非常类似,区别在于缓动贝塞尔曲线的两个端点是固定的,而贝塞尔曲线的端点是动态的。也就是说当我们与开发人员对接缓动曲线时,可以只提供两个控制杆的位置。像在下图中我们的缓动曲线的参数,两个端点的坐标位置,即( 0.17,0.67,0.83,0.67 )。

在 AE 当中我们如何获得我们相应的缓动曲线的参数呢?我们在 AE 当中把缓动曲线图表的显示类型选择为「编辑值图表」即可调整为我们常见的缓动曲线的类型。

为了获得我们在 AE 当中的缓动曲线的参数,我们可以以图表左下角作为出发点,根据两个控制杆的位置创建两个矩形,以左侧控制杆为基础的矩形宽高(在整个区域宽高中的比例值作为数值)作为缓动曲线的前两个数值,以右侧控制杆为基础的矩形宽高作为缓动曲线的后两个数值。

虽然以上的方式可以使我们更方便地获得 AE 缓动参数的具体数值,但是因为操作繁琐只适用于我们已经完成了动画需要去落地的情况。更多的情况下我们需要在动画设计之前就使用参数的方式去使用缓动曲线。Flow 插件可以帮助我们完成这件事。

他可以帮助我们使用一般的缓动曲线的方式设计动画,并且提供了 25 种在开发环境当中常用的缓动类型,我们也可以自定义一些缓动类型,可以备份成文件传输在团队内部当成一份规范来使用,也可以导入外部的一些缓动参数的文件。当然在正常情况建议还是使用一些默认的缓动类型,原因有两个方面,一方面是这样默认的曲线在算法上更容易计算,对系统性能的占用默认也可以低一些,另一方面很多非系统默认的缓动差值需要开发再去写一遍,无形中也会增加我们的对接成本和后期的代码维护成本。

3. 手动标注

基于我们对贝塞尔曲线的理解和缓动曲线的理解,可以帮助我们在手动输出标注时有更丰富的选择。手动标注的情况下我们需要把动效中每一个具体元素的参数都参数化。一般情况下我们会把动画的基础单元分为以下六个部分:

有了这些基本的参数之后,我们可以参照下图中的方式完整的表述我们的动画过程给开发人员。

另外我们也可以通过更加可视化的方式去标注,并且把这些样式做成组件的形式在团队内作为一种共识推广开之后也能大大提高动效标注的交接效率。

动效落地拓展──代码

当我们通过上述手动标注的方式交接给开发人员时,站在设计的立场上似乎已经做到尽善尽美了,但是我们回过头时候,往往输出的结果在大多数情况下还是不那么尽如人意。这其中有非常多综合的因素,站在开发者的角度来看,往往我们对于结果输出所做的事情非常有限。造成这种输出与落地巨大差异的最大原因也是来自于设计师与开发者之间理解产品构成的巨大差异。

设计师在输出动画时更多的时间精力在于对动画细节(缓动、时间等)的调整,而对于开发者来说有非常多的外部因素影响最终的输出,一般情况下会有以下几点:

在大多数动画中有非常多的图层细节,挨个实现需要大量的时间,比方说制作下图中这样一个动画,只需要使用 CSS 设置一下最外层面板的宽度,并且加一个过渡动画。但是对于大多数的产品开发者来说,你需要同时设置外部和内部所有元素的动画。

第二个更麻烦的事情是你在 sketch 当中的图层与 html 当中的图层不匹配。所以即使你在动效标注当中,标识某个矩形从 0 向右移动 10 像素,设计上非常容易。但是代码会有非常多非常复杂的框架层,开发人员需要把设计块调整到他们的代码当中,每一个元素都需要单独相同或不同的方式去实现。这是一个非常容易出错的过程,完全取决于如何清楚地用文档描述你的动画,以及开发人员如何仔细地查看并实现你的内容。

第三点是修改动画的效果非常麻烦,设计和产品开发是一个迭代的过程。但是当你对一个动画效果进行调整的时候,不管是设计还是开发都需要大量的时间去对之前的文件和代码进行重新了解,每个人都会根据自己的理解会有不同的实现方式,从重新熟识早期版本的实现逻辑,到调整,再到开发落地需要非常复杂的一套流程。

为了让这个过程不那么痛苦,我们意识到需要跳出自己的舒适区,去用另外一种不同的逻辑去构建动画,这也意味着不建议大家使用所见即所得的设计工具。相反的,我推荐大家使用 html/css/js 的方式去构建我们的动画体系,你需要一些时间来适应他,但经过几个动画之后,很多过程就会变得特别容易,其实也并不需要你知道太多关于代码的知识,就可以为开发人员创建一些基本的动画。

一方面我们真正控制了动画的微小细节,对于开发人员来说,这种方式更容易使我的代码适应他们现有的代码库,而不是大多数标注软件自带的 css 属性那么单薄,虽然各个平台都会有不同的代码语言差异,但是他们之间的跨度相比设计到代码的跨度来说可以说是微不足道了。

我只需要将输出的代码放在 codepen上,开发人员就可以轻松看到我做了什么,也可以复制粘贴我的代码部分来制作一些效果。

当然这么做也有一些问题,首先,我需要在开始设置动画之前用 html 重构我的设计,不过因为我们只是去针对动画发生的部分去做设计,所以不会因为框架和代码逻辑对我们产生影响,相比之下就会容易很多,另外我们也可以在 sketch 中直接复制 css 代码,只需要很少的步骤就可以重构我们的设计,甚至一些根本没动画的部分可以截个图,贴图进去也没有问题。

另一种方式是我们直接从实际项目的代码入手,但是会比我们自己去写 demo 要复杂很多,因为实际产品的代码框架更复杂,需要重新梳理。

虽然这种工作方式主要是使用代码做一些动画,但是大多数情况下还是需要先在一些动画软件上做想法的探索,不同的想法可能会需要比较久的代码时间。因此,如果我不太清除自己想要什么样的动画,我还是会付出一部分时间在 demo 的制作上。

另一种可能性是我们在平时可以通过一些简单的代码,去绘制一些基础组件的动效,我们称这种东西为脚手架,可以给我们所有的一些基础元素做一些小动画,比方说开关,checkbox,按钮点击效果之类的。因为这些是我们大多数时间都会去反复使用的一些组件,做一个动画相当于对整个系统动画的贯穿。这种方向不管是自己去写代码还是通过开发人员去写代码都是非常容易的一个过程,并且带来的效果其实是非常可观的。

目前市面上也有一些针对设计师的代码动效输出工具,像 Origami / Framer,都是目前比较火热的开发思维实现动效的产品,非常建议大家去尝试使用。

总结

动效输出的手段目前虽然非常多样,而且随着技术手段进步选择会越来越多。但是目前来说没有任何一种方案,可以完全解决我们落地动效当中的所有问题。并且目前市面上所提供的任何一款工具无法真正解决设计思维所带来的局限性。作为设计师我们需要始终保持敏锐的观察力,并且持续的更新自身的知识树,才能应对多种多样需求下输出的动效效果的落地。另一方面我们也需要站在更长远的角度去了解一个动效需求从产品逻辑到开发逻辑之间的鸿沟,并试着通过更多元的手段去跨越鸿沟。

Source: 优设网 – UISDC | 16 Sep 2019 | 1:23 am(NZT)











© 澳纽网 Ausnz.net