ui设计的思考

ui设计的思考

主路线：贯穿部件竖向的路线，部件总高度的确定路线。一般有两种方式，直接固定总高、部件+间距的传递。一般只有一条主路线。除非你希望高度是多条路线竞争的结果。

其他部件的位置可根据主路线中的部件位置做相对位置摆放。

其他部件的位置也可根据主路线中得指定区域，根据布局重心和本身尺寸确定位置。

固定总高ui设计的思考

容错间距：在其他间距有偏差时（如字体不同导致的高度尺寸不同），改变子自身间距来达到视觉统一的效果，在做间距标注时，容错间距不需要做标注。

悬挂式

竖直方向只标注相对于上方部件的距离和部件本身的高度,这样最下方的边距就是容错间距。

堆叠式

竖直方向只标注相对于下方部件的距离和部件本身的高度,这样最上方的边距就是容错间距。

居中悬浮式

竖直方向只标明部件之间的相对位置以及可能需要的留白，不对上下最终边距标注。实现居中对齐。上下边距为容错间距。

复合式

上方的部件与其上方的部件标注相对距离，下方的部件标注与其下方的部件的相对距离，这样中间的间距就是容错间距。这个方式容错间距有比较多的选择，可以选择任何中间的边距，也能选择中间的部件高度来作为容错间距。

部件+间距的传递

一般在不关心总高，只关心部件相对位置。或者总高可变时采用。

标注原则

固定高度部件，如果相同部件在同一页面有多个，为了使标注不显得拥挤，可以在不同部件进行副线的标注。

第一个部件必须标注总高度，然后标注一条副线。 相邻副线分开在两个部件中进行标注。