黑熊票务：设计规范应用总结

这个票务原本是做成小程序的，但后来因为平台限制改 H5了，所以顶部栏没办法做的很丑，而且这个 H5 因为特殊原因最终没有设计完成，但是我每次做新项目，对设计规范都会有更深的理解，这次把这个设计规范应用的一些小心得分享一下。

本文只分享我的设计规范应用历程，具体 symbols 的技巧那些我想专门写一篇文章介绍设计规范和具体操作。

背景

我从做 UI 起，就一直在探索设计规范的具体应用，在那么多大厂都亮出设计规范的时候，我这种小蚂蚁级别的项目为什么也要设计规范呢？

• 我本身喜欢设计规范，这种有据可循的设计，提高生产力

• 一个人负责设计的项目里使用设计规范可以提升设计效率

• 通过设计规范总结出组件库，在交付给开发的时候提升开发的效率

工具背景

• sketch - symbols

• measure - 标注导出工具

• mindnode - 思维导图

设计规范一定是边做边完善，水涨船高的东西

至少我的项目经理上来就说你设计规范什么时候能出来，就好像有了设计规范就万事大吉一样，在我探索各种大小设计规范的经历中，为了设计规范才做一个规范是纸上谈兵落不了地的，殊不知设计规范是一个坑一个坑砸出来的，切实的能应用到项目里，能让开发老老实实执行你的规范是要非常用心和细心的事情。

比如各种情况怎么应对，一个组件就能分离出很多种应对情况，但不要担心，一步一步来，并不难，逻辑要屡清楚，你自己都捋不清楚就别指望开发尊重你的设计规范，不然最后还是无用功。

1、导图先行

只有先在这里理清楚组件结构才能开始做，同时也是记录自己的组件结构不乱，随时可以核对，因为讲实话，设计规范、组件库，做久了自己看着都蒙逼，那这样的话岂不是跟我们的初衷「提升效率」是悖论吗？我的理解是尽可能只做基础的规范，很系统性的东西，把这些东西做好就够了。总之这个导图不但是你整理结构也是你的规范大纲，随刻保证整洁清晰。

重要前提：

• sketch 的 symbols 功能是核心，一切都是围绕这个功能来展开

• 在规划开发哪些能复用之前，先彻底屡清楚设计师哪些能复用，提升自己的效率才是第一位

2、前期规划好复用元素

设计师复用的东西非常重要，在规划导图的时候一定要想清楚，特别是那种频繁用到的小元素。

比如分割线我单独做了全局复用的 symbols，全局的前景色背景色我做了 symbols，这种东西在后期可以直接改一次，全局都自动更新，而这种思路给到开发也同样可以做到牵一发动全身的效果。

再次强调设计规范一定是你本人一个坑一个坑砸出来的，这样你才能得心应手，网上那些大小规范并不好用不是吗？不是说那些不好，而是那些东西跟我们手里的项目不是一个世界的。

这是项目半成品的 sketch symbols 截图，不要被吓到，这里有40%是不算设计规范的。具体牵扯到 symbols 的使用技巧我放下个文章专门讲设计规范，本文只是分享我的设计规范应用历程。

这里插一下图标，图标也是有规范的，这里的图标网格是我完全参考谷歌规范来做的，总体上我已经实践四五个项目了，很实用的图标规范，当然要灵活运用，不能被它框死，具体图标的心得请看《Sketch 新手奇淫技巧「一」画图标》

色板的复用要注意品牌色和分割线、前景色背景色，分割线是使用度最高的，这些色板根据 symbols 的应用，只能用作背景层，实际上文字的颜色并不能做到智能化的牵一发动全身效果，sketch 自带的那个文字样式我尝试过，那个如果做成规范用起来贼乱特别乱，使用体验非常差，反正我是弃用那个了。这里我们能做的只是把色板导出标注给到开发，告诉他们写复用就行了。

这个全局复用应该放在第一步说了，这种东西看似无足轻重，其实非常重要，就是典型的不做也无所谓但是做了贼方便的细节。这里主要规范那些全局性的尺寸样式，一定要跟开发讲清楚，讲透彻这个，他们做的时候就会提前写好，如此一来，等你验收 UI 的时候会非常省心的，这种规范一劳永逸，直接保证1.0出来以后不犯大错误，小错误也几乎没有，规规矩矩的一个UI，这是我踩了很多坑发现的细节。

常规的系统组件

这里没有整理排版，随便截两个图。重点就是这些组件的结构，怎么去规划，最方便作为设计师的你提升效率，千万不要为了适应 symbols 来做，所以东西都要为己所用。不然就是累赘，这一点很容易犯错误，切记，做的时候时刻记着这种东西是方便你自己用的。至于给到开发，你最终也是做好整体的标注图给他们，而 symbols 的结构怎么规划和开发无关。

自定义组件

APP 当然少不了自定义的页面，优先看能不能复用，如果可以就规规矩矩的设计，考虑其他环境下组件能否使用，保持统一，如果不能复用就单出页面。

整体流程

实际的工作流程是这样的，先导图规划，把最基础的组件做出来，比如前景色、背景色、分割线、顶部导航、底部切换栏，这些；

然后根据原型图开始撸图，而重点就是设计到哪你的设计规范就走到哪，设计到卡片就把卡片组件做出来，好好考虑以后迭代、其他环境的应用情况，整体就这样逐个击破，遇到做对话框了，就一起把对话框的所有样式做好，下次遇到直接调用，所以说设计规范一定是跟着项目一起完善的，第一版做完以后就可以整理规范了。

交付给开发之前，一定要站到开发的角度，用他们能看懂的排版布局去做设计规范的板式，一定要明白，这个设计规范不是做出来多漂亮，这套规范最对口的是你的开发兄弟，要让他们用的舒服用的爽才是第一位的。

下一篇会讲如何做一套设计规范并落地的操作方法。