020-29815005
预约专线时间:09:00-23:59

UI设计中的校准对齐

新闻来源:本站 日期:2021-07-13
嗯,我承认,我是个对齐狂魔。但是,这仅仅是因为一旦你发现了调整的魔力,你就会意识到这是使任何布局看上去漂亮和和谐的关键。
    很多设计者认为使用网格网(grid)会限制你的创造力,从某种意义上来说,这确实是对的。但是,如果你是一个刚刚加入市场的UI设计者,我认为在打破这些规则之前,你很有必要先学习它们。

    恰当的填充(padding)和空格(spacing)能够让你的版面整齐有序,同时也使读者更容易地阅读和理解信息。

    相同尺寸的间距应被逻辑块(logicalblocks)所环绕(例如,顶部和底部,以及左右两侧)。假如间隔大小不一致,页面看起来会很混乱,导致用户对不同部分的注意力不均衡。


设计培训


    而且填充太小意味着用户不能把内容分解成更多的逻辑模块。为避免逻辑模块混在一起,您需要将它们分开,并在它们之间插入较大的间隔。

    保持视觉层次化的一种简单方法是遵循下面的简单规则:不同逻辑模块之间的填充尺寸应大于每个模块中标题与文本之间的填充尺寸。举例来说,假设您有一个超长文本,其中包含主标题、副标题和段落,那么您需要:

    填充标题(padding-bottom),设置为40px,然后在后面插入文本段落。

    该段底部填充(padding-bottom)被设置为10px。

    若一段后面有一个小标题,则该小标题的顶部填充(padding-top)被设置为30px(也即,段落和副标题之间的间隔为30px),并将其底端填充(padding-bottom)设置为20px(也即,副标题和下一段的间隔是20px)。

    这种设计很能突出重点。主要标题文字的大小为最大,周围的文字相对较大,但仍然与后面的文字元素保持了接近的距离。