今天是点线面系列的第三篇【面】，上两篇我们全面的聊了关于设计基础构成中【点】、【线】的特性以及应用，今天我们来详细的聊聊设计基础构成中的【面】，也是这一个系列的最后一个部分。
UI设计基础理论篇之【点线面】—入门必看（一）
UI设计基础理论篇之【点线面】—入门必看（二）
什么是面？
几何学上有句话，点动成线，线动成面。线是点移动的轨迹，那么面就是线移动后的轨迹，面有长度和宽度，却没有厚度，强调形状和面积，群化的面能够产生层次感。
面与点、线相比的基本特征就是所占据的空间面积比较大，通常来说，对于点、线、面的确定，主要是依据具体形态在整体空间中所发挥的作用。
点：以点的位置为主;
线：以线的长度和方向性为主;
面：则是以其面积比较大的特征为主。
在形态学中，“面”同样具有大小、形状、色彩、肌理等造型元素，同时面又是“形象”的呈现，因此面即是“形”。
面的形态不受任何限制，所以不要把面当做简单的图形。面与底分图，也称作正负形。被关注的就是图或正形，不被关注的就是底或者说是负形。正形和负形相结合让你的设计非常耐人寻味，如下图。
另外，规则面对画面进行分割后，剩余空间本身也形成了一种面，称为留白，也可以理解为一种正负形的形式。对负空间的设计，对于整体画面的风格和层次感的提升很关键，也需要更多的研究和体会。
面的形状有很多种，它的形状是由本身的边缘线构成。从形态的描述上我们可以把面分成几何面与自由面、实面与虚面，这些不同的面，在视觉上所产生的心理效果各不相同。几何面
如方形面、圆形面、三角形面、菱形面等。这类的面有一种秩序感和规范性，在心理上具有简洁、安定、专业、井然有序的感觉，男性性格特征明显。
所以我们可以看到，地产类的设计最喜欢用直线面。
男装、运动类的设计也常常看到直线面的应用。
如圆和椭圆，就会产生随意、舒适、柔美的感受，同时能提高版面亲和力，拉近用户与界面的距离。自由曲线形成的面具有个性鲜明、随意的特点，带给人优雅、温暖的感受。
规则的曲面作为主形象出现，画面对称、趋于完美、柔软有弹性，女性性格特征明显。
圆是最经典的中心对称图形，也是最平衡的曲线形，圆具有向心集中和流动等视觉特征，是完整圆满的象征。在生活中到处都能看到这类的面，如一滴雨滴掉落在地面上，形成了一个自由的面，一笔颜料溅落在纸面上，形成了偶然的痕迹。偶然形也可是特殊技法和特殊材料运用偶然得到的效果，具有不可重复性，给人带来不同的心理联想。在结构上有不可复制的意外感，还具有一定的美感，自由、活泼而富有哲理性例如：实物（人物，墨迹，水花），不规则多边面…应用方式更广泛。
在规则的几何曲面基础上，增加了人为的随机变化，这类面可以很好的表达个性、自由、活泼等感受。
自由面是典型的女性特征，在心理上会给人带来幽雅、魅力、柔软和具有人情味的感觉。在现代视觉设计中，我们越来越关注个性与情感的表达，所以自由面是现在常用的视觉元素。
无形的面和有形的面
设计中有形的面
有机形的面，简单理解就是有清晰的轮廓线，在平面设计中表达一种真切的、清晰的、实在的区域，心理上给人的感受是稳定、坚实、明朗化，然而与此同时实面可能会给人留下呆板没有活力的印象。不同外形的物体以面的形式出现以后，会给人以更为生动、厚实的视觉效果。是自然的流露，具有淳朴和充满生命力的情感象征。
在一些特定的设计领域，必须使用实面，比如安全识别系统中就必须通过实面的形式表达出来，这样人们才能快速有效的识别标志中的信息。有机面是相对于几何面的一个概念。
如果你想体现某个事物具有原生态的特点，就可以尝试用有机面来处理。
设计中无形的面
虚面是指没有具体的轮廓线，但是我们能感受到它是一个面。虚面在平面设计中表达的是一种模糊、虚幻的内容，在心理上给人的感受是神秘的、变幻莫测的，通过对设计作品中的虚面观察，可以感受到设计者某些含蓄的、内敛的设计思想。
但是：需要特别注意一件设计作品，如果充满了虚面产生的虚幻感，会给人造成茫然、没有主题的印象，所以，最好的方法就是实面与虚面结合。同等大的两个正圆形，上下排列，上面的圆会感觉大些。这是因为我们的视平线习惯中线偏高。上面的图形大多数都形成视觉中心，所以在视觉上产生视错觉。
按着这个逻辑，在文字设计时英文字母B和阿拉伯数字8的上半部都比下半部略小，这样不但避免了视错觉带来的困扰，而且增加了字体的稳定感。
在画面中，面的形态与周围空间环境的影响，这种对比产生不同的视觉效果。两个大小相同的图形，被大图形包围的面显得小，在小图形周围衬托下的面显得大。两个大小相同的图形，分别放置在黑色和白色背景下，受到色彩影响，白色有膨胀感、亮度大，黑色图形就显得较小。
面包含分割性、承载性、空间感、层次感、辨识性等特征。前面讲线的时候，我们说线也可以起到分割画面的作用。同样的，面也可以分割面画，并且面对画面的分割更直观，更有视觉冲击力。我们可以加深界面的背景色，就可以基于面的分割性，通过控制模块间距实现区域的划分。（这里的间距即我们熟知的分割条）但这种方式还是具有局限性，文字墙一般平铺式的布局并不能更好得反映当前模块所在的层次，或者从用户认知上说它们倾向于一个层面上。而且直角矩形的四个顶角所形成的四个焦点，也让用户的视线倾向于发散而非聚焦。面的承载性
卡片设计
大块的几何图形能把视觉集中到图形上，是切割画面内容最好的方式。它可以把原本层次不够分明的一个整体通过面的形式分割开，面的分割在界面中是很常见的，通过区分面的形式划分不同的区域，通常使用卡片的形式，使得整体层次感更强！比如：卡片在我们生活中是比较常见的，比如：便利贴、名片、界面卡片，从形态来说它们都属于面，并且都充分利用了面的承载性来充当一个收纳信息的容器或载体。便利贴收纳事项清单、名片收纳对方的个人信息、屏幕收纳用户界面，正好也符合我们爱整理归纳的天性习惯。当然手机界面中面的表达形式很多，可以将图片或文字放大，突出细节或局部；也可以通过色彩的变化划分主次版面结构，合理的留白，也是面的另一种存在方式，可以突出主要信息，增加空间想象力。
1、更高效的获取信息，卡片清晰的层次关系便于用户迅速辨识和获取信息。2、更轻量的入口跳转，每个卡片除了承载信息外，都可以作为单独的入口承载内页的所有信息，并且卡片的属性让内页的展示变为了展开而非跳转；3、更多的交互手势，卡片独立的特点让它可排列也可堆叠，这为页面带来了更多的交互方式。我们可以通过左右滑动（scroll）解锁横向更多的空间，也可以左右轻划（flick）形成类似tinder那样新的产品机制。4、更舒适的视觉观感，卡片基于自身独立的特征让它成为网格布局的常用载体，富有观赏性的视觉张力让页面更加吸引眼球。当然，卡片并不是全部通用的，原本可以靠留白或分割线分割的信息，比如feed流，如果为了视觉效果硬是卡片化处理，就会导致阅读的低效，而且浪费空间。
面的空间感
相对于点和线，面在视觉上更丰富，天生具有强烈的空间感。如果再给面加上光影或者肌理，那空间感就会更强。在实际的应用中，我们可以通过简单的光影变化，来搭建一个立体场景。
我们可以看到，面的加入，不但可以使得画面内容更聚焦，同时画面的对比度，视觉丰富度也大大提升了。
面对画面的分割，还会形成一种奇特的现象，那就是负空间。通过正空间和负空间的相互塑造，可以营造出许多令人意想不到的巧妙创意。
面在设计中最经典的应用就是正负形，当页面是以面为主要元素时，图底与面的形状协调性很重要，要注意正负形的平衡。面的层次感
在形式上，面最大的作用是划分画面的层次。
面具有强烈的体量感，所以面的大小，直接决定了内容的视觉走向以及优先层级。除了可以决定内容的优先级，适当的利用面的体量感还可以有效增加画面的视觉层次感。
面的辨识性
在一个点线面同时存在的画面中，人眼优先注意到的必定是拥有绝对视觉张力的【面】元素。这表示【面】拥有着远胜于前两者的辨识性。所以，设计中的面很多时候都是主体的载体，因为面较于点、线而言，其面积更大，更加稳重；而设计中面的形式也可以有很多种，比如：几何的面、文字、规则与不规则的形状等等，而面在设计中的作用很多时候都充当着主角。
面的这种强力属性被用到了界面的方方面面，比如按钮和图标。相比前面所讲的线性图标，面的辨识性让面性图标可以更快的被识别。因此，界面中一些重要的业务入口通常都以醒目的面性图标存在，并且常以面性图标代表激活、选中时的状态，线性图标代表未激活、未选中时的状态。
2、按钮
对于按钮，面的辨识性为它的层级使用提供了更多可能。
按钮从样式上来看大致有六种样式，反白、同色、灰色、幽灵、文字和图标按钮。相比幽灵、文字和图标按钮，三种面性按钮都以面的强辨识性引导用户迅速注意到它。因此面性按钮适合作为对应更高的层级的设计。当页面中存在多个功能按钮时，就需要以样式进行主次之分。深色按钮以强烈的颜色对比制造吸引力，因此常以深色表达层级最高的主按钮，而次按钮通常对应层级较低的浅色、灰色等样式。当页面中没有主次功能之分时，按钮的样式通常取决于当前的用户场景及业务需求，避免过低的信噪比而影响信息的传达效率。
比如app store应用列表页中，用户的使用场景是非特定的浏览行为，采用低视觉焦点的次要级灰色按钮，如果使用深色按钮将会让其成为视觉焦点，强制用户不断注意到它，致使其成为“噪音”，影响用户对有效信息的获取。
反而，应用详情页，采用主要深色按钮，强调视觉焦点，引导用户进行操作。
点线面的综合应用
点，是点缀画面的饰品，它可以很好的提升画面气氛，丰富画面层次感。线，是连接万物的纽带，它可以很好的引导视觉方向，塑造物体的外形。原研哉大师的经典作品，无印良品的地平线系列海报，简直教课书一般的点线面应用。
在实际的设计过程中，我们发现其实点、线、面是相对存在的，它们之间是相互影响、相互协调、相互转换的关系。
我们应充分了解点、线、面的特点，根据用户需求，合理安排点、线、面之间的比例，通过构成元素间的巧妙组合与穿插，设计出具有个性的、信息传递明确的界面设计。
虽然点线面的功能和特点各不相同，但点线面从来都不是独立存在的，一旦出现，必然是它们2种或者3种的结合体。
所以，越复杂的页面，我们越要在点线面的应用上有着整体的把控，不然就容易出现混乱的局面。
在这快节奏的浮躁的时代中，我们需要保持设计的初心，做有灵魂的设计，我们下篇再见~
本篇内容：理论来源于《平面构成》中国工信出版集团、《平面构成》尚震 徐丽 ，图片部分来源于网络，侵权即删。