极简主义界面设计原则剖析

庞小敏　彭进

摘  要：极简主义界面风格的六条设计原则是：一、理性且简洁的网格设计原则；二、色调的单纯性原则；三、版面的留白原则；四、图标设计的扁平化原则；五、无饰线体和黑体的运用；六、交互设计的极简化原则。这些设计原则都有着存在的合理性和必要性。极简主义界面设计的六大设计原则能让用户产生更好的用户体验，更易获得满足感。

关键词：用户界面；极简主义；设计原则

基金项目：本文系长沙理工大学青年教师成长计划项目“眼随心动——基于眼动追踪技术的UI界面用户体验设计研究”（2019QJCZ078）研究成果。

极简主义风格在当今的界面设计风格中占据着重要地位。本文对极简主义界面的设计原则进行了细致和较为全面的总结，并在此基础上深入思考了极简风成为界面设计重要风格的内在原因。本文将从功能性角度、视觉心理学角度、美学角度出发，并结合眼动技术，剖析极简主义界面设计的设计原则和存在的内在原因。

一、极简主义界面风格的设计原则及原因剖析

（一）网格设计原则

1.网格设计特征

版式设计中常见的编排方式有三种，即古典版式设计、网格设计和自由版式设计。其中古典版式为传统的版式设计方法，具有典雅、均衡、对称的特点；网格设计属于现代主义设计风格，版式以网格为基础，强调元素的对齐与版面的比例关系，追求的是一种非对称的均衡感，具有强烈的功能主义和理性主义的特点；而自由版式设计则是指设计师对版面要素进行随心所欲的自由安排，是极具个性化的设计风格。

在当前的界面设计中，除了启动页和少数强调个性化的艺术题材的界面以外，绝大多数界面都采用网格设计为基础的编排方式。如APP界面中常见的布局方式包括列表式、宫格式、陈列馆式、标签式等，这些布局方式都是建立在网格的基础上的。在对网页进行布局时，我们一般会将界面划分为几个部分：头部区域、菜单导航区域、内容区域、底部区域。这种划块的设计方法同样也是基于网格（如图1）。

2.网格设计的必要性

与传统纸媒相比，电脑端、手机端为主体的新媒介在使用的方式上具有交互性。传统纸媒传达内容的数量受到纸质版面大小的制约，而在新媒介界面中，人们可以通过点击、滑动等交互动作，从一个版面跳转到多个其它的页面。因此，新媒介中传播内容的数量可以说是无限的。大量的内容如果采用密集、复杂的排版，将使受众头眼昏花。而网格设计可以将内容按类别进行模块化区分，让内容条理清晰、井然有序，用户可以一目了然，在最短的时间内接收到最多的信息，并从中筛选出自己感兴趣的内容。因此，在上述三种版式设计中，网格设计这种最为理性且简洁的设计方法无疑是最适合的。

（二）色调的单纯性原则

1.色调的单纯性

极简主义风格也被戏称为“性冷淡风”，这是因为极简主义界面的颜色常以低刺激性的浅灰色调为主，给观众以清冷的感觉。黑白灰就是极简主义界面设计中经常用到的色彩，尤其是浅灰色运用更甚，我们在MUJI无印良品（如图2）、小米、苹果等公司的官网上，就会看到大量黑白灰的运用。还有网易严选、亚马逊等购物类APP上用来展示商品的“商品坑”，也都常以浅灰色为底色。

当然，极简主义设计并非只能使用黑白灰，它同样也可以运用高纯度的颜色。这些高纯度的颜色一般还是会和黑白灰搭配、形成响亮而单纯的色调的。总的来说，极简主义风格的界面不会让人感觉到特别热闹，而是单纯而整体。

2.运用单纯色调的内在原因

色调单纯是极简主义界面风格的一个重要特征，色调单纯的界面具有两个方面的优势。

一方面，易于形成和谐统一的色调。黑白灰都属于无彩色系，属于中性色彩。无彩色系的优点在于，黑白灰的感知不需要色彩信号的引入，人对于无彩色系的认知负担最小。无彩色系具有很强的调和对比作用，使得黑白灰可以和谐地与任何彩色搭配。

