Line 线

定义 / Definition

边框主要用于呈现元素内容区域,显示元素的操作区域;线主要用于管理和分隔列表和页面布局内的内容。

以便让内容生成更好的视觉效果及空间感。面主要用于当线与分割线不足以从视觉上区分模块时,更进一步区分内容区块感感。

样式与交互 / Style&Interaction

等屏宽分隔线

等屏宽分隔线可以用于分隔列表中的每个数据项或者是页面布局中的不同类型的内容。

当在列表中没有像头像或者是图标之类的锚点元素时,单靠空格并不足以用于区分每个数据项。

这种情况下使用一个等屏宽(full-bleed)的分隔线就会帮助区别开每个数据项目。使其它看起来更独立和更有韵味。

内凹分隔线

内凹分割线可以用于同一类型中内容分隔。

在有锚点元素(头像或者是图标)并且有关键字的标题列中,我们可以使用内凹分隔线。

虚线分隔线

页面中有大量的信息展示,可以使用虚线举行分割。

尺寸 / Size

线的层级

元素在页面中的重要程度和可操作提示越强,则使用的颜色就应该越深,网站上线的颜色如上图左侧数值代表视觉感知强度,从上到下:

(4)为必然被看到,并且一定会影响浏览路径的变化;一般用于可操作的视觉主路径上的元件或元素线/边框。

主路径TAB

主路径BTN

(3)为常规展示,视觉水平位置,能被用户看到,但不影响浏览路径的变化;一般用于不可操作的元件或元素线/边框。

(2)为视觉感知水平之下,用户浏览上不会被感知;用于区分段落或不可操作且弱化内容的元素线/边框。

(1)为视觉感知水平之下,用户浏览上不会被感知;用于区分段落或不可操作且弱化内容的元素线/边框。

Last updated