# 布局 系统布局是页面设计的基础，通过同一的元素、间距，来有效表达信息的空间关系，提高信息传达的准确性与效率，同时帮助系统建立一致的视觉感受。
## 信息密度 信息密度是指界面内各元素间的疏密关系，分为紧凑型（高信息密度）和宽松型（低信息密度）。信息密度由用户与组件的交互方式决定。 ### 高信息密度 当用户查看信息且需要批量、快速操作时，高信息密度的组件可以提高使用体验。在一屏幕的物理空间上展示更多的内容，例如增加列表、表格、文字信息的密度，从而提高浏览的效率，更易于比较和查看。 ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/beaebbe846aa5e906268e51e5e48f447_hWMZgwkElD.png?height=803&lazyload=true&width=1280) ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/f571ab45c35f5c894bd8f670f33f415a_9hPllgibJo.png?height=40&lazyload=true&width=2560) | ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/3c04ed28d678706ac361e39eb3520f9f_qHXtzqM2pv.png?height=803&lazyload=true&width=1280) ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/3f55e0031f9b7bdc835474391121207e_mYeRiIU59X.png?height=40&lazyload=true&width=2560) ---|--- **正确：**
列表行高紧凑，在同一屏幕空间上信息展示效率大大提升 | **避免：**
列表行高稀疏，在一屏幕物理空间上展示信息变少
- **提高信息展示效率** 在相同的视窗下，增加信息密度可以让更多的内容和操作得到展示。 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/ab7234c72bed31119c94ef5b977bec26_MPDTxBMcZ8.gif?height=1620&lazyload=true&maxWidth=600&width=2580) - **提升操作效率** 通过减少操作之间的空间，能帮助用户聚焦，减少滚动，更快的操作。 ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/67f256fed42f6508e86af388d05d7d2b_IvkGvav2KM.png?height=602&lazyload=true&width=800) ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/f571ab45c35f5c894bd8f670f33f415a_9hPllgibJo.png?height=40&lazyload=true&width=2560) | ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/8f93a9c2d2dad81562b69f16d7701816_ZmTOvqmDr4.png?height=602&lazyload=true&width=800) ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/3f55e0031f9b7bdc835474391121207e_mYeRiIU59X.png?height=40&lazyload=true&width=2560) ---|--- **正确：**
列表行高更紧凑，可显示的内容增加，一次可操作更多内容而无需滚动。 | **避免：**
松散的列表，可显示的内容较少，经常需要滚动。
### 低信息密度 涉及重点任务的组件应使用宽松型的信息密度，比如日历选择器、工具栏的格式选择、Button 的安全点击范围、任务和警示提醒组件等，紧凑的信息密度会降低可点击范围的可用性。 示例：警示操作和消息传递 ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/70697e8278d271abe98eef7403f38eb8_1TDh93WtOt.png?height=1001&lazyload=true&width=1000)![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/f571ab45c35f5c894bd8f670f33f415a_9hPllgibJo.png?height=40&lazyload=true&width=2560) | ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/39d156620f88fb654c92d70ecb9769cc_HvSk311GZx.png?height=1000&lazyload=true&width=1000)![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/3f55e0031f9b7bdc835474391121207e_mYeRiIU59X.png?height=40&lazyload=true&width=2560) ---|--- **正确:**
合理的信息密度可以更好的传递信息内容。 | **避免：**
增加警告和消息组件（例如对话框）的密度。 ## 对齐 对齐可以帮助用户快速建立有序的视觉引导，使UI元素的布局整齐而有条理，还可用于表现界面信息的结构关系。 ### 基础逻辑 对齐可分为**水平对齐**和**垂直对齐**两种基础逻辑，UI元素应当根据需要选择合适的对齐方式，在其所属容器内进行定位。 #### 水平对齐 水平对齐分为左、右、居中和延展（Stretch）四种对齐方式。 水平左对齐、右对齐和居中对齐，适合固定宽度元素的对齐 | 水平延展左对齐，适合需要根据容器宽度自适应的对齐元素 ---|--- ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/f52e6963ba447b17226466e7103c57ea_YX11OjUBrV.png?height=777&lazyload=true&width=1280) | ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/afbf980f10b504b01b700ea4022c6c62_y1CBTSg6iV.png?height=595&lazyload=true&width=1280) ### 垂直对齐 与水平对齐同理，垂直对齐也可分为顶、底、居中和延展（Stretch）四种对齐方式。 垂直顶对齐和底对齐 --- ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/9b302815b71dd12a421afcab9d73b2f8_dZEmsHgZ4s.png?height=2340&lazyload=true&maxWidth=300&width=1308) ### 特殊场景 **表单对齐** **标签垂直左对齐**：标签和输入区垂直依次排列，从而降低了对页面宽度的要求，适合没有足够横向空间用于排列的页面。 适合横向空间受限的表单结构 --- ![布局替换图 1.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/346134d785781c4e48506de058fff766_FrbIRtTVqY.png?height=1332&lazyload=true&width=1620) **标签水平右对齐**：标签右对齐和输入区水平排列，让标签与填写区域关联性更强，注意力沿着标签的视觉引导，可以快速找到对应填写项，从而提高填写效率和准确性。 适合横向空间充足的表单结构 --- ![布局替换图 2.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/a597bbc0f3d395b30d1582e1b108d8f2_S27CoApZ9T.png?height=1728&lazyload=true&width=3342) #### 数值对齐 为了快速对比数值大小，建议所有数值取相同有效位数，并且右对齐。 ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/dc9bf01d73577c35258d40d17373ddf7_UGAx0F914S.png?height=1082&lazyload=true&width=1280)![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/f571ab45c35f5c894bd8f670f33f415a_9hPllgibJo.png?height=40&lazyload=true&width=2560) | ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/4348df8445147e03abc82abdd898cf02_cKgYjWFDu3.png?height=1082&lazyload=true&width=1280)![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/3f55e0031f9b7bdc835474391121207e_mYeRiIU59X.png?height=40&lazyload=true&width=2560) ---|--- **正确:**
取相同位数右对齐，便于数字扫视和计算 | **避免：**
取不同位数左对齐