信息可视化设计在移动UI界面中的应用_朱杰.pdf

2023.01视觉传达设计随着互联网移动 UI 设计的不断发展，信息可视化设计逐渐在 App 产品设计中被应用，其通过将各类表格数据、文字资讯、复杂理论进行可视化处理，让用户更加快速地阅读和理解信息。目前，信息可视化已迅速成为在网络上传播信息的标准。一、概念阐述（一）信息可视化设计的定义信息可视化的理念最早由斯图尔特 卡德、乔治 罗伯逊和约克 麦金利提出。其是将非空间数据的信息对象的特征值抽取、转换、映射、高度抽象与整合，用图形、图像、动画等方式表示信息对象内容特征和语义的过程。可视化设计主要为方便人们对复杂信息的理解与认识，通过计算机交互设计为载体对抽象的内容及数字进行可视化的呈现。信息可视化设计可以对复杂的文字概念、繁复的数据、杂乱的内容进行系统化的梳理与排序，最后将内容进行优化设计，通过清晰的图像将内容呈现给用户，帮助用户更好地理解内容。设计形式包括数据可视化设计、图形可视化设计等，呈现的形式主要为数据图标、大数据看板、时间轴、信息图等。通常被应用在复杂的信息图设计中，用以解析复杂的科学理论。信息可视化设计通常被用在教科书插图、历史信息总结、博物馆、报纸等内容的设计中，通过将海量的信息有规律地进行梳理、排序、风格化设计，达到对复杂概念的清晰传达。将难以理解的科学概念及复杂内容拆解为容易记忆的图形，将文字语言转化为视觉语言，使枯燥无味的信息变得美观生动。在互联网信息爆炸的时代背景下，信息可视化设计可以帮助设计者在 App 产品设计中，筛选出符合目标用户认知的重点信息，更好地对信息进行整理、排序、优化，从而有效地提升界面设计中的内容的传达效率，让用户在使用产品的过程中，更加方便快捷地对信息进行深度的理解。（二）移动UI设计的定义UI（User Interface，用户界面）设计是指对软件产品的人机交互、操作逻辑和界面美观的整体设计。从字面上看由用户与界面两个部分组成，但实际上还包括用户与界面之间的交互关系，所以可分为三个方向：用户研究、交互设计、界面设计。互联网场景中的移动端 UI 设计通常指手机、平板电脑等移动终端的 App 产品设计。UI 是指人与信息交互的媒介，它是信息产品的功能载体和典型特质。移动 UI 设计以手机等终端为载体，将图形、图标、色彩、文字设计等内容以一定的规律进行排布，逐步形成移动端特殊的内容交互形态。移动 UI 界面有五个主要的设计流程。一是确定目标用户，在做设计时需要充分考虑用户的需求，调整交互设计的侧重点。通过对用户的深度了解，分析用户的行为特点及内在需求，形成用户画像。二是采集目标用户行为习惯，对目标用户进行精准的调研分析，挖掘用户在产品使用过程中的交互习惯，得到最适合用户的交互方式。三是提示和引导用户，在软件中引导用户进行正确的软件操作。四是融入一致性原则，将视觉元素、交互行为进行一致性的统一。五是遵循可用性原则，让用户在使用的过程中更好地理解产品的各项功能，达到最优的交互体验。二、信息可视化设计在移动 UI 界面中应用的意义（一）提升信息的传播效率信息层级丰富、功能烦琐、用户理解难度高是众多 App 产品的痛点问题。数十个功能模块、数百个内容界面、繁杂的文字及数字信息成为信息传播效率的信息可视化设计在移动 UI 界面中的应用朱杰李嘉摘要：从信息可视化设计的理论研究出发，从信息传达率、版式设计风格、色彩搭配、图形设计等方面探析移动UI界面中可视化设计的原则及方法，以提升UI界面信息传播效率。信息可视化设计在移动UI界面中的应用能有效提升用户体验，提高用户信息阅读流畅度及信息理解能力，有效解决移动UI界面的信息传播效率、信息可读性、信息层级等方面问题，从而为今后UI界面设计中信息可视化设计提供助力。关键词：信息可视化；移动UI界面；交互设计182023.01视觉传达设计阻碍，烦琐的功能让用户的选择较为困难。而信息可视化设计，通过简单的图形与文字信息即可快速地传达重要信息，将原本需要大量文字内容阐述的信息视觉化，简化界面内容增强信息的可读性，让用户在看到可视化图形时迅速地理解该内容传递的重要信息。（二）增加信息可读性用户在长期阅读枯燥信息时，难以进入深度阅读的心流状态，人性本身对于色彩和图像的感知大于对于文字的感知。将难以理解的概念进行视觉化表现，有利于增加信息的可读性，让枯燥的理论知识变成有趣的图形和动画，降低信息的理解难度，提升用户的观感体验。比如用户在阅读复杂理论内容时，通过图形表达的方式将文字图形化，以丰富的色彩与富有冲击力的图像让用户有更好的阅读体验。在复杂的数据对比、数据分析中，多样化的图表可以迅速使用户了解数据趋势走向及数据变化。（三）塑造风格化界面通过信息的可视化设计，可以让界面更具风格，在同类产品中提升辨识度。不同的色彩感知让用户产生不同的情绪感知，如热烈的红色与橙色、冷静的蓝色与绿色、欢快的黄色等在界面中的应用都在传递不一样的情绪感知。让用户通过色彩的视觉感知体验到内在的信息内容，从而对 UI 界面产生记忆点，这样可以提升产品的品牌识别度与市场竞争力。三、信息可视化设计在移动 UI 界面中应用的设计原则信息可视化在设计的过程中需要以提升直观的阅读体验与信息接受率为目标，充分考虑用户的行为特点及心理特点，根据用户的阅读习惯把握界面设计中内容的可读性，通过以人为本、高效识别、准确表达的设计原则进行设计。（一）以人为本的设计原则信息可视化设计应该遵循以人为本的设计原则，帮助人解决产品使用中遇到的核心问题，遵循人对信息接受的特征，调整信息可视化设计的策略与内容。每个个体对于同一事物的感知是不同的，同样一个界面在不同用户使用过程中的信息传达效率也不同，只有不断地针对产品的目标用户进行测试和完善移动UI 界面内容，才能确保其符合目标用户的价值需求。通过图形、色彩、文字等形式，建立以用户为中心的视觉传达机制，重复考虑用户使用产品的日常习惯、行为特征和心理因素，实现多样的阅读视觉感知体验，让信息的可视化符合产品目标用户诉求。（二）高效识别的设计原则信息可视化设计的高效识别原则体现在界面的极简、版式内容层级的清晰上，主要为帮助用户在使用产品进行阅读过程中快速获取重要信息、理解复杂的数据及理论信息，让界面实现流畅的阅读体验。高效识别的基础是信息量低、重点突出、版式舒适，设计者在移动 UI 界面设计中可通过消除无用信息与保留重要信息、信息筛选及优先级排序、重要信息的视觉强调等设计手法提升信息传达的效率，用最简洁的设计语言快速地对界面信息进行精准表达，更好地贴近用户认知的移动 UI 界面。高效识别的设计原则能帮助设计者合理地进行信息筛选与组合，从而达到内容界面的信息简约、层级清晰，给用户更好的阅读体验。（三）准确表达的设计原则信息可视化设计的准确表达设计原则主要是为避免在界面设计中出现阅读歧义，传递容易令人产生错误感知的信息。图形的设计和图片的使用应该与文字内容紧紧地联系在一起，如果表达得不够准确可能会造成用户的理解偏差，从而产生背道而驰的效果。在icon 的设计中，应该注意图标设计的可读性和指向性，将图形创意与功能内容结合，理清图形与内容之间的内在联系，从而达到准确的信息传达。四、信息可视化设计在移动 UI 界面设计中的应用方法（一）信息图表化信息的可视化设计中，最常用的可视化方式就是信息图表化设计。不同的内容形式可以通过不同的图表进行表达。按照形式特点，常把图表分为关系流程图、叙事插图、树型结构图、时间分布类及空间解构类五种类型。信息图表设计的本质是将数据等重要信息内容进行可视化呈现，使其变得更利于理解，通常在数据展示、案例对比、图形解读等场景下使用，使信息变得更加直观易懂。在信息图表的设计中，设计者应当遵循简单至上的设计方法。在图表设计中，详细梳理文字、图形内容在信息传达中的必要性，去掉表达冗余的部分，保留最重要的信息内容，让图表设计简单易懂。例如，在支付宝的基金板块设计中，通过 K 线图的设计表现基金在一段时期内的涨跌幅，192023.01在对比界面中通过柱状图进行基金的对比，在基金推荐中通过条形图将基金的估值情况进行可视化呈现，从而让用户更快地对一支基金的重要信息进行准确把握。（二）文字图形化在界面的可视化设计中，可通过文字图形化的方式，将抽象的信息具体化呈现。通过将文字信息转化为图片、图标、插画等易于理解的表达形式，快速与用户日常生活产生深入的连接，提升用户对信息的理解能力。在 UI 界面设计时，多使用图形的表达增强内容的观感。在文字图形化的设计过程中，应该遵守准确性的设计原则。图形设计的目的是准确地表达主题内容，在文字的图形化表达中，为避免产生歧义，需要保证图形内容的准确性，减少对内容的理解偏差。在图形的创意设计中应该围绕主题的内容进行延展设计，设计的图形应该具有较高的辨识度，反映出内容的具体特质，提升内容的识别度，将抽象的文字内容符号化、具体化。例如在墨迹天气 App 产品中，表达天气变化时使用晴天、多云、雨天等不同的图标表现不同时段的天气变化，表达不同天气情况下的穿衣建议时，用插画人物衣着和真实的人物穿搭照片进行可视化表现，表达不同的功能界面时通过多样的功能图标展示产品不同的功能用途。（三）模块色彩化模块色彩化是在 UI 界面的内容设计中，区分内容模块和实现界面品牌化的最佳设计手法，通过颜色对功能模块、内容模块进行区分，提升界面视觉效果的同时，也可以起到提升阅读体验的效果。在文字图形化的设计过程中，应该遵循精准匹配的设计方法。在颜色的选择中，首先需要综合考虑用户人群特质、行业特质等因素，选择目标用户较为偏向的色彩搭配，其次需要考虑颜色在金刚区、首图 Banner 等不同功能模块场景下的应用，选择色彩明度、色彩对比度适合的色彩进行搭配，最后为了配合活动界面的设计，在 UI 界面整体的色彩搭配上需要限制色彩，根据品牌色选用标准色。（四）版式清晰化版式设计是在 UI 界面中进行内容排版与色彩搭配的基础，将视觉元素按照一定的规律有序组合，并处理好各元素之间繁简、大小、疏密、曲直等关系，在设计中采用夸张、比喻、象征的手法来体现视觉效果，形成不同寻常的空间关系。好的版式设计在突出重点、提升界面美感和信息传达上有重要作用。在版式设计中为让内容清晰化呈现，首先需要对内容的重要性进行优先级排序，找到用户关注的重点内容并通过版式放大、色块强调、模块设计等设计手法对内容的整体逻辑进行清晰的区分。其次在文字内容的处理上，通过将重点内容突出放大、调整色彩明度与纯度、加粗强调等方式，可让界面清晰准确地传达有价值的信息。五、结语信息可视化设计在移动 UI 界面上的应用，可以在互联网信息爆炸时代下，帮助产品精简信息内容，降低用户的阅读成本，让信息更加直观有效地进行传播。本文总结了信息可视化设计在移动 UI 界面中设计应用的四种设计方式，具体分析了提升 UI 界面信息传递有效性和准确性的可行性方案，为今后 UI 界面设计中应用信息可视化设计提供可行的设计策略和设计方案。设计师在进行 UI 界面设计时可通过时间轴、数据看板、图表设计、信息图设计等方式，改变界面的版式、色彩、内容等，增加界面的风格化表达，从而提升产品的记忆点和视觉冲击力，增强用户对产品界面的感知度。参考文献：1任雨桐,王瑾.信息可视化设计的叙事性研究与应用J.设计,2022(9):27-31.2张广超,颜菊.色彩在信息可视化设计中的应用研究J.工业设计,2021(1):85-86.3刘东宇.浅议视觉传达设计在 UI 界面中的设计表现J.明日风尚,2020(13):17-18.4袁浩,胡士磊,徐彦,等.运动类 APP 的信息可视化界面设计研究J.包装工程,2020(18):236-241.作者简介：朱杰，长沙理工大学设计艺术学院硕士研究生，研究方向为数字媒体艺术。李嘉，硕士，长沙理工大学设计艺术学院教授，研究方向为创意材料与空间设计研究。视觉传达设计20