文章是在 Medium 上然后自己翻译的，好多语句可能也没有斟酌的很通顺便直接发出来了，请见谅><。自己学习的同时希望给大家也有帮助。简而言之，自知翻译功力不足各位看自己需要的就好。（抱拳）

下面进入译文。

最近我在设计一些卡片式的设计，这是很有趣！在往下看之前，这里有一些信息可以帮助您更好地理解本文。

在同一个系列里相似的商品通常有 60-120 个。用户可以进行搜索找到商品然后购买。当商品不能再被购买时，会有一个关闭的时间。

少即是多

精简你的产品而不是堆加。

之前（左）                                 之后（右）

卡片是充当产品细节页面的入口。最初的设计（左边）有三种方式来进入细节页面：点击“查看这个产品”按钮、点击项目信息旁边的“更多”按钮、点击卡片本身。“更多”按钮是更多的跳转，这是可以理解的。然而如果我们删除两个按钮，结果会很糟糕吗？

答案是否定的。在删除了“更多”和“查看这个产品”之后，页面看起来更清晰。如果你想问商业价值呢，我想说随着新设计的出现，卡片式设计会变得很简洁，更多的内容将显示在一个水平空间中。对于用户来说会有更高几率找到他们想要的东西。

和谐UI

创建一个统一的、一致的用户体验。

标准商品卡片（右 1）和标准系列卡片（右 2）

当我开始总结产品中所有使用的卡片式设计时，发现没有一个标准性。卡片上的相同组件有不同的视觉风格，更重要的是用户会感到困惑，因为一个商品卡看起来就像一个系列卡，反之亦然。

最开始需要解决的问题是区分商品和系列的定义：商品是一件物品，而系列则包含许多物品。然后，为了让用户更清楚的区分，需要确定商品的编号标签和一个系列中有多个图片的标准，使它与商品卡区分开来。这个案例是说，设计语言不仅是统一视觉风格，而且还是建立统一标准。

使用需求优先级

显示关键信息。

卡片式的优先级

卡片可以包含多种类型的信息，如图像、标题和按钮。在某些情况下不需要所有信息，则根据它对用户的重要性来划分信息的优先级。

例如，当一个商品是用户标记所喜欢的，则该商品的关闭时间是最关键的信息。只显示关闭时间和当前价格来吸引用户点击购买。另一种情况，当一个商品是用户最近查看过的，那么更改的价格对用户来说很重要，这会吸引用户很快购买该商品。

差异性布局的乐趣

在浏览时保持用户的兴趣。

无聊的布局（左）和有差异的布局（右）

我们通常通过布局看到事物。与此同时，我们也不想感到无聊。就像 Pinterest 等许多应用是用瀑布流式布局一样，我的目标是通过设计布局来提供更有趣的浏览体验。网格视图、列表视图和瀑布流经常一起使用。要记住，不要让用户在一个布局中长时间的浏览。

感谢阅读！

原文链接：https://blog.prototypr.io/product-design-principles-in-a-single-card-2f6023419a87

作者链接：https://blog.prototypr.io/@designmei?source=post_header_lockup