Star night

动效设计

腾讯云视频点播示例

Star night是什么?

Star night是一款主要以检测睡眠质量,辅助睡眠,睡眠音乐,通过呼吸训练调整情绪的一款健康睡眠软件,不仅拥有100+的入睡音乐和白噪音,而且能痛殴专业科学的检测用户睡眠状态,来评测用的睡眠习惯,并总结出最适合用户的睡眠报告,来提升用户的睡眠质量。

设计目标

睡眠类App的动效设计目标是创造一个舒适、安抚和个性化的用户体验,创造出一种深度的、令人放松的沉浸感,使用户感到仿佛置身于一个安静、宁静的环境中,帮助用户更轻松地进入睡眠状态和自然唤醒。

动效设计原则

在动效设计中,必须明确了解动效在系统中的作用。这包括确保页面过渡流畅、提供清晰的指示、展示元素层级关系以及传达产品品牌形象。设计时要注重操作符合用户预期,物体运动仿真真实世界,元素表现突显产品品牌与调性。

腾讯云视频点播示例

自然的

自然运动规律,保证视觉连贯,让用户感知到动作是成立的。

高效

界面元素运动尽可能少且简洁,减少路径及不必要的元素,快速的完成流程任务。

克制

做有意义的动效,不去做太多的修饰而干扰用户。

启动页动效

腾讯云视频点播示例

引导页动效

腾讯云视频点播示例

首页动效

腾讯云视频点播示例

转场动效

腾讯云视频点播示例

一镜到底转场

为用户提供一个更加沉浸、自然和放松的环境,通过共享元素(圆形)、共享容器、共享动势等方法来进行转场过渡,帮助用户理解界面以及元素之间的逻辑关系,有助于提升用户操作任务的效率,增强视觉的流畅感。

01

共享元素

在转场发生后希望用户关注到的焦点元素,增强了转场的连续感。

02

共享容器

容器通过大小、视差等方式进行补间过渡转换,容器内的元素可通过共享元素的手法进行过渡,从而降低转场后的割裂感。

03

共享动势

“>通过相同的进场出场的动势来实现平滑柔和的过度,并且使用相同的交互手势,这种交互的流畅性可以增加用户的沉浸感。

手势动效

腾讯云视频点播示例

标题联动

对象主内容区与标题区的联动设计,在主内容区到达顶部边界时继续进行拖拽操作,除了主内容区因过界显控比设计产生的阻尼感,上方的标题区与其产生不同阻尼感的联动设计,让过界拖拽体验更灵动并富有层次感。

腾讯云视频点播示例

卡片左右滑动

卡片横向滑动可扩展更多功能,显控比设计让横向拖拽手势在一定距离后产生阻尼感,提示并引导用户进行后续操作。

睡眠定时动效