摘 要

本文首先对信息可视化进行了介绍，由此分析当下口红数据信息的现状，对消费者现有获取口红信息的场景和获取到的口红信息的优缺点进行分析，罗列出可以优化的口红信息。针对口红数据信息可视化设计，对使用的设计方法，结合口红数据如何实践进行了讨论。

根据上述的设计理论与方法，如何合理展示口红数据，对口红数据信息可视化的设计提出具体的设计策略：首先运用相似性原理将数据图形化；其次，合理分级，用不同的设计元素区分等级，形成合理的视觉秩序；最后在用户进行交互时，提供及时可靠的反馈，对用户的操作，提供焦点视觉效果展示。

在设计完成后进行数据收集与清洗，使用canvas与charts技术进行开发，实现功能设计。

关键词：信息可视化；数据可视化；口红数据

目 录

目 录 1

第1章 绪论 2

1.1 信息可视化发展现状 2

1.2 口红信息使用现状 2

1.2.1 口红信息使用场景分析 2

1.2.2口红信息分析 2

第2章 信息可视化运用理论 3

2.1相似性定律的应用 3

2.2设计元素的秩序 3

2.3合理降低认知负荷 4

第3章 基于canvas与charts的信息可视化设计 5

3.1信息可视化设计策略 5

3.1.1 提供信息反馈 5

3.1.2突出视觉焦点 5

3.2页面技术实现 7

3.2.1 背景渲染及色块定位 7

3.2.2 页面主体及功能 7

3.2.3 其他功能模块 8

第4章 结语 9

致 谢 10

第1章 绪论

1.1 信息可视化发展现状

信息可视化的含义为“以某种形式表示的数据被转化为图形，由用户对其进行解释。” ^[1]无论是使用Office Excel生成的数据图表，新闻上一个地区发布的一个新闻文章，或是在手机应用中接受到的各类以图形为载体的信息，可视化是获得和保持人们关注的新途径。有时，这些可视化内容很容易在电子表格或在线工具中生成，而其他时候，它们需要强大的计算工作量和数周的设计才能唤起正确的最终产品。随着大数据时代的来临，信息以爆炸式的速度增长，其分布的更为分散，复杂程度也越来越高，人们的认知能力优势会受到传统可视化的限制，简单的数据和图表有时将会导致数据的可读性和及时性降低，从而影响用户的理解和决策的快速实施。而良好的可视化效果可以讲述故事，产生影响，传递信息。

1.2 口红信息使用现状

1.2.1 口红信息使用场景分析

用户获取口红信息主要有线下和线上两种渠道：线下渠道一般在商场化妆品店、或品牌专柜进行口红挑选与购买时获取口红信息。线上渠道更为多种多样；在购买时可以通过购物网站，或品牌官网进行浏览。非购买情况下，用户在生活中也会通过手机APP或微博、微信等自媒体平台上获取美妆信息。

1.2.2口红信息分析

不同用户在选购口红时会参考不同的信息。有多种口红的信息影响用户购买：颜色、质地、品牌、价位、持久度、味道、外观、使用感受等。我们根据调查数据，对其他信息的重要程度进行区分。通过对互联网口红信息元素进行分析，发现用户在获取信息的过程中有如下问题：

信息层级混乱。首先口红信息存在“品牌-系列-色号”的层级关系。用户在获取一条关于口红的信息时，不能明确了解其归属的品牌系列，然而口红的质感、包装、设计理念等都是以系列进行区分的。

信息分布零散。在线下渠道，在各品牌专柜之间，口红信息存在物理间隔，所以不同品牌的口红并不能同时比较，获取的信息相对狭隘。在线上，官网和购物网站也是以品牌进行划分，与商场类似。在其他渠道获取美妆信息，往往通过微博、小红书、微信公众号等自媒体，信息质量良莠不齐，且信息获取困难。

第2章 信息可视化运用理论

2.1相似性定律的应用

格式塔定理中相似性定律指出，当使用颜色、线条、框架或其他形状相互连接的元素与其他不以相同方式连接的元素进行比较时，它们被视为单个单元。这种分组效应甚至在与其他格式塔原则（如连续性、接近性等）相矛盾时也能起作用，我们面对的是眼睛和大脑的独特组合，如图2.1所示，可以用相同的元素表示同种类型，又以线条、颜色等表示同个单元的不同信息。

