​UI设计基础理论篇之【点线面】—入门必看（二）

今天是点线面系列的第二篇【线】，上一篇我们全面的聊了关于设计基础构成中【点】的特性以及应用，今天我们来详细的聊聊设计基础构成中的【线】。

上一篇【点】快捷入口奉上，点击下面蓝色文字即可！

线的理论基础—

什么是线？

线是点的延伸，如果说「点」是静止的，那么「线」就是点的移动轨迹，当点的长度和宽度形成非常悬殊的对比的时候，也能形成线。

康定斯基：“线是点在移动中留下的轨迹，由运动而产生。”

如图上图所示，是照相机延时曝光记录下的立体派大师毕加索，使用蜡烛在空间中绘制的光的线。

在几何学上线只有位置、长度而不具有宽度和厚度，但是作为视觉形象的线，不仅具有长短、方向、位置，还具有粗细，线与点一样成为视觉元素中不可取代的表现力。

线的存在表现形式是微妙的，点的密集形成的运动轨迹可以视为线，不同颜色的面形成交界也可以存在线。同时线足够短时，又可以变化为点，线的加粗又转化为面。因此，点线面不是绝对存在的，是相对存在。  

线的分类—

在形态学中，线具有宽度、形状、色彩、肌理等造型元素。是最富表现力的视觉形态，直线、斜线、曲线、折线等等，不同的线带给人们的心理感受也各有不同。

直线

直线的方向一直保持不变，具有一种伸向无限的趋势，描述直线的情感一般可以使用以下的词语：男性化、简单、明了、直率、坚硬、顽强、单纯、简朴、肯定、机械、无机、冷淡。

依据线的方向：

水平线：排列给人平静、安逸、稳定的感觉，我们常常会运用直线来对不够标准化的设计进行纠正。适当的直线还可以分割平面；

竖线：排列具有庄重、严肃、崇高、修长、有纵深感特点；

斜线：飞跃、向上、冲刺、前进。斜线还产生一种悬而未决的吸引力；

折线：有刺激、焦虑感、不安静感觉；

依据线的粗细：

粗线：厚重、醒目、有力，视觉引导效果更直观；

细线：纤细、锐利、微弱，给人细腻感；

依据线的长短：

长线：修长，具有延伸的版式效果；

短线：果断、精致；

曲线

曲线能表现活力和动势，描述曲线的情感一般可以使用以下的词语：女性化、流畅、活泼、轻快、柔软、亲切、优雅；一定线型的曲线还可以产生动力、速度、弹力的感觉；自由曲线能够自然伸展，圆润而具有弹性。

曲线的整齐排列会使人感觉流畅，让人想象到头发、羽絮、流水等，有强烈的心里暗示作用，而曲线的不整齐排列会使人感觉混乱、无序以及自由；

螺旋线：排列强调紧张、扭曲、急噪、弹性、节奏的特点；

线的常见特征—

有形的线和无形的线

线可以是有形的，也可以是无形的。

有形的线

清晰的线条让画面有速度感、层次感、丰富板式。

有形的线还有很多，不同的有不同的作用，包含引导性、分割线、塑造性等等，第四个部分会专门聊聊。

无形的线

隐形的线在排版中也很常见：

1、字形成隐形的线；

不同大小，粗细，颜色的组合，形成线的粗细变化，分割画面，进而形成有序的节奏；

看图中标出来的灰色的线，我们不难发现。文字的长度、高度、也对应了几何线的变化。为什么我们经常排版起来难看，因为没有粗细、长短的对比。线可以是单独的一条线，也可以是某个元素。点可以是文字，线也可以是。

上图中，虽然一条线也看不到，但是我相信所有人的脑中都会自动脑补上我画出来的那几条线。

2、视线

无形的线中还有一种很重要的表现形式—视线。很重要，很多时候的内容设计的期望值就是自然引导用户去阅读。人物的视线引导我们把视觉转向文字。

其实只要能将画面中的元素联系在一起的，就都会形成隐形的线，我们要善于发现这些隐形的线，来串连我们的版式。

线的错觉

上图就是我们最早接触的线的视错觉，同样线的视错觉还有，

周围造型因素对比产生错觉，周围环境对比越强，视错觉效果越大；

一条斜向的直线被两条平行直线截断，会产生不在一条直线的错觉；在用直线用组成的正方形周围加入曲线元素，因为环境而产生的视错觉还有很多，我们日常也可以留意一些。

线的特征及应用—
线是一种既有功能性又有装饰性的构图元素，但总的来说，我们用到的功能性会更多一些。
流动感

线是由点延伸出来的，所以线天生就具有流动感，它是动态的。

线在编排构成中的形态很复杂，有形态明确的实线、虚线、也有空间的视觉流动线。然而，人们对线的概念，都仅停留于版面中形态明确的线，对空间的视觉流动线，却往往易忽略。实际上，我们在阅读一幅画的过程中，视线是随各元素的运动流程而移动的，对这一流程人人有体会，只是人们不习惯注意自己构筑在视觉心理上的这条即虚又实的“线”，因而容易忽略或视而不见。实质上，这条空间的视觉流动线，对于每一位设计师来讲，都具有相当重要的意义。书法作品完全是线条的艺术，它的线条像是由墨水自动流淌出来一般，浑然天成，而不像人工书写的。
引导性

