边框

2021-08-31

定义／Definition

边线是界面设计中最基础的构成单位之一，主要用以强调区块分割、内容引导、包含等视觉关系。最常以分割线，边框线等形式出现。

构成／Composition

页面设计中边线的样式需要考虑三部分构成：

1. 粗细
2. 类型
3. 颜色

边线的粗细／Thickness

AntD Mobile在设计上坚持“有效复杂性”的原则，一共只定义了两种边的粗细，1 dp的边主要用于解决信息间区块的分割。2 dp的主要用于强调和引导。

边线的类型／Type

边的类型的定义也遵循了一样的思路，总共定义两种类型。实线用于大部分的场景，虚线则出现在特殊场景，比如图表、信息层级较多区分较为复杂等情况下。

边线的颜色／Color

品牌色、功能色都可以用于边的颜色。AntD Mobile在设计中提取出最常用的几种情况，具体如下：

1. 常用边线的颜色在AntD Mobile的UI设计中采用的是中性色，常用的使用场景有分割线以及边框线。原则上我们会建议在一套UI体系中常用的色彩同样不建议做过多定义。

1. 当线条需要被用来表达状态的时候可以调用功能色。

2. 边线中也会有需要调用品牌色的情况，常见的有tab底部的加强线条，导航栏底下的加强线条等。

使用案例以及标注方法／Example

实际设计场景中，设计师对于边线的定义方式如下：

按照上面的定义公式，要得到一条2dp的品牌色实线标注方式如下：

---

Last update: September 2, 2021