设计评审的时候，总会有人会一直追问你，你为什么这样设计？从事多年的设计行业，这样的问题一直是我设计工作中很头疼的一部分。其实，很多初级设计师，很多情况下拿到需求会先找参考，竞品，然后依据经验及参考进行设计。但是，面对上面这些问题的时候，自己明白这样设计不管是满足需求、体验、视觉方面都是更好的，但是每次回答的时候就只会说：这样体验更好，xxx大厂的设计也都是这样做的？那是因为，没有足够的设计理论知识支撑，有一些设计师是中途转行做UI设计的，所以在设计理论这一部分是缺少的；还有一部分设计应该是跟我也差不多，学过设计理论基础知识，但是早期没有深入的理解理论并结合实践，自己能理解，但是表达不出来。
如果我们知道自己的每一步设计为什么这样做，在过方案时，我们的讲解可能会更有说服力，老板也会尝试站在我们的角度去看待我们的作品。
所以首要做的是先打好理论基础，任何优秀设计最后解构都会倒推到基本的元素就是点线面，【点线面】是设计中的最基础理论，同时基础理论对设计师后期的成长是起到至关重要的。再好的表现技法、形式，如果没有设计的基础和准则的支撑，都是空有其表没有内涵的。所以，接下几天我就和大家聊聊【点线面】的基础理论，及在设计中应该如何运用。因为篇幅关系，我们会分成三部分进行，本次主要分享【点线面】的来源及三元素之一的【点】。
很多人可能会觉得点线面嘛，我都学过了，就那点东西。而且是属于平面设计方面的，跟我们做UI设计的没什么关系。但其实，界面设计在单纯的视觉层面上看，实际上就是界面的版式设计，换句话说，版式设计是否合理是界面设计视觉展示的关键。
界面设计就是在有限的屏幕空间里解决的是产品视觉效果的呈现问题，将：①文字、图形、色彩等，根据特定的内需求借以合理的界面版式设计原理和视觉手段来保障用户在单位时间内获取最多的内容资源，即实现信息的高效获取。②界面设计一般都是连续可交互的版式编排设计，要求各个界面之间是有联系的。当所有人都追求复杂深沉的时候，简单纯粹反而是最有力量的。
康定斯基
点、线、面理论最早由德国包豪斯时期的瓦西里·康定斯基提出，于1923年撰写的《点、线、面》一书最早曾作为包豪斯学院的形式课程进行教学。
他将所有艺术的形式都归结于点、线和面三种元素的关系。全书自成体系，内容具体，深入浅出，富含美学洞见，并极具实践参考价值，为近现代平面设计奠定了基础。
点、线、面原理适用于很多设计领域，海报、书籍、画册、绘画、UI界面，甚至于工业设计中也有很多优秀的作品会应用到。
书籍设计中的点线面
海报设计中的点线面
摄影中的点线面
UI设计中的点线面
什么是点线面
点线面，是几何学的概念，也是平面设计中最重要的构成元素。点线面把不同的部分或者元素组合成一个整体，进而打造一个视觉舒适平衡的设计。设计师对于排版的全局观，就是 “ 点线面 ” 的处理。在通常的意义下，点被看作零维对象，线被看作一维对象，面被看作二维对象。点动成线，线动成面。在视觉层面上我们可以这样理解：
点就是点缀，目的是丰富画面，活跃气氛；线就是联系，具有引导性，贯穿画面；面是重点，用于呈现主要的信息，具有分量感。点线面这三者都是相对存在的。点拉长了就是线，线变宽了它就是面。这三者是可以相互转换的。在UI界面设计中的面性图标，我们可以将其看作一个点，当相对于线性图标时，我们又可以将其看作面。如果这个图标和其他图标一起组成标签栏，那这串图标也可看作线。
什么是点
—
平面构成中，点是形态的最基本要素，是造型中最小的单位。点作为最简单的几何概念，通常作为几何、 物理、矢量图形和其他领域中的最基本的组成部分。康定斯基说过，“点可以具有无穷多的形状，只要其足够小就可以”。并将点的关系描述为「雄辩与沉默」，当点独立存在于一个画面中时，它便开始「雄辩」自己的存在，让自己成为焦点；而当它的数量增加时，点便倾向于「沉默」，并且根据它的排列方式倾向于对应形态的特性。
我们可以把它看做一切形态的开始，它是一种具有空间位置的视觉单位。点只表示位置，不具有大小，既无长度也无宽度，是最小的单位。
点的特征与心理特征—
点是视觉元素中最小的单元
平面构成中最基础的元素是点线面，线和面都可以由点延伸出来，所以点自然是最小的单元。
点是一个相对概念
点是相对的，在当前画面中，占比相对较小的面积，称为点元素。多大的点才是点，这个其实没有绝对的定义。不过在同一个画面中，我们可以通过比较来定义谁是点，谁是面。点不一定是“点”。点可以是文字、图形、短线、一个色块等等任何形式的，定义的前提是画面中有存在面积更大的元素。点的分布与视觉特征
单点
一个点表明位置，形成视觉焦点，吸引人的注意。
单点有着很强的视觉吸引力，在一个相对稳定的页面中，当点居于画面中间的时候就会让人感受到平静、集中的视觉感受，如果位置偏上、偏下或偏左、偏右，都会给人们一种不安定的视觉感觉。
画面大量留白，以此与点形成了对比，赋予了画面强烈的平静感页面与单点的视觉关系是受页面两条对角线以及由垂直中心轴与水平中心轴相交而成的十字影响的，无论单点处于哪个位置，我们都会产生相应的心理特征。往往单独的点都会出现在界面的黄金分割线上，以突出企业形象或者某个产品等形式出现。这种情况下，作为整个界面的主体，都是以简单的纯色背景来衬托该元素，通过这种形式达到加强用户视觉印象的目的。
两点
两个点构成视觉心理连线，两者产生关系
对于两个点，在原有的单点的基础上它们之间还存在着另一种视觉张力，这种视觉张力会引导我们视觉移动、形成一个视觉流程。会按照我们平时的认知习惯，依据大小、远近的顺序，从大到小、从实到虚的视线在两点之间移动，两个圆点相连就可以具有方向性，如果两个圆点一样颜色、大小一样，我们一直在它们之间移动就会出现线的感觉，“点动成线”也是由此而来。
多点
三点以上就可以成为多点，多点可以产生更加丰富的视觉力。三个点可以构成三角连线
多个点让注意力分散，画面出现动感
如果页面上出现了三个点，我们的眼睛会不自觉的去发现它们之间存在的关系，这样就会出现一个隐约可见的面。“线动成面”就是由此而来。
多点一般我们会利用点的大小、位置、叠加来产生空间感，带有方向性的点可以直接充当线的作用，它们可以灵活的表现方向的多样性，同时这种表现比真实可见的线更加含蓄，很多设计师十分喜欢点的这一特性，并且经常用到作品之中。多个点组合，可以表现丰富的形象内涵，简洁而深度地传达视觉形象信息1.分散点运用剪切、分解等基本手法，打破了整体图像对象，形成零散的分散点，而点在分散中也不失整体感2.聚集点聚集点的运用能使视点更集中，达到吸引眼球的目的，有节奏地排列密集点，给人一种视觉均衡感。聚集的点一般以文字、简单的图形、按钮等视觉形象出现，这些点元素以重复、密集、特异等构成形式法则组合排列，以分散形式组合排列的界面设计中的点元素，存在与手机界面的各个位置，使整个界面看来起更饱满。
3.自由点自由点的运用更为灵活，其自由地结合表现出随意的散落感，使版面更加活泼生动，在版式设计中可以运用自由点协调画面各个元素，让元素之间产生强烈的联系。点少，重在点的形态；点多，重在排列形式。
点有哪些视觉特征
点在画面中存在，通过大小，虚实，浓淡，多少的关系变化，都会影响视觉感受的强弱。这些变化可以形成线也可以形成面，或者依旧是点的变化。点的形态特征不同，给人的视觉感受也不同。点的错视
所谓“错视”就是人们的主观感受信息与客观事实不一致的现象，点所处的位置，随着其色彩、明度和环境等变化、会产生远近、大小等变化的错觉。视错觉确实可以产生强烈的视觉冲击力，但因为视错觉也很容易让人觉得画面混乱，造成页面可读性变差，在设计过程中注意发现和利用视错觉的优势，规避视错觉产生的混乱情况。
不同的点给人不同的感受
圆形的点：给人以运动，圆润、饱满、浑厚有力量的感觉，很多公司的LOGO，首页图标都喜欢使用大量的圆；方形的点：给人以平稳，端庄，大方感，踏实的，可依靠的感觉；三角形的点：给人以尖锐，紧张的感觉。不同点的序列组合给人以不同的直观感受；其他不规则的点：给人以有个性，独立，张扬，在规则的图形里非常显眼，往往用于丰富画面；点的空间位置
点在画面中的位置和方向很重要，它影响的画面的视觉感受和走向。点所处的空间位置不同，所表达的心理效应也是有很大差别的，悬浮的或下沉的点所带来的心理感受截然不同 居中：上下左右空间对称视觉张力均等，即庄重、平稳、稳定、集中感强、多点：灵动、自由、活泼居下：下降的、逃离的、沉淀感、安静而低调，不容易被发现
居上：上升的、积极的、符合人们视觉阅读顺序黄金分割点：更能吸引人注意，版式更具有构图形式感空间大小感觉
面积越大的点，在视觉上会显得离人眼更近。
明度越低的点，视觉上会显得重量更重。
实点与虚化的点，可以明确画面焦点，让用户视线快速定位到画面的主体上。通过虚实对比，能迅速的拉开画面前后对比，形成空间感。点在几何学意义上是以圆点为最基础的形态，它是具象的点。但是在手机界面设计中，点是以抽象形式存在的，它的效果取决于与之共存的其他元素相互之间的比例。
点在设计中的应用及作用—向心性
在界面设计中，点是点缀丰富画面气氛的元素。点最重要的功能就是表明位置和进行聚集，点的向心性协助它成为视觉焦点，吸引人的注意，可起到快速视觉定位的作用。以飞书管理后台为例，在每个模块标题旁添加一个小小的短线，而这个小短线便是作为定位点引导用户迅速注意到标题，实现不同内容的快速定位。
在移动端，现在我们会直接用标题本身作为点进行定位。但是，在其他的场景下，仅靠文字其实并不能很好发挥点的向心性，尤其是一些信息较多、需要迅速辨识的场景下。这时候，我们通常会引用图标来指代它。
图标本身可以用来表意，而独立、精致的特性让它很适合作为点元素来处理。比如app中的标签栏中的图标就可看作点元素，每个图标以其所具备的向心性帮助我们迅速得聚焦到它所在的位置。列表页的每个字段前也会加入对应含义的图标来帮助用户迅速锚定当前栏目，并且由于图标拥有更高的辨识性，这让阅读变得轻快而富有节奏。
试想一下，当我们将上图的图标去除后，阅读是不是就没有了强定位元素，将会缺失节奏，信息获取变得困难和缓慢，影响用户的交互体验。引导视线在一些页面中，点起到引导视线的作用，比如在一个很长的页面中，我们经常会使用数字来引导用户的视线，一方面是提醒用户内容模块的切换，另一方面也让排版的节奏有一些跳跃感。
在书籍的文字排版中，文字和图标都是用来引导视线的常用方法。
平衡性
当我们将页面的内容设计排版做好之后，需要整体来看一下构图上是不是平衡的，如果有视觉上的落差，则可以考虑加入点元素来使得画面更加平衡、稳定。
心动图标的加入，使得画面上下的重量达到平衡。
烘托氛围
点还可以作为辅助元素，来烘托页面的氛围，这是最最常见到对点的使用方法。适当的点缀元素可以很好的丰富画面的层次感，强化整体氛围。
常见的是我们排版书籍画册时，利用序号作为点元素，提示信息。
同时点也可以塑造空间感、机理感
聚集性
点的线化界面设计中，点通常以图标的形式进行横向及纵向的排列，并且倾向于线的引导性进行视线引导。点的横向排列通常见于Tab导航栏、首页的金刚区入口等。点的纵向排列通常见于列表布局中。由于点本身对用户注意力的聚焦，结合对比设计原则，点沿着什么方向进行排列时，用户视线便倾向于朝对应的方向移动。
列表布局
列表内容拆分主要就分为图、文字两大类，从形态上看，文本本身具有线那样不断延伸的特点，因此列表的横向版面更适合长文本的展示。而图片、图标通常以固定尺寸独立存在于右侧，可看作点元素，像上一面“向心性”作用一样，它可作为列表的引导视线作用。从视觉动线上看，列表布局的动线属于尼尔森等交互原则的F型浏览模式。即用户首先落点于左侧的定位点，再由左向右进行阅读，接着再垂直扫视，当定位到兴趣点后继续由左至右的阅读。这种动线符合人类自然的阅读模式。这也是这么多年列表式布局这么受产品及设计师青睐的原因，它更适合基于产品及用户习惯的阅读规律。点的面化可以使足够大的点本身形成一个面，当画面中只有一个点存在，那这个点很自然的就成为了焦点所在。这个点即使是小到快看不见，它依然还是画面的焦点所在。原研哉的无印良品的设计就是最好的例子在实际的应用中，还可以通过留白、颜色对比等方式，强化画面主体。还可以通过聚拢的方式强化画面中的视觉焦点。在这种分布形式下，点常常横向排列在界面中（一排内通常不超过5个），作为一个个快捷入口存在，形成网格式布局。比如金刚区业务入口、书籍等类型的布局都属于网格式。这个布局下的点集合倾向于面元素，界面在这个布局下呈现出富有观赏性的视觉张力，吸引用户眼球，而且网格式的布局引导用户视线均匀迁移，便于视觉区分。
网格布局网格布局通过牺牲宽度来将界面等分为一个个格子，一般是9宫格或者瀑布流的方式，从形态上直接限制了长文本的存在，这让它更适合放置一个个独立的点，比如图片、图标。而文本则落于底部作为弱化辅助。从视觉动线上看，网格布局倾向于Z型浏览模式。用户视觉动线通常由左至右、再由上至下得进行，并可以「雨露均沾」得在数个点上均匀迁移，注意力递减效应不会像列表布局那么强烈。因此，网格布局非常适合进行不同信息的辨识和区分。界面中常见的功能业务入口、图书或者电影的布局、靠图片引导的网购、图片展示类产品，这些不需要明显的排序处理，并且都是通过较好的图片、图标进行迅速地辨别和区分，继而做出交互决策。如果将其列表化处理，不同信息的辨识区分效率将受到影响。如下图，服装属于典型的外观型商品，当变为列表视图时，商品之间将难以辨识区分。那么如何选择列表还是网格排版方式呢？列表：适用于文本为主要展示，或者按照某种规律排序的信息。网格：适用于图片为主要展示，或者没有排序规则，需要用户通过图片、图标辨识区分的信息。比如：当然了，这两种布局并非只能选其一，像淘宝、京东这类体量庞大的电商平台便为了方便用户习惯，提供了两种布局视图便于用户随时切换以降低决策成本。最后本次的分享到这里就结束了，希望可以对大家有帮助。由于篇幅过长，我将文章分成三个部分，有兴趣的朋友可以关注我们，期待下面的两期吧！在这快节奏的浮躁的时代中，我们需要保持设计的初心，做有灵魂的设计，我们下篇再见~
本篇内容：理论来源于《平面构成》中国工信出版集团、《平面构成》尚震 徐丽 ，图片部分来源于网络，侵权即删。
关注我们 &点在看 你最好看