2.3　UI界面中的装饰线条

线条是UI界面设计中常见的一种装饰性元素，线条的性质让其既能够身兼数职，又不独占视觉效果。

2.3.1　点与线的关系

任何形状都由线条包围而成的。线条是一个二维空间的产物，它有长度、宽度，甚至还可以模拟三维的深度。可以将线条看成一个点的运行轨迹，这个思路可以帮助我们理解线条的本质。简单来说，线条是一条运行的轨迹，它是在点的基础上发展而来的。

提示

线的运动轨迹并不是一直平直的，只要能连缀成串的，都可以把它看成一条线。这时，它就能在界面的构成中发挥作用。

当蓝色的圆点均匀分布，组成一条非常平静的运行轨迹线，当蓝色圆点的运行轨迹具有变速的节奏时，它们组成的线条则带有变速之感。如图2-14所示为点与线的关系。

大众对于线的理解还处于传统认知时，就会认为当一个点向一个方向移动时，就成为直线；当点在移动的过程中经常变化方向，它就是曲线；当点的移动方向间隔变换，则为折线。如图2-15所示为传统线条的分类。

提示

运行轨迹会使线条具有方向感和动感，尤其是在UI 界面设计中，线条的走向直接引导着用户的视觉走向。

2.3.2　线条风格的变化

线条的风格表现在线的宽窄样式和线的平直弯曲样式上，这些形态上的变化，可以使线条在UI界面设计中演绎出谨慎严肃的感觉，也能演绎出率性天真的感觉。

●细线条

如图2-16所示的UI界面中细细的装饰线条，表达了一种稳定、精致的感受。这种装饰线条目前在UI界面设计中比较受欢迎。因为这类线条简洁，能与任何前景或背景图形进行融合，既丰富了界面的细节，又能引导用户的视觉方向。

在常见的UI界面设计中，扁平化风格的设计传递着某种精致感。而扁平化的设计风格在线条的选择上，首选就是细细的直线，不夹杂私欲，有点“冷淡”的矜持，如图2-17所示。

●粗线条

在UI界面设计中，使用较粗的直线装饰界面时，可以表达出一种稳定感。但是如果粗线条单独使用，则可能会引发用户的紧张感。所以，粗线条一般放在文字下方或者文字左右两端，起强调的作用。

粗线条所表达出的紧张感和稳定感，都是因为它能引导用户的视线，让线条和界面中一个面积较大的装饰元素互为整体，从而体现出UI界面的安全感，如图2-18所示。

●自然卷

直线会给用户带来紧张感，那么，曲线、波浪或卷曲的线条就会让用户进入一种放松的环境中。

在UI界面设计中，线条的主要功能除了装饰页面，还带有一定的指向作用。在界面中必须需要一点紧张感才能让浏览者关注页面，因此，大部分UI界面中的线条都是直线，而曲线比较少见。

如图2-19所示的UI界面，处于中心位置的曲线图案，给整个画面带来一种活泼的氛围。而且透底的曲线图案，由于底衬图片的不断变换，为浏览者带来不同的视觉效果。

知识链接

曲线的发展由来

说到曲线，就必须科普一下一百多年前的“新艺术”运动。由于当时的欧美进入工业化量产时代，所有的产品设计、平面设计因为经由机器大量生产，慢慢失去了对审美的追求，因此当时的部分平面设计的先驱们纷纷投入到一场反工业、反粗俗的革新运动中，主动设计出大量带有此类反机械化，并且有手工业色彩的作品。

这场运动的灵感来源主要是中世纪的装饰艺术、日本的一些东方装饰风格和自然主义。他们提倡灵感来源于自然，因此他们设计出的作品都是以卷草图案等曲线为主的。用户可以看到在自然界里，没有任何一条线是完全绝对的直线，如叶、花、树叶、鸟、海浪、山川、河流……

直线恰恰是人类作用的痕迹，建筑、工业、日常用品的造型大都以直线为主。经过这番观察，可以大致了解，曲线是自然的表达式，当用户想要传递与自然有关的信号时，就尽量不要用一些特别僵直的线条。

●曲线美

折线在线条的形式当中是一个特殊的存在，因为它既不是直线，也不是曲线，它没有流畅感，却另有一番曲折的美感。

一条单一的折线传递的信息量不多，但如果是规律排列起来的折线就能形成纹理，不管是作为背景还是装饰物，它都不会显得突兀，而且能创造出一种另类的视觉效果。如图2-20所示为采用折线纹理的UI界面。

提示

在UI 界面设计中，折线是属于理性范围内的装饰物，但它又比平行直线多一份优雅，使UI 界面不那么刻板。

2.3.3　装饰线条的作用

线条在UI界面中除了装饰作用，在视觉上，还具有三方面的作用。

●引导视觉方向

视觉引导作用是线条最基础的视觉功能，也是其他两个作用的基础。

●封闭成形

用一根线条来组成一个图形，称为“简笔画”或者“速写”。从这里可以看出线条的成形能力，就算线条并没有完全闭合，也可以自我填补，反映在用户的视觉中时，将会形成一个完整的图形。

●分割与限制

线条的视觉作用，大部分人想到的就是分割，即“划分区域”。这里需要注意的是，两个不同色块的交界，就算并没有一条明显的线条，也能产生一条线的视觉感受。如图2-21所示为UI界面中的色块线条分割法。