扁平化设计在网页设计中的运用研究

2022-03-16钟文彦

科教导刊·电子版 2022年22期

钟文彦

（海南科技职业大学设计学院，海南海口 571126）

0 引言

随着互联网的不断发展应用，人们对网站的依赖水平不断提升，不管是日常查找信息资料，还是分布信息资源，都有赖于通过网站得以进行，而人们对于网站的使用体验很大程度上取决于网页设计的设计水平[1]。近年来，扁平化设计凭借其一系列优势特征，在网页设计中得到越来越广泛的应用，该种新型的设计风格逐渐成为设计行业的一大潮流。

1 扁平化设计概述

扁平化设计，即为将简洁化、符号化及抽象化设计元素，代替纹理、阴影、透视等多余的装饰，以对信息予以呈现的一种设计风格。就扁平化信息组织而言，其主要呈现为扁且宽的信息结构，并表现出自然清新、色彩多样的风格特征。依托拟物化的设计，可实现纹理、阴影、高光等效果，而扁平化设计风格则与拟物化设计存在明显的不同。就如今业界对扁平化设计的运用情况而言，其主要表现出以下几项特征：一是排版简洁、易读；二是功能性强大；三是视觉层次分明；四是元素及形状较为简单；五是较为关注细节，比如对色彩的关注等[2]。扁平化设计凭借其优势特征，在用户界面设计中得到了广泛运用，其可让用户获得更良好的阅读体验，防止出现阅读障碍等问题。同时，扁平化设计在网页设计中也呈现出良好的运用前景，鉴于扁平化设计风格自然清新，具备突出的现代特征，让设计人员可专注于对更专注于对实质内容的呈现。基于扁平化设计设计出的产品，不仅不易于过时，还可实现简洁明了的效果。

2 扁平化设计在网页设计中的运用原则

2.1 元素简化

大数据时代背景下，互联网每天都想要向人们传递海量的信息，而如何实现对各类信息的高效传递，是有待解决的一项重要问题。拟物化设计尽管可有效降低人们的学习成本，但太多的元素往往难以达到理想的传递效果。而扁平化设计则强调利用简洁的表现手法，摒弃立体感的呈现，去除多余的装饰效果，让设计回归目标本身。对于网页设计而言，拟物化设计可实现突出的真实感，但与设计本身的目的性相背离，而在扁平化设计中，依托抽象化的表现手法，可让语义得到有效简化，进而很大程度上缩减不同国界、不同文化背景之间的认知差异。值得一提的是，扁平化设计并非盲目地对设计细节予以去除，元素简化并不等同于设计过程中的敷衍了事，而是凭借总结、提炼以及对核心元素的全面整合，以化繁为简的方式开展设计[3]。

2.2 强调色彩运用

扁平化设计十分强调对色彩元素的运用，作为影响视觉的关键因素，色彩可很好地加深人们的印象，进而达到传递情感的目的，所以，色彩该项形式元素在扁平化设计中不容忽视。实践表明，扁平化设计的色彩运用主要分成对比色运用和同类色运用。其中，前者使依托富有活力的色彩搭配，以让设计变得更具视觉冲击力；后者则是将同种颜色的黑、白、灰三种色调结合在一起，在层次上显得有层次、有对比，同时兼具整体感。

2.3 重视排版布局

鉴于扁平化设计所追求的极简风格，所以排版布局是设计人员所需重视的重要一环。在实际设计中，扁平化设计广泛运用网格布局，如此一来可让页面变得更具实用性，同时，对多余的内容予以去除，使设计内容的识别性得到有效提升。依托网格布局及图标来展现页面信息，可使不同层级相互间的关系变得更为分明，内容相互间更为自然、合理。另外，扁平化设计还应注重留白，该种设计手法不仅有助于给用户留下更广阔的想象空间，还可促进对产品或网页信息的传递。

3 扁平化设计在网页设计中的运用

3.1 在网页界面元素设计中的运用

