完整的设计理论为你解决90%的困惑（中）

发布时间：2020-10-10 作者：admin 0

康定斯基在书中用温度来定义线的情感，他把水平线定义为无限冷能的表达，把垂直线定义为无限暖能的表达。看似晦涩，但涉及到现实生活就相对容易理解了。

现实生活中的水平线通常存在于地平线上，所以给人一种安定祥和的感觉，类似于不启动时的“冷”状态；垂直线是那些从基线开始建造和生长的东西所共有的，比如高楼和高耸的巨树，它们都是通过能量实现垂直方向的高度变化，所以给人上升、下降、变化的感觉，类似于启动后的“温暖”状态，而线条的冷暖状态决定了水平线和垂直线发挥各自作用时所传达的感受。

第一，引导

线可以向任何方向延伸，这使得它具有很强的导向性。最常见的界面是运行和地图应用程序中的路线显示，即通过直线的引导显示从起点到终点的轨迹。

如果我们在一条线上对齐起点和终点，我们可以通过降维将其降维为一维。时间维度可以扩展到界面中的时间线、步栏、加载栏、音视频进度条等。这种维度通常需要通过点的向心力来添加点元素来辅助定位。滑动页面时，空间维度扩展到滚动条。

正如上面对温度的解释，“温暖”状态的垂直线象征着变化。当我们希望用户感知到时间的变化，或者过程耗时较长时，竖线是更好的选择。比如外卖和快递的订单进度，火车的停站时间，时间线，到达时间等信息需要传达一种变化感或者需要很长时间，所以适合用一条象征变化的垂直线来引导，给用户一种变化感，产生需要等待的心理预期。

“冷”态的横线象征静止。当我们希望用户能沉浸在这个过程中，不能感知时间的变化，或者过程时间很短的时候，用横线比较合适。

比如airbnb申请成为楼主的时候，会有一个分页表，用户需要马上填写。为了让用户沉浸在填写中，横线也作为其进度反馈，减少时间变化感。美团药师的复习进度是立竿见影的，通常只需要等十秒钟。横向的静止可以让用户感受到“正在发生”，避免让用户因为长时间等待的心理预期而离开当前页面。

但是如果把美团点评人的进度条改成竖排(不包括文案提示)，带给用户的感觉就会大不相同。

下面说的分段也可以用冷暖状态来解释。我们希望用户能集中精力阅读信息，所以我们会尽量避免容易带来变化感的垂直分割线。即使由于信息的分割而不得不使用信息，它的亮度和长度也会尽可能的减少。另外，界面上往往有一条看不见的线，也起到了重要的引导作用，但这种线并不仅仅作用于某个特定的模块，通常作用于整个界面。是的，这条线经常被称为视觉动线。可视化动线在网格和列表部分有简要描述，但是这部分系统太大了，以后有时间单独写一篇文章分享。

二、细分

很多情况下，当界面只用空格分隔时，很容易造成信息划分不清。这时候我们往往需要引入额外的表格来辅助。比如分割线。

分割线通常用于在模块内划分信息。虽然它们简单粗暴，但无法应对更高级别的模块划分。模块之间的分割通常根据区域(分割条)进行。空白、分割线、分割线是由低到高划分的，通常需要在页面中进行组合。

需要注意的是，线和平面的分割形式需要尽可能的轻。一旦有了视觉权重，就很容易变成噪音。我们需要避免低信噪比对用户阅读体验的损害。

为了增加页面的气息，我们经常会把所有的线条和人脸用空格代替，这是最轻的分割方法。这种大边距往往结合了Reduction风格，既营造出舒适的简约感和呼吸感，又减少了页面中线条和平面分割带来的视觉噪音。

肤色还原源于Airbnb、Instagram、Medium等产品的页面改版，由UX设计师迈克霍顿总结。苹果17年发布的Ios11就属于这种风格，这种风格最突出的三个特点是头条、脸图标和内敛的色彩。

然而，这种非形式化的分割方法并不适合所有的页面。一般只适合单页模块，信息单元字段少的页面，或者图片本身作为分割方式。例如，宜家和airbnb的主页，不像JD.COM和支付宝，有巨大的容量和业务需求，非常适合留白的方式。这让他们的主页看起来非常干净清爽，充满了气息。

然而，在其他具有大量现场信息的界面中，分割线仍然是一种有效的划分方式。我们可以看到，IKEA和airbnb的细节页面仍然选择分割线的方式来处理众多的字段信息，避免了空格造成的层次混乱。

第三，造型

线本身可以任意方向自由延伸，形成曲线、折线、螺旋线等。而线的末端连起来，就可以勾画出来了。

而线的闭合形成的表面只是一个空壳，没有数量感。但同时线条本身的明度使其更加轻盈透明，所以对于一些识别要求较低或者需要弱化的元素往往是不错的选择。重影按钮和线性图标是界面中最常见的应用。

相对于平面按钮和图标，数量的不足让他们在认可度上无法胜出，但在其他地方也有自己的优势。Ghost按钮常用于一些子按钮、未选状态和标签，而linear图标常用于一些次要功能、未选状态和装饰。

当然，线条和平面也可以根据产品本身的需求进行分类。比如支付宝、美团，工具图标都是线性的，业务图标都是通用的。而且线性图标不会因为背景主色块的反白添加而被过度削弱。

四.短划线

虚线是虚线最简单的表达。但由于虚线本身的断裂点太多，不适合常规信息的分割，通常适合一些特定场景。

比如在一些特殊场景中，比如一些产品中的门票、账单等，通常会添加虚线来划分信息，这是为了映射出模拟现实世界中容易撕裂的撕裂线，以增加代入感，减少认知负荷。

虚线的另一个特点是不可见。这个特点最早可以追溯到建筑、机械等行业的图纸规范中的——。由等效点元素组成的虚线表示物体盲区的边缘线和轮廓线。

在一些漫画或动画作品中，当某个东西突然消失时，往往会留下一个虚线的轮廓。

这个有趣的设置也被设计者引用到用户界面中。比如我们想让用户上传一张图片的时候，经常会用一个带点的长方形结合一个按钮来引导，只是为了告诉用户：哎，这块地还是空的，过来加点素材！比如Pinterest，dribbble，AntD的图像类上传组件都是采用这种设置。

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

就这些了。希望对这些特性的讲解能对你有所帮助。下周继续解释对面，不会再见。

更多的工业外观设计【设计案例】请点击进入。

完整的 设计理论为你解决90%的困惑（中）

完整的设计理论为你解决90%的困惑（中）