聚集
当画面出现多二种颜色时,用户的眼神首先会聚焦在那些对比性强、面积大的突出的颜色上,然后再找另外一种颜色,然后全部浏览完成。
通过上面的例子说明,色彩聚集的核心作用就是把你要突出的内容突出化、对比化、聚焦化,让用户的视线停留于此,阅读你想要传达给他们的信息。
当你在设计时
1、 用反差比较强烈的互补色去突出主要内容时,这种聚焦的处理方法更有效;
2、 如果画面中的颜色较多时,可以利用色彩的面积大小,去给页面出现的所有信息进行重要层次的分级。
05、留白设计空白多,主角旁边面积大
留白,常见的逼格神器,突出主角的必备招数。
如果说上述的几种方法是在做加法的设计,那么留白其实是在做减法的设计。当主角元素四周的留白很多时,人眼的视线首先会从整页复杂的环境中,优先发现那个没有任何障碍物的设计元素。
在实际应用中
留白就是留出主角、空白、层次、逼格的一种简洁的设计方法。
留白的”白”指的不是颜色的”白”,而是空白的”白”,留白指的是某一区域无多余元素、四周处于大面积空白的状态。
左图1:以产品为主的专题且只有的少量信息页面,产品四周大面积的留白处理,使产品的形态,细节更加的聚焦。同时留白的处理,也提升品牌的品质感和气质。
右图2:整体页面非常多的留白,除了一些扁平的设计元素外,主画面以外多是以“白”的形式出现的。
当你在设计时
1、有效的留白可以提升画面的逼格,而且可以使要突出的主角更突出;
2、敢留白:大量留白会使页面有空间感,不会因为页面内容密密麻麻而产生厌恶。
3、使用最精简的元素:不添加无谓的设计元素,给用户带去视觉干扰,只保留核心和必要的关键关素,并且对关键元素进行细节的刻画。
06、一二三四五六七,7654321
数字指向,顺序的指向性。
一般人都会有这样的体验,当看到数字1时,就要去寻找数字2。有些需求里,在需要用视觉牵引用户眼睛时,把数字当标头,使用户视线在页面中合理跳跃。
在实际应用中
数字元素的运用往往出现在以目录页、发展历程、或者产品排列展示中。
左图1:鲁尼踢球的动作和方向正好指向了右侧的内容区,以数字为代表的标头又指示用户逐个阅读或者分散阅读。
右图1:数字的作用就是用来指示用户继续向下阅读,黄色与黑色的强烈火对比。
左图2:产品周围大面积的留白,使得主角先被人关注到。右侧泛白的标题数字,起到了突出产品折扣的目的。
当你在设计时
1、做时尚搭配的需求时,可以用数字去引导产品的顺序;
2、以用运数字为元素时,对数字的大小和字形要进行整体的把控。切不可让数字影响主体内容,当然如果是以数字为主的,就要尽量突出数字的视觉性。
07、动的太大显得闹,静的太死显得闷
动静,就是画面的静与动。
动的元素在整体静态的页面中更能吸引用户的眼球。当然这其中包括页面中有gif图、视觉元素的动感表现等。
在实际应用中
动的表现可以用人物的动作、产品的动作、gif图来完成对动的执行。但是画面中同一屏的页面中,同时动的元素最好不要超过3处或更多,因为每动一处都会引起人们视觉的噪动,如果动的太多,势必会分散用户的注意力。使主要内容的传达,弱化。
大家注意细节:手的动作。
当你在设计时
1、 瞬间让元素有动感的处理方法:给元素增加动感模糊;给画面增加飞着的元素如:五彩纸屑、红包、倾斜着的线等。
2、 动的页面还可以通过用现在较流行的h5、视差滚动等技术让页面中的不同元素根据用户的鼠标滚动相应的出现;
08、文案设计想法多,紧扣主题有内涵 文案,用文笔引导用户产生画面感。
上图是我在下班的途中拍到的饭店名字,好的名字真的很让人记忆深刻。
在实际应用中
相比较而言,文字虽没有色彩那么实在,也没人物动作那么显而易见,但是它却是最能走进人们内心的形式。
上面两个案例的详细做法,都会收录在我的新书里哦。到时记得买哈。
左图1:像土豪一样表白,设计师完全找到了文案与形象之间的切入点,结合卡通的表现形式,使得绘制的形象活生生的表现了某些土豪的“豪气”。
右图1:五折封顶 不留余力,设计师通过文案的发散,绘制了一个正在点燃的机器,像是要引爆全场的感觉。
当你在设计时
1、好文案往往会联想到一些元素的、色彩的、风格的关键字,这样的好文案往往和图像的贴合度更高。
2、文案的视觉设计,往往通过对文案意思具象的、抽象型的表达引起用户的共鸣。
以上的8点就是我对视觉元素引导的八个方法:
总结
先要有个视觉点,引导眼神靠这些。
人物动作设计多,手眼身脚都要使。
上下左右和中间,前面后面和侧面。
万柳丛中一点红,诱导聚焦和突出。
留白设计空白多,主角旁边面积大。
一二三四五六七,7654321。
动的太大显得闹,静的太死显得闷。
文案设计想法多,紧扣主题有内涵。