首页

版式设计里的「张力」是什么意思?今天帮你解答!

用心设计

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

 

 

本期给大家带来的内容是关于视觉张力的应用技巧,听到这个词也许会给人一种云里雾里的感觉,我们在日常工作中也总会听到这些「视觉张力」「视觉冲击力」「视觉重力」等等专业词汇。那么这些带有视觉前缀的力学词到底是什么意思呢?今天我们来一起分析一下这其中的「视觉张力」,看它在版式设计中都起着哪些作用。接下来让我们一起学习今天的内容吧。

何为张力

首先我们来了解一下张力的概念,从百科中的解释可以初步了解到,张力是物体受到拉力而产生的牵引力,这么说是不是还有点晕?

通俗一些解释,可以将它理解成在拔河时绳子两端受到的左右拉力,我们看整个画面在视觉心理上产生了一种向左右扩张的感觉。

就像上图中的气球一样,内部充气后产生了向外膨胀的扩张力。外部的包裹部分也同时向内产生收缩的力,从而产生了一种相互制约的紧张感。

在艺术和设计以及文学领域中,视觉张力这个词也经常用来形容和谐与冲突之间的强烈对比,它是一种经过美学经验与审美倾向后的主观评价。

原理与解析

今天我们不讲那么深奥的直觉式感受,而是从平面构成的角度来深度解析视觉张力在版式设计中的作用,客观的了解康定斯基在其著作《点线面》中所提及到的视觉张力理论。

支撑起我们身体外形的是藏在内部的骨骼部分。而在版式设计中也同样需要支撑起整个版面的骨骼元素。

新人设计师经常会出现的问题就是会把整个版面填充的很满,他们认为这样能让版面变得饱满。但事实上这样并不能解决什么问题。

我们需要转换思维模式,客观的重新认识版面中元素起到的作用。

从构成的角度说,版面中只要出现一个很小的点就已经足够吸引观者的注意力了。点是视觉力量的中心,它在版面中能够产生占据空间的作用。

当版面中出现两个点元素时,我们的视线会下意识的在他们之间形成一条隐形的线,即使他们离的很远。正是由于存在着这条无形的线段连接,才让两个点之间产生了关联。包括两点之间的空白区域在内,它们都会被看做一个整体。

当版面中出现三个点时,我们在心理上便会自然形成一个负形的三角形,它与背景之间会形成图底关系,点与点之间的距离决定了这个三角形的大小。

同样的道理,当版面中出现四个点时,矩形的负空间与版面形状产生了呼应。四个点之间的内部会形成一个假想的视觉面积,点与边界的距离也为我们定义的版心的大小,这也是版面中张力的主要来源。

点具有相互连接的属性,当很多个距离相等的点占着水平方向排列会产生线段的印象。

而一个阵列的点相互连接就成了一个面。

举个比较常见的例子,段落文字就是由许多个点组合而成的面。

古人为了记忆天空中的星象,会将相邻的星星连接起来,就像图中的北斗七星,通过同形联想,它就像是一个勺子。人们就是通过记忆勺子形状来找到北斗七星的。

西方的星座也是同样的道理,将相邻的点连接形成对应的图案,最终形成我们现在看到的星座图形。

当版面中只有两个点时,我们可以得到的信息只有版心的宽度距离,而想要得到一个完整的版面。我们还需要一个确定高度的点才行,通过这三个点的位置来脑补出整个版心的张力大小。

也就是说,想要达到支撑起整个版心的目的,版面内最少需要三个支撑点。

这种脑补的原因来自于视觉的闭合心理,我们会将那些区域闭合的图形自动视为一个完整的内容,就像图中的图形。通常人们会认为他们是三个完整的组,因为括号内的距离更接近,那么事实上真的是这样吗?

实际上六组图形的物理距离是完全相等的,之所以会产生括号外大于括号内的错觉完全是因为视觉心理在作怪。

到此我们可以大致总结一下版面中的张力是怎样产生的,以版面的四角作为支撑点,在这一基础上,如果还有剩余的元素可以编排在垂直与水平的位置上。这样整个版面就被支撑起来了,形成了一个完整的面积,给人传达出了饱满的视觉印象。在实际编排中由于层级的介入,版面中的元素并不一定都是等大的,同时随着主体轮廓的不同,也会形成绕排等不同位置的结果。但万变不离其宗,版面中每个元素的聚散离合都会影响到整个版面的张力大小。

