06 | 产品案例分析 · The Guardian的文本之美
下载APP
关闭
渠道合作
推荐作者
06 | 产品案例分析 · The Guardian的文本之美
2017-12-02 邱岳 来自北京
《邱岳的产品手记》
课程介绍
00:00 / 00:00
1.0x
- 2.0x
- 1.5x
- 1.25x
- 1.0x
- 0.75x
- 0.5x
（视频较大，请稍待加载）
传统的纸媒应用主要依靠大量的高质量内容取胜，在应用设计和信息架构上难免会臃肿复杂，而卫报客户端最近在设计和体验上的更新却让人非常惊喜。
第一点，卡片设计
卡片本身是一个消化能力较强的设计形式，它可以将不同类型的信息比较整齐地排布在一起。
在卫报客户端首页上，你可以看到有很多不同类型的卡片组合排列。
首先有三种标准卡片。第一种是焦点图组合卡片，有图、有标题，下面还有一些可以横向滑动的卡片元素。第二种小型图的卡片，这种卡片尺寸较小，一行可以放置多个。第三种是纯字的卡片，卡片利用文字的颜色、底色和 Icon 区分不同的样式。
这样的设计之下，即便有大量的文字，整体版面看起来也并不死板。
除了标准卡片还有特制化卡片。这种卡片除了文字或者图片之外，会根据卡片具体内容的模板做出特制化的设计。特质化卡片的设计优点是：虽然信息的类型各异，却能够被卡片系统地整合起来，既规范美观，又不影响内容的形式的丰富性。
在产品设计中，当不同类型与内容的信息需要在同样的架构下展示时，使用卡片可以规范整体的页面版式，使之整齐美观。与此同时，卡片设计也有自己的弊端，你需要根据不同的产品做出最佳的调整。
第二点，文章中的扩展阅读
卫报客户端在内容的扩展阅读中也做出了独特的设计，当文中涉及一些延伸阅读的时候，文章里会嵌入像组件一样的东西，帮助用户去理解它的上下文，获取更多的详细信息。
比如，你在阅读一篇文章的同时，可以查看关于某一话题的展开报道，还可以查看到一些常用的问答，在一些文章中，甚至可以直接嵌入 Twitter 的推文。这样一系列的动作会让文章的体验丰富很多，与现实世界的连接也更加鲜活。
在产品设计上，产品经理也可以参考这样的一种方式：以一篇文章为起点，去串连起所有的上下文和背景信息。这样的设计优点可以让读者在一篇文章中获得沉浸阅读，并能够找到更多感兴趣的相关文章。
第三点，手势导航设计
第一个场景：打开列表页后，点击进入一篇文章，如果我们将手指放在屏幕中间向左或向右滑，这样的操作可以切换不同的文章查看详情；如果我们将手指从边缘开始往右划，页面会回到列表页。
从屏幕中间滑和边缘滑动，效果是截然不同的，这是一个非常大胆的设计，优点和缺点都很有争议。
第二个场景：当从一篇文章的链接中跳转到另一篇文章时，如果我们把手指按在中间向左滑的时候，并不会出现更多文章详情跳转；而将手指向右滑的时候，导航抽屉会被打开，你可以从抽屉上定位到后面或者其他类目。
这样的设计十分巧妙，当用户以某篇文章为起点进行探索的时侯常常会脱离整体的信息架构。这时用户是迷失在整个架构里面的，所以当我们在右滑的时候，系统会把导航展示给用户。让用户快速找到回家的路。
手势导航的不同是一个非常大胆的设计。因为它造成了一个应用中同样手势的不同反应，也许这样的设计会出现不稳定和混乱的感觉，但对于沉浸阅读来说，它或许又是一个十分优秀的交互设计。
这种设计是完全根据用户路径去判断场景并给出反馈。或许，你可以将这样的思路用在其他产品设计中，扬长避短。
分享给需要的人，Ta购买本课程，你将得18元
生成海报并分享赞 23
提建议
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
上一篇
05 | 如何当好AI时代的产品经理？（实践篇）
下一篇
07 | 关于需求变更（上）：需求背后的需求
精选留言(23)
二爷置顶2017-12-02@张楚琪 信息架构的话题很大，也确实很重要，我会在以后的文章里分享一些经验，但它值得花时间去成体系地研究和学习。 我理解的产品的核心路径一般是主要用户场景路径或主要变现路径，不知道你是不是指这个9
孤独的老米2017-12-02记得之前Google对卫报App做了Design访问，其中卫报对太空中的宇航员做了可用性测试，让在极端环境的人也可以轻松使用。10
听天由己2017-12-02终于等到了今天的案例分享，上次看了 Trigraphy 的产品哲学后，马上试用。 就是想说，入门和大神级作品真的相差很多，Trigraphy 艺术感特别强，中间那个丢骰子产生随机效果绝对是结合生活场景的具体应用。从交互来说，主要页面切换与融合特别赞，只是了解更多都是跳转网页端去处理的，例如进入 Instagram 或是官网查看教程，承载的内容还显得不够完整，但不妨碍这款应用的用户体验和价值。 今天学习了内容呈现形式与产品交互设计，最后关于手势导航设计试用后在来分析。 最后就是，看完今天的视频，回音较重，有些混沌，推断应当是在空旷的房间内进行的。从角度上，录制一期视频节目会比较辛苦，可能是带了移动摄像头来完成的。 我在想，能否用直接屏幕录制应用来解决？整体上讲解与说明可能会更加简单，无论是手势还是产品设计应当能够合理展现。展开作者回复: 直接录屏有个问题是看不到我点在哪里，我后期注意一下回音的问题，多谢建议！
7
旺旺2019-03-211、卡片设计，既整齐统一，又不乏丰富性/活跃性。但，同时也失去了一个总体的贯通性。具体还要看什么产品，场景内容等。 2、扩展阅读，信息流的顺畅引导，让用户在感兴趣的内容中不断快速切入/跳转，增加沉浸感。 3、同一个手势，在不同路径/场景下，代表不同含义（够大胆，有创意，也有争议，毕竟牺牲了一定稳定性/统一性）展开6
cos2017-12-02看这个视频拍摄的角度，感觉拍起来应该挺费劲的作者回复: 很有同理心啊…确实…
6
yagao0o2017-12-02这个手势操作需要一个详细的操作指引，并且对于用户，需要一定的学习成本。我个人感觉应该避免这类设计…4
hellohihsa2017-12-23要是视频可以置顶在上面，让底下的文字可以随着视频进度滚动或者自由滚动就好了，可以起到一个字幕的作用2- 二马2017-12-03二爷能否介绍一下好用的科学上网工具，国外的应用基本无法访问
作者回复: 咱们在这儿不聊这个，免得惹麻烦…
2 
Atom2017-12-03很有启发。不仅是内容类的客户端，但凡是内容类的功能都可以参考，比如产品中的社区功能2
张楚琪2017-12-02二爷在「Trigraphy的设计哲学」的留言回复里提到了信息架构、核心路径、交互细节，二爷会在后续的文章中展开讲讲这一块吗？ 1. 设计信息架构的时候应该注意些什么，一个好的产品信息架构有哪些共性？ 2. 项目管理中有关键路径的概念，产品设计中，怎么找到产品的核心路径，路径往往有多条，设计核心路径的时候，如何取舍？展开1- 方薇2022-10-19 来自上海非常好
stars2021-01-05这种设计只能针对特定场景，交互多的场合不适合
七年2020-10-29英文文字决定了他们无法做到像中国的新闻应用一样把导航放在顶部滑动，因为太长了！
云师兄2019-10-17凸显信息组合的卡片设计 信息扩展，提高沉浸阅读体验 手势交互，利用用户路径和信息结构
Dylan2018-06-12手指左右滑那个例子，除了帮助用户回到起点外，技术上也没有足够的数据让用户如主路径那样操作。 手势非常适合移动交互的方式，除了点滑动屏幕位置的不同外，手势操作的不同也有很多不同操作，比如TIM最近更新的大幅度下拉展示to do list，还有miui全面屏手势触控中，屏幕底端上滑返回桌面，上滑悬停调出任务栏。这些跳转关系的交互设计很有趣。- Z.X.Y2018-05-24安卓手机进入开发者模式，是可以调出触摸指针的，手指触碰屏幕的位置会出现一个小圆块，录屏的时候就可以知道你的具体操作了！
罗帅2018-05-20现在改了，第三小节中的第二个场景，已经取消了，跟第一个相同
靖～2018-04-21很大胆的设计啊
米乂休2018-02-06如果只看文字不看视频感觉有点懵啊，有没有考虑过采用图文
zhatrix2018-01-19信息架构有没有遵循的原则？或者是说有没有比较成熟的案例和他们的方案