首页 > 其他分享 >灵动岛动效:打造沉浸式用户体验

灵动岛动效:打造沉浸式用户体验

时间:2024-06-06 15:29:21浏览次数:21  
标签:岛动效 沉浸 预览 左图 动效 灵动 组件 定时

灵动岛是专属于 iPhone 14 Pro 系列交互UI,通过通知消息的展示和状态的查看与硬件相结合,让 iPhone 14 Pro 系列的前置摄像头和传感器的“感叹号”,发生不同形状的变化。这样做的好处是让虚拟软件和硬件的交互变得更为流畅,以便让用户能够更直观地接收到这些信息。

更多关于灵动岛信息:即时设计 - 可实时协作的专业 UI 设计工具即时设计是一款支持在线协作的专业级 UI 设计工具,支持 Sketch、Figma、XD 格式导入,海量优质设计资源即拿即用。支持创建交互原型、获取设计标注,为产设研团队提供一站式协同办公体验。icon-default.png?t=N7T8https://js.design/practice?source=csdn&plan=yb6061

1、定时灵动岛设计

  • 主要展现信息:当我们在 iPhone 上设置定时成功返回桌面后,会在灵动岛展示当前的定时信息。
  • 制作定时灵动岛:UI·复制右侧的灵动岛官方组件·在图层内里,依次摆放定时 icon 和右侧文字,文字大小为「16px」,颜色为「辅助橘色 - #FF9F0A」,安全间 距为左右「10px」。
  • 摆放关键帧位置:·复制过来一个「Default」尺寸的灵动岛官方组件·像左图一样摆放,全选画板,并点击「创建多个组件」-「变体」·修改命名与左图一致
  • 添加动效:·选中第 1 个动效帧,原型 - 交互;·从上到下依次连线,并添加与左图一致的参数;·类型「定时」,时长「500」,过渡动画为「智能动画」「自定义」(参考前文参数),「600」。
  • 预览效果:·复制「场景模板」到工作区·替换「场景模板」的灵动岛组件为变体中的第一个组件·选择「动效帧」图层,然后点击水平居中对齐+顶对齐·点击右上角预览即可查看动效 注:按下「R」键可以重新预览

2、Airpods 灵动岛设计

当我们使用 Airpods 系列产品时,打开充电仓,即可在灵动岛查看 Airpods 的电量状态和连接状态。·

  • 扩大变体范围:我们在制作后续组件时,可以直接在变体里复制组件制作·拉框 扩大变体的范围
  • 复制一个「Large」尺寸的灵动岛官方组件,点击「创建为引用组件」后拖到到变体里,注意命名与其他组件一致·在图层内里,依次摆放 AirPods icon以及电池状态,左右安全间距为「10px」(可使用素材)
  • 复制一个「 XLarge」尺寸的灵动岛官方组件,点击「创建为引用组件」后拖到到变体里注意命名与其他组件一致·在图层内里,依次摆放左图信息·已连接字体颜色为「次要颜色 -#EBEBF5 60%」,字体大小为「13px」·耳机名称字体颜色为「主要颜色 - #FFFFF 100%」,字体大小为「16px」,左右安全间距为「10px」(可使用素材)·AirPods icon 的大小为「46px」,按「K」使用缩放功能,放大提供的素材就可以~
  • 复制一个动效帧组件·摆放位置参考左图
  • 添加动效:需要注意的是定时动效的最后一个关键帧需要连接AirPods 的第一个关键帧,如左图;·其他流程和参数与定时动效一致;
  • 预览效果:按住 Alt+鼠标左键,拖拽第 1 个组件,替换「场景模板」的灵动岛组件·点击右上角预览即可查看动效注:按下「R」键可以重新预览

标签:岛动效,沉浸,预览,左图,动效,灵动,组件,定时
From: https://blog.csdn.net/haishao520/article/details/139492838

相关文章

  • 灵动微电子 MM32F5277 boot分区实现之Flash驱动移植(二)
    前言    上篇文章,我们移植了nr_micro_shell串口shell组件到MM32F5277上,在此基础上,我们继续移植NorFlash和EmbddedFlash的驱动,并编写串口命令进行测试!NorFlash驱动移植    我们先到灵动微的官网下载官方的SDK,贴个官网链接:灵动微电子SDK下载https://mind......
  • 沉浸式观赛新风尚:足球场体育馆三维可视化技术引领潮流
    在数字化浪潮席卷全球的今天,三维可视化技术正以其独特的魅力引领着体育场馆建设的革新潮流。这一技术的出现,不仅为观众带来了前所未有的视觉享受,更在体育产业的发展中,开启了一扇通往未来的大门。 足球场体育馆三维可视化,就是将足球场体育馆的实体结构通过三维建模技术,以数字化......
  • MAUI Android 透明状态栏/导航栏(也有叫沉浸式的)
    不说任何废话,上代码,不好用来打我Platforms/Android/MainActivity.csprotectedoverridevoidOnCreate(BundlesavedInstanceState){Google.Android.Material.Internal.EdgeToEdgeUtils.ApplyEdgeToEdge(Window,true);if(Operatin......
  • 高铁站华丽升级:3D可视化技术打造沉浸式导航体验
    在科技飞速发展的今天,我们的生活正经历着前所未有的变革。高铁站作为现代交通的重要枢纽,也在不断地创新和进步。 3D可视化技术通过三维立体的方式,将高铁站内部和外部的结构、设施、流线等以更加直观、生动的形式呈现出来。乘客们只需通过手机或高铁站内的显示屏,就能轻松浏览到......
  • 增强现实与虚拟现实中的大模型应用:沉浸式体验的创新
    增强现实与虚拟现实中的大模型应用:沉浸式体验的创新1.背景介绍随着技术的进步,增强现实(AR)和虚拟现实(VR)正在成为越来越受欢迎的沉浸式体验方式。大模型,如神经网络和深度学习模型,在AR和VR中的应用正在推动这些技术的发展,为用户带来更加真实和沉浸式的体验。2.核心概念与联......
  • 踩坑小计-Android Flutter应用设置沉浸式状态栏
    之前写过一篇关于设置Flutter页面沉浸式状态栏的文章。https://www.cnblogs.com/mrhan9941/p/16482604.html主要是基于Flutterboost的原生Android项目的,那时候是在原生Android项目嵌入了FlutterModule。项目重构后已经改为纯Flutter项目,确发现一个小问题,沿用之前的设置沉浸式状......
  • 通义灵码——灵动指间,快码加编,你的智能编码助手
    通义灵码,是阿里云出品的一款基于通义大模型的智能编码辅助工具,提供行级/函数级实时续写、自然语言生成代码、单元测试生成、代码优化、注释生成、代码解释、研发智能问答、异常报错排查等能力,并针对阿里云的云服务使用场景调优,助力开发者高效、流畅的编码。点击此处立即参与通义灵......
  • 通义灵码——灵动指间,快码加编,你的智能编码助手
    通义灵码,是阿里云出品的一款基于通义大模型的智能编码辅助工具,提供行级/函数级实时续写、自然语言生成代码、单元测试生成、代码优化、注释生成、代码解释、研发智能问答、异常报错排查等能力,并针对阿里云的云服务使用场景调优,助力开发者高效、流畅的编码。点击此处立即参与通义......
  • 剧本杀小程序app开发:开启沉浸式推理游戏新篇章
    随着社交媒体和移动设备的普及,人们对于线上娱乐的需求越来越高。在这样的背景下,剧本杀小程序app应运而生,它结合了角色扮演、推理和社交互动等元素,为玩家提供了一种全新的沉浸式游戏体验。本文将探讨剧本杀小程序app开发的关键要素和前景。一、剧本杀小程序app简介剧本杀小程序app是......
  • 穿越时空的沉浸式体验:红色教育基地漫游可视化
    在快节奏的现代社会,人们对于教育和休闲的追求愈发多元化。红色教育基地作为历史的见证者,承担着传承革命精神、弘扬社会主义核心价值观的重要使命。然而,传统的参观方式往往过于单调,难以让参观者在短时间内深入理解革命历史的内涵。正是基于这样的背景,山海鲸可视化基于自研的3D渲染......