《HarmonyOS实战—交互的艺术》

【本文正在参与“有奖征文 | HarmonyOS征文大赛”活动】

文章目录

1. 前言
2. 界面交互方式的发展
3. 原子化卡片服务
- 3.1 什么是原子化卡片服务？
- 3.2 原子化卡片服务可能存在的问题分析
4. 卡片设计的注意事项分析
- 4.1 卡片设计宗旨[^5]
- 4.2 卡片风格
- 4.3 规范和人体工学上的考量
5. 总结

1. 前言

大家好，我是 Jiaming，是一个嵌入式操作系统方向的在读研究生，这篇文章是我对原子化交互方式的一些思考，欢迎沟通交流。

2021 年 6 月 2 日，正式发布的 HarmonyOS 2.0 让人耳目一新，这款面向未来、面向全场景的分布式操作系统承载了太多的期待与责任。从 2012 年，华为规划自主操作系统起始，到如今已经走过了九个年头，乘风破浪，披荆斩棘，直到 2021 年 6 月，这个被外界唱衰也好，被周围人期待也罢的国产操作系统终于诞生了¹。

本文的主要内容是，首先，从我自身的角度来梳理手机交互方式变化的历史脉络，然后，谈谈我对这种新的交互模式的思考，最后，将会对这种原子化操作设计方式的注意事项进行分析探讨。

2. 界面交互方式的发展

迅猛前进的技术扩展了手机的功能，逐步改变了手机的交互方式²。我认为，界面交互形式的发展与科技的进步是密切相关的，所以我将以科技的发展为索引，来探究交互方式的变化。

2.1 1G 模拟制式手机

我们熟悉的“大哥大”就是该领域的代表，它是一种模拟的移动电话，于二十世纪八九十年代开始流行，由于当时的电池容量限制和模拟调频技术的不成熟，需要硕大的天线和以及庞大的集成电路，导致其外表四四方方，十分硕大。这种手机有多种制式：NMT、AMPS 和 TACS 等³。

由于技术的限制，这种手机仅有简单的按键和狭小的屏幕，除了拨打电话之外不能提供额外的功能，仅仅是拨打电话这个“唯一”的功能，有时还并不是那么好用，对于这一代的手机来说，产品本身已经是聊胜于无，更别提其交互设计的艺术思考，那更是不可能的事情。

2.2 2G 数字手机

第二代手机较为常见，通常这些手机使用 PHS、GSM 或者 CDMA 等标准，具有较为稳定的通话质量，在体积方面，由于集成电路的发展，也变的更加小巧，相较于第一代手机，携带更加方便，这为它能够普及奠定了基础，同时显示屏幕也更大，这意味着它能够显示多行信息，也就是说，显示信息的维度从一维变为了二维，这使得这块屏幕能够创造更多可能。

由于技术的进步，该版本的手机支持了彩信 GPRS 业务和上网 WAP 服务，同时也能够支持 Java 程序，这进一步丰富了用户的视野，让这个小物件提供了更多的可玩内容。

小巧的体积、更为稳定的通话质量和较大的屏幕，这些使得这一代手机可以显示二维图像，而不只是简单的数字点阵，对于当时的人们来说，这何尝不是打开了新世界的大门？

2.3 3G 多媒体手机

3G 多媒体手机，是指第三代移动通讯技术。第三代手机完全是通信业和计算机工业相融合的产物, 它除了能完成第二代手机所能做的语音通信外, 还能进行多媒体通信, 同时语音通信的质量大为提高，用户可以在第三代手机的触摸显示屏上直接写字、绘图, 并将其传送给另一部手机, 而所需时间可能不到一秒²。

3G 手机诞生了一种新的交互模式，用户可以直接与显示屏进行交互，而键盘空间被逐渐增大的显示屏所挤占，在硕大的屏幕上，我们将服务打包为一个一个的应用，不同于 2G 时代的黑白或低画质界面，3G 手机带来的绚丽缤纷的界面着实让人眼前一亮。新的交互模式促进了多媒体技术的发展，我们可以看电影，浏览图片，上网冲浪了！

北京时间2009年6月9日凌晨，相比对于果粉来说，这是一个相当令人难忘的日子，iPhone 3GS 诞生了！屏幕下方的 HOME 按键和硕大的 3.5 英寸屏幕尺寸让人惊呼：手机原来还可以是这个样子。从那以后，我们在手机上听歌，看电影变得再稀松平常不过，这一切都要得益于技术的进步，我想是技术推动了交互方式的创新。