扁平化设计在网页设计中的运用，尤为常见的是在界面设计中的运用，相较于繁杂的界面，简洁的界面元素既能够减少用户的阅读障碍，还可让用户更深入了解事物的内涵，进一步获取良好的阅读体验。在以往的拟物化设计中，设计人员在网页界面元素设计时，偏向于对真实物体色彩、形状等的模范，以期展现一种趋于真实的效果，在这过程中会通过引入阴影、渐变等效果以加深用户的真实体验。该种设计尽管可赢得一些用户的青睐，但同样会很大程度挤占用户的想象空间，并且还会延长设计开发周期。而扁平化设计在网页界面元素设计中，运用的是各种基本形状，去除阴影、渐变等各种装饰性效果，强调以尽可能简洁的界面风格以让用户可获得良好使用体验[4]。特别随着移动互联网的迅猛发展，人们越来越青睐于通过手机网页获取信息资讯，而扁平化设计可很好地适用于手机的小屏幕。通过扁平化设计进行简洁的界面设计，可更为直观地呈现网页信息，建立起用户与网络信息之间的有效联系，提升用户浏览阅读体验。

3.2 在网页布局中的运用

网页的整体布局方式重要影响着信息的传递效果及用户的使用体验。在拟物化设计中，设计人员强调通过精美的排版及图片效果，以期降低用户的认知成本，为用户实际使用带来便利。而随着人们网页使用熟练度的逐步提升，在长时间浏览网页过程中，太过繁杂的图片不仅不利于为用户带来便利，相反会让用户产生审美疲劳，并加大用户获取有价值信息的难度。而扁平化设计在网页布局中的运用，通过运用各式各样扁平化的图表、矢量图形及图标字体，以此不仅可更好地满足现代人的审美需求，还可实现对相关信息的明确呈现，让用户可高效提取自身需求的信息，提升信息检索效率，除此之外，拟物化设计还难以适应于不同尺寸及分辨率的屏幕间转换，特别是在诸如手机等小屏幕上，拟物化的图表很难识别，以此对用户实际使用造成不利影响。而扁平化设计则可适用于各种尺寸的屏幕，依托广泛运用矢量图形，不过多依赖于像素精度，以此设计人员可更好地发挥自身的创意联想，设计出可满足用户切实需求的网页界面[5]。

3.3 在网页交互方式中的运用

随着如今社会生活节奏的不断加快，以读图的方式获取信息得到越来越人的青睐，图像凭借其一系列优势特征，可通过多种不同方式以实现对信息内容的生动呈现，并且如今图像已不断由静态图向动态图发展。相较于静态图，动态图具备更突出的视觉吸引力，具备更丰富的创意思维，以及可让图像实现叙事功能等。拟物化设计要想进行动态图像设计，需要投入大量的成本，加之各个动态图像都存在着尤为复杂的协调运动。而扁平化设计则不会出现此类问题，其可高效便捷地满足动态图像设计的需求，同时不同图像相互间的互动也较为简单，网页中的动态交互可有效提升网页活力，使用户获得良好的使用体验。近年来，网页设计呈现出由拟物到符号、由繁到简的发展趋势，由此重要体现了用户审美趣味的发展转变，这同时也是社会发展的一种必然。也正是基于对这一发展规律的有效遵循，让扁平化设计得以实现飞速发展。扁平化设计中的“简”，并非简单粗暴地对烦琐设计细节予以去除，二是经由脑力劳动的简化处理，是在取与舍之间的合理选择。

3.4 在网页其他元素设计中的应用

网页设计包含诸多要素，除去以上要素之外，还涉及导航设计、首页设计、标识设计、等方面，而要将扁平化设计有效运用于这些要素设计中，需要设计人员开展全面规划。比如，在色彩、字体设计方面，因为扁平化注重简化设计，使得整体页面较为简约，所以色彩设计上尽可能高避免单调，可引入同类色搭配以营造层次感，也可引入对比色，以凸显重要信息。因此，扁平化设计在网页设计中的运用，并非简单的排列组合，对设计人员专业素养仍提出了较高的要求，需要设计人员可在简洁的网页设计中，为用户提供更为良好的使用体验及感官体验。