如何让你的设计有据可依：界面中的点线面（中）

线条是一种简单、轻盈的存在，可以看作是点受外驱力作用下的运动轨迹。它从维度上来说属于一维，不同的外驱力结合使得线可以沿着任意方向自由得延伸，从而让它拥有了高效的引导性、分割性和造型性。

上期回顾：

康定斯基在书中以温度去定义线的情感，他将水平线定义为无限冷能的表现形式，将垂直线定义为无限暖能的表现形式。看似晦涩难懂，但联系到现实生活就相对容易理解一点。

现实生活中的水平线通常存在于地平线中，因此给人的感觉是稳定、平和，类似非启动时的「冷」态；而垂直线常见于那些从基线建造、生长的事物，比如高楼大厦、参天巨木，它们都通过能量来实现垂直方向的高低变化，因此给人的感觉是上升、下落、变化等感觉，类似启动后的「暖」态。而线具备的冷暖态决定了水平和垂直线发挥各自作用时所传达的感受。

引导性

线可沿任意方向延伸的特点让它具备了很强的引导性。界面中最常见的就是跑步、地图类app中的路线显示，就是通过线的引导性来显示起点到终点所行进的轨迹。

如果我们将起点和终点对齐归于一条线上时，便可以通过降维的方式将其缩减至单个维度。时间维度可以引申到界面中的时间轴、步骤条、加载条和音视频中的进度条等，这类维度通常需要加入点元素，通过点的向心性辅助定位。空间维度则引申到滑动页面时出现的滚动条等。

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

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

比如Airbnb申请成为房东时，会有个需要用户即时填写的分页表单，为了让用户沉浸在填写中，同样以水平线作为它的进度反馈，降低时间变化感。美团药师的审方进度是即时性的，通常只需等待十几秒即可水平的静止感能够让用户产生「当前正在发生」的感觉，避免让用户产生需要等待较长时间的心理预期而离开当前页面。

但是，如果我们将美团审方的进度条改为纵向（去除文案提示），给用户带来的感觉也就大不相同。

下文讲到的分割性也可以以冷暖态来解释。我们希望用户能够专心阅读信息，因此会尽量避免容易带来变化感的垂直分割线。即便迫于信息的划分需要不得不用到，也会尽量降低它的明度和长度。

另外，界面中往往也存在着一条无形的线，它同样也是起着重要的引导作用，只是这类线不仅仅作用于某个特定模块，它通常作用于整个界面。没错，这条线通常被称作视觉动线。视觉动线在网格与列表那一节中简单说了下，只是这部分体系太过庞大，后面有时间单独写一篇分享。

分割性

很多时候，界面中仅仅以留白进行分隔时，很容易造成信息无法被明确得划分。这时我们往往需要引入额外的形式进行辅助。比如分割线。

分割线通常运用在模块内部信息的分割，虽简单粗暴，但并不能应付更高层级的模块分割。而模块之间的分割通常以面性（分割条）来进行。留白、分割线和分割条三者的分割层级由低到高，通常需要在页面中结合使用。

需要注意的是，线面的分割形式需要尽可能得轻量化，一旦拥有了视觉重量很容易成为噪音，我们需要尽量避免信噪比过低对用户阅读体验的破坏。

为了增加页面的呼吸感，我们很多时候会用留白这种最为轻量的分割方式代替所有的线、面。这类大留白的特点往往与Complexion Reduction风格相结合，视觉上不仅制造一种舒适的简约感和呼吸感，也减少了页面中线面分割形成的视觉噪音。

Complexion Reduction最早源自Airbnb、Instagram、Medium等产品的页面改版，而后被UX设计师Michael Horton所总结出的设计趋势。苹果在17年所发布的iOS 11同属于这个风格，这类风格最突出的三个特征就是大标题、面性图标和克制用色。

但是，这种去形式化的分割方法并非适用于全部页面，一般只有在页面模块单一、信息单元字段较少、或者以图片本身作为分割方式的页面才适合使用。比如IKEA和Airbnb的首页，它们并不像京东、支付宝有庞大的体量和业务需求，所以很适合全留白的方式。这让它们的首页看上去非常干净清爽，富有呼吸感。

不过，在其他字段信息繁多的界面中，分割线依然是一种高效的分割方式。我们可以看到，IKEA和Airbnb的详情页依旧选择了分割线的分割方式以应对繁多的字段信息，避免全留白带来的层级混乱。

造型性

线本身可以沿任意方向自由延伸，形成一条曲线、折线、螺旋线等等。而当线的首尾相连时，便可以勾画出面。

但是，线的闭合性所形成的面仅仅是一具没有量感的空壳。但同时线条本身轻盈的特性让其更加轻量、通透，因此对于一些辨识要求较低、或者需要被弱化的元素来说往往是个不错的选择。

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

相比于面性按钮和图标，量感的缺失让其无法在辨识性上胜出，但是在其它地方也各有所长。幽灵按钮常用于一些次按钮、未选中态以及tag，线性图标常被用于一些次要功能、未选中态以及装饰。

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

虚线

虚线是点化线的最简易的表现。但是因为虚线本身断开的地方太多了，并不适合用于常规信息的分割，它通常适用于一些特定的场景。

比如一些产品中的票券、账单这类特殊场景中，通常会加入虚线进行信息的分割，就是为了映射模拟现实世界中便于撕开的撕票线来增加代入感，减少认知负荷。

虚线另一个特性是不可见性。这个特性最早可追溯至建筑、机械等行业的制图规范中——以同等点元素所构成的虚线代表对象视觉盲区中的棱边线及轮廓线。

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

这种有意思的设定也被设计师引用到了用户界面中。比如当我们想让用户去上传一个图片时，往往会采取一个虚线的矩形结合按钮进行引导，便是为了告诉用户：嗨这块地还是空的，快来加点料！比如Pinterest、dribbble以及AntD的图片类upload组件，都采用了这种设定。

另外，这种形式适用于表示空状态，比如dropbox。

最后

线的部分就讲到这里，但愿这些特性的讲解对你带来帮助。下周我们继续对面进行讲解，不见不散。

更多点线面的设计干货：

欢迎关注作者微信公众号：「转行人的设计笔记」