今天跟大家一起唠唠“UI设计规范”在实际项目中的应用，并且跟大家分享一下在这个项目过程中摩擦出的“火花”。

火--项目进行过程中遇到的一些让人上火的问题；

花--规范的设计文档带来的一些好处和优势；

希望各位读者能在我的分享中，去糟粕取精华，得到些许的帮助！

·项目简介

·设计流程简述

·规范拆分讲解

·规范的演变

·遇到的问题

01、项目简介

——————

简单介绍一下这个项目背景。此次捣腾的是一个设备管理平台，因为以往物联网设备和普通设备都是在不同的后台中运营维护，这次需要将各个平台的各类设备，重新梳理、分类、规整到一个平台中，方便后续的统一维护。

槽点来啦～（好像来的有点快呀！）

常规流程中，应该是产品梳理产品原型，交互设计师优化交互，再到我们Ui设计狮设计效果。

而我们一些可爱等产品同学是直接截图+口述需求，然后我们直接画界面，相当于产品、交互、Ui一起做。

（不知道这是不是很多公司里UI设计岗位的常态呢？【如果是，请评论区call 1】）

收～咱们回归正途，接着往后讲～

02、设计流程简述

————————

需求分析

前期收到项目需求后，我们会做分析需求，根据产品类型、平台特性、运营需求、运营指标、用户类型、用户使用场景、用户习惯（产品同事喜好、公司各种规范要求...）等等等一系列的因素，讨论分析出界面整体设计风格、整体界面布局、主色调。

然后根据开发同事需求，依据他们运用的开发框架，来确定我们设计中采用的控件类型和交互方式。

这一步虽然看起来有点冗余，却能起到了不可描述的作用！既避免了设计与前端之间大量的沟通时间，又避免了前端花大量时间重新开发控件，还避免了设计出来了却开发不出来的囧境。无论从低角度--团队人员的工作量，还是高角度--整体项目的运行进度，这一步尽量不要少～

（其他公司是不是也存在这样的问题？【如果有，请评论区继续call 1】）

风格确定

需求分析完，问题沟通完，该是设计时间了（是时候展示真正的技术了～）

我们会先输出风格稿来确定整体风格，然后根据“修改第n+n打死再也不改版本.png”的风格效果输出第一轮的设计规范；

这里，步骤会根据个人习惯略有不同，有的设计狮会在出图前会输出第一轮规范，然后根据规范和风格同步进行～

个人感觉设计风格稿后输出的设计规范会更“贴切“～

结合产品原型和风格稿，整理出一批的常用控件及规范。如布局、字体、颜色、列表、控件等元素。当然这里是初版，后期根据界面需求会做微调。

市面上设计狮的设计工具越来越牛【和谐音】，这也为我们出图带来了很多的便利。初步整理UI设计规范后，整理出的小元素就可以转化为组件，方便后期界面设计时使用，如sketch、figma的组件功能都很强大，维护好组件库后，可以让设计狮快速出图。如果后期界面需要修改，只要修改组件母版，其他界面中使用到的同类组件都会跟随母版统一调整，大大的提高了设计效率。

（新手设计狮可能会问组件是啥？组件如何使用？不要问，问了就是自己找教程学习～）

设计步骤梳理

这里需插播一个步骤，“设计步骤梳理”--设计功能模块界面的顺序！

顺序？有些人会说，不就是按照模块顺序从前往后设计嘛～

这么说，也不完全错，但这个说法只是针对活儿少or时间充足的项目。当一个项目里界面内容多，整体项目交付时间紧，按照模块往后设计就有可能出现问题～

因为你不是一个人在战斗，与你并肩作战的还有前端、后端、测试、产品等等一堆人，你在奋战画图的同时要考虑你队友的如何作战。有些流程并不是一味的串行，很可能是你输出一部分图，前端开发一部分界面，测试写一部分的测试用例，大大的并行ing。而且前端开发会涉及到数据的关联逻辑，有些界面必须先行开发，才能支撑其他界面的开发。所以你得搞清楚对于他们来讲，哪些模块优先级较高哪些较低。根据他们的开发优先级来确定设计的先后顺序。

前期沟通很重要，沟通清楚了各类细节，避免后期犯错踩坑。磨刀不误砍柴工呀～

（长点心吧，打工设计人）

再往后的流程大家应该都熟悉，出图、切片标注、协助开发、界面走查...

现在有强大软件的支持，切片和标注基本不像以前那么费时费力了，利用蓝湖、figma、pxcook，sketch measure等软件，将界面按要求归档，直接交给开发就欧儿啦～

03、规范拆分讲解

————————

UI设计规范目录

网络上各类设计规范的文章很多，我这里列举一个自己的设计规范目录，仅供参考

颜色、布局、字体、图标、按钮、导航、面包屑、筛选、列表、表单、弹窗、特殊控件

根据后台内容的不同，设计规范的内容也略有差异。

（UI设计规范整理的越细致，各种状态整理多越清楚，组件库搭建的越完善，后期界面输出的速度就越快）

整理的规范中，选取几个印象较深或者容易踩坑的地方与大家分享一下

1、布局

整体界面按照8px栅格来设计。为啥要选8px，不是因为8这个数字吉利好听，而是采取8像素栅格，按照8的倍数来设计界面元素，页面适配时更加方便。

（8px的栅格在Ant Design上有比较详细的讲解，不了解的设计狮可以去研究一下～）

