首页

APP注册流程及视觉优化

用心设计

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

 

本次分享阐述了我关于理财APP注册流程的视觉及结构上的改进,分为理论阐述、竞品分析、改版实践三个部分。

主要向大家讲解一下当一个UI设计师在做UI设计改版的时候,他在思考什么,他做出这一步设计的原因是什么。同时在大家的讨论反馈中,我作为一个UI设计师,也能更好的明白产品看待一个界面设计的角度。

一、关于注册

一旦用户体验时涉及到资金进出,留言互动以及定制个人信息等内容,那么就会触发注册或者登录环节。

目前,手机已经成了移动互联网时代的天然身份证,而且可以实时验证。这也是互联网金融领域基本都采用的注册方法。

手机注册都是通过手机短信获得验证码,注册效率极高。好的注册页,就是“简约而不简单”,做到体验流畅又抓住了核心。

二、设计中“5w+1H”原则的实践

1.WHAT(目标):

石投金融移动端注册流程+视觉的优化

现版本石投金融移动端的注册截图

其实光从视觉上,我们的APP其实属于市面较大众的类型,没有追求设计趋势,但是中规中矩,在很多网贷APP中都能见到。但是我们应该思考的是,注册作为吸引新用户的重要一环,我们能否做的更好?

2.WHY(优化原因):

石投金融目标用户为40岁的中年人,我对此设定其实是不太同意的,使用过程中我注意到其实对于产品的结构流程来说,

3.WHO(目标用户):

中净值用户(年龄结构为30-45岁之间,对互联网新事物有开放性心态,对APP的设计水平有一定要求,并且操作流程不可像PC端一样交互繁琐死板。产品偏好:安全保障三件套(风险准备经+阳光保险+资金托管)+高收益,运营拉新策略:促销+再促销+拉好友+再拉好友)

4.WHERE(使用场景):

互联网金融领域方向的移动端APP。用户、需求和场景是产品设计前必须要考虑的三大核心要素,只有能满足目标用户在特定场景下特定需求的产品,才有可能成长为独角兽产品。

5.WHEN(何时使用):

用户体验时涉及到资金进出及个人信息等内容。

6.HOW:

后文阐述。

三、产品的注册流程

定了这个研究主题之后,我着手研究了APP的注册流程。用户点击【我的】icon之后,弹出登录页面,注册按钮位于次要按钮区域,用户需要点击之后才能进行注册。首先我考虑的是,对于一个刚下载APP的用户来说,登录是比注册更高优先级的交互吗?从第一步开始,我们的流程就在消耗用户的手指点击次数。点击次数越少,用户使用产品感受越舒适流畅,注册转化率越高。

然后用户点击注册之后,会让他输入手机号。这时又涉及到一个小的交互缺陷,就是用户需要再次点击输入框才会弹出键盘开始输入,又消耗占用了一次用户的手指点击次数,属于无效交互。

下面我们终于到了输入手机号的环节,用户输入手机号,如果用户早就注册了我们的产品,但是忘记了,输入了已经注册的手机号之后,我们产品现版本的流程是【弹窗告知用户“您的手机号已注册”】,需要用户点击“确认”才能关闭这个弹窗,然后就什么操作都没有,停留在这个输入手机号的页面。用户需要手动点击“登录”文字按钮才能切换到登录界面。如果是一个40岁的中年人,他的使用APP经验不多,他可能会适应这个硬中断的过程,反应一下确实是自己操作问题,是自己的过错,而乖乖的去点击“登录”按钮,但是如果是一个30岁左右的年轻人,在各种APP如亲妈一般的母爱关怀下,他可能就很不舒服,对APP的印象不好从而流失。

现版本注册错误的界面交互

四、相关理论——分步注册

1.分步注册适合移动端设计:移动端屏幕小、加上弹出键盘,假设将多个输入项放在一个页面,会给用户造成拥挤感,然而分步注册则可以较好地解决该问题。

2.分步注册可减少用户点击输入框的次数:几乎所有的注册关键步骤中都有:输入手机号、获取验证码、设定密码这3个步骤。如果这三个步骤在同一个页面,则需要用户手动点击输入框呼出对应键盘来填写这些信息。如果遵循分步注册,分成三个页面的话,进入每个页面都会自动置入焦点并弹出键盘,将减少用户手动点击输入框的次数。

3.分步注册在一定程度上可以提高转化率:Facebook曾经针对分步注册与非分步注册做过A/B Test,其结果指出分步注册的转化率远高于非分步注册。由此可见,非分步注册强行减少注册页面倒不如拉长战线,给用户轻负荷的操作,让用户在不知不觉中完成注册流程。

