平面设计

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

雪涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

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

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

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

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

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

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

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

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

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

居家好物篇

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

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

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

欸,这堆雪是干嘛的?

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

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

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

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

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

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

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

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

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

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

吃货篇

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

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

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

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

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

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

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

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

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

萌宠篇

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

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

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

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

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

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

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

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

宅男篇

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

为什么这些画面更耐看?

雪涛

在同样的设计框架中,要如何快准狠找到最终传达的信息?有时候选对图片让你的设计事半功倍。


导语


为什么视觉效果很重要,因为我们的大脑处理视觉信息的速度比其他信息快6万倍。在同样的设计框架中,要如何快准狠找到最终传达的信息?有时候选对图片让你的设计事半功倍。


阿思海姆《艺术与视知觉》曾经提到“视觉形象永远不是对于感性材料的机械复制,而是对现实的一种创造性的把握,它创造的形象是含有丰富的想象性、创造性、敏锐性的美的形象。”


这段话是不是太抽象了?简单总结来说意思是:美是有规律。


这本出版于1962年的经典书籍,书里说到提升美感的十个点,分别是平衡、形状、形式、发展、空间、光线、色彩、运动、张力、表现。


不要小看区区这10个词语,里面暗藏着与美感相关的知识点。


以大图和小图为例,给人的心理感受是完全不一样。大图更多给人以冲击力的感觉。小图则是平静陈述内容。选有感觉图片,建议根据这些选项再进行选择。

 




一、 说服力画面养成法


那么,图片如何正确传达信息呢?这不得不提,艺术与视知觉的平衡。我们在观察一个建筑物的时候,以巴黎圣母院来说为例:当你第一眼看上去的时候很神圣,华丽的外表,中轴对称的形式,让人们对宗教产生了一种无言的崇敬。


同样的结构,将图片给换成下图时,给人完全没有崇敬的感觉。


 

同样的结构为什么会有这么大的差异?和图片给人的隐藏信息有很大的关系。


小测试:上图你能得到的信息时什么?

  ● 怪异?

  ● 螺丝钉?

  ● 不合常理?


特异是能打破现有框架的元素,譬如一个人身挂着狗头,绝对能快速吸引你的目光。因为和常识有所偏差,所以能特别吸引目光。


返回平衡的话题,好设计都需要分析其平衡之处。就像杜尚的这幅作品《坐在黄色扶手椅上的塞尚夫人》,利用黄金分割的辅助线,以中轴对称的形式体现平衡。同时,倾斜的躺椅和身体有形成另一种平衡。


 

这种结构配合妇女的造型,形成一种端庄既视感。如果你有时间,再分析以前的绘画,都能或多或少满足找出画面给人好感的原因。


那么,有什么特征才会有这样的感觉呢?




二、 有感觉图片的具有这些特征


1、善用眼睛,影响他人


眼神选图的关键。我们都知道眼睛是人心灵的窗口,人类身上最迷人的部分,眼睛肯定算其中之一。


很多小说里都会提到通过对方的一个眼神,就能确定那个人在想干什么。听上去有点神奇,不过确实眼神有这样的魔力。



如上图所呈现的状态一样。我们看到左边的三个人的视觉焦点一致向右,我们的注意力也不自觉的往右边的区域移动。


怎么样的眼睛是具有引导作用呢?


可以参考以下这张图,一般来说,当人脸的朝向了正面的时候,他的眼睛的引导力并不算很强。因为这时候他的眼神是盯着你看,并不会在画面其它区域留下痕迹,所以引导的作用并不强。


这就是为什么画人像的时候,基本不会画完全正脸的头像,是一样的道理。因为正脸的人像会显得很严肃,并不生动。

 



根据这样的眼神理论,我们排版的时候就显得很容易,只需要将重点的内容往眼神指向的方向放置即可。



关键字:明确眼神方向



具体请看下图,我把标题文字放在眼神聚焦的地方,就会显得特别醒目。配合粗体大标题,画面内容主旨十分明确。



相反我们将文字内容移到左侧的时候,这种吸引力会弱化。看上去似乎还不错,但总感觉有点不对路的地方。就是因为眼睛的朝向是在画面之外,而文字是在画面内部,他们两者产生了引导线冲突导致的。



同样在视觉语言中。左侧跟右侧的眼睛相互交汇到中间时就会产生一种对峙感。特别适合表现一种竞争和比赛的视觉效果。



如果你喜欢,可以利用大小对比的效果,将同一张图片进行重复排列,就像下图所展示的效果一样,能产生很特别的版式。


 




三、 动作产生逻辑思考力


选图时,除了眼神能产生很强的吸引力之外,人物自身的动作也有类似的效果,比如人体动作或者手指指向的行为。


仔细观察会发现,我们用的鼠标指针就有类似的明确指向性。你会很清楚,它指向的顶端就是可以操作的区域。



在图库里面搜索到关键字:『手指 指向』,能找到很多不错的指向性图片。尤其是比较亲和的人物造型,或者快速聚焦某项内容时配合手指具有很明确的指引效果。


一本日本畅销的文案书里提到过一个观点,什么是优秀的文案?就是看完之后,能让人产生行动,这就是好的文案。



关键字:有身体动作



举个例子:

  ● 迷人的姑娘,便宜的产品(状态描述)

  ● 作为普通文员,她为什么拥有令人羡慕的小资生活?(动作描述)


好的图片也具备了这样的特点,搭配手部动作,图片具有很强的诱导性。



人物的手部动作,可以清楚告诉用户什么样的内容是重点。就如同下图所示的一样。左侧的图片明显要比右侧的图片更有吸引力。


以往可能你并不清楚,为什么有这样的不一样的感受。经过上述分析的案例,应该就理解其中的原因了。



同样的指向性动作是可以连续搭配使用。图片展示的效果如下图,通过一个向左动作跟一个向下动作,形成了完整的指向型视觉引导方案。


这个方案既有明确的引导性,也有人物间的大小对比,整体看上去会显得比较完整和耐看。



我们分析一下,如果将颜色去掉,效果是不是不一样的?得到的是这样的结果。


可以明显的感觉到, 图一的指向性要比图二好很多。



试图通过视觉点的分布,看看问题出在哪里?


图二视觉点会有两个,第一个是往下的视觉点,一个是往右的视觉点。整体感受就会比较凌乱。


相反,图一比较明确,只有一个按顺序移动的视觉点,即先向左再向下,最终触达核心文字。








四、 具象,遵循潮流的方向


当你找到图片之后,不清楚要做成什么风格的时候,趋势可以帮到你。


趋势是从哪里来呢?



关键字:具有明确眼神方向



一般可以从各大时装周得到,另外还有很多大型的设计网站,每年都会发布下一年的趋势报告,那里也有大量的参考性案例。我们试图挑选其中一个风格趋势,配合我们找图的技巧,看看能得到什么不一样的结果。


  ● 大胆的用色(Bold Color) 




大胆的用色风格有一个很大的特点,颜色使用特别大胆跟前卫,可以配合一定的矢量图形搭配使用。需要采用多于3种的色彩,以及高饱和度色调。


那么这个风格的特点,就可以整理成以下关键字:

  ● ins 

  ● 时尚

  ● 粉色




挑选其中一张图片作为主题,再利用初始用到的参照物分解原理,将其拆分成这三块内容,即点缀,主题跟色调。


为什么会选择这张嘴唇的图片呢?


首先前卫风格使用的元素都会比较另类,于是图片素材就需要满足另类的特点。而另类广义来说是超出原来的正常理解范围。


譬如:像嘴唇、鼻子、鞋子这类本不该出现的物体,取代了原本头部的位置,结构成为了另一种猎奇的物体。



仔细分析大胆前卫的风格。首先发现这些风格的图片都会经过处理,不会直观表现原来的样子。意味着直接将找到的图片拉进这种设计是不合适的。


利用曲线跟色彩饱和度两个参数进行特别的调整,形成下图。当然如果你愿意,也可以变成其他任何高饱和度的色彩,形成的感觉也是差不多的。



 

特别注意要利用对撞色的原理,配粗字体,参考波普风格元素,在关键字里添加上『波普』这个词语会得到更多惊喜。



最终形成的海报,如图所示。






五、 图片传达实验室——迅速提高图片魅力


看了那么多有魅力的特征图片,肯定要动手实践,怎么将这部分的知识融入到选图之中。


我将这部分内容称为图片传达实验室理论,是以一个界面为例,结合我们选图和处理图片的技巧,形成一批有说服力的界面。


 

目录会分为发现问题,列举课题,评价方案和实施策略。文字会以这四部分为主要核心,简述整体提高图片魅力的方法。

 


在聊这个问题之前,我们不妨来看一下这张图片,每日新闻的一张漫画。好像没有什么问题,就是一个有关特朗普跟普京的故事。



但是我们试着换另一种角度去看。每个角度都能呈现不一样的内容。虽然它们都是引用了同一张图片,但是表达的意思却是完全不一样,另外所表现出来的视觉语言也是相当不同。



这意味着一张图片是可以被多次利用,而且只要你用的图片尺寸够大,局部是可以用作很多用途,你能创作的可能性就会多元化。




1、发现问题


我们以关键字『静谧』开始,对这个技巧进行讨论。通过搜索,在图库里面找到了这么一张图片。初看下来没有什么特别大的问题,颜色,图形和构图都还可以。


 

试着将它植入到音乐界面里,得到了以下效果。用直接将图片以默认方式嵌套到这个矩形里,能清楚的发现图片下半部分显得空荡荡。效果并不是很好,而且图片的上半部分,文字和背景粘在在一起,造成的阅读影响。


 


2、解决的课题


我们该怎么解决上述问题呢?很简单,只要将图片进行反翻转可以了,最终形成以下所示的效果。


