9
%
更新|B端系统设计规范
最后更新于 3天前
#B端UI设计
中后台UI设计规范的建立对于提升设计效率、保证用户体验一致性以及优化开发流程至关重要。
开始学习
11
文章数
8.4K
总字数
0
知识点数
1.9K
学习人数
35
学完次数
11
精选笔记
你将学到的知识点
知识库概述

这些年里陆续更新过不少和 B 端规范有关的内容,前后大几万字,包含数百张配图。

但用公众号的展示方式局限性太大,因为 B 端规范相关知识点是绝不可能在一篇内写完的,分开写看起来又很繁琐,学员来回查看检索很不方便。

所以最近终于抽空来解决这个问题了,在 UXbaike 中单开一个知识库,收录 B 端设计规范的系统知识内容。

在这套知识库中目前会包含的模块如下:

  • 基本介绍:对于 B 端规范具体概念解释和规范创建工具、流程
  • 样式规范:对于规范内样式内容的解析和说明
  • 组件库定义:规范内组件的拆解和定义模式说明
  • 规范交付:包括 DesignToken、命名、文件管理等专业步骤

每个模块下会包含若干的小节,每个小节作为一篇独立的文章。比如样式部分下方会包含色彩、字体、效果、图标等小节,而每个小节里会对它们做出详尽的解释,以及覆盖尽可能多的知识点和应用场景,如在字体中增加多国语言规范定义的标准等等。

目前知识库正在编辑和陆续更新中,我们会尽可能完善它的内容,将所有能想到的、收集到的知识和信息都更新到里面,这一定是全网关于B端规范说明最专业、最详细的专题。

B端设计规范基本认识
已学会 0/4 · 知识点 0/0
B端系统的设计规范是什么
B端系统在这里主要指的是运行在浏览器内的网页管理系统,而B端设计规范通常就是指这类管理系统所应用的设计原则和标准。 制定设计原则和标准的目的,就是建立视觉的统一性,让设计师在项目设计中遵循既定的标准完成界面设计,例如固定的色值、字体的尺寸、间距的大小等等。防止设计师在设计过程中随意发挥,导致最终项目...
设计规范的主要内容说明
了解完设计规范的概念以后,还需要了解项目设计规范具体包含哪些内容。总结起来包含下面这些要素: 设计原则 界面布局 视觉样式 组件库 动效应用 1.设计原则 设计原则是设计师创建这套设计规范的“内核”,是一种抽象设计思维的反映和注解,往往会使用一些比较抽象的词汇并辅助说明文字做解释。 设计原则并不是设...
设计规范的创建流程分享
介于规范的作用,理论上需要在项目中先创建好设计规范,再开展页面的设计工作,才能保证规范被完整应用,实现项目设计的统一性。 但在真实的项目实践过程中,这种做法是行不通的,因为我们不能脱离界面实际设计效果凭空制定规范。所以专业的规范创建流程,需要先做出关键的、可以确定项目设计风格和样式的页面,才能开始整...
设计规范的创建工具和载体
设计规范的创建需要使用对应的工具,并以特定的载体进行输出和交付。在早年,UI设计规范会学习品牌VI规范的做法,使用 PS或AI编写规范内容,然后将规范打印成册。 打印的模式不利于传阅、更新,所以很快被淘汰,然后演变成将规范做成长图或PPT,导出成图片或PPT,这也是网上看到最多的规范案例的样式。 但...
样式规范的整理说明
已学会 0/6 · 知识点 0/0
色彩规范的定义
色彩规范,即定义项目中使用的色彩类型和色号。色彩规范的定义需要完成以下工作内容: 品牌色定义 功能色定义 中性色定义 色彩变体定义 特殊色彩定义 品牌色定义 品牌色是一个品牌或产品的色彩身份标识,用于输出和强化品牌认识,也是项目中最重要的颜色类型,要应用在项目全权重最高的元素和区域,是奠定项目色彩应...
字体规范的定义
字体规范,是定义项目中使用的文字类型和具体属性参数。字体规范的定义要完成对以下字体类型的设置: 标题字体 正文字体 注释字体 数字字体 其它字体 标题字体 标题就是用于标示关键信息的文本,比如页面名、组件名、数据名等等。一个项目的界面中往往需要用到多种规格的标题,来表现不同层级、权重的信息。 标题的...
图标规范的定义
图标规格,即定义在项目内图标的规格和具体图形,确保图标整体视觉的一致性。 第一个问题是图标的规格,常规B端项目往往不会只有一种图标类型,可能还会包含普通工具图标、装饰图标、业务图标、分类图标等等。 这些图标的大小不一,设计风格也不一致,所以要将它们进行总结和规范,防止在不同界面中一直设计出新的图标类...
描边规范的定义
描边规范,是定义项目中使用的到描边的类型和具体属性参数。描边规范的定义包含下面这些类型的设置: 图形描边 分割线 图形描边 图形描边即控件、组件中使用的描边,比如表格、输入框、列表卡片等元素使用的外描边,包含描边类型、描边粗细、描边色彩三个属性的参数。 而这些元素在进行交互时往往会更换描边的色彩样式...
圆角规范的定义
圆角规范,即元素使用的圆角大小的具体等级和数值,也是初级设计师最容易忽视的对象之一。 一个项目中往往会使用多种圆角,而多种圆角的运用会遵循一定的规律,即应用图形层级越高的则圆角越大,层级越低的则圆角越小,这由圆角本身的视觉特性决定。 常规情况下,一个项目的圆角数量控制在五个以内即可(通常3个就够了)...
投影规范的定义
投影规范,是定义项目中使用的投影类型和具体参数。 在完整的B端项目中往往会使用多个投影规格,来增加画面的层次感,凸显特定的元素。而多数开源框架提供了一套“拟真”的投影制定规则,通过引入Z轴和光源等常量的计算来实现最终的投影。 这种投影还有个特点就是它是由多层投影叠加而成的,用于模拟真实世界的投影显示...
推荐笔记