浅议UI设计中的风格与表现

李时颖

摘要：该文主要探讨UI设计中的风格营造与表现方法，通过列举不同风格的UI设计的样式，梳理UI设计的可能设计方向，并通过探讨不同风格的主要表现方法和要点尝试总结出基本的表现技巧。

关键词：UI设计;视觉表现;风格

中图分类号：TP3        文献标识码：A

文章编号：1009-3044（2020）35-0204-03

开放科学（资源服务）标识码（OSID）：

1 概述

在全球互联网产品、数字媒体被广泛使用的信息时代，UI界面已成为互联网传播中最具影响力的内容之一。UI设计伴随着各种电子产品以及互联网服务与我们发生着极为密切的连接。

随着人类与互联网以及电子产品的深度交互，UI界面除了具备最基本的表意、标识、引导等功能，不同UI设计呈现出的视觉风貌也开始变得越来越丰富多样。UI界面作为互联网产品的视觉呈现，极大地影响互联网产品的形象特质。

在越加重视用户体验和产品差异化、多元化、个性化的“互联网+”时代，探讨UI设计的风格与视觉表现，是具备现实意义的。

本文就目前UI设计领域比较主流并且风格极为明确的像素风格、质感表现风格、扁平化风格、切面结构风格、极简风格和3D立体6种风格进行梳理和探讨，帮助读者建立起较为全面的视野，并能够迅速识别和理解每种风格最为核心的表现手法。

2 UI设计的风格与表现

2.1 像素风格

2.1.1 像素风格的主要特征

像素风格最明显的特征是模拟低像素图像的颗粒感效果，图像由肉眼可见的像素小方格组成，并且在图像边缘会出现锯齿状的轮廓线。如图1所示。

像素风格在早期受制于网络技术，图像分辨率在传播和显示时受到限制，可以说早期互联网中传播的图像基本是低像素的。但随着软、硬件技术的不断发展，高清图像的传播和显示早已成为主流，低像素图像反而由于独特的视觉效果成为一种特殊的有复古和怀旧感的视觉风格得到保留，并在数字插画和游戏美术领域得以广泛运用。

像素风格由于大颗粒的粗糙感带来一种类似马赛克拼贴的效果，从而具有鲜明而独特的风格，像素风有一种偏向可爱、和装饰感强的视觉印象。并且由于早期的电子游戏往往都是低像素画质，因而像素风格带有明显的复古情调。

2.1.2 像素风格的表现要点

在设计像素风格的UI作品时，一般会使用位图工具比如Photoshop作为主要工具，放大画布到出现明显的像素格，以格子为基本的单位进行绘制。

像素风格由于大颗粒感所以难以表现精细的事物，在设计时要通过归纳和取舍保留對象最核心的要素和基本特征。保证设计具有良好的可辨识度。

像素风格由于在形状上具有明显粗糙感，要想提升设计的视觉精致度，就要在颜色配置上精致一些。通过调整像素格配色的微妙变化来提升视觉层次。

像素风格在使用时要平衡好画面的整体和细节的关系。整体感强则辨识度高，但缺乏细节则容易让设计变得单调粗糙;相反细节丰富则精致度高，但破坏了整体感就会让设计对象变花不容易被辨识。

2.2 质感表现风格

2.2.1 质感表现风格的主要特征

质感表现有时也被称为拟物风格;这种风格是在设计中尽可能较为真实地模拟和还原事物的材料和质感，比如木质感、金属感、玻璃感、云雾感、液态感等，从而让图像具备接近真实物体的质地。如图2所示。

质感表现一般也经常使用Photoshop作为主要设计工具，通过丰富的图层混合模式与叠加模式、滤镜等，可以模拟出丰富的质感效果。

在一些需要强调和展示材料美感、高级感、希望模拟较为逼真的触觉体验的设计情境中，比如科技类、制造行业的UI设计中，例如手机、电子产品、汽车等，恰当的质感表现风格的运用可以带来较为强烈的具有现代感、科技感和产品精致度的视觉体验。

2.2.2 质感表现风格的表现要点

质感表现风格常常借助强调和表现设计对象材质的光影细节的特征来呈现：比如金属风格的营造，金属作为一种坚硬并且高度反光的材质，在光影规律上有非常明显的特征，比如相对而言形状往往较为规则并且强烈的高光、较为清晰的明暗层次塑造出来的光泽感。

木质感的表现与金属就非常不同，木质感往往不具备金属的高光泽度，而往往需要通过模拟表面纹理的规律和变化来呈现质感。

玻璃质感与金属感同属高硬度和高光泽度材质，但玻璃感的光影规律与金属不同，玻璃质感通常要表现明显的投射效果以呈现出通透感。

因而在进行质感表现时，需要认真观察材质的主要特征，从光泽度、光影规律、表面颗粒度、花纹图案肌理等方面进行切入、模拟和呈现质感效果。

2.3 扁平化风格

图3所示是较为典型和常见的扁平化设计风格。

2.3.1 扁平化风格的主要特征

扁平化设计几乎是目前互联网领域以及平面设计领域中运用最广泛的一种设计风格。扁平化从字面意义就能够传达出它的核心特征：弱化事物的空间和结构，将事物尽可能地平面化、图案化。

