首页

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

用心设计

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

 

 

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

何为张力

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

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

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

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

原理与解析

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

案例解构

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

案例演示

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

巧用Keynote,为你的演示锦上添花

用心设计

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

 

对于今天的设计师来说,无论是知识分享会,还是项目提案评审,甚至是求职面试等等,越来越多的场合需要考验我们的演讲表达能力了。那么对于设计师来说,除了口述表达能力,美观大方的幻灯片往往也是必不可少的。而Keynote因其酷炫的动效俨然已经成为演示界的神器,但是现状是很多设计师朋友对于Keynote的掌握还不是很熟练,特别是五花八门的动效以及复杂的构建顺序,在此作者就与大家分享总结一些个人的使用心得,希望对大家能有所帮助。


目录

1、认识keynote

2、制作准备

3、动效

4、构件顺序

5、演讲相关



下图即是Keynote的主界面,与我们熟悉的Sketch还是挺相似的。其中中间为舞台区域,当前页面的所有元素都会出现在此;顶部是工具栏,包含一些常用的功能,并且跟Sketch一样支持自定义;左侧是幻灯片的导航,可以快速在各个幻灯片之间切换;右侧是参数调整,可以分别针对幻灯片以及其中的某个元素进行参数调整。

其中,右侧的参数调整又分为“格式”、“动画效果”和“文稿”三个Tab。当选中左侧导航中的幻灯片或舞台中的某个元素时,对应的参数调整面板是不同的。


在开始动手之前,还有一些准备工作需要完成。首先就是整个幻灯片的尺寸,常见的尺寸比例有4:3和16:9,需要根据演示现场的幕布宽高比来确定选择哪一种。如果是在移动设备上演示,就根据移动设备的屏幕比例来选择,一般手机是16:9,Pad是4:3。当然,也可以自定义幻灯片的宽高尺寸。幻灯片尺寸在右侧的“文稿”Tab中调整。

其次,编辑母版。母版有点类似于Sketch中的Symbol,改变了其中的某个元素,所有使用这个母版的幻灯片都会出现相应的改变。不同的是,母版的对象是整张幻灯片,而不是其中的某几个元素组合,也就是说,一张幻灯片只能选择一种母版。如果你的所有幻灯片都需要加上logo或者水印,使用母版就很方便了。母版的编辑以及调用在右侧的“格式”Tab中(选中幻灯片的情况下)。

最后,将你需要用到的图片元素,按幻灯片顺序整理好命名,以便于在后续调整构件顺序时使用(命名混乱会对调整构件顺序造成很大的干扰,在稍后构件顺序的时候会讲到)。


Keynote中的动效分为幻灯片之间的过渡动效和单个元素的动效。


幻灯片之间的过渡动效有以下这些:

这里重点要介绍的是神奇移动。它的原理是为两张幻灯片中的同一个元素添加补间动画,通过这个元素在两张幻灯片中的位置、大小、形状、颜色、旋转角度、透明度这些属性差异来实现过渡动画。当然,还可以选择抹入抹出来使其过渡更自然。

单个元素的动效又分为三个阶段:出现、动作、消失。


出现,顾名思义就是从无到有的一个过程,主要有以下这些:

动作,主要是移动、缩放、透明度、旋转这些基本的属性变化。大部分的动效都是通过这些基本属性的变化组合来产生的。

消失,顾名思义与出现相反,是一个从有到无的过程。

其中,打字效果和跟踪这两个动效只针对文本才会有效果。

这么多的动效,其中有一些还是蛮有意思的,比如“解体掉落”、“碎屑”、“轰然坠落”,这里就不展开细讲了,大家有兴趣可以一一去尝试一番。


使用动效还有一个误区就是,不是所有的页面之间或者元素出现消失都是需要动效的,过多泛滥地使用动效反而会给观众造成视觉疲劳,让他们的关注点都集中在你的动效上,从而对本身的演示内容失去关注。


构件顺序是针对单张幻灯片内添加了动效的元素而设定的。可想而知,一张幻灯片内的所有元素,很少会有同时产生动作的情况,因此必然有个先后顺序,这个顺序就是构件顺序。通过构件顺序,可以组合出变化多端的动画效果来。


构件顺序分为三种:一起、之后、点按。如下图:

可以看到,通过构件顺序列表上两个构件之间的样式变化,我们就可以一眼区分出它们之间是什么顺序。一起,两个构件连在一起并且中间没有分隔线;之后,两个构件连在一起中间有分隔线;点按,两个构件不相连。


点按比较好理解,就是两个构件动作之间需要手动控制。下面重点来讲一下,“一起”与“之后”。我们通过时间轴的形式,来让大家更容易理解。

当然,我们还可以设置延迟时间,让构件交替动作。

前面我们提到过,要为图片元素整理命名,其目的就是在构件顺序列表中便于查看。如果我们没有整理命名,那一张幻灯片中的构件顺序列表可能就是如下图这样:

那么这时候,我们如果要调整其中一个元素的动作顺序就显得异常困难了。因为在舞台区域中,这些元素可能都是叠加在一起的,想要通过点选找到元素几乎是不可能的,而构件顺序列表中的命名也显得很混乱……


此外,即使是整理命名了这些元素,最好也不要把许多动效做在一张幻灯片中。原因同上,如果后期要修改,寻找起来也是非常困难。我们可以利用幻灯片之间的自动过渡效果来将它们拆分到不同的幻灯片中。

图中在第2张幻灯片与第3张幻灯片之间选择“无过渡效果”,且开始过渡设置为“自动”,延迟“0秒”,那么第2张幻灯片播放完,就自动无缝进入第3张幻灯片了。


做完了演示稿,那么就要开始准备演讲了。首先需要考虑的问题就是文件大小了,如果图片内容不多倒还好,一旦图片较多,整个.key文件就会变得很大。这时候我们可以先压缩图片再将其置于Keynote中,或者有一些元素或者文字可以通过Keynote直接绘制,就不要采用图片的形式了。这样可以将.key文件的体积大大缩小。


其次,Keynote的版本也是需要考虑的问题,最好可以拿到演示所用的电脑来演示一遍,作者就曾经因为软件版本问题导致一个动效无法展现,进而影响了那个片段的演讲。


此外,我们不可能讲所有要讲的内容全部呈现在幻灯片上,适当的注释是必不可少的。

添加完成的注释我们可以在演讲者模式中看到。

演讲者模式中,我们还可以看到当前幻灯片、下一张幻灯片以及还有多少个构件动效没有播放。在顶部,靠左的是当前时间,靠右的则是定时器,可以设置成计时器或者倒计时来帮助我们控制演讲时间。

最后,如果你不在电脑边上而又不想别人帮你控制幻灯片播放时,可以利用iPhone来遥控播放。打开iPhone上的Keynote,点击右上角的遥控模式进入如下图左侧的界面,然后前往Mac端的Keynote,进入偏好设置,选择遥控器,然后连接上你的iPhone(需要在同一WiFi下),iPhone上的界面就会提示你开始播放幻灯片。

这时,你的iPhone就变身为一个遥控器了,并且点击右上角的菜单还有激光笔功能,便于你在演讲过程中做临时批注。


这篇文章旨在帮助你更充分地运用Keynote来传播分享知识、展示设计作品,并不能美化你的幻灯片。想要做出美观大方的幻灯片其本质还是需要版式排列、色彩搭配这样的基础技能;同样,酷炫的动效也需要多欣赏临摹别人的作品才能运用得恰到好处。

 

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

图标该配上文字吗

用心设计

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

 

图标在增加界面美观性的同时也在破坏着界面的清晰性,在设计的过程中如果你纠结于图标是否需要配上文字那请仔细阅读这篇文章。

首先扪心自问下是否清楚在设计中什么时候用图标? 什么时候用文字?什么时候用图标+文字?你是否能清晰的分辨他们分别在什么场景下使用呢?


前言

之所以要写一篇这样的文章是因为最近有很多的设计小伙伴反复在争论一个观点 图标配上文字是否有必要?

举个栗子:

如下图一位设计同学觉得右上角红圈里面只需要图标就好了不需要文字的存在,并且节省屏幕空间,可是公司的开发和测试同学一脸懵,这个操作觉得不够清晰,识别性较差严重影响用户体验,当前视觉层面和功能层面产生了强烈的撞击。带着这个问题我们从图标的定义,图标变迁史,图标的优劣势来讲述今天的文章,相信文末你会有自己的答案。


