卡片设计的八大黄金法则

卡片是一种交互设计的组件，它把信息聚合在一个形状类似卡牌的模块内；同时它常常承载着入口的功能，点击卡片便可进入其他页面。卡片组件的基本元素包含图片视频模块、标题、副标题、元数据、摘要文本以及行为（按钮、链接）

在过去的十年中，由于互联网与手机APP的普及，我们对卡片设计已经非常熟悉。

虽然卡片设计是个老生常谈的话题，但依旧有很多容易被我们忽视的问题。一个拙劣的卡片设计往往能引发各式各样的用户体验问题。

01

限制卡片文本字数

卡片里的文本应仅提供信息概述，来帮助用户确定他们是否进行下一步操作（例如是否点击按钮）；过于冗长的信息会增加用户的阅读成本并增加用户作决策的时间。

02

在视觉上对卡片的“行为优先级”进行区分

包含多个行为（action）的卡片应在视觉上进行优先级区分。

在下面的例子中，我通过采用【按钮】与【链接】两种不同的形式来区分【首要行为】与【次要行为】。与按钮相比，链接在视觉效果上显得没那么突出。这种设计可以引导用户点击按钮执行首要行为，从而实现商业目的。

03

注意文本内容的视觉层次

注意对卡片中的文本内容进行视觉层次区分。比如满足排版五要素，从而凸显重点并增加内容可读性。

04

拒绝边框滥用

新手设计师经常会滥用边框分割模块，但有时候不必要的分割线反而会影响内容呈现和版式设计。

05

不要在文本中插入链接

不要在文本中插入链接，这样会因为频繁跳转而影响用户做出判断。

06

每张卡片一个想法

不要在一张卡片中展示多个想法，而是将想法分散在不同的卡片中。

07

知道何时使用列表

对于文本内容较少的模块，请使用列表代替卡片，从而加快使用者的阅读速度。

08

知道何时使用表格

对于包含大量信息数据，需要快速阅读、分类、排序与信息过滤的文本，请以表格形式展示。

09

其他注意事项

• 卡片方向

  卡片组件可以垂直或水平排列，它的内容可以包含媒体模块（视频、图片），也可以只包含文本内容。

• 凸显卡片

  通过边框、阴影、颜色的差异，将卡片与画布背景区分开来

• 考虑悬停行为的设计

  在空间不够用时，可以考虑通过悬停状态触发行为（primary action），这种设计可以增加界面的美观度，减少空间的占用，但是无法应用到触摸屏中。

（不清楚悬停设计是什么的同学可以参考下图：）

— — — —

今天的内容分享就到这里，为了避免金鱼记忆，我们再来快速浏览一遍：

• 限制卡片文本字数。

• 视觉上区分卡片行为优先级。 

• 文本内容增加视觉层次。

• 限制边框的使用，学会通过排版与色块来区分内容
  

• 不要在文本里插入链接

• 每张卡片一个想法
  

• 当文本内容较少时，使用列表

• 包含大量数据信息，需要分类展示时使用表格

• 卡片组件可以垂直或者说水平排列，卡片内容可以只包含文本

• 通过边框、阴影、颜色将卡片内容与背景区分

• 考虑悬停设计来美化卡片外观、减少面积占用