什么是设计指引？

设计指引（风格指引）简单地说就是对设计风格详细指南；也就是“不完全框定“的设计范围，什么该做什么是避讳的，罗列之后形成的体系，从而解决诸如“主设制作的风格，由其他设计师共同延续完成时出现风格偏差”、“新人需要遵循公司设计风格”等涉及风格延续的问题

我们知道设计指引（StyleGuide）它本身是一种设计规范，但又不等同于我们UX所熟知设计规范或是组件规范；我们了解的UX规范或组件是完全限定的，需要照猫画虎地复用到项目中；而风格指引则是前文中提到  “不完全框定” 的一种限定方向

听起来很拗口，我们可以从大厂的styleguide了解具体范围和做法

行业内常见的指引有这么几种：A 视觉设计指引（visual style guide）、B 编辑指引（editorial style guide）、C 交互建议（Rules of Interaction）;另外从开发者角度则有类似《Harmony Developer》其中部分导读就属于开发者的指南，由于我们仅讲设计的范畴就具体不多说鸿蒙的规约有多伟大，（可详见：https://developer.harmonyos.com/cn/documentation）

A 视觉设计指引（visual style guide）：视觉角度的指引范畴包含但不局限于 “图形图像” “品牌形象”  “IP”“产品设计语义理念（偏工业设计）”等

B 编辑指引（editorial style guide）：编辑规范、语料范围（AI语料）、文体话术；此块与产品、运营关联较大不予介绍

C 交互建议（Rules of Interaction）:人机交互方式、交互事件等 

（图片来源于网络）

视觉风格指引（偏品牌）

先从视觉风格来说，最早设计指引更像是由几大版权方发起的一场知识产权运动，类似迪士尼、华纳这样的企业均有自己IP形象分类及风格规约，他们除了重视对外维护其知识产权独有性并且对自身IP角色特性保护之外，还重视自己企业内部使用。一来能够解决自己IP自己作主，toB方面对方只能按照自己约定的范围来使用IP；二来对未来IP的延展设计也提供了相应的规范指导。这样一举两得的事情也就是为什么国外几个宇宙级大厂会花大量精力在打造IP形象及Styleguide上

迪士尼是生产IP的大厂，其各大类别的IP下衍生了许多小IP，那么这么多IP是如何创造价值呢？

先前接触过迪士尼IP授权的业务，不得不感叹其对IP世界观维护是相当严苛的，下文也会具体介绍一二；大到漫威、米奇、星战，小到木兰、大白，其各式各样的世界观均产生了不同的风格图册每样图册也对应着相应的规约，这样的图册用于出售其授权业务，有兴趣的厂商也可以通过迪士尼官方商务去洽谈购买授权。IP的资源生产相应的图册就能够给厂家带来价值，自然大厂愿意去做这件事。而画册中的Styleguide，约束了IP的使用方式方法，比如扁平化风格的画册中的米奇不能和3D风格的画册中的高飞在一起，这不仅仅是约束IP使用维护IP形象，是不是从商务角度说还形成了2次购买，购买两种风格的画册你就有更多选择权？具体也可以参考小米和迪士尼合作案中的样例（不同主题就使用不同的IP风格）

排除商业用处，图册中的风格指引也是一种效率工具，帮助企业或者授权方的设计师在范围内规范性量产。“不混淆，不穿越”，就是对IP之间的亲密关系和世界观的解释，比如米奇不能和尤达在一起厮混，这个是绝对不允许的，如果你发现市面上有米奇大战尤达一定是未授权山寨的产品，请举报给迪士尼；说到“亲密性”各大厂的UI组件规范里通常也会提到，也是在规约设计师能做什么不能做什么，可以联想观之，融会贯通。（以下图片来源于网络）

迪士尼人物不能和真实人物在一起，必须要用框与人物进行分割开，当然这块好像官方出品的迪士尼英语、迪士尼乐园就违背了这一点，但不影响 约束被授权方 

图册中还有相应的“3D风格”“扁平风格”的角色使用方法；这样也更好满足购买方的使用场景，比如我们的海报是孟菲斯风格就可以选用“扁平的米奇”，而如果是3D的软件界面中要用到IP就得用立体风格的米奇了。在其他设计领域中也出现过类似规约，比如材质需要对应风格。

少不了的还有尺寸规范，每个IP角色对应的身高关系；高飞和布鲁托身高一定要有比例否则人物关系就混乱了；网络上有句开玩笑的话就是说高飞和布鲁托 “同样是狗但我们不同”

除此之外还约束了IP各项行为准则：迪士尼人物不能作为贩卖员、迪士尼除公主外不能出现在城堡、人物用色不可更改、同版面不能出现两个及以上相同IP（没有影分身技能）、米奇不能拿枪不能引导少儿抽烟等等（dribbble上各种黑化IP的建议抓起来）；除此之外styleguide不会去规定你版式布局如何，如何限制你的创作是没有必要的，这也就是所谓的  “不完全框定” 的一种限定方向

视觉风格指引（偏研发）

