06 | 产品案例分析 · The Guardian的文本之美
邱岳
该思维导图由 AI 生成，仅供参考
00:00 / 00:00
1.0x
- 2.0x
- 1.5x
- 1.25x
- 1.0x
- 0.75x
- 0.5x
（视频较大，请稍待加载）
传统的纸媒应用主要依靠大量的高质量内容取胜，在应用设计和信息架构上难免会臃肿复杂，而卫报客户端最近在设计和体验上的更新却让人非常惊喜。
第一点，卡片设计
卡片本身是一个消化能力较强的设计形式，它可以将不同类型的信息比较整齐地排布在一起。
在卫报客户端首页上，你可以看到有很多不同类型的卡片组合排列。
首先有三种标准卡片。第一种是焦点图组合卡片，有图、有标题，下面还有一些可以横向滑动的卡片元素。第二种小型图的卡片，这种卡片尺寸较小，一行可以放置多个。第三种是纯字的卡片，卡片利用文字的颜色、底色和 Icon 区分不同的样式。
这样的设计之下，即便有大量的文字，整体版面看起来也并不死板。
除了标准卡片还有特制化卡片。这种卡片除了文字或者图片之外，会根据卡片具体内容的模板做出特制化的设计。特质化卡片的设计优点是：虽然信息的类型各异，却能够被卡片系统地整合起来，既规范美观，又不影响内容的形式的丰富性。
在产品设计中，当不同类型与内容的信息需要在同样的架构下展示时，使用卡片可以规范整体的页面版式，使之整齐美观。与此同时，卡片设计也有自己的弊端，你需要根据不同的产品做出最佳的调整。
第二点，文章中的扩展阅读
卫报客户端在内容的扩展阅读中也做出了独特的设计，当文中涉及一些延伸阅读的时候，文章里会嵌入像组件一样的东西，帮助用户去理解它的上下文，获取更多的详细信息。
比如，你在阅读一篇文章的同时，可以查看关于某一话题的展开报道，还可以查看到一些常用的问答，在一些文章中，甚至可以直接嵌入 Twitter 的推文。这样一系列的动作会让文章的体验丰富很多，与现实世界的连接也更加鲜活。
在产品设计上，产品经理也可以参考这样的一种方式：以一篇文章为起点，去串连起所有的上下文和背景信息。这样的设计优点可以让读者在一篇文章中获得沉浸阅读，并能够找到更多感兴趣的相关文章。
第三点，手势导航设计
第一个场景：打开列表页后，点击进入一篇文章，如果我们将手指放在屏幕中间向左或向右滑，这样的操作可以切换不同的文章查看详情；如果我们将手指从边缘开始往右划，页面会回到列表页。
从屏幕中间滑和边缘滑动，效果是截然不同的，这是一个非常大胆的设计，优点和缺点都很有争议。
第二个场景：当从一篇文章的链接中跳转到另一篇文章时，如果我们把手指按在中间向左滑的时候，并不会出现更多文章详情跳转；而将手指向右滑的时候，导航抽屉会被打开，你可以从抽屉上定位到后面或者其他类目。
这样的设计十分巧妙，当用户以某篇文章为起点进行探索的时侯常常会脱离整体的信息架构。这时用户是迷失在整个架构里面的，所以当我们在右滑的时候，系统会把导航展示给用户。让用户快速找到回家的路。
手势导航的不同是一个非常大胆的设计。因为它造成了一个应用中同样手势的不同反应，也许这样的设计会出现不稳定和混乱的感觉，但对于沉浸阅读来说，它或许又是一个十分优秀的交互设计。
这种设计是完全根据用户路径去判断场景并给出反馈。或许，你可以将这样的思路用在其他产品设计中，扬长避短。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
卫报客户端在设计和体验上的更新让人惊喜。首先，采用了卡片设计，将不同类型的信息整齐地排布在一起，使页面版式整齐美观。其次，在内容的扩展阅读中，嵌入了组件式的设计，帮助用户获取更多详细信息，丰富了阅读体验。最后，采用了巧妙的手势导航设计，根据用户路径判断场景并给出反馈，提供了沉浸阅读的交互设计。这些设计不仅体现了技术特点，还能为产品经理提供参考，以提升用户体验。
2017-12-0224人觉得很赞给文章提建议
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《邱岳的产品手记》，新⼈⾸单¥59
《邱岳的产品手记》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(23)
- 最新
- 精选
二爷置顶@张楚琪 信息架构的话题很大，也确实很重要，我会在以后的文章里分享一些经验，但它值得花时间去成体系地研究和学习。 我理解的产品的核心路径一般是主要用户场景路径或主要变现路径，不知道你是不是指这个2017-12-029
听天由己终于等到了今天的案例分享，上次看了 Trigraphy 的产品哲学后，马上试用。 就是想说，入门和大神级作品真的相差很多，Trigraphy 艺术感特别强，中间那个丢骰子产生随机效果绝对是结合生活场景的具体应用。从交互来说，主要页面切换与融合特别赞，只是了解更多都是跳转网页端去处理的，例如进入 Instagram 或是官网查看教程，承载的内容还显得不够完整，但不妨碍这款应用的用户体验和价值。 今天学习了内容呈现形式与产品交互设计，最后关于手势导航设计试用后在来分析。 最后就是，看完今天的视频，回音较重，有些混沌，推断应当是在空旷的房间内进行的。从角度上，录制一期视频节目会比较辛苦，可能是带了移动摄像头来完成的。 我在想，能否用直接屏幕录制应用来解决？整体上讲解与说明可能会更加简单，无论是手势还是产品设计应当能够合理展现。作者回复: 直接录屏有个问题是看不到我点在哪里，我后期注意一下回音的问题，多谢建议！
2017-12-027
cos看这个视频拍摄的角度，感觉拍起来应该挺费劲的作者回复: 很有同理心啊…确实…
2017-12-026- 二马二爷能否介绍一下好用的科学上网工具，国外的应用基本无法访问
作者回复: 咱们在这儿不聊这个，免得惹麻烦…
2017-12-032 
文我个人觉得，卫报的设计在沉浸阅读时，是个好设计，对于一个新用户而言，我知道我是从哪来的，那么左滑的时候我就想回哪去，我不需要思考我左滑后还需要点击啥，但是左边界滑动的设计还是很大胆的，用户初次使用极其有可能就会懵了，脱离沉浸状态。作者回复: 对，我第一次也懵逼状态
2017-12-31
Milk喝了牛奶后续能不能更多地介绍内容产品的不同信息架构设计和其背后的思考逻辑。作者回复: 有机会会聊这个话题，这个有点大，我尽力
2017-12-11- 污大希望可以尽快做出基本功相关的内容，越来越觉得自己基本功很差，后期维护产品不是很方便，文档，项目管理相关的，麻烦作者了。
作者回复: 好，在写ing
2017-12-03 - 孤独的老米记得之前Google对卫报App做了Design访问，其中卫报对太空中的宇航员做了可用性测试，让在极端环境的人也可以轻松使用。2017-12-0210
旺旺1、卡片设计，既整齐统一，又不乏丰富性/活跃性。但，同时也失去了一个总体的贯通性。具体还要看什么产品，场景内容等。 2、扩展阅读，信息流的顺畅引导，让用户在感兴趣的内容中不断快速切入/跳转，增加沉浸感。 3、同一个手势，在不同路径/场景下，代表不同含义（够大胆，有创意，也有争议，毕竟牺牲了一定稳定性/统一性）2019-03-216
yagao0o这个手势操作需要一个详细的操作指引，并且对于用户，需要一定的学习成本。我个人感觉应该避免这类设计…2017-12-024
收起评论