App设计体系之分割线/卡片/无框

界面上有着大量信息，选择合适的方式将内容划分模块，让内容更清晰有序的展现出来。

通常采用3种方式：分割线、卡片、无框。

1、分割线

分割线可大致分为三类：通栏分割线、左缺口分割线、双缺口分割线。

1.1 通栏分割线

通栏分割线是贯通整个页面的分割线；

朋友圈这类用户UGC(用户生成内容，即用户原创内容)界面选择使用通栏分割线，因为UGC不可控，有可能是文字，有可能是图片加文字，有可能是文字加链接，内容各式各样，多而杂的内容导致界面的视觉压力较大，所以使用通栏分割线来划分每个UGC。

今日头条的推荐界面，通栏分割线划分选项卡和信息流内容。

通栏分割线划分卡片标题(我的订单)与下方功能入口

小结：通栏分割线用于内容较多且数量不确定的信息流界面中，划分不同模块、同个模块中的不同内容、功能。

1.2 左缺口分割线

左缺口分割线是指分割线的左侧留有缺口，右侧通栏；多用于列表式的界面，大多数App的个人中心和设置就是列表式的界面；

掌上生活的“我的”界面，每个模块内的分割线的缺口与图标对齐，之所以运用单缺口分割线，是因为每个入口都是独立又是属于同个模块的。

小结：通栏分割线用于划分同个模块中的不同内容、功能。

1.3 双缺口分割线

双缺口分割线是两侧均有缺口，多运用于信息流界面。

今日头条的首页，双缺口的分割线使得界面两侧留白，形成清晰流畅的视觉流，引导用户往下滑动页面，浏览更多的信息。

同样是feed流，为什么微信的朋友圈使用通栏分割线，而今日头条的首页使用双缺口分割线？

前面提到了朋友圈内容是UGC，内容类型和数量都不确定，而今日头条是PGC(专业生产内容)，后台统一编辑，样式固定。

小结：双缺口分割线更多用于较多内容但样式固定的信息流页面中，保留上下内容的相关性

1.4 分割线的样式

分割线的颜色、粗细这些细节也能影响界面的美观程度。

a 颜色

分割线颜色加深后，注意力被“深深的”分割线所吸引，因此，分割线的颜色不宜过深，稍微加点颜色倾向，视觉效果更和谐。

b 粗细

分割线高度设置为2px，注意力同样被“深深的”分割线所吸引，无论在什么尺寸的界面下，分割线高度不能超过1px。

2、卡片

卡片是把界面信息内容整合组织在块状中，这样让内容更规整化，整体更加的有层次感，可分为通栏卡片和圆角卡片。

2.1 通栏卡片

通栏卡片左右无间距，卡片之间由分隔栏进行分割。

2.2 圆角卡片

圆角卡片的上下左右都有间距，且都是圆角，不同于通栏卡片的是让界面更加有呼吸感，让人耳目一新，卡片不宜过长，否则达不到信息整合的效果。

3 无框

无框是指不使用边框和分割线，界面背景颜色也一致，只用间距来达到区分效果。

适合运用在大图为主、内容有规律的产品。

3.1 大图为主

3.2 内容有规律