设计中会用到 UI 设计规范吗？

时间：2023-12-06 03:12:02 | 来源：网站运营

时间：2023-12-06 03:12:02 来源：网站运营

设计中会用到 UI 设计规范吗？：呵呵哒，设计过程中绝对会用到规范，特别是在一个UI teamwork的时候。之前去面试很多公司的ui，我上来就可以打包票说，你们这个ui是好几个设计师做的吧。对方尴尬的说，是不是挺乱的。我就在心里呵呵哒。

我之前一直是在创业公司做独立设计师，说好听点是独立设计师，难听点，就是唯一的设计师。创业型公司，UI UE你要全包。但是我还是很有追求的在每个版本改版之后，更新设计规范。我的设计规范没有大公司那么高大上，只包含了字体选用，配色运用，ui kit这些东西。我当时做这个设计规范，纯粹只有两个原因：

一，我要设计的界面太多了，而且产品迭代很快，来不及一个个界面标注重复性的东西，于是我就出一个字体运用规范，让开发看一个文档就好了。有个设计文档，可以减少很多设计与开发之间的沟通，虽然我原来是左手ios 开发，右手android开发的UI小公举，但即使是这样，我也不想把时间浪费在重复的标注，没有意义的“ 小公举，你这个字体是多大，什么颜色”这样的问题上。后来给开发团队引进了zeplin，安卓小伙伴持续用着，ios开发，一直看着我的sketch源文件，在我教会开发sketch后，我连字体规范都少写了很多。

二，我把这些东西一个版本的整理迭代好了，哪天来一场说走就走的旅行，没有交接成本，即使公司找不到设计师，开发哥哥直接用这个规范，就可以分分钟上岗党设计师了。直接甩这个规范的sketch源文件就可以了。

事实是，在一年之后，我很感谢一年来的我如此的机智，因为我确实来了一场老娘不干了的裸辞，公司在很长时间也没招到合适的设计师。再在就业的时候，很多公司对你的整理的设计规范兴趣远大于你作品兴趣。我分析啊，主要他们可能他们心里觉得，一个设计师撑起的一个公司，居然还有设计规范。呵呵哒，你们肯定也想看我做的渣规范系不系。

附我做的规范一部分。



纯粹是为了节省空间，拍的这么密集。嗯。因为程序员的屏幕大多都很小。。不像我们大设计师，23寸，27寸高清无码大屏幕。心疼还要接渣显示器的程序员三秒。。。

我一般就写规定的用色，然后图标的区域规范，包括切图区域，点击区域，具体的规范是放在ai的图标规范里，有更详细的视觉区域，切图区域，点击区域规定等。还有诸如圆角，像素大小规定等。我总是在幻想，公司哪天招个设计师跟我一起画画图标。

是的，这些规定从我上岗到快离职，只有我一个设计师看到了。其他看到的都是程序员，但是我依旧非常肯定它存在的必要性，让我不用每次更新，都要翻旧的设计稿，卧槽，我上次用的这个是什么颜色？有人说，可以用色板记录啊，但是我的色板会把中间配色过程中使用的也保存下来，sketch的色板不像ps，可以标注备胎1号色，2号色。还有，设计师做视觉规范，可以帮助自己做个人沉淀，这个对自己的好处绝对大于对公司层面的好处。

——————————————感谢大家赞同的分割线，来更新一发——————————－

很多人评论私信问一些规则的详细事宜。我参考了很多大厂的一些设计规范，比如百度，淘宝，jd。还有一些类似airbnb之类的，综合来定制适合自己团队，自己app的规范。统一来说，规范出了包含色值，文字，之外当然还有icon规范，来新司制定新的设计规范就是把icon 的圆角建议规范都定制好了。下面简要的说明一下各规范建议规定的地方：

色彩体系：

高亮色，文字色，分割线色，背景色，辅助色，normal ,pressed,disabled的状态都是附加了比如10%的＃000，10％#ffff之类的。

文字体系：

文字大小，line-height，所以字体大小与line-height的比例关系建议保持一致，如果存在小数点，可以四舍五入。比如：28px字体大小的line-height是40px。那26px的字体，line-height可以取36px，比例是1.4。

中文字体字形，英文字体字形，所用到的手绘字体等。

icon体系：

线性粗细，建议圆角大小，比如：

还有普适性icon的视觉区域大小，切图区域大小。比如我常用的视觉区域大小是44px， 切图区域大小是60px。icon的整体风格建议。这点可以参考md的。规定了各种。。。可以适当参考就行了。

https://www.google.com/design/spec/style/icons.html#icons-system-icons

button体系：

按钮的常态高度，圆角大小。不同按钮状态的alpha值统一等。按钮的线型，按钮内字体大小等。按钮的长度延伸适配等。可以采用sketch插件 Dynamic buttons，可以自适应按钮大小。

其他UIKIT体系：

1.nav bar统一，特别是有类别切换的。

2.文本框

3.单一列表，组合列表

4.bar 体系，高度，透明度，投影等。

5.popover体系，弹出框的宽度，背景灰度值，文本规范，按钮规范等。

6.配图规范，风格选图建议（为了保持app的格调一致性）

7.情感化提示规范。

8.插画规范。

还有好多，不一一例举了。

还有另外好多问zeplin的事情的朋友，官网是zeplin.io.可以直接将sketch的画板导入到zeplin，就可以直接查看相应的色值，间距，大小了。可以根据不同的平台切换显示重要的是他会帮助我们整理相应的一些规范。


当然我这里是重合了好几个文件，所以有两个高亮色。见谅。

还有最近新发现一个帮助建立品牌视觉设计规范的一个网站

Create Free Brand & Design Style Guides with Frontify Style Guide，仔细研究研究，还是挺好的。他默认的排版就挺美的了。

想到了再继续补充吧。感谢大家。么么哒～




——————————————写完一份新文档的分割线—————————————————

最近针对app的android端 新写了一份设计文档，做了一个设计组建化，文档的阅读对象从单一的设计师变成了设计师，研发，产品经理。文档的涵盖内容就不止停留在设计层面，更多从实现角度出发，如何保证设计在设备上的还原度。直接贴部分文档吧。


这也是第一次针对android也一个设计规范文档，需要提醒一下设计师，在不同的平台，适配的习惯不同，比如android平台很多采用的是auto layout的布局方式，所以很多时候，规定的是固定的间距，而不是整体高度，宽度。iOS则很多时候是固定一个高度，宽度，不同设备适配的时候，标示比例。