案例解构

这个版面主要运用了点的分散和连接作用,点与点之间虽然面积较远但是依然在视觉上会被看成一个整体,其余层级的内容则是以线的形态出现在版面中。经过解构我们可以看出,版面中的张力主要来源于版心四角的位置,这个版面是通过四个点支撑起来的。

接下来看这个版面,首先我们标示出人物的面积,随后是山峰的面积,文字以点的形式分散于版面中。由于点与点之间的连接作用,我们可以将其看做四条竖线。而线与线之间相连就成了一个面,这个版面主要起到支撑作用的是边缘的三个点。

对于这个版面来说,与之前的版面相比,版面中元素并不是等大的。它的元素分布情况大概是这样的,接下来我们标出它的版心大小,可以明显看出这个版面中起到张力作用元素主要有三个,而其余的元素则分布在版心的内部空白位置。

从元素的排布上看就基本可以得出版心的大小了,元素之间通过对齐与扩张,形成了一个方形的面积,版心的四个角落都有支撑点。

我们再看这个版面,它由一个主体,和两个文字组以及 logo 构成,这是一个典型的由三点支撑起来的版面。

这个同样是由三个点支撑起来的。

这个版面经过结构可以很明显的看到,元素分散到版面的四角,形成向外扩张的结构,其余信息放置在空白位置。

这个版面较之前就要更复杂一些了,来看一下它的结构,标出版心后可以看出元素基本上是围绕着版心的大小进行排布的,左下角为了增加元素的张力作用,依然采用了三点的分布方式来占据更大的空间面积,从宏观角度来说版面依然采用了三个点的骨骼结构。

这个版面,可以看出版心采用了四个点来支撑,剩余两个文字信息分布在版面的水平方向,就是图中标注成蓝色的位置。

这个版面中出现了带有出血的元素,看一下它的版心和元素的构成情况,采用了四个点的出血结构。

这个版面的变化性相对难度更大,我们来看它的构成结构,可以看到整个版面大致分为两栏,左侧小栏和右侧大栏内的元素编排都采用了三大支撑点来产生版心的张力效果。从整体的角度观看版面,也会得出同样的三点支撑版心的印象。

这个版面中,主体的形状变化较强。除编排在四角的元素外,其余元素都采用了绕排的呼应形式安排在了空白位置上,整体看去采用了四个点来产生张力作用。

这个也是一样,采用纯文字的版面编排,占据四个角落,其余元素编排在空白位置。

这个呢,版心的张力主要来源是四个角落的元素位置。

我们来总结一下,当版面底部已经有一个很大的图像或者文字时,版面顶部只要有一个元素就可以撑起整个版面的张力。

顶部也可以是两个元素来同时产生张力作用。

对于主体位于中心位置的版面,我们最少需要三个点来起到支撑版心的作用。

这里也可以是四个点来描述版面的张力大小。

此外,如果这时还有其余的元素需要添加,可以添加到垂直和水平的空白位置上。

接下来我们拿这个版面来进行举例,中心的圆形是版面中最大的元素,被编排到了版面的正中心位置。

随后出现在版面中的是四个角落的文字元素,它们的出现加大了版心的张力大小。

随后,其余的文字信息被编排到了版心的垂直和水平的位置并贴近版心的边缘。

接下来在垂直位置添加装饰性的点元素来起到占据空间的目的。

最后在版面的空白处继续添加其余的文字信息,这个版面就基本上变得非常饱满了。

接下来我们看一下它的元素构成结构。

并不是只有文字的位置才能起到加强版面张力的作用,换成图形和图像也是同样的道理。我们看这个图,将周围的元素去除后,版面中原本热闹的氛围消失了,版面占据空间的张力也随之变小了,但绝对不是说底部的版面就是不对的,一切都是根据项目的定位来判定的。

这个版面同样具有热闹的节日氛围,去掉周围的图像元素后,明显变得冷清起来,版面的张力也随之缩小了很多。

这个版面也是同样的道理,去除周围的元素后,版面的视觉张力缩小了,与之前相比缺少了冲击力,变得安静了。

这个版面因为点元素的出现,整体给人的感受非常饱满,将点去除后,原本被占据的空间变小了,明显没有之前的版面具有视觉张力。

案例演示

这是广告牌,投放尺寸主要设定在一个人能够近距离观看的大小,也就是说版面中可以出现一些比较细小的文字。

