UI界面设计中展示的美学原理

摘要：随着软件设计的快速发展，界面设计逐渐成为产品的重要卖点。当下，互联网的运用范围越来越广泛， UI界面设计也越来越受重视。简洁美观、色彩奔放、舒适友好的扁平化界面设计作为一种鲜明的美学风格，能给人带来较好的感官享受，提升产品价值，满足人们的多元化需求。

关键词：软件交互；界面设计；扁平化；

UI是用户界面（User Interface）的缩写。UI设计是指人机交互的媒介，包括用户操作的流程设计、操作规范及界面美观的图形设计，包括可用性及可行性分析、GUI （图形用户软件界面设计）、界面用户的相关测试等。

在产品的交互中，能最直接能看到、感受到的就是软件界面的色调、风格和操作。界面设计大致包括三个方面：界面的外观设计、界面的交互设计以及界面设计的交互合理性和易用性。

一、交互设计及UI扁平化设计特征

交互设计从可用性和用户体验两个层面进行分析，关注"以人为本";的用户需求。交互产品的界面是人机信息交互的枢纽，是人和产品或服务的一种互动模式，通过用户的操作过程，达到用户的使用目的或是高效使用产品。

UI扁平化设计特征有五种。一是拒绝特效，即所有元素都不加修饰，如阴影、斜面、突起、渐变等，图片框、按钮、导航栏都尽量保持简洁。设计中的各层级中没有明显的区分模块，如背景图、前景图、按钮、文本、导航等。

二是简单元素，即使用简单的UI元素，如按钮和图标，常用矩形、圆形、方形等简单的

形状。元素间相互独立并尽量达到简单直观的效果，还可通过文字图形的空间组合，表达和谐与美。

三是注重排版。扁平化设计要求元素更简单，排版就显得更为重要。字体和字形通过版式来区分各模块。通过排版引导客户，交互模块元素注重增强易用性和交互性。

四是重视色彩。扁平化设计中，界面拥有更大胆的色调。UI界面中一般不多于3种色调，但是在扁平化设计中平均会使用6至8种颜色，而且色彩更纯、色调更有活力。

五是追求极简。UI扁平化设计中应尽量避免不必要的修饰，保持最简单的色调、文本、图形。

二、美学在UI扁平化设计中的表现

（一）整体与简约

在设计中，整体决定部分，部分依从于整体，两者相辅相成，互为作用。在互联网的时代，界面构成要素中除了文字和图像以外，还包含声音、视频和动画等新兴的多媒体元素，其在增加了UI界面生动性的同时，也使界面设计者考虑更多的合理性运用。点、线、面基本形态作为UI设计中的视觉传达要素，共同构成了软件界面交互设计，但是整个版面并非是各类元素的简单相加，元素间相互联系、相互制约以达到传达信息的目的。

UI扁平化设计应以精简为准则贯穿于整个设计中，精简并不是指内容少，而是注重重点的表达，在视觉上也要遵循用户的视觉逻辑。设计前期，设计师了解界面内容和性质后，需要对整个布局进行构思，简单画出基本框架，并且与客户和开发人员进行有效的沟通，最终确定界面的基本雏形和流程，从整体的构思再到细节的局部，从每个表格、按钮、菜单等细节元素再到整体的效果。

在很多扁平化的UI交互设计中可以看到若隐若现的幽灵按钮。所谓的幽灵按钮，其实就是无填充色的透明按钮，多以非常简洁的线条和圆角组成，不加修饰的功能说明直接衬托

在按钮上。幽灵按钮为了让用户很快找到按钮的位置，多没有修饰和特效，为起到聚焦效果，设计时可适当调整按钮的大小，或将按钮悬浮在图片背景上、动画上等，或排版的时候将其放在较醒目的位置。

在UI的布局中，常见的有标题正文型、左右框架型、上下框架型、封面型、Flash型、综合框架型等。目前， Flash型采用非常流行的Flash动画效果画面，页面内容随时间变化，所表达的信息更丰富，具有较强的现代感和视觉冲击力。有的设计感极强，可以跟传统的多媒体相提并论。通常人们在看到新事物时，自然会通过联想将旧有经验与之对应。但是无论用什么样的框架，都应该遵循最基本的规律和原则，相关设计通常把标识信息放在界面的左上方位置，版权说明信息则习惯性地放在界面的最下方。

留白是中国传统艺术创作的常用表达方式，其源自中国的书画，为了使画面更协调、更美丽，艺术家在某些地方有意留出空间，增加美感，给人以无限想象的空间。留白也经常被运用在软件交互的界面设计中，特别是导航栏、菜单栏、弹出窗口等，通过对图形化、符号化的细节把握，每个模块的简化设计都需要经过科学的测试和检验。设计师通过

扁平化版式设计赋予界面更多境界。一个优秀的界面设计师应有足够的文化底蕴和专业知识，方能在简洁而不简单的UI界面设计上施展艺术能力。

（二）相似性

界面上的有一些碎片化的单一设计元素，通过归纳和分类可以找到其共性。相似性可以帮助设计师用关联性组织设计元素，而关联性可以是颜色、大小、形状或方向。在扁平化的界面设计中，通过切换界面，每一个元素就像是一棵树上的叶子，每一片叶子都有颜色、大小、形状、纹理上的变化，但同时也具有相似性和整体性。它们既是单一的个体，又在整体中相互作用、相互联系。用户在交互过程中，感受到的不仅是树的高大魁梧，同时也能欣赏到树叶的婀娜多姿。

