扁平化风格在网页界面设计中的应用探讨

摘 要：在以往的网页设计中，设计者们更青睐于利用各种艺术效果来装饰网页，以求吸引用户的注意力。但是随着网站数量和种类的增加，纷繁复杂的网页设计风格会让用户产生视觉疲劳，影响到用户的操作体验。扁平化设计风格强调网页界面设计的简洁性，而且还能够降低功耗，延长待机时间和提高运算速度，更加适用于移动终端系统。文章首先阐述了扁平化风格的设计特征，然后对扁平化设计风格在网页界面设计中的应用进行分析，为提高网页设计水平提供参考。

关键词：扁平化;网页设计;简洁性;用户体验

0 引言

随着网络技术的快速发展，人们利用网站的频率大幅提升，无论是在工作中还是日常生活中，都会应用到网站。在网页设计时，有些网站和应用程序需要根据屏幕的尺寸和分辨率设计出不同的拟物化设计，而扁平化设计风格能够适用于所有尺寸的屏幕，具有较强的适应性。尤其是在人们利用手机和平板等移动终端越来越多的背景下，在有限的屏幕尺寸上，更希望能够快速找到自己需要的信息，以提升浏览网页的速度。较多的装饰性效果不仅会影响到用户的操作体验，同时还会占用一定的系统内存，缩短设备的待机时间，影响系统的反应速度。为了更好地解决用户在使用移动终端浏览网页时遇到的问题，采用扁平化设计风格具有很强的实用性。扁平化设计去除了冗余、厚重和繁杂的装饰效果，注重对核心信息的体现，有些甚至是以抽象、极简和符号化的方式来表达信息，界面更加简洁干净，用户操作起来会有良好的体验，所以扁平化设计风格会成为网页界面设计的发展趋势。

1 扁平化风格的设计特征

扁平化的设计风格主要是以简洁大方为核心，减少了拟物化设计中的透视、纹理和阴影等效果，更加倾向于用图标、抽象和文字的方式来表现信息。随着使用移动终端进行网页浏览的用户数量的增加，这种扁平化风格更加适用于小尺寸屏幕的移动终端。简约的设计风格能够在有限的屏幕上更加明确地呈现网页信息，便于用户更加快速地搜索信息。而在组织结构上的扁平化设计，有利于减少用户逐级深入地搜索信息，缩短传播链，提高用户浏览效率。扁平化设计风格能够适用于任何尺寸的屏幕，占用系统内存少，有助于提高网页运行的流畅性，这会增加用户使用移动终端浏览网页的便捷性。目前，扁平化风格主要应用于手机领域，在部分网站设计中也逐渐体现出扁平化的趋势，这种简洁大方的风格更具有现代气息，但是在实际使用过程中，还是需要根据网站的功能、用户群体特征、终端呈现方式等因素进行综合考量，最终确定适宜的设计风格。

2 扁平化设计风格在网页界面设计中的应用

2.1 扁平化风格在网页界面元素设计中的应用

扁平化风格在网页设计中体现得最为明显的是界面设计，与复杂的界面相比，简洁的界面元素不仅能够减少用户的阅读障碍，还更易于用户接近事物的本质，从而提升体验感。在传统的拟物化设计中，界面元素的设计尽量与实际物体接近，以达到一种更加真实的效果，一般会通过添加阴影或者渐变等方式来实现。拟物化设计虽然能够得到一部分用户的喜爱，但同时也限制了用户想象的空间，同时过于复杂的设计还会占用过多的时间。在网站数量和种类不断增多的背景下，用户对于复杂的界面设计，会形成信息提取费时、视觉观感疲劳等现象。而扁平化风格的核心是简洁大方，去掉各种特效的渲染，以最为简约的界面风格为用户带来最为舒适的操作体验^[1]。尤其是在当下，人们使用手机的频率快速增加，扁平化风格更适用于手机的屏幕尺寸。简洁的界面设计能够更加直观地凸显重要的信息，拉近用户与网页内容之间的距离，能够让用户快速检索到自己想要的操作信息，有效提升用户的操作体验。

2.2 扁平化风格在网页布局中的应用

网页的整体布局方式决定了信息的呈现效果以及用户的操作体验，在拟物化设计中更加注重精美的排版和图片效果，希望以这种方式来降低用户的认知成本，为用户操作提供便捷。但是随着数码产品的普及以及人们使用网页熟练度的提升，在长时间浏览网页的过程中，过于复杂的图片反而会让用户产生视觉疲劳，并且增加了提取信息的难度。而扁平化风格则更多地使用了文字、图标等方式，这种页面布局方式更加简洁，呈现的信息也更加明确，用户可以快速找到需要的信息进行操作，缩短信息检索的时间，并且在视觉观感上也更加清晰透彻^[2]。此外，拟物化设计还无法适应在不同尺寸和分辨率的屏幕间转换，尤其是在小尺寸的手机屏幕上，可能会出现无法识别图标的现象，直接影响用户的操作体验。而扁平化风格能够适用于任何尺寸的屏幕，尤其是其简约的布局方式更适用于小屏幕的手机网页。因为扁平化风格不會受到屏幕尺寸的限制，所以给设计师提供了更大的设计空间，能够更加完整且完美地呈现页面布局。