上页我们讲述了【分步注册】的理论,结合这个理论我们来看APP的第二步——输入验证码及输入密码。属于非分步流程。虽然看似减少了用户的操作步骤,但是使用过程中用户需要经过等待验证码——点击唤出数字键盘——输入验证码——点击唤出英文键盘——输入密码——点击注册(如果验证码或者密码有一项错误,便会弹出错误提示之后停留在此页面等待用户重新点击输入框自己删除输入的数据然后重新填写)这样的流程。写到这里我的头有点疼,所以不做过多阐述,大家可以自己体会。

五、竞品分析

由于市面上网贷APP数量太多,但是注册流程都一致为【输入手机号】-【输入验证码】-【输入密码】这类三要素流程,所以我选取了A级网贷产品微贷网、翼龙贷、拍拍贷及支付宝(副参考)作为分析对象。由于我没有可用于注册的多余手机号,所以很多流程没有进入输入验证码之后的下一步,但是已经足够看出一个APP关于注册流程的优化思路。

拍拍贷

拍拍贷的流程其实跟我们产品的比较一致,最后一步属于非分布流程。但是第一步的注册登录判定以及设计上的通过字号对比让用户明确自己所处的位置这样的iOS11设计理念值得我们参考学习。拍拍贷的最后一步点击完成注册之后如果输入有误的体验也不好。我还有不满意的地方是拍拍贷的整体界面设计偏简洁清晰、以内容为主,而作为最重要的页面之一的登录注册页颜色大面积的使用了他们产品不怎么突出强调的蓝色,视觉观感非常的沉重,跟整个产品的基调严重不符。

微贷网

前不久刚发布版本——“七年微贷”的微贷网的注册流程是与我的改版方向高度一致的,这点我感到很荣幸。它从用户页面就开始合并登录和注册的判定。用户点击【登录/注册】按钮之后自动弹出数字键盘,用户输入手机号之后系统判定是否注册,如果已注册,引导用户进入登录界面,自动弹出英文键盘填写登录密码,如果没有注册,引导用户填写自动发送的验证码并跟随页面切换自动弹出数字键盘,减少用户的点击次数,优化产品使用体验。

翼龙贷

翼龙贷的注册流程中规中矩,从注册中就让用户感受到自己是传统金融企业的这个概念。它有很多可取之处,包括注册首页的活动拉新(但是做成入口图形式会让用户一直想点击并且分散其它信息的注意力)、通过主色调红色的步骤进度条让用户明确流程总共几步和自己所处的位置,最后的奖励回馈,还有开通存管账户的适当引导都是我可以从中学习到的一些设计思路,跟我们的产品理念也非常一致。

我们的注册完成奖励反馈提示。作为小白用户以及30岁左右的目标人群的我来说,我看懵了,反应不过来这些奖励对我来说意味着什么,我不知道积分是啥概念,我也不知道投标本金是什么概念,而且关闭或者开通存管账户之后我也不知道这些奖励具体去哪里找和使用。但是这个不属于注册流程的优化,所以我只做了部分改动,具体可能会在以后分析改进。

支付宝

爸爸的APP,不想多夸。采用了分步注册设计保证了用户每步操作的视觉焦点都在自己要输入的内容上。输入4位验证码之后自动判定验证码是否正确,如果不正确,清空所有验证码并且配合手机震动和错误提示红字抖动告诉用户输入错误,减少弹窗打断,降低错误反馈造成用户心里的不愉快。之所以账号已经注册的提示放在输入验证码之后,是因为用户点击【立即登录】的话,会直接登录,而验证码就自动变为登录需要接收的验证码,这点也是做得挺出乎意料的。

六、最终改版结果

首先,我对产品做了一个视觉上的改版。采用了iOS11大对比的设计理念。首先分析页面信息优先级,将页面信息按权重排序,依次为核心步骤层、内容输入层、辅助信息层,还有包含可点击交互操作的操作引导层。然后通过字号、字色与字重拉开信息层级间的差距,最终将用户聚焦到核心信息上来。

a.核心步骤层:是指用户在短暂时间内浏览页面时,能让其一目了然的获知当下应该操作的某个步骤。例如“输入手机号码”是这个页面的重点核心内容,其设计需要重点突出,且精炼文字。

b.内容输入层:是指用户被核心步骤层吸引后,需要进行相关内容的输入,例如昵称和密码的输入等等。其设计需要引导用户进行输入操作,并且在输入中给用户带来便捷性。例如包括密码明文/暗文的切换,以及输入验证码到最后一位后直接进入下一步,来确保便捷性。

c.辅助信息层:是指用户理解了以上两个信息层后,辅助信息层会有更多信息让感兴趣的用户去了解。这里往往提供更多说明或者跳转链接,例如使用条款和隐私政策等。

我在视觉上使用了CR设计语言(iOS11的设计风格)。Complexion Reduction设计语言是指使用更加简化的界面颜色,更大更突出的标题字体,以及简洁的图标,来拉开页面信息层级,突出页面主要功能。作为用户体验设计师应该进行“最小化设计”和“逐步简化”的设计模式,毫不留情的砍掉“没有重要功能的元素”,使用户快速关注到信息的本质。

