这几天，Figma 制裁大疆的消息相比大家都有所耳闻：Figma要制裁中国企业了？我笑了…
这不禁让人想起了之前华为被制裁后，只好自主研发鸿蒙系统。
当时我写了一篇试用感受，公众号里反响不错：我升级鸿蒙了，以为只换壳结果出乎意料！
在知乎更是刷新了我的最高点赞回答记录：
最近发现，这个鸿蒙系统居然有个挺详细的设计指南！
作为国内第一个出手机系统的科技公司，如果鸿蒙这个设计指南做得好，也许能引领国内移动端设计呢，所以我当然得看看。
P.S. 本文底部有链接。
这个设计指南在设计水平虽然还比不上苹果的 Human Interface Guidelines 和谷歌的 Material Design，但是在努力程度上并不比那两家差。
我感觉这三家手机操作系统设计指南的差异是这样的：
苹果：我给你点建议，细节就自由发挥吧
谷歌：理念、知识和模板都给你了，做不好设计别怪我
华为：我是这么做的，你可以参考一下
我感觉，对于做移动端设计的人来说，看一看华为鸿蒙这套设计指南肯定会受益良多。
因为他们真的有细致地讲解了自己是如何做设计的，好久没看到这么实诚的设计指南了！
国内的设计文档大多是 B 端的，例如字节的 AcroDesign、腾讯的 TDesign、阿里蚂蚁金服的 AntDesign……他们也都没有华为鸿蒙设计指南讲得那么细致。
接下来我就给大家介绍一下，为什么我觉得华为鸿蒙设计指南特别实诚：
🌈 颜色
📐 尺寸
🌟 样式
👆 交互
🎬 动效
由于这套设计指南包含的内容太多，这次以手机/折叠品/平板设计为例：
🌈 颜色
鸿蒙设计指南把颜色列得非常详细，不但有高亮色、背景色、前景色这些基本的，连警告色、通话色、选中色、分割线色这些都明确列出来了。
感觉就是鸿蒙设计部门做出来自己内部实用的。
对比一下苹果的 Human Interface Guidelines 的色彩规范，只给了这样的表格，每种颜色附带了色彩名称（红、橙、黄、绿、薄荷…）和调用名称。
顶多只能当作一个选择主题色的参考而已。
谷歌的 Material Design 倒是给出了比较详细色彩列表，但是主要是分了 Primary、 Sendary、 Tertiary、 Neutral Neutral Variant 这几种类别而已，并没有明确说出这些颜色分别要用在哪里。
📐 尺寸
鸿蒙使用的是虚拟像素 vp（virtual pixel），以确保可以用一套尺寸适应不同密度的屏幕。
设计指南里，把各种布局间距挺详细的，甚至连段落间距都有。
但是对于具体的空间，例如卡片、进度条、按钮这些，反而没有给到具体的尺寸。
苹果的 Human Interface Guidelines 是很少给尺寸的，就连图片也不是 1:1 的，以前做 App 时经常得截图自己量参考尺寸。
谷歌的 Material Design 一直在尺寸上很贴心，控件尺寸这一块展示得比华为的鸿蒙设计更贴心：
🌟 样式
鸿蒙对于常见样式，给出了比较详细的说明。
例如圆角，就规范了 5 种类型，还给了一张详细的圆角尺寸列表。
阴影也是，给了几套样式，参数也提供了。
苹果的 Human Interface Guidelines 也是几乎不会提供具体的参数。
谷歌的 Material Design 以前也是给出了一些阴影规范，倒是到了最新版的 Material You 就没有了，主要可能是因为最新版不再推荐使用阴影样式了。
Material Design 没有提供圆角规范，主要是因为他们认为这个属于自定义范畴，还提供了主题设置工具。
👆 按钮
鸿蒙把自己的交互规范写的很详细，连触控识别、随铃声震动这种参数都提供了。
组件状态也是很齐全，加载按钮还有动画演示。
同样是按钮，苹果 Human Interface Guidelines 只给了几种尺寸和简单的样式，并没有提供交互状态规范。
谷歌 Material Design 虽然没有罗列太多的样式，但是把交互效果的原理给解释清楚了。
虽然按钮没有把交互状态展示出来，但是 Chips 标签却有展示。
🎬 动效
华为鸿蒙设计指南经常使用视频来展示动效，例如下图的标题和导航栏。
苹果 Human Interface Guidelines 文档里图片都不多，几乎没什么动效展示。
谷歌 Material Design 里动效做的不错，虽然新版里多用图示少用视频了，但动效质量还是一如既往的高，还会把触控点展示出来。
总结
总的来说，华为鸿蒙这套设计指南细致度较高，很适合对 App 和设计规范感兴趣的人看看。
尤其是对于其它手机友商来说，可以拿去直接“借鉴”了。
但是如果想要学习设计，华为鸿蒙这套设计指南过于强调自己的系统，而较少为 App 开发者或设计师考虑，比不上 Material Design 贴心。
而苹果 Human Interface Guidelines，就真的纯粹是个指导你开发 iOS 应用的文档，提供的学习资料并不多。
这么看来 Material Design 真的是很好的资料，去年年底我们知识星球的小伙伴还翻译了一份中文版，免费分享给大家：
我把华为鸿蒙设计指南的链接放到文章底部的「查看原文」了，欢迎取用。
另外，分享一份可免费商用的鸿蒙字体：
本文来自微信公众号“体验进阶”（ID：Advanced_UX）。大作社经授权转载，该文观点仅代表作者本人，大作社平台仅提供信息存储空间服务。
