设计赋能｜从0开始搭建B端设计规范系统

Clip设计夹

每周定时分享产品、交互、UI视觉上的设计思考。欢迎关注~

2024-01-03浏览 36481,543 字 · 约 5 分钟

…

关注▲Clip设计夹后台回复“进群”加入设计成长群

设计夹的第163篇文章分享 Halo，这里是设计夹，今天分享的是「设计规范」。

随着团队规模越来越大，参与到设计项目中的人员越来越多，为保证设计统一性，减少重复性的工作，让每个设计更专注于创意的思考，同时也为了增强设计与开发之间的协作，减少开发工作量，我们搭建了这套设计规范系统。

关于B端产品设计规范及组件化设计，希望对你有所帮助。

设计规范制定

1）布局布局一般有两种：一栏(全屏)、两栏(左侧边栏)，这里主要采用了是两栏的布局，即左边栏固定，对内容区进行动态缩放，其中导航条高度为50px，左侧侧边栏的宽度为200px，模块之间的间距为20px。

2）颜色通过品牌色、功能色、中性色对颜色进行定义，使得前端在开发过程中更加灵活方便，同时有助于后期在做暗色模式下的适配。

3）字体文字是一个页面中最重要的组成部分，用户通过阅读文字获取信息，选择合适的字体可以保证文字的易读性。在这里我们优先采用了系统默认字体。主要字号为14px(font-size:14px)，行间距(line-height)主要使用字号的1.5倍，另外可以根据实际情况进行适度的调整。在字重即文本粗细的选择上，正文字重为Regular(font-weight:400)，标题/强调文字字重为Bold(font-weight:500)。

4）图标图标是UI设计中的重要组成部分，它可以提升界面美观度，降低用户理解成本。在图标的设计中，遵循简单、清晰、易懂的原则。同时在命名的时候也进行了规范定义，图标命名格式：类别_场景_功能_状态_尺寸(icon_tab_home_def_44)。

5）阴影阴影是模拟真实世界的反馈，当光源被物体表面遮挡而产生阴影，光源越远，阴影越高，因此我们通过阴影的高度，来表示内容之间的层级关系。

组件库搭建

组件化设计是通过对功能及视觉表达中元素的拆解、归纳、重组，并基于可被复用的目的，形成规范化的组件。通过多维度组合来构建整个设计方案，从而提升设计效能，减少设计和开发的时间成本，同时增强产品的统一性，避免多样式给用户带来认知障碍。

组件化设计的理论支撑原子设计做为组件化设计的支撑理论，由原子、分子、组织、模板和页面共同协作，以创造出更有效的用户界面系统的一种设计方法。

根据原子理论，我们对常用的组件进行汇总分类，主要包括：侧边栏、TAB选项卡、选择/输入框、弹窗、表格、搜索、标签、按钮等。1）侧边栏侧边栏默认宽度为200px，并设计了深色和浅色两种模式，根据不同的需求，选择不同的样式。

2）TAB选项卡TAB选项卡具有全局导航的作用，是全局功能的主要展示和切换区域，它让用户可以在不同子任务、视图、模式之间快速点击切换。

3）弹窗弹窗又称为对话框，是App与用户进行交互的常见方式之一。弹窗分为模态弹窗和非模态弹窗两种，两者的区别在于需不需要用户对其进行回应。模态弹窗会打断用户的正常操作，对界面的主要内容进行遮挡，提示用户阅读弹窗信息内容，并进行下一步功能操作；非模态弹窗则不会影响用户的操作，用户可以不对其进行回应，非模态弹窗一般用来告诉用户信息内容，通常都有时间限制，出现一段时间后就会自动消失。