拿到图片,特别是这种类似背景的图片,翻转是很有用的技巧,它可以实现从不同的角度适用图片。


  ● 文字:在图片里显得清晰。

  ● 重点:变得更有视觉焦点。





3、列举替代方案


当我们找到了这么一个角度之后,可以分析颜色,进而列举出更多可选的方案。


也可以通过软件,将图片颜色进行抽离和分解的工作,快速形成一组可供我们参考的颜色。


如图所示,就能快速实现配色方案的目的。

 



能列举不同结果的方式还有很多,除了配色分类之外,我们还可以用以下3种方式。这里的每种方式与之前的素材整理法相似,都是一种快速扩展素材的模式。



① 以图搜图:


这是一种快速得到图片的方式,不用怎么动脑,只要你觉得这张图片还可以,就能找到跟它相似的一堆图片。


 


② 颜色关键字搜索:


对目标图片颜色的分析,列举出颜色趋势,并将这些名称放到专业的图库里进行搜索。

 



③ 高级自定义搜索:


可以只用普通引擎进行针对站点检索,进行指向性搜索。你只要知道目标就可以针对搜索。


 





六、 实施方案策略




1. 权威高质量相关性图片


这部分主要是结合之前聊到的三个图片特征,进行组合搭配。如果只有背景的画,图片的魅力是不太够,这时候我们需要引用人物的造型。


人物和静谧这个主题相关,我们找到了有静音动作的图片,具体如下图所示。


我们直接将这张图片抠出来,放到我们之前整理的背景里的话,明显是显得有点格格不入了。因为两种画面的风格不太一致,这就需要进行统一的调整。



调整会利用到photoshop 里面的曲线工具,色阶工具以及曝光工具。分别针对亮色系跟暗色系做了两套版本进行对比。做出来的结果,亮色系对整体的界面更有帮助。


 



2. 能引起行为的动作按钮


还记得前面的章节提到,一个令人引起动作的手势,是很重要的行为吗?


我们可以通过眼神和手部动作,进行视觉焦点的锁定,类似下图所示的结果,并且结合图片合成的技巧进行一致性的输出。


对于眼神望向右边而言,『80%和购买按钮』显得就非常明显。

 




3. 减少视觉噪音


完成上面那一步还是不够,我们试图减少一点视觉噪音。什么是噪音呢?就是对整体画面没有帮助,却能吸引观众目光的元素。往往这些东西都会出现在背景里。


我们都知道,如果背景越复杂的话,前景的重点性会减弱。这一步可以对背景进行简易化的处理。最终形成的样子,如下图所示。






4. 款式一致


除了上述能为图片加分的选项以外,还有一点,就是当多图片使用时,一定要注意款式的一致。





七、 延伸思考:技术思考


已经简述很多关于图片处理的技巧,另外还有一个很重要的概念,我也将此放在这里进行延伸思考。吉萨金字塔和达芬奇传世画作《蒙娜丽莎》有什么关系?它们都是基于黄金分割设计!


黄金分割是一个数学比例。我们在大自然中很容易找到这样的比例,当它用于设计时,能创造出有生命力的、纯天然的视觉作品,愉悦我们的眼睛。



无论是设计或是摄影构图,合理使用黄金比例可以让你的作品更美观,因为这套系统已经是被历史验证过,超越感觉的一般性方法。


但黄金比例不只上图所示的样子,还有许许多多的形式。一般我们使用时,将主要元素放在交界线的位置就可以了。



但是我们适用设计软件里并没有这一选项,自己动手做的话明显也不是很合适。这时候,我们就要使用到万能的插件。


在介绍插件前不妨看一下,我们利用黄金比例去分解世界名画,可以得到这样的结果。就是主要的元素都能放在线段交界的部分。这就是为什么有些版式,看上去很有美感的原因所在。



那我尝试用这种ps插件,将生成的黄金比例图,放到了我们所需图片里。插件有个地方,它可以根据的图片尺寸。自动适配一个黄金比例图给你。


  ● 插件一:Divine Proportions Toolkit


  ● 插件二:GoldenCurve黄金分割线GoldenCurve - PHOTOSHOP中的黄金分割线





总结:


具有说服力的画面是什么样子呢?或者换一种说法,什么是耐看的画面?应该就是能让人产生行动的效果,注意『行动』这两个字很重要。


什么样的情况会产生行动呢?我们可以利用眼神,动作以及趋势塑造有动作感的画面。一般,有感觉的设计也会紧紧遵循这样的原则,另外我们对这套理论进行实践,得出快速提升图片魅力的方式,即发现问题,列举课题,评价方案和实施策略。

可读性在网页设计中的重要性

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

当我们打开一个网站,我们会看网站界面是否美观,交互是否符合人性化,布局是否合理等等,这些因素对网站起到一定的影响作用,但最根本影响一个网站的是整个网站的可读性。
良好的设计应该都是可读的设计,如果信息都无法正常而清晰的传达,那么设计就失去了意义。设计的可读性和排版设计息息相关,与此同时,对比度的控制也是其中的核心。想要提升内容的可读性,让内容以更加顺畅、更符合逻辑的形式呈现在用户面前,可以通过以下几种方式来提高网页的可读性。

1.文字的可读性

要让文字提高可读性,可以通过调整字体样式、外边距、内边距、颜色和对比度等参数来提高文字的可读性。

  • 字体样式:字体的样式会影响可读性。


  • 行长度:每行的字符个数对于整体的可读性起着主要作用。如果文字段落非常宽,阅读性差。同理,每行文字太短也不行,会给读者的眼睛带来压力,造成混乱。

  • 外边距和内边距:和行距一样,元素周边和之间的空隙也影响着用户阅读文字本身。

  • 颜色与对比度:文字颜色与相应背景也至关重要。如果在绿色背景上写绿色文字,就难以阅读了。设计师选择浅色字深色背景,或是深色字浅色背景,都是有原因的。对比使得字符容易阅读。

目前文章内容流行的字体是14PX(像素),这样不容易造成视觉疲劳。可以统一去设置全局的字体大小,包括行距。

除此,文字链接最好用颜色或是其他样式跟正文区分开来,这样读者可以清楚的知道哪里可以点击。例如:可以给a标签写个下划线代码text-decoration: underline;。

2.段落的可读性

段落的可读性一样可以用过文字和图片来提高。文字方面跟上面提到的,可以通过字体样式、外边距、内边距、颜色和对比度等参数来调整之外,还可以通过段落行距来调整字段间距。

  • 行距:每行文字间的间距也同样重要。看看这篇文章,如果每行文字都与上下两行粘在一起,你就无法理解这些句子。

可以从上图看出,文字段落之间不留白可读性不高。右边的标题和段落之间、行与行之间和段落与段落之间都留了一定的距离,所以整体会显得更为整洁和可读性高,这些在网站当中用Margin、Padding和Line-height可以来调整留白的大小。切记,行距大小不是越大越好,一定要适当。


在通篇文字的文章当中也可以考虑适当的穿插一两张图片进去,配图可以提高文章的可读性。

3.区块的可读性

区块间也要有一定的间距才能提高区块的可读性。

区块留白这个有点类似上面的文字段落留白,在网页当中,每个区块与区块之间也要适当的留白,而这个留白主要还是体现在Margin和Padding上。如果取消两个区块的Margin和Padding,那两个区块的内容会聚集在一起,这样不利于观者去区分区块之间的关系,也不利于阅读。所以一般我们在给网站做界面的时候,都会设置一定的间距,就像蝉知系统中默认的间距是7px,当然,这个间距的大小都是可以调整的,看你怎么去设计这个页面和页面的整体风格是否和谐而定。

可以看到上图左侧区块之间的间距为0,整体区块和区块之间看不出间隙,给人拥堵的感觉。但是右侧留有一定的间隙,所以看起来比较舒畅,可读性也相对高很多。

4.图片的可读性

为什么说图片也具有可读性,要知道一张好的幻灯片设计可以起到一定的作用,大部分的网站第一眼看的就是幻灯片,所以图片的设计也不能忽视。
图片的设计可以通过对比来设计,比如色彩对比、字体对比等。切记勿用复杂的背景来当幻灯片,这样标题在画面上就不够突出。

上面的例子,显而易见,当图片背景比较复杂的时候,文字的阅读性就差一点。第一张图的背景比较简洁大方,加上不用设计的字体,自然而然的主题就凸显出来了。

5.导航的可读性

说到导航,这个其实是整个网站架构当中最重要的,所以我也把这点放到最后来讲。网站一定要有清晰的导航,方便读者浏览和了解整个网站的架构。所以在设计导航的时候一定要考虑到浏览者的习惯。

  • 导航要简单明了,避免奇怪的布局。

上面这个导航不是说做得不好看,而是找交互的设计用起来让用户会有点不舒服,导航下拉时,除头部内容整个页面整体下移,这也可能就是设计师特意做的效果,但是很明显,效果不是特别出彩。

  • 导航点击状态下的样式和普通样式需要有明显区别。

上面的这个导航,点击状态下和正常显示的样式效果区别不大,所以识别性不够高。

  • 导航的层级关系设计简单点,最好不要超过三级。

现在很多导航设计都将二级导航和三级导航放在一起,这样受众在浏览的时候也可以更清晰网站的架构。


优秀的网站,通常在用户体验上非常用心,而网站良好的客户体验除了优秀的界面设计、合理简洁的框架布局,还有一点至关重要——网页的可读性。


蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

为什么这些画面更耐看

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

在同样的设计框架中,要如何快准狠找到最终传达的信息?有时候选对图片让你的设计事半功倍。


导语


为什么视觉效果很重要,因为我们的大脑处理视觉信息的速度比其他信息快6万倍。在同样的设计框架中,要如何快准狠找到最终传达的信息?有时候选对图片让你的设计事半功倍。


