18639011728
免费体验
工作中我们经常会接到一些信息卡片的设计需求，在早期很长一段时间里都困扰着我。和大多数刚入门的小白一样，当接触到这类需求的时候，下意识就是打开自己的的Eagle，找合适的参考，去借鉴排版布局。但是其实最后只知道参考这样做好看，对于作者的设计思路并不清楚。后面我尝试去总结其中的规律，也得出了自己的一些设计思路。
然后，刚好前段时间有位小伙伴问了我类似的问题。所以我决定写这篇文章，把我过去总结的，关于信息卡片设计的思路分享给大家，如果对你有启发，就是对我最大的鼓励。
让我们先看下各类App中，一些比较不错的信息卡片长什么样：
图片理解很简单，就是该卡片想表达的信息主体，可以是商品、风景、插画等，PGC内容图片通常由运营把控，UGC内容为用户自行上传。虽然上线后实际上传的图片，对于设计来说没有太多关系，但在设计稿中还是需要严格控制图片质量（一定程度上也能提高过稿率）。
图片挑选需要注意如下：
图标的出现有以下几类：品牌特定logo、特殊字段图形化（如性别、定位、点赞、VIP、关闭等等，将字段图形化后可以减少该组件内的文本信息，方便设计排版的同时提升整体阅读体验）、氛围点缀（主要在于丰富卡片，提升设计感来吸引用户注意）
图标设计需要注意如下：
文字即对图片的描述信息，通常分为：标题、正文、辅助信息、优惠信息、数据信息（评分、价格、点赞评论数等）
文字信息处理需要注意如下：
标签指活动通知、产品卖点、重要时间、优惠信息等这类需要突出的内容，标签按视觉层级由高到底依次划分为：异型标签、色块型标签、描边型标签3大类。
标签处理需要注意如下：
按钮是卡片上最重要的元素之一（部分卡片也可能没有），作为一个行动点，Ta的作用在于吸引用户点击。按钮在表现形式上和标签一致，我们最常见的有彩色底板+白色文字、消色底板+消色文字、描边框+文字（有彩色描边或有彩色字）。
按钮和标签在处理上很相似，可参照标签。
布局指上述所有图片、图标、字段等信息，在卡片内的排布方式，常见布局方式：上下布局、左右布局、居中布局。
信息布局需要注意如下：
拓展性：卡片中字段的长短对布局的影响较大，字段较长且多的情况下需要的占用的空间更多，所以常见是上下布局。
屏效比：上述拓展性与屏效比的关联紧密，在卡片中，为了保证一行文字最大显示，通常文字都是单独一行，避免左右存在元素占用文字横向空间。但单独一行就意味着增加了卡片高度，虽然单个卡片内文字显示多了，但整个一屏中展示内容变少。为了便于理解上面这段话，这里我们可以看到淘宝这个案例，淘宝的推荐卡片中信息很多，在遇到文案很长的情况下，为了平衡上面讲的这个问题，使用到了如下较少见的布局方式。
合理性：在列表式左右布局中，是选择左文右图，还是左图右文。这需要看产品类型，在新闻资讯类产品中常见是左文右图，而在美食、电商类产品中是左图右文。再有在信息布局上也应符合人眼左到右，上到下的阅读习惯。
产品类型不同主要对布局产生影响。
原因：新闻资讯类，吸引用户产生点击的并不是因为图片，而是具体的标题，通过标题用户才能了解更多关于该卡片的信息。而美食、电商类产品则相反，这类产品图片比文字更吸引人。
在我之前一号店改版中提到，信息卡片可以分为列表式和卡片式两大类，对应的优缺点如下：
卡片式：在卡片式中图片是设计的重中之重。这是因为人是视觉动物，在卡片式设计中使用高质量的图片能瞬间抓住用户的眼球。卡片式设计实现了图文的完美结合，能给用户呈现良好的视觉效果。
应用场景：
列表式：信息集合一般是简单的图文组合（小图+标题）或纯文本信息。由于列表垂直排列每一行内容，相对卡片式，在同样大的屏幕中可以展示更多内容，可供用户阅读信息更多，新闻类和数据类应用更青睞于这种设计。
应用场景：
目标受众的属性，对信息权重的划分影响很大，比如对价格敏感的用户，优惠信息的视觉层级就需要抬高。为了便于理解下面的案例，这里我定义的就是对价格敏感性用户。