2.4 4G 智能手机

第四代移动通信技术手机，在传输速率上，4G 通信速度理论上达到 100Mbps，在通讯带宽上比 3G 网络的蜂窝系统的带宽高出许多。2013 年，中国移动 4G 进入规模化发展的新纪元。

4G 相比 3G 最明显的感官就是速度更快。速度更快就意味着我们可以做更多的事情：视频会议、在线游戏、手机阅读… 这一切在 3G 时代无法想象的事情，在 4G 时代，我们可以做到了！

技术的发展使得我们的交互更加细腻，举例来说，长按APP 图标快速选择程序功能、APP 抽屉的引入让我的界面变得干净简单、负一屏的使用让我们更专注某些 APP 的某些功能…这些改进固然有益，但是，感觉还是没有触及根本？我们的屏幕好像在越做越大，每个 APP 都想挤占我们本就可怜不堪的屏幕面积，发展好像陷入了停滞？

2.5 5G 网络节点

即第 5 代移动通讯技术，是最新一代的蜂窝移动通信技术。相比较 4G 网络，5G 有以下优势：高网速、低延迟、多链接。

高网速。 5G 理论传输速度是 4G 网络的几百倍，可以到达每秒几十GB的传输速度。超高的传输速度意味着可以有更多的玩法，比如我们可以看到全场景的视频，并且图像清晰流畅。
低时延。 5G 的网络时延能够降低到 1ms 以下。低延时意味着无人驾驶、远程医疗成为了可能。
多链接。 将人与物，物与物广泛链接，真正实现万物互联。多链接意味着我们能够将我们的城市设施、家具家私链接起来，构成网络的一部分，为他们赋予智慧。

5G 时代为什么要称作网络节点？这是我起的一个名字。我认为，5G 带来的万物互联的优势让我们能够链接身边一切可以链接的物体，为他们赋予生命，让他们能够切切实实为我所用。

新的技术带来的新的挑战，那就是不同于以往 4G 模式的交互方式，只在目前智能机上进行修修补补肯定不能满足控制万物的需要。试想一下，你的手机里面安装了电饭煲的 APP，又安装了洗衣机的 APP，并且每个 APP 所占空间还不小，我想，这是用户无法忍受的。那么，解决方案是什么？我想，原子化卡片服务给了我们一个很好的思路。

3. 原子化卡片服务

3.1 什么是原子化卡片服务？

增加卡片功能的同时不给用户增加学习成本。 在 APP 图标下面增加了下划线，只需要轻轻上滑，就可以打开卡片查看内容或者进行操作，比如可以快速自拍。仅仅一个简单的下划线，背后所蕴含的设计智慧是让人钦佩的，它减轻了用户的学习负担和记忆负担。
将 APP 功能拆分，只提供你需要的功能。 将 APP 的卡片直接固定在桌面上，就能提供一个凝炼了某个功能的模块，让用户快速进行操作，相较于打开每个 APP 去查找相应的功能简直要好太多。你能够在一个桌面上同时显示超多的应用，并且这些应用的功能选择你可以自定义。举例来说，我们可以在一个屏幕中同时显示打车按钮、地图入口…
原子化卡片重新定义了 APP。 我们可以通过原子服务，在一个没有安装游戏的平板电脑上利用手机上的游戏以及算力实现玩游戏。这种跨平台场景是其它技术无法实现的。
原子化卡片定义了一种新的交互形式。 无需安装 APP，在多个设备间实现了最小成本的功能迁移，这方便了用户，又何尝没有方便开发者？是的，开发者只需要一次开发就可以实现多平台部署，极大地调动了开发者的积极性。

3.2 原子化卡片服务可能存在的问题分析

一个好的交互系统对用户来说需要有学习成本，对于开发者来说需要重新思考自己的设计模式，以我目前浅薄的了解和技术储备，以下分析仅供参考，欢迎批评指正。

从用户角度出发：

