原来设计规范不需要死记硬背！腾讯设计师是这么理解和运用的！

Hi，我是彩云。经常在读者群里看到有人讨论，面试时被问到设计规范相关问题，不知道怎么回答才好。是不是要回答设计规范的具体尺寸，再把各种适配规则全背下来呢？今天彩云就和大家一起探讨下，到底要如何理解并运用设计规范。

什么是设计规范？

设计规范是一个老生常谈的话题了，网上 L e L } {相关的文章也非常多，但我相信有很多设计师对设计规范的理解还是比较模糊，认为设计规范指的就是字体，颜色，控件规范那些，这种理解其实是比较狭隘的。

于我而言，设计规范用一句话总结就是：设计规范是针对特定产品所制定出来的一整套产品标准，包括流程标准，技术标准，设计规则等等。通过这套标准，能减少错误发生率并提高设计质量和输出稳定性。

举个例子，我在做QQ的3D厘米秀项目T ) ; } ! # @ +的时候，一开始合作方提交的设计资源正确率很低，风格也各不d w W N V H d 7相同。然后为了解决这个问题，我在项目中定义了流程标准，资源标准，cp合作标准等等。通过这些` ? P E E %规范让多个不同设计团队能合作到R 6 ! m : W * j一起，提升了整体协作的效率和质量，这些标准就成了设计规范的一部分。

可以说，每个项目因合作方式，人员习惯，落地形式的不同，所形成的规范是有区别的。所以，设计规范更应该是针对项目来说的，除非是问你Android或iOS这种已经广1 * G 1 g泛适用K + f V 6的平台级规范。不& W ; . { 5 / B ?然是很难有标准答案的，回答更应该是一种思路的描述，比如你会如何定义一套规范、解决了哪些问题以及如何验证这套规范真的助力了产品的体验提升。

设计规范的作用

1. 遵守用户习惯，减少认知成本

Don’t make me think。大家都知道，好用得产品都是尽可能的减少用户思考，不断去贴近用户的使用习惯。比如在iOS系统里想返回上一个页面时，你会熟悉的去左上G 5 R / _角Y X { }找返回操作，但如果把返回操作放在右上角就会很不习惯；再比如对国内用户来K l G说，他们习惯正确按钮用绿色，错误按钮用红h / w e S {色，如果你非要反过来制造所谓的差异化，用Q o l 3 j户就会感到困惑，误操作的概率也可能会大量增加。

2. 统一品牌性格

品牌性格不论是大到公司层面，还是小到具体某一个| _ E X产品，都需要有一套品牌识别体系来约束，只有统一得视觉印象才能更好的让用户记住。那这些品牌识别体系其实也是设计规范的一部分，在具体执行中，可以] H k S + s A根据一些品牌核心概念规范快速做一些风格决策。

比如腾讯QQ的品牌影像风格关键t n V t n : k w词是青春、互动，叙事和干净，那么在选择画面配色的时候就可以1 D : n K q s根据关键词指导画面的选择，使得整体的画风得到统一。

3. 降低新人学习成本

这里所说的新人i f : & 5不; v (单纯指刚入职场的设计新? H : O人，也包括刚参与到一个新项目的设计老手，设计规范是能够以最低的沟通成本实现快速上手。有成熟的控件资源和标杆的设计参考，就算是之前完全没做过的设计师也能搭建出一个还不错的页面。

4. 提高开发效T x C L . c率

有了好的设计规范，开发就能把一些常用的样式进行封装，在需要复用的场景中直接调用。I q g G I这样做，一方面可以通过调用的方式减少样式代码的复制使用，提升效率的同时降低软件包体积，另一# L G C g . X方面也可以减少不必要的工作量m g d x g V [ P，方便后期维护。

5. 保证设计的一致性

有设计规范的约束，能让团队在一个b c V l既定的框架内做设计，统一大家的输出质量，从而保证设计的一致性。

怎么学习设计D C n J Y @规范

设计规范的学习肯定不是靠死记8 ^ t i e w h J *硬背，而是要讲M F Z g究方法，从我自身的经验来说，我觉得大致可以有以下2个步骤：

在新手期，多去看一些大厂的设计规范，先建立认知，不要求全部记住。把这些规范当成字典，先大致了解一遍，等真正做的时候拿不准再去查阅就好了。这里推荐几个必看的大厂设计规范官网，建议收藏。

• 苹果iOS设计官网：https://developer.apple.com/design/human-z K v m v I J 8interface-g] o 5 ~ x I } 8uidelines
• 谷歌Material Design设计官网：https://materialx T q.io/design
• 微软Fluent Design System设计官网A } u T z : 0 I y：https://www.microsoft.com/dE G mesign/fl3 | = ~ suent
• IBM$ p ? # _设计官网：https://www.ibm.com/design/language
• F2 & S U ^ W *acebook设计官网：ht$ c 1 9 ) / r Ftps://design.facebook.com
• 蚂蚁金服设计官网：https://ant.design/index-cn

