企业级B端交互设计规范搭建思路- 规范思维导图
企业级B端交互设计规范搭建思路-规范，盒子模型规范、栅格规范、组件库规范、页面模板规范
树图思维导图提供 企业级B端交互设计规范搭建思路- 规范 在线思维导图免费制作，点击“编辑”按钮，可对 企业级B端交互设计规范搭建思路- 规范 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：f90d6326297f6dd501b5e7539e6616d7
思维导图大纲
企业级B端交互设计规范搭建思路- 规范思维导图模板大纲
盒子模型规范
所有HTML元素可以看作盒子，前端开发在搭建界面的时候，是通过一个个盒子搭建起来的，盒子包括：外边距（Margin）、边框（Border）、内边距（Padding）和实际内容（Content）
设计规范在搭建过程中，尽量遵守盒子模型，可以减少设计与前端开发的沟通成本
栅格规范
栅格系统包括页面内容区、页边距、列、槽
目前B端界面常用的栅格体系是24栅格体系，也就是对内容区域进行 24 栅格的划分设置。同时，槽值为定值，即浏览器在放大缩小时，槽值固定不变
组件库规范
组件形态
“输入框”可以分为基础输入框、复合输入框、本文框、文本域等
输入框的边框色、文本与边框的间距、图标的大小
组件状态
组件状态通常分为可输入、可修改、hover、激活、禁用与只读
组件交互
组件的交互是否合理，是决定用户能否快速、顺利完成页面任务的关键
企业级设计规范就需要承担这部分职责，完成组件的体验交互工作，组件的体验交互分为了鼠标交互和键盘交互
页面模板规范
强共性
强共性是指页面模板要有参考价值，页面是每个产品普遍都会用到的高频页面，页面模板才具有纳入设计规范的价值
规则清晰
页面模板的定位是给UI设计师直接使用，或在此基础上拓展的，规则必须简单和清晰，这样方便设计师举一反三
可拓展
要给出拓展规则，方便设计者拓展业务性页面，能保持和规范的一致性。在一致性中探索设计更多的可能性，也是B端设计师一直在追求的
相关思维导图模板
树图思维导图提供 年度成都市教育科研课题申报汇总表 在线思维导图免费制作，点击“编辑”按钮，可对 年度成都市教育科研课题申报汇总表 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：b5c0f483314a011ec021b42639180f07
树图思维导图提供 人工智能与银行监管 AI and Bank Supervision 在线思维导图免费制作，点击“编辑”按钮，可对 人工智能与银行监管 AI and Bank Supervision 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：97b71bc270d70bc5bd70f9b9e8e5bac0
沪公网安备 31011502019485号
上海工商