太上老菌太上老菌朝菌学园ZhaoDesign
01
简介
Spotify是一个著名的流媒体应用，用户能够听歌和听播客。对于听众来说，听播客是一种发现各种丰富内容的好方法。播客在21世纪初正式兴起，几十年后的2021年，它们开始流行起来。
对于播客听众来说，一系列可收听的内容为用户提供了一个独特机会，让他们能够从博客中获取信息。它还可以作为一种替代性的学习方式。
对于播客创作者来说，发布的播客数量很容易让人们忽视创作者设计播客体验而付出的努力。这使得创作者获得曝光度变得非常困难。
02
开始设计之旅～
设计目标
我的目标是设计一个 帮助听众从播客中学习，同时提高创作者的播客知名度的新功能。
用户研究
我决定进一步了解播客用户的用户体验和模式是什么样的。我对 10名年龄在24-26岁之间的用户进行了调查，他们在一周内都多次主动收听Spotify播客。
（用户访谈）
（问卷调查）
谁是用户？
听觉型学习者： 他们把播客作为学习知识的一种方式。他们在工作甚至业余时间听播客。他们正在寻找能激起他们兴趣的数据，并努力记住这些数据。他们希望从播客中获取信息，所以他们通常在听的时候做电子笔记或纸质笔记。
非正式听众： 他们通过播客让自己了解新的话题。他们喜欢了解各种话题的最新资讯，一般听的是比较轻松类型的播客。他们会在工作、做家务、旅行时听播客，并不总是把播客当作一种学习的方式，但是，他们经常在心里做笔记。
关键洞察
我的调研结果表明，听众在听播客的过程中存在一些阻碍：
有效内容的突出： 用户应该要能灵活地标出它认为重要的内容。否则，他们很难有效地掌握内容。
跟上播客话题： 用户很难跟上正在收听的内容，特别是在暂停收听播客后。这是因为他们失去了所听内容的语境。
随时记录的工具： 用户在听的时候必须有意识地记笔记，以便以后回顾这些内容。否则，他们可能会忽略掉重要的内容。
这让我更深入地研究如何用潜在的解决方案来解决问题。
（用户痛点）
03
输入增强功能- Snippet功能
什么是Snippet？
| 书签功能可以让用户轻松回顾播客的片段。<br>Snippet功能让用户可以 快速记录他们的学习内容并添加标题，只要为snippet取好名字，用过几次之后，以后只用比较随意地键入snippet名字中的几个字母，他就会出现在你面前。甚至可以根据用户的需要对内容进行分类，增强用户的听觉学习体验。<br>这个功能是从传统的学习方法（阅读、接收知识、做笔记）中获得灵感的 |
为什么这个功能很有用？
查看重要内容：Snippet功能把用户的注意力集中在讨论的话题上，给他们提供一个查看相关内容的列表。此外，它让用户可以灵活地记录他们的学习内容，类似于一本记满知识的口袋日记。
提供播客片段的前后文：Snippet功能让用户很容易就能重新查看播客的某一特定部分，然后像翻书一样，查看该特定部分上文是些什么内容。这可以帮助用户更好地理解正在讨论的话题，特别是用户暂停收听或日后重新收听的情况。
建立与外界的对话：我决定设计一个“分享播客片段”的功能作为现有的歌曲和播客分享功能的附加。
提高创作者的曝光度：有了这个功能，播客的内容创作者可以为他们的听众提供更好的体验。用户分享他们喜欢的播客片段，创作者可能会收获曝光度和更多听众。
04
了解Spotify
我首先分析了Spotify的界面。我把当前所有与播客相关的界面和功能截屏，同时了解它的导航方式。
下面是我的figma文件链接，你可以看到我的整个设计过程：
了解Spotify的设计
05
采集一个播客片段
目前，Spotify还没有能够突出重要片段信息的功能。这可能会让用户很难找回有价值的内容。
我的目的是 设计一个功能，通过提供视觉提示来增强用户的听觉学习。
| 与纯听觉内容相比，提供视觉提示可以让用户更高效地学习。它有助于人们更好地回忆学习的内容，帮助用户更好地掌握内容。<br>“固定”一个特定片段也有利于用户了解其上下文内容，帮助他们跟上讨论的话题。 |
用户流程被分成3个步骤：
- 点击“片段开关”到开启状态
这样就开启了编辑模式。用户可以选择文本来采集一个片段。
- 点选需要固定标记的句子或段落
点击一个句子就能进行选择。为了能让用户选择段落，我设计了一个箭头指示符，用户只需轻按箭头图标就可以选择句子或段落。
3. 创建片段标题
用户可以设置片段标题，从而以更有条理的方式进行学习。用户可以自由选择设置标题与否，如果不需要设置可以直接点击“创建”按钮继续。
- 片段功能开启状态
当处于开启状态时，用户可以在音频播放器界面或文本界面中进行一下操作：
- 编辑片段选择： 通过点击箭头图标，用户可以选择段落或句子，即使是采集了片段之后也可以编辑选择的范围。
- 查看片段详情： 采集的片段是通往详情界面的触点。在这个界面，用户可以执行一系列的功能：编辑片段标题、添加标签、分享片段、重温播客片段、添加注释和删除片段。
5.片段功能关闭状态
在关闭状态下，用户可以在音频播放器界面或文本界面中进行一下操作：
- 移除已采集的片段
- 分享片段
如果要编辑片段，用户必须启用编辑模式，即开关必须处于开启状态。
设计过程
为了设计上述8个界面，我需要设计多种方法来解决这个问题。每个组件都经过了多次迭代，考虑到了一下因素：
- 采集片段所需的总步骤
- 用户对图标含义的直观感受
- 将文字记录与听力内容适当地联系起来
- 尽量减少现有Spotify用户界面的改动
06
播客片段详情
问题
我的研究让我深入了解了用户是怎么基于播客进行学习的。大多数用户在发现一个有趣的部分时会把它记录下来。但是，如果用户不这样做，他们日后可能会完全找不到这些有趣的信息。
解决方案
| 笔记、标签等学习工具能帮助用户更好地阐述他们的播客学习内容。这可以强化他们整体的学习效果。<br>视觉层次和交错的信息很关键，因为它可以减少认知负担。 |
如果用户在采集一个片段时忘记设置标题
片段详情页有多个操作选项，即使用户在日后重新查看某一片段，他们也可以给片段添加注释、设定标签或添加标题。
1.查看“片段详情”
开关处于开启状态时，片段是进入查看详情的触点。这个界面的设计与现有Spotify模式相似。
2.创 建自定义标签给予用户一定的灵活性，让他们能够创建自定义标签，根据自己的需要强化学习，帮助他们以一种结构化的方式进行学习。
设计过程
以下是我设计过程中的一些迭代。我尝试了多种方法：
- 设计具有不同层次的不同布局
- 使用大小模式
- 几个页面上显示几个操作项还是在同一页面提供所有详细信息
- 在创建标签方面提供更多还是更少的用户灵活性
07
分享播客片段
分享功能能让听众与其他人分享他们喜欢的播客片段。
| 一个为播客内容创作者扩大社交媒体知名度的工具。 |
分享功能可以按以下步骤使用：
1. 片段功能开关处于关闭状态
用户可以在音频播放界面点击一个特定片段，这时候会出现一个弹出式气泡，用户可以选择“分享”或“移除”。
2. 片段功能开关处于开启状态
点击特定片段，出现详情界面，在这里，有一个分享按钮。
3. 为不同的情况设计
我还未不同的情况设计了分享界面。例如，分享的片段过长。这让我思考这样的情况会如何影响设计。
- 横幅的高度会增加吗？
- 字体大小会改变吗？
- 文本是否应该被截断换行？
4.为社交媒体设计
我决定进一步扩展我的设计，针对Instagram快拍和Twitter设计来设计片段功能。
这让我明白了如何使用相同的元素为多种应用进行设计。
设计过程
我们希望我们设计的元素可以与Spotify的用户界面相联系。以下是我考虑到的关键因素：
- 突出显示片段
- 结合音频播放界面的配色方案
- 界面包含播客节目封面、节目名称和播客名称
08
查看从当前节目中采集的所有片段
Spotify中的“歌词窗口”是进入歌词界面的触点。放大的屏幕确保用户有一个更身临其境的体验。
音频播放器界面中的文本是进入文本界面的触点。
| “查看全部”给用户提供了他在单个节目中采集的片段的列表。它帮助用户重温节目的片段和进一步查看所有片段的详情。<br>在界面建立清晰的视觉是很重要的，这可以减少用户的认知负荷。 |
音频播放器界面的所有功能（如编辑、分享、移除）在这里仍然可以使用。
设计过程
我们在这方面的设计的目的是为了能列出用户在当前播放节目中采集的片段。以下是我的迭代作品及我考虑到的关键因素：
- 保留文本界面的沉浸感（按照Spotify的歌词界面进行设计）
- 界面包含片段标题或标签（如果用户设定了标签的话）
- 该播客节目的时间标记
- 从节目中采集的片段数据
- 采集片段的日期
09
查看同一播客中采集的所有片段
该功能让用户能够看到同一播客中不同节目采集到的所有片段，并让用户知道所有节目的学习情况。
1. 菜单界面
这里包含一个新的按钮：查看所有播客片段。这是进入内容详情页的唯一触点。
2. 内容详情界面
我们的目的是基于记事本的概念设计一个界面。
设计思路类似于现有app中的播客片段详情页，该界面包含了以下内容：
- 节目名称和对应的播客封面
- 片段标题和标签（如果有的话）
- 采集的片段
- 时间标记和片段采集日期
设计过程
我对界面中内容细节的理解随着每次迭代而发生变化。
最初我想要在界面中显示用户在片段中添加的所有注释。但当我进一步探讨这个问题时，我意识到在界面中显示用户采集的片段才是最重要的，而不是用户添加的注释。
播客片段是与用户最相关的数据点。用户的注释是他们个人的学习成果，是次要的。
以下是一些设计迭代。
10
查看从所有播客中采集的所有片段
这在库的“播客”选项卡下列出，里面显示了用户在所有播客中采集的片段。
11
介绍播客片段功能
除了设计新功能外，我还扩展了项目边界，设计了新功能介绍。
在这里，最重要的因素是以一种简洁的方式向用户介绍这个功能。在决定如何介绍之前，我必须解决以下问题：
我的思考过程
引导用户：我的目标是引导用户了解这个新功能，使他们有一个“顿悟时刻”。信息需要以一种生动的方式呈现，同时还应该给用户提供所有相关的内容。
绘制触点图：了解在哪里展示信息是很重要的。我绘制了用户使用这个app的用户旅程图，并对如何定位这些信息做了一个假设。
1. 首页
这是详细描述该功能使用示例的一个主要触点。在首页，我使用了一个横幅，通过一个故事详细阐述了该功能的属性。这个故事包含了一系列图像，可以被点击。我使用这种方法背后的原因是:
| 横幅放在首页能吸引用户的注意力。而故事能够被快速接收而不具有侵入性，并能激发用户的兴趣促使他去了解更多。故事的性质也确保了将用户的认知负荷降到最小。不过它们也很容易被忽视。 |
2. 库
在库选项卡下的“播客”部分，我加入了片段功能选项卡。在这里，我是这样来教用户使用的：
情况1：用户留意到了首页的横幅和故事
那么用户很有可能已经知道了这个功能及它的用途。在这种情况下，再提供一个冗长的功能解释就没有必要了。一个总结式的功能介绍就足以让用户其用途了。这种情况下用户可以点击次要的CTA来跳过这一步骤。
情况2：用户忽略了横幅和故事
如果用户忽略了横幅和故事，那么应用会提供一个简短的介绍。点击主要的CTA，用户会被导航回到片段故事界面，在那里他们可以了解更多。
3. 音频播放器界面
因为片段功能是在音频播放器界面上，所以一组分步骤的使用说明能帮到用户。
即使用户可能已经浏览过横幅、故事和模式了，但这些说明也很重要。Snackbars（一种安卓控件）和工具提示被用来系统地解释整个功能的用法。
12
启示
学到了什么
1. 看似简单的东西通常很难处理。从一个复杂的程度开始，然后分阶段简化解决，这种方式对我有帮助。
2. 将每个组件作为单个实体进行分析是很重要的。
3. 在进行用户研究时，了解“为什么”比了解“什么”更重要。
挑战
1. 深入研究Spotify的设计后，我对它充满了敬畏。尝试复刻他们的设计理念是一项挑战。
2. 了解一个界面应该显示什么内容这背后的意图可能需要时间。在第21次迭代之后，你通常会觉得自己完全迷失了。在这一点上，回头看看故事板并理解项目的动机会有所帮助。
3. 这是一个非常令人兴奋的项目，特别是因为Spotify是我每天都在使用的应用，同时我也是它的忠实用户。
上周文章概览
全球创新学院 (GIX) \| 清华大学×华盛顿大学×微软的强强强联合
ABOUT US
参考文章：
作者：Lavanya Gopalaswamy
译者：太上老菌
原文请戳【阅读原文】
为尊重版权和译者
转载请联系我们