B端设计的视觉通用规范-通用组件思维导图
B端设计的视觉通用规范-通用组件包括字体、行高、圆角、按钮、间距、字号、色彩
树图思维导图提供 B端设计的视觉通用规范-通用组件 在线思维导图免费制作，点击“编辑”按钮，可对 B端设计的视觉通用规范-通用组件 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：cbe7e110727871419a7fb5a7ab786420
思维导图大纲
B端设计的视觉通用规范-通用组件思维导图模板大纲
色彩
常规分类是：主色板，功能色板，中性色板。主色使用场景：选中态，可点击，可交互，logo变化，可视化，情感插画等场景
主色板的使用主要是两点
尽量不要选择红色
避免错误，与警告色冲突，会产生歧义
冷色系包含了理性、商务、科技等语义。更符合B端产品的调性
避免高亮色
高亮和荧光色，用户长时间使用容易产生视觉疲劳
灰调对的颜色容易显脏，视觉品质感差
作为按钮的字，辨识度会降低。即使是作为文字链接也会不清晰
功能色板
成功色：常规是绿色，因为绿色在人们的印象 是——生命清新，畅通安全
警告色：常规是橙色，因为橙色在人们的印象 中是——危险，警告，焦虑，不安全
错误色：常规是红色，因为红色在人们的印象 中的是——错误，暴力，停止，失败
中性色板
N1：标题文字，1级正文文字
N2：二级正文文字
N3：辅助，说明文字
N4：disable，提示文字等
N6：输入线，按钮线框
N7：分组边框，分割线
N8：背景色（内容色块）
N9：背景色（底层背景，输入框灰色背景）
字体
常见的字体
IOS：中文——pingfang，英文——san franciso
WIN：中文——microsoft，英文——arial
数字：din
常见字重：如何与前端沟通
苹果：regular mesium semibold
win：400 500 600
行高
行高主要是用于计算多行文字高度时候使用，常规的计算是字号的1.5倍的偶数（例如：14号字的推荐行高是22）
圆角
分场景
按钮/输入框推荐值：2px
用于卡片推荐值：4px
思考：为什么不用圆角
不利于下拉场景
与输入框风格格格不入
连续排列里面的一致性
按钮
常见的分类方式
大小：通常分为大——用于页面内，中—— 用于弹唱，小——用于小气泡
长度：大于最小宽度设置padding值
状态：主按钮，文字按钮，功能按钮
按钮放置
右上角、右下角：右往左； 左下角：左往右； 跟随：左往右； 居中：右往左（右手操作习惯）
间距
有的自研CRM的话有的配的是1024，针对OA办公人群的话1920能够更适合于办公人群
间距最好选择8的倍数，常见的补充数值：4，1
字号
在B端和C端不一样，在用字上面要讲究极度的克制，尽可能的“颜色>字重>字号”。正文字体为14号字，整体的阅读效率最佳
在日常的办公场景，人眼测距得到的结果是人眼距离是50cm，14号字阅读效果最佳
相关思维导图模板
树图思维导图提供 TNBC治疗方案 在线思维导图免费制作，点击“编辑”按钮，可对 TNBC治疗方案 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：7b926639e0d36b61a2316264d6b2c896
树图思维导图提供 GB/T19001-2016/ISO9001:2015思维导图结构 在线思维导图免费制作，点击“编辑”按钮，可对 GB/T19001-2016/ISO9001:2015思维导图结构 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：05b6fb33547623a34a768fe8f408a354
沪公网安备 31011502019485号
上海工商