阿思海姆《艺术与视知觉》曾经提到“视觉形象永远不是对于感性材料的机械复制,而是对现实的一种创造性的把握,它创造的形象是含有丰富的想象性、创造性、敏锐性的美的形象。”


这段话是不是太抽象了?简单总结来说意思是:美是有规律。


这本出版于1962年的经典书籍,书里说到提升美感的十个点,分别是平衡、形状、形式、发展、空间、光线、色彩、运动、张力、表现。


不要小看区区这10个词语,里面暗藏着与美感相关的知识点。


以大图和小图为例,给人的心理感受是完全不一样。大图更多给人以冲击力的感觉。小图则是平静陈述内容。选有感觉图片,建议根据这些选项再进行选择。

 




一、 说服力画面养成法


那么,图片如何正确传达信息呢?这不得不提,艺术与视知觉的平衡。我们在观察一个建筑物的时候,以巴黎圣母院来说为例:当你第一眼看上去的时候很神圣,华丽的外表,中轴对称的形式,让人们对宗教产生了一种无言的崇敬。


同样的结构,将图片给换成下图时,给人完全没有崇敬的感觉。


 

同样的结构为什么会有这么大的差异?和图片给人的隐藏信息有很大的关系。


小测试:上图你能得到的信息时什么?

  ● 怪异?

  ● 螺丝钉?

  ● 不合常理?


特异是能打破现有框架的元素,譬如一个人身挂着狗头,绝对能快速吸引你的目光。因为和常识有所偏差,所以能特别吸引目光。


返回平衡的话题,好设计都需要分析其平衡之处。就像杜尚的这幅作品《坐在黄色扶手椅上的塞尚夫人》,利用黄金分割的辅助线,以中轴对称的形式体现平衡。同时,倾斜的躺椅和身体有形成另一种平衡。


 

这种结构配合妇女的造型,形成一种端庄既视感。如果你有时间,再分析以前的绘画,都能或多或少满足找出画面给人好感的原因。


那么,有什么特征才会有这样的感觉呢?




二、 有感觉图片的具有这些特征


1、善用眼睛,影响他人


眼神选图的关键。我们都知道眼睛是人心灵的窗口,人类身上最迷人的部分,眼睛肯定算其中之一。


很多小说里都会提到通过对方的一个眼神,就能确定那个人在想干什么。听上去有点神奇,不过确实眼神有这样的魔力。



如上图所呈现的状态一样。我们看到左边的三个人的视觉焦点一致向右,我们的注意力也不自觉的往右边的区域移动。


怎么样的眼睛是具有引导作用呢?


可以参考以下这张图,一般来说,当人脸的朝向了正面的时候,他的眼睛的引导力并不算很强。因为这时候他的眼神是盯着你看,并不会在画面其它区域留下痕迹,所以引导的作用并不强。


这就是为什么画人像的时候,基本不会画完全正脸的头像,是一样的道理。因为正脸的人像会显得很严肃,并不生动。

 



根据这样的眼神理论,我们排版的时候就显得很容易,只需要将重点的内容往眼神指向的方向放置即可。



关键字:明确眼神方向



具体请看下图,我把标题文字放在眼神聚焦的地方,就会显得特别醒目。配合粗体大标题,画面内容主旨十分明确。



相反我们将文字内容移到左侧的时候,这种吸引力会弱化。看上去似乎还不错,但总感觉有点不对路的地方。就是因为眼睛的朝向是在画面之外,而文字是在画面内部,他们两者产生了引导线冲突导致的。



同样在视觉语言中。左侧跟右侧的眼睛相互交汇到中间时就会产生一种对峙感。特别适合表现一种竞争和比赛的视觉效果。



如果你喜欢,可以利用大小对比的效果,将同一张图片进行重复排列,就像下图所展示的效果一样,能产生很特别的版式。


 




三、 动作产生逻辑思考力


选图时,除了眼神能产生很强的吸引力之外,人物自身的动作也有类似的效果,比如人体动作或者手指指向的行为。


仔细观察会发现,我们用的鼠标指针就有类似的明确指向性。你会很清楚,它指向的顶端就是可以操作的区域。



在图库里面搜索到关键字:『手指 指向』,能找到很多不错的指向性图片。尤其是比较亲和的人物造型,或者快速聚焦某项内容时配合手指具有很明确的指引效果。


一本日本畅销的文案书里提到过一个观点,什么是优秀的文案?就是看完之后,能让人产生行动,这就是好的文案。



关键字:有身体动作



举个例子:

  ● 迷人的姑娘,便宜的产品(状态描述)

  ● 作为普通文员,她为什么拥有令人羡慕的小资生活?(动作描述)


好的图片也具备了这样的特点,搭配手部动作,图片具有很强的诱导性。



人物的手部动作,可以清楚告诉用户什么样的内容是重点。就如同下图所示的一样。左侧的图片明显要比右侧的图片更有吸引力。


以往可能你并不清楚,为什么有这样的不一样的感受。经过上述分析的案例,应该就理解其中的原因了。



同样的指向性动作是可以连续搭配使用。图片展示的效果如下图,通过一个向左动作跟一个向下动作,形成了完整的指向型视觉引导方案。


这个方案既有明确的引导性,也有人物间的大小对比,整体看上去会显得比较完整和耐看。



我们分析一下,如果将颜色去掉,效果是不是不一样的?得到的是这样的结果。


可以明显的感觉到, 图一的指向性要比图二好很多。



试图通过视觉点的分布,看看问题出在哪里?


图二视觉点会有两个,第一个是往下的视觉点,一个是往右的视觉点。整体感受就会比较凌乱。


相反,图一比较明确,只有一个按顺序移动的视觉点,即先向左再向下,最终触达核心文字。








四、 具象,遵循潮流的方向


当你找到图片之后,不清楚要做成什么风格的时候,趋势可以帮到你。


趋势是从哪里来呢?



关键字:具有明确眼神方向



一般可以从各大时装周得到,另外还有很多大型的设计网站,每年都会发布下一年的趋势报告,那里也有大量的参考性案例。我们试图挑选其中一个风格趋势,配合我们找图的技巧,看看能得到什么不一样的结果。


  ● 大胆的用色(Bold Color) 




大胆的用色风格有一个很大的特点,颜色使用特别大胆跟前卫,可以配合一定的矢量图形搭配使用。需要采用多于3种的色彩,以及高饱和度色调。


那么这个风格的特点,就可以整理成以下关键字:

  ● ins 

  ● 时尚

  ● 粉色




挑选其中一张图片作为主题,再利用初始用到的参照物分解原理,将其拆分成这三块内容,即点缀,主题跟色调。


为什么会选择这张嘴唇的图片呢?


首先前卫风格使用的元素都会比较另类,于是图片素材就需要满足另类的特点。而另类广义来说是超出原来的正常理解范围。


譬如:像嘴唇、鼻子、鞋子这类本不该出现的物体,取代了原本头部的位置,结构成为了另一种猎奇的物体。



仔细分析大胆前卫的风格。首先发现这些风格的图片都会经过处理,不会直观表现原来的样子。意味着直接将找到的图片拉进这种设计是不合适的。


利用曲线跟色彩饱和度两个参数进行特别的调整,形成下图。当然如果你愿意,也可以变成其他任何高饱和度的色彩,形成的感觉也是差不多的。



 

特别注意要利用对撞色的原理,配粗字体,参考波普风格元素,在关键字里添加上『波普』这个词语会得到更多惊喜。



最终形成的海报,如图所示。






五、 图片传达实验室——迅速提高图片魅力


看了那么多有魅力的特征图片,肯定要动手实践,怎么将这部分的知识融入到选图之中。


我将这部分内容称为图片传达实验室理论,是以一个界面为例,结合我们选图和处理图片的技巧,形成一批有说服力的界面。


 

目录会分为发现问题,列举课题,评价方案和实施策略。文字会以这四部分为主要核心,简述整体提高图片魅力的方法。

 


在聊这个问题之前,我们不妨来看一下这张图片,每日新闻的一张漫画。好像没有什么问题,就是一个有关特朗普跟普京的故事。



但是我们试着换另一种角度去看。每个角度都能呈现不一样的内容。虽然它们都是引用了同一张图片,但是表达的意思却是完全不一样,另外所表现出来的视觉语言也是相当不同。



这意味着一张图片是可以被多次利用,而且只要你用的图片尺寸够大,局部是可以用作很多用途,你能创作的可能性就会多元化。




1、发现问题


我们以关键字『静谧』开始,对这个技巧进行讨论。通过搜索,在图库里面找到了这么一张图片。初看下来没有什么特别大的问题,颜色,图形和构图都还可以。


 

试着将它植入到音乐界面里,得到了以下效果。用直接将图片以默认方式嵌套到这个矩形里,能清楚的发现图片下半部分显得空荡荡。效果并不是很好,而且图片的上半部分,文字和背景粘在在一起,造成的阅读影响。


 


2、解决的课题


我们该怎么解决上述问题呢?很简单,只要将图片进行反翻转可以了,最终形成以下所示的效果。


拿到图片,特别是这种类似背景的图片,翻转是很有用的技巧,它可以实现从不同的角度适用图片。


  ● 文字:在图片里显得清晰。

  ● 重点:变得更有视觉焦点。





3、列举替代方案


当我们找到了这么一个角度之后,可以分析颜色,进而列举出更多可选的方案。


也可以通过软件,将图片颜色进行抽离和分解的工作,快速形成一组可供我们参考的颜色。


如图所示,就能快速实现配色方案的目的。

 



能列举不同结果的方式还有很多,除了配色分类之外,我们还可以用以下3种方式。这里的每种方式与之前的素材整理法相似,都是一种快速扩展素材的模式。



① 以图搜图:


这是一种快速得到图片的方式,不用怎么动脑,只要你觉得这张图片还可以,就能找到跟它相似的一堆图片。


 


② 颜色关键字搜索:


对目标图片颜色的分析,列举出颜色趋势,并将这些名称放到专业的图库里进行搜索。

 



③ 高级自定义搜索:


可以只用普通引擎进行针对站点检索,进行指向性搜索。你只要知道目标就可以针对搜索。


 





六、 实施方案策略




1. 权威高质量相关性图片


这部分主要是结合之前聊到的三个图片特征,进行组合搭配。如果只有背景的画,图片的魅力是不太够,这时候我们需要引用人物的造型。


人物和静谧这个主题相关,我们找到了有静音动作的图片,具体如下图所示。


我们直接将这张图片抠出来,放到我们之前整理的背景里的话,明显是显得有点格格不入了。因为两种画面的风格不太一致,这就需要进行统一的调整。



调整会利用到photoshop 里面的曲线工具,色阶工具以及曝光工具。分别针对亮色系跟暗色系做了两套版本进行对比。做出来的结果,亮色系对整体的界面更有帮助。


 



2. 能引起行为的动作按钮


还记得前面的章节提到,一个令人引起动作的手势,是很重要的行为吗?


我们可以通过眼神和手部动作,进行视觉焦点的锁定,类似下图所示的结果,并且结合图片合成的技巧进行一致性的输出。


对于眼神望向右边而言,『80%和购买按钮』显得就非常明显。

 




3. 减少视觉噪音


完成上面那一步还是不够,我们试图减少一点视觉噪音。什么是噪音呢?就是对整体画面没有帮助,却能吸引观众目光的元素。往往这些东西都会出现在背景里。


我们都知道,如果背景越复杂的话,前景的重点性会减弱。这一步可以对背景进行简易化的处理。最终形成的样子,如下图所示。






4. 款式一致


除了上述能为图片加分的选项以外,还有一点,就是当多图片使用时,一定要注意款式的一致。





七、 延伸思考:技术思考


已经简述很多关于图片处理的技巧,另外还有一个很重要的概念,我也将此放在这里进行延伸思考。吉萨金字塔和达芬奇传世画作《蒙娜丽莎》有什么关系?它们都是基于黄金分割设计!


黄金分割是一个数学比例。我们在大自然中很容易找到这样的比例,当它用于设计时,能创造出有生命力的、纯天然的视觉作品,愉悦我们的眼睛。



无论是设计或是摄影构图,合理使用黄金比例可以让你的作品更美观,因为这套系统已经是被历史验证过,超越感觉的一般性方法。


但黄金比例不只上图所示的样子,还有许许多多的形式。一般我们使用时,将主要元素放在交界线的位置就可以了。



但是我们适用设计软件里并没有这一选项,自己动手做的话明显也不是很合适。这时候,我们就要使用到万能的插件。


在介绍插件前不妨看一下,我们利用黄金比例去分解世界名画,可以得到这样的结果。就是主要的元素都能放在线段交界的部分。这就是为什么有些版式,看上去很有美感的原因所在。



那我尝试用这种ps插件,将生成的黄金比例图,放到了我们所需图片里。插件有个地方,它可以根据的图片尺寸。自动适配一个黄金比例图给你。


  ● 插件一:Divine Proportions Toolkit


  ● 插件二:GoldenCurve黄金分割线GoldenCurve - PHOTOSHOP中的黄金分割线





总结:


具有说服力的画面是什么样子呢?或者换一种说法,什么是耐看的画面?应该就是能让人产生行动的效果,注意『行动』这两个字很重要。


什么样的情况会产生行动呢?我们可以利用眼神,动作以及趋势塑造有动作感的画面。一般,有感觉的设计也会紧紧遵循这样的原则,另外我们对这套理论进行实践,得出快速提升图片魅力的方式,即发现问题,列举课题,评价方案和实施策略。

 

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

如何合理的使用插图来扩展用户界面?

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

合理的功能是良好的用户体验基础。但我们都只关注函数吗?用户是人,他们不仅有解决问题的逻辑,也有情绪支配他们的决定。



合理的功能是良好的用户体验基础。但我们都只关注函数吗?用户是人,他们不仅有解决问题的逻辑,也有情绪支配他们的决定。支持这两种方法的诀窍是将插图应用于web和移动接口。让我们看看它们是如何增强UI设计的。



一、什么是插图?


插图使一个故事的一个片断可视化。它展示了一个过程、动作、环境等的视觉解释。它与纯粹艺术的不同之处在于交流的目的:插图提供信息,传递信息。它们通常是为某种目的而创建的,并集成到各种出版媒体中,包括印刷媒体和交互式媒体。插图也成功地作为一种装饰,添加风格的环境或媒体应用。



二、插图对用户体验的好处


在这个信息消费迅速而庞大的时代,视觉效果的作用越来越大。根据S.Thorpe,D.Fize和C. Marlot 对人类视觉系统处理速度的探索,人们平均需要150毫秒来处理图片,并且需要100毫秒才能理解其意义。图片更容易记忆和回忆,不同语言的人,无论他们的阅读能力如何,他们传达的信息都是清晰的。这就是为什么信息图、图标、插图和其他图形设计师的资产被广泛使用的原因。



简单的说,在UI中使用自定义插图有五大好处 :


  • 它们比文本更快被感知,因此用户可以快速覆盖关键信息


  • 它们支持页面或屏幕的可视层次结构


  • 它们增强了界面的美感和情感吸引力


  • 它们激活了色彩、形状和视觉隐喻的心理


  • 这些都很吸引人,并吸引用户注意必要的细节



应用于网站和移动应用,首先,插图是另一个功能元素,只有在那之后装饰。要发现上面提到的所有好处,分析目标受众并找到有助于用户导航和实现目标的想法和隐喻是至关重要的。另一件事是UI插图应该是简洁的,并且适当地使用:过高的图形强度会增加界面超载的风险。



三、UI插图的类型


在现代界面中,我们可以找到各种风格和方向表达在插图中,从矢量图像和图标到精心制作的数字艺术品。作为功能布局元素,它们可以满足不同的需求和功能。



新员工培训


“入职”是从就业和人力资源领域引入UX设计的概念。它处理一些步骤和技术,帮助新手理解接口如何工作。此外,当新特性和更新被引入或用户与非典型功能交互时,它也被应用。


许多数字产品,包括像Dropbox和Slack这样的大公司,有效地为这个目标应用了插图。支持有意义的艺术作品的入职支持,允许更快的解释功能,并使UI生动。




主题

另一种类型的插画是那些能立即设定网站或应用的总体主题和情绪的插画。它们呈现出强烈的视觉隐喻和联想,从互动的第一秒起就建立起一种情感诉求。它节省了用户的时间和精力,支持积极的用户体验和创造必要的氛围。




教程

教程和工具提示插图展示了可视化提示。这种类型激活了解释的潜力,其主要目的是澄清或鼓励具体的行动。对于不喜欢或无法阅读副本的人来说,这种类型的图像使UI更加友好。它尤其适用于屏幕空间有限的移动界面。另一方面,这意味着即使是最细微的细节都应该考虑清楚,不要引起误解。显然,教程插图是针对青少年和儿童的应用程序的一个好主意。




奖励

奖励是另一种流行的界面插图。例如:徽章、贴纸、奖章、星星、杯子以及其他类似的东西都为用户体验增加了游戏化,标志着用户的进步。有什么比感觉自己是赢家更甜蜜的呢?




吉祥物

吉祥物是人格化的角色,可以轻松地为界面添加拟人化。它们成为界面和用户之间的一种沟通者。吉祥物对网站或应用程序的声音和语气做出了很大贡献,甚至可以成为产品的隐喻面孔。这些图像的象征性使它们令人难忘:它们将生命注入到互动之中。



娱乐

有时候,UI插图的主要目的是娱乐用户。你可能会说它与功能无关,这可能是对的。但它直接关系到情感和审美满足感。谁说美丽、时尚或者只是乐趣不能成为留住用户的可靠因素?



写在最后

Aarron Walter 在他的“ 为情感设计”一书中说:“我们一直在设计可使用的界面,就像厨师烹饪可食用食物一样。当然,我们都想吃有营养价值的可食用食品,但我们也渴望味道。当我们能够使界面既可用又令人愉快时,为什么我们满足于使用它呢?插画有一种强大的力量,它能给每一件接触到的东西添加美感、情感甚至故事情节。这使得它们值得作为一种增强用户界面的强大方式来考虑。

 蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

带你了解荷兰设计史的前世今生(下)

雪涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

在荷兰的现代设计当中,有两个人物无法绕开,那就是风格派里的twins──杜斯伯格与蒙德里安。根据出生年份,蒙德里安是比杜斯伯格年长11岁的,长者为尊,所以我们先来聊聊蒙德里安。

去年荷兰搞了一个活动,叫「风格派100年」,意思是从1917年开始计算到2017年,而海报上面就用了一个人物,就是蒙德里安。而且最后还将2017年定为「蒙德里安年」。

其实按历史上的盖棺论定,风格派的创始人是杜斯伯格,那为什么海报不放杜先生呢?原理很简单,就是蒙德里安比杜斯伯格要红。

蒙德里安最广为人知的特点自然就是画格子和讨厌绿色,画格子好理解,但为什么要讨厌绿色呢?他讨厌绿色的程度到要将家里的绿色植物的叶子涂成白色,作为一个男人如此讨厌绿色难道是跟他的一些人生经历有关系吗,这些自然是一个谜团,但是多数人愿意接受的一个答案是,他讨厌自然。

蒙德里安被称为「一辈子画格子的男人」其实是一种误解,他并非接触画画就开始画格子的,反而是画他后来被认为很讨厌的大自然。比方画荷兰风车、教堂、苹果树,色彩鲜明,造型准确,所以20出头已经是绘画界的一股清流及潜力股,但为什么后来他变了呢,据说是因为一个男人。

