回顾前篇地址：https://www.ui.cn/detail/606918.html?nopop=1

制定《设计指引》分为几个阶段：分析、前置验证、创建指引（视觉/交互），以下我就以IOT项目具体案例进行阐述

分析阶段

常见的分析方法可以使用SWOT矩阵，因为现公司所做的一部分事务是IOT产品线，涉及到硬件屏幕交互（和车载HMI类似）需要考虑的不仅仅是软件因素，相对纯软要多分析一些硬件人机的因素及配置层面的影响因素，纯软的同学可以忽略这层考虑

从矩阵中不难看出我们要着重关注“视觉上机效果”“交互在设备上的实现性”；那我们在拟定主风格前，应当着重对现有设备屏幕、内存等进行前置验证

前置验证

前置验证的方法可以通过测试样例（色卡、对比度卡片、lottie或视频格式）烧录至主屏幕中去测试其屏幕显示能力、内存加载能力

具体记录好测试较为舒适的编号，就可以定义我们的主色等相应的规约；前置验证主要是为了在设计主风格前就验证好可行性，这样不会造成设计好规范发现上机不合适等返工的现象；这个前置验证的方法有机会我也会具体再介绍

视觉指引

言归正传，我们通过问题点提炼出指引的方向；屏显能力对应色彩范围和对比度、透明度、字体大小等；市场细分对应提炼出风格所需的DNA（造型、质感）

在做视觉指引和交互指引的时候，都应当标注制约好我们设计可行性范围，如下图对比度，在什么情况下我们视觉反馈是最好的，绿色就是推荐的对比度关系

用类似的方法标注好主色安全范围进行框定后，协同的设计师就知道哪个色彩范围是适合使用的

确认好大的范围，主设计师可以设计一些小样，来制定质感、渐变等视觉元素的使用范围，谨记围绕前篇提到的“不完全框定”原则提供给设计师参考

除此之外还可以写出你的建议性指导，由于圆角大小跟分辨率大小有关，无法准确拟定每台设备的圆角大小，我们甚至框定范围后肉眼比对圆角大小，倘若企业产品线上有区分高中低端，那圆角相对应的关系是如何也可以反映出来

交互指引

同样的我们把最早思考的制约因素带入到交互体验指引的框架中，屏幕触控敏感度决定易用性；分辨率大小影响直观性；内存影响交互效果；低端到高端由于基础能力不同需要不一样的框架布局

直观

顺应用户习惯、阅读引力等制定布局原则

易用

亲测真机体验并导出相应的报告；如聚焦与操作，关注用户点击常见范围、常见距离等

根据人群对软件熟悉程度，制定相应的交互操作,对常用、少用和慎用范围进行制定

因材施治

从前期SWOT分析中的“WO”“WT”得出结论：不一样的系统、不一样的硬件配置需要相应的交互策略，以便达到最好效果，设计指引制定中也要全程贯彻这一点

对于屏幕来讲，不同分辨率的安全点击是不同的，我们可以通过不同分辨率屏幕以及分辨率换算出最小的物理点击区域；制定这样的规约，让全体成员知悉明确“一定要考虑真实操作的上机效果”

“统一原则不同策略”：框架设计中，我们制定不管任何种类产品都使用“宫格配置方案”原则，但高中低机型分别有相应的策略（已申请专利），低端的RTOS机型只适合点击和跳转，无法翻页所以框架也应当简单

总结

总结一下，不管是视觉层面还是交互层面的设计指引，我们的方案需要保证原则相同，因材施治去制定不同的策略，保证用户体验一致性的同时达到最好的效果；发挥出家族、系列产品的最大优势前提下，圈定设计需要注意的范围，这才是更加精准的设计指引，也是保持和战略层方向更加接近的视觉策略

以上是本人对styleguide的用途理解和制定方法的沉淀，欢迎大家交流，说的不对还望轻喷指正；

styleguide原文可访问我们UED团队网址查看 https://www.yuque.com/leeued/styleguide/ar69lc《设计体验指引》

团队成员：Yoga__ 、 CCshiro 、 miayyy

原文链接： https://www.yuque.com/heiyunyachen/kd73zv/qt1kfh

Powered by Froala Editor