在口红信息可视化的设计过程中按照格式塔理论的相似性原理，我们将所有的数据用相同的圆形元素进行表示。但用不同的颜色、大小区分不同的数据，在相似性的基础上显示出个性。

图2.1 格式塔理论相似性^[2]

2.2设计元素的秩序

可以有序，有条理地安排设计元素的秩序，正确的期望，以实现组件的正常运行。每个设计元素的背后都是隐藏的规律。元素之间的大小，距离，比例和距离构成了视觉层次结构的空间，表明遵循视觉等级顺序和信息水平的准确表达可以有效地引导用户的视线，改善审美感觉，真正瞄准目标，从而为开启定量视觉设计的时代提供了科学和逻辑的标准。

不同的阈值使用户可以注意到不同层级之间的显着差异和变化，帮助设计人员识别大小和字重的差异，并确保遵循信息的视觉呈现清晰的层次结构，使用户可以下意识地识别信息的重要性顺序。信息越少，设计元素之间的变化就越少，表现往往比较简单；信息层越多，表现越丰富和细腻;也可以根据不同应用程序界面的方向和样式来调节不同的阈值或节奏。

运用色彩展现事物的关联色彩可以强调信息，可以帮助读者找到需要的信息，色彩与图形和数字结合可以更易于记忆^[4]。如图3-1所示，在背景中设置以红色为中心，包含多种口红颜色的色板函数，并提取口红信息中色号信息的色值，通过色值与背景颜色相匹配，以地理坐标的方式定位口红色号的位置，以此表示出各口红色号之间的关系。用户不需要了解其中的原理，可以直观的用位置了解某款口红的替代色号，或相比于该色号更深或更浅的相近色号。

图2.2 口红数据间的色彩关系

2.3合理降低认知负荷

如果与界面的交互过于复杂，则会增加用户的精力或认知负担。设计时应尽量减少让用户必须继续思考如何操作界面，而是专注于完成任务因此，将认知负荷降至最低。为了确保用户的认知负担最小，可以设计NUI(Natural user interface自然交互界面)，以便用户在交互过程中主要应用基本知识和简单技能。这将确保该界面易于使用和学习。我们了解物理对象从在现实自然状态中的行为，以及当用户界面通过使图形用户界面对象以相同的方式运行而利用这些知识时，确切地知道从这些界面中可以获得什么。如果特定用户组已经具有可用于与复杂NUI交互的能力，应当优先给用户提供简单的交互，而不是让他们使用现有的复杂交互。从长远来看，简单交互所需的精力更少，并且可以让设计适用于更广泛的用户群。

第3章 基于canvas与charts的信息可视化设计

3.1信息可视化设计策略

3.1.1 提供信息反馈

人机交互的反馈信息是指用户在人机操作过程中, 用户从软件系统得到的信息。反馈信息反映了软件对用户的交互动作所做的反应, 能够让用户判断此前操作的效果。因此设计人机交互界面必须要考虑系统对用户操作的反馈^[3]。所以在合理的时间内，用户的每一个动作都应当有合理的、可读的反馈。可以让用户了解其所处的位置，以及在任何时候发生了什么。

在设计中，用户将鼠标放到任意一个口红色号上我们都将立即给予视觉反馈，详细数据也根据用户的操作实时变化。确保用户得到的反馈是即时的，能够感知的。

图3.1 口红信息可视化程序-初始状态

3.1.2突出视觉焦点

除了动态反馈，通过视觉效果突出焦点是在构建了合理的视觉层次结构的基础上，可以用于信息可视化之中的设计方法。可以将信息层级通过视觉区分，也可用于引导用户的注意力引向可视化中设计中需要被用户了解到的重要信息，在数据过多的情况下可以有效的防止信息过载导致用户不知道应该获取哪些信息。通过使用视觉突出重要的数据或信息而压制其它重要程度较低细节，可以使我们的设计更清晰，更容易理解。

通过色彩突出：由于人们的视觉对于色彩的感知最为敏感，且色彩在设计之中是非常能够影响观者情感的元素，所以色彩是实现良好的信息可视化的关键。我们可以使用高明度、高饱和度的颜色来突出关键数据点，并应用低饱和度和带有一定的透明度的色彩将不太重要的信息融合到背景中。

图3.2 口红信息可视化程序-加权状态

通过对比突出：是指通过强弱的对比来区分不同视觉层级的手段，常见的表现形式有物理大小、虚实关系、边框粗细、材质等，能够以简单的形式突显主体物。

好的视觉可视层次通过预先处理页面，用一种我们能快速理解的方式对页面的内容进行组织和区分优先级^[2]。在口红颜色的展示上，设计使用了三个层级，主要使用透明度和大小来控制视觉显著性。用户鼠标悬停的色号为最高级视觉层次，体积最大且高亮显示；与选中色号同系列的其它色号为第二级视觉层次，高亮显示；其他与操作无关的色号用高透明度，最小体积显示；以此区分各色号之间的关系。

图3.3 口红信息可视化程序-悬停状态

3.2页面技术实现

3.2.1 背景渲染及色块定位

获取口红每个色号的hsl值，与数字最大与最小HSL值作对比，得到关于色相和明度的区间：

minHue: minHue - 2,

maxHue: maxHue 2,

minLight: Math.max(minLight -10, 0),

maxLight: Math.min(maxLight 5, 100)

以表达式

var light = (height - y) / height * (minMax.maxLight - minMax.minLight) minMax.minLight;

var hue=x/width*(minMax.maxHue-minMax.minHue) minMax.minHue;

确定色相和明度与xy轴的关系。口红各个色号根据颜色不同分布在不同的区域。

图3.4 HSL值坐标

3.2.2 页面主体及功能

整体页面纵向分为三层，通过z-index设置。散花背景设置为-1，即在最底层，色块设置为0层，信息框与功能按键设置为1，即在最上层。使用CSS对页面进行布局，对头部信息栏进行fixed定位。对主要信息框与功能按键区进行absolute定位。使用zRender类库进行色块的数据驱动以及类Dom事件的设计。通过Ajxa加载数据文件，将色块的品牌、色号、价格、颜色、销量等信息与色块绑定在一起，对不同系列的口红色号信息进行分组处理。通过hover事件处理，实现鼠标移动到哪个色块，主要信息框显示该色块具体信息，以及显示同系列的其他色块。

3.2.3 其他功能模块

通过功能模块的价格与销量按键的点击事件触发zRender形成的色块半径发生改变，其半径大小随销量变化规则为： r: lipstickData[i].num/1000*5。（lipstickData[i]为色块绑定的信息集，num为销量，r为半径）。其半径大小随价格变化规则为： r: lipstickData[i].price/100*5（price为价格）。

消费倾向与口红系列图谱，采用了bootstrap前端框架实现按钮点击，出现一个模态框的设计。主要内容显示则采用了E-chars实现具体的数据可视化与数据动态化显示。消费倾向中，具体信息有对口红业务线消费的偏好度以及线上口红品牌综合指数，分别采用了交错正负轴标签，明确地表示偏好度的减弱与提升和柱状图对比显示口红品牌的受欢迎指数。口红系列图谱采用极坐标系下的堆叠柱状图，可以非常明确地显示出所有口红系列的口红分布，另外可以通过点击相应的系列区域，具体显示该系列的所有口红色号。

图3-4 其他功能模块

第4章 结语

信息可视化旨在帮助我们理解数据。它可用于探索数据之间的关系，确认我们对数据持有的观点或以易于理解的方式解释数据。它也可能用于正确或错误地帮助说服用户使用数据。随着在各个领域中我们可用的数据量呈指数增长，信息可视化作为一种在工作和学术中的技能变得越来越重要。参考文献

1. RobertSpence.信息可视化交互设计[M]. 陈雅茜.北京：机械工业出版社，2012.1：3-4.
2. Johnson,J.认知与设计：理解UI设计准则[M].张一宁.北京：人民邮电出版社,2011.9:11-12.
3. 朱诗生,张惠珍.人机交互软件界面设计[J].信息技术,2009,33(05):36-39.
4. Steve Krug. 点石成金:访客至上的web和移动可用性设计秘笈[M]. 蒋芳.北京：机械工业出版社，2019.1：24-25.
5. 刘佩芳. 探析信息可视化的设计要素及设计方法[J]. 工业设计,2020(03):103-104.

致 谢