设计风格总结--内容载体篇

卡片作为内容的承载体可以很好的聚合内容，使界面整洁清晰，在国内的设计中非常常见，像社交（百度贴吧）、电商（美团外卖）、智能家居（小爱音响、华为智慧生活）、阅读（微信读书）、新闻（网易新闻）、工具（一刻相册）、租房（自如、贝壳）类产品中都可以看到具体的落地效果。

卡片设计一般采用灰底白卡（干净清爽），也可白底灰卡（灰色卡片不易大面积使用）或者白底白卡加投影（视觉冗杂，小面积使用），横托氛围彩色底（一般在头部做渐变）也可以小部分界面使用。同时可以有较多的设计可能性来丰富界面层次质感，比如加投影、加描边、加色彩、内部加分割线、叠加不透明度渐变图片/插图等。也是市面上使用最多的设计样式，同时适用于功能简单/复杂的产品。

无框的设计大多伴随着三个特点：

1.大间距/大标题，想要界面清晰的呈现层次但又没有卡片做内容收拢和分割线做隔断，那么这个时候就需要大间距/ 大标题来阻断用户的视线

2.大图为主，图片本就可以充当分割线

3.功能单一，内容规律的产品使用

分隔线的设计也比较常见，个人觉得在海外产品中更常见，分隔线可以使内容更紧凑，提高屏幕的屏效比。这里说的分割线一般是指通栏（下图第一张），宽度和界面等宽。通栏可以对模块进行有效区分，2个通栏分割线+中间的内容可以理解为一个卡片。 非通栏如下图2（宽度比界面窄，左右有边距）整个界面属于签到，所以属性一致使用非通栏。

除了智能家居类产品。市面上无论是功能简单或者复杂的产品，整个产品的设计比较少在以上三种内容载体上做到高度统一的。组合设计的很多，往往是混合使用对不同的场景进行设计，以达到最佳的产品理念展现和视觉效果。

同样，新能源的车机中控屏设计也多采用卡片，车机操控多为驾驶场景，尤其导航时，卡片更能聚拢用户实现，实现安全驾驶。

总篇文章是从视觉角度出发进行分析，总体分析下来卡片作为内容的承载体在国内产品中很受用，可以运用在各种属性的产品中，其圆角的弧度对美观度很重要，直角犀利商务圆角又有着各种弧度，不同的弧度传递不一样的产品感受，这种感受看不见摸不着，但可以用“舒服”“不舒服”“好看”“不好看”来评价。 而无框设计比较少，个人推测无框需使用大标题或大间距，版面率低，故不使用。 分割线设计较卡片设计相同之处在于可以很好的区分内容，但分割线的粗细、颜色深浅对美观度的表达有较高的要求，同时进一步打造界面质感受限（如加投影的话投影颜色需和分隔线做平衡）。 个人觉得卡片是个不错的设计风格，可以在卡片的基础上做很多视觉表达，同时也可以做无框设计区分大部分卡片竞品。

多做尝试，可以尝试下产品的风格做高度统一，统一使用卡片或者无框设计，如果提前了解好市场定位、做好产品功能分析罗列（很重要，不一定要落地但大脑中要清晰明朗）、知道市场上同类产品大致样貌，再思考如何呈现产品，那么是可以做到风格统一的。为自家产品找到合适的内容呈现载体。