基于心流理论的孕期运动App色彩体验界面设计研究.pdf

14应用总第 445 期|2023 年第 8 期基于心流理论的孕期运动 App 色彩体验界面设计研究Research on the Design of the Colour Experience Interface of Pregnancy Exercise App Based on the Heart Flow Theory赵文霞/南京理工大学设计艺术与传媒学院Zhao Wenxia/School of Design,Art and Media,Nanjing University of Science&Technology摘 要：文章首先论述了心流理论的基本概念，以及色彩在沉浸式体验中发挥的作用并结合交互界面的实例加以说明。其次，总结出界面设计中沉浸式色彩体验的应用原则，从中发现迎合目标用户色彩偏好、具有统一性、平衡性的界面奠定了用户沉浸式体验的基础。此应用原则为设计实践提供可靠依据，旨在为孕妇提供更愉悦的运动体验，同时也为孕妇的身心健康发展做出了积极探索。关键词：心流理论；色彩；界面设计Abstract:The article firstly discusses the basic concepts of mind flow theory and the role of colour in immersive experiences and illustrates them with examples of interactive interfaces.Secondly,the principles of applying immersive colour experiences in interface design are summarised,from which it is found that a uniform and balanced interface that caters to the colour preferences of the target user provides the basis for a user immersive experience.This application principle provides a reliable basis for design practice and aims to provide a more enjoyable exercise experience for pregnant women,while also making a positive exploration of their physical and mental health development.Keywords:Heart flow theory;colour;interface design0 引言色彩是界面设计的重要组成部分，不仅具有美化、装饰的作用，同时还能影响用户的心理和生理。运动作为非药物性的生活方式干预，因其低成本、易实施等特点，已经成为孕期保健的重要组成部分。但目前市场上针对孕妇的健身应用程序缺乏对孕期运动的针对性考量和全方位思考，难以满足孕妇的生理需求及情感体验。因此，通过色彩的运用让孕妇使用 App 时获得愉悦的体验，对改善孕妇的健康和提高生活品质具有重要意义。1 心流理论概述心流理论是由美国心理学家米哈里齐克森米哈里（Mihaly Csikszentmihalyi）在 1975 年提出的，“心流”最初是由“FLOW”1直译而来。它是指个体对某一活动表现出浓厚的兴趣，并且完全沉浸在某项活动中的一种情绪体验或状态。在这种状态下，人们有时甚至会失去时空概念和对周围环境的感知2，获得一种深层沉浸体验，能够感受到高度的充实感和愉悦感并且完全被所做的事深深吸引，丧失其他不相关的知觉，自我意识开始逐渐消失，感觉时间过得特别快或者特别慢，给人带来时间的扭曲感。Csikszentmihalyi 将产生心流的表现总结为 9 个特征：明确清晰的目标、技能与挑战的平衡、准确而及时的反馈、行为与意识的融合、注意力高度集中、潜在的控制感、自我意识的丧失、时间扭曲感和发自内心的参与感。Novak 等人又将其归纳为心流产生的条件、体验、结果三类因素（表 1）。2 色彩在心流体验中发挥的作用2.1 传达准确而及时的反馈反馈的表现形式包含视觉反馈、听觉反馈、触觉反馈和嗅觉反馈等3，感官反馈的叠加可加强用户感知，提升控制感4。色彩是通过视觉感知而获取的视觉印象，具有从精神到心理上的广泛象征意义，相同的颜色在不同的国家有着不同的文化象征意义。红色在中国代表着吉祥、喜庆和幸福，在农历新年，人们会张灯结彩表达对来年的期盼；在美国文化里，红色往往与暴力、血腥、赤字、警示相联系。它是一种多功能的颜色，具有积极与消极的含义。因为红色的光频率最低、波长最长，所以其衍射能力最强，能够给人带来较强的视觉冲击力。因此，世界各国都用红色来表示交通信号灯和禁止停车的标志。红色通常与警告或重要的内容相关，例如在错误状态下红色与叉形图标使用，看到红色就表示出现了问题；在电子商务的应用程序中，“从购物车中删除”的操作也会结合叉形图标，或者带红色背景的删除文字表示用户正在执行无法恢复的操作（图 1）。红色通常也与爱相联系，例如“点赞”之类的情感表达中会使用红色（图 2）。在界面设计中，色彩的合理运用可以准确而及时地传达图标代表的赵文霞，硕士在读，南京理工大学设计艺术与传媒学院，研究方向：视觉传达。表1 心流体验的特征条件因素（事前阶段）体验因素（经验阶段）结果因素（效果阶段）1.明确清晰的目标2.技能与挑战的平衡3.准确而及时的反馈4.行为与意识的融合5.注意力高度集中6.潜在的控制感7.自我意识的丧失8.时间扭曲感9.发自内心的参与感15应用总第 445 期|2023 年第 8 期内涵以及用户操作行为带来的结果。2.2 划分功能模块，构建简洁清晰的界面合理地运用颜色划分功能模块，完善信息架构，提高认知效率。简洁清晰的界面则能够减少干扰因素，让用户在使用的过程中更容易理解、记忆应用程序的功能和操作方式。但是“简洁”并不意味着减少或者省略，而是对复杂的信息进行整合，将信息呈现的方式简单化、程序化，尽量不要使用复杂的设计元素，可以通过色彩来强调功能模块的划分吸引用户的注意力。利用颜色区分导航栏、背景、图标可以使用户更容易理解界面之间的层级关系，引导用户更快地进入心流状态。以京东 App为例，在状态栏、导航栏、标签栏运用界面主题色进行模块分割，利用色彩的对比划分功能模块，使用户能够快速找到所需功能。2.3 引发用户情感共鸣，增强发自内心的参与感色彩能够以非语言的的方式传达信息、创造特定的情绪，有时甚至可以影响人们做出的决定。人们对颜色的感知是主观的，但受到历史文化、地域的影响，某些颜色的效果具有普遍意义。例如光谱中红色区域可以是以黄色为基础的颜色，这些被称为暖色，暖色代表着舒适、温暖到敌意和愤怒的各种情绪；同时红色也可以以蓝色为基础，如酒红色、覆盆子色，这些被称为冷色，具有平静的含义，可以让人感受到严肃、冷漠。App 界面的色彩运用从类别上主要分为主色、辅助色和点睛色，其中主色决定了 App 的界面设计风格。根据受众选择特定的颜色，使其与情感联系起来，对于大多数人，蓝色表现出冷静与理智，代表着信任、安全和可靠，例如支付宝选用蓝色不仅让人联想到科技与创新，同时也能带给用户安全感。因此，通过界面颜色的视觉感受影响用户的情绪，与用户产生情感共鸣，能够增强用户的心流体验。3 沉浸式色彩体验应用原则3.1 迎合目标用户色彩是设计中最具有表现力的要素之一，它通过视觉能够引起用户一系列的生理和心理感受。色彩学把颜色分为暖色调、冷色调和中性色调。暖色系的色彩被认为会提高心跳次数、增强欲望和食欲，冷色系则有着相反的作用。不同年龄、性别的用户对色彩的喜好都存在差异，需要对用户的偏好进行分析，并且分析色彩给用户带来的视觉感受以及情绪变化。同时要选择与 App 调性相同，能够引导相应情感的颜色，例如美团 App（图 3）的黄色代表着热情、温暖，象征着美团始终坚守“帮助大家吃得更好，生活更好”的使命。考虑到女性在孕期需要放松身心，色彩上，可以选择柔和、舒适的颜色。粉色经常用来体现女性的温柔、浪漫、甜美的特性，例如美柚 App（图 4）用粉色来凸显女性化的特点。3.2 统一性统一的颜色风格能加强用户对应用程序的记忆程度，体验感更加舒适和自然。界面设计中需要确保相同层级、相同功能的色彩元素保持统一，确定好主题色、辅助色、功能状态色后需要按照规范进行使用，确保界面在视觉层次、设计风格的统一性。大多数情况下，在设计的过程中可以利用界面主题色选用不同明度、纯度的小色块点缀界面，提升界面整体的协调性。用户可以通过色块对不同的模块进行区分，可以降低用户记忆学习的认知负荷，改善用户体验。但统一并不意味着单一，多种色相颜色配色的 Arngren 网站界面（图5）和统一色调的站酷网站界面（图 6）的对比，可以看到在统一颜色下的设计画面更为和谐，让人感到整洁、舒适。其次，统一性不仅仅体现在色相上的协调，更加表现在色彩语意与产品内涵的贴合度。例如网易云音乐以红色为主导色，红色代表着热烈、鲜活和向上，与网易云音乐“有温度、有情感的音乐社区”形象不谋而合。因此，在使用多种颜色的时候除了进行色调的统一，还需要考虑到产品的内容与核心。3.3 平衡性平衡性是指在界面设计中有秩序的色彩搭配。一般情况下，同类色彩的搭配能够很好地实现色彩的调和，而高纯度的互补色或对比色，例如红绿、蓝橙、黄紫，这类颜色适合在比较张扬需要着重突出的场景下使用。由于过于强烈的视觉刺激会使用户产生视觉疲劳，因此需要控制使用面积，尽量在核心部分使用。另一方面是冷色与暖色关系的平衡，通过冷暖对比使界面不显单调。色彩的布局可以通过深色与浅色之间的平衡区分产品的内容主次关系，通过色彩的饱和度、明度、对比度之间的差异形成对比，用户的视觉中心点会自觉地偏向颜色鲜艳或者较深的部分。图1 京东网页 图2 Twitter点赞 图3 美团 图4 美柚 图5 Arngren网站 图6 站酷图1图3图2图4图5图616应用总第 445 期|2023 年第 8 期4 App 中主要模块的界面设计App 设计前期研究采用了访谈法和问卷法获取用户在孕期时的健康、运动状况和建议信息。调研共有 65 人参与了问卷填写，有效问卷填写 65 份。通过对运动需求和建议的调研和数据分析，得出结论：大部分孕妈在孕期会有身体不适的状况，并且会选择通过运动来辅助缓解身体的不适，但同时又担心运动会对胎儿产生不良的影响。4.1 用户模型及用户旅程图建立具有代表性的用户模型，赋予其基本的信息及人物性格，可以更好地了解用户的功能需求。孕妇在不同的阶段生理及心理的状态都有所不同，基于以用户为中心的设计理念，对孕妇的心理特征、特殊需求、活动轨迹进行研究，从而挖掘出孕期运动 App 的设计机会点。综合前期的调研结果，将孕妇的行为按照时间维度归纳为一条完整的运动行为路线，发现孕妇的功能需求及情感需求点，同时梳理出用户在运动过程中的机会点，最终以可视化的图表展现（图 8）。图8 用户旅程图4.2 界面色彩设计与框架结构 4.2.1 界面色彩色彩是能引起用户心理上共同的审美愉悦的形式要素。用户在使用 App 时，颜色在留给用户第一印象的同时，还能够展现产品的内涵、品质、概念等。由于生理、心理、年龄、文化等差异，不同人群对于色彩的偏好有所不同，需要科学地认知受众群体对于色彩的需求，为他们提供更加人性化的设计。相对于男性而言，女性更喜欢柔和的色调，例如粉色、黄绿等带有温柔意向的颜色，特别是对于处在孕产分娩、生理期等特殊时期的女性，饱和度低、明度高的颜色给视觉、心理带来的刺激相对较小，更受到女性的偏爱。因此，在孕期运动 App 的界面设计中选择了以绿色为主色调，紫色、蓝色为辅助色。绿色属于中性色调，从视觉角度来看，绿色是最宁静、最放松的颜色之一，代表着健康、自然、希望，象征着起点与成长，与女性孕育生命的意义不谋而合。4.2.2 框架结构孕期运动 App 分为“首页、广场、消息、我的”四个主要模块（图 9），每个模块的主要功能如下。图9 界面设计首页：每日推荐、搜索栏、直播课、塑身课、减脂课等与前期调研目标相符合的课程推荐；广场：经验交流、运动圈打卡；消息：接受相关的推送、获取好友的消息及点赞回复；我的：用户的信息设置、身体状态的监测、奖励的获取、重新设置运动目标。综上，色彩上，使用柔和、舒适的颜色，通过简单和直观的设计，让用户可以轻松地找到所需的信息和功能。功能上，在进入应用程序后会对用户的身体状况和运动目标进行调研，后续根据孕妇的孕期、有无疾病史、目标等要素推荐相关课程，确保挑战与技能的平衡；其次，在视频跟练的过程中可以调整自己的进度，并且依靠传感设备对身体状况进行监测，确保运动的安全性。在应用程序的设置中，用户可以灵活地设置自己的运动计划，自由地调整计划的时间、内容和强度，从而更加方便地适应用户的生活和身体状况；最后，在完成运动计划后，可以获取经验，通过奖励机制来激励用户，使用户感受到成就感，增强用户活跃度。5 结语随着全民健身理念的发展，运动类移动应用程序也迎来了新的发展机遇，但同时也面临着同质化、用户体验感不佳的困境。文章在心流理论的指导下，探究孕期运动类 App 沉浸式色彩体验的方法，为设计实践提供了可靠依据，证明心流理论与孕期运动应用程序结合的重要意义。希望今后在孕妇运动的问题上，能够给孕妇提供实质性的帮助，为孕妇提供更加愉悦的运动体验，提高孕妇群体的生活质量。6 参考文献1邓鹏.心流:体验生命的潜能和乐趣J.远程教育杂志,2006(03):74-78.DOI:10.15881/33-1304/g4.2006.03.020.2 姜婷婷,陈佩龙,许艳闰.国外心流理论应用研究进展 J.信息资源管理学报,2021,11(05):4-16.DOI:10.13365/j.jirm.2021.05.004.3王林,蒋晓.反馈机制在移动互联网产品设计中的应用研究J.包装工程,2013,34(16):75-78.DOI:10.19554/ki.1001-3563.2013.16.020.4贺蔷锟,何人可.基于心流理论的移动学习应用交互设计研究J.包装工程,2018,39(04):188-192.DOI:10.19554/ki.1001-3563.2018.04.036.