(这里需要特别提醒的是,在实际应用中如果广告牌挂得比较高,就需要根据实际情况来调整最小的文字字号了。否则说明文字的出现也就没有实际意义了。)

接下来我们来看一下文案内容,一个航拍无人机的宣传广告,含有品牌的标志和文案以及图片信息。

根据文案信息,我们给项目添加气质关键词,及表现出科技的领先感,同时因为产品属于亲民定位,我们还需要加入具有轻松与温情的气质。主视觉决定采用文字为主强调产品名称,加入文字并放大成为版面中最大的面积。

这里需要注意的是,这个文字的外形轮廓给人一种浓厚的历史气息,就像演员走错了片场,完全与我们的定位不符。

换成无衬线体后,明显觉得好多了。但是还是觉得哪里怪怪的。原因在于它的外形没有给人很特别的印象。从「S」的收口处可以明显看出切割感很强,缺少一些书写的痕迹,整体显得有些平淡无奇。

这个字体大体感觉上还不错,带有书写感的曲线,几何形的外观似乎都很符合定位。但作为版面中的主视觉元素似乎还少了点装饰感。

最后选择了这个字体,同样具有书写感的曲线开口,带有几何特征的外形以及类似电路排线一样的装饰结构。

色彩方面采用橙红色作为主色调,烘托亲民的色彩氛围。接下来将产品叠压在文字之上,加强版面的层次感。

为了继续加强版面的中层次变化,我们在文字与图像之间添加阴影,细节决定成败,一个简单的阴影也是需要体现出层次变化的。从模糊到清晰,从暗淡到浓重的变化都是塑造细节的关键,这里为投影添加三层强中弱的变化,这样一来,阴影部分的刻画就完成了。

与之前相比,添加阴影后的画面在视觉层次上要更丰富一些。在视觉表现上也更立体。

最后我们将文字信息划分好层级后一次添加到版面中。这个画面就完成了。主体位于版面的中心位置,其余信息分布在版面四周,形成向外扩散的视觉张力,一共使用了三个点元素来支撑版心的大小,剩余的文字信息则添加在版面底部的空白位置。

我们试着将信息全都集中到一起会怎样呢?

可以看到,版面中元素全都集中在了版面的中心位置,这使得原本占据整个版面的视觉张力变小,版面的两端会显得很空旷,相对于之前的版面来说变得没有那么饱满了。这种情况下,也可以采用添加图形元素的手法来填充版面两端的空白处,让画面变得热闹起来,增强版面的动感与活力。

这里我们添加一些抽象的气泡元素,为版面添加一些概念性的印象。添加元素后,新的问题又出现了,由于两侧的元素仅作为装饰出现,但是目前的视觉又显得比较抢眼,这就有些干扰到了主视觉的层级地位了。

那么解决这个问题的方式也很简单,就是弱化掉两端的气泡元素,让主视觉与装饰元素之间的层次更分明。经过弱化处理后,这个版面看上去就舒服多了。这里需要注意的是,气泡的虚化程度也同样遵循了强中弱的层次变化,这样的处理也进一步加强了整体的视觉纵深感。

经过圆形气泡的填充后,版面的张力恢复到了之前的大小。整体给人更加饱满的视觉印象。

今天我们一起学习了视觉张力在版面中的应用技巧,一起了解到了图像与文字在版面中不同位置所起到的作用,也讲解了版面的骨骼是如何构成的,希望我们的内容依然能够对你有所帮助。

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

那些好色之徒,都做过这些训练之创建配色体系2

涛涛

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

其实根据我的从业经验来看,如果想真正的了解色彩,就需要一套非常完整、系统的训练方法。可能很多人包括我自己,一开始都对这些训练不以为意,认为直接学习配色理论或方法不是更好么?为什么还要做这些色彩训练呢?认为这些训练没有意义,甚至有的人会觉得是小孩玩的游戏。

但殊不知其实我们每个人的色感,正是在儿童时期形成的,因为儿童时期的认知更加纯粹,对于色彩的想象力以及受到的限制要比成人少得多,所以赋予色彩的深度和广度也就比成年人更加丰富。

这也是为什么很多人看到小朋友的绘画,会觉得他们很有配色天赋了。

所以我们要做的就是打破对色彩的固有认知,让自己回归到一种单纯的状态,来重新认识色彩。

