卡片式设计对于我们来说并不陌生，从设计类网站上或市场上的一些APP中也会看到很多的卡片式设计的案例。关于卡片设计的文章网上已经有很多了，今天根据以往的一些经验来总结卡片设计的细节要点，期望能给大家在卡片设计上提供一些方法。
大家都知道界面上好的用户体验除了交互以外，好的信息排版也是至关重要的。而我们UI设计本质的就是对信息的编排，所以对“信息”和“排布”要想清楚，尝试着去拆解这两个关键词，整个UI的规则也会明确很多。
1、比例
好的比例是吸引我们目光的原因，在某种程度上和音乐和声取悦我们的耳朵是相同的。卡片的比例也是有美感可循的，比如黄金比例（1.），白银比例（1.），青铜比例（1.），正方形之类的比例。当然在设计中，我们也要结合页面的需求内容来确定合适的比例。
我在设计卡片时，宽高比常会用4:3的比例，接近于青铜比例，我就会直接用青铜比例。我们在设计的时候，美感比例比较接近其中之一的话，干脆就直接优化到美感比例。
2、圆角
圆角的设定实际上没有太多的原则问题，只要符合整体的风格调性即可。圆角很小，视觉印象是硬朗，高冷，具有攻击性的，多用于严肃、高端、冲突感强烈的设计中；而更大的圆角给人的感觉是有亲和力，柔软，安全的，多用于儿童产品、娱乐性强的设计中。
通常会采用4的倍数来设置圆角大小，比如4px，8px，12px等。
1、文字对比
卡片上的内容层级要做好，标题和内容的对比要明显，文字大小的对比要强烈，文字颜色对比要有层次，突出主次关系，支持用户阅读，而不是干扰用户阅读。
大量使用同色文字，会使阅读者不知从哪里先开始读，且容易产生阅读疲劳，所以层级关系要做好。
2、减少线框
卡片内减少线框的使用，采用适当的留白进行内容划分，让卡片简洁有质感。
过多的使用线条，会使卡片看起来过于琐碎。巧妙的留白，使页面更简洁有秩序。
3、内容精简
卡片中的内容文字尽量精简，一般横向文字40个字左右，纵向5行以内。文字过多，卡片内会过于拥挤，不适合长文本阅读。
4、内外间距比例
卡片内外间距多窄少宽，有利于展示更多的内容。以最外边为基础值往里设计，间距以固定比例进行缩减，虽然没有栅格来得规范，但也可以让设计变得有迹可循。同样我们也可使用栅格来完成。
1、文字对比突出
·卡片的投影效果会直接影响卡片的质感，太深显得厚重，太浅又不够突出，因此合理的数值比例可以让卡片看起来自然有质感，一般会用1:2/1:3的比例，比如Y轴偏移是10px，模糊度则为20px/30px。
·投影取色的时候可以结合环境色，背景颜色或者卡片主色，稍微加深一些，纯黑投影会显脏，投影不通透。就像作画一样，适当的取环境色，使物体和谐的融入画面。
1、内容模块化，提升区域感
模块化结合卡片式设计，可使界面的内容清晰有规则，视觉上对内容进行了分隔，有利于用户快速获取信息。
2、强化独立内容，提升空间利用率
相较于传统的拉通式布局，卡片式设计可单独呈现出相对有特性的内容，大的整体相关联，小模块又相对独立。页面一般为纵向浏览，使用卡片设计在横向空间，可扩展横向滑动操作，也不影响整体视觉。
3、加强空间层次感
卡片设计本身就有基本的层级感，相比拉通式设计界面层次更丰富，通过卡片投影、大小、前后层次、等设定，使背景与内容之间呈现丰富的层次。
4、视觉突出，可点击性强
卡片的设计使空间产生了区域划分，同时各模块的内容在视觉上也会更加突出，直觉感官上点击感知会更强烈。
1、横向空间利用率降低
卡片式设计的使用会占用左右间距，因此相比拉通式设计，卡片式设计在横向区域会限制多些，所以在设计卡片边距时应视卡片内容而定。
2、层级划区过多，影响阅读
卡片式设计本身就增加了区域层级感，但过多的划区层级会使界面显得拥挤。
改善办法：
1.、利用不拉通分隔线的办法减少划区；
2、弱化层级，降低模块之间的对比。
3、不适合长文本内容表达
前面也说到过，卡片内文字过多，卡片内会过于拥挤，所以长文本内容不建议用卡片样式。长文本的阅读更多是专注于文字，无边界的体验会更使阅读更有沉浸感。
以上就是卡片设计的一些经验总结，卡片设计的应用已经如此广泛，我们有必要利用起来提升自己的界面设计细节。
无论是卡片式或者拉通平铺的方式，最终目的都是为了服务内容，我们在设计过程中找到一种更适合、更合理呈现内容的方式才是最主要的，切莫流于形式而忽略了内容设计本身的重要性。
（作者：汪燕）
设计笔记〡人因工程与用户体验设计
设计笔记〡浅谈响应式布局设计
设计笔记〡B端产品体验设计
设计笔记〡构建企业“能力复用平台”，设计师如何应对？
预览时标签不可点收录于合集#个上一篇下一篇