B端设计的视觉通用规范-布局与栅格思维导图
B端设计的视觉通用规范-布局与栅格的介绍，布局分层、导航组件细节介绍如何使用和组成都有什么
树图思维导图提供 B端设计的视觉通用规范-布局与栅格 在线思维导图免费制作，点击“编辑”按钮，可对 B端设计的视觉通用规范-布局与栅格 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：fea6b65610c7891b24421b7c9dc901a0
思维导图大纲
B端设计的视觉通用规范-布局与栅格思维导图模板大纲
布局分层
4层布局
背景层：最底部的背景，通常指的是背景层
全局控制层：导航，也是就是能够支撑整个产 品的柱子
内容层：承载内容的部分，栅格栏主要是用于 这一层
临时层：弹窗，气泡，文字提示轻提示等等
在设计上，分为最小的页边距和自适应边距，当屏幕开始缩小的时候，自适应页面边距的最小值
临界值达到断点之后，内容区发生变化，间距保持一致，水槽不变
设计师可以灵活定义式栅格范围
栅格组成
栅格的组成
页面距：左右2边的边距表示出内容区的范围 与其他（比如：擦边导航栏），方便内容进行 填充
水槽：栏之间间距，主要是用于模块之间进行 划分
栏：由水槽进行分割，基本数量=水槽数量+ 1。在进行高保真还原的场景，是按照相关的 比例进行分割
计算的栏的宽度
若页面距取20，水槽取16.那每一栏的宽度= 「内容区宽度-23*16-2*20」
栅格栏的好处
栅格栏可以避免设计师凭感觉进行设计，设计团队中多位设计师能够做得更加的整齐规划
导航组件
全局导航
顶部导航
常见的使用场景是：导航数量比较少，内容比 较简单，可以追求沉浸式的阅读体验
优点
对视觉的干扰小，符合上到下的阅读习惯
占用屏幕空间小，为内容留出更多的更大的空间
缺点
二三级点击后隐藏，不方便用户记忆
随着业务的发展，拓展性变差
侧边导航
常见的使用场景是：更加适用于更专注功能和快速操作的系统，大多数用于复杂的系统
优点
拓展性比较强
层级清晰，1级2级3级导航可以按照流程展示
操作效率高，用户在操作和浏览中可以快速的 进行定位，和切换当前的定位
缺点
视觉分隔较为明显，内容区沉浸感不是很强
视觉动线左右来回移动，比顶部导航还要疲惫
内容区的排版空间更小，需要考虑适配的问题
混合导航
常见的使用场景是：适用于功能架构特别复杂的，结构复杂的产品
优点
拓展性比较强
缺点
操作难度上升，操作动线更加的复杂
内容区的展现收到了更大的影响
总结
从顶部导航栏到混合导航栏之间的设计，发生了3个变化
复杂度变高
沉浸式体验逐件变差
内容区的适配性逐件变差
局部导航
面包屑导航
常见的使用场景是：2级以上的层级，最好不 要超过5级
常见的位置
导航； 内容； 背景
面包屑导航注意点
面包屑导航优先级高于标签栏导航
面包屑导航的中的每一次点击都必须有相应的 页面承载
面包屑导航层级过于复杂时候，中间层级显示 可以用“……”呈现
标签
标签页可以帮助用户在同一个页面快速地切换不同的类型内容，提高单个页面的拓展性。一般和时间状态扭转相关
常见的样式
基础样式； 卡片样式； 胶囊样式
分页
分页器常用的场景是为了避免表格数据加载压力以及减少用户等待加载的焦虑，从而将表格按照每一页固定地进行展示，当用户查看下一页或者是选择特定的页数时选择的交互方式
优点
可以降低系统的数据加载压力，可以让 用户等待的时间减少
缺点
用户无法一眼看到全部信息，需要翻页 操作，而且在需要定向选择操作时，也是比较 复杂的
步骤条
主要场景是用于复杂并存在先后关系，将其拆分为一系列的步骤，从而减轻用户侧的操作负担。通常用于新增商品以及修改密码等场景
相关思维导图模板
树图思维导图提供 数字、数据、数据资源、数字资产等概念关系思维导图 在线思维导图免费制作，点击“编辑”按钮，可对 数字、数据、数据资源、数字资产等概念关系思维导图 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：ac23e53e5e0dad197109a5233693c107
树图思维导图提供 2024年IT业务运营效能提升专项活动实施细则 在线思维导图免费制作，点击“编辑”按钮，可对 2024年IT业务运营效能提升专项活动实施细则 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：24c6dad3c82f4ec0b7b3969022803e6f
沪公网安备 31011502019485号
上海工商