这个男人出现在1911年,那就是西班牙鼎鼎大名的画家毕加索先生,毕加索和布拉克在荷兰的阿姆斯特丹举办了一场立体主义画派展。在设计史太浓当中如果大家注意一些年份数字就会发现原来如此多的大师是在同一个时期存在、彼此认识或者彼此影响的,如果要归纳原因只能说是时势造英雄,因为时势的形成会让一些有共同特点的人同时顺应机会出现。比方中国90年代的摇滚人物,及后来中国互联网创业大潮中的腾讯百度及阿里巴巴等,都成为顺势而为的既得利益者。

蒙德里安参观了毕加索跟布拉克的画展,被他们的作品感动到一塌糊涂,因为立体派讲究的立体事实和明确客观都是蒙德里安当时希望追求的目标,于是他那根潜在的抽象神经开始膨胀和律动,他如饥似渴地吸收着立体主义的养分,同年画出了一张习作叫《灰色的树》。画中的树带有一些椭圆形构图,这是模仿了毕加索与布拉克的立体派风格,但其仍然带有不少具象元素,而他在1912年创作的相似尺寸的树系列习作《花丛中的苹果树》(Apple Tree in Flower),虽然大致构图和《灰色的树》很相似,但这幅画已经明显更加抽象,更具形式感,画面被一个个小的块面鱼鳞般拼接起来。

坦白说从《花丛中的苹果树》开始,蒙德里安就不容易看懂,这个时候的蒙德里安去了巴黎发展,因为他觉得那边的环境更加适合从事艺术探索,在法国巴黎他遇到一群同他一样在寻求现代性、革新艺术形式的艺术家、作家、思想家,对他的蜕变产生了不同程度的影响。

随着对立体主义的探索跟创作,他又慢慢觉得立体主义仍然达不到自己想要的纯粹实在,他希望有更加本质的表达。玩热抽象的康定斯基跟玩冷抽象的蒙德里安都十分热爱音乐,他们都曾借用音乐的概念放到自身的创作上,比方节奏与韵律。康定斯基本身就是一名业余大提琴手,而蒙德里安人生中最后的一张作品就叫《百老汇爵士乐》。

在巴黎的那段岁月后期蒙德里安已经开始尝试从立体主义绘画变成一个画格子的男人,只是这个时期的格子一般都没有鲜明的颜色,体现的只是类似音乐里的节奏与韵律。

1914年时候,蒙德里安因为第一次世界大战所以回到荷兰,遇到他生命中第二个重要的男人,就是杜斯伯格,两人在抽象艺术上有很多共同话题,越来越欣赏对方,于是决定组队一起玩。他们在一次很偶然的机会中见到一名彩色玻璃艺术家的作品,其中仅仅使用三原色的色彩计划让蒙德里安深受启发,而这个时候,时间已经来到1917年,他跟杜斯伯格创立了一本奠定风格派江湖地位的杂志,就叫《风格》。而这一年也正是里特维尔德创作「红蓝椅」的同一年,而更准确的说法是,这个椅子在早几年已经创作出形态结构,而受《风格》杂志的影响,才涂上了红蓝黄颜色,不知道这算不算靠蹭热点成名的典型案例。

这个时候的蒙德里安就开始一直创作不同的红黄蓝格子画,这些画甚至连名字都懒得改,基本就是《红黄蓝》大哥,二嫂,表弟,堂弟之类的关系,普遍以《红黄蓝构图》加数字来命名。我们看到这批作品时,会想这不就是扁平化风格的鼻祖大师吗?

好了,这个时候我们要留一点戏份给杜斯伯格。杜斯伯格1883年出生于荷兰的乌得勒之。他在早期撰写过寓言、剧本以及通过临摹博物馆的名画自学绘画。25岁那年,他首次举行个人作品展。其后,他开始发表艺术评论,创作诗歌作品《满月》,说明是有文学根基的。自1916年(33岁)起,他参加了先锋派的所有重要活动,这个时候他已经认识了回国的蒙德里安,随后和他在荷兰莱德创建「风格派」及其同名杂志。

所以严格一点来说,杜斯伯格类似抢注域名的性质,这个风格可以说是他跟蒙德里安一起探索形成的,但是他拿到了奠基人名分。当然我们也可以看看杜斯伯格的作品,其实跟蒙德里安的作品非常接近,都喜欢玩格子,区别是我们会在他的作品中看到一样差异,就是他玩了斜线与对角线,这一点后来导致了他跟蒙德里安的决裂。

这个时候时间已经去到1920年,也就是德国包豪斯也已经成立了,而蒙德里安在跟杜斯伯格闹翻后去了巴黎,在巴黎他因为这种全新的艺术形态加上不断通过写作、演讲、发表作品等方式而成了大名,并成为风格派的代表人物,所以在抢注域名这个竞争中,蒙德里安顺利地掰回了一局。

而1921年时候杜斯伯格也开始到德国包豪斯参观,期间他对这所学校非常感兴趣,甚至决定将《风格》杂志迁移到包豪斯来出版,他在讲学中高度赞扬包豪斯的行动,却又同时批评包豪斯的发展方向。他的《风格》杂志就类似现在的自媒体大号,拥有非常巨大的影响力,所以这对格罗皮乌斯也造成困扰,这也是杜斯伯格一直以来的性格,就是性情变幻无常。当时也正值俄国构成主义观光团在德国游学,他可以当天对他们的作品高度赞扬,但是隔天又提出猛烈批评,完全不按常规套路出牌。另外关于他的一些故事也可以详见《用一篇超全面的好文,带你了解包豪斯的前世与今生》,他跟包豪斯的伊顿在着装上喜欢一黑一白,相映成趣。

包豪斯里有一位著名的教员叫费宁格,他倒是喜欢杜斯伯格直接凌厉的性情,因为杜斯伯格虽然不按常规套路出牌,但是批评的时候理据都非常充分在理,而且杜斯伯格本身具备深厚扎实的艺术素养,并且当时他拥有自媒体大号,被他骂也是出名的一种渠道,所以费宁格建议格罗皮乌斯可以游说杜斯伯格干脆在包豪斯开课程,成为特聘教员,开明的格罗皮乌斯同意了这个建议。

但是这样导致了包豪斯一场噩梦,因为杜斯伯格虽然在艺术理论上有主张,但是教学上倾向无政府主义,说白了就是完全不服从组织的管理与安排。当时位于德国魏玛的包豪斯搞结构主义与达达主义大会,但是在教学上这些激进思想并没有给学生带来太多实质性的支持与帮助,课堂上的杜斯伯格大吵大叫,而他的夫人则在一旁用钢琴演奏构成主义的非调性音乐。关于什么是无调性音乐,大家可以看看网易云音乐这些朋友的评论:

所以现场非常混乱,简直无法进行下去,而且他还经常在包豪斯的课堂上批评包豪斯是非理性的,是浪漫主义的,而自身却在进行非理性的行为。于是在1922年,格罗皮乌斯跟其他教员都实在无法忍受,决定由格罗皮乌斯为代表对杜斯伯格进行劝退,最后杜斯伯格虽然是离开了包豪斯,但很快就在包豪斯附近建立自己的培训学校。他传授「风格派」抽象主义艺术思想与创作原则,这也吸引了大量的包豪斯学生前去听他的讲学,但期间他继续对包豪斯的教学方向进行批评,可谓是非常执着。

但不管如何,杜斯伯格是将风格派思想带到德国包豪斯的关键人物,他主张的「风格派」(style-less),期望找到更加简单、更加国际的术语来建立国际风格基础。

这种艺术观点为包豪斯所吸纳并产生重大影响,抽象艺术也因此逐渐成为现代设计的一种国际风格,引导了整个20世纪的产品造型。他其实也通过包豪斯提升了「风格派」在国际上的地位,所以相辅相成。「风格派」也因此与俄国的「构成主义」、德国现代设计运动一起成为现代艺术设计运动的重要组成部分。

杜斯伯格与蒙德里安在个性及气质上形成比较鲜明的对比:蒙德里安温和且有耐性,总是缓慢前进,不断精益求精;杜斯伯格则常常显得冲动,性格中更多的是挑衅性和攻击性,而较少有建设性成分。

但不管如何,两人仍是风格派中的twins,缺一不可。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

带你了解荷兰设计史的前世今生(中)

雪涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

荷兰风格派设计及其相关的一些大咖在之前的各种分享当中都曾经客串走场,比方杜斯伯格出现在包豪斯的分享,蒙德里安出现在俄罗斯的构成主义分享等,今天他们终于要唱主角,其实经过今天的了解,大家会发现风格派一直以来都不容小觑。

首先我们来了解一下,风格派的特点是什么。其实风格派单单看名称就特别牛气,比方我们会说这个汽车叫奔驰,或者这个汽车叫捷豹,不会说这个汽车叫汽车,然而当我们说起风格派时跟这个汽车叫汽车一样,这个风格就叫风格派。

风格派有一句名言,出自杜斯伯格,叫「剥去本质的外形,你就会得到风格。」

这句话有点抽象,但有这种感觉已经对了,因为风格派确实是抽象的,而且属于「冷抽象」,关于冷热抽象这个概念大家可以回顾我们之前的分享《用一篇超全面的好文,带你了解俄罗斯设计史的前世今生》,因为这种冷是相对俄国康定斯基的热抽象而言的。

冷抽象大致是这样的:

这是多数人对风格派的一种理解及印象,说白了就是红黄蓝三原色的组合设计,然后很多纵横错落的线条。因为风格派几乎没有曲线,直线让人感觉很冷静,很理性,很稳定,所以被定义为冷酷抽象。

