思索总结：谈谈卡片式计划

就像图标的图形计一律样，纷歧样的形体也能表达出纷歧样的气质，因此在计划的时辰我们必要依据整体的气魄威风凛凛举办表达。异形卡片的计划，可以让原有方方正正的卡片表达出差别化，从造型上冲破一些传统的处理赏罚方法，再团结一些IP人物元素可以越发深入的表达出详细的内容气氛。

（2）投影深度

投影的视觉结果，会直接影响着整体卡片的质感，太深太大的投影会显得整体卡片过于厚重，太浅太小的投影则显得太过生硬，因此公道的数值比例则可以让卡片看起来天然有质感。在项目中我常用的一组数值纪律是1:2或1:3，譬喻Y轴偏移10px，恍惚度则设定为20或30px，这样成比例的数值出来的结果会较为天然，如下图：

（3）卡片颜色比拟

卡片与配景的颜色比拟会影响这卡片的整体质感，在计划时我们必要掌握好卡片与底色的比拟，差异的明暗比拟出来的质感也会有差别。

这里有两点提议：

1. 卡片色与配景致不宜过分靠近或行使统一颜色，由于会影响卡片整体的空间质感或使得卡片的边沿锐度降落；
2. 深色配景上，只管让卡片与配景致在统一色系可能明度不要差别太大，停止过于突兀。

2. 边距的设定

在行使卡片式计划时，常常会纠结边距的设定，宽边照旧窄边？几多像素更为吻合？常常我会带着这种疑问去计划。

（1）基于内容的简朴法则

卡片式计划作为计划的示意情势，最终是为了承载内容，因此边距的宽窄也必要依靠于现实内容的判定。

团结我在项目中的实行分享以下几点：

a. 多窄少宽

卡片内容较多是行使窄边距，让卡片具有足够的空间来揭示内容，内容较少则可以思量回收宽边距来打造整体的视觉空间感，如下图app store和淘宝的计划比拟。虽然这只是一个提议，现实还得详细题目详细说明。

再如一些瀑布流、宫格、横滑模块较多的APP的计划亦是云云，在内容较多的环境下会把边距压缩到最小的公道间距。

b. 表里成比例

以最外边为基本值往里计划，间距以牢靠比例举办缩减，固然没有删格来得类型，但也可以让计划变得有迹可循。

c. 基于删格

删格体系办理了一些基本的板式题目，有助于晋升计划的类型性，让计划越发有迹可循。在设定卡片式的边距时可以恰当应用删格体系，让边距与内容形成牢靠的相关，这样可以辅佐整体的卡片计划越发具有细节和法则。

3. 卡片的问题设定

问题的设定首要思量以下几点：

1. 是在卡片内照旧卡片外；
2. 问题的字号设定几多更吻合；
3. 问题是否加粗？

卡片内或外的比拟

在项目计划中让我较为纠结的是：问题应该在卡片内照旧卡片外？

通过了一些案例的实行之后，我总结了一个法则（必要依据内容的形态而举办计划）：当卡片内容是独立的模块或模块中只有一个大问题时可设定在卡片内；当卡片内容是以组合泛起可能具有连续性内容时设定在卡片外，形成最外层的主问题。

问题的字号设定

问题首要浸染为2点：

1. 简短声名每个模块的内容；
2. 让用户在长页面赏识中起到引导、定位的浸染。

通过一些实行发明：

1. 当内容较少时，并不必要太大的字号即可起到问题的浸染；
2. 当内容较多时，较小的问题字号则轻易被沉入内容中，让用户在赏识的进程中难以发明，而导致信息获取缺失；
3. 问题应该与正笔墨号巨细差别提议在6-10px，这样可以更好的拉开差别，让问题更具有问题感。

字体是否加粗

通例思想下我们城市对问题举办加粗，我在现实中的履历获得的总结是：必要看手机体系或差异厂商的机型。

（编辑：湖南网）

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