B端按钮交互规范设计思维导图
B端按钮交互规范设计之定义、按钮的位置、按钮对齐方式
树图思维导图提供 B端按钮交互规范设计 在线思维导图免费制作，点击“编辑”按钮，可对 B端按钮交互规范设计 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：f8d90f6bc0e5452efd2c2ca05d6af1df
思维导图大纲
B端按钮交互规范设计思维导图模板大纲
定义
内容块
可以将整个页面视为一个内容块，也将一张卡片视为一个内容块，或者仅仅是界面中的一个小小的内容单元也可以视为一个内容块
界面中，一个内容块的基本构成有三部分：Header、Body、Footer
常规来说，一个内容块通常阐述一个主题：Header 申明主题，Body 放置该主题的具体内容，Footer 主题的延伸信息和操作
按钮的位置
Header
放置影响全局变更的操作，比如复选后的操作，新建、编辑……
Body
放置跟随内容生效的操作，比如表单中的上传图片，添加条目……
Footer
放置完结类含义的操作，比如确定和取消
按钮对齐方式
基本结论
对于大量同质信息平衡分布的情况（表单即属于这种情况），视觉都趋向于从上到下，从左到右的眼动规律
左上角是视觉的第一落点区，而右下角是视觉最终落点区
设计的元素的会影响视线的变动，比如颜色、图片
三个区域
Header区域：左上角作为第一视觉落点，一般用来放置标题，其次是按钮
Body区域：做主任务流程，整体布局需要指明一条清晰的路径。将输入和操作强制垂直对齐，可以清楚地传达如何完成表单填写
Footer区域：右下角作为视觉最终落点，主按钮采用右对齐
两个对齐
左对齐
左对齐意味着越重要的按钮越靠左，顺序为：一级按钮——二级按钮——三级按钮
Header区域，如果没有标题，就采用按钮做对齐；body区域与表单对齐，也就意味着左对齐
对于控住单行输入的表单的按钮，一般将按钮放在输入组件旁边，有时候会为了布局的美观放在输入组件的下方
右对齐
左对齐意味着越重要的按钮越靠左，顺序为：三级按钮——二级按钮——一级按钮
一般情况下，弹窗内的按钮区域默认右对齐
对于整个网页场景，Header区域，如果有标题，标题左对齐，按钮右对齐；Footer区域，右下角作为视觉最终落点，主按钮采用右对齐
相关思维导图模板
树图思维导图提供 B端UI界面交互设计规范概述 在线思维导图免费制作，点击“编辑”按钮，可对 B端UI界面交互设计规范概述 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：79063529f24ae381987b3ee115243c2b
树图思维导图提供 B端UI界面交互设计规范-UI交互通用规范 在线思维导图免费制作，点击“编辑”按钮，可对 B端UI界面交互设计规范-UI交互通用规范 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：c2598910dc245495b4236fc5d3b076fa
沪公网安备 31011502019485号
上海工商