我们再看看下面这几个图:

其实这也叫风格派设计,但并没有出现红黄蓝,所以风格派设计一定就有红黄蓝是一个认识误区,其实风格派的形式定义是这样的:

把传统建筑、家具、产品、绘画、雕塑的特征完全去除,变成最基本的元素集合,甚至把某个元素单独孤立起来绝对化,这些元素最后基本都以几何形态呈现,形成简单的结构组合,强调纵横运用及不对称,并且只使用三原色及黑白色(极色)。

看完这个解释再回味杜斯伯格那句「剥去本质的外形,你就会得到风格」就相对好理解了。

那么这种风格到底是怎么形成的呢,说来话长,但可以确定的是不绝对源于某一个人,某一个时间及地点,它就像一个集体完成的雕塑,其实大部分的风格都是如此,但自然离不开一些关键的大咖。

在叙述这些大咖之前,我们先来了解一下时代背景,在什么样的外部环境中孕育了风格派。

在第一次世界大战,1914-1918年期间,欧洲列强为了重新瓜分殖民地及争夺世界霸权而打得不可开交时,位于西欧的荷兰宣称保持中立,意思是各位兄弟你们可以在我附近打架,但尽量保持安静,欧洲列强自然清楚荷兰曾经也是海上霸主及殖民地大国,并非省油的灯,所以荷兰就在一战期间获得了安静发展文化的环境。

由于中立,荷兰成为欧洲各国艺术家的避难圣地,一时间人才济济,各种野兽主义、立体主义、未来主义等现代探索名家开始纷纷在此聚义,趁世界大乱之际研究如何形成一种新的艺术形式,因此慢慢就有风格派的雏形。风格派的萌芽基于了这几个主义的风格及思想。

这个时候出现了一位人物,叫托马斯·里特维尔德,他1888年生于荷兰乌得勒支,是一位木工的儿子,从小自学绘画,后来从事建筑设计。似乎那个年代的设计师都是建筑设计师起家,或者具备建筑设计技能,就好比当代很多UI设计师都是平面设计出身居多,这也属于时代发展的一种特征。里特维尔德在1917年做了一件大事,设计了一个划时代的椅子叫「红蓝椅」,这个椅子被视为家具设计史上第一件现代家具,在色彩上几乎就是红黄蓝加极色(黑白)。虽然是一百年前的椅子,但就算放到当代展览馆也一点不显得过时。

红蓝椅整体是木结构,13根木条互相垂直,组成椅子的空间结构,结构间用螺丝紧固而非传统的榫接方式,最初曾经是灰黑色的,后来里特维尔德希望用单纯明亮的色彩来强化结构,于是参考了蒙德里安的三原色风格,而且被认为简直是蒙德里安《红黄蓝相间》这个绘画系列作品的立体版。椅子就这样产生了红色的靠背和蓝色的坐垫,但手和椅腿仍保持黑色,少量黄色被用来强化断面,于是成了一个典型的风格派作品。

但这个作品其实历史意义与形式主义大于其功能意义,因为很多有机会试坐这个椅子的人都感觉坐得很不舒服,特别对腰椎间盘突出者来讲简直是灾难。我们很多时候衡量一个设计作品靠的主要是两把尺子,就是形式与功能,有时候很难去界定哪一个更加重要,但总的来说很多人是能够忍受形式上的缺憾而无法忍受功能上的不足。比方你可以忍受一对鞋子颜色不太满意,但无法忍受它比你的脚少了3码,所以很多时候这两者是优先级问题,假设三双鞋子都合脚,那么你选择的时候形式就很重要了。

在设计红蓝椅之前里特维尔德还是一个无名之辈,他的工作仍然以建筑及室内设计方面为主。比方为一名与丈夫分居的女士设计房间,让这位女士对其设计水平非常肯定,直到1917年后里特维尔德成名,这位女士也成了寡妇,凭借过往交情,她希望里特维尔德能为其孤儿寡母再设计一栋生活的寓所,并且任由里特维尔德发挥,于是历时五年这个房子在1924年落成,就是历史上非常著名的「施罗德住宅」:

而经过五年相处,里特维尔德与这名女士日久生情,两人谈起恋爱并且在这座共同完成的房子生活了一辈子,直到1964年里特维尔德去世,而这名女士一直在这所房子里活到95岁。

我们可以看看房子内部,简洁的体块,大片的玻璃,明快的三原色,错落的线条,被视为现代设计建筑及室内设计教科书级的作品,同时也是风格派建筑当中重要的代表作品之一。

其实在我印象中,似乎九十年代初的广东地区有很多住宅或者室内设计是模仿了这种风格的,特别是一些工装设计,所以一直有莫名的熟悉感,而且也分不出是在电影里看到还是现实中见过,不知道屏幕前的广东朋友是否有同感。

跟里特维尔德差不多时期,有一名画家叫莱克,画风是这样的:

很多人第一眼看到这种作品通常都会惊讶,他将很多视觉元素降低到了的界限,基本上就是使用三角形、四边形和不规则的多边形来表达,可谓是将设计上的减法做到了。网上已经很难找到这位画家的详细资料,但当时风格派已经形成气候,所以很多人都开始使用这种风格来进行探索。

很多人看到风格派的表达形式时都觉得很容易伪装,其实这种想法是很天真的,比方我们看看某个房产项目在模仿风格派时的建筑效果图,就明白东施效颦的含义:

风格派有另外一个别称叫新造型主义,至于风格派的形成除了客观的一战时代背景外,也跟其核心思想有关,曾经有一种分析认为,风格派的思想与哲学里的「二元论」有关,至于什么是二元论,简单来说就是物质与精神都是世界的本原,好比风格派里坚持使用的横线与竖线,但是把设计说到这个份上就很容易上神坛,而且很多时候也是后来者的一种臆想或者牵强附会,这并非史太浓倾向的叙述方式。风格派里的重要人物蒙德里安有过一些接触通神论的经历,所以他认为设计与艺术是一种纯粹自我的精神表达,因而放弃写实风格,而重视内心世界的表达一直是荷兰人的一种艺术特色。

我们在最后来总结一下风格派的作品特点,一共有三点:

带你了解荷兰设计史的前世今生(上)

雪涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

其实荷兰,不止有风车与郁金香。

有句话叫:神造了世界,而荷兰人用设计造了荷兰。到底怎么回事呢,今天一起来探讨吧。

话说现代主义设计的形成离不开三驾马车,分别是德国包豪斯、俄国构成主义跟荷兰风格派,包豪斯及俄国构成主义我们均已在之前的分享里详细谈过,所以今天我们聊一聊最后一架马车——荷兰设计。

相比英国、美国及日本,荷兰这个国家于大部分设计师而言未免有点陌生,但如果欧洲的设计圈要按国家排座次的话,撇开爱国热情,史太浓认为荷兰挺进前三甲是毫无毛病的,关于荷兰设计水平发达的原因有几种说法,其中广受公认的是因为荷兰的生存空间太狭窄。

荷兰41000平方公里的土地上容纳了1675万人口(2018数据),成为人口密度最高的国家之一,因为土地资源的缺乏,所以在1920年政府动手排干一个叫伊塞米地区的海水,形成低于海平面的人造陆地,是欧洲最大的填海工程之一,项目成功后荷兰故技重施,陆陆续续进行填海,最后有四分之一的陆地低于海平面,所以整个国家在跟大自然搏斗中不得不进行各种设计思考,否则生存都成为问题,于是荷兰设计总体而言发展到当代变得特别功能主义及理性主义。

荷兰的发展历史

荷兰位于西欧,东接德国,南接比利时,有悠久的文明历史,文艺复兴之后还曾经一度是海上霸权国家,比方印度尼西亚就是它的殖民地之一。第二次世界大战后的荷兰开始高速发展资本主义,经过几十年进取,进入「世界最富有国家」俱乐部。

荷兰的社会福利在江湖上令很多国家闻风丧胆,比方我随便列举三个第一:

  • 全球养老金指数世界第一
  • 欧盟各国医疗体系排名第一
  • 全球儿童福利世界排名第一

这样可能有点不够具体,我罗列一个儿童福利的具体数据,比方小孩从出生至18岁,政府每月发放约300多欧元(大致2500元人民币)儿女金,政府补贴儿童日托或幼儿园的费用达70%,而且从小学到大学一直享受超过学费的现金补贴,说白了就是以各种不同形式给你钱花,等于说父母只是负责生,政府来养,甚至一不小心还能赚到钱。

荷兰是一个工业高度发达的国家,比方拥有1891年成立的百年跨国大企业飞利浦,全球员工13万人,在28个国家拥有生产基地,所以飞利浦是荷兰的国家电器制造业中心,同时也是欧洲及世界最大的电器企业之一。它的设计系统非常完善,属于战后早期成立内部设计部的大型企业之一,设计带动了整个公司的发展,甚至在战后一度成为荷兰的经济核心,能与德国的 AEG(德国现代设计之父彼得贝伦斯设计世界最早的vi系统就是AEG)及西门子公司竞争,其中荷兰有45%的出口产品都是飞利浦公司的,所以地位非常显赫。

由于荷兰的「风格派」设计过于知名,所以一谈荷兰设计大家都认为是红黄蓝类型,也正因为如此所以很多荷兰当代杰出的设计师往往不为荷兰以外的国家所熟知,但这不能完全怪罪风格派,造成这个状况还有一个更重要的原因,就是荷兰政府跟社会太过重视设计了。

除了设计师本身,荷兰很多产品也不为世界普遍认识,比方汽车,荷兰有一个跑车品牌叫「世爵(spyker)」,在中国基本看不到,我在网上找了很久才找到一个深圳二手车信息:

这台09款的汽车原价550万,9年后仍需要200万出手,没错,「世爵」的跑车全部只做纯手工定制,所以只服务美国、西欧、中东及一些小型而富裕的国家,比方瑞士跟摩纳哥,我们也可以从下面的图片感受一下荷兰的奢华汽车设计,还有纯手工打造的内饰质感:

因为设计与荷兰的国计民生密切相关,比方大量的围海造田,强大安全的排水系统,农村的防潮汐堤坝,拥堵城市的合理交通网络,都需要高水平的精心设计。荷兰人民的历史就是一场以设计建立生存空间的斗争史,荷兰鹿特丹布宁根博物馆馆长威廉·科罗威尔曾经说过:只有依靠设计,我们才能使我们的国家成为一个可以日日生存的地方。

所以荷兰设计师在国内地位非常高,也因为如此设计市场非常繁荣,所以单单政府与市场需要消化的设计项目就忙不过来,也就少到其它国家行走,自然在名声上也相对局限。

荷兰政府对设计的重视犹如中国人对面子的重视,我们搞的是面子工程,而他们则搞的工程都是面子。

比方以下几个荷兰本土项目,被视为世界上「教科书级」的设计范本。

荷兰「教科书级」的设计范本

1. 货币设计

全世界的货币设计都有一种无言的默契,就是爱使用名人肖像为设计的中心元素,而荷兰的货币设计是第一个打破这种规则,不使用任何人物的,如果一个国家并非重视设计行业,并非充分尊重设计师的话,这完全是匪夷所思的事情。

荷兰的货币由财政部统一管理,在荷兰财政部当中的设计管理部门的提议与组织下,聘请了荷兰最知名的平面设计师来参与,其中也有不少独立设计师,比方在去年很遗憾离世的荷兰纸币设计大师奥克斯纳,他曾经在1964年受邀参加纸币设计,他回忆说:每种面额纸钞的设计周期需要3年,所以当最后一种面额投入流通,距离我刚刚开始纸钞设计工作相隔整整30周年。

不以人物为中心的荷兰货币设计主要是使用抽象图案进行创作,体现出荷兰从「风格派」以来的立体主义、构成主义形式传统,所以世界上有诸多收藏家是专门收藏荷兰纸币的,比方250吉德(荷兰货币单位)被视为艺术品,极具收藏价值,这是世界货币设计中的一种创举。

2. 西佛尔国际机场

荷兰的首都阿姆斯特丹国际机场又称为西佛尔国际机场,它的设计面貌完整代表了荷兰战后政府对于基本建设及现代设计的积极态度和正确引导。

荷兰长期以来一直没有卷入地区性或者世界性的战争,比方第一次世界大战它始终保持中立,但无奈第二次世界大战中被德国短暂占领,时间为1940-1945年,随后继续独立。西佛尔机场就是战后1967年4月建成及投入运营的,当时世界各国都在着手建立自己的国际机场,但是一个为世界服务的现代化机场需要什么特征与设计考虑呢,几乎没有一个国家可以拿出成熟的方案。

荷兰政府牵头组织了大量社会的优秀设计人员,技术人员成立项目组,充分考虑机场未来的交通流量、国际乘客的共同性要求及乘客特征,尽量让机场达成中性、合理、理想等设计特点,跟著名的国际主义设计特点吻合,达到了能为广泛乘客服务的目的,机场落成之后在整体性与完整性功能性上都让欧洲国家感到震惊,这座巨大的标志性建筑在建筑设计、室内设计、平面设计及导视设计等方面所具备的现代主义风格在长达20年的时间里,都成为欧洲国家设计国际机场时的重要参考依据。

所以当时的荷兰设计师完全可以喊一个口号,叫:厉害了,我的机场!

3. 铁路系统

荷兰的铁路系统是在机场完工之后相继落成的,荷兰设计有一个非常厉害的特点就是总体化规划。如果设计师是演员,那么总体化规划就是导演技能,荷兰设计师善于此道,所以它的铁路系统视觉化高度统一,形象与导视系统清晰简明,功能性强,而且设计项目中包含的内容非常多,比方火车厢、火车站、客户内部、车票、路牌、标识、乘务员制服等等,所以如果缺乏总体规划,这是一项难以出色完成的设计工作。

经过一段时间的运营,荷兰的这个铁路系统在效率、安全性、舒适性上在全球都名列前茅。甚至被评为世界上设计得最完善的铁路系统。

荷兰的设计业为何如此的发达成熟,原因总的来说有几个方面,比方国家相对比较小,拥有悠久的艺术历史,比如产生伦勃朗、梵高、蒙德里安等世界知名艺术家,同时经济富裕繁荣,需要通过设计思考与自然搏斗等几个综合因素,形成具有很浓厚创作性的社会氛围。

其中尤为重要的还有荷兰政府对文化事业非常慷慨,形成一个宽松的文化赞助系统,设计师在一个资金充裕的环境里工作,很多时候不太需要考虑经济效益,所以更加专注于设计的合理性及艺术性上,自然就有更高层次的输出。

谈到荷兰设计自然无法绕过其标签式的「风格派」运动,因为当代设计其实受其影响非常深远,史太浓这次使用倒叙手法,先看结果再找原因,所以下一期我们将会聊一聊荷兰的风格派产生、特点、代表人物及对现代设计的影响。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

极简主义扁平化配色作品

用心设计

今天分享来自设计师 Dumma 设计的极简主义扁平化配色作品,这些作品的颜色非常好看,也非常特别。

这不仅仅是一组配色方案这么简单,设计师一共设计了8组色彩搭配,每组颜色分成5个色块,并将上、下两个色块设置不一样的高度,就能形成一张非常漂亮的海报,同时设计师还有把这些配色用到了其它方面,我们一起来往下看吧:-)

如何应用这些配色?

配色方案很漂亮,但是如何如何应用这些配色让作品更有意义呢?DUMMA 设计师想到把这些配色印刷到实物产品上,比如杯子、时钟、被单、海报等实物上,真的非常搭配,同时也用来作为自己原创商品在网上进行销售,并获得利润,真是一举两得。

▲抱枕

▲极简时钟1

▲极简时钟2

▲被单

▲沐浴帘1

▲淋浴帘2

▲旅行杯

▲海报

▲手提袋

喜欢这些配色吗?请拿去练手,作为设计师,有空的时候也可以做点创意练习,并像 DUMMA 设计师一样,印刷到海报或者杯子上,如果你认为自己的作品非常好看的话,也可以销售它,业余赚点零花也不错,说不定有成为爆款的潜力呢。

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

从心理学聊下构图那些事

雪涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

平面与版式背后是千年来人类读取信息形成的习惯、约定俗成的阅读方式和心理学等,想成为一个优秀的设计师,我们需要进一步了解设计背后的原理以及表达信息的多种方法。

Image title


在中国绘画中,有所谓章法、布局。中国绘画最讲究“经营位置”,因而有了中国画高远,深远,平远独特意境的画风体系。大家学习的设计体系中对构图的分析就更加的全面,比如大家都了解的形式美学法则:均衡与对称、渐次与重复、对比与调和、比例与尺度、节奏与韵律、体与主体、微差与统调、特异与秩序、前者多显示生动型,而后者显示秩序型。


那为什么会总结出这些理论与法则?究竟又是什么在影响着我们的观察与思考呢?有时候我们会不会遇到这些问题:


1. 有时候我们在面对需求,需要强理论支撑自己的设计,但又找不到切入点,总会拿什么对比,对称,韵律说事,需求方却不为所动……


2. 在平时的设计工作当中,大家不可避免的会参考和研习其他设计大师,同行的各类设计作品,大家肯定会有各自关注的点,创意,排版,颜色,细节刻画等等等等,无论是那种类型的设计作品(平面,招贴,海报,H5,banner等),有时候会不会感到:看了好多作品,临摹了好多作品,依然做不好设计;问题出在哪里呢?


3. 我们总会收集一大堆的素材参考,那你的评判方式是什么?你又是如何分析画面?为什么好,好又好在哪里?……


接下来我们透过视觉表象,揭开那些神秘的面纱,希望通过我自己的学习和研究,能够对大家有所帮助。






Image title




Image title


为了更快地解析周围的世界,大脑会投机取巧地偷懒。大脑每秒要接收约4000万次的感官信息输入,并试图完全解析出它们的意义,所以它会根据以往的经验,猜测我们看见了什么。 


Image title


经典再现,看左边的图,第一眼能看到一个黑边三角形,上面叠了一个白色倒三角,右边的图,你能明显感知到一个矩形。


卡尼萨三角


这是1955年,由意大利心理学家发现,并以她名字命名的“卡尼萨三角”。这个视错觉表明我们的大脑把实际上不存在的三角形轮廓线画了出来。


我们把根本不存在的轮廓线称为主观轮廓




Image title


对于识别具体物体来说,中央视觉是最重要的;

对于认知整体场景而言,周边视觉更为关键 ;


Image title



通过电脑屏幕观看网页,你并不用刻意浏览,而是整体扫过就能判断整个页面的内容。所以大多数人都低估了周边视觉对于我们理解事物的重要性,人对场景的认知似乎都来自周边视觉。




Image title


发现规律有助于快速处理时刻接收的感官信息。


Image title



看上面的图,你会很自然的将其分成4组,每两个点一组,共8个点,而不是上来就直接定义有8个点。


大脑视觉皮质中的细胞分工不同,分别只对横线、竖线、边线和特定角度的线作出反应。  




讲完上述三个心理学常识,我们看下这三个点对应到我们设计当中又是如何一番情景,看下图:


Image title




轮廓



之所以将第一个心理学观点与轮廓关联,是因为在我们设计过程中任何一个形式的产生都会形成一个轮廓,那画面元素多起来之后,画面就会被这些轮廓分割成一个负向空间,很多时候我们都会忽视这个隐藏存在的形式,有时大家怎么调整一个设计元素本身,都会感觉不尽如人意,其实有一种可能是:这个元素在整个画面中所形成的轮廓并没有达到同步的和谐;


