
课程咨询: 400-996-5531 / 投诉建议: 400-111-8989
认真做教育 专心促就业
佛山ui培训:间距的使用有很多作用,可以吸引用户注意力、提升内容的可读性,阐述元素之间的关系。其实简单来说,间距的作用可以归纳成一句话:建立视觉层级来简化界面内容,让用户更容易接受。
间距的种类
间距从位置上我们可以分为两种,一种间距是用于区分不同的内容块;另一种间距是用于区分内容块内的信息。为了表述方便,我们在这里称其为:块内间距和块外间距。
从信息层级的角度来说,级别越高的内容间距越大。因为越重要的内容就要吸引用户越多的注意力,因此为了更好的进行区分,块内间距都是小于块外间距的。当然我们也可以发现其实块内间距因为其内部信息层级的差异会进行二次区分,也就是说块内间距也不是都一样的。
行间距
间距的使用会对你的文字易读性产生很大的影响。这里文字的间距主要是指文字之间的高度间距,我们称之为行高。行高过大过小都不利于用户阅读。一般来说,行高选择为字符高度的30%是恰到好处的。
间距与线条
线条在界面设计中主要功能就是完成内容区分。而随着极简主义风格的兴起,去线化设计也开始成为设计的一个潮流。设计师开始使用间距(留白)来取代线条来完成区分。所以弄懂间距和线条之间的关系是非常有必要的。线条的使用会极大的分散用户的注意力,整个界面会会稍显拥挤。
虎扑的界面是有线条的,但是我发现把线条去掉以后界面虽然稍显凌乱,但是用户还是能够通过间距来很好的区分内容。其实线条和间距并不是对立的关系,在同一界面中,我们也会同时看到线条和间距,而且功能都是为了区分内容。
不只是间距
你对设计元素的归纳总结能力决定了你的上限。同样的用户提示功能,你只知道单一的使用dialog,然而大牛们却会根据提示强度的不同和是否需要用户操作来选择dialog,toast和snackbar,从而建立一套完善的用户提示体系。
同样的道理,我们都知道间距可以很好的区分内容,那么其实要完成“内容区分”,我们不一定非要使用间距。除了已经说过的线条,我们同样可以使用配色,阴影,图案等。有时候间距已经很好的完成了信息层级的构建,但是整个界面会显得比较单调。我们可以引入图标和配色来强化不同内容之间的对比,而且使整个界面更加明亮。
慎用间距
如果你要通过放大间距来完成信息层级的区分,那么会出现大量的留白,整个界面也会显得特别清爽。但是老板可能会不爽,这个页面怎么这么空?你是不是偷懒了啊?再加点东西进去呗,让整个界面充实起来。
很多人对于间距使用的忌讳主要是来自页面长度的增加。因为一旦你的间距拉开势必会造成界面长度的增加,以前一屏就可以展示的内容你现在需要滑动才能看完。我们不知道对于用户来说,他们更偏爱清爽的界面(多留白)还是简单的操作(不要滑动)。
佛山ui培训:其实很多时候,我们觉得自己的作品非常的平庸或者“看起来特别糊”,大部分原因就是配色,字体和间距的对比没有做好。这些话说起来简单,但是做起来很难。间距对于界面设计来说是非常重要的,这篇文章希望能引起大家对它的重视,也希望你读完以后能够有所收获。