前文书说，迪士尼世界观和我们UX提到的“亲密性”类似，我们反观UX也可以参考IP的风格指引去指定设计指南; 告诉团队内的设计师，我们的产品中的设计亲密关系是如何，极端情况是如何，不可取的点有哪些；设备UI（HMI、智能家居）还可关注像素密度、屏显中的对比度要求···

google 设计指引

我们来看下几个大厂的风格设计原则，首先看下Material(谷歌)，在放出其“New in  Android 12”的消息后，确实在行业内引起一些轰动；其在风格指引中仅制定了两项原则：color、typography;   但这两点也是这次更新的最大亮点，抓住特征也就抓住了风格走向

颜色上Material使用了一种叫做动态颜色的方式：用户可以通过壁纸选择和其他定制设置生成个性化的方案。以M3（基线色）为基础，用户生成的颜色可以与应用程序的颜色共存，将一系列可定制的视觉体验放在用户手中。确立关键色三个重点色，和两个不饱和的中性色。再由明度算法延展出相应的色彩（比如暗色用减光模式、亮色用加光模式）我们也可以大胆模仿出相应的规则来制定自己的配色逻辑，比如最简单的主色+调和色=悬浮和点击色

排版上，字体采用容器梯度配置的方式，在构建适应不同设备类型和屏幕尺寸的体验时，考虑扩大字体规模并在不同尺寸之间进行切换，以在每台设备上保留视觉层次和可读性。鸿蒙OS要做到 “不同设备相同体验” 估计也得考虑这个方面

这样的规则用在非研发领域也是适用的。比如我们所熟悉的VI规范有部分就是设计指引，告诉其他设计师能做的范围，至于怎么做都是由独立设计师自己去考虑的。简化的规则就是 ：容器载体+针对该载体的规则。设计指引不要为了限制而设立限制，要为量产和延续做设定

视觉指引奠定家族化

从前文中我们可以得出一个结论“载体中的规则就是家族化设计的关键”，这也就是为什么“视觉的设计指引”能够帮助塑造好家族化产品的形象，保证家族化视觉风格的一致性或者说关联性。设计从此有理有据，环绕始终，不管未来怎样，我们的产品都有一定的记忆点。

那么，独立品牌厂商需要选择什么样的产品设计路线？以智能家居产业为例，比如对比小米和欧瑞博，答案就是显而易见的。米家智能作为品牌接入平台，更希望的是产品个性化、多元化，自然对家族化要求不会很高，但其自身产品线可以考虑产品系列化设计；欧瑞博作为自主独立品牌则需要巩固企业产品形象，需要走统一路线，无论外观和UI均需要考虑家族化，

很多有一定设计师规模的中小型企业（独立品牌厂商）常常会出现产品风格单个独立来看没啥问题，就是放在一起各不相同；这是因为每个设计师理念、设计方式方法和认知度的差异造成的，倘若设计师之间有一份公约白皮书，保证方向一致，在范围内天马行空，相信有线的风筝才能飞得起来飞得更好;

交互建议

说完视觉层面，交互层面的指引则更像是“围绕理念的倡议”，如鸿蒙OS的“万物归一”的理念，设计文档中交互建议就围绕如何归一进行阐述

这里的交互也不仅仅是我们狭义说的交互设计，也包含人机工学和人机交互；其中可以包含：物理触控（点击、长按、滑动···）、物理感知（敲击、摇晃、平衡）、无接触（手势感知、动作感知） ··· 由于物理触控较为常见就不一一介绍，着重说一下无接触感知，无接触感知常见就是手势和姿势。手势常见的有切换、选中、截屏、静音等；姿势的话常见于拍照设备，如无人机、云台等都需要在无触控的情境下进行拍摄；有些需要借助第三方设备来控制的，比如控器，还可能需要对选择器的走焦进行设计指导,比如，遥控对电视机内容进行选择时，毕竟没有电脑鼠标和手机操控来的方便，所以焦点选择每一个选项都应当遵循“从左到右从上到下原则”

鸿蒙OS设计理念围绕“万物归一”，在所有交互事件中也做了事件归一。除了官方给我们的解释“各个设备对应交互事件规则”外，我们自己该如何理解？我画了一个操作对应事件关系帮助理解，如右下图，意思是多种设备尽量做到理解一致的交互（当然如果现阶段完全一致也很反人类），但现阶段可以这么做：比如移动端选中是单点是一次操作的，PC选中也需要一次操作（单击），保证操作次数的一致性。

保证一致性便于用户更换设备、更换使用场景的时候便于理解，能够较好指引用户的心智模型。所以我们看在交互层面，“设计指引”可以在一定程度上保证家族产品（多端产品）使用上有一定原则性的统一。

简短洁说，交互指引能够统一心智模型，保证家族产品使用一致性，任何设备端用户都能够快速上手使用。以上浅谈了下视觉及UX常见的设计指引，你是否有见过其他家优秀的指引也欢迎讨论；下一篇我也会着重介绍如何创建设计指引

Powered by Froala Editor