改版前:

改版后:

1.简单且突出的告知用户在页面中需要做的唯一一件事

2.减少零碎信息的展现,最大限度的精简文案

3.各类信息分组,拉大信息战线层级

七、具体改动内容

1.增大了输入内容的字号,简单清晰明了。延续旧版本,对手机号码进行344的分布

2.增加一键清空icon

在输入时偶尔会出现输入错误,如果没有清除的icon,用户只能一直按键盘中的清除按钮,需要一直按住直到输入框为空。点击注册时候,注册按钮变为加载状态,清空icon与键盘同时消失/收起。

3.优化了不可点击状态的按钮状态表达

旧版本不可点击状态为灰色,比较老旧过时,并且颜色的视觉层次不高。

4.手机号位数不对/格式错误时,按钮为不可点击状态

当input为空时,关联按钮为disabled的状态,这是采用了防错的原则:如当使用条件没有满足时,常常通过使功能失效来表示(一般按钮会变为灰色无法点击),以避免误按,这是在提交之前的视觉验证输入的另一种方式。

5.修改了按钮上按钮的名称

表单按钮应该准确描述用户正在执行的任务——创建帐户或登录等。

另外,我还优化了文字的显示层级,共分为五类

涉及到文字/色彩规范是一个很大的工程,我们的理财APP在这点做的不是很好,因为这次改版设计是私下在做,所以我便做得随心所欲了一点,甚至重新定义了品牌色:)。

关于负反馈的处理

所谓负反馈,指用户行为出现问题时出现,比如投资金额小于可投金额,或者密码不正确等等。虽然负反馈在产品交互设计中对于警示用户不该做的行为或者是该行为会导致不良后果的可能时起到了不可或缺的作用。但是显然更多的时候人们不愿意收到负反馈,任何用户在得到负反馈的时候都会感到沮丧,因此尽量减少通过特定的反馈页面来进行负反馈。

1.尽量减少用户犯错的机会,包括突出的标题及重要文字,清晰的文案,分步输入等

2.输入验证码步骤中,如果用户输入的验证码有误,验证码自动清空并且输入栏返回第一个,降低用户操作及点击数。

3.采用了手机振动+文字震动加文字标红的方式提示用户的输入错误,用比较轻量化的反馈来弱化。

1.优化文案

·将会让用户看晕的奖励文案整合至【我的奖励】中,方便后续查看。

·增加了银行存管的解释文案,使强突出按钮更有指向性,也更好的引导用户去开通银行存管。

2.优化主辅按钮表达

这里我参考了翼龙贷的设计思路,但是做了一个优化,将主按钮调整到右侧。大数据表明,一般将倾向于用户点击的按钮放在右侧,点击率更高。

七、最终成果动效展示

 

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

平面中的构图技巧

用心设计

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

 

平面中的9种构图,但有的同学还不是太明白,所以小编今天细说里面其中一种构图:视觉引导线,加深大家的理解。

视觉引导线构图

什么是视觉引导线?(视觉动线)

视觉动线会将观众视觉引导到特定的方向,先创造一个视觉中心点,之后会提供一条让观众可隐约跟随的视觉路径,划分视觉阶级明显让观众知道元素之间的相对重要性。引导线是运用元素本身的原始形象或直接画出实体线条,借用这些引导线观众的视线可以被指向画面的其它元素哦。

上图中使用了视觉动线 + 留白,留白可以让海报中的「手」更加抢眼,使观众第一眼就会看那只手。接着就是视觉引导线了,引导线不一定是实体线条,它可以是元素本身的原始形状、人物视线以及元素组合等等,借用这些引导线让观众的视线可以被指向画面中的其它元素。

说到这里,我想大家也知道上图的引导线是什么了吧?引导线是手与线的组合,观众的第一视线是手,然后会顺着手拉的线方向延伸,最后停留到右下角的小字里。这几行小字就是作者要表达的主要信息。

但为什么不直接居中非要弄个引导线?虽然可以用这些中规中矩的构图,但往往会显得无趣,也不一定能吸引用户去看了。

下面小编用一些案例来让大家更好理解。

案例:

上面的海报设计是很好的例子,首先利用视觉中心点让观众集中到大字区域,然后顺着线条查看下方的内容,先是 bla 的内容,接着就是 zer,所以这图主要信息应该是 RYDER BLAZER(但小编不知道是啥……)

上图中,人物的视线也可以算是一种引导作用。

总之好的视觉引导线可以让作品富有故事性和艺术性,还能提升作品视觉上的观赏度。所以我们创造时应该重视构图。

 

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

原来日本设计还能这么萌!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界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档