在黑白灰颜色中，尤以灰色最常用于界面中，界面大面积的背景色通常都会使用浅白灰色，这是由灰色的特性决定的。灰色是色彩中最被动的色彩，受彩色的影响极大。灰色如果靠近鲜艳的暖色，就会显出冷静的品格；若靠近冷色，则变为温暖的暖灰色。这种特性使得灰色能够吸收其它色彩的活力，削弱色彩的对立面，制造出融合的效果。

另一方面，能让用户更快地找到目标对象，这一点已经通过眼动实验得以证明。眼动实验表明，颜色数量和颜色一致性均对視觉搜索效率有显著影响，增加图标的颜色数量会使得图标的特征增加，在一定程度上会降低图标的视觉搜索效率。当某图标的颜色数量越少时，搜索效率越高。单色图标的搜索时间明显小于双色图标与三色图标[1]。

所以说，单纯的色调可以减少多种色相对眼睛的干扰，有利于形成单一的传达印象。在大面积的无彩色中，如果出现小面积的有彩色，那么该有彩色就会成为整个页面的视觉焦点，吸引用户的注意。因此，我们可以在重要的内容上运用有彩色，从而方便用户快速找到目标对象。单纯色调的运用不光是出于整体感的美学考虑，也在于它能让用户更快找到目标对象，拥有更好的用户体验。

（三）版面的留白原则

1.版面的留白原则

版式设计中的“白”并不一定指的就是白色，而是指版面里图文以外的空白处，或者说，我们可以将“白”理解为背景。在极简主义的界面设计中，往往有较多的留白。

极简主义根源于现代主义，是对现代主义风格功能主义和理性主义设计理念的继承和发展。极简主义主张摒弃一切无关的、多余的元素，完全靠元素本身和合理的空间安排来达到一种完美的效果。极简主义希望探索一种“简单中见丰富，纯粹中见典雅”的可能方法，它属于减法艺术。

因此，我们在极简主义的界面设计中不会看到传统的纹样进行装饰，极少看到多余的线条，界面中只余主体本身。但也正因为这样，主体必须有好的形式美感和空间结构关系，这样才能达到纯粹而单纯的效果。否则，给用户留下的效果将是简单粗糙（如图3）。

2.留白的作用

极简主义的留白并不是简单的形式问题，更在于留白的重要作用。

首先，简洁的留白版面能够缓解视觉疲劳且让主体得以突出。跟书籍等传统媒介相比，网站、APP里的资讯往往非常丰富，含有大量的视觉信息。庞杂的信息会对人的眼睛造成很大的负担，让人眼产生疲劳感。那怎样才能减少用户的视觉疲劳并有效地传达信息呢？心理学中的黑斑效应反映了视觉传达的规律。研究者在一张白纸上涂上一个黑色斑点，该斑点虽然不大，但依然成为视觉的焦点。而当研究者在白纸上添加上其它元素后，该黑色斑点的视觉中心效应会递减[2]。这个研究说明，当背景极纯粹的时候，图形的视觉传播力会最大化。极简主义设计注重在版面设计中大量留白，不但可以摒弃掉无用的信息，让人眼得以休息，还可以增强主体的中心地位，让用户在最短的时间内找到目标对象。如Google的首页就属于大量留白的极简设计。

此外，留白如同省略号一样，能够给人们带来更多的想象空间，能给观者创造一个较为轻松、愉快的氛围，就像我国传统的国画讲究通过“密不透风，疏可跑马”以形成节奏感。界面设计中的留白同样可以形成大小、疏密、整体与局部的形态呼应。因此，界面设计中图文与画面的“留白”配置，既可以传达感观之美，也具有鲜明的功能性。

（四）图标设计的扁平化原则

1.图标的扁平化设计

极简主义界面设计风格在图标（icon）设计上表现为扁平化的图形表现。扁平风从拟物风转变而来（如图4）。比如iPhone初期的系统图标就以拟物风为主。拟物风的特点总的来说就是追求实物的逼真性，突出单个图标的独立性和装饰效果。具体来说表现在：模拟实物的真实造型；通过叠加纹理、材质等模拟实物的质感；通过叠加高光、阴影等模拟实物的空间感；拥有较为丰富的颜色和渐变效果。而现在iPhone的系统图标则以扁平风为主。扁平风的图标设计忽略了物体的细节，保留了物体的主要特征，图形不再是实物的完全再现。具体来说，扁平风图标摒弃了对质感、空间感和装饰性的完全追求，转而以更加抽象化、简单化和符号化的元素来表现主题。颜色以两到三种为主，保留了部分的渐变效果。

