平面设计中如何巧用点提高视觉张力?(2)

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:ifeiwu   作者:飞屋睿UIdesign

关键词

纹理背景

点也可以大面积铺开形成纹理,根据点的形状来表达不同的氛围。

平面设计中如何巧用点提高视觉张力?

利用五彩缤纷的圆点形成类似气球一样的欢乐氛围,不仅作为背景存在,也由于圆点的有机的位置安排,显得非常洒脱自在。

聚合成形

也是同样运用上例的圆点,,采用一种较为规律的构图方式,形成一个边缘略散,但依然能成形的聚合体,整个图形往外扩散,给人一种膨胀的张力。

平面设计中如何巧用点提高视觉张力?

本例中,你可以看出,当点试着抛弃中心构图,抛开规则而成群出现的时候,有一种动感。这种动感通过色彩、大小、位置就能轻易获得一种完美的张力。这是利用圆点之间的关系而形成的。

五、想和做

理论毕竟是停留在文字阶段,实践是,我们通过圆的构思来设计一个轻网页的首页界面。

这个界面是一个摄影作品的网站,首页如果直接按照九宫格或者瀑布流排列摄影作品的方式显然有点太规范,采用“轻”的思维方式,我们只需要展示一张大图即可表现出作品的美感。但在这个网站中,我们还想要透出一种含蓄美,或者一种隐藏起来的美,这时,可以想到这个点的方式,因为点可以凝聚成面,这个面不太具体,给人一种虚化的感受。

STEP 01

我们先做出这个点的组合图案,采用渐次变化的方法,中心大,往两端渐变小。这样的构图产生了空间深度。

平面设计中如何巧用点提高视觉张力?

STEP 02

再将摄影作品大图全屏展示,形成一种全屏的视野。

平面设计中如何巧用点提高视觉张力?

STEP 03

在图片的上方增加一个纯色的深蓝色图层,图层的靠右侧,也是摄影作品的右边人物面部焦点处利用蒙板制作出步骤一的图案,略降低这个图层的透明度。

平面设计中如何巧用点提高视觉张力?

STEP 04

添加上LOGO和汉堡包菜单图标。显然这个作品网站是极简风格,因此导航隐藏起来可以减少页面的干扰。用户的视觉首先会被右侧的这种隐约其中的效果所吸引,再关注到LOGO、菜单等。这是我们所安排的用户的视觉流。

LOGO的图案并不是像其他网站一样靠左,而是略往中心移动,这样做的目的是为了增加页面左边的视觉的趣味,让LOGO和右侧的画面有呼应,不至于分成两个完全不相干的陌生部分。

菜单的图标放置于左侧中线,刚好也和右侧图案的最左一个圆在一条水平线上。它们同样产生了一种遥相呼应的关系。

平面设计中如何巧用点提高视觉张力?

整个界面在左侧保持了留白,让右侧的画面更突出。大家可以想象如果左侧放太多信息,不但削弱了右侧的视觉效果,整体的视觉将会失去重点。这是我们在设计中应该尽力避免的。

后记

点的魅力绝无这么简单可以说尽,在设计时,我们会因为拥有太多技能,希望穷尽所有的功力去表达,往往事与愿违,事实上,你只需要从中挑选一种,比如就用点这个元素来表现,都值得我们往深处挖掘。

 收藏