B端设计规范
2025-03-19 12:02:15 0 举报AI智能生成
B端设计规范，业务端设计规范
作者其他创作
大纲/内容
概述
文档概述
目标用户、用户目标、设计目标
目录
基础样式
颜色 color
主色
辅色
取自主色的对比色或补色
状态色
成功、失败、警告、危险、无效
中性色
文本、背景、边框、分割线
字体 font
14px
regular
行高22px
非重要备注、缺省页文字
16px
regular、medium（表头）
行高24px
正文、表头、菜单、按钮文字
18px
medium
行高26px
三级标题
20px
medium
行高28px
二级标题、弹窗标题
22px
medium
行高30px
左上角系统名称
24px
bold
行高32px
一级标题、页头文字
图标 icon
默认24x24
2px线宽作为设计规格
最小尺寸16x16
其余按8的倍数递增，如16、24、32、40、48
分割线 dividers
头像
按钮
按钮样式
主按钮
用于主行动点，一个操作区域只能有一个主按钮
默认按钮
用于没有主次之分的一组行动点
虚线按钮
常用于添加操作
文本按钮
用于最次级的行动点
链接按钮
用于作为外链的行动点
按钮状态
正常
表示控件处于活动状态，但是当前并未使用
突出显示
表示控件正被按住或被使用
禁用
表示按钮未启用且无法使用
已选中
仅特定控件具有该状态，表示控件当前已被选中
规格
小型
高度 24
左右内距 8
字号 14
中型
高度 32
左右内距 12
字号 14
大型
高度 40
左右内距 16
字号 16
图标
基础规范
数据格式
日期
时间
数字
极限值处理
空状态
键盘
手势
反馈
操作成功提示
操作失败提示
错误提示
组件
按钮 button
网络 grid
卡片 card
模块 module
文本框 text fields
单行
多行
页签 tabs
分段控件 segmented controls
选择控件
单选按钮 radio button
复选框 checkbox
开关 switches
选择器 pickers
滑块 sliders
分享 share
选项选择
操作列表 action sheets
底部动作条 bottom sheets
菜单 menus
导航菜单
页中菜单
底部菜单
对话框 dialogs
常规话框
编辑话框
非常规对话框
运营对话框
通用运营对话框
重点运营对话框
snack bars&toasts
分页控制器 page controls
列表 lists
文字列表
图文列表
指引与引导 tool tips&introduction
角标 subscript
标签 tag
模式
搜索 search
网络异常
无网络
网络超时
网络切换
移动网络
转场
加载模式
过场动画
多级弹出层逻辑处理
话题样式
夜间模式
其他
画布
主流屏幕分辨率
1920x1080
设计使用分辨率
1440x900
笔记本常用分辨率
1366x768
板式
居中定宽布局
栅格宽度
80
栅格数量
12
栅格间隔
16
左右流式布局（展开）
侧边导航宽度
256
页眉高度
64
主内容左右外边距
24
左右流式布局（折叠）
侧导航宽度
64
0 条评论
下一页
为你推荐
查看更多