扁平化设计由于图案感很强，能够带来一种非常鲜明、极具辨识度的视觉效果，非常有利于在互联网中进行传播和显示。但是由于大量及广泛的运用和传播，也使得扁平化设计成为一种较为普遍化的设计风格，容易引起审美疲劳。

2.3.2 扁平化风格的表现要点

扁平化设计在进行表现时，需要很好地将设计对象的视觉特征进行平面化的概括归纳，弱化结构变化，尽可能将对象的形体特征抽取出来表现为一种较为规整的，几何化的图形。

在光影处理方面，扁平化设计一般只表达2～3个明暗层次，往往用明暗、高光区分出基本的结构特征即可。

扁平化设计较为概括和明确，常常以较为明亮，纯度适中的色彩营造出明快的视觉效果，增强视觉表现力。

在扁平化设计应用普遍的今天，很多设计师也尝试在细节方面打破原来的表现规律，赋予扁平化一些新鲜的样式，比如增强扁平化图案的投影让它更为明显地浮出在背景之上增强空间的层次效果等。

2.4 切面结构感风格

切面结构感风格是近几年出现的一种视觉风格明确而独特的图像风格，如图4所示。这种风格将设计对象的形体结构转折概括表现为类似钻石切面的样式。

2.4.1 切面结构感风格的主要特征

通过一系列不规则多边形作为结构的切面，利用切面相互组合表现对象的基本结构和体积。

切面结构的视觉形式带来一种体块感很强的视觉印象。但因为具有明显的概括性和几何感，这种风格在加强了结构感的同时兼具现代感和明快利落的优点。体块组合立体感很足，又有非常强的力量感。

2.4.2 切面结构感风格的表现要点

切面结构设计对设计对象的形态和结构要进行切面式的几何分割。分割的方式非常重要，分割线的位置和块面区域要符合结构的转折变化关系，从而很好地表现事物的形体结构特征。

切面的大小和数量也要合适，切面太少、太大会缺少形体的转折变化，切面太多太小则可能显得过于琐碎。

切面风格由于是一种立体感很强的视觉形式，因而色彩的明暗关系同时也很重要，色彩的素描关系要符合结构的光影规律以很好地突出设计对象的块面感和立体感。同时在色彩选择上需要避免过于花哨模糊了素描关系从而趋向于平面装饰化。

2.5 极简风格

极简风格在近几年的设计界广受欢迎，从室内设计、服装设计到平面设计领域都有它的踪影。极简风格遵循“少即是多”的原则，摈弃一切不必要的元素和装饰，力求用最简化的形式满足核心设计需求。如图5所示。

2.5.1 极简风格的主要特征

极简风格由于摈弃了几乎所有的装饰，直接将最重要的最核心的东西简单直接地呈现给受众，因此显得主次分明，主题得到最大限度的强调。

极简风格能够给人以直接、坦率、冷静的视觉印象，因為主体绝对明确而具有直达人心的力量感。使用得当具备一种现代主义的高级感。

2.5.2 极简风格的表现要点

极简主义在设计时往往就确定主和次两个视觉层级，主要的视觉层级以绝对优势凸显在背景之上，可以是明确的明暗对比、色相对比、饱和度对比或大小、疏密对比。通过反差极大的设计要素之间的视觉张力凸显主体物。

极简主义在设计时要通过对视觉元素的合理选择与配置突出设计感和力量感，使主体无论是在色彩还是在空间上都要非常鲜明、具有很好的量感，如果缺乏有张力的视觉元素，设计则有可能因为过于简单而显得单调无力。

2.6 3D风格

3D风格也是近几年非常流行的UI设计风格。如图6所示。

2.6.1 3D风格的主要特征

3D风格常常通过多个元素在空间上的分布与组织，通过叠压、透视等空间表现技巧带来一种空间感很强，层次丰富的视觉效果。适合表现较为复杂的场景、展示某种流程或者传达事物之间的关系。

2.6.2 3D风格的表现要点

3D风格有自己适用的设计场合，擅长表现复杂的事物，在设计时，先梳理出设计对象的内在秩序，再通过大小、远近、疏密、叠压等空间关系将设计对象的内在秩序表现为视觉形象。

3D风格往往需要在一个不大的平面尺寸中展现丰富的空间层次，因而设计元素往往变得琐碎，要在设计时尽可能通过空间分布和组织突出设计元素的内在关系和秩序从而避免造成凌乱的感觉。

3D风格的背景往往比较简单，以突出主要元素的空间位置和层次关系，色彩上也尽可能简单有秩序，有良好的层级感和引导性，避免增加视觉负担。

3 结语

综上所述，UI设计的风格表现多种多样，不同的风格给产品带来迥异的视觉印象。在具体的UI设计工作中，应当根据产品的定位、目标用户的类型出发，从用户体验的角度出发，选择合适的风格与表现手法。更好地从视觉体验上塑造产品形象，为客户服务。

此外，在全球文化多元碰撞融合的今天，本土设计师也应当从中华传统文化中汲取更多营养和灵感，不断探索与创造新的视觉表现。

参考文献：

[1] 明镜.UI设计中的视觉表现[J].计算机产品与流通，2020（8）：235.

[2] 邓朝晖.UI设计中的配色及应用[J].电脑编程技巧与维护，2020（1）：140-141，152.

【通联编辑：代影】