在现实世界中，线可以将不相关的物件连接起来，在设计中也是如此，

在引导的作用上，线是一种比数字更视觉化的表达方式。

引导方向，由于线是点的移动轨迹，所以它天生具有方向性，用它来做视觉引导，最适合不过。界面中最常见的就是跑步、地图类app中的路线显示，就是通过线的引导性来显示起点到终点所行进的轨迹。

回归设计中道理是一样的，线条可以引导用户把原本杂乱无章的视觉点规整为有次序的视觉元素,线的形态可以有很多种，例如：

界面设计中的向导导航就是典型的视觉引导作用，引导用户查看第一步、第二部、第三部等。所以在设计中，如果想要引导视觉流动，线是最好的选择。

tips：当希望用户能够感知到时间的变化，或者流程需要花费较长时间时，垂直线相对来说是个更好的选择。比如外卖、快递的订单进度，火车的停靠站点时间等信息，要么需要传达变化感，要么费时较长，因此适合以象征变化的垂直线来进行引导，给予用户变化感、产生需要等待的心理预期。

当我们希望用户能够沉浸在这个流程中，感知不到时间的变化，或者流程时间极短时，那就更适合用水平线。

时间维度可以引申到界面中的时间轴、步骤条、加载条和音视频中的进度条等，这类维度通常需要加入点元素，通过点的向心性辅助定位。空间维度则引申到滑动页面时出现的滚动条等。

利用线条的连接与引导功能，将画面的重点信息串连起来。在App设计中，有一种常见的浮层引导，会使用线框来归纳信息，这种线框不仅可以强调内容的重要性，还可以指引用户进行操作，如图所示。
线也有指向性的作用，人的视线会不由自主随着线的轨迹移动
分割性很多时候，界面中仅仅以留白进行分隔时，很容易造成信息无法被明确的划分。这时我们往往需要引入额外的形式进行辅助。比如分割线——让作品中的元素具有主次清晰的空间感。分割线通常运用在模块内部信息的分割，虽简单粗暴，但并不能应付更高层级的模块分割。而模块之间的分割通常以面（分割条）来进行。留白、分割线和分割条三者的分割层级由低到高，通常需要在页面中结合使用。我们希望用户能够专心阅读信息，因此会尽量避免容易带来变化感的垂直分割线。即便迫于信息的划分需要不得不用到，也会尽量降低它的明度和长度。
不过，也有例外，为了增加页面的呼吸感，有时候会用留白这种最为轻量的分割方式代替所有的线、面。视觉上不仅制造一种舒适的简约感和呼吸感，也减少了页面中线面分割形成的视觉噪音。不过，一般只有在页面模块单一、信息单元字段较少、或者以图片本身作为分割方式的页面才适合使用。这让页面看上去非常干净清爽，富有呼吸感。

另外，界面中往往也存在着一条无形的线，它同样也是起着重要的引导作用，只是这类线不仅仅作用于某个特定模块，它通常作用于整个界面。这条线通常被称作视觉动线。

塑造性

线还具有塑造造型的功能，线的封闭可以构成面，线可以突出形，勾线具有美化作用。

界面中最常见的运用就是幽灵按钮和线性图标。

线条本身轻盈的特性让其更加轻量、通透，对于一些辨识要求较低、或者需要被弱化的元素来说往往是个不错的选择。相比于面性的按钮和图标，量感的缺失让其无法在辨识性上胜出，但是在其它地方也各有所长。

但是，线面也可以根据产品自身需求作类别区分。比如支付宝和微信，顶部的工具型图标采用线性，下面业务型图标全部面性。并且线性图标得益于背景主色色块的反白加成让它们并不会被过度弱化。

虚线

虚线在我们的设计中是点化线的最简易的表现。但是因为虚线本身特性，断开的地方太多了，不适合用于常规信息的分割，它通常适用于一些特定的场景。常常用来在一些票券、账单这类特殊场景中，通常会加入虚线进行信息的分割，就是为了映射模拟现实世界中便于撕开的撕票线来增加代入感，减少认知负荷。

一些缺省图或动画作品中当一个东西突然不翼而飞时，往往会留下一个虚线的轮廓。

另外还要一些有意思的设定也被引用到了用户界面中。比如当我们想让用户去上传一个图片时，往往会采取一个虚线的矩形结合按钮进行引导，便是为了告诉用户：这块地还是空的，快进行添加吧！

最后

本次的分享到这里就结束了，希望可以对大家有帮助。

由于篇幅过长，我将文章分成三个部分，有兴趣的朋友可以关注我们，期待下面一期吧！

在这快节奏的浮躁的时代中，我们需要保持设计的初心，做有灵魂的设计，我们下篇再见~

本篇内容：理论来源于《平面构成》中国工信出版集团、《平面构成》尚震 徐丽 ，图片部分来源于网络，侵权即删。

 关注我们 &点在看 你最好看