图标定义

广义

图标是指代意义的图形符号,具有高度浓缩并快捷传达信息、便于记忆的特性。应用范围很广,软硬件网页社交场所公共场合无所不在,例如:男女厕所标志和各种交通标志等。

狭义

应用于计算机软件方面,包括:程序标识、数据标识、命令选择、模式信号或切换开关、状态指示等。


图标变迁

图标是具有指代意义的具有标识性质的图形,它不仅是一种图形,更是一种标识,它具有高度浓缩并快捷传达信息、便于记忆的特性。它不仅历史久远,从上古时代的图腾,到20、21世纪具有更多含义和功能的各种图标,而且应用范围极为广泛,可以说它无所不在。一个国家的图标就是国旗;一件商品的图标是注册商标;军队的图标是军旗;学校的图标是校徽。

我们通过图标看到的不仅仅是图标本身,而是它所代表的内在含义。


而在计算设备上,图标随着时代的发展而迅速流行。从最早的计算机GUI(施乐之星Xerox Star)再到之后的乔布斯Apple lisa,Windows1.0,Amiga Workbench,从最初的黑白到随着显示技术在分辨率和色域上的提高出现的彩色图标,设计师渐渐的有了更大的发挥空间。


图标的优势

1.节省屏幕空间

图标可以替代文字,相对于长文字来说只需要占用一个图标的位置如:worktile移动端新建聊天操作四个文字如果用图标来代替的话只需要占用一个文字的文字,并且把干巴巴的文字变为图形符号,用户对于图形的识别速度对于文字来说更快。

2.没有地域语言限制,针对国际通用图标。

国际上通用的图标对于每个人来说都能很快的识别处理,比如同样一个“放大镜”图标经过长期许多不同的网站、应用程序和操作系统的用户培养,让放大镜图标作为搜索的操作代表符号变得越来越流行,不论任何国家任务种族,用户很清楚这是搜索操作,相对于文字来说图形识别大大减少的用户识别的时间,用户也可以花更多的时间去做他真正要去做的事情,从而提升工作效率

3.图标可以提供视觉引导,迅速识别减少用户思考时间

人脑处理图形图像的速度是处理文字的60万倍,人会记住80%看过的东西,20%阅读过的东西,和10%听到过的东西,所以在我们发朋友圈或者写文章的时候避免干巴巴的文字描述,劲量配上相关图片,提升整体的图版率,俗话说看图说话不是没有道理。

4.提升整体视觉体验

好的一套图标能够从图标的独特性、象征性、记忆性、应用性、组合性、变化性上打动人心,激发人们的点击欲望。这样才能使图标设计达到上乘水准,从而提升整体的视觉水准


图标不适用场景

1.表达含义复杂,难以揣测

图标的目的就是快速识别并引导用户,用户如果无法快速识别通常会下意识的回避掉无法识别的界面元素,这是人类的天性,反而logo的设计更加适合深层次的寓意。之前乔布斯做的一个实验,他拿着苹果设备到一个智障儿童福利院让儿童们把玩,每个小朋友都认识那些图标的含义,当时的写实图标都是来源于生活,对于来源于生活而设计的图标对于孩子们来说识别效率更高花费的识别成本更低。

2.图标存在多重含义

如果图标不能言简意赅的表达出寓意,并且存在争议的请避免使用,如果非要使用请采用图标+文字的形式。比如appstore侧边导航第一个你觉得是什么?收藏?标记?错!他是探索,如果我不告诉你可能每个人猜的含义都不同。所以我们在设计图标的时候要劲量去避免多重含义的图标。

3.专业性过强很难作为通用图标

图标如果专业性过强,而没有办法简化为一个很直观通用符号时,二八原则我们只能考虑80%的人,而20%的人需要付出学习成本,,比如下面的这个图标,如果用它来代表“研发”,我相信会有很大一部分人没法识别代表什么意思。但是对于开发人员就是一个很通用的图标,在这种情况下,只能是允许20%人员付出学习成本来解决这个问题,除非你配上文字。


小结

1.为了提升产品视觉体验,图标设计一定要极简,如果使用图标能够百分百表达其含义时,请优先使用

