06 | 产品案例分析 · The Guardian的文本之美

（视频较大，请稍待加载）传统的纸媒应用主要依靠大量的高质量内容取胜，在应用设计和信息架构上难免会臃肿复杂，而卫报客户端最近在设计和体验上的更新却让人非常惊喜。

第一点，卡片设计

卡片本身是一个消化能力较强的设计形式，它可以将不同类型的信息比较整齐地排布在一起。

在卫报客户端首页上，你可以看到有很多不同类型的卡片组合排列。

首先有三种标准卡片。第一种是焦点图组合卡片，有图、有标题，下面还有一些可以横向滑动的卡片元素。第二种小型图的卡片，这种卡片尺寸较小，一行可以放置多个。第三种是纯字的卡片，卡片利用文字的颜色、底色和 Icon 区分不同的样式。

这样的设计之下，即便有大量的文字，整体版面看起来也并不死板。

除了标准卡片还有特制化卡片。这种卡片除了文字或者图片之外，会根据卡片具体内容的模板做出特制化的设计。特质化卡片的设计优点是：虽然信息的类型各异，却能够被卡片系统地整合起来，既规范美观，又不影响内容的形式的丰富性。

在产品设计中，当不同类型与内容的信息需要在同样的架构下展示时，使用卡片可以规范整体的页面版式，使之整齐美观。与此同时，卡片设计也有自己的弊端，你需要根据不同的产品做出最佳的调整。

第二点，文章中的扩展阅读

卫报客户端在内容的扩展阅读中也做出了独特的设计，当文中涉及一些延伸阅读的时候，文章里会嵌入像组件一样的东西，帮助用户去理解它的上下文，获取更多的详细信息。

比如，你在阅读一篇文章的同时，可以查看关于某一话题的展开报道，还可以查看到一些常用的问答，在一些文章中，甚至可以直接嵌入 Twitter 的推文。这样一系列的动作会让文章的体验丰富很多，与现实世界的连接也更加鲜活。

在产品设计上，产品经理也可以参考这样的一种方式：以一篇文章为起点，去串连起所有的上下文和背景信息。这样的设计优点可以让读者在一篇文章中获得沉浸阅读，并能够找到更多感兴趣的相关文章。

第三点，手势导航设计

第一个场景：打开列表页后，点击进入一篇文章，如果我们将手指放在屏幕中间向左或向右滑，这样的操作可以切换不同的文章查看详情；如果我们将手指从边缘开始往右划，页面会回到列表页。

从屏幕中间滑和边缘滑动，效果是截然不同的，这是一个非常大胆的设计，优点和缺点都很有争议。

第二个场景：当从一篇文章的链接中跳转到另一篇文章时，如果我们把手指按在中间向左滑的时候，并不会出现更多文章详情跳转；而将手指向右滑的时候，导航抽屉会被打开，你可以从抽屉上定位到后面或者其他类目。

这样的设计十分巧妙，当用户以某篇文章为起点进行探索的时侯常常会脱离整体的信息架构。这时用户是迷失在整个架构里面的，所以当我们在右滑的时候，系统会把导航展示给用户。让用户快速找到回家的路。

手势导航的不同是一个非常大胆的设计。因为它造成了一个应用中同样手势的不同反应，也许这样的设计会出现不稳定和混乱的感觉，但对于沉浸阅读来说，它或许又是一个十分优秀的交互设计。

这种设计是完全根据用户路径去判断场景并给出反馈。或许，你可以将这样的思路用在其他产品设计中，扬长避短。

!

戳此获取你的专属海报