思考总结：谈谈卡片式设计

通过了一些案例的尝试之后，我总结了一个规则（需要依据内容的形态而进行设计）：当卡片内容是独立的模块或模块中只有一个大标题时可设定在卡片内；当卡片内容是以组合呈现或者具有延续性内容时设定在卡片外，形成最外层的主标题。

标题的字号设定

标题主要作用为2点：

1. 简短说明每个模块的内容；
2. 让用户在长页面浏览中起到引导、定位的作用。

通过一些尝试发现：

1. 当内容较少时，并不需要太大的字号即可起到标题的作用；
2. 当内容较多时，较小的标题字号则容易被沉入内容中，让用户在浏览的过程中难以发现，而导致信息获取缺失；
3. 标题应该与正文字号大小差异建议在6-10px，这样可以更好的拉开差异，让标题更具有标题感。

字体是否加粗

常规思维下我们都会对标题进行加粗，我在实际中的经验得到的总结是：需要看手机系统或不同厂商的机型。

我在项目之初都对标题进行了加粗，但后续在跟进还原时看到的效果并不理想，特别是Android的机型上，因为我们使用的是系统默认字体，android系统很多字体并未对系统进行优化，而是使用微软雅黑，微软雅黑在android系统上再加粗，就会显得整个系统的外轮廓特别粗糙，最后我们依据不同的机型进行了差异化的选择。

4. 圆角的规则

圆角的设定实际上没有太多的原则问题，只要符合整体的风格调性即可。当然不同的圆角也能表达出不同的质感，大圆角表达柔和、小圆角表达硬朗。

（1）圆角的规则设定

以卡片的圆角作为基础的参考值往内推算整体的圆角使用规范，卡片与卡内的元素形成合理的比例规则，而非随意根据“经验”进行设定。

（2）圆角大小差异对比

（编辑：西安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!