在成功交付了“碰一碰”功能的 Demo 后，我在团队中的地位悄然发生了变化。同事们遇到鸿蒙相关的问题，开始习惯性地来找我来讨论；PM 在规划新需求时，也会优先征求我的技术意见。我不再是那个跟在后面追赶的“转型者”，而是逐渐成为了团队在鸿蒙领域探索的“排头兵”，一切都源于这个机缘。
这种被认可的感觉，让我对鸿蒙开发的热情空前高涨。我甚至开始利用业余时间，主动去研究 ArkUI 更深层次的渲染机制和动画原理。我以为，只要技术够硬，就没有攻克不了的难关。
然而，我很快就发现，有一种挑战，它不讲逻辑，不讲代码，只讲“感觉”——那就是来自设计师的挑战。
我们团队的主力设计师，桃子姐，是一个在业内小有名气的美学“偏执狂”。她对像素、色彩、圆角、动画曲线的敏感度，已经到了令人发指的地步。她的口头禅是：“设计稿上的每一个像素，都有它的尊严。”，说实话就有点太BT了。
在之前的 Android 开发中，我就领教过她的厉害。她会拿着一把尺子量我开发出的界面，然后指出某个按钮的圆角“比设计稿大了 0.5dp”；她会用慢放镜头录下我的动画，然后批评我的动画曲线“缺乏呼吸感”。和她合作，就像是在走钢丝，既痛苦，又收获巨大，哈哈哈，这种纸窒息感让我现在写文字我都浑身一颤。
随着我们鸿蒙项目进入全面开发阶段，桃子姐也拿出了她呕心沥血的“鸿蒙版 UI 设计规范 2.0”。那份设计稿，只能用“惊艳”来形容。它完美融入了鸿蒙的自然色彩、卡片式布局和微动效，充满了呼吸感和生命力。每一页都像一件艺术品。
“阿杰，” 桃子姐把设计稿推到我面前，眼神里带着不容置疑的坚定，“我们的 App，必须拥有纯正的‘鸿蒙血统’。它不能只是一个跑在鸿蒙上的‘安卓应用’，它本身，就应该是鸿蒙生态的一部分。我要求，100% 还原设计稿！”，还是非常值得令人敬佩的，这种专业度。
“100% 还原”，这五个字像五指山一样压了下来。
我接到的第一个“硬骨头”，是一个设置页面。页面里有大量的开关（Toggle）、选择器（Picker）、滑块（Slider）等控件。桃子姐对这些基础控件的交互细节，提出了极致的要求。
“你看这个 Toggle，” 她指着设计稿，“它关闭时的灰色，不是 #CCCCCC，而是带有 5% 青色的冷灰。打开时的蓝色，是有渐变的活力蓝。切换时的动画，不是简单的线性变化，而是一个‘先快后慢’的缓动曲线，时长必须是 280 毫秒，这样才显得‘果断而不突兀’。”
我听得头皮发麻。这已经不是简单的功能实现了，这是在用代码进行“艺术创作”。
我试图用 ArkUI 的原生 Toggle 组件来实现。然而，我发现要自定义它的颜色、轨道形状、动画曲线，需要用到大量的自定义样式和复杂的 animation 属性。我花了一个下午，写了几十行代码，调出的效果依然和桃子姐的设计稿相去甚远。那个蓝色，总是偏了一点；那个动画，总是显得有些生硬。
“阿杰，你这个开关切换起来，感觉像得了‘关节炎’，太僵硬了。” 桃子姐在我身后冷不丁地冒出一句。
我的脸瞬间涨得通红。
接下来的几天，我和桃子姐的“战争”全面爆发。
“这个 Picker 弹出的动效太突兀了，应该是一个从底部平滑滑入，带有轻微阻尼效果的动画。”
“这个 Slider 的滑块，在按下去的时候应该有一个放大的涟漪效果，松开时再优雅地收回。”
“页面切换的转场动画不能用系统默认的，我们要用共享元素转场，让用户的视觉焦点保持连续。”
我感觉自己快被逼疯了。我每天的工作，不再是构建功能和逻辑，而是在和各种 animationTo、curve、transition 参数作斗争。我写的代码越来越复杂，逻辑越来越混乱，但实现的效果，在桃子姐的“像素眼”下，依然是“差了点意思”。
最让我沮丧的是，我们之间的沟通变得非常低效。她用“呼吸感”、“生命力”这些感性的词汇来描述她的设计，而我只能用冰冷的 duration、delay 这些理性的参数去尝试。我们之间仿佛隔着一条无法逾越的鸿沟。
“也许，ArkUI 的能力就是这样，它实现不了这么精细的自定义效果。” 我甚至开始为自己找借口。
直到那个周五的下午，我们又一次因为一个列表项的按压态效果发生了争执。她想要一个带有毛玻璃模糊背景和轻微上浮的立体效果，而我调了半天，背景模糊总是会卡顿，上浮的阴影也显得很假。
“阿杰，你是不是根本没理解我的设计？” 桃子姐的语气里带着一丝失望。
我的情绪也到了爆发的边缘：“我已经尽力了！你说的那些‘感觉’，代码要怎么写？你给我写一个看看？”
空气瞬间凝固了。我们俩都愣住了。
就在这尴尬的时刻，我脑海里又一次，像神启一般，闪过了那个熟悉的 App 图标——HMOS 代码工坊。
一个大胆的想法在我脑中形成。
“桃子姐，” 我深吸一口气，平复了一下情绪，“你等我一下。”
我没有再碰我的代码，而是打开了 HMOS 代码工坊，径直点进了那个我曾经无比熟悉的【组件库】。我找到了 Toggle、Picker、Slider 这些让我们争吵不休的组件，然后把手机递给了桃子姐。
“你来看这个。”
我点开了 Toggle 的详情页，把那个神奇的三栏式界面展示给她看：预览区域、属性调整区域、示例代码区域。
“这是什么？” 她好奇地问。
“一个‘活’的设计稿。” 我说。
我引导着她，在“属性调整区”里找到了控制 Toggle 颜色的选项。我对她说：“你别告诉我色号，你直接在这里调，调到你满意为止。”
桃子姐半信半疑地接过了手机。她开始尝试调整颜色，当她看到顶部的“预览区”里的开关颜色随着她的操作实时变化时，她的眼睛亮了。更让她惊喜的是，当她调整完颜色，右下角的“代码区”里，已经自动生成了对应的色号代码。
接着，我又引导她找到了动画曲线（curve）的选项。里面有 Linear、EaseIn、EaseOut，甚至还有一个可以自定义贝塞尔曲线的 cubic-bezier 选项。
“你别和我说什么‘呼吸感’，” 我把手机递还给她，“你亲自来试试，看哪个曲线最符合你想要的‘感觉’。”
桃子姐彻底被这个功能吸引了。她像一个得到了新玩具的孩子，沉浸在这个交互式的“设计实验室”里。她不断地调整着参数，观察着预览区的实时反馈。她甚至不需要我，就能自己找到 width、height、borderRadius 这些属性，去微调控件的形状。
那个下午，我们没有再说一句话。我的工位旁，只有桃子姐时不时发出的“喔！”、“原来是这样！”的惊叹声。
大约过了一个小时，她把手机还给了我，脸上带着一种如释重负和兴奋交织的表情。
“搞定了。” 她说，“我把所有控件的样式参数都在这里面调好了，并且找到了我想要的动画曲线。你看代码区，这就是我想要的‘最终设计稿’。”
我看着代码区里那些由她亲手“调试”出来的精确参数，心中百感交集。
HMOS 代码工坊，在这一刻，成为了我和设计师之间沟通的桥梁。
它用一种最直观、最无歧义的方式，打破了设计语言和代码语言之间的壁垒。设计师不再需要用抽象的词汇来描述需求，她们可以直接上手“玩”出自己想要的效果，并直接产出开发者能看懂的、可执行的代码。而开发者，也无需再去猜测设计师的“心意”，我们得到了最精确的“实现说明书”。
那一天，我们之间所有的矛盾和争执，都烟消云散。
后来，我又向桃子姐展示了【实践】模块。那里有一整套关于“HarmonyOS UX 设计理念”的文章，系统地阐述了鸿蒙官方推荐的设计原则、美学特征和交互范式。
“天哪！” 桃子姐看着那些文章，如获至宝，“这不就是我一直在寻找的理论依据吗？它把鸿蒙美学的‘道’给讲清楚了！”
从此以后，我们的合作模式发生了颠覆性的改变。每当有新的 UI 需求，桃子姐会先在 HMOS 代码工坊里把核心控件的样式和动效“玩”出来，然后把代码区的参数截图给我。我的开发效率和还原度，都得到了前所未有的提升。我们的 App，也终于开始散发出那种纯正的、精致的“鸿蒙范儿”。
我以为，在攻克了 UI 和设计这两座大山之后，我的鸿蒙之路将一马平川。直到有一天，公司 CTO 找到了我，他对我提出了一个更高维度的要求——架构。他想知道，我们这个小小的“先锋队”，将如何构建一个能够支撑公司未来全场景战略的、可扩展的、大型鸿蒙工程。而我，对此，一无所知……
资源传送门：
📱 下载HMOS代码工坊
- 打开华为应用市场，搜索"HMOS代码工坊"进行下载（要求移动端HarmonyOS系统版本为5.1.0 Release及以上）。
🔗 看源码学习
📚 深入学习
👥 加入社群
- 关注：HarmonyOS开发者技术公众号， 进群与鸿蒙技术大拿交流
扫一扫
317
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
