布局规范
😎 对于组件库来说，我们可以把组件比喻为积木，而布局则是把积木搭建为各种不同成品的图纸。
盒子模型
设计师为什么需要了解盒子模型？
在介绍布局之前，先介绍一下盒子模型。虽然盒子模型是前端开发中的一个概念，但是了解一些前端知识对我们设计的落地以及与前端的沟通上大有裨益。我们可以带着盒子模型的思维去做设计，这样开发人员拿到设计稿后，更容易了解我们的布局逻辑，降低沟通成本，提高落地率。
盒子模型是什么？
盒子（box）模型是开发中经常用到的 CSS 模型，我们日常所见到的界面都是由一个一个的盒子拼接而成的。打开安卓手机的开发者选项中的显示布局边界，便可以看到手机上的各个盒子的排列。
在电脑浏览器打开检查视图，也可以看到每个元素对应的盒子。我们可以理解为开发同事都是先画一个一个的盒子，然后在盒子里填充，也与我们提供的矩形切图相对应。并且盒子间存在嵌套情况，几个小盒子可以作为一个大盒子的内容。
以我们的生活来举例的话，例如我们去买月饼，大盒子里装了四个小盒子，每个小盒子里是一个月饼。
设计师如何利用盒子模型？
了解了盒子模型后，我们在设计时，该如何利用呢？做设计时，对任何元素都尽量用一个矩形给他封装，这样子前端在定位元素和确定间距时可完美实现设计稿的内容。
而前段时间 figma 更新的 auto layout 功能与盒子模型基本完美对应。我们在设计时可以使用这个让开发更容易 get 我们的设计稿，减少沟通时间。
以标签页为例，我们设计时，不只是画个横线与文字就行了，这样开发无法理解到设计稿，后面还会继续找我们询问触控热区。
导航
导航将网站的信息架构分组归类展示给用户，方便用户到达想去的界面。
顶部导航
🤚 不推荐：
优点：符合人眼浏览网页的视觉动线，给用户提供更沉浸式的浏览体验。
缺点：扩展性差，由于顶部空间有限，无法承载太多的菜单项。另外由于水平菜单的特性决定了无法承载太多的层级，当扩展至三个或四个层级时，顶部导航的易用性极差。
通用性较差：同样受空间的限制，菜单项字数被严格限制。
适用产品：整体结构无论是广度还是深度均较简单且之后不会扩展很多功能的产品。
侧边导航
👍 推荐
优点 ：侧边导航是以树形控件的方式来表示的，相对于顶部导航，无论是数量和层级，扩展性均较好。
缺点：由于用户在浏览内容的过程中，不可避免会被左侧常驻的导航栏打断视线流,阅读沉浸感较低。
方便寻找：由于纵向浏览无需把每个单个菜单完整浏览，相对水平菜单，定位更快。
适用产品：目前结构不是非常复杂但之后会迭代增加很多功能的产品。
混合导航
👇 慎重
优点：扩展性好:由于增加了-个顶部的一级菜单，扩展性是三者中最好的。
缺点：🔔
交互路径长：除了和侧边导航-样存在沉浸感低的问题，由于每个菜单项都需要点击顶部和侧边两次,操作效率低。
占用空间大：在 B 端产品中，界面空间寸土寸金，混合导航常驻的两个导航占用了较多的空间。
适用产品：目前结构已经非常复杂的庞大产品。
栅格
栅格介绍
来源
栅格系统原本来源于平面设计，早在
20世纪初，德国、荷兰、瑞士等国的平面设计师们发现通过维持视觉秩序，从而使版面能更加清晰有效地传递信息，二战后这种理念在瑞士得到了良好的发展。有兴趣的小伙伴可以去看下由瑞士设计师大师Josef Miller—Brockmann(约瑟夫.米勒-布罗克曼)所著的《平面设计中的网格系统》一书。
优势
👀
高效：将布局标准化，可减少设计决策的时间，让设计师专注于内容上的设计呈现。
响应式布局： 由于 web 端尺寸多样，使用栅格系统可以做到自适应布局(在面对多个分辨率的系统时，无需设计多套方案，仅需设计一套来适配即可)。
美观：提高内容的规律性，让设计更有秩序和节奏感，赋予界面数学逻辑美感，提高用户的阅读和浏览效率，为用户提供更好的体验。
协作：由于栅格系统的可复用性，多个设计师合作时，可以共用一套栅格系统，提升整体布局的统一性。同时也避免了设计与开发的反复确认的情况，使得部门内部与部门间沟通更顺畅。
组成与原理
栅格系统包括
页边距，列和水槽。
👀 知识点
页边距：指内容区与页面的边距。
列和槽：列是承载内容的容器，水槽是两个列(即内容)之间的间距。在前端视角中列宽是根据百分比而不是固定值定义的。通常说的栅格数就指的列数。水槽越宽，页面留白越多，呼吸感越强。
自适应原理：在网页应用的设计中较为常见的一种响应方式，当屏幕宽度改变时，页边距和水槽宽不变，列宽自适应。
计算公式：以24栅格(即有 24列)为例，页面自适应部分总宽度:
👉 24*列宽 +23*水槽宽+2\*页边距 👈
间距
在设计间距系统中，我们一般会基于 8 点网格系统和亲密性原理规定几个典型值。
例如 4,8,(12,)16,24,32……。遇到间距时在这些值中选取合适的即可。
另外一般我们会使得大模块的纵向间距与栅格系统中的水槽大小相同。
界面布局
布局是页面构成的前提，是后续展开交互和视觉设计的基础。设计规范中可以提供常用的布局模板来保证同类产品间的一致性，设计者在选择布局之前，需要注意以下几点原则：
👀
• 明确用户在此场景中完成的主要任务和需获取的决策信息。
• 明确决策信息和操作的优先级及内容特点，选择合理布局。