学习成本。我们不得不考虑用户的学习成本问题，为了能够极大地向用户展示多平台协同的强大，用户能否熟悉卡片的使用？能否深刻体会到万物互联交互的精髓？可能需要时间的检验，这也提醒着我们，是否有更加平滑性过渡性的交互模式？也就是说目前加入下划线的设计方案是否仍然过于激进？
经济成本。如果要深入体验鸿蒙系统带来的便捷性，那么意味着用户可能需要具备多个设备，这对于用户来说是否值得？我们是否需要深挖一台设备中的用户体验？

从开发者角度出发：

软件设计思想转变的困难。对于同一软件不同的使用设备以及使用场景，对于开发者来说，需要考虑的因素更加复杂：软件在别的设备上好不好用？需不需要进行不同的优化？这都会为开发带来额外的考虑。
开发规范制定的必要性。对于一种全新的开发方式，我们需要一种全新的开发规范来进行指导，如何制定这种规范也是一个问题。

4. 卡片设计的注意事项分析

针对原子化卡片设计，我参考了一些文献，这里我说说自己的看法。

4.1 卡片设计宗旨⁴

^{降低用户的记忆负担，让用户的浏览过程更加容易，方便客户使用。充分考虑使用性能和功能性能；}
^{交互内容的丰富性。设计人员在设计界面时，应做到交互内容丰富性，能够满足用户多方面的需求；}
^{页面布局的清晰化。有序、清晰、主次分明，保持信息位置的一致性；}
^{主体性原则。充分了解用户对卡片界面的功能需求、心理需求；}
^{一致性原则。卡片界面的图标要具有统一性的特征，能够方便用户记忆；}
^{直观性原则。灵活运用图片、文字、颜色表现出不同的设计理念，满足客户个性化的需要；}

^{4.2 卡片风格}

^{界面整体布局、界面风格、UI 设计是 APP 设计中的重要一环⁵，我认为这对于卡片设计也同样重要。}

卡片风格要与设计风格统一；
卡片的设计要有明确的指代含义，要给用户主要印象；
UI 界面的设计是一个整体布局的工作，卡片设计要有全局观；
可以参考扁平插画设计风格。一方面能够消除冗余、厚重和繁杂的装饰效果，用偏几何化的图形和明快的色彩来塑造外部轮廓，另一方面，能够增加趣味性，使文字内容更加生动、更具象，在突出主题思想的同时增强艺术感染力⁶。

4.3 规范和人体工学上的考量

卡片设计需要一定的规范性⁷；
对于灵活地交互模式，防误触设计十分重要⁸；

5. 总结

交互设计实际上就是在人和产品或者服务与系统之间进行一系列对话创建。在 UI 设计中，应以人性化理念作为设计的基本概念，并坚持以人为中心的设计原则，在设计人员的较高软件应用和设计能力支持下，来促进 UI 设计的不断提升和目标实现⁹。

我们用小球链接大球，小球越多意味着能够被我们所用的服务也就越多，摒弃了 4G 时代仅仅是万物联网的假互联，通过将底层打通，真真正正地实现了我们脑中想要的那个互联互通的样子，鸿蒙在路上，即便它失败了，它仍然是我们国家迈出的重要一步，它值得被铭记！

鸿蒙加油！

https://baike.baidu.com/item/%E5%8D%8E%E4%B8%BA%E9%B8%BF%E8%92%99%E7%B3%BB%E7%BB%9F/23500650?fr=aladdin ↩︎
周睿.浅谈手机界面设计交互方式的发展趋势[J].南京艺术学院学报(美术与设计版),2007(02):129-133. ↩︎ ↩︎
https://baike.baidu.com/item/%E6%89%8B%E6%9C%BA%E5%88%B6%E5%BC%8F/914053?fr=aladdin ↩︎
鹿峰.基于安卓系统的手机APP交互界面的设计研究[J].电子世界,2020(17):63-64. ↩︎
李泗兰,郭雅,陈天铸.UI设计在手机游戏界面中的研究与应用[J].电脑知识与技术,2021,17(15):199-201. ↩︎
侯菲菲.扁平风插画在手机APP界面设计中的应用研究[J].枣庄学院学报,2021,38(03):136-140. ↩︎
卿立兴.手机APP图标设计规范探讨[J].内江科技,2020,41(07):48+51. ↩︎
明祥凤.手机屏幕误触的软件优化设计[J].信息与电脑(理论版),2020,32(13):50-52. ↩︎
时枫哲,何程.互联网产品的交互应用与实践——手机UI设计的视觉传达[J].无线互联科技,2021,18(06):61-62. ↩︎