论“留白”在网页UI设计教学中的运用

论“留白”在网页UI设计教学中的运用

张利锋

(珠海市第一中等职业学校   广东 珠海  519000）

摘要：在文字优势渐尽，读图时代正处于风华正茂的当下，网页受众群体对网页中的构成元素的审美需求越来越高，而图形作为网页中不可或缺的组成元素显得尤为重要。网页界面设计成功的留白对信息传达效果的优化具有重要的影响。该文浅析留白在网页UI设计在实战教学中的运用，帮助网页美工岗位的中职生创造更加引人入胜的网页作品。

关键词：留白  网页UI设计  实战教学

留白是中国艺术作品创作中常用的一种手法。南宋时期，以马远、夏圭为代表的院体山水画在布局上别具一格，其构图简练概括，多取一角或半边景物描绘，留有大面积的白以强调主体，突出主题。

寒江独钓图——马远（宋）

（图片来源于网络）

随着时代的发展，留白逐步从传统绘画形式延伸到其他艺术领域，平面设计即可视为从传统绘画演化而来的二维艺术表现形式。借助计算机等多媒体信息技术发展起来的网页设计，是平面设计在不同传播媒介和艺术载体上的演进。留白在网页设计中的构造形式，除了具备平面设计范畴的形式美法则外，还有作为新生艺术形式的独特造型特点和先进设计语言。

一、留白在网页UI设计中的特征

1、平衡布局

留白主要通过页面空间的管理，实现对页面元素的虚实疏密处理的视觉效果，以产生网页视觉传达的节奏感、对称感和平衡感。在具体设计时，设计者应借助空白载体对界面元素（包括图形、文字、色彩及系统辅助符号）进行有效对比、调和并合理布局空间，化解因为信息繁多而造成的空间压迫感，让浏览者能够在透气的氛围中轻松、愉悦地获取，产生在不平衡中寻求平衡的艺术效果。设计者要充分考虑网页媒介的全系感官效应，区分图形、色彩、文字模块等元素形成的视觉体感的轻重，以对应页面主体元素和从属元素不同的视觉节奏与效应。

在大比重的留白下，网页界面视觉焦点效应更加突出且能保持界面组成元素的本体结构特征，更容易使受众放慢浏览节奏以接收更多的信息。网页界面布局的平衡会彰显信息传递和留白的作用守恒关系，设计者需要仔细推敲重点信息和装饰元素的组织从属关系，营造适合大众的，具有舒适性、可读性和视觉审美价值的空间平衡效果。

     2.突出主题

　　网页界面设计必须紧紧围绕网页信息传递的主题，满足人们对界面清晰易懂的需求。界面主体形象本身在形状、大小和色彩分类上就具有视觉传达优势，在其周围辅以一定的留白，可有效减少其他非主体元素对浏览者视线的干扰。设计者通过强化主体的突出性、各类装饰性手法的应用和功能性空间的塑造，充分发挥留白的边际衬托效应，会使网页主题得到清晰准确的表达。

　　减少页面色彩的数量或使用低饱和度、低明度的色彩，可以使页面色彩整体更加和谐，并使主题信息形象的色彩更加引人注目。留白设计可以在瞬间完成对受众注意的吸引，让受众的视线容易被吸引并集中到界面主体形象之上，带动受众按照已有的设计层次有效注意信息，使受众在迅速、准确接受信息传递的同时获得舒适美观的视觉色彩享受，激发受众深层次浏览网页的兴趣。

简洁、清新、明了的网页界面设计可以显着优化受众的用户体验，设计者应着重分析受众对于网页信息的获取方向以确立界面设计主题，充分考虑网页功能和受众需求之间的平衡点。借助留白可以实现网格化、边框化的页面元素分级分层处理，使之围绕网页主题形成受众视觉专注中心，以完成对网页信息的高效传递。因此可以说，留白设计是确立网页界面设计价值内核的功能性、实用性选择。

二、留白设计对用户体验的影响

1、提升页面的可读性和易读性

如若界面元素之间未留有足够的空间，用户浏览阅读起来就非常困难，这可能就是导致用户在浏览网页时，时常会眼睛疲劳和大脑不自觉紧张的一个重要原因。页面中的适当留白，添加有空间的设计，能够有效解决这一问题，使整个浏览阅读过程更加自然，从而提升用户体验。

2、优化品牌设计

   著名现代主义建筑大师路德维希·密斯·凡德罗的建筑理念：“Less is more”即“少就是多”，其理念运用到网页设计作品中就是去除或者减少多余元素，突出主题，提升品牌，使页面的逼格更高。

3、提升页面内容的关注度

    绘画作品中留白是为了强调主体，突出主题并能产生无穷的想象空间。网页中足够的留白能增强页面的视觉层次感，轻松引导用户集中于页面的重要信息。留白是主体的领地，越多的留白，主体被注视的几率越高。

三、留白在网页UI设计中的应用　　

1. 刻意留白

在一些网页元素设计过程中，不用担心大面积留白，在上图中，折纸和标题区域的上下方空白很多区域，但并不影响美观。刻意的大面积留白，刻意创造出一个强大的视觉焦点，并给它带来呼吸的空间。

                 （同道口腔启动页UI设计）

　2. 去除多余元素

使用留白的一种方法就是去除设计中不必要的元素，比如下图，去掉菜丁LOGO的圆形边框，将LOGO图标

             （菜丁登录页UI设计）

与背景统一成一个整体，有助于扩展视域，能有效提升用户体验。

3、使用文字间距

充分利用文字之间的间距也是让你排版好版式的技术之一，下图中，通过增加文字间距，可以使文字更容易阅读，画面看起来更加漂亮。

（图片来源于网络）

　4. 放大图片，增加足够空间

网页UI设计实战教学中，当素材不能提供足够的空间进行文字排版时，可以尝试放大这个图片来增加留白，达到美观的排版效果。

（樱雪官网UI设计）

5、有效使用填充

当使用大量的设计元素时，确保所有元素都有自己的留白空间，下图中“COOKING BACK TO BASICS”文本使用了一个填充来实现留白并与底部的URL地址以

（图片来源于网络）

及背景图区分开来，体现主次关系。

6、组织好留白的元素

留白元素包括：图像或图片空间、边宽、边界距离、框宽、文字间的行距、字距、列与列之间的距离。如果在布局中增加一个元素的大小，其他元素应该是小的，并考虑加入留白。在上图中增加了“Eat...”的大小，那么增加了空格来增加留白，下排文字较短，字母也适当使用了一些间距，实现留白，缓解阅读上的压迫感。

互联网+时代的到来，对网页有了深层次的理解，由人有我有到人有我优的转变。在新的主客观条件下再认识中国传统绘画中独特的留白表现手法在网页中的运用有着特殊的意义，不仅能深刻的理解此技法，更重要的是在中职

                               （旗云科技首页UI设计）

《网页UI设计实战》教学过程中，这种“舍得”的哲学思想和审美情趣在课堂教学中到了传承。

参考文献：[1]汤文莉，胡易容.符号学视域下广告中的留白研究[J].包装工程，2019,40(20):57-62.

          [2] 倪家亮，刘冰.“留白”理念在网页设计中的映射[J].艺术与设计（理论），2015,2(11):36-38.

          [3]吴海燕.知白守黑——论平面设计中的白色设计[D].西安：西安美术学院，2010:12.

          [4]彭德.中国美术史[M].上海：上海人民出版社，2014.

1