如微信的界面，设计比较简洁和平实。所有的元素如按钮、菜单在风格和色调上保持一致，用户能够很清晰快速地找到目标。

在界面排版设计中，设计师通过展示元素之间的关联性或者非关联性，传递有组织、有联系的使用感。在一些大型的新闻类界面设计中，除了最上面的导航栏，整体大多被区块分成两个部分：左边和右边被清晰区分为两个独立的元素：左边部分是图文并茂的头条新闻，右侧是浏览最多的新闻布局。尽管每个部分提供相同的功能--展示阅读的文章和图片，但因为左边的面积大，自然会引导读者花更多精力去关注头条新闻栏目。

在界面的布局设计时，设计师常以区块化分割界面布局。有的直接用线条和图片来区分，也有通过留白、色块等艺术手段来切分界面，给用户清晰的使用顺序，并且能避免一些用户视线混乱和迷失方向，感受到界面设计排版的舒适阅读快感。比如，链接能够使页面和应用实现一些基本的内部交流，它们必须和周围的其他元素区分开来，而且有必要更加明显。文本链接中也存在几种相似性，在样式、上下文、类别和目的上的差异；在边栏和主题之间都在相似性原则下统一被定义。

（三）接近性

在任何一个软件界面中，设计师都会把一些相互接近、有关联的元素聚集起来，组团后形成模块单元。在某一个UI界面中，主界面、二级页面、三级页面以及弹出界面，各层级的风格样式都会保持高度接近，并且在字体样式、配色、操作流程上保持相似性。假设一个界面中有一级标题、二级标题和三级标题，虽然有可能出现在不同的界面中，但是设计师在设计过程中会通过标题的背景色、标题的字体样式或者标题的大小来区别三者之间的关系，做到有距离的层级感，同时也要保持相关性。

如果界面上有很多操作按钮，在排版时需要考虑其功能、作用、重要性和操作方法等。在扁平化设计中，用色彩来区分按钮的层级关系是最常用的方法。设计师可提炼最有冲击力的颜色作为主要按钮的颜色。在次级按钮的颜色选择上则要依据主要按钮的色调调整色相、饱和度等色值，也可通过调整按钮大小或者在按钮文本说明上进行区分。如设计按钮样式，分为默认、悬浮、触发、已访问四种样式。从配色和外形上都有规范统一，能使用户一目了然，提高可识别度，同时又要有细微的区分。好比一个按钮的效果，当鼠标移动到它上面有颜色的变化，当用户点击时有凹进去的效果，这样的交互设计很符合人们需要。

层级的接近性原则在设计上可以让用户非常简单地去操作界面，能有效提高工作效率。用户的一切需求应随着界面的不断切换实现交互。如文字排版，用简单的CSS样式就能实现层级关系，最重要的是要在整个设计中都能考虑到这个原则，并将其运用于全局之中。

（四）图底关系

在空间设计中用得最多的就是图底关系。在界面层级关系中，可以把它看成是本书，一层层地叠加实现界面效果。最前面的页为前景，最后面的是背景。在整个界面中，用户视觉的起点最接近自己的元素。在UI设计中，设计师充分运用色调、排版把前景、景以及中间的很多页面区别开来，让用户一目了然。用户的需求也是通过视觉的层级来传递，借助自然的视觉路径进行操作。比如，为了强调主要内容可以把背景设计成模糊虚化的效果，让内容和背景有效分离，还可以调整内容上的文字大小、增强文字色彩色调的对比度、选择较粗的字体等方法。

如一个很复杂的界面布局效果，其中包括图片、文本、颜色和形状的组合，则可运用图底关系将各元素的结构有效模块化，虽然很复杂，但看上去很清晰。这些不同的元素能够快速定义什么是连续的内容（图）以及什么是连续的结构和背景（底） .

在设计过程中，设计师必须充分考虑到界面布局规范及合理化，按照人们自上而下、从左往右的阅读习惯，常用的按键功能图标要确定用户操作的移动范围和距离，避免鼠标反复移动带来的负面影响。扁平化界面整体应简洁易用、现代时尚，主要功能操作是交互的核心所在，不常用的操作区域可设计收缩模块或暂时隐藏。这样既满足了用户的操作流程，也能提高软件交互的效率。

结语

扁平化的界面设计抛弃了传统的注重视觉刺激，不具有审美的持续性。表达了用户对于美及使用的需求。设计师应以人为本，更加注重对软件产品本身的功能、信息的表达。在UI的发展历程中如何将视觉设计、美学原理以及软件交互的设计规范有效结合，更合理地

开发设计功能与产品有效的互动结合，设计出符合人们审美的创新产品，将是UI信息设计未来需要解决的课题和不断努力研究的方向。

参考文献
库尔特-考夫卡。格式塔心理学原理.黎炜，译。杭州：浙江教育出版社， 1999.
【2】史蒂夫-克鲁格。网站可用性测试及优化指南.袁国忠，译。北京：人民邮电出版社， 2010.
尼尔森。打造高可用性的移动产品.牛化成，译。北京：人民邮电出版社， 2013.
杰西-詹姆斯-加瑞特。以用户为中心的产品设计.范晓燕，译。北京：机械工业出版社， 2011.
杰夫-约翰逊。理解UI设计准则.张一宁，译。北京：人民邮电出版社， 2010.
希夫曼-卡纽克。消费者行为学.江林，译。北京：中国人民大学出版社， 2007.

更多推荐

设计,界面,用户,按钮