B端后台设计规范脑图思维导图
网站后台功能设计开发规范全内容分解
树图思维导图提供 B端后台设计规范脑图 在线思维导图免费制作，点击“编辑”按钮，可对 B端后台设计规范脑图 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：9af85931bf3e948bc164cb476da95ab7
思维导图大纲
B端后台设计规范——官网设计&后台设计规范思维导图模板大纲
类型区分
网页的类型
TOC
门户网站
网易、腾讯网
企业网站
苹果、联想
产品网站
苹果、联想
电商网站
淘宝、京东
专题页面
极有家
视频网站
斗鱼、腾讯视频
移动端H5
淘宝造物节
TO B
网站后台
微信公众号后台
ERP系统
企业管理系统
SaaS
SaaS服务公司定制系统
企业OA
办公自动化系统
官网设计
企业官网功能目的
“流量分发”
企业官网基础结构
导航条:50-100px
Banner：350-600px
特性介绍
专业案例
Footer
footer区主要功能是版权声明、联系方式、友情链接、备案号等
自上而下排布，适用于:产品介绍类
网页设计规范
基础知识
网页尺寸
主流设计尺寸
1366 x 768
1920 x 1080
1440 x 1024
安全视距
一屏最佳视觉:屏幕高度要减去浏览器头部和底部
网页布局注意点
建议:12-24偶数
网页层级
布局层级
层级强度从上到下是由强到弱
文字层级
常见字体
微软雅黑、宋体、Arial
苹方、宋体、Helvetica
根据网站风格可增加特殊字体包
文字层级
标题文案
文字字号:18
文字字重:Medium
文字颜色:#333333
正文内容
文字字号:14
文字字重:Regular
文字颜色:#666666
辅助性/注释类
文字字号:12
文字字重:Regular
文字颜色:#999999
字体层级≥2、最小字号12px
间距的把控
间距为字体的1.5-2倍
例：文字字号:14，间距24px
排版布局-亲密性
亲密性目的:分模块引导视觉流向降低理解成本
图片比例
图片比例:16:9、1:1、4:3 偶数原则
图片压缩问题
减少服务器资源耗费:图片清晰、越小越好
在线压缩工具Tinypng网站
网页配色
配色风格
符合行业属性
云计算:工具类大数据平台
蓝色:安全、科技、可靠
淘宝:电商类购物平台
橙黄色:热性、活力、快乐
配色层级
—堆数值:记忆难度较大、沟通成本较高
一个色值:一套规律、提高效率
状态提示
红色
危险、错误
黄色
警惕、注意
绿色
通过、成功
后台设计
信息管理:网站后台管理网站信息、数据统计与分析
后台设计规范
布局样式
导航栏
内容区
布局样式:导航栏+内容区
学会更加精准的拆分:主+副
布局样式:同一数值反复应用
组件
通用:导航/面包屑/筛选控件/按钮
对设计元素进行重组，形成复杂的组件
导航拆解
图标
大小:14-16px
线性:突出文字
切图: svg(矢量拉伸不失真)
一级导航
高度:60px
文字:14px medium #ffffff
选中状态
背景:品牌色/主色
文字:反白
二级导航
高度:40px
文字:14px regular 60%#ffff
面包屑导航
面包屑功能:明确位置、帮助用户定位
非当前状态
文字:14px
40%#000000
当前状态
文字:14px
6O%#000000
通用类组件-按钮
筛选框
筛选框高度︰32px
文字:14px 40%#000000
表单查询页
按钮高度︰32px
文字:14px
背景:品牌色/主色
弹窗
按钮高度︰24px
文字:14px
背景:品牌色/主色
按重要程度分为实心按钮、边框按钮、文字按钮
不同位置按钮尺寸
不同场景按钮状态
组件制作思路
图标+按钮=图标按钮
数据:表单/列表
数据类组件-表单
选择器
输入框
单选
按钮
表格
单列高度:40-50px
文字尺寸:14px
标题字重:Medium
操作按钮:主色/品牌色
连续法在UI中的应用
操作按钮位于界面右边，自上而下保持视觉与点击上的连续性
图标选中的时候
正常状态:90x90px左右
选中状态扩大1.5-2倍
面性图标是功能入口突出重点
操作反馈
操作反馈类组件
简单对话框
宽度:400px
表单对话框
宽度:480-640px
表格对话框
宽度:<900px
对话框拆分
标题
高度:50px
文字:16px中黑体
边距:24px
高度固定
内容区
标题︰居右对齐
输入框︰居左对齐、宽度320px，高度32px
间距:24px
高度不固定，随内容增加拓展
操作区
高度:56px
边距:24px
确定按钮:主色/品牌色 高度32px
取消按钮:白色填充、灰色描边
高度固定
遮罩层
颜色︰#000纯黑
透明度:50-80%
开源组件库
Ant Design
https://ant.design/docs/spec/download-cn
ELement
https://element.eleme.cn/#/zh-CN/resource
为什么要用这些现有组件库
设计
统一设计规范
加快设计效率
方便设计协同
开发
使用现有代码库
节省开发时间
保证设计还原度
数据图表
https://www.echartsjs.com/examples/
使用代码库，减少工作量保证还原度
沪公网安备 31011502019485号
上海工商