其实网上很多设计规范，原% l g g O (理之类的文章，源头都来自于这些大厂规范，想获得一手信息，最好是自己去这些o B u M d u n ^ ;网站多看看。

这也就是我为什么不写具体规范数值的原因，因为网上的资料实/ l , { b Q 7 N在是太多太详细了，写一些/ 6 [ Y q ` d重复的知识实在是没多少价值。学知识的路上一定不要什么都等别人喂给自己，需要更多的主动性，这样才能提升自己的学[ ) . X习能力和解决问题的能^ _ z } ! V ~ C O力。

针对自己要做的模块，e w ) ]有针对性的找市面上大厂的应用作为参考，直接截图标注，自己总结规律印象会更加深刻。

我开始做UIx J I } I 9 !的时候就这样学习的，不知道字体该用多大，间距用多大，颜色怎么用，就直接去找相类似的界面截图参考，量它们的尺寸，吸它们的颜色，然后就这样一步步的把规范经验积累起来B k 6 I H 3 l了。

比如从QQ的动态tab页面中，我们可以借鉴到很多信息，比如列表的Q Z F , J ` s高度，列表左侧u / { c / !的图标尺寸和圆角，间隔线高度和配色，右侧的箭头大小和配色，列表文字的字号和配色，用户头像* y ; Q & 3大小和结合的样式，图标与文字的间距等等。这些借鉴并非是抄袭，要你做的跟这个界面一模一样，只是参考这z 2 L O Z #里面的某几个属性然后结合自己的产品综合运用，减少出错。

发现了吗？一个优秀的界面设计，上面o S 7的任何信息s * D f g *其实都d a { O可以拿来参考% 8 a Q a & a C (，就看你会不会用了。

需要强调的是，这些参考来的标准，并非是标准答案，还是要根据自/ ] ]己的实际项目需要做调整，只是至少知道一个范围，在这个范围v _ v ^ s ] 7 #内不大会犯错。

这就] N b像刚开o ) H O r 7 9始做设计时一样，去参考这些规范相当于做临摹的练习，这种临摹是需要的，临摹的过程中不断加入自己的思考，然后通过总结，变成自己的知识体系。

怎样定义出设计规范

随着对设计规范理解的加深，自身设计能力的不断提高，就要开始从设计规范的使用者转变为规范} l $ D e s a的制定者了。如何制定针对项目的设计规范呢？我的经验是在项目过程中把做的好的和H U 4 m ~ d K 1 J踩坑后的正确解法进行总结，并形成文字，积累多了就形成了规范。要把每一次遇到的问题都当成是一次改进流2 [ n程和规范的机会。

我自己是有随时记J j / + o P 2 r录的习惯，项目中一旦发现e y : c $ p问题就会赶紧把它记录下来。有时候p ? L H甚至还蛮期待出现问题的，因为出了问题才能找到优+ $ x A / x化的机会，自己也能从中找到解决问题的成就^ b ) U感。

曾经在QQ的3D厘米秀项目中遇到过非常多的v A G坑，然c n s N b x n ] :后从填坑的过程中慢慢总结出各{ ; # ~ ) c j种设计规范，去帮助项目减少错误率，提升设计质量。从最终的产出和结果来看，自身的进步是可观的，对产品的帮助也比较大，所以很6 C ( z B m B K b值得去做。

使用规范会影响设` # i计的创意性吗？

刚掌握设计规范的时候，/ : L M U l干活是特别舒服的一件事，因为做需求可以很快，好像拼拼组件就能完成。但稍微做久一点时间，又会觉得好像没啥进步，天天w C w拼组件，担心影响设计的创意性，真是挺矛盾的。

其实，规范也是要在遵守和引领用户习惯中不断迭代的。既要保持大的设计规范框架不变化，又要在设计的过程中给用户制造惊喜。比如，整个UI的配色和( V S T 0 6 ~ w字体需要保持统一，但在一些图形，动效上可以做出亮点，让用户在整个使用体验中既是沉浸的又能有些小惊喜。规范的打破与重建一定是e P n _ 2 R 3 k需要一个动态平衡的过程。T / + a { L

总结

设计规范绝对不需要死记硬背，而是要充分理解并灵活使用，才能发挥它的价值。随着UI行业的不断成熟，设计工具的简单化，各种组件化资0 2 N [源和c h P 2 d思维越来越普及，可以预见的是未来一般的UI界面会高度组件化，设计师单纯在界面上花费的时间可能会越来越少。

这从行业的发展来说，减少了很多体# O q ^ t X ?力劳动，让设计和开发有更多的时间去打磨产品细节，肯定是好H 1 – r V 6事。但对设计师自身来说，i w K ( 9 K Z | o省下了以前那C E j N种常规设计需_ C + V求的时间后还能做些什* u ; K |么，设计师的价值又在哪？值得b = t每个设l : @ )计师去思考。

欢迎关注译者的微信公E d A h众号：「彩云译设计」