比如现在给你一个苹果,可能我们的第一反应就是直接把它吃了,事后要你回忆对苹果这个物体的印象,也许你体会的并不深刻。

而如果我们改变条件,假设你从未见过苹果,这一次你不仅要吃掉苹果,还要说出你的感受。

根据你的五官对其进行认知,这时你对苹果的体会将和前一次大不相同。

比如通过视觉我们可以看到绿色,通过嗅觉可以闻到果香,通过触觉可以感受到坚硬,通过味觉可以品尝到酸甜,通过听觉可以听到清脆声。

而重新认识色彩也是同样的道理,就像我们从未见过苹果一样去体验一个假设我们从未见过的色彩,然后通过不同的角度去对色彩进行拆解,最后组合在一起形成属于我们自己的配色体系。

赋予色彩名称

创建个人色彩体系的第一步,就是为色彩命名。

比如我们随便找一个颜色,就拿这个黄色来举例。

根据自己对这个色彩的感觉来命名,可以随意发挥,你想到什么就可以说什么,没有限制。

比如从最基本的色相角度出发,我们可以叫它鲜黄色。

根据这个颜色我们可以联想到向日葵,所以也可以命名为向日葵。

我们还可以联想到月亮,所以也可以起名叫月亮黄。

那我们还可以联想到《变形金刚》里的大黄蜂,所以也可以给这个颜色起名叫做大黄蜂。

还能联想到麦当劳的阳光橙,所以也可以命名为阳光橙。总之当你看到这个颜色时,脑海中能够联想到的词汇都可以使用,哪怕是跟这个颜色相差很多也没关系,最重要的是你自己的感受。

对色彩进行理性分析

对色彩进行命名之后,第二步要做的就是对色彩进行理性分析。

我们还是拿这个颜色来进行练习,先来找出它的色相、明度和饱和度。

首先根据色相环的大致位置,确定这个色彩的色相。

然后通过纯度和明度的调整来找到与右侧颜色相符的色值,这里我们得到了一个数值。

然后用吸管工具吸取右侧的黄色,得到的结果和我们猜测的做比较,只要结果不是相差很大都是可以的,如果相差很多那就说明你对色彩的敏感度还有欠缺。

HSB色值猜想完之后我们再来看看它的RGB色值。

根据RGB原理很明显黄色是由红色和绿色混合得到的。

但是我们对比来看很明显这两个黄色还是有差别的,所以还需要进一步分析。

我们调出RGB色相环,我们看采样的这个黄色是偏向红色多一些还是偏向绿色多一些,很明显是偏红一些,因为它比较偏橙色。

所以我们就可以适当的减少绿色的成分。

我们来看一下对比,已经接近了。

最后我们通过RGB色值来对照一下,虽然红色和绿色的色值相差不多,但是我们采样的颜色中还有少部分蓝色,肉眼其实很难看出来,但是我们可以自己去模拟一下。

这三个成分的三原色混合之后,得到的就是我们采样的颜色了。

△ http://www.rgbchallenge.com/

如果想提升对RGB的敏感度,可以通过这个小游戏来练习一下。

玩法很简单,根据画面中给出的RGB色值来选择你认为相对应的颜色,选对了继续下一关,选错了GAME OVER重来。

接下来我们来看CMYK色值。

黄色是CMY其中的一个原色,所以首先黄色肯定是最多的。

对比来看一下,很明显采样的黄色中还有其他颜色成分。

我们调出CMYK色相环,同样也是看采样的黄色偏向哪个方向,也是偏红色多一些。

所以我们得到这个颜色中需要加入红色,但是应该加多少呢?

这里我们加入了20%的红,同时将黄色的含量降到80%,这个是根据经验和感觉来的。

这时将两个颜色对比来看一下,已经相差不多了。

最后通过数值来比对,可以说几乎已经很接近了。

只不过采样的颜色中还带有少量的青色,但是影响不大。

然后我们再来看看色调。关于色调这种老生常谈的问题这里就不多讲了,因为之前我专门写过一篇关于色调的文章《高手的平面课堂!最容易上手的配色方法》,里面已经讲的很详细了。如果你看过这篇文章,那么当你得到了一个颜色的CMYK色值时,就已经可以判断出是什么色调了。

如果没看过也没关系,我带大家来区分一下,白色和纯色之间是明色和淡色,纯色和灰色之间是浊色和淡浊色,纯色和黑色之间是暗色。

