设计师如何用好设计中的线条元素(2)

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

uimaker
UI设计师 / 江苏 南京

来源:优设   作者:美工美邦

图一因为大面积的留白能使得用户很容易分辨出自行车与文案是一个整体,但是相较于图二而言,UI设计教程及步骤,其整体性略显不足,而且给人的感觉太过单薄、重心不稳;图二的整体性更强,这里的矩形线条就起到了串联主题的作用,类似的还有:

设计师如何用好设计中的线条元素

不难看出,这些案例中的线条都有串联主题的作用,线条使得主题元素整体感更强、画面板式更加严谨;对于整体的视觉传达也起到了串联、引导的作用;在文字排版中,也有类似的线条,比如:

设计师如何用好设计中的线条元素

同样是通过线条把文案更加整体化,也起到了串联的作用。

线条可以突出主题

突出主题的方式有很多种,像我们之前所说到的留白、对比。接下来继续说下另一个可以突出主题的方式—线条,下面看个案例:

设计师如何用好设计中的线条元素

通过对比观察我们发现,右侧海报整体感更强,主题文案信息更加清晰,主体更明确。其中的原理可以理解为:因为线条的存在,使得主题信息有了一定的范围,在视觉上等于是在海报中划定了视觉焦点,从而起到了突出主题的作用。当然还有其他的表现形式,比如:

设计师如何用好设计中的线条元素

很好的诠释了线条的作用——突出标题序号。在进行创作时,作品的每个元素都要做到有理有据,否则只是一味的抄袭,到再创作时脑袋里还是一片空白,只有明白了其中的设计原理,才能做到活学活用。再看几个案例:

设计师如何用好设计中的线条元素

突出主题也许一个线条就可以表现的淋漓尽致,因设计目的的不同,线条所发挥的作用也不尽相同。下面继续分析:

线条可以分割整体

前面说了线条有串联整体的作用,而这里又说可以分割整体,是否存在矛盾呢?下面举个简单的例子:

设计师如何用好设计中的线条元素

在小文案的区域中间我加了两个线条,看似很小的改变,其目的是把文案很准确、严谨地分割为三个小整体,希望能给用户带来识别性更强的阅读性,再举个例子:

设计师如何用好设计中的线条元素

这里的线条把月份和日期分割、英文和中文分割开,使得用户对于信息的捕捉能力以及可辨识性都提升了很多,而线条的作用就起到了分割的作用。

线条有修饰的作用

线条也能起到修饰、衬托的作用,很多小伙伴会忽视这一点,其实线条也可以成为海报中衬托画面、修饰主题的元素,例如:

设计师如何用好设计中的线条元素

海报中的线条起到了衬托、修饰主题的作用,假如把这些线条都删除,画面整体会显得相对单薄。

线条的作用我们分为四个逐一分析,其实它们之间也存在着相辅相成的作用,不能以一概全,线条所起到的作用可以是一种,也可以是多种,比如:我们前面「可口可乐」的案例,即有串联整体的作用,又有引导视觉的作用。只要我们在使用的时候能明确目的,而不是机械式的抄袭,那么最终一定会得心应手。

 收藏
说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!