一个页面区分管理者和普通用户如何设计_设计师如何设计完美的卡片

这篇文章将讲述如何通过一些简单的设计准则来构建完美的卡片UI。

在过去的十年中，由于互联网与手机APP的普及，我们很容易在这些应用程序中看到卡片设计，然而用户体验问题往往也来源于拙劣的卡片设计。

卡片组件的元素

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

01限制卡片文本字数

将卡片内容限制在100个字或两个短句之内。

卡片文本应仅提供信息概述，来帮助用户确定他们是否进行下一步操作(例如点击卡片上的按钮)。

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

包含多个行为(action)的卡片应在视觉上进行优先级区分。在上述的例子中，我通过采用按钮与链接两种不同的形式来区分首要行为与次要行为。

与按钮相比，链接在视觉上不那么突出，这种设计引导用户点击按钮执行首要行为，从而实现商业目的。

03文本内容增加视觉层次

文本内容应具有视觉层次区分，满足排版五要素，从而凸显重点并增加内容可读性。

04拒绝边框滥用

新手设计师经常会滥用边框分割模块，然而这些不必要的分割线会影响整体的美观与内容的呈现。

05不要在文本中插入链接

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

06每张卡片一个想法

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

07知道何时使用列表

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

08知道何时使用表格

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

09其他注意事项

卡片方向

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

凸显卡片

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

考虑悬停行为的设计

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

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

图源 I Dribble

总结：

• 限制卡片文本字数。
• 视觉上区分卡片行为优先级。
• 文本内容增加视觉层次。
• 限制边框的使用，学会通过排版与色块来区分内容
• 不要在文本里插入链接
• 每张卡片一个想法
• 当文本内容较少时，使用列表
• 包含大量数据信息，需要分类展示时使用表格
• 卡片组件可以垂直或者说水平排列，卡片内容可以只包含文本
• 通过边框、阴影、颜色将卡片内容与背景区分
• 考虑悬停设计来美化卡片外观、减少面积占用

想学习或提升设计可以来aaa教育。

相关推荐：

如何设计更高级？

设计细节，视觉差设计

数据图表有什么使用技巧？

内容过多时，页面如何设计？

什么是设计语言？以及如何搭建