根据前期沟通，界面内容需大范围呈现，且用户查看内容和操作权限相对固定，所以采用的是顶部导航菜单、内容全屏适配的方式。

顶部导航+内容全屏适配的优点：内容预览区域面积大，操作区域充足。

2、首页布局排版--后台首页通常用来承载查看关键数据的功能

首页看版内容较多，且数据展示范围广，集合了整个后台里的关键型数据。

设计看版时需要注意的就是，内容的划分布局和呈现方式的选择。数据主次分明，内容完整展示的同时，需要根据业务逻辑、数据类型、关联关系等因素，选择合适的图表呈现方式、进行合理的内容布局排版。让用户查看界面内容时，能快速了解众多数据之间的关联。

数据是有故事的，我们设计狮需要通过界面的展示，将这些故事串联起来，让用户在阅读的时候，快速理解故事的中心思想，快速查找自己关心的故事情节。

3、颜色

这款产品最终决定设计浅色和深色2套风格，用户可以在界面中切换深浅皮肤。整理Ui设计规范时，我们输出的是2套颜色规范，且应开发同学要求，2套颜色的属性需一一对应。

什么叫“属性yiyi对应”？例如，在浅色模式下，文字颜色从深到浅分别是#333、#666、#999...，那在深色模式下，文字颜色是#FFF-100%、#FFF-70%、#FFF-50%...

No，这种标注不准确，

如果在深色模式下，字体透明度属性出现了变化，那在浅色模式下，同样要标注出字体的透明度属性，方便开发辨认。

（不知道是不是所有的前端开发都有这样严格的要求，但我们标注一下，可以避免不可描述的问题～）

4、表单布局

表单的布局，常用方式是规定最小单位表单的宽度，然后根据最小单位来布局

例如，该项目中，我们设计的最小单位宽度是272px（标题和输入框分行展示）；

当页面只有一列表单时，表单显示宽度为272px；

当页面是2列表单布局时，表单显示宽度是272*2+24=568px；

当页面是3列表单布局时，表单显示宽度是272*3+24*2=864px；

以此类推...

（不用再推了，3列已经足够啦！）

Pc端网页界面上3列表单布局是最大的宽度了，再多的话不利于查看操作，也不利于前端界面适配。

规范内容先说这么多，说说Ui设计规范个人感受最深刻的优点和作用：

1、让界面设计更加规范化，更加整体化，细节更加统一；

2、规范元素转化成设计组件，方便界面设计和后期修改，提高工作效率；

3、有利于设计团队内的人员合作、协同设计、分工配合，减少界面样式不一致；

4、节省了与开发的沟通成本，设计图为主，规范为辅，让开发还原度更高；

5、同类型后台设计时，设计规范扩展使用，让设计更加快捷；

（至于其他优点，某度搜索关键词，还能给你更多的答案哦～）

04、规避的问题

————————

Q、设计创意与开发实现之间的把控；

某些公司中，交付团队都是在与时间赛跑。创意多了，开发难度大，交付时间会拉长；创意少了，界面千篇一律无特色，感觉束手束脚；

UI设计狮在创意时需要把控一个度，既方便开发实现，又能清晰表达自己的创意想法。那么了解前端开发方式、组件库内容就尤为重要，只有深入了解了前端开发的工作，在做设计时就会遵循框架中的规定，有意识的规避一些风险，增加效率的同时也增加团队之间的和谐度。

Q、组件库提供的是规范不是束缚；

在项目进行的过程中，经常会听到不同人在规范方面提出不同的意见，一次又一次的强调要按照开发组件库里的东西来设计。

个人觉得组件库的作用是使设计更规范、更符合开发使用的标准，而不是一个枷锁，不是让你原模原样的套用。做设计该创新的时候还是得创新，只要不超过界限就行。

Q、设计的步骤顺序提前确认；

设计顺序不对，导致设计与开发工作衔接不上，甚至会导致项目延期。所以设计狮在动手之前一定要全方面仔细的沟通，出图先后顺序、交付时间节点、对接人、使用的开发框架等等，确保自己在后续进行设计的时候不会出问题。最好是自己通过平时的积累结合合作团队实际情况，提前列举一个问题清单，方便每次项目前期沟通。

Q、设计规范如何拓展应用；

这里要提到某些公司存在的问题，部分项目工期紧的时候前端开发可以自行开发，不需设计狮画界面。输出一套UI设计规范后，只要有新平台开发需求，他们就沿用这一套，不考虑平台属性、页面内容、目标用户操作习惯。最终导致一些项目的后台界面不中看也不好用。

上述问题说明，UI设计规范沿用是有界限的，当设计不同的平台产品时，需要根据平台的特殊属性来调整，甚至不同的平台都得有属于自己的一套UI设计规范。一味的降低人工成本，会使产品的用户体验降低、视觉观感降低，最终导致用户使用率降低。

最后补充一句：

无论是Ui设计规范还是组件库控件，都是用来帮助设计狮使界面的设计更加统一、更加细致化，千万别被这些束缚住了设计的思维。规范的灵活运用加上创意创新的idea，才能产生出更好的设计。

这是本人第一次写文章，当作经验的分项，也作为自己的项目总结。

文章内容有点口语化，希望在比较轻松的状态与大家交流心得。

文中提及内容如有雷同，纯属巧合；如有与大家看法不同或者描述不正确的地方，也希望大家评论区交流讨论；

设计一行，如逆水行舟，不进则退，愿大家共同进步共同成长！

感谢大家观看～