2.图标扁平化设计的作用

首先，从设计美学的角度上来看，简洁的扁平风图标设计符合当代的美学潮流。从人类历史上诞生照相机之后，以写实为终极目标的传统审美便逐渐式微。而在形式上提倡简单几何造型，并强调功能性的现代主义风格在20世纪初崛起。之后，现代主义一直是世界主流的美学思想。现代主义支流中的新现代主义更是提倡极简主义。因此，扁平风的图标设计是当代美学思想的体现。

其次，简洁的扁平风图标能让用户更快地找到目标对象，从而拥有更好的用户体验。简洁的图标能够突出内容主题，减弱各种渐变、阴影、高光等拟真视觉效果对用户视线的干扰，从而减轻用户的视觉负担。这一点也通过眼动实验得以证明。如胡莹通过眼动实验认为：“视觉复杂性能够显著地影响被试者的视觉注意力，复杂的图标注视潜伏时间长、注视时间短；简单的图标注视潜伏时间短、注视时间长，说明简单的图标更能吸引被试者的注意力。”[3]还有常江等人对图标的边框属性进行了眼动实验，得到结论：方边框的约束会使整体信息排列较为整齐；而无边框图标放置在一起会产生较为复杂的感觉[4]。

此外，拟物图标因为过多的造型细节占用了大量数据，占用了过多的系统空间，使得设备的运算速度降低。而简洁化的图标设计占用的数据更少，能让系统的功耗减少，从而提高运算速度，减少设备反应时间，让人机交互的效率更高，让用户的体验更美好。

（五）无饰线体和黑体的运用

拉丁文字从笔型特征上可以分为饰线体和无饰线体两大类型。饰线体指的是文字的字脚变化而有装饰性；无饰线体则笔划粗细基本相等，完全抛弃了字脚变化，十分朴实、醒目。饰线体和无饰线体在中文字体中对应的是有装饰线的宋体和无装饰线的黑体。

在极简主义的界面设计中，我们会发现设计师们基本采用无饰线体和黑体。如在IOS系统中，拉丁文采用San Francisco作为系统字体；中文则采用苹方作为系统字体。而且，除了系统字体采用无饰线体和黑体，在界面里banner上的图形文字也以无饰线体和黑体为主（如图5）。

为什么极简主义要采用没有装饰线的字体呢？这主要是因为饰线体笔画的粗细对比强，其中细的装饰顿角会因为像素格不满而产生模糊的效果。而无饰线字体每一个笔划都粗细均衡，转角锐利，可以顺利占满像素格，显得更为清晰。而且，为了达到更高的清晰效果，“苹方”还在传统无衬线字体的基础上将笔画调整的更加纤细方正，以便笔画的边缘更贴近于屏幕的像素格，使得较小的字体仍然能呈现出较为清晰的效果。“苹方”字体可以说是专门为高分辨率Retina屏幕开发的“精密像素上的字体”[5]。

（六）交互设计的极简化原则

1.交互设计的极简化

界面设计是视觉设计和交互设计的集合体。因此，极简主义界面设计不光体现为视觉形式的极简化，还表现为交互设计的极简化。具体来说，交互设计的极简化可以总结为以下几点。

一是信息归纳与信息架构的极简化[6]。信息归纳的极简化意味着要保留住重要信息，我们可以通过字体的大小，图片的排版去强化主要内容，弱化次要内容。我们还可以将功能性弱且容易分散用户注意力的信息进行剔除，次要的功能元素则可以采取抽屉式等方法进行隐藏，从而让用户聚焦于有价值的功能[7]。在积累了一定时间的用户使用数据后，我们可以根据用户的操作习惯、兴趣点来推送相应的内容，从而减少非必要信息对用户的干扰。此外，我们也可以对信息内容进行数据可視化处理，用简洁易懂的图形化语言替代大量的文字信息，也可以达到极简化的效果。

