移动用户界面设计中视觉传达...传统审美艺术元素的应用研究_刘磊.pdf

上海包装总第 324 期2023 年第 4 期 包装文化包装文化41移动用户界面设计中视觉传达设计 与传统审美艺术元素的应用研究刘 磊武汉工程科技学院，湖北 武汉 430200摘要：在信息技术飞速发展的今天，以用户接口设计为主要内容的新型设计方式，将人机互动和视觉效果有机地融合在一起，已成为互联网行业发展的一个重要内容，其中，移动用户界面设计的多样性和便利性使得用户界面在新媒介的竞争中独树一帜，扮演着举足轻重的角色。以移动用户界面设计为主要研究载体，分析了移动用户界面的设计要点，探讨了在虚拟视觉形态下如何将传统审美艺术理念引入移动用户界面设计中具有重要的意义；从文化内涵和底蕴角度，对既能满足社会大众审美需要又能体现中华优秀传统文化的元素进行了剖析，旨在结合当代艺术形式，呈现实用、新颖、有趣的界面设计。关键词：移动用户界面设计；视觉传达设计；传统审美艺术分类号：TP311.51 移动用户界面的设计要点1.1 合理性在移动用户界面设计中，元素的组合与重组是设计中的一个重要环节，涉及元素设计、排版设计、文字设计、线条设计等方面，要确保整个移动用户界面设计的合理性。移动用户界面的显示面积很小，在设计时，字体的排列与呈现、相关图形的表现形式等是关键，同时要充分考虑 App 的功能和特性。当前的很多设计中，比较常用的是“简单化”设计，但最终设计所能呈现的信息量很少，在某些特定的场合并不适用。1.2 简约性随着信息技术的飞速发展，用户在短时间内收到的信息量较大，导致用户对数据采集容易产生疲劳感，因而在接口设计中对简洁度的要求日益提高。在移动用户界面设计中，实现信息的有效传递和视觉上的满足非常重要，从这一点可以看出，移动用户界面的设计将朝着极简方向发展，但目前依然有部分软件为吸引用户赋予了用户界面设计一定的复杂性，同时给用户带来了不好的体验，不利于用户的持续使用。1.3 适配性界面的适配性，即从软件的功能、呈现的内涵等方面入手，运用整体的设计思路来达到有效的信息传递效果。不同的移动软件，功能存在较大差异，要根据用户的需求和软件的实际功能确定信息传达量和用户界面方式。设计师要分析软件想要向用户传达的思想和软件本身的信息涵盖量，从而确定软件是否需要提高复杂度，确保移动用户界面的设计准确度与科学性，从而更好地实现整个软件和用户界面之间的衔接。2 移动用户界面设计中视觉传达设计元素的应用当前，视觉传达设计已经成为一门独立的学科，在不同的设计领域中具有不同的使用方式和注重因素。因此，移动用户界面设计要从软件本身出发，依据视觉传达设计中的相关知识点完成界面所有项目的设计。2.1 文字的应用在视觉语言设计中，文字是最传统、最直观且最有效的信息载体之一，要想达到更好的视觉传播效果，利用文字在移动用户界面上进行可视化设计必须遵守以下原则。第一，简洁性。人们的生活节奏越来越快，每天都要接收到很多信息，只有简洁、直观的文字设计才能让使用者在最短的时间内获得更多的信息。第二，一致性。在移动用户界面设计中使用文字时要注意文字的字体、字形、整体的设计风格，保收稿日期：2023-02-19作者简介：刘磊，女，硕士，助教，研究方向为影视摄影、平面创意设计。012.DOI:10.19446/ki.1005-9423.2023.04.包装文化 包装文化 2023 年第 4 期总第 324 期上海包装42持文字形式的一致性，这样有助于降低复杂度，提升阅读体验。第三，兼容性。这一点主要表现在文本与视频的有效结合上。注重文字和视频的兼容性，可以增强使用者的使用体验。第四，美观性。移动用户界面在介绍产品细节时，会出现大量文字，必须兼顾界面的美观性，如文字的大小、字形、间距等，这样才能呈现出更好的视觉效果，让使用者更好地了解信息内容。2.2 色彩的应用颜色是移动用户界面设计的一个关键部分，正确使用颜色可以提高移动用户界面的设计质量。2.2.1 呈现界面整体架构用户接口的设计一般采用几何图形，既能直观地进行视觉传达，又能赋予图形不同的色彩搭配。市面上大部分移动用户界面是将不同的颜色组合在一起，形成一套完整的符号体系。设计师可以通过使用色彩直观地展示界面的不同组成要素，如界面背景、导航栏、状态栏、按钮等，并且通过色彩展示界面的逻辑性和结构。设计一款优秀的移动用户界面，需要设计师对产品的定位、用户需求进行深度分析，制定出一套标准的“颜色规范”，完成基本调查后，对产品的图标、按钮、线框等进行详细设计。这套标准的“颜色规范”应明确主色调、辅助色调及各类装饰细节的色调，使其与真实效果的颜色相一致。2.2.2 明确界面层级关系在用户界面设计中，各部分内容都处在不同的层次上，如化妆品包含眼妆、唇妆等，书籍包含不同类型的文章和小说等。使用相同的颜色或者同色的不同明度，都可以帮助使用者迅速分辨出各板块的层次；或者在主屏上选取高亮度或高纯度色彩来衬托重点。2.2.3 打造界面整体风格用户界面虽然是一个很复杂的图形系统，但它可以灵活地使用主色调、辅助色、装饰色，通过这些颜色的合理配比，界面将呈现鲜明的风格。主色调是决定用户界面视觉风格的主要因素，占总界面的 70%，要依据产品的特性、使用者的需求和颜色心理的规律进行选取；也可以在主色调的基础上，通过明度和纯度的改变衍生出相同的颜色。由于颜色在视觉上是有分量的，颜色饱和度越高，颜色的感受度就越强；颜色亮度越高，就越显眼，通常会选用饱和度高、亮度低的颜色作为背景色。辅助色顾名思义就是用来衬托主色调的颜色，它约占整个界面颜色的 25%。辅助色与主色调是互补的，辅助色的合理使用能使整体的界面协调一致。选择与主色同色的辅助色会产生一种和谐的视觉效果，使用与主色相近的辅助色可以增加界面的层次，而使用与主色相对的颜色，则会进一步凸显主色调的色彩。装饰色在整个界面中起点缀作用，适当使用装饰色，可以锦上添花、画龙点睛，使整个界面显得更加生动。良好的装饰色能增加用户界面的趣味性和个性，使界面的视觉效果更加丰富。值得注意的是，装饰色和界面整体色调各有所用，应在色相、明度、饱和度等方面体现出差异。总体上，当界面的整体色调亮度不高时，选择饱和度高的装饰色会凸显出重点，或者使用补充色来凸显界面的重点。调整颜色的明度和饱和度，可以创造出一个全新的移动用户界面。在科技进步的今天，手机用户界面的应用越来越普遍，界面的风格和质量也越来越受到用户的重视。2.3 排版布局的应用在移动用户界面设计中，应用程序的排版布局是用户对软件的第一印象，也是决定其是否会持续被使用的重要因素1。因此，加强排版布局在视觉传播设计中的应用非常重要。在移动用户界面设计中，排版设计的价值在于有效地将信息的视觉交互和人机互动的效果相结合。因此，在移动用户界面上，可以有效地将视觉传达与互动设计相结合，在满足使用者美学要求的基础上，加入一些传统的平面版式设计要素。排版布局看上去并不难，但对于设计师而言，如何将美观与实用相结合是设计的关键。在设计应用程序时，设计师需要对 App 的功能进行分析，以便为以后的排版布局做好准备。从信息传递的内容上，有些应用程序需要传递的信息较多，若使用高复杂的排版布局，则难以引起用户的注意。同时由于设计时考虑因素较多，移动用户界面的设计费用也相对更高。比如，在一些游戏类的应用程序中，其界面内容一般是游戏更新和游戏玩法的介绍，页面布局一般采用动态图形的形式进行用户界面设计2。2.4 元素符号的应用移动用户界面设计，既要做到实用性、功能性、交互性，又要利用元素符号来美化界面以提高用户的使用体验。元素符号的选用，要充分考虑软件的功能，以确保元素符号的合理选用。比如，在应用程序界面中，上海包装总第 324 期2023 年第 4 期 包装文化包装文化43可以添加一些流行的搞笑元素，使应用程序更加生动有趣。3 移动用户界面设计中传统审美艺术元素的应用3.1“虚”与“实”的应用“虚实”是传统美术文化中一种重要的审美观念，它使艺术创作具有特殊的意蕴。艺术创作中存在着“有实有虚、有虚有实”的矛盾，二者相互渗透、相互转换，使人的主观意识与客观环境融为一体，给人以广阔的艺术想象空间。从传统美术的构成与设计特点来看，“虚”与“实”的审美理念已经渗入许多艺术范畴，并在长期的艺术创作和理论实践中，成为一种重要的理论基础。在中国传统绘画中，往往会运用“阴阳相生”“知白守黑”等审美理念，通过大量的空白烘托现实场景，给人以无限的想象空间，从而获得“画外之画”的意境。在当代美术设计中，空间元素的大小、疏密、明暗、比例等表现形式充分体现了空间的虚实关系。在以视觉设计为主的表现形式中，图与底的关系是最直接的表现，“图”是设计的主体，“底”是图的辅助。在视觉设计中，为了更好地反映主题，界面通常会结合图片、文字、色彩、背景底板等视觉要素，在视觉上营造出丰富的层次。留白在界面设计中起到了很大的作用，既能营造生动的空间联系，又能均衡布局。比如，某一界面中的“摘录”功能模块，采用“虚实结合”的设计手法，在右上方突出古代诗词，在左边标明作者，突出界面的作用和主题；“发现”的功能模块，通过对文字和要素的规律性排列，指导用户正确地运用这些功能。在界面设计中，“虚”与“实”的联系能充分反映设计的审美法则和视觉效果，从而提高产品的艺术价值和商业价值。3.2 传统图案纹样的应用在漫长的岁月中，中华民族留下了很多寓意深刻的传统图案，如象征多子多福的双鱼图案，象征有喜降临的喜鹊图案，象征喜怒哀乐、善恶忠奸的脸谱图案，等等。将这些有特别含义的图案融入现代设计手法和技术中，既能有效传达产品的理念，又能实现传统文化的传承。当代设计师要深刻理解图形的纹样，把握其所传达的文化意蕴，从而将其与当代的界面设计相结合。在用户界面设计中，传统的图形设计方法主要用于界面背景、跳转按钮、ICON 图标、App 主题等的设计，其中跳跃按钮与 ICON 图标的设计都是以图形为标志进行功能传递；界面背景与 App 主题的设计主要包括引导页面、一级界面、图标界面、系统界面等的设计。在用户界面上，更多的是传统的图案纹样，以给现代设计注入新的思路。设计师在运用传统图案纹样进行设计时，必须深入了解其所传达的文化意蕴、把握好文化走向，才能很好地将传统的图案与当代设计相融合3。3.3 传统绘画元素的应用当代美学越来越注重产品的创意，如界面设计、色彩搭配、创意图形设计等4。为了更好地推广设计方案、提高使用者的参与度，设计师会选用传统文化背景进行创意设计，在尊重使用者的文化和审美需要的前提下，注重文化的延展和传承。独特的意蕴和更具包容性和互动性的绘画艺术形式，能给界面设计注入新的设计灵感。在界面设计中，可以运用传统水墨画的着色、章法、虚实关系等技法，将传统的绘画与用户界面中的控件、字体、ICON 图标、图形图像等元素有机地融合在一起，既突出水墨意境和东方韵味，又增加界面的节奏和层次，给使用者带来一种别样的视觉感受。以“每日故宫”App 和“紫禁城 365”App 为例，通过手机 App 的界面设计，经典的色彩、灵动的线条、创意的文字、现代的插画等元素被融入 App 的功能模块中，充分体现了主题和民族文化的特点，达到了视觉上的丰富和形式上的美感之效5。4 结语综上所述，移动用户界面设计是一种重要的信息传递手段，其设计效果将直接影响用户体验，并且决定用户是否会持续使用这个应用程序。因此，移动用户界面设计要注重文字、色彩、排版布局、元素符号等在视觉传达设计中的正确使用，同时注重与传统审美艺术理念的融合，这样才能不断提高用户界面的视觉传达效果。参考文献1 吴宜桐.平面视觉语言在手机UI界面设计中的交互研究D.吉林:东北电力大学,2018.2 李莎.MOBA类手游的UI视觉设计研究D.广州:广东工业大学,2020.3 张雪铭,赵晓明.设计美学在移动应用UI界面设计中的体现J.设计,2018(7):40-41.4 周宇.UI界面设计的个性化表达D.天津:天津美术学院,2020.5 徐明杰.基于用户参与式理念下的非遗类App界面视觉设计研究D.杭州:浙江理工大学,2022.