背景

2020年 vivo 推出了全新的手机操作系统 Origin OS，由前苹果设计师主导设计。OS推出后，取得了良好的用户口碑。

项目从概念到落地，始终以体验设计为主导，尤其是设计过程，不断地打磨细节，力求打造激动人心的体验瞬间。

这一篇文章就是围绕Origin OS，尤其是原子组件，分享我参与过的一小部分的设计。

为什么要做 Origin OS ？

除iPhone外，其他手机厂商的操作系统或者UI都是基于安卓系统适配优化而来。（最新的鸿蒙系统为自主开发，华为牛逼！）

虽说是适配，但手机厂商在面临越来越严峻的红海厮杀时，不得不提高OS的使用体验，需要不断地开发各种功能满足用户需求。

vivo的Funtouch OS 在2020年之前，每年的用户体验度调研中，成绩均不理想，每年的设计更新也不痛不痒。

为补齐这块短板，高层决定来一次彻底的变革，请来了苹果的设计师同时给予了较大的支持。在经过一段时间的思考后，决定推出新的OS以配合即将到来的设计革新。

为什么要做 原子组件 ？

什么是原子组件？

为了给用户更好的体验，OriginOS针对安卓小组件做了大量的优化、整合。无需进入APP，即可通过小组件在多个播放器中切换音频内容，或者是查看屏幕使用时间、日程信息、天气预报以及未来温度等。

做新OS，如果全部从零做起工作量是非常大的，路要一步一步走，饭要一口一口吃，所以还是基于原来的系统去革新，将重点内容重新设计。

那从哪里入手呢？用户每天体验最多的地方是哪里？

对，是锁屏、桌面。

所以，在整个设计过程中有个slogan：桌面优先，内容优先。（内容优先也是最近几年的热门趋势，这里先不展开讲了。）

桌面如何能进一步提升效率呢？

此时就讲目光锁定在了桌面组件上了。

（事实上，围绕着桌面，Origin OS 还做了华容网格、变形器、行为壁纸等，因为我并没有参与到这些内容的设计工作，就不多聊了。）

各大厂家当时基本还是沿用安卓原生的桌面组件，只是在此基础上就行了视觉优化，实用性很差，用户普遍不愿意使用这些组件。

Origin OS 做原子组件，一方面提高用户获取内容信息的效率，另一方面也是希望通过对桌面的差异化设计，让用户第一时间对 Origin OS 眼前一亮。

3. 原子组件设计-i管家

设计任务传递到i管家团队时，就是考虑i管家原子组件的设计。

第一阶段

设计师围绕着i管家的主要功能，同时借鉴ios的设计，提出了两个原子组件的设计。

（此处的原型仅供参考，实际汇报时均为高保真设计图，必要时带有交互动效。）

方案汇报时被质疑组件的价值，为什么要做i管家的组件？

设计师未能阐述清楚。

(内心os：不是你让我们做的吗？)

第二阶段

设计师回归组件、i管家的设计价值思考。

组件的价值

如果只是展示信息，和普通的组件有什么区别呢？

现在的用户总是下载了很多应用，但绝大多数的应用只是为了使用其中一个功能。

所以不仅仅展示核心信息，还可以进行交互，聚焦核心功能，简单、频率高。

i管家核心功能的特点

一键优化：清理内存，释放空间，操作简单，用户使用量大。

空间清理：分为一键清理和重度清理，一键清理可清理垃圾数据，操作简单；重度清理需要用户选择清理内容，较为复杂。

安全检测：检测病毒之类的，使用频率不高，如果有异常，需要谨慎处理。

流量管理：显示流量的使用情况，进行联网的管理。流量的使用情况在下拉通知中可显示。

屏幕使用时间：显示各应用的使用时间及管理。

如果我是用户，究竟是什么内容才值得我把i管家的组件放在桌面上，每天都看着？

有可能是以下场景：

  1. 应用的使用时间，监督我每日手机的使用情况，防沉迷
  2. 低端机一键优化，轻轻一点，让手机不再卡顿

基于此，设计师重新设计了两个组件。

屏幕使用时间：

通过向上滑动可查看使用时间最多的应用，避免泄漏隐私。

i管家

点击之后触发小火箭升空的动效，小火箭飞出后优化完成。

第三阶段

细节打磨。

交互

细化交互逻辑，解决清理加速时，耗时过长的问题。

UI

视觉打磨是花费时间最久的，围绕着微拟物和数字感两个方向，反复调整细节。

进行到第三阶段时，设计团队基本上保持早上设计汇报，下午、晚上调整方案的节奏，循环了至少一周，以达到满意的效果。

最终静态效果展示：

4. 原子组件设计-天气

天气已经是一个成熟的应用了，功能层面已经趋于完善，重新审视提升用户体验的发力点在哪里，就是摆在我们面前的第一个问题。

回到天气的核心能力上，人们使用天气大多数场景聚焦于以下3点：

1）当下温度、天气状况

2）这一天的温度、天气状况变化

3）未来一段时间的温度、天气状态变化

综合来看，是两个维度，当下和变化。

对于当下瞬间的展现，通过具象的背景+超大号数字来传达信息，仍不失为一个好的方案，就不做过多的探讨；

对于变化，尤其是温度，纯数字的展示似乎不够直观，用户需要从数字关联到温度的高低是需要进一步的认知转化。比如：18度是高还是低，需要添衣还是解衣。如下图：

解题

如何形象化地展现温度变化？

形状和颜色是我们常用的方式，结合天气的特性，大家很快把思绪走到了带有颜色和高低起伏变化的温度曲线上，如下图：

（配图示意，仅供参考）

每天温度最高点时为红色（暖色），温度最低点时为蓝色（冷色），中间的曲线按照色环渐变。

察觉

这样就可以了吗？

稍加思考便会发现其中的问题，在夏天，一天的最低温度也可能30多度，仍然是热的不行，使用冷色调来表现不合适，不符合用户对温度的认知。

那改为温度与颜色绝对匹配的思路呢？每个颜色固定一个温度。

这样子就解决了温度认知与色彩认知不符的问题。

但也存在新的问题，在现实中，可能一天温度相差仅仅只有几度（虽然只有几度，但用户仍然有灵暖变化的感知），色彩变化就会很不明显，无法传达感知变化，达不到设计目的。

如下图：

所以，是绝对还是相对？是理性还是感性？

破题

为什么不能是两者皆有，寻求平衡呢？

灵光一闪，有了新的设计思路：

曲线中的最高温度和最低温度来自于两个色值表，最高温度的色值表色彩向暖色调偏移但不违背低温采用冷色调的原则，最低温度的色值表色彩向冷色调偏移但不违背高温用暖色调的原则。（如下图）

有了最高温度和最低温度的色值后，按照色环渐变显示在曲线上。

通过两个色值表来刻意的制造色差，强调颜色的变化，以此来完成设计的初衷。

至此，达成了一种相对的绝对，理想与感性的平衡。

最终效果

结束语

我想起之前面试时曾有人问过，设计师（交互设计）到底是在做什么？

通过这次分享，我想表达的交互设计是在消解数字世界与人之间的隔阂，了解人的感性与理性，在数字世界中展现并寻求平衡。