2.针对国际上面通用的有大众认知的如:搜索、wifi设置蓝牙等图标无需配上文字,除非做视觉引导为了保持一致而统一添加文字的列表

3.禁止使用多意图标(不让用户思考,如果用户不能在5s内很快识别出图标的意思,那这个图标的设计是失败的)

4.针对专业性很强的并且局限于空间的采用文字形式,或者二八原则只要考虑80%的人员无识别压力,而20%的人付出学习成本。

5.我们不讨厌图标加文字的形式,前提为图标要足够简化表达其含义(如文章开始的案例,图标简化为加号并且加文字放到商品2做一个通栏操作就好了,这样更加符合用户操作的视线流,这样做的还有钉钉的报销审批界面)

 

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

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

2019广告营销案例抢先看

用心设计

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

 

2018年已过,转眼又到了2019,但营销圈中战火从未消停过……

2018年各大品牌营销玩出了新花样,优秀的营销案例层出不穷,揽获了众人的芳心。

面对2019新的一年到来,各大品牌当然也不会放过一个大好的借势营销黄金机会,都争先恐后搭上了这趟“借势营销”的顺风车,为打响2019年第一炮,自然是无可厚非的。

然而,迎来2019新年,各品牌纷纷借势“耍花招”,精彩不输往年,各种多元化新玩法碰撞在一起产生了巨大的火花,再次燃烧整个营销界。因此,在这个竞争激烈的营销战场上,频繁出现了众多品牌活跃的身影,各种刷屏级的案例也相继诞生。

下面为大家盘点的刷屏案例,看看这些品牌都是如何借助“新年”这个热点事件的势能,迅速抢占超级流量,赚足众人的眼球?

特仑苏

主题文案:更好的2019,做更好的自己!

点评:往年的特仑苏代言人只有陈道明、靳东,而今年又有两位新代言人加入特仑苏——张钧甯和邓伦。特仑苏邀请了这四大代言人共同拍摄了2019广告,又以一个全新的面孔面向用户。

广告中花式植入产品,将产品巧妙融入到画面情境中,以达到潜移默化的宣传效果,顺理成章地符合了产品植入讲究“随风潜入夜,润物细无声”的最高境界。

四大代言人共同拍摄广告,无疑是突破了传统的广告模式,强大阵容助阵,可大大体现出明星在营销中的号召力与影响力,明星背后带着庞大的粉丝群体,推动这次广告更广泛地覆盖目标受众。加大了此次广告营销的宣传力度,从中也表达了特仑苏坚持“从更好的开始”的品牌主张。其次,对于用户而言,特仑苏这波新年广告带给大家更多的是惊喜与新年的美好祝愿:更好的2019,努力做更好的自己。

京东白条

主题文案:“一点当典行”网红店横空出世

点评:就在2018年尾声已敲响时,京东白条又出来“搞事情”了,竟然在京城“四大凶宅之首”—— 朝内81号开了快闪店,使得拥有百年历史的“京城第一鬼宅”, 摇身一变,成为了一家网红店,吸引众多时尚潮人前来打卡,深夜排队的壮观场面实在令人惊叹。

京东白条精准洞察年轻人现实痛点和情感需求,以及抓住了他们的猎奇心理,将无数传说的冒险胜地——朝内81号,首次改造成京东白条“一点当典行”,为大众提供了全新的刺激潮玩体验。让年轻人通过【当与换】的仪式感,把负能量、情绪、杂念统统“分期”丢掉,切身感受“一点改变,好过一成不变”,告别社畜、废青的过去,获得新生,在2019开始更好的人生。

京东白条“一点当典行”网红店的问世,可谓打破传统印象中的金融理财玩法和当铺玩法,从一点事务局到一点当典行,京东金融始终在突破体系和行业的限定,持续打造坐拥“潮人”人设的品牌。同时也彰显出一个拥有年轻人的潮玩精神、有温度的品牌,更有效建立了品牌与用户深度沟通的情感纽带。不得不说,这一反常态玩起时尚新潮,简直是颠覆了人们对京东白条的印象,京东白条这波营销实在是妙!

据悉,2019年将会有5期系列活动陆续落地全国,既佛系又丧的年轻人,不可错过!

OLAY

主题文案:下一站,无惧年龄