将这些代表性色调提取出来一比对,就可以知道这个色彩的大致色调是什么了。

很明显我们采样的这个颜色是介于纯色调和明色调之间,你可以叫它纯色也可以叫它明色。

色调看完之后我们再来看看它的色彩家族,也就是这五大色相关系。

首先我们来看看它的同类色是什么,如果大家刚开始比较困难可以偷个懒,调出色相环。

这样找到相应的色相就非常简单了,但是不建议大家这样做,除非是新手或刚入门的同学。

然后是近似色,相距45度的颜色。

然后是中差色,距离在90度左右。

接着是对比色,120度左右。

最后是互补色,对比最强烈,也就是相距180度左右的颜色。

这五大色相关系是最基本也是搭配起来最常见的,一般不太容易出问题。这里需要说明一点就是我们在对色值进行猜测的时候,不需要要求太高必须要完全一致,只要差不多就可以。并且大家在看教程的时候可能会觉得有些复杂佷麻烦,我做这些为了给大家演示看上去是花了些时间,但是当你自己在猜想的时候可能只是一瞬间的事情。

对色彩进行感性分析

下面我们再来看看第三步,对色彩的感性分析,所谓感性分析也就是说这个色彩给你什么感觉。

比如这个黄色给我们的正面意象有:阳光、轻松、幽默、开朗、热闹、欢乐、幼儿、开放、快乐;负面意象有吵闹、廉价、不雅、软弱、浮躁、轻浮、稚嫩、散漫、不安。注意在提炼感觉的时候不要约束自己,能够联想到的都可以记下来。

对色彩进行行业分析

然后是第四步对色彩进行行业分析,也就是说你认为这个色彩适合哪些行业或者你见过哪些行业使用过这个色彩。

比如最明显的就是儿童、宠物、游戏、时尚、运动、促销、餐饮、农业、传统、汽车等等。

对色彩进行设计应用

以上这些训练做完之后就进入到了最后一步,也就是用这个色彩进行任意内容的设计。

这是我们的文案,这里我们要设计的是关于詹姆斯十六代战靴的三个Banner。

1. 案例一

首先根据尺寸创建版面,找到一张詹姆斯的图片去底之后放到版面中,然后将主题信息放大并选择一款具有力量感的字体编排到版面的中上位置,将中文标题和LOGO做重复编排。

将文字信息放置到人物下方,底部信息做描边和变形处理为画面增加形式感,最后将其他信息编排到空余的左侧。

最后在主标题下方添加色块来丰富一下版面,版式部分就完成了,接下来开始配色。

因为我们要用到采样的这个黄色所以主色已经确定了,但是这个画面只用一个颜色显然是不够的,所以我们还需要其他颜色。

因为考虑到设计的内容和风格所以我觉得配色上应该有一些对比,但是又不想使用对比很强的互补色,所以这里我选择对比色,但是黄色的对比色有两个应该选择哪个呢,这里我选择了紫色。

因为如果了解NBA的话应该知道,湖人队的球衣本身就是黄色和紫色,也就是人们所谓的紫金战袍。

但是这个紫色有些偏红,所以我们可以调整成偏蓝一些。这也是我想告诉大家的一点就是配色是灵活的,千万不要死脑筋。

辅色确定了之后就可以为画面填充颜色了,但是我们看填充完颜色之后人物图片的颜色有些不协调,所以人物的颜色也需要调整。

这样看上去就会好很多,那么第一个案例就完成了。

2. 案例二

第二个案例我们选择鞋子来当主体,然后编排主标题。

将其余信息围绕主体鞋子来编排,通过适当的变形角度来为画面增加灵动。

但是两侧很明显太空了所以可以添加色块和文字,版式部分就完成了。

因为我们设计的这三个Banner是一个系列的,所以配色也应该是统一的不需要改动。

3. 案例三

我们再来看看最后一个案例,前两个案例分别是以人物为主体和以产品为主体,所以第三个案例我就直接用文字编排,将文字信息进行分组给图片留好位置。

为了增加一些形式感,下方的标题同样进行描边处理并进行裁剪。

那么同样使用这组配色,将图片放置到预先留好的位置上,这个案例也就完成了。

最后我们来看一下整体效果和效果图。

本期教程到这里就结束了,我们从几个不同的角度去对色彩进行拆解,大家回去之后可以自己多加练习,每天解构一个色彩,这样长期积累下来,你就会在不知不觉中创建了一套属于你自己的配色体系。

