- 主办单位:
- ISSN:
- 期刊分类:
- 出版周期:
- 投稿量:
- 浏览量:
相关文章
暂无数据
“树小懒”——助眠APP交互界面设计
"ShuXiaolan" —Sleep-Aid App Interactive Interface Design
引言
2024年公布的《中国睡眠研究报告》表明,我国存在睡眠质量问题的人群达到64%,平均每天仅能睡6.75个小时,这远远少于健康的睡眠时间建议值。如今睡眠问题已经变成社会上的“流行病”,引发的原因多种多样,互联网迅猛发展,一些人熬夜看剧,通宵玩游戏,沉溺在网络当中致使睡眠品质下降;同时,大城市的生活压力以及夜生活等也使得睡眠问题年轻化程度加深,睡眠障碍的人群不断增加。随着人们对睡眠质量方面问题的关注度越来越高,人们的睡眠健康意识慢慢苏醒,睡眠健康成为全民关注的话题,各种各样的睡眠类产品应运而生。人们对于睡眠质量和健康管理的需求趋向于高阶化、细致化,传统的线下改善睡眠的方式由于受空间、成本、便利等各方面因素的制约,已经不能满足人们的实际需要。在这种情况下,人们对提高睡眠质量的工具提出了更方便、更便宜的要求,线上睡眠产品的需求市场不断释放,助眠APP因其轻便、易操作、涵盖场景多等特点成为了很多人改善睡眠状况的第一选择。
目前市面上虽然出现了很多助眠APP的产品,但是整体的设计都还在摸索阶段,并且同质化严重,没有自己的品牌特征以及创新点。为了突破现状,本次项目研究希望从IP形象在助眠APP场景的使用以及用户需求出发,设计一款专注于情感陪伴与解压助眠的移动应用APP。让使用者更加轻松舒适的使用,同时能够有效的帮助到使用者睡眠,并且可以给助眠类APP的情感陪伴提供一些思路。
一、“树小懒”助眠APP交互界面设计概述
(一)国内设计现状
国内目前线上助眠市场处于不断发展时期,市面上也出现了一批被大量使用的口碑较好的APP产品,例如小睡眠、潮汐APP等。小睡眠APP建立起了完整的助眠内容体系,有上千种白噪音、睡前故事、ASMR等等不同的音频内容,而且可以实现多种声音叠加,受到了广大用户的青睐,用户可以根据自己的喜好,创作出自己专属的助眠音频,非常灵活。小睡眠APP的差异化在于,重视人群划分,母婴,学生,职场人这些不同人群可以定制专属的助眠课程,兼顾实用性与针对性。
潮汐APP的界面设计很素雅,采取极简风格,用大自然的颜色当作主色调,看上去契合睡觉前放松的心境,也减轻了用户的视觉疲累感。其最大的优势就是内容的细化以及场景化,希望把人带入到大自然当中去,从视觉上放松自己,让自己的情绪得到释放,帮助人们迅速地放松下来,减轻焦虑,并且在APP里没有多余的广告。
然而,线上助眠市场也有不太尽人意的地方。例如蜗牛睡眠APP,它的界面没有情感化的设计,界面风格比较理性冰冷,不能给使用者带来足够的感情陪伴和安慰,而且商业味道太浓,首页的广告轮播,会员推广以及电商版块都会干扰到人们的助眠需求。总体而言,市场中助眠类APP的产品仍然存在同质化严重,缺乏品牌辨识度等问题,怎样深挖品牌的独有特点,更新助眠APP界面设计理念和手段,就变成当下助眠APP产品研究发展的重要部分。
(二)国外设计现状
国外关于睡眠方面的相关研究开展时间比较早,因此助眠类APP产品的出现也比较成熟,而且市场上不断有新的产品推出,最具有代表性的助眠APP是Calm和Headspace:Calm突破了传统冥想助眠应用的单一性,把沉浸式助眠作为主要特点,独创了成人睡眠故事体系,并通过立体环绕声音频形成自己的内容壁垒;依靠极简自然化的界面设计减少视觉干扰,打造静谧舒适的使用氛围。
Headspace的核心竞争力在于拥有结构化课程体系,这是由正念冥想的大师创建的,所以它的课程是系统化的、标准化的,从新手到进阶都有明确的区分,适合零基础小白,降低了新手的门槛。界面设计简洁明了,暖色调搭配卡通动画,视觉治愈、操作直观,将抽象的正念概念可视化,增强了趣味性与用户理解力,且无广告干扰。
二、“树小懒”助眠APP交互界面设计说明
(一)设计过程简介
本次毕业设计是围绕着“树小懒”助眠APP的界面设计创作,在当前助眠需求日益高涨以及行业产品同质化严重的背景下,采用文献查阅、市场调查以及竞品深入体验三者结合的方式来梳理出助眠类APP界面设计的主要内容及行业现状。特别地,选取了“潮汐”“小睡眠”等助眠APP进行剖析,分别从界面布局、视觉风格、功能需求这三大方面展开拆解、分析,找出行业的现有问题,明确设计中可优化的地方。根据调研所得用户的审美喜好以及睡前的情感需求,着重于视觉要素吸引用户注意力、功能清晰实用,并且要凸显出“树懒”IP的独特之处,将其与界面设计紧密结合在一起,创造出具有功能性、情感性和独特性的界面设计方案,从而达到IP价值、助眠功效与视觉感受相融合的目的。
合理的信息架构能够更加清楚的展现出产品的核心价值,并且有助于提高用户对于产品的认知,促进用户对产品的操作。树小懒APP作为一款功能性产品,最主要的是缓解失眠的功能,因此在首页中展示“睡前舒缓”板块——听白噪音、睡眠故事;“沉浸助眠”——引导式冥想、呼吸助眠,搭配底部简洁柔和的导航栏,既清晰传递核心功能,又契合用户快速操作、轻松助眠的习惯。
(二)设计说明
1.“树小懒”助眠APP界面设计构思
设计构思阶段的调研表明,助眠类APP的用户需求大致可分为两类,一类是日常睡前助眠的刚需用户,其使用场景主要是睡前放松、解决入眠难题,核心诉求是有效的助眠体验,方便快捷;另一类是作为情绪舒缓、压力调适的辅助用户,这类人更多是在工作间隙或者遭遇焦虑情绪时才会用到,他们追求的是一种放松感受。18-40岁中青年人群是助眠类APP的主要消费群体和使用者,大部分都是年轻的群体,例如小睡眠、潮汐等APP以白噪音、冥想内容为基础,很好的迎合了年轻人的助眠需求,使得用户的数量得以迅速的增长。因此,树小懒APP的市场定位也侧重于年轻群体的需求,提取出树懒“慢、松弛、治愈”的核心特质,并融合自然疗愈与情感陪伴的设计理念,赋予了产品治愈的情绪价值与年轻化的品牌调性,不仅强化了产品的差异化与核心竞争力,更能精准触达目标用户的核心痛点。
充分挖掘树懒IP形象的情感陪伴优势,在产品设计时兼顾科学助眠的功能以及治愈系感受,这样既保证了产品的基本使用价值,又提升了品牌的辨识度和用户的忠诚度,让产品能够在同质化市场中突出重围。根据品牌调性和产品定位,继续落实视觉体系及IP形象的创造。本次IP采用拟人化风格进行打造,保留树懒的基本特点,形成基础形象之后,再搭配睡衣、睡帽等专属睡眠符号,从IP形象入手营造助眠的氛围感。色彩上采用低饱和冷粉色系,搭配柔和圆润的线条,减弱用户受到的视觉刺激强度,从视觉上直接体现出放松、舒缓、治愈的情绪价值,全方位突出该设计治愈助眠的核心定位。
根据树小懒APP的品牌调性,本设计色彩选择低饱和度、高柔和度的色调,形成舒缓、松弛的视觉体系。主色调主要采用淡紫色,淡粉色调,用冷色调的镇定作用来缓解用户的焦虑情绪,营造出放松的助眠氛围,辅助色则采用比主色更低调的灰紫色,点缀色采用暖黄色和浅蓝色,使用低对比度的暖色调点缀整个页面,给人一种温暖、治愈的感受,同时也起到一种平衡界面冷暖的效果,避免过于冷色调带来的疏离感。整体配色都处于低饱和度的范围之内,既符合助眠产品本身的视觉设计规律,又可以通过色彩心理学给予正向的心理暗示,贴近用户本身的需求,达到放松、治愈的效果,增强品牌的辨识度。
界面版式设计是信息框架搭建后进行界面各个元素的合理布局。本次树小懒APP的手机界面尺寸规范为iPhone 13pro,iPhone 13pro界面像素尺寸宽度为390px,高度为844px。
低保真原型是框架概念向具象设计过渡的重要阶段,利用简单的几何图形以及占位符搭建起大致的界面元素布局及交互流程,从而检验用户使用需求是否合理、功能信息层次是否清晰、操作路径是否顺畅。树小懒APP界面以助眠内容、放松引导、睡眠记录等功能模块为核心,完成主界面、主内容、主功能等主要部分的初步布局,为接下来高保真原型的视觉细化和交互完善打下了良好的基础。

2.“树小懒”助眠APP交互界面设计创意
IP形象是APP独有的标识与情感连接,在助眠APP中,它是其他产品所不能替代的核心竞争力。此设计把树小懒IP当作界面设计的关键焦点,贯穿全流程的视觉与交互表达。
并在平面形象的基础上,进一步建构3D效果,赋予IP更鲜活的表现力与场景适配性,为界面注入温暖治愈的情感温度。
基于IP基础上展开Logo设计,IP形象配有wink表情,给用户传达了温暖且舒缓的情绪价值,并且可以立刻让使用者明白树小懒APP的特点和区别之处。IP形象提升了品牌的记忆度,柔和的色彩加上IP的形象,还减轻了视觉上的冲击力,给使用者带来了放松的心理暗示,做到品牌可识别性和产品特征相融合。
在助眠APP界面的图标设计时,通过概括、归纳和隐喻将复杂抽象的信息通过熟悉的意象简单明了地表达出来,从而让用户在更短的时间内认知信息。树小懒APP的icon设计也运用这一表达方式,导航栏采用低饱和度色系,圆润的线条、柔和的造型也符合该产品的舒缓、放松的感觉,既美观又实用,便于用户观看和使用。“首页”图标以房子作为主体,表示了睡眠的场景,给人温馨、亲切的感受。“睡眠”图标的主体是月亮,暖黄色的主色调呼应了夜晚的感觉,直接传达出进入睡眠功能的含义。“社区”图标采用的是行星的形状,淡蓝色的主色调加上环形轨道,代表着内容的丰富以及相互联系,符合社区“分享、交流”的特点。“我的”图标以简约人形表示,可以很清楚地传达出个人中心的功能含义,也符合用户对个人页的理解。
关于功能位的设计依旧采用了低饱和度色系,和大体的风格相一致,又符合助眠产品放松的氛围,且以具象化的设计让功能易于被识别到,做到好看的实用性合一。“听白噪音”图标以流动的音符造型来代表音频播放功能;“每日冥想”图标运用线条去塑造打坐的人形,贴合冥想的姿势和放松的核心;“睡眠故事”图标以流星元素,对应睡前故事的陪伴感和温馨感;“沉浸专注”图标以耳机与声波为核心,突出沉浸式体验的特点;“小憩”图标以“Z”形睡眠符号,简单直接的传递出短暂休息的状态。
(三)作品的综合设计表达
树小懒APP界面设计是系统化的设计 work,并非简单的视觉元素堆叠,而是把品牌调性和用户的实际需求以及交互使用时的感受相互融合来完成整个界面的设计。在整个界面的设计当中,IP形象以及助眠的核心功能是整个界面设计的重点,既给产品赋予了温柔治愈的感情内核,也塑造出了产品的独特记忆点。本次设计与IP形象深度结合,打造了一个只属于本产品的视觉形象,跳出同类助眠APP大同小异的界面设计,从创意上打破了传统助眠类APP的固有思维。APP除了满足用户的助眠需求外,也在无形中传达了一种放松、舒缓的生活方式,这也是树小懒APP区别于其他同类产品的一大特点。
界面整体采用低饱和度色彩作为主色调,在此基础上结合IP形象在各种使用场景下的自然融入,打造出和谐统一的整体视觉效果,营造出更加沉浸的助眠 environment 氛围。整个设计过程融入了UI设计思路以及交互方式,对各个功能板块进行了重新梳理并加以创意整合,从而搭建起了一个既实用又美观且具有品牌辨识度的界面系统。这套设计能够帮助用户更加顺畅、方便地使用助眠相关的各种服务,并且通过IP自带的陪伴感可以缩短与用户的距离,在市场上更具竞争力。

三、“树小懒”助眠APP交互界面设计总结
(一)课题设计总结
本次课题主要是关于“树小懒”助眠APP界面与IP形象的融合。目前线上助眠市场是上行趋势,但还有部分同类型的产品存在着界面同质化严重、品牌调性不明、没有统一视觉语言等问题。所以从前期的调研、产品的定位,再到视觉设计、界面交互以及最后的落地,都进行了系统性的实践,最终完成了一套完整且贴合用户需求的APP界面设计与IP形象视觉体系。
在整个课题的过程中一直坚持理论与实际相结合的原则。前期经过文献查阅、产品调研以及用户问卷,研究了国内外市面上的主流产品案例,归纳出18-40岁的核心用户的主体需求 and 审美偏好,总结出“松弛、治愈、温暖、陪伴”这四个产品的关键词,确定了设计的方向。中期围绕IP形象展开,打造低饱和度的视觉系统,设计出了简约柔和的界面布局及交互逻辑,突出品牌的独特性和情感性。后期完成界面高保真原型,让IP形象与各种场景相结合,在登录页、首页、功能页等各种页面上都能自然而然地出现。
最后,在这个过程中对IP形象创作以及UI交互设计进行综合融汇与灵活应用,逐渐形成了以用户需求为导向、基于前期调研结果的思考方式,使APP的设计更为规范且易于落地。这次的研究可以为助眠类APP设计提供一些不同的想法,同时也为以后做项目积累了一些实践经验以及宝贵的体会。近几年助眠类APP的发展势头一直向好,一个好口碑的助眠产品不仅仅要重视基本的功能以及创意,更要注重实用性和情感上的抚慰价值。通过独特的界面视觉风格来迎合当下年轻人的心理需求,以达到让他们缓解自己的情绪压力、改善睡眠状态,获得身体 and 精神上的放松的目的。经过这次的课题,学会将IP形象设计、UI交互设计等知识融合在一起使用,并且养成了从用户的角度出发,根据调研结果来进行设计的习惯。
(二)设计能力总结
本次课题结束后,笔者的综合设计能力和整体创作思维都有很大的提高,可以同时兼顾创意和实用。在视觉方面,学会了情绪化的颜色搭配,运用低饱和度色系营造出舒缓、沉浸的氛围,来贴合助眠产品的感情基调。同时独立完成了专属IP形象的创作,并结合页面特点去设计各种场景化插图,增加了产品的感情陪伴感。在设计思维层面,慢慢养成了从用户角度出发的创作逻辑。依托市场调研、竞品分析以及用户数据归纳出品牌的关键词,有效规避了助眠APP视觉同质化现象。同时笔者基本具备了系统化设计意识,围绕IP形象和产品调性展开,将界面布局、IP形象、交互视觉等统筹起来,做到整个页面视觉风格一致。
在实操落地方面可以完整地完成从前期构思、中期设计再到后期高保真原型输出的设计过程,在过程中对画面的比例、版式的布局、色彩的规范等方面都进行了严格的把控,体验到了设计落地时的规范与严谨。“树小懒”助眠APP交互界面设计的过程使笔者发现了自己的想法与实际落地之间的差距,有许多地方都是不够严谨、周全的。市面上助眠类APP中很少会涉及到IP形象的引入,而IP形象本身所具备的个性、亲和力正好与助眠APP相契合,为了做好设计,笔者深入了解了IP形象的特点、作用及优势,并且考虑到了它在助眠APP中的重要性和可行性。
最后回顾整个设计实践过程,自己的设计水平以及逻辑思维能力都有了非常大的提升。学会了如何把设计同用户的需求相融合,学会了怎么把IP形象应用到助眠APP上,学会了怎样能体现出APP的特色,也让笔者明白了一款被人所喜欢、广泛使用的APP,并不是只有新奇的想法与好看的视觉效果就足够了,还需要考虑实用的价值,要考虑到使用者的习惯以及接受度,才能够做出符合市场需求、符合用户的产品。
参考文献:
- [1] 王俊秀,张衍,刘娜.中国睡眠研究报告[M].北京:社会科学文献出版社,2024.
- [2] 沈悦,吴祐昕.基于内隐记忆的助眠APP用户界面设计研究[J].设计,2024,37(01):148-151.
- [3] 张艾欣,崔建秋,尹凡.我国失眠人群现状调查及助眠APP市场开发建议[J].中国市场,2021(23):96-98.
- [4] 张雨晨.助眠APP的市场现状与发展前景分析——基于泰安市市民睡眠情况调研[J].现代营销,2022(07):151-153.
- [5] Garland N S, Kutana S, Piedalue A K, et al. Development of a Mobile App (iCANSleep) to Treat Insomnia in Cancer Survivors: User-Centered Design Study[J]. JMIR cancer, 2025, 11:e74387.
- [6] Armitage T B, Potts W W H, Irwin R M, et al. Exploring the Impact of a Sleep App on Sleep Quality in a General Population Sample: Pilot Randomized Controlled Trial[J]. JMIR formative research,2024,8:e39554.
- [7] 成宇志,黄雪飞.基于认知行为疗法的助眠APP设计策略研究[J].艺术与设计(理论),2024,2(02):54-56.
- [8] 刘笑涵.移动端APP界面交互设计中的数字媒体艺术元素分析[J].丝网印刷,2026(07):140-142.
- [9] 王晓雯,边鹏.手机辅助睡眠APP设计研究[J].工业设计,2020(01):139-140.
- [10] 王索娅,卢望,张燎.音乐治疗在失眠人群中的运用——音乐治疗的应用领域(六)[J].中国听力语言康复科学杂志,2022,20(03):234-237.
- [11] 李海燕.为“睡个好觉”买单“睡眠经济”兴起[N].南昌日报,2024-12-06(006).
- [12] 王婧慧,冯青.基于听觉体验的ASMR助眠产品设计[J].湖南包装,2023,38(02):90-93.
- [13] 徐亚娟.“大数据+”背景下睡眠经济行业的发展现状及前景[J].经济研究导刊,2023(13):29-31.
- [14] 余恬湉,余西西,甘琦婷,等.睡眠类APP联合其他新媒体睡眠宣教对大学生睡眠质量的影响[J].贵州医科大学学报,2023,48(10):1180-1185.
- [15] 任晓琳.在线音频类APP营销策略分析——以云听APP为例[J].新闻研究导刊,2022,13(10):234-236.
- [16] 王耘琪,陈晓华.香文化与香薰助眠产品的设计探析[J].艺术市场,2024(04):75-77.
- [17] 张卉,杨诗娆,郑瑞啸,等.情感感知的助眠音乐推荐策略构建与实践[J].包装工程,2024,45(12):38-48.
- [18] 谢金烨,毛媚,秦毅.音乐正念冥想的理论与实践探索[J].音乐探索,2024(01):81-89.
- [19] 宋奕勤,余佳琳.论无意识设计和情感化设计对APP设计的提升与优化[J].设计,2021,34(05):65-67.
- [20] 宋怡婷,王果,郁舒兰.基于体验心理的健康睡眠APP可视化设计[J].丝网印刷,2023(12):62-64.
