如何建立一套UI设计规范
发布网友
发布时间：2022-04-22 01:22
共4个回答
热心网友
时间：2022-06-30 16:04
1、尺寸
设计图尺寸
虽说现在大多数人都是以750 (@2x) 为设计稿, 但是也还是有人720 (@2x) 的尺寸, 或是375 (@1x) 的尺寸, 比如我就是用的720,所以设计之初最先要定一个统一的设计尺寸, 特别是多个设计师合作的时候, 千万不要想当然的以为别人都和你一样。
2、间距大小
间距包括页边距、模块与模块之间的间距, 这种全局的间距大小必须要一致, 页边距的大小很好定, 基本上20、24、32居多, 根据产品特性定一个统一的就好，而模块与模块之间的间距就相对复杂一点, 在定之前需要先确定模块之间的分割方式, 是用线、还是面、还是留白, 然后再确定间距，
确定好模块与模块之间的分割方式后，还需要确定模块内部的，确定之后就要严格执行。
比如规范定的模块与模块之间用线，模块内部之间用留白，那后续所有页面都需要按照这个规则来（特殊情况除外）。
3、标准色
颜色是设计最重要的部分，没有之一。细节决定品质，所以对颜色的运用格外细致，颜色的搭配直接决定产品的品质感。包括基础标准色（主色）、基础文字色, 还应该包括全局标准色（背景色、分割线色值等）这些都需要标好色值以及使用的场景。
对颜色值统一规范命名变量，提高开发效率的同时更好的维护设计规范。
4、字体
字体是设计中必不可少的考虑因素，不同的字体气质不一样，并且不同场景下带给人的感受也不一样。所以需要在设计的时候考虑到字体的设计效果，然后在设计规范中注明。
在定义字体名称的同时也定义了字体的风格，并且添加了不同字体风格的预览效果，常见的字体风格有：Light、Regular、Italic、Semibold、Bold。
5、段落设置
在实际的产品设计中，段落有很多种样式，不同场景下的段落要求也不一样。比如：阅读内容的段落要求文本可阅读性强，所以对字体、字号、颜色、行间距等要求简单易读。而带有装饰性的段落文本则不需要那么严谨，装饰性强就可以。
需要注意的是：在定义段落默认字体的时候还需要定义一个后备字体，即默认字体不能正常显示情况下显示的字体。设计的水平层次就在于对细节的打磨，这也就是段落规范在设计中存在的意义
6、图标具体分为以下三个作用：
图标是与其它网站链接以及让其它网站链接的标志和门户。
图标是网站形象的重要体现。
图标能使受众便于选择。根据图标大小和使用用途进行分类整理设计规范，这样才更清晰明了。
在我们的项目紧急而人员又不足的时候, 可能没有那么多时间，去把所有的图标都画的精细，那这个时候我们可以先定尺寸。
当然这里说的定尺寸不是让你把页面内所有图标的尺寸都定好，而是说优先定几个大的模块，比如顶导航、底导航、个人中心的...
热心网友
时间：2022-06-30 16:04
Style Guide
pdf格式，主要作用是指南。用于说明色相、字体、字号、分隔线、间距等这些影响到风格形式的元素如何使用，如何建立层级，为了直观，需要适当的配上标注图，并说明界面中各组件的作用和使用场景。组件无需标注，从UI Kit的psd文件中提取即可。
UI Kit
psd格式，主要作用是提取。设计师可直接拖拽至PS中使用。
标注图
png格式，主要作用是参考。Style Guide中不会包含方方面面场景的情况，如果设计师捉摸不定逻辑上的一致性和合适的层级设定，可以参考更多以前交付给前端工程师的页面标注图，我向设计师传达的一个原则是：除非有更好的方案进行全局替代，否则应尽量使用之前已应用的方案，避免每次迭代都出现新的方案造成不一致问题的放大。
热心网友
时间：2022-06-30 16:05
设计师有时会犯一些“低级错误”，这些问题与专业能力本不挂钩，但会让其他业务伙伴认为你不“靠谱”。
比如，将一张文字颜色不一、元素排版错位的 UI 图发到大群，这样的“低级错误”是因为没有统一的设计规范。
下图是我们团队用蓝湖【设计规范云】创建的设计规范，大家可以看看规范的分类颗粒度以及设计规范的精细程度，这能有效地帮助团队成员“靠谱”一些。
热心网友
时间：2022-06-30 16:05
团队设计规范的建立，需要全团队的努力，不只是设计师的事。设计规范可以用蓝湖设计规范云进行搭建和管理，主要包括颜色、文本样式、图层样式、图标、组件等，不同团队需要的规范种类也有区别。