但是我相信肯定会有人有疑问,如果照这样做那纠错机制在哪?因为这些都是大家自己去创建的很多内容不一定对,如果你有这样的疑问那说明你是认真学习的人,但是我这套方法并不是没有纠错机制,这个纠错机制就是你自己,在漫长的时间里你的成长、历练、感受、学习都会影响你对一个色彩的认知,可能几个月甚至几天之后你看待同一个色彩的感觉都是不同的。所以放心大胆的去做吧,只要你肯坚持,火候到的时候自然就会有所收获。

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

投影一直做不好?看这篇文章就搞定!

涛涛

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

平时设计工作中,关于投影,简单一点的就是一个图片中的主体抠下来放到画面中,这个时候就要设置一个投影,让主体在画面中更和谐。难一点的就是在合成设计里,涉及到每个物体的投影形状、颜色、透视等等,根据分析画出投影,这期教程就给大家普及一下投影的相关知识,以及如何去做投影。

阴影是什么呢?阴影是光带给这个世界的礼物。

阴影的概念

还是正经解释一下什么是阴影?

在客观世界中,光线总是从光源沿着直线方向发散。

在光线的照射下,受光部分称为亮面,仅次于亮面的受光是灰面,而光线无法照射到的部分,称为暗面;由于被受光面遮挡,物体所在环境中出现的阴暗部分称为影,阴与影的总和就是阴影。

阴影的要素

阴影形成的要素有哪些呢?

首先要有光源,光源就是光点,光点向下的垂线与承接面的焦点就是光足,阳光的光足在地平线上,灯光的光足在照射的基面上,然后是要有物体,光点发出的光线,经过物体上阴点,光足与物体底点也就是阴足连线,与光线相交的点就是影点,阴影就是阴足到影点的部分。

画阴影时,一般是先定光点和光足,然后是阴点阴足,光点连接阴点,光足连接阴足,这样阴影自然就画出来了。

用这张照片来做个简单说明:

光源的位置,就是太阳,向下垂线交于海平线于一点,这个就是光足。

然后,定出一些椅子上的阴点和阴足。

光点连接阴点,光足连接阴足,这样就能画出阴影的大致形状了。

光源的分类

光源总体上可以分为两大类,一类是自然光,比如:太阳光、月光。一类是人造光,比如:灯光、烛光。

1. 自然光

自然光有两个特点:光线平行;随着时间的变化而变化,不会为⼈的意志所转移。

光线平行

因为太阳、月亮这样的发光体离我们太过遥远,所以可以把它发散的光线视为平行的。

再来说下这张图片,同样是自然光,为什么它的光线不是平行的?

这是因为透视的现象,就像这个地板,不也是平行的吗?但是因为透视的关系,它们会相交于一点,光线也是同样道理,因为我们以这个角度观察,所以光线会出现透视现象。

也就是说,当我们从侧面观察的话,就很明显看到光线是平行的。

随着时间的变化而变化,不会为人的意志所转移

日升日落,阴晴圆缺,都是自然的规律,不会为我们的意志所改变。

2. 人造光

人造光有两个特点:光线不平行,呈放射状;根据需要变换位置。

光线不平行,呈放射状

用这张图片来举例,画面中光源是路灯,物体是消防栓,我们对它进行一个简单的分析:

它的光点是路灯,向下的垂线,到地面上的光足,然后是消防栓,光点连接阴点,光足连接阴足,画出阴影,可以看出,因为与光源距离近,所以光线是不平行的,呈现一种放射状,并且影子也会呈现放射状。

根据需要变换位置

为了呈现想要的视觉效果,可以随意移动光源的位置,甚至调整它的颜色、明暗等,可以人为改变。

灯光属于电光源,它可以是单一光源或者组合光源,常见的像这样的白炽灯,还有日光灯等等。

当各个方向都有光源的时候,投影就会消失。在医学上,用的无影灯就是根据这个原理制成的,因为医生做手术的时候,手和器械都有可能对手术部位造成干扰的阴影,所以无影灯就能尽量消除阴影。

阴影规律及其特点

我们模拟一个太阳移动的轨迹,当太阳位置比较低的时候,光线与地面的夹角就会比较小,影子会很长;升高一些,夹角就稍微大了些,影子缩短了点;再升高一些,夹角更大,影子很短了。然后当太阳在物体正上方的时候,与地面的夹角接近90度,影子基本就是一个点。那另一边,基本就是相同的情况,所以,光源离照射物体越高、越远、光线角度越大,阴影越短。