如下图插画,一个女性形象,画风简洁干净,画面给人很强的整体感与完整型。如果是我们,会不会更多的去关注这个插画的精彩之处是比基尼处理很生动,人物阴影细节刻画的很到位?但是关键点是这些吗?


Image title


继续分析,如下图:


Image title


图A,把整个图形黑白化后,想想我们的第一个心理学观点,一幅画面第一影响我们的是脑海里形成的这个轮廓。像这个画面,一个完整近似几何般的人物轮廓(样图白色部分),同时这个轮廓所分割形成的空间(样图黑色部分),让整个画面安静有序规则,让人的视线能够自然流淌,不会轻易地跳动转换;所以图B,你会发觉,不管我如何填充纹理图片,这样一个画面是始终和谐,没有违和感的。再比较下图:


Image title



笔者随机处理的一个形状,有没有发觉,在没有一个有序优美的轮廓之下,纵然你把内部的修饰刻画的再如何精彩,这个画面依然是索然无味,毫无生气的。




Image title



设计元素要注重轮廓的修饰提炼——在设计表达过程中,不管是何种设计,我们都要注重每个呈现元素的轮廓是否精巧,注意脑海里主观轮廓之外的负空间是否舒服与和谐,画面是通过这些彼此联系的,不要一上来就关注所谓的细节,经营你的形状。


Image title




留白



第二个心理学观点与留白相关,是因为整体认知与周边视觉关联极大,看下图:


Image title


好了,大家能够认知到什么程度,这是什么?怕是大家怎么猜都不会确定这个是什么。


Image title


当笔者呈现完整图画后,大家是不是一下子就豁然开朗了。留白是至关重要的,留白很重要的一点是加强了元素与元素之间的关系,我们通过创建轮廓来形成元素,元素与元素之间的关系,通过留白-元素之间形成的负空间,来相互影响,最终形成协调的画面。留白可以形成空间,引导,形状等多种可能,让作品更生动更有呼吸。


Image title


看上图,苹果设计对留白的使用很了,通过产品严谨的排布,大家可以很清晰的感受到物体分割画面后,留白的清晰走向以及秩序,你的视线会通过大脑的分析呈现出无限扩展的空间,安静空灵不干扰,更能彰显苹果设备本身的高端属性。再简单一点解释,通过弱化周边视觉的干扰,让人更多的聚焦中央视觉,让你对产品的感知更加深刻。这时候留白是空间,烘托画面,安静的美少女


Image title


看上述网页设计作品,画面通过主视觉形成的轮廓之后,呈现出大面积的留白空间,在这些空间基础上,进行了核心信息的展示。注意左图黑色主轮廓的部分并没有信息呈现(集中展示了品牌形象气息),而在留白部分展示了文字信息加以说明;右图部分则在折线这条主轮廓型的两侧,有序展示了信息。这样的设计,在网页滑屏过程中,增加了画面的动感效果,更重要的一点是在引导视线过程中,你会更关注内容的信息呈现,想想我们的视觉,对于认知整体场景而言,周边视觉更为关键;因为你会很不经意的在意留在中央视觉(在设计中就是刻意设计引导你视觉的主轮廓)之外的东西,这时候留白是引导,展示信息,完美的指挥家。


Image title


再看这组作品,理解这组留白相对比较复杂,注意笔者图示位置的留白,很多时候,我们都习惯把画满一个画面当作第一要务,填满是可以保证我们看到的画面至少是饱满不空的,但是往往适得其反就是乱和没有灵气,所以一些设计作品试图去突破一些视觉固式,那这时候留白就是一个极好的帮手,无形中启到一个形状的作用,补充画面达到画面的和谐统一,又增加韵味。像左图就是通过一个红色面积的模块留白,与标题呼应的同时,让画面方圆能够更自然的流淌,增强画面的灵动感,右图则通过添加元素,让留白区域形成某种场景或者纵深,这样就对文字形成了一种补充,烘托文字的效果,增强感受,两者看似有明显空白,但是整体又是完整的。看下图,其实这又牵扯到我们第一个讲到的心理学:眼见非脑见,我们的大脑会自动去找寻某种轮廓。而这里轮廓的形成是通过留白去帮助实现的。这时候,留白是形状,参与构成,积极的组织者。


Image title




Image title



留白,是形式的延展...空间,引导,形状——元素在构成画面中一定会产生留白,留白对画面的意义在于可以帮助我们更好的展示内容,帮助我们营造空间,创造联系,配合形式,让画面更加有序有感。




构成



讲到构成,这个名词大家都不陌生:一定的形态元素,按照视觉规律、力学原理、心理特性、审美法则进行的创造性的组合。很显然跟我们的心理学原理三不谋而合,人是习惯寻找规律,也很习惯创造规律,所以在设计领域,才有了对点,线,面等不断的研究与实践,在抽象的形、色、质的造型方法上不断追求与探索。


Image title


看上图,这是一张展览海报,海报简洁干净,稳重大气,没有太多笔墨渲染,背景图的选择,以静制动,让整个海报有种高山流水,知音无限的浓郁气息。先想下我们之前的说明:大脑视觉皮质中的细胞分工不同,分别只对横线、竖线、边线和特定角度的线作出反应。再结合下点线面构成的知识。首先画面三个大字,这是点,然后由上到下一个“之”字形排开,斜线至此形成,你的第一视感规律完结,接下来注意画面背景图的选择,瀑布从上而下,这个水流的动势极大得帮助和引导了我们的视线阅读,竖线至此形。画面感就形成了,你会很自然舒服的去阅读这个海报。


但是就此就结束了,视线总体流动是这样的,为什么设计师要把字放到画面这个位置,而不是其他位置呢?想想刚刚说的规律,人喜欢规律,创造找寻规律,并以此为根据去实践,这里就牵扯出了大自然里最神奇的定律黄金分割(今天的文章暂时不讲,之后我会带来关于黄金分割的文章分享哦),继续看下图,


Image title


首先,A1,A2这是画面横向宽度上两条黄金风格线,B1,B2,B3这是画面纵向按顺序的三条黄金风格线,当画出这几条黄金分割线,是不是一目了然,海报作者把核心元素有序安排在黄金风格线及焦点之上,和谐之美,一张看似简单的海报蕴藏着如此丰富的魅力,我们也可以感悟到设计师本身严谨的气息和对构成形式的细心推敲。如果是我们,又会是怎样的呢?


Image title


再看上图,大家可以自行按照上述的方式去分析一下。下图海报可能更复杂些,但是其中的规律也是可以寻找的,画面通过两组不同斜面创造大的规律动势(右图黑红示意),同时巧妙的利用交叉后形成的三角形,形成点的元素,作为人物画像的载体之用,因而三角形是从整体上而来,有序而有组织,相互有关系,不会显得乱。


Image title


更令人惊奇的是,当我也使用黄金分割试图去进一步分析和理解画面的时候,你会发现人物的面部表情—眼神,全在分割线上,所以有没有觉得,这个海报的每个人都感觉实在你在对视,莫名的一种震撼,画面的张力,不得不佩服国外设计师的严谨。


Image title




Image title



合理使用点线面,引导组织画面——优秀的画面从来不是无组织无秩序的,都是通过点线面的仔细经营来创造最佳的视觉效果,而这个视觉效果,是能够自发的去引导观众的视线,让规律自然被阅读,达到形神合一。




今天通过三个心理学,引出设计中三个设计要点轮廓,留白,构成,其实彼此之间是一个递进联系,有了元素就会产生形状,跃然纸上,则需要足够的留白去为元素讲故事,然后这个故事就是构成,你使用如何的手段,让他更丰富更有内涵,一目了然。三者的有机结合就形成了我们所说的构图,视觉语言中构图是非常重要的底层环节,相比华丽的细节和各种炫目的效果,画面中隐藏的构图实际上才是视觉设计的核心!


Image title

Image title


看一下这些电影场景,是不是恍然大悟,看似复杂的场景,都建立在这些几何图形的基础骨架之上,回忆下文章之初的心理学观点,其实设计知识背后是人类读取信息几千年来形成的习惯以及现代社会约定俗成的阅读方式和心理学等,要想成为一个优秀的设计师,我们需要进一步地了解设计背后的原理以及表达信息的多种方法,就像研究表明,人类能识别 24 种基本形体,这些基础形状称为几何离子(方形,圆形,三角形,圆柱体,圆锥体等),这就落回到我们讲到的心理学:我们眼睛能够寻找的规律,而上图的电影画面也都构建在此基础之上,因为这样的形式更容易让我们的视觉去捕捉去理解。


讲了这么多,就是希望能够帮助大家在平时的设计工作和日常的学习积累过程中,能够有一种思路和方法,去判断和解读作品,去分析这个设计为什么好,好在哪里,去把设计进行有效的分解(元素本身的样式,元素所在空间的留白,以及彼此之间的关联)给你自己的设计说明增加筹码,以便更加得掷地有声。


最后,既然我们知道了这些心理学知识,了解到了我们的观察习惯,在之后的设计过程中我们就需要努力做到以下几点:


1.  经营好元素的轮廓和位置;


2.  人会不由自主地寻找规律,那就尽量多使用规律,利用分组和间隔创造规律;


3.  要让某个物体(例如图标)易于识别,就用简单的几何图形来画它。这会让构成物体的几何离子更明显,从而使人更快、更轻松地识别该物体;


4.  控制好你的形式,形式在内容之下,形式服务内容。文繁则质衰,末胜则本亏,过分强调文饰与修辞,内容就会受到遮蔽而显得软弱无力,形式重于内容,其实就是舍本逐末。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档