点评:新的一年里,BBDO广州携手OLAY,带来无惧年龄的《下一站》,OLAY这支反逼婚广告,戳中了多少人的心窝?相信,给了你不少启发。

广告中讲述的是一个发生在“年龄列车”上的故事,女主手握一张名为“年龄”的车票,正在寻找着自己的位置,突然惊奇发现这里的车厢都是按照年龄划分的。通过这极为扎心的故事情节激发更多“大龄剩女”的思考,但也引发了更多女性产生坚定的想法,不应该因为年龄而仓促步入婚姻的殿堂。

其实,这一广告刷屏朋友圈,那是因为这广告基于对女性的心理洞察,找准众多女性的痛点,让人产生强烈的代入感,更能给予女性启发,正确面对自己的每一个年龄阶段。由始至终,OLAY给人传达了一种“不畏年龄,勇敢做最真实的自己”的精神,无形中体现了OLAY对用户的最切实的关怀,使得其品牌深得人心。

迪士尼

主题文案:“梦想成真”

点评:迎来新的一年,这支由迪士尼推出的暖心广告正式上线后,获得众多网友的一致好评,都称这已被故事中的“小白鸭”所吸引。

广告片讲述了一只小白鸭费尽千辛万苦,终于和偶像唐老鸭见面的故事。以呆萌的“小白鸭”形象,然后制造感人的故事,直击用户的内心深处的情感,从而引起用户的共鸣,加强了用户对品牌的认同感。

这次广告贴合了现实生活,从用户的情感出发,唤醒人们的梦想,不忘初心,勇往直前,因此,迪士尼给人传递的不只是对美好生活的向往,更多的是对梦想的追求与执着。还有向用户表达了:尽管我们都长大了,迪士尼还在守护我们最童真的梦想。所以,迪士尼通过这一波触动人心的情感营销,为品牌与用户之间架起了一座真正的情感桥梁。

荣耀手机

手机性能测试

(扫描二维码观看视频)

点评:说到手机的耐摔性,很多人都会想到诺基亚,但诺基亚在现如今的手机市场普及性明显不如其他品牌。而在今年,荣耀手机开始耍出了新招——推出一创意广告,铁证荣耀手机才是“坚强者”。

这是一支荣耀测试手机性能的宣传片,让手机历经各种考验,包括油烟考验、零下40度的超低温测试、高达55度的超高温测试、残酷的刮擦实验等,最后用结果彰显:荣耀手机的性能强大。

所以,荣耀手机通过展示这优质的手机性能来加强用户对其产品的认知,刷新用户的荣耀手机原有的印象。从用户的角度考虑,用实验证明,体现产品的最大价值,从而满足用户对手机产品的各种需求,也引导用户对荣耀手机产生正面的认识。最后也突显了“生活中1%的可能,也要100%的做到”的品牌理念,然而,既有可看性,又“用实力说话”的产品广告,自然会把人征服得心服口服。

网易云音乐

主题文案:“遇见你真好”年度听歌报告

点评:2018年的网易云音乐的年度报告,居然在2019年的第四天才迟到出现,网易云音乐的“遇见你真好”年度听歌报告,又双叒叕刷屏了……

众所周知,网易云音乐于2013年4月23日正式发布,也是国内首个以“歌单”作为核心架构的音乐APP,每次网易云音乐的营销与“走心”产生了密不可分的关系,大众千呼万唤始出来的网易云音乐年度总结报告终于出来了,虽然QQ音乐、酷狗音乐也在年前亮出了年度音乐总结,但偏偏是网易云音乐的年度听歌报告刷屏了。

这次的年度总结,满足了用户对音乐的需求,也满足了一些有情怀的用户,而且其歌单给予用户满满的成就感,轻易地完成了一次阶段总结。吸引更多用户参与其中,纷纷晒出自己的年度歌单报告,使得这次网易云的年度听歌报告,引发了广泛的传播。

屈臣氏

主题文案:“做自己,美有道理”

(扫描二维码观看视频)

点评:就在2019年到来的钟声一响起,大家便纷纷立了新的flag,而屈臣氏上线的H5,彰显着“做自己,美有道理”的品牌主张,刚好迎合了各大女性在新的年“追求更完美的自己”的美好愿望。