我们再通过几张图片来进一步了解阴影规律及特点。

我们看到人物的影子非常的长,光线与地面夹角比较小,说明它的光源在一个比较低的位置上。

这个正俯视的图片,影子也很长,说明它的光源也在一个较低的位置。

影子的长度也不算短,但是看光线与它的夹角比较大,证明它的光源在相对比较高的位置上。

这张照片比较明显了,影子比较短,接近中午的阳光。

△ 接近中午的阳光

我们之前在透视的那篇教程里说过,物体的透视线,最终都会消失在视平线上,所以,当画面中先有一条视平线,我们同样可以画出一个立方体。

当物体有一个阴影,我们可以通过影点与阴点和阴足的连线,找到光点和光足。这样也就找到光源的位置。

这张图片,我们就可以通过倒推的方式找到光点,如果画面中再放入其他物体,就可以用光点和光足对其连线,从而做出投影。

正常情况下,物体在光源下的投影,如果在其中出现一个台阶会怎样?

影子就会随着阶梯的形状而产生变化,也就是说阴影投在不同的承影面上,会随着受影面的变化而变化。

这两张图片就明显看出阴影根据地面起伏的形状而变化。

阴影在设计中的应用

第一个是接触阴影,是物体与物体之间接触所产生的阴影,一般这种我们都可以用图层样式当中的阴影来设置。

还有一种接触阴影,是物体立面与承影面之间的投影关系。

第二种是悬空式投影,这类投影给人很强的空间感,并且大多数情况,投影都会成为画面中的主角。

第三种是倒影,针对反光较强的面会有,比如镜面、水面、琉璃台面等,并且在表现一些高端产品设计时候经常会使用到。

第四种是长投影,也是这几年扁平化流行起来,带动的一种投影形式。

第五种合成设计中的投影,和实际照片中的场景是一样道理的,这也是所有投影当中比较难操作的。

最后一个创意投影,它不会根据物体本身的形态去表现,而是根据文案和设计构思而产生的很有创意的投影形式,当然,这个主要靠大家发散思维的联想了。

案例时间

用两个简单的小案例,来给大家讲解一下如何做投影。

给下面右侧的书籍做一个和左边一样的投影:

给图层添加投影图层样式,不透明度调整到45,角度137,距离26,扩展10,大小35。

我们把外围一圈的投影已经设置好,下面就再添加一个投影,也就是最贴近书籍边缘部分。这个部分投影我们可以称之为闭塞投影,是近光量最少的地方。

再添加一个投影,不透明度33,角度不变,距离5,扩展10,大小10。

利用图层样式的投影就完成了,大家在调整的时候可以边调整边观察,以达到一个自然的效果。

第二个方案,是给画面中的立方体添加一个投影,要符合光影关系。

第一步要按照透视关系,把立方体看不到的面给画出来。

根据之前我们学到的知识点和画面中其他阴影来进行分析:

先连接几个人物的影点和阴点,我们知道自然光的光线是平行的,并且我们标记出来的也确实近乎平行的光线,既然这样,我们就不需要找到光点的位置。

只要复制其中一条光线到立方体上的阴点即可,然后我们再去找光足的位置。

为了找光足,可以先把画面扩展一下,然后连接影点和阴足,三个参照物连线的延长线会相交于一点,这个点就是光足。

从光足往回连线,与阴足的延长线,相交于影点,这里为了区分,三条线我用三个不同的颜色,然后我们把三点连线,就是阴影的区域了。

可以发现绿色和蓝色是基本重合了,我们就可以忽略蓝色的那条线了。

立方体阴影的范围与形状,然后再进一步刻画。

做个高斯模糊处理,数值2。

在阴影上方新建一个图层,用钢笔工具勾勒一个闭塞阴影,不要太大哦,填充深灰色,模式正片叠底。

做高斯模糊,数值1.4。

为了不让影子边缘太生硬,选择滤镜 – 扭曲 – 波纹 – 41%。

用吸管工具吸一下旁边影子的颜色,填充到立方体影子。

如果影子太重,可以适当降低不透明度,再统一暗部的色调,这样阴影就做完了。

最后总结

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界面设计 、 包装设计

日历

链接

个人资料

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

存档