2.3 扁平化风格在网页信息组织结构中的应用

从某种程度上讲，扁平化风格是和拟物化设计进行的对比，其在组织结构上的体现更加明显。拟物化设计主要是以层级化结构为主，以金字塔的形式进行信息的展示。一般金字塔结构方式所包含的信息量较大，无法在同一级中完全展示出来，所以需要通过增加层级的方式来延长传播的路径，以确保呈现信息存在完整的逻辑性。但是这种方式会耗费用户很多的时间，因为深入的层级越多，返回时也需要经历同样的层级，无疑会增加阅读的时间。而扁平化风格相当于压扁的金字塔，以最大限度地减少组织结构的层级、增加横向信息的方式来减少用户搜索信息的时间成本，有助于用户快速进行信息的浏览。在使用扁平化风格的组织结构时，一个层级所呈现的信息内容量会增加，传播路径大大减少，但是这种方式仅适用于信息量较少的网页，如果单层信息量过大，反而会增加用户检索信息的难度。所以在组织结构设计时，应该根据网页包含的信息量而选择适宜的风格，避免盲目地跟风而产生负面效应^[3]。

2.4 扁平化风格在网页交互方式中的应用

交互性是网页设计时的重要元素，网页所呈现出来的内容，并不只是简单对内容排版布局，而是更应该从用户的使用体验入手，从用户的视角出发进行页面设计，以提高网页和用户之间的交互性。良好的交互性是提高用户体验的重要方式，也是增加网页浏览量的重要途径，所以通过交互性设计能够为用户带来良好的视觉体验和心理体验。其中动画或动态图的扁平化设计能够更好地吸引用户的注意，与静态图相比，动态图和动画不仅能够满足用户的审美需求，还能够提高用户搜集信息的效果。比如当用户的鼠标停留在某一视频或图片上时，视频或图片中的信息就能够及时地显示出来，从而提升用户的信息浏览效率。在采用交互式动画的扁平化设计时，还应对用户群体进行细分，了解用户群体的操作习惯，然后有针对性地进行交互性设计，以提高用户对网页的使用效率^[4]。

2.5 扁平化风格在网页其他元素设计中的应用

网页设计包含多种要素，除了上述分析，还包括首页设计、标识设计、导航设计、文本设计等，而要将扁平化风格体现在这些要素中，还需要设计人员进行全面的规划。比如在颜色和字体上的设计，因为扁平化追求简洁大方，不需要太多的装饰，但是还要给用户呈现更好的视觉体验，所以在色彩使用方面就需要合理搭配。因为整体页面已经非常简约，所以颜色上应该尽量避免单调，可以采用同类色搭配的形式呈现一种层次感，也可以采用对比色的方式来突出重要信息。所以扁平化风格的使用，并不是简单的排列，也没有降低设计人员的设计水平，相反还更加考验设计人员的能力，需要在简洁的页面设计中给用户创造更加舒适的操作体验和视觉体验。

3 结语

网页设计的好坏直接影响到用户的体验，进而影响到网站的浏览量和企业的经济效益，所以网页设计要根据用户的体验来调整风格，以适应用户的体验需求。在快节奏的工作和生活状态下，人们更希望能够在有限的时间内提取更多有用的信息，所以对于过于复杂的页面风格会让用户感到疲劳，降低用户的体验。扁平化风格更适用于移动终端，既减少了以往拟物化设计的次数，在占用系统内存、运行速度以及待机时间方面又更适用于移动终端。扁平化风格的极简性使得主题更加鲜明，更迎合现代用户的体验需求，但同时也增加了设计人员的难度。简洁并不是简单，所以在简洁的基础上还要具有一定的内涵，能够从更多的维度和更深的层次体现网页的功能及其背后的意义。

[参考文献]

[1]王启宾.手机图形界面扁平化集合设计研究[J].智库时代，2019（5）：285-286.

[2]杨晔.扁平化风格在网页界面设计中的应用[J].科技风，2018（25）：97，100.

[3]冯贵兰，李正楠.扁平化风格在高校门户网站设计中的应用研究[J].现代计算机（专业版），2017（18）：49-51.

[4]宋雅丽.扁平化设计在网页版式中的应用探析[J].电脑编程技巧与维护，2016（17）：78-79.

（编辑 王永超）

Discussion of the application of flat style to web interface design

Sun Ruping

（Bayingol Vocational and Technical College， Korla 841000， China）

Abstract：In the past， designers prefer to use various artistic effects to decorate web pages in order to attract the attention of users. However， with the increase of the number and type of websites， the complicated design style of web pages will make users have visual fatigue and affect their operation experience. Flat design style emphasizes the simplicity of web interface design， and can reduce power consumption， prolong standby time and improve operation speed， which is more suitable for mobile terminal system. This paper first expounds the design characteristics of flat style， and then analyzes the application of flat design style in web interface design， which provides reference for improving the level of web design.

Key words：flat; web design; simplicity; user experience

作者簡介：孙汝萍（1982— ），女，河南获嘉人，讲师，硕士;研究方向：计算机应用教学。