视频中的“四位小姐姐”show出了“不跟随、不妥协、不伪装”的模样,还有人的语言配合动感的画面,折射出现实生活中年轻女生渴望表达自我,追求个性与态度。呼唤大家在新的一年,立起了2019新flag。同样也展现了屈臣氏就是一个有态度的品牌。

只想说,在这2019新年之际,屈臣氏推出了这一波满满正能量的广告,能俘获用户的芳心也是毋庸置疑的了。

纵观以上品牌营销案例,可谓各有千秋,但共同点旨在使得品牌深入人心。

然而,众多品牌营销过程中需要从用户角度出发,都说,一个成功的营销,是因为“走心”,在传达品牌产品信息的同时,也能使得受众与品牌成功产生情感的共鸣,让用户更深刻地记住其品牌。

当然,我们也更期待2019,品牌主们能推出更多刷屏级的好案例。

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

轻量级的时尚主题

用心设计

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

 

目前从官方介绍来看,UI组件还相当齐全,可用它来快速搭建漂亮、时尚的网页和UI设计作品,下面一起来看看介绍。

bootstrap 4 主题:shards

关于 Shards 这个主题虽然免费,但并不代表它只有「表面」,制作者还为性能性能考虑,压缩版仅12KB大小,实在太好了,以这样的大小,制作出来的网页直接能秒开。

它并不是直接使用 Bootstrap 的设计样式,所有的组件都是重新设计,以便得到统一的风格!

着陆页演示

这是非常不错的UI KIT素材 ,它还包含了10个额外的自定义组件,可以让使用者快事制作着陆页。

演示地址:https://designrevision.com/demo/shards/extra/app-promo.html

演示地址:https://designrevision.com/demo/shards/extra/agency-landing.html

UI 组件演示

Shards 含有丰富的 UI 组件,网页端常用的元素几乎包含了,大方便用户自由定制。

颜色:

字体

图标支持900+ Material icons 和 Font awesome 两大图标库!

表单上的细节,也不容忽视:

还有日期组件的设计:

卡片

按钮

导航菜单

我想这些漂亮的元素,已经足够你设计一般的网页,即使不够,也完全可以自己利用 Sketch 源文件或 HTML 模板再创作。

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

用迪士尼动画原则,提升UI动效体验

用心设计

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

 

迪士尼动画的12条原则是设计师必须要掌握的经典指导性原则,是由Ollie Johnston和Frank Thomas在他们的书《The Illusion of Life》中提出来的观点(译者注:这本书在豆瓣的评分有9.3分,值得一看)。这些原则最初是用来为动画片这种传统的形式设计的,然而,这些原则也同样适用于UI设计。所以,我想在这里做一个有趣的尝试,看能否将这些动画原则联系起来。

用迪士尼动画原则,提升UI动效体验

一、挤压和拉伸

在动画中,挤压和拉伸代表了物体的重力,质量,重量和灵活性。举例来说,当一个弹球在它撞击地面时会发生形态变化,就是挤压和拉伸。

在界面中,挤压和拉伸很容易就联想到按钮。当一个按钮被按下时,就可以理解为受到了挤压,通过控制按钮的挤压和拉伸,我们可以很轻易的做好一个按钮的交互动画。除了按钮之外,这种原则也可以应用于UI中的任何交互元素上。

按钮在交互时的挤压和拉伸

挤压和拉伸被应用于侧边栏

二、预期动作

让观众能预先知道接下来将会发生什么,它是先于下一步会发生的动作。举例来说,迪士尼动画里经常有从高空往下跳跃时会先弯曲膝盖再跳、正在跑步的人要停止跑步前会逐渐变慢步伐等等。

在界面中,悬停状态就是很好的例子。当我们把鼠标悬停在元素上时,元素会提供反馈,表明它是可以点击的,并且在点击时,又会有一些别的反馈。

悬停的交互通常会暗示这个按钮是可以点的

在有水平滚动界面里,通常在交互时会显示下一个元素的部分内容。这其实是一个很好的例子,因为它是在告知用户下一步的一些信息。

三、时间节奏

在传统动画中,时间会决定关键帧的绘制方式。帧数越多,动画就越流畅,同时也更慢,时间能够给动画赋予情绪和性格。

时间的节奏感是任何动画的基础,速度在元素编排中起着非常重要的作用。速度太慢,用户会不耐烦,速度太快,用户又会错过一些内容。一般来说,大多数UI动画在200-600ms之间,其中悬停和反馈交互时长大约为300ms,精细的转场动画大约在500ms。也可以去参考谷歌的动画规范(https://material.io/design/motion/speed.html#duration),里面非常详细的解释了每种动画类型的持续时间。

一些设计系统,如Carbon(https://www.carbondesignsystem.com/guidelines/motion/)、Lightning(https://www.lightningdesignsystem.com/guidelines/animation/styleguidelines/)都把运动的节奏感视为一个很重要的方面,并为每种类型的过渡都制定了严格的规范。

右边的过渡动画显得太过于漫长,繁琐。

四、渐快与渐慢

在现实世界中,大多数物体都遵循着缓动运动规律。也就是说,物体的运动并不会瞬间开始或瞬间结束,就像一个物体自由落体,也是一开始很慢后面才变会变快。

左侧的卡片是没有缓动的,右侧的是带有缓动的,看起来会自然很多。

给UI中的元素加上缓动会让它看起来更加自然,缓动和节奏感都是可以有效的提升动画的品质。

五、呈现方式

舞台中的表演需要合适的编排才会精彩。也就是说,对象在场景中如何摆放,每个动画又如何出现,关乎演出的质量。通过这种编排,能够将注意力引向最重要的角色。

在界面中,呈现方式能够决定元素的位置,以及在交互时,它应该如何编排才能将用户的注意力引向预期的元素。

比如现在有一个基于兴趣的音乐APP,对这个应用来说,最重要的事就是让动画引导用户选择他们所喜欢的音乐。因此,有必要将类似的操作与其他元素分开编排,有目的的引导用户。

六、弧形轨迹

一个从高处抛出的小球,运动轨迹会做抛物线轨迹运动,弧线能使物体的运动更加自然。

在界面中,沿着对角线的元素沿着弧线轨迹将会使运动变得更加自然。当需要凸显出元素的运动路径时,多尝试使用弧线轨迹。

通过对比,能够发现右侧的弧线运动轨迹会比左侧的直线运动轨迹显得更加自然。

七、附属动作

在动画中,次要动作能够起到烘托主要动作,比如动画中的角色在走路时,头部的晃动就是次要动作,却能够让角色行走显得更加自然。

在界面中,次要操作能够起到强化关键动作,当元素需要向用户提供反馈时,这个方法非常管用。所有的微交互都是基于这个附属动作原理。

按钮边上的粒子效果强化了主按钮的点击效果

八、夸张和吸引力

场景中的重要角色通常会采用一些比较夸张的动作来获得更多的注意力。

在界面中,重要的交互也会通过一些夸张的动画来引起用户的注意。谷歌设计规范中的FAB按钮就是一个很好的例子,FAB按钮在不动的时候也比较能引起注意,因为它通常会带有比较鲜明的颜色,并且是独立悬浮在界面元素之上的。当它被点击时,FAB的动画被放大,把整个界面都占满,使得它完全占据用户的注意力。

FAB 夸张的交互形式

对于支付这么重要功能的按钮,通过夸张的动效引起用户的注意

九、跟随动作和重叠动作

想象一只兔子从高处跳下来,当兔子开始起跳时,它的耳朵动作会与身体动作发生错位。然后当它着陆时,它的身体停下来了,但是耳朵还在动。前者称之为跟随动作,后者被称为重叠动作。其原理说的就是:没有任何一种物体会突然停止,物体的运动是一个部分接着另一个部分的。

在界面中,可以使元素在停止之前超过它们原本的位置,使得元素运动更加自然。(译者注:大白话就是我们常说的回弹效果。)

界面有一定的回弹,会显得更加自然。

当界面滚动时,文字会跟随图片的运动,图片与文字以不同的速度运动会更加自然。(译者注:像是被拖着走的那种感觉)

总结

界面中的每一次交互都必须在适当的场景中精心设计,让整个体验更具沉静感。在正确的地方使用这些原则能够确保产品中的交互体验更加协调自然。

这些原则正在以不同的形式应用于当今的数字产品中,值得敬畏的是,30年前设计的一套规则到今天仍然适用。

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

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

用心设计

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

 

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

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

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档