极客时间已完结课程限时免费阅读

42 | 产品案例分析：Unread的阅读体验

42 | 产品案例分析：Unread的阅读体验-极客时间

42 | 产品案例分析：Unread的阅读体验

2018-02-24 邱岳 来自北京
《邱岳的产品手记》
课程介绍
00:00 / 00:00
    1.0x
    • 2.0x
    • 1.5x
    • 1.25x
    • 1.0x
    • 0.75x
    • 0.5x
    网页全屏
    全屏
    00:00
    Unread 是一个非常著名的 RSS 阅读器，如果你是 RSS 爱好者的话，肯定听说过这个应用。它的设计非常漂亮，简洁精确，阅读体验很好。
    Unread 的设计，从首页到列表页一以贯之。页面的版式设计也非常统一，元素很少，颜色也很少，只有黑灰红三个颜色，却很精致，有设计感。

    设计的美学：乍见之欢 vs 久处不厌

    关于设计我想多说一句，有一个我特别喜欢的设计师，之前跟我合作去做一些 Web 页的设计，她曾经跟我说，设计应该放到更长的视角中去评价，很多第一眼看上去很惊艳的设计并不一定是好的设计，它有可能会过于抢戏，而把真正的价值掩盖掉。
    好的设计应该是长时间使用，但让用户感到不疲惫，甚至用户都没有意识到设计的存在，它会低调地藏到内容后面，去支撑架构和逻辑。
    这一席话对我影响还是挺大的，我们评价设计的时候通常都是会从看到它的那个片段出发，觉得惊艳或者赞叹，或者平淡无奇，但其实如果我们可以从更长的时间段出发去评价的话，很多乍一看平淡无奇的设计，可能是非常好的设计。
    继续回来看 Unread，我们来看列表页，这个列表页没有去取 RSS 源的图，没有图可能会让页面看起来没那么活泼，但是也会更简洁直观地展示信息。

    字体的差异：英文 vs 中文

    这里有个细节，对比看中文和英文的文章，会感觉英文表现比中文好很多，英文标题有明显的加粗，跟摘要有很明显的样式差异；但中文的差异就小很多。当然 Unread 应该是主要针对英文做的设计，中文表现稍微差一点很正常。
    但我们在同一个列表对比两种设计，会比较直观地感受到差别，当主题和正文的差异足够明显的时候，我们随着往下拉列表，视觉是很容易跳读的，视线可以快速地定位到每一条的标题上；如果差异不大，像中文这样，当然也可以跳读，但好像就会稍微累一点。这个道理没什么高深的，可是在这里对比还是挺直观的。
    还有一个是关于这种差异来源的，就是我们看到很多国外很漂亮的版式设计，用到中文的时候就会差一截，长度、字体和字型都不一样；所以当我们想要去借鉴的时候，一定要意识到这个差异，不要一股脑搬过来，可能会不伦不类。
    对于版式设计，其实可以多借鉴日文的东西，因为日语里面有很多汉字，不太会有字型差异带来的设计效果差异。

    信息架构的逻辑：解决问题 vs 制造问题

    我们再看整个架构，会看到统一入口或者某个源的入口，然后进来就是列表，点击就是详情，非常自然。当然，因为 RSS 本来的逻辑结构就简单，不需要什么特别的设计。
    但是，从文字内容的设计出发，更容易去理解一个事情，就是设计与信息本身的关系，我之前看过一本书叫《无界面交互》，里面有一句话我特别喜欢，说过载、混沌和困惑并不是信息的特质，而是设计的失败。
    其实信息本身就有其逻辑和结构，而不是说因为有了信息架构设计，才被分门别类地安放在不同的槽里面，很多时候我们会陷入到一些经典的范式中，比如抽屉，比如 Tab，比如九宫格。
    好像是先有了架构，再往里填充信息，这个逻辑其实是不对的，应该是先理解信息本身的结构，再考虑用什么样的设计去自然地接住它。要让设计去解决问题，而不是制造问题。
    另外说一下这个极简设计是如何做交互的，除了在架构里点来点去，按图索骥之外，还利用了长按和上下左右滑，在几乎所有的界面上都响应这几个交互手势，而且有一个很精致地动效连接，非常连贯。
    分享给需要的人，Ta购买本课程，你将得18元
    生成海报并分享

    赞 12

    提建议

    © 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
    上一篇
    41 | 产品经理的项目管理心得
    下一篇
    43 | “玩”的力量：从游戏设计中学习产品设计（上）
    unpreview
     写留言

    精选留言(12)

    • 听天由己
      2018-02-24
      Unread 毫不犹豫体验了一番，大道至简，要把产品特性做到尽可能简洁明了、清晰可用，这真的是要修行的事情。 1、开屏动画与引导很有意思，让用户了解了基本操作以及手势； 2、路径信息位于最底端，随着用户操作而变化； 3、文章详情页同样简单，多了时间点与一些图片缩略图，点击标题可跳转至信息源，与列表内容并无太多区别，一开始我误以为内容没有全部加载。 就这样刷了下，50 条免费阅读额度就要用完了... P.S. 今天翻看数据，无意发现二爷竟然关注了我，真的诚惶诚恐，关于产品，很多文章都是从二爷专栏中获得的灵感，并将其融入在实战中，理论知识有待提升。 自认天赋不够，唯有努力追赶。 这几天回来工作，突然有些无所适从，再看了一遍新年的心灵鸡汤，摆正心态，重新上路。 谢谢二爷鼓励，只不过以后写东西压力更大了。
      展开
      12
    • CC
      2018-02-25
      关于好的设计，记得有这么一句话："Good design, when it’s done well, becomes invisible. It’s only when it’s done poorly that we notice it”。大意是：“良好的设计，当它做得好时，变得不可见。 只有当它做得不好时，我们才会注意到它”。 我是 Feedly 和 Pocket 的重度用户。比起它们，Unread 对于文字的细节处理的更胜一筹，例如字体选择和行间距。没有刻意对比，可能能够感受到不同，但无法明确这不同来自于什么。 回头看Readhub，这才注意到在列表页上，文字周围采用了更大的留白，让用户快速扫描和跳读。在文章内，标题微微加粗，下方使用淡灰色的分割线，顺滑过渡到灰色的正文，让信息有了更好的层级和节奏。极客时间正文则采用深灰色的文字颜色，稍微弱化了信息层级，但在白色背景上对比度更强，适合阅读长文。 这些“不可见”的细节，在背后支撑着阅读体验。这些细节同时也体现了“先理解信息本身的结构，再考虑用什么的设计去自然的接住它”的理念。 谢谢二爷的分享，让我重新注意到这些“不可见”的细节。 期待下一次的视频分享。
      展开
      9
    • 悟空来 | Arthur...
      2020-06-08
      从这里我学到了，选媳妇不仅要好看。还要耐看
      3
    • 郝产品
      2018-02-26
      重点： 其实信息本身就有其逻辑和结构，而不是说因为有了信息架构设计，才被分门别类地安放在不同的槽里面，很多时候我们会陷入到一些经典的范式中，比如抽屉，比如 Tab，比如九宫格。 好像是先有了架构，再往里填充信息，这个逻辑其实是不对的，应该是先理解信息本身的结构，再考虑用什么样的设计去自然地接住它。要让设计去解决问题，而不是制造问题。
      展开
      3
    • 林墨染
      2019-01-23
      这里想说一下某些公司，最后领导评审，尤其国内，并不喜欢平淡但是不厌倦的设计，反而喜欢那种花哨一眼惊艳的设计。因为领导可能只有评审的时候就看一下。之前两个设计师，那个做的更加精简舒服的反而离职了。
      1
    • AICC
      2018-02-26
      二爷用的什么vpn可否推荐一下: ）
      1
    • 方薇
      2022-10-19 来自上海
      非常好
    • 刘洋3
      2022-02-22
      课程设计赞
    • Dylan
      2018-07-29
      信息本身的结构在先，然后设计配合在后，这个顺序不能搞混。 比如我自己在这周去调研产品发现页的内容组织时犯了错误。我并没有把一个内容模块想要展示的信息组织清楚，而先搞了一些酷炫的交互设计，然后再和导师去沟通的时候，他问我信息到底是如何呈现的，入口在哪里，怎么跳转的等等，我一瞬间语塞。 产品经理要想是对内容去做一些调整的话，一定要先把自家内容的分类、组织形态、流通方式想清楚。
      展开
    • 罗帅
      2018-05-04
      ”我们评价设计的时候通常都是会从看到它的那个片段出发，觉得惊艳或者赞叹，或者平淡无奇，但其实如果我们可以从更长的时间段出发去评价的话，很多乍一看平淡无奇的设计，可能是非常好的设计” 很多时候我们为了表现自己，总想搞点新奇的东西，一鸣惊人。
    • 罗帅
      2018-05-02
      好的设计应该是长时间使用，但让用户感到不疲惫，甚至用户都没有意识到设计的存在，它会低调地藏到内容后面，去支撑架构和逻辑
    • 伟铭
      2018-03-01
      “先理解信息本身，再设计结构”。对于其他类型的应用也是同样适用的原理，不是一开始先看看有什么模版，效果怎么酷炫，而是应该先理解要设计的应用的功能和内容，再决定应该用什么样的设计。