信息架构的极简化则意味着我们应尽量减少信息的层级，以保持架构的扁平。同一级的信息分类要尽量相互独立且明确，分类的数量也不宜过多。纵向的层级越短代表架构越扁平，这样用户在使用产品时就不至于迷路，能清晰地知道自己的当前位置。

二是操作流程的极简化。操作流程的极简化意味着操作流程要简短，尽量减少用户的选择项，而且选择的每一步都应该是必要的、易懂的，无需用户过多思考，连老人都知道怎样操作。操作流程的极简化还意味着操作要方便。如“扫一扫”功能，我们应该把它放在主流APP通常放的地方，以减少用户的学习成本。还有手机的验证码，以前手动输入时一般都不超过6位数，现在更是可以不用再手动输入，这有效地减少了用户的记忆负担。

三是交互行为的极简化。我们可以巧妙地运用手势和摇一摇等其它交互方式，以避免过多的手动输入。我们也可以用左右滑动等手势去取代返回按钮的点击，让交互更为流畅和快捷。

2.交互设计极简化的作用

自从20世纪70年代英国平面设计师特格拉姆第一次使用了“信息设计”这一术语以来，信息设计就逐渐从平面设计中脱离出来。不同于主张“精美的艺术表现”的平面设计，信息设计强调的是“进行高效率的信息传递”。界面设计关注于界面之上的信息设计，属于信息设计的分支领域，因此“高效率的信息传递”同样也是界面设计的主旨。

但是随着信息爆炸时代的到来，我们面临着信息超载的问题。而极简化的交互设计，可以帮助我们进行信息整理和简化，能让观众清晰方便地阅读和找到自己需要的信息，从而可以避免信息超载情况下人们面对信息洪流时，无所适从而导致的焦虑感和挫败感。

二、结语

在界面设计相关理论和设计实践的基础上，本文从视觉设计和交互设计两个方向，总结了极简主义界面设计的六大设计原则：网格设计原则；色调的单纯性原则；版面的留白原则；图标设计的扁平化原则；无饰线体和黑体的运用；交互设计的极简化原则。

在此基础上，本文从功能性、视觉心理学、美学、眼动原理等不同的角度，剖析了这些设计原则存在的内在原因：网格设计可以让内容条理清晰、井然有序，方便用户接收并筛选信息；单纯的色调有助于形成和谐统一的色调，眼动实验证明单纯的色调能让用户更快的找到目标对象；版面的留白能够缓解视觉疲劳且让主体得以突出，能给人们带来更多的想象空间，能给观者创造一个较为轻松愉快的氛围；简洁的扁平风图标设计符合当代的美学潮流，眼动实验证明扁平风图标能让用户更快地找到目标对象，能减少设备反应时间；与饰线体相比，无饰线字体能达到更高的清晰效果；极简化的交互设计，可以让用户聚焦于有价值的功能，让用户在使用产品时清晰地知道自己的当前位置，减少用户的学习成本和记忆负担，能让交互更为流畅和快捷，并避免人们在信息超载情况下产生的焦虑感和挫败感。

总的来说，极简主义界面设计的六大设计原则能让用户产生更好的用户体验，更易获得满足感。

参考文献：

[1]宫勇，张三元，刘志方，沈法.颜色对图标视觉搜索效率影响的眼动研究[J].浙江大学学报（工学版），2016（10）：1987-1994.

[2]雷青.极简主义风格在版面设计中的应用研究[J].出版广角，2017（1）：50-52.

[3]胡莹.图标设计要素对视觉注意和舒适度的影响研究[J].包装工程，2021（6）：232-238.

[4]常江，徐小哲，巩雪.基于眼动实验的智能设备界面图标设计优化[J].哈尔滨商业大学学报（自然科学版），2019（4）：426-431.

[5]崔晓菁.基于极简主义思想的苹果手机用户界面设计研究[D].杭州：中国美术学院，2018.

[6]庞祎.极简化设计在移动端APP中的应用研究——以“睿意新生”众筹APP为例[D].武汉：华中科技大学，2016.

[7]孟霄.手机游戏界面极简化设计研究[D].武汉：華中师范大学，2014.

作者简介：

庞小敏，硕士，长沙理工大学设计艺术学院讲师。

彭进，硕士，长沙理工大学设计艺术学院讲师。

编辑：刘贵增