SCI论文（www.lunwensci.com）
摘要：以情感需求及情感化设计理论为基础， 对儿童网站界面视觉进行研究， 构建了儿童网站界面视觉情感需求模型， 进一步提 出统一的元素既视感 、 留白的视觉简洁化及直观的视觉反馈力等有效视觉设计策略; 结合国外优秀儿童网站界面视觉设计案例， 分析策略的有效性， 并通过构建基于皮电信号的评价实验对案例进行分析和验证 。该策略以儿童感知需求为视角， 对照多个相应 的情感需求及反馈， 可以为儿童网站界面及视觉的情感化设计提供参考和借鉴， 力求儿童使用者可以更好地获取信息与得到充足 的情感体验。
关键词 ：情感设计,网站界面视觉,儿童,设计策略,皮电测量
Strategic Research of Emotional Design and Electrodermal Measurement for Children’s Website Interface Visual Design
Xie Li， Shi Fengshuo， Kang Xiaoguan， Wang Yuqing， Guo Jianwen
(School of Mechanical Engineering, Dongguan Institute of Technology, Dongguan, Guangdong 523808. China)
Abstract: Based on emotional needs and emotional design theory, the visual needs of children′s website interfaces is investigated, a visual
emotional needs model for children′s website interfaces is constructed, and effective visual design strategies such as unified visual elements,
visual simplification of blank spaces and intuitive visual feedback are proposed . The effectiveness of the strategy are analyzed based on
excellent foreign children′s website interface visual design cases, and the case is analyzed and validated by constructing evaluation
experiments based on skin electrical signals. The strategy takes the perspective of children′s perceived needs and compares multiple
corresponding emotional needs and feedback, which can provide reference and inspiration for the emotional design of children′s website
interface and visual design, striving for better access to information and sufficient emotional experience for children′s users . Key words: emotional design; website interface visual; children; design strategy; electrodermal measurement
引言
产品情感设计[ 1] 强调以图形 、色彩 、材料为基点， 进行个性化设计， 让用户在欣赏和使用产品的过程中进 行更高层次的联想， 实现情感共鸣， 最终使用户获得精 神上的愉悦和情感上的满足 。情感化设计需要解决的一 个主要问题是如何客观地对设计策略进行测量[2] 。测量 的手段有心理和生理测量 。心理测量[3]包括语意差异法、 口语报告法 、PAD 情感测量法 、SAM 自我评估模型等; 生理测量[4]要测量情感诱发的血压 、眼动 、心跳 、脑电、 面部表情等生理参数 。心理测量适合测量多种情感类型， 但是被试较难准确表达出瞬间的情感状态， 准确度受被 试个体差异的影响较大[5] 。生理测量精度高， 容易捕捉 情感的变化， 得到越来越多的重视[6] 。皮肤电反应[7]是最 敏感的情绪反馈之一， 其与情绪 、唤醒度注意力等密切 相关 。皮电信号代表机体受到刺激时皮肤电传导的变化，
因其稳定性高测量简便 、灵敏度高等优势， 成为反映个体交感神经兴奋性变化的最有效 、最敏感的生理参数 之一。
近年来， 针对儿童的网站的视觉设计得到越来越多 的关注[8] 。然而网站视觉设计常规情感需求主要表现在 基于成年人角度的情感需求方面， 如社交的渴望 、个性 化的追求 、 自我印象的管理 、美好愿望的期待[9]， 对于 儿童网站界面视觉的情感需求， 缺乏深入的研究。
本文以情感需求及情感化设计理论为基础， 构建了 儿童网站界面视觉情感需求模型， 进一步提出统一的元 素既视感 、留白的视觉简洁化及直观的视觉反馈力等有 效视觉设计策略 。针对设计策略验证的问题， 构建基于 皮电信号的评价实验对案例进行分析和验证。
1 儿童网站界面视觉设计策略
1.1 儿童网站界面视觉设计情感需求模型
儿童网站界面视觉设计需要考虑目的性 、交互性和 多样性 3 个特征 。 目的性是指界面视觉设计中的各元素面对使用者儿童的情感交流目的和情感主诉性; 交互性 指的是对于儿童的互动的过程应该是有吸引力的 、惊奇 的 、有趣的 、有回馈的甚至是情绪化的; 多样性指的是 由于目的不同 、交互方式的差异， 选择情感表达形式充 满着丰富的可能性结合不同的交互体验， 传达不同的情 感诉求， 激发使用者不同的情感体验。
结合马斯洛需求原理[ 10]， 分解儿童网站界面视觉中 儿童使用者的情感需求， 形成对应需求模型如图 1 所示 。 模型从最基本的生理需求 、点击后自然反馈的生理需求 ， 到避免其他干扰的情感安全需求， 再到寻找熟悉“气味” 的爱的归属 、实现一定程度的有效反馈 、达成对行动参 与性的尊重， 最高阶的情感需求莫过于实现自己创造力 的行为介入。诺曼情感化层次理论[ 11]认为人类的多重行为属性是 由大脑的不同水平引起， 每一水平都在人类的整体机能 中发挥不同的作用， 从设计的角度， 每一层都需要考虑 不同的设计风格 。从诺曼的理论体系中推演， 本文建立 基于诺曼情感化三层次的儿童网站界面视觉情感需求模 型， 如图 2 所示。
( 1 ) 本能层面 。人在观察物体时， 会通过感官快速 识别一些基本形状， 并以此认知物体， 这样的基本形状 称为几何离子[ 12] 。从此角度， 基于儿童对象， 如何有效 地形成情感反馈， 则需要相应简洁的视觉图形以完成信 息的本能表达， 反之， 过多的信息则会让大脑的处理速 度减慢。
( 2 ) 行为层 。面对网站的行为参与性， 则更多地体 现在交互的反馈层面， 交互是因为有了“动作”和相应 的“反馈”才形成了一个完整的交互行为[ 13] 。 网站界面 交互体现于点击后的反馈程度 。基于儿童使用者， 交互 要更直接， 形成有效的“成就”动机。
( 3 ) 反思层， 对于儿童来说， 通过强化简洁元素， 以及元素类别的一致性， 让元素得到儿童进一步的理解与领悟， 形成对事物的最终印象; 与记忆关联的反思水 平可以有效地让儿童产生适当的依恋与信息的回忆， 从而达到信息的巩固 。结合儿童网站定位， 寻求界面 视觉设计中的 “统一”元素特征， 则可形成有效的反 思作用 。
结合上述的两个模型， 本文提出儿童网站界面视觉 情感需求模型如图 3 所示， 为情感化设计策略的分析提 供基础。
1.2 儿童网站界面视觉情感化设计策略分析
网站界面视觉元素主要以图形 、色彩 、文字 、交互 方式的方式呈现 。为了更好地展开网站设计元素分析， 以下将结合图 4 所示的 3 个世界优秀儿童网站界面视觉设 计， 来说明各类元素特征与儿童情感关联的设计范式 。3 个网站的界面儿童网站界面案例视觉元素分析如表 1 所 示， 通过分析得出儿童网站界面视觉中情感化设计策略 推导表如图 5 所示， 说明如下。
网站界面视觉元素主要以图形 、色彩 、文字 、交互 方式的方式呈现 。为了更好地展开网站设计元素分析， 以下将结合图 4 所示的 3 个世界优秀儿童网站界面视觉设 计， 来说明各类元素特征与儿童情感关联的设计范式。
( 1 ) 采用统一的元素既视感 。通过将视觉元素有效 地统一， 来增强视觉力 。面对儿童使用者， 常见的视觉 元素简化为图形 、色彩 、文字 、交互方式， 结合一定的 版式， 将这些视觉元素有效地整合， 达成统一的元素既 视感 。针对儿童用户， 应将其注意力引导至最重要的地 方 。在界面里每一个元素的尺寸 、颜色 、位置等， 都应 该为其注意力目标统一方向 。从儿童情感需求中隐藏的 安全需求里， 归纳出的避免不必要的视觉干扰， 包括统 一元素 、层次清晰， 充分保持情感化设计理论中本能层 体现出的关于基本元素识别理论 。明确且清晰的层级关 系对降低儿童使用者对于界面视觉的复杂性起到重要作 用 。如 ABCYA 网站界面， 所有功能按键统一为圆形特征， 用明显的尺寸层级关系突出功能上的区别加以引导。 视觉冲击力强， 增强儿童使用者本能对外形基本元素识 别的有效性， 达成情感本能层的轻松感， 信息明确， 满 足避免多余干扰的安全情感需求。
( 2 ) 采用留白的视觉简洁化 。在视觉统一的基础上， 进一步保持界面视觉的简洁， 留白的处理， 整合相似的 功能， 舍弃零碎的视觉元素， 可以使儿童使用者快速识 别需求元素， 其中也包括减少不必要的线框与勾边， 减 少不必要的注意引导等 。儿童网站界面视觉设计， 除了 尽可能减少会分散儿童注意力的元素外， 保持简洁且有 意义的元素是提升视觉力的重要途径 。如 ABCYA 网站界 面用相当于总面积一半的空间留白来突出圆形功能按键。 又如 E-Learningforkids 网站界面大面积白色背景烘托出3 个主题区域， 信息明确， 增强儿童使用者行为乐趣与效 率， 达成情感行为层的愉悦感， 满足尊重需求。
( 3 ) 采用直观的视觉反馈力 。从儿童情感的高层次 需求中不难看出， 儿童使用者有着比成年人更大的好奇 心以及更强的“喜新厌旧”的情绪， 如何更好地突出儿 童网站界面视觉中的视觉反馈 、有效强化儿童使用者依 赖性， 是众多网站考量的重点; 在儿童使用者众多情感 需求中， 有效实现行为的反馈， 从而达成需求原理中尊 重感的情感反馈， 更多地实现情感化理论中强调的对行 为的反思， 提高后续再次使用的主动性， 也是必要的考 量 。如 Pbskids 网站界面， 通过背景的微动效吸引儿童的 好奇及行为的主动参与性; 而弱对比的背景色彩， 则 需要色彩对比强的点击选择的功能按键; 当点击区域 面积较大时， 儿童使用者在微动效的体验中会不经意 点击到功能键， 从而带来进一步的情感体验乐趣 。通 过一系列如微小动效 、强弱色彩 、增大区域等多重体验 行为， 增强儿童使用者行为乐趣与效率， 进而强化主动 认知， 达成情感反思层的记忆性与满意度， 并满足创新 创造力需求。
2 皮电信号实验验证
2.1 实验设置
为了验证上述设计策略， 本文采用皮电信号开展实 验验证 。实验招募 3 名 10 岁的儿童 ( 2 名男生， 1 名女生) 在实验室按照单人单次进行， 不受外界干扰， 所有 被试者均收到关于实验内容和注意事项的书面和口头说 明 。实验采用某 ErgoLAB 生理可穿戴设备进行皮电数据 采集， 采用该 ErgoLAB 多模态数据分析平台中的 EDA 皮 肤电反应分析模块进行数据分析 。将上述的 3 个网站作 为刺激源， 采集受试者的皮电， 具体的实验流程如图 6 所示。
2.2 实验数据处理与分析
对采集到被试的皮电信号进行高斯平滑降噪 (窗口 大小为 5) +低通滤波 (截止频率为 5 Hz ) 处理 。皮电信 号 ( EDA ) 由皮肤电导 ( SC )、 渐变信号 ( Tonic Data ) 和突变信号 (Phasic Data) 3 个指标组成[ 14]， 选取皮肤电 导 ( SC ) 和突变信号 (Phasic Data) 作为特征对降噪后 的数据进行提取分析， 3 个网站界面的 SC 、Phasic Data 皮电值 ( μs ) 随时间变化的波形如图 7 所示 。
其中皮肤 电导 ( SC ) 与汗液分泌有关， 代表了交感神经的活跃程 度; 突变信号 (Phasic Data) 与情绪唤醒水平有关。由于个体的皮电基准值差异较大且同一人在不同时 间状态下也会有很大差异， 要准确研究皮电信号与情感 之间的关系， 要进行去除个体差异， 本实验在个体平均 化后利用基线数据校正对数据进行处理， 计算如式 ( 1 ) 所示：
表 2 为各个指标基线校正后 3 个网站界面片段的指标 对比 。 由表可知， ABCYA 和 Pbskids 网站界面在情绪唤 醒中均都能够给予儿童一定的正向情绪感受和吸引力， 此外， 皮肤电导高于基线 (平静状态)， 交感神经活跃，这与界面中采用统一元素 、直观视觉反馈力是分不开的; ABCYA 和 Pbskids 网站界面相较于 E-Learningkids 的情绪 唤醒水平更高， 由此可看出在元素造型 、背景微动效等 更能吸引儿童的关注和激发儿童的兴趣和认知， 故在设 计的过程中， 在保证视觉简洁和功能突出的前提下， 应 适当的加入一些如微小动效 、强弱色彩 、增大区域等多 重体验行为， 进而增强儿童的行为乐趣与效率， 进而强 化主动认知; E-Learningkids 的皮肤电导 ( SC ) 较低， 交感神经不活跃， 情绪唤醒水平也低于基线 (平静状 态)， 表明大面积的留白虽然突出了功能主题 、增强了儿 童使用者的行为乐趣与效率 、达成了情感行为层的愉悦 感， 但是无法给予儿童更加深刻的情绪感受。表 3 为平均后的 3 个网站界面所引起被试者的最大峰 值和次数 。ABCYA 和 Pbskids 的皮电信号的峰值均大于 E-Learningkids， 表明 ABCYA 和 Pbskids 对儿童的吸引程 度和情绪唤醒度相对较高; ABCYA 的峰值低于 Pbskids， 表明动效相对于颜色来说引起的唤醒程度更高; ABCYA 的峰值发生次数高于 Pbskids， 表明颜色相对于动效来说 引起的情绪持久度更高。综上所述， 通过皮电信号验证分析经典的网站界面 中的情感化设计， 验证出了上节所述的儿童网站界面视 觉中情感化设计策略的有效性： 统一元素 、留白视觉简 洁化 、直观视觉反馈力策略能够给予和唤醒儿童正向的 情绪感受 。但在进行网站界面的情感化设计中， 应明确 使用对象群体是儿童， 所以在保证界面简洁 、功能突出、元素统一的前提下， 要尽可能地丰富界面的色彩 、微动 效等， 减少大面积的留白， 同时要实现色彩和微动效的 有机结合， 综合利用色彩所带来的情绪持久度 、微动效 所带来的情绪唤醒度， 从而强化视觉反馈和儿童使用者 的依赖性， 带来更加愉悦的情绪感受。
此次实验因考虑到儿童的配合度和耐心度， 故在实 验过程中把基线采集 (平静状态) 的时长缩减至 30 s 以 提升实验的舒适度， 此外， 儿童在参与实验中对实验的 过程充满期待， 儿童的情绪较为激动， 致使在利用基线 数据进行校正的过程中出现了异常值 (负值) 和指标浮 动较小， 这是由被试对象的特殊性所决定的; 同时此次 实验的样本量较小， 这些是此次实验的不足。
3 结束语
情感设计是目前产品设计领域关注的热点 。皮电作 为一种有效测量情感的工具， 能够为情感设计提供支持。 本文总结提出针对儿童情感需求的网页界面视觉设计方 案， 力求儿童使用者更好的获取信息并得到足够的情感 体验， 通过采用统一的元素既视感 、留白的视觉简洁化 及直观的视觉反馈力等有效设计策略， 在满足基础信息 传输基础上， 达成视觉反馈及情感体验， 借助皮电测试 验证了所采用的策略 。本文的研究成果对儿童网页界面 视觉设计的进一步研究具有积极意义。
参考文献：
[ 1] 方琳 . 浅析情感设计在产品设计中的应用[J]. 参花(上),2019 ( 11): 135.
[2] 王文佳 . 以情感化为基础的用户体验测量体系[J]. 中国质量, 2021(9):57-60.
[3] 初胜男 . 基于情感测量技术的真空包装机概念设计方法研究 [D]. 天津:天津科技大学,2021.
[4] 李嘉琳 . 基于感性工学和生理测量技术的汽车内饰 CMF 设计 与评价研究[D]. 广州:广东工业大学,2022.
[5] 谢伟,辛向阳,胡伟锋 . 产品设计中用户的内隐测量方法研究 现状[J]. 机械设计,2015.32(2): 105- 110.
[6] 高慧渊 . 基于多模态生理特征分析的下肢康复理疗仪设计 [D]. 秦皇岛:燕山大学,2021.
[7] 柳沙, 彭鑫玉, 张宝月 . 皮肤电信号在产品外观偏好评价中的 应用研究[J]. 包装工程,2016.37(24):22-27.
[8] 靳超 . 基于儿童认知心理学的儿童网站视觉设计研究[J]. 新闻 研究导刊,2019. 10( 11):77-79.
[9] 赵倩 . 基于心理认知下的儿童网站设计研究[D]. 株洲:湖南工 业大学,2018.
[ 10] 观晓雷 . 基于马斯洛需求层次理论的产品需求递进趋势初 探[J]. 工业设计,2018(9):41-43.
[ 11] 刘媛 . 基于诺曼情感化理论设计方法在手绘插画中的应用 研究[D]. 沈阳:沈阳师范大学,2019.
[ 13] 王静 ,王峰 . 从交互视角探讨绘本 APP 的设计[J]. 包装工程 , 2016( 1): 138- 142.
[ 14] 韩颖,董玉琦,毕景刚 . 学习分析中情绪的生理数据表征—— 皮肤电反应的应用前瞻[J]. 现代教育技术,2018.28( 10): 12- 19.
关注SCI论文创作发表，寻求SCI论文修改润色、SCI论文代发表等服务支撑，请锁定SCI论文网！
文章出自SCI论文网转载请注明出处：https://www.lunwensci.com/ligonglunwen/63939.html
