最后更新:2021-12-07
系统概况
增强现实技术帮助我们重新回归“以人为本”的设计理念。我们试图通过打造一种轻量化的3D设计语言,帮助用户在具体场景下,聚焦核心内容。并以一种高效、自然的方式完成任务。这将是未来人们探索世界并与构建连接的方式。虚拟与现实之间的边界将变得模糊,我们将可以在现实世界随时随地获取虚拟的信息或服务;也可能通过虚拟的操作界面控制或改变现实世界的某些状态。
OPPO XR系统旨在打造一个能够实时感知环境和用户行为的计算平台。在这里,开发者可以根据不同的场景,充分发挥创造力,为每个应用定制专属的用户体验。为保证用户能够享有一致的系统体验,针对一些常用操作,我们强烈建议您采用系统推荐的交互模型。以此降低用户的学习成本,并帮助用户将注意力放在应用提供的内容或服务本身。
下面让我们一起进入这个连接虚拟与现实的世界吧。
在设计和开发混合现实体验的过程当中,我们积累了一些心得体会,在此与您分享。希望这些经验可以帮助您快速构建具有良好用户体验的混合现实应用。
走动
对于那些第一次接触混合现实应用的用户来说,他们中的许多人并不知道自己是可以在空间中进行走动的。因此,我们应当在他们进入应用后,通过清晰的视觉或听觉的引导,来鼓励用户进行走动。
注意事项
视觉引导
可以通过提供巧妙的视觉线索,来引导用户视线注意力的转移。
也可以通过空间中某个物体的状态变化来实时响应用户的走动行为,以此激发用户自身的探索欲。
除了视觉线索,对于空间音效的合理运用,也可以很好地抓住用户的注意力,以便将他引向我们希望他去到的位置。
尺度距离
在设计混合现实应用时,需要同时考虑物理空间的限制、眼镜FOV的限制、人体自身尺度的限制等因素。为了平衡好这些因素,达到舒适的体验,我们总结了以下要点,供您参考。
注意事项
最佳观赏距离
避免过近,避免将物体置于用户面前60cm之内。
避免过远,过远的物体可能会失去立体感,也会让交互变得困难。
充分考虑FOV
大物体/大场景出现时尽量避免其超出FOV范围,以此减少画面的割裂感。
为了避免FOV边缘的硬边缘,可以将画面5% - 10%的边缘区域填充黑色柔滑过渡,让画面更自然。
避免使用超过所在空间尺度的物体。
避免设计过窄/过扁的可交互元素,在考虑可交互UI元素与物体大小时应充分考虑用户在点击手机屏幕产生振动时可能产生的偏移。
在设计混合现实应用时,菜单往往是必不可少的组成部分。我们总结了一些设计经验,帮助您合理规划和设计菜单。
注意事项
空间利用
合理利用MR设备的360°空间组织菜单,合理使用菜单展开/折叠动效。
如无必要,尽量避免二级菜单的出现。
保持一致性
同一场景下的物体,若需附着功能菜单,应尽量使用外观与功能布局相似的菜单,减少用户的记忆成本。
保持简洁
避免多层级菜单同时出现。
语音提示
需要用户阅读时,提供合适的主动或被动语音提示。
当图标可以表达时,应避免使用文字内容。
风格色彩材质
在设计混合现实应用时,对于界面元素的风格、色彩和材质表现等方面,也有着不同于2D UI设计时的考量。在此,我们将一些设计建议进行了汇总,帮助设计师快速适应这个全新的环境。
注意事项
慎用大面积亮色
出现大尺度菜单,UI界面与物体时,避免大面积使用亮色,减少可能对用户产生的疲劳。
材质选择
优先考虑使用Unlit与自发光材质的物体。
光影
避免出现强光影场景与元素。
在需要体现阴影时可利用【棋盘阴影错觉】原理。
应用类型
OPPO XR系统的应用由窗口组成,一个应用可以包含1个或多个窗口。 窗口分为2D窗口和3D窗口两种,用于显示不同的效果。
2D窗口
每个2D窗口定义了空间中的一个矩形区域,为该应用的显示和交互区域,其余的区域则不受该应用影响。
3D窗口
每个3D窗口定义了空间中的一个长方体区域(3D),为该应用的显示和交互区域,其余的区域则不受该应用影响。
沉浸应用
沉浸应用可以理解为一种默认将3D窗口撑满整个空间的应用。沉浸应用打开时具有排他性,包括主界面在内的其他所有窗口都将隐藏,只保留沉浸应用。
当沉浸应用退出或关闭后,原先隐藏的窗口将重新出现。
坐标系统
OPPO XR使用右手坐标系,Y轴向上,X轴向右,Z轴向后。整个XR桌面环境定义在世界坐标系下,坐标原点由启动时姿态确定。每个应用窗口有自己的坐标系,以窗口的中心点为坐标原点,如图2(右手坐标系)所示。
图2. 右手坐标系
概览
在OPPO XR系统中,主交互模式是通过模拟在手机顶部射出一条激光射线,用手机作为3DOF手柄,来与整个系统进行互动。这种基于射线的交互,方便用户精准地选择和操作物体。而手机界面上大面积的触控区域则沿用了使用触屏时的常用手势,如图3(手机遥控器效果图_正面)所示,从而降低了用户的学习成本。
图3. 手机遥控器效果图_正面
底部工具栏中预设了使用系统时的常用按钮,如图4(手机控制器效果图_侧面)所示。
射线是3DOF手柄交互的基础,用户使用射线选择要操作的物体,配合在手机控制器触摸板上的点击、长按、滑动等动作,完成操作。
图5. 射线交互
射线的不同状态(与视觉对齐)
根据用户行为、以及与其他物体的碰撞情况不同,射线状态可分为空闲态、悬浮态、点击态,如图6所示。
空闲态
射线未指向任何物体,且用户未通过手机进行任何操作时的状态,这是射线的默认显示状态。
悬浮态
射线指向物体时,两者发生碰撞检测,射线末端与物体的接触面上将出现一个光标。射线离开物体后,光标自动消失。
点击态
不论射线是否指向物体,用户在控制器触摸板上单击 / 长按时,射线变为点击态,此时射线末端显示为白色高亮。
图6. 射线的不同状态
OPPO XR系统支持各应用根据自身需要,自定义射线样式,定制外观时需注意以下事项。
注意事项
射线末端
在定制化控制器射线外观时,尽量让射线靠近用户的一端变得透明,可以降低3DOF控制器产生的体感偏移。
射线动效
使用射线与物体进行交互时,可优先考虑在射线远端顶部设计动效,近端视觉效果可尽量保持一致(维持用户感知)。
使用控制器与滑条,滚轮等UI元素,或在有限范围内移动物体时,应尽量使用手机触屏操作替代(或与之并存)用户使用激光拖拽的操作方式 。
触摸板
位于手机控制器中间的大面积点状区域,作为触摸板供用户使用。用户通过在触摸板上单击、长按、滑动来与系统进行互动。当前射线指向的物体不同,不同的触摸板事件会触发不同的操作结果。
系统目前支持的触摸板事件有:
工具栏
手机控制器底部有一条常驻工具栏,工具栏上的三个按钮从左到右依次是:截/录屏、返回主页、重置射线,如图7所示。
图7. 手机控制器底部工具栏说明
截屏
单击“截录屏”按钮,眼镜端界面上显示3秒倒计时,随后会将倒计时完成瞬间的虚实结合画面进行合成,生成的图片会自动保存至系统相册。
注意:截屏倒计时开启后,用户无法手动终止。
录屏
长按“截录屏”按钮,眼镜端界面上显示3秒倒计时,倒计时完成后,系统会将虚实结合的视频画面进行合成。再次长按“截录屏”按钮,停止录屏,生成的视频会自动保存至系统相册。录屏过程中,若单击“截录屏”按钮,则执行截屏操作。
退出应用
在沉浸式应用中,双击“返回主页”按钮,可以在任意时候帮助用户退出当前应用,并将主页唤至用户视线正前方2米处,如图8所示。
图8. 返回主页
重置主页
在非沉浸式应用中,单击“返回主页”按钮,重置主页。此时,主页画面会从原先的位置平滑移动至用户视线正前方2米处。
重置射线
当眼镜中射线显示的角度与手机实际的姿态发生明显偏移时,用户可以通过点击工具栏中的“重置射线”按钮,进行复位。
注意:点击“重置射线”按钮时,需确保手机与AR眼镜保持平行,如图9所示。
图9. 重置射线时手机与眼镜保持平行
瞄准
射线是OPPO XR选择物体的主要方式,用户通过射线选择要操作的窗口,如图10所示。
图10. 射线瞄准窗口
射线指向窗口标题栏,单击手机触摸板,使窗口进入“编辑态”,画面中将显示窗口所占空间的边框,默认为绿色。此时抬起手指,射线末端自动平滑指向窗口中心,此时窗口跟随射线移动。
窗口处于不同状态下的操作定义如表2所示:
拖拽和放置
处于“编辑态”时,射线末端指向窗口中心,窗口跟随射线移动而移动,纵使用户自身移动,窗口与用户的相对距离始终保持不变,如图11所示。
图11. 拖拽窗口
单击触摸板,即可完成放置,窗口固定在空间中。
若当前位置与空间中其他窗口发生碰撞,则窗口边框显示红色,如图12所示。
此时单击触摸板,放置操作无效,系统提供声音和振动的操作反馈,窗口继续跟随射线移动而移动。
调节景深
窗口处于“编辑态”时,单指在触摸板上前后滑动,调节窗口景深,前滑推远,后滑拉近,如图13所示。
调节大小
窗口处于“编辑态”时,单指在触摸板上左右滑动,调节窗口大小,左滑缩小,右滑放大,如图14所示。
关闭窗口
射线指向窗口,点击窗口下方的“关闭”按钮,关闭该应用进程,如图15所示。
图15. 关闭窗口
颜色、光线和材料
全息设备的光色显示规则
全息影像通过向现实世界添加光而创建,所以白色显示为亮色,黑色显示为透明色。
颜色
在混合现实的世界中,我们对色彩的选择要非常谨慎,尤其涉及到不同色彩在不同国家/地区所代表的不同含义时,要尤其慎重。
避免使用黑色
在混合现实中,黑色意味着透明,如果想在你的应用中达到黑色的效果,可以尝试使用深灰来代替,或者在黑色/深色区域的周围加上发光效果。相反地,白色则是混合现实中最明亮也是最显眼的颜色。它和其它明亮的颜色常被用于显示一些重要的信息。
浅色
白色现实为亮色,我们定义白色为#FFFFFF 100%,如果需要呈现不同层次的灰白色,请调整该色值的不透明度。例如#FFFFFF 70%
颜色的一致性
全息影像呈现一半都足够亮,一保持在不同现实背景下,颜色保持一致,所以应该避免使用过大的亮色块,纯色块。
材料(材质)
材料是制作真实全息影像的关键元素,通过提供适当且真实的视觉特征,可以制作与真实的物理环境完美融合的AR元素或对象。材料对于用户交互的视觉反馈也很重要。
版式
AR中的版式
OPPO AR 中的版式规则和其它媒介没有什么不同。都需要文本清晰易读, 文本或图像可以位于不同的位置,能叠加到其它物理对象上,也可以随着AR应用的用户界面一起移动。无论使用什么样的版式,我们都应保证其识别性和阅读性应用相同的版式规则,一行文字的长度在50个字符左右,尽量避免一行文字过长导致阅读疲劳。
尽量使用2D字体
避免挤压字体使之变形,避免使用3D字体,因为3D字体不如2D字体清晰。3D字体,可以用于强调使用。
统一字体
避免在单个页面中使用两个或以上的字体。 字体过多会破坏体验的协调性和一致性,使信息更难使用。 由于信息叠加在物理环境的顶部,因此使用过多的字体样式会降低体验。 OPPO AROS UI是使用的字体是OPPO开发的字库OPPOSans 2.14。 可以从"XXX"页下载
颜色
在OPPO AROS中,由于全息影像使用的光学结构,白色文字极为清晰,在混合现实中,黑色意味着透明,所以应该避免使用黑色作为文字颜色,如果有需要定义文字的层次,可以使用白色作为基色,调整白色的不同不透明度以达到文字色彩的层次感,在OPPO AR 中由于真实世界的背景的复杂性,可能会导致文本难以阅读,我们建议在深色或者彩色的背景上,使用白色文本。以提高用户的识别。并且应该减少来自真实世界的干扰。
字号和字重(选择正确是字体大小)
引用 “人因工程实验结果以及建议20210509”,最终设计以室内1.95米为基准,主要使用文字大小为30pt,为了保证在物理环境中的识别性,字重均采用Medium&bold。又因汉语字体特性,遇到笔画较为复杂的文字,使用Blod可能会使笔画粘合在一块,应谨慎或避免使用“Blod”级字重,以保证其识别性。
2D图标(系统图标集)
在OPPO 清晰且易识别的图标,有助于我们提升用户体验。帮助我们与用户交流。
• 3.2px 居中描边,3.2px 负空间(这里指的是切割部分)。
• 形式简化为最基本的元素,不要有其它细节。
• 用 2px 圆角来平衡尖角。如果有4个角,那么保留其中一个角为尖角,而其余角为圆角。
• 描边终点用直角,不要用圆角。
• 图标统一尺寸为48x48px
图标大多数使用 2px 的圆角,但每个图标至少应有 1 个尖角。 这个尖角可以放在最具有意义或最吸引人视线的地方。 不限制在某一个角的位置,可能会变得多余而且限制性很强。 关键是圆滑边缘与锐利边缘之间的平衡,使图标具有平衡感和现代感。
在设备上,显示系统图标的最小尺寸应为 48x48px
3D图标
合作者需提供自定义ICON3D模型、动画以及贴图,以unitypackage的形式给到oppo方。允许合作者自定义icon,按照oppo AROS icon规范制作icon,保证视觉的统一。
面数
整个LAUNCHER中面数不超过10w面,立体icon总数不超过5w面。
单个icon面数不超过5000面。去除icon中必要元素磨砂玻璃材质,icon内容部分面数在2000面以内。
立方体贴图(CubeMap)
包围盒贴图保证icon在超级符号中的反光效果,根据自定义icon所需要的反光效果定制。 oppo方提供一张包围盒贴图原件,如下图:
SHADER
LAUNCHER中使用无光照模式,ICON SHADER 采用Unlit/Texture,要求icon的光影需要烘焙在贴图上。
贴图
单个icon贴图尺寸为512x512,贴图不超过3张。
模型尺寸
每个icon都以cm为单位制作,在unity中缩小0.15倍为实际尺寸。
限制框类型共四种,如下:
方形类
适用方形icon。x51 y51 z25-60
长条类
icon的xy轴形成的图形为长方形。x70 y50 z25-60
球及圆柱形类
适用球形和圆柱形icon。x57 y57 z25-60
组合形类
有多个规则或不规则图形组成。可根据组合型的外部轮廓判别更相近于其余类型中的一种。在不超过边界框的情况下,限制框大小视情况而定,保证icon视觉体量的统一。例如:天气icon可用长条形边界框规范,其空白空间较大的情况下,z轴数值略大可平衡其视觉体量。
过渡层
过渡层是半透明的蓝绿色背景色组成的用户界面组件,此层级下,用户依然能够看到真实世界视图,系统UX元素在现实世界和不同UX元素下保持清晰,每个弹框后面都需要过渡层。
用于分割弹出层
当希望顶层UI清晰易读且在视觉上分开时,可以使用此元素。
用于提高易读性和层级
如果需要用于保持文本,按钮或其它元素易读性,用于应用程序的对话框,弹框等,并能够有效的提高顶层元素的清晰和易读性。请使用弹出层。
卡片与圆角
卡片
卡片是用于将不同元素组合成一个平面元素的AR用户界面组件,卡片相当于一个容器,将内容或UX元素囊括在一起。卡片可以有多个状态,既包括无边界形式的卡片,也包括有边界的卡片。
前者无边界的卡片,后者带有方形形状的卡片
统一卡片和圆角
为保证OPPO AR OS的视觉统一性,我们应该将AR中的圆角和卡片样式统一,采用和AROS系统图标一样圆润的视觉元素,圆角大小应该根据,用户界面卡片的大小而变化,从视觉感受上统一圆角,卡片面积越大则圆角越大,卡片面积越小则圆角越小。
层级
利用层级构建焦点
利用层级,可在UX元素之间建立层次结构,并能够非常自然的建立AR空间中的焦点状态(hover)并且还允许我们最大限度的增加直接视野中的内容数量,正确使用层级有助于为用户提供清晰的层次结构,用户不易迷失。
增强识别和内容
为避免界面杂乱的方式就是将次要内容放到更远的地方,将重要内容放到更近的地方,以便用户能够高效的接收反馈和提示。同时也能显示更多的内容。
使用层级应克制
创建太多内容可能会让整个空间显的杂乱,建议保持在最到4个层级深度。同时UX元素内容应避免放置过远,不然会让用户认为此界面为错误或段连状态。
选中UX元素
当UX元素被选中,则此元素向前移30cm显示为焦点状态(Hover)相应元素在用户眼中应该是放大的,在这里每个层级为30cm
有弹框内容时的层级关系
使用层级,来建立AR世界的层次结构和元素关系,将UX内容放在最前面或者在选中时,其向前移动一定距离,引起用户对于内容的注意。在层级关系中,每个层级为30cm。
2D内容-弹框出现
当2d元素内容上弹出弹框时,其内容应该做模糊和减淡处理,同时内容和弹框之间应出现过渡层,以保证弹框的识别性,推荐减淡10%,模糊6。
3D内容-弹框出现
当3d元素内容上弹出弹框时,其内容不变,内容和弹框之间应出现过渡层,以保证弹框的识别性。
声音
针对不同的操作选项以及状态变化,OPPO XR为系统定制了丰富的声音体验,以此增强用户对系统状态的感知,进而提升用户在使用全新交互方式时的安全感,和信心。
系统定义的音效如表4所示:
注意事项
通知和强化
对于那些不是由用户主动触发的事件,请使用恰当的声音通知用户,状态发生了改变。
当交互过程分为多个阶段时,尝试使用不同的声音来完成不同阶段之间的过渡。
保持克制
每一种声音都应当传递特定的、有价值的信息给用户。
当应用通过声音反馈提醒用户时,请暂时适当减少其他声音的音量。
对于按钮的悬停音效,请增加必要的时间延迟,以免触发过多的声音。
声音引导
声音被作为广泛的被动反馈的同时,也应充分考虑其作为主动引导(cue)的元素。
声音优化
避免使用过多低频声音,合理优化人声效果与混合器(mixer)。
不要完全依赖声音
充分考虑那些可能有听力障碍的用户。
用户可能会处于隐私安全或其他原因而禁用音频设备。
振动
振动反馈作为视觉反馈和听觉反馈的补充,进一步增强了用户的感知。通过手机控制器对用户特定操作和系统状态变化作出响应,这样的即时反馈设计,将进一步提升产品的用户体验。
系统定义的振动反馈如表5所示:
注意事项
多通道反馈
使用控制器交互时,应尽量保证视觉、声效(必要时的语音提示)、射线外观与振动马达同时进行反馈。
连续反馈
进行连续操作时(旋转、拖拽),上述反馈应考虑设计适合连续高频次反馈的效果。
手机键盘
应用程序可以随时调用系统键盘,通过手机控制器上弹出的输入法高效完成文本输入,如图22所示。
射线和光标
控制器光标(射线)是在AR Glass上手机交互为最主要的交互方式,为了不遮挡视线,选取了尾端渐变消失的方式,当射线选中物体的时候,射线末端出现光标,表示已选择物体。光标的形式为空心圆圈,圆圈在不同立面上有比较明显的透视表现,能够更清晰告诉用户自己正在选择哪个平面。
按钮是OPPO AR中最为基础界面组件,也是最重要的UI元素之一。它用于执行一个用户在界面内执行的操作。因为在混合现实中,没有任何的物理反馈,所以提供清晰明确的视觉和音频反馈,用于提高用户对于交互的确信度十分重要。
操作反馈
要执行操作,需要按钮有被选中和点击的状态,一旦激活按钮,就会执行操作。
按钮类型
文本按钮
当操作的内容很抽象,图标很难准确传达内容,或会造成误解时,使用文本按钮。
图标按钮
操作可以很轻松简单的用图标传达时,使用图标按钮。
列表是连续垂直排列的文本或图像,通常展示内容和状态,也可以与控件组合实现相关操作。
列表规范
列表是大量的同类型信息的集合。为避免拥挤,一条列表文本内容应该保持简短,言简意赅,不应过长。一条列表的内容应该专注一个主题。列表的分类应该明确,不同的项目内容不应该放在同一个列表中。例如,应用商店,内容都是AR应用相关。
单行列表
只有一行文本的列表项。
两行列表
有两行文本的列表项。
开关
用于两个相互排斥的状态和展示,开关有打开和关闭两种状态,一般点击即时切换。
选择器
用于对内容进行单选和多选
单选用于从内容中选择一个选项,选项应该在页面中全部展示出来。
多选用于从内容中选择多个选项。
可交互反馈
OPPO AR 的可交互反馈,涉及所有的感官,因此可以使用的工具和技术越多,就会使使用者越感到真实。
实时提供反馈
在用户操作的过程中,向他们显示反馈非常重要,增加了体验的真实感,确保用户不会认为应用程序存在错误。
反馈是多方面多维度的
反馈可以是,视觉上的反馈,可以是触觉,声音,甚至指示灯,多种反馈综合提供,增加体验的真实性。比如具有空间感的反馈声音。
反馈不应过多
显示进度
进度控件适时提供反馈给到用户,指出长时间运行的操作正在进行。当进度指示器可见时,用户可以看到时间,并能够做相应的交互操作。
进度类型
向用户提供操作后正在发生的情况的信息非常重要。在OPPO AR中,如果应用没有良好的反馈,用户很容易被现实的物理环境或对象分散注意力,所以对于需要较长时间的加载或更新的场景,需要一个可视化的指示器。并且有相应的交互操作。包括进度条和进度环/球。
进度条
进度条能够显示任务的完成百分比,应该在操作期间使用,该操作的持续时间一般确定。并且进度不应该组织用户的交互进程。
进度环/球
进度环/球具有不确定的状态,应该在用户交互被阻止的时候使用。直至操作完成为止。
什么是窗口
窗口是对OPPO AR中的混合现实对象进行操作的标准接口,它为用户提供一个视觉提示。告诉用户当前对象可以调整。在OPPO AR中,窗口可以用光标射线配合遥控器进行操作,能够缩放,移动等。
缩放与放置对象
1、窗口视觉样式告诉用户此对象可以缩放,并且显示出此对象的区域大小。通过连接的手机虚拟遥控器界面进行缩放;
2、也可在触控板上对物品进行推远和拉近的操作。
常规通知来自于:手机白名单应用 和 OPPO AR应用。
注:所有常规通知在沉浸式应用中不显示,直接进入“通知中心”。
常规通知交互模式
当有通知来的时候,会首先在视线左上角弹出APP图标,然后自动展开显示通知标题。常规通知跟随用户视线移动而移动,始终固定在用户视线左上角。
通知标题完整展现后,3s内不操作,通知会自动消失,并收录在通知中心,置顶显示。
通知的操作
用户使用射线指向通知时激活通知,显示完整内容;射线移出通知后,通知恢复“露出”状态,只显示图标和标题,3s内无操作将自动消失;使用射线点击通知,打开对应应用(短信通知不支持点击打开);
注:激活 / 打开的通知消息不再会进入“通知中心”
对话框控件是提供上下文应用信息的UI 覆盖,通常请求用户操作。在完成操作请使用对话向用户授予重要信息并请求确认或附加信息。
对话框为最上层,与内容之间必须有过度层作为缓冲,保证内容信息的清晰传达。
弱提示
弱提示通常用于为用户提供必要的状态提醒或操作指导(例如:下图中的“请使用手机输入”的提示。)弱提示无需也不支持用户交互,不会进入“通知中心”。
弱提示元素组成
弱提示由:文本 + 背景组成,始终显示在视野正下方,跟随视线移动而移动。
中英文情况下,文案建议不超过两行,一行最多显示中文14个字符。多语言情况下文案可能超过两行,则继续换行显示。
一行 LENGTH_SHORT=3500毫秒(3 秒)
两行 LENGTH_Long=4000毫秒(4秒)
录屏提示
录屏提示,作为特殊的存在,独立于其他通知类型。
录屏提示-倒计时
录屏开启后,在视野正上方,显示“3、2、1”倒计时,数字依次出现,并伴随一定的Z轴移动。文字显示尺寸相较于弱提示,要更加明显、突出。倒计时提示始终跟随视线移动而移动。
录屏计时
录屏计时提示,在录屏期间提示用户当前视频录制时长。
录屏开启后,在视野左上方,显示录屏计时,格式为:MM:SS(单次录屏时长不允许超过1小时),倒计时提示始终跟随视线移动而移动。
结束录屏
长按手机遥控器“截录屏”按键,结束录屏后,录屏提示消失。
桌面3D图标动画
合作者需提供35帧的自定义动画,若未提供,hover态仅有通用动画,无自定义动画。
1.超级符号动画
作用在超级符号上,为旋转动画。Launcher中超级符号的动画共有35帧。
2.icon通用动画
作用在icon为旋转位移动画,所有的icon被射线悬停后(hover)都会播放的旋转与位移动画,通用动画共35帧。
3.icon自定义动画
作用在icon上,接在通用动画后,通用动画播放结束后,播放icon特有的自定义动画。自定义动画共有35帧,循环播放(loop模式)。由开发者提供,若未提供,则为空帧静止。(30fps)
曲线规范
1.标准曲线 Standard Curve
(0.40, 0.00, 0.20, 1.00)
适用于大部分界面内元素的运动(包括位移,旋转,缩放,不透明度等变化)
2.减速曲线/入场曲线 In-Decelerate Curve
(0.00, 0.00, 0.10, 1.00)
适用于元素从界面外进入,或在界面中从无到有出现
3.加速曲线/出场曲线 Out-Increase Curve
(0.30, 0.00, 1.00, 1.00)
适用于元素位移出界面,或在交互后从界面中完全消失
4.极速平滑曲线 Ease-Curve
(0.33, 0.0, 0.67, 1.0)
适用于快速变化的元素(小于150ms/50px)
5.水母曲线
(0.21, 0.00, 0.36, 1.00)
适用于主要界面出场动效,体现产品风格化
时间规范
1.打开和关闭
关闭比打开时间长50~100ms
关闭、关闭或折叠元素的过渡使用较短的持续时间。退出转换可能更快,因为它们比用户的下一个需要更少的注意力
2.两个页面的前后衔接
前一个动画完全结束前的50~100ms开始后一个动画
尽可能不要让用户等待过久,但也需要避免两个内容的过多重叠
3.时长
根据元素大小、移动的距离动态调整时间长短
小~100ms/中~打开250ms 关闭200ms/大~打开350ms关闭300ms/特殊~500ms 至800ms
页面跳转动画
Launcher进入应用规则:0ms开始launcher外圈图标消失动画,50ms开始launcher内圈图标消失动画,150ms时开始应用打开动画
应用进入Launcher规则:0ms开始应用关闭动画,250ms开始launcher内圈图标出现动画,300ms开始launcher外圈图标出现动画
Launcher打开/关闭动画
内外圈图标出现规则:分内外两层动画,先内后外,延迟50ms。
出现:
动画350ms
缩放:0.92~1
透明度:0~1
PathInterpolator(0.21, 0.00, 0.36, 1.00)
消失:
动画250ms
缩放:1~0.92
透明度:1~0
PathInterpolator(0.30, 0.00, 1.00, 1.00)
应用打开/关闭动画
出现:
动画500ms
缩放:1.1~1
透明度:0~1
PathInterpolator(0.00, 0.00, 0.10, 1.00)
消失:
动画350ms
缩放:/
透明度:1~0
PathInterpolator(0.30, 0.00, 1.00, 1.00)
弹框动画
弹窗打开规则:0ms原页面消失,150ms开始弹窗打开动画(原页面透明度降低动画结束前100ms)
弹窗关闭规则:弹窗关闭,始原页面透明度恢复动画同时进行(弹窗关闭动画结束前100ms)
弹窗出现的同时蒙层也做相同动画
弹窗打开动画
原页面透明度降低模糊度增加:
动画:0~250ms
透明度:1~0.1
模糊度:0~6
过渡层前移:
位置:-30~0cm
PathInterpolator(0.40, 0.00, 0.20, 1.00)
弹窗打开:
动画:150~500ms
透明度:0~1
位置:0~30cm
PathInterpolator(0.00, 0.00, 0.10, 1.00)
弹窗关闭动画
弹窗透消失:
动画:0~250ms
透明度:1~0
位置:后移30cm
PathInterpolator(0.40, 0.00, 0.20, 1.00)
原页面透明度恢复模糊度恢复:
动画:0~350ms
透明度:0.1~1
模糊度:6~0
过渡层后移:
位置:0~-30cm
PathInterpolator(0.40, 0.00, 0.20, 1.00)
应用商店运营规范
每个应用可以放两个3D模型,元素简单直接,与应用主题挂钩
将每个应用的3D图标预制体,以及显示在卡片外的模型预制体打成一个包,Unity版本:2019.4.10f1
包名:allassetbundle
后缀名:unity3d
预制体名:
漂浮的示例模型1:AppMod3D_0
漂浮的示例模型2:AppMod3D_1
最终输出的模型要求效果质感表现正常、参数正确不需要后续调整处理,具体模型要求如下:
命名规范:
模型与贴图等命名用英文,不可用中文,不可有重复。名称达意即可,首字母统一小写,多个组成部分以下划线分割。
以下用abc模型为例列举命名规则:
漫反射贴图(普通纹理,无光颜色贴图) abc_ albedo;
AO贴图 abc_ao;
动画:以模型名+ani组成,命名达意即可,以下继续用abc模型为例列举命名规则:Icon待机动画 abc_ani_idle。
模型贴图规范:
Icon模型尺寸:1米×1米,坐标清零,放在底部(0,0,0);
模型布线合理,单个图标不要超过1万面,复杂的酌情处理;
模型不得出现错误,破面、重复面、法线未统一等;
仅支持PNG贴图类型;
不使用多维子材质球,请把无用材质清理干净;
请使用unity中默认的unlit材质(不需要实时灯光)、standard材质(实时灯光,但无特殊需要请将阴影烘培到贴图上),不支持使用复杂shader,粒子Shader需经过设备验证。
模型贴图最大尺寸不超过1024 × 1024,其余贴图尺寸不得大于512 × 512(贴图比例为正方形);
贴图不用中文,不能重名,命名跟模型匹配;
一个图标一张贴图(模型涉及透贴也在一张贴图上处理,一般不需加法线和反射);
带Alpha通道的贴图,在命名时必须加_al以区分;
尽量不用透明贴图,都做成实体,如果使用透明贴图,需避免大面积、叠加使用,可能导致透明排序显示错误;
UV摆放合理,充分利用空间;
材质球及贴图命名与模型名称一致。
首页banner大小为1000*560px,图片(jpg、png)位置里显示名称与文字的地方尽量不显示重要信息,避免与文字出现信息重叠。
标题最长显示范围为450px,超出部分『...』,最多显示8个中文字
详情信息最长显示范围为896px,超出部分『...』,最多58个中文字
标题最长显示范围为450px,超出部分『...』,最多显示8个中文字