设计协作,用摹客

更好的产品协作设计平台,设计师的利器,产品经理的帮手,工程师的伙伴

文章分类
设计1+2,摹客就够了!

摹客,支持Sketch/PS/XD/Figma/Axure设计稿交付、自动标注切图、全流程协作。助力产品团队高效工作!

立即开启
【友情推荐】uimaker - 专注于ui设计,为ui设计师提供ui设计相关教程、素材及灵感。

了解更多
入门教程 了解更多
成都君德鑫力达科技发展有限公司

分享到微信朋友圈:

打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。

博客 > 设计信息 > 手把手教你从0开始搭建B端设计系统

手把手教你从0开始搭建B端设计系统

摹客团队
2024-03-11
4125

设计系统不仅仅是一种组织设计资源的方式,更是帮助团队提高工作效率、确保设计一致性以及加强品牌形象的重要工具。回想一下苹果公司的设计系统,它的一致性和优雅性不仅让用户爱不释手,更让品牌在激烈的市场竞争中脱颖而出。本文,笔者将带你深入探讨如何从0开始搭建B端设计系统~

什么是设计系统?

设计系统(Design System)是一套旨在提高设计效率、确保设计一致性和加强品牌形象的规范化系统。它是由一系列设计原则、组件库、样式指南、交互规范等组成的集合体,旨在为设计团队提供统一的设计语言和资源,以便在不同项目中保持一致的视觉风格和用户体验。

设计系统通常包括设计原则、色彩规范、字体排版、图标库、组件库、界面样式指南、交互规范等内容,这些构成了一个完整的设计体系。

如何创建自己的设计系统?

本文将着重讲述创建B端设计系统的基础规范,可根据公司要求定制化搭建一套基础的设计系统。在这里推荐大家引入Paavan的设计系统画布(https://designsystemcanvas.com),以及摹客DT设计工具(https://www.mockplus.cn/dt),有助于创建设计系统,可以完美体现设计系统价值。

制定设计规范

制定基础的设计规范是设计系统中的关键步骤之一,它能够为团队提供统一的设计标准和指南,以确保设计的一致性和质量,主要包含品牌色、字体、图标、阴影等。

1)建立品牌色

设计系统中的品牌色是指公司或产品所使用的主要颜色,它是品牌形象的重要组成部分之一。

品牌色通常由主色调和辅助色调组成,主色调是最重要的色彩,用于品牌标志、主要元素等地方;辅助色调则用于补充和强化主色调,提升视觉层次和丰富度。

品牌色的定义需要结合公司或产品的特点和定位进行综合考虑,确保能够准确地传达所希望表达的信息和形象。

2)定义字体大小

在设计系统中,通常会选择一种主要字体用于标题和重要信息的展示,另外再选择一种辅助字体用于正文和其他次要信息的展示。这样的搭配可以在视觉上提升层次感和统一性。

在选择字体时,建议先进行测试和评估,确保选定的字体能够满足设计系统的各项要求,并与其他设计元素相互配合,形成统一的设计语言。

3)制定图标风格

设计系统中的图标(Icon)扮演着至关重要的角色,它们不仅仅是视觉上的装饰,更是用户界面中的重要元素,能够传达信息、引导操作、增强用户体验。

同时在命名的时候也需要定义了命名规范,如图标命名格式:类别_场景_功能_状态_尺寸(icon_tab_home_def_44)。

4)制定阴影层级

阴影是模拟真实世界的反馈,原理一般根据光源位置判断,光源越远,阴影越高。

阴影可以根据使用场景,划分不同阴影层级,能够增加元素之间的层次感和立体感,提升用户界面的整体质感。

搭建组件库

设计和标准化组件是搭建组件库的关键。团队需要设计各种常用的组件,如按钮、输入框、卡片、导航栏等,并制定统一的样式规范和命名规范。

常规的B端组件分类,主要包括:按钮、输入框、切换器、选择器、下拉菜单、分页器等。搭建组件库的过程,就需要设计工具的强大支撑,这里推荐大家使用摹客DT(https://www.mockplus.cn/dt),帮助大家一起搭建组件库,让团队小伙伴高效管理和复用设计资源~

1)按钮

设计师可以优先大致梳理按钮的分类,再根据分类定义不同状态的按钮,如:

按照重要程度来划分:主要(Primary)按钮 >次要(Secondary)按钮 >文字(Text)按钮/图标(lcon)按钮;

按钮状态:常态(Normal)、悬停(Hover)、按压(Press)、禁用(Disable);

按钮尺寸:大(L)、中(M)、小(S)

在摹客DT中可以分类将按钮制作为组件,此时创建组件,需要定义组件命名规范,便于后续查找复用等。

2)输入框

输入框一般主要有两种使用场景,一是信息输入,二是作为筛选条件。这里以信息输入为例,可以根据产品使用场景定义不同的信息输入类型,如单线输入框、框状输入框、内嵌输入框。

3)切换器

常见的切换器组件主要有文字切换、图标切换、选项卡切换,设计师需要定义不同类型的宽高、间距、尺寸最大限制等。

在设计这种选项卡类型时,使用摹客 DT 的自动布局功能,可以快速搭建组件,还便于后续修改调整。

4)选择器

常见的选择器主要是框状下拉选择,设计师除了定义基础的间距、尺寸大小,特别容易遗漏一些关键状态,可以参考以下状态拆解。

5)下拉菜单

下拉菜单类型比较多,常见的如:多选下拉菜单、带搜索下拉菜单、带图标下拉菜单等。

设计师在设计定义下拉菜单时,注意对一些交互细节做好规定,比如勾选全部时,下面所有选项也应被选中。

6)分页器

分页器主要有带指定页面输入框、无输入框、带总计数、带页面显示量、页面过多等情况,在设计时,需要注意不同场景的设计规范。

当设计系统搭建完后,摹客DT作为一款高效的在线设计工具,可以轻松一键共享资源同步到团队内,实时共享设计资源~

以上是介绍了如何创建基础的B端设计系统,主要包含制定基础设计规范、搭建基础组件库,在实际使用过程中,还包括不限于界面样式指南、交互规范等。但规范的制定并非一成不变的,设计系统也要随着需求增加和变动进行更新迭代,以适应变化。

设计系统的构建是一个需要耐心和细心的过程,但它能够极大地提高设计团队的工作效率和一致性,帮助公司加强品牌形象,希望本文能对大家有所帮助,快去试试搭建设计系统吧~


上一篇
流程图怎么画?只需这几步就可以搞定!

摹客团队   03/18

2024年UI排版风格解析,经典模板一键复用!

摹客团队   03/04

下一篇
需要帮助?

我是小摹,你的7*12小时产品顾问

立即扫码加入官方微信群

官方热线:19130671449

服务邮箱:service@jongde.com