知乎iOS端微交互分析

作者: imcby | 来源:发表于2017-04-23 23:26 被阅读447次

一、产品介绍

1.1 产品定位

知乎的产品定位是分享专业知识、经验和见解的问答社区，凭借着高质量的内容和友好理性的氛围收获了高质量的用户群体。通过几年的发展，知乎从问答社区出发，将知识分享形式从问答拓展到专栏、Live、付费电子书等多种方式，产品内容愈加丰富，目前的知乎是一个集成了问答、写作、直播、电子书等诸多模块的知识分享平台。

1.2 用户及需求分析

知乎的用户主要划分为内容生产者和内容消费者两大类型，分层如下：

知识生产者：
- 专业生产者：专业知识丰富的各行各业的从业人员
- 普通生产者：生活经历丰富及对特定问题发表见解的用户
知识消费者：
- 专业消费者：寻求问题高质量专业解答的用户
- 普通消费者：想在知乎上获取自己感兴趣内容的用户

1.3 产品结构

知乎iOS端整体产品结构如下：

知乎产品结构图

其中，首页、发现为内容生产、内容消费的入口，而通知、私信主要为内容反馈互动的入口，更多为扩展功能的入口，结构较为清晰合理

二、交互方式分析

知乎从主要功能可以分为：内容生产、内容消费、用户反馈互动这三个大层面。下面主要从这三个核心功能中，选取一些我认为比较有趣的交互点，进行详细分析：

2.1提问-相关问题推荐

知乎：提问-相关问题推荐

2.1.1 交互定义

前置条件：
- 用户进入问题填写界面后，在提问输入框中输入问题后触发
操作过程：
- 触发后，输入框下方出现相关问题推荐list（显示问题、问题关注人数、问题回答数），没有相关推荐则不显示
- 随着提问输入框中内容的更新，问题推荐也会进行自动刷新
- 点击问题跳转到对应问题详情页；问题详情页点击左上角返回可返回问题发布流程（输入内容均保存）
- 相关问题list下滑时刷新

2.1.2 交互分析

场景：
此交互方式是给用户在填写问题时使用，根据用户输入问题进行相关问题推荐，让用户直接查看相关问题。
解决问题：对于平台：避免重复提问，提高问题质量；对于用户：减少用户获取知识成本，已有相关问题直接进行内容消费
优缺点：
- 优点：
  - 根据用户输入内容即时匹配推荐问题
  - 显示问题回答数，帮助用户判断问题的回答情况
  - 用户点击推荐问题进入问题详情页后，点击返回可返回问题输入界面，且内容和跳转前一致
- 缺点：
  - 匹配关键词未标出（加粗），浏览效率低
  - 刷新显示加载小圆圈，不是实时刷新，操作不流畅

2.1.3 竞品分析

quora：提问-相关问题推荐

差异点	知乎	Quora	分析
推荐问题显示内容	问题、问题关注人数、问题回答量	问题	知乎的推荐问题内容较为丰富，但问题关注人数较冗余，可去除；quora较为简洁，浏览体验更佳
关键词标出	否	是	quora匹配关键词加粗，帮助用户快速识别相关问题，浏览效率高；知乎浏览效率较低
刷新交互	输入内容变化后，出现加载控件，推荐问题list上弹	输入内容变化后实时更新推荐问题list	知乎动效相较于quora，略冗余，quora式的实时加载操作更顺畅

总结：简而言之，quora的相关问题推荐交互体验更好，更为简洁明了，用户对于推荐问题的浏览体验更好；知乎的相关问题推荐信息更为丰富，但浏览体验较差

2.2 回答-回答草稿

知乎：回答编辑页面

知乎：回答草稿箱

2.2.1 交互定义

前置条件：
- 用户进入回答界面后，在回答输入框中输入内容后
操作过程：
- 在回答界面，用户点击取消后，系统自动保存当前内容及回答相关设置
- 用户切换到其他app，再次打开知乎时，在顶栏显示“草稿保存成功”
反馈：
在对应的问题详情页，添加回答按钮后面文案变为“添加回答（草稿）”
在回答问题页（点击“首页-回答”进入），问题list中对应问题的回答按钮文案变为“继续回答”；点击草稿出现草稿list，显示之前回答的问题、回答草稿、回答时间，右滑可删除，点击进入回答编辑页
在更多-我的创作，右侧草稿数会+1；点击进入“我的创作后”，显示草稿箱（草稿数）；点击进入草稿箱，在回答草稿下显示之前回答的问题、回答草稿，有滑可删除

2.2.2 交互分析

场景：
此交互方式是给用户在填写回答时使用，当用户未编辑完回答时，支持临时保存，在问题详情页、我的回答、草稿箱等入口让用户找到之前回答草稿，继续进行回答。
解决问题：
用户误触取消按钮时，可避免回答内容丢失
用户填写较长的回答时，不用一次回答完，可分次更新后发布
优缺点：
- 优点：
- 在点击取消后，系统在后台自动保存，不用用户进行任何额外操作
- 在问题回答的主要入口（问题详情页、回答问题list页、草稿箱等）均有草稿提示，尤其是问题详情页-回答按钮处，利用文案十分巧妙提示用户此问题有回答草稿，可激励用户进行再次回答
缺点：
- 用户点击取消后，没有给用户反馈，即提示用户已保存草稿

2.2.3 竞品分析

Quora：回答编辑界面

Quora：回答草稿箱

差异点	知乎	Quora	分析
取消后	直接返回上级界面，无任何提示	弹出底部选择框，选项为：清楚草稿、保存草稿、继续编辑，点击保存内容后，保存草稿	知乎的保存草稿操作成本更低，但是未给用户任何保存提示，导致用户不知道已经保存草稿；quora的针对草稿给用户提供的功能更多，但同时增加了用户的操作成本，导致保存草稿流程不够流畅
查看草稿（问题详情页）	在问题详情页，添加回答按钮文案变为（添加回答（草稿））	在问题详情页，添加回答按钮文案变为编辑草稿，且问题和回答间增加引导文案“你已保存回答草稿，点击‘编辑草稿’继续回答”	两者均在问题详情页的回答入口给出草稿提示，知乎提示更简洁、巧妙，quora对于草稿的引导更强
草稿箱操作	右滑显示删除按钮，点击删除后直接删除；点击问题list直接进入草稿编辑页	问题、答案下方有编辑草稿、清楚草稿按钮，点击编辑草稿进入草稿编辑页；点击清楚草稿出现确认弹窗，确认后删除草稿；点击问题list进入问题对应页面	知乎草稿箱交互更为简洁，quora草稿箱操作稍显复杂

总结：知乎的回答草稿交互体验更顺畅，但是在某些点上过于简洁，对于用户的提示不够；Quora的忽地啊草稿交互某些功能稍显冗余，可适当精简

2.3 搜索-去提问

知乎：搜索-去提问

2.3.1 交互定义

前置条件：
- 用户进入搜索页，输入内容后，当页面下滑至第四屏时出现
操作过程：
- 触发后，搜索结果底部上弹一行，常驻底部；显示文案“没找到想要的内容”和按钮：去提问；
点击去提问，进入提问发布页，且搜索框输入内容复制到提问输入框中

2.3.2 交互分析

场景：
此交互方式是给用户在搜索问题时使用，当用户找不到自己想找的问题时，引导用户去提问
解决问题：缩短用户操作路径：当用户找不到自己想找的问题时，无需返回首页，再点提问，再输入想找的问题
优缺点：
- 优点：
  - 触发时机设置十分恰当：用户在看搜索list看到第四屏时，才出现此功能栏，在用户找不到自己想找的问题时才出现引导，十分合理
  - 点击去提问后，搜索框内容直接复制到问题输入框，这个设计比避免了重复操作
- 缺点：
  - 无明显缺点，有个小疑问：用户进入第四屏时才触发是否有点太迟，可以考虑进入第二、三屏时即触发

2.3.3 竞品分析

Quora:搜索-去提问

差异点	知乎	quora	分析
触发时机	搜索list进入第四屏时出现	quora搜索分两步，第一步：搜索简单结果页，第二步:搜索详细结果页；搜索简单结果页中，下方常驻“去提问”	知乎触发时机更恰当，在第四屏时出现；quora的触发时机较为奇怪，在简单结果页中常驻，影响浏览搜索结果

总结：知乎的搜索-去提问，触发时机较为合适

2.4 回答-浏览

知乎：回答详情默认

知乎：回答详情下滑

知乎：回答详情上滑

2.4.1 交互定义

前置条件：
- 用户点击回答
操作过程：
- 向下滑动时，执行以下交互：
- 搜索框消失，问题吸顶，压缩成单行显示，显示回答数量，点击后进入问题详情页；
- 回答用户栏消失
- 回答操作栏消失
- 上滑、点击、滑动到底部时，回答用户栏、回答操作栏出现
右滑时，切换下一个回答

2.4.2 交互分析

场景：
此交互方式是用户在浏览回答时使用，当用户向下浏览回答内容时，隐去相关互动操作
解决问题：让用户更专注的浏览内容，避免互动操作影响浏览体验
优缺点：
- 优点：
  - 搜索栏隐去，问题压缩成单行显示，压缩非回答内容空间，减少浏览时功能对于浏览体验的影响
  - 用户操作栏、回答操作栏出现、隐去的交互较为合理，在用户浏览时隐去（下滑），在用户不浏览时、浏览结束后出现（上滑、点击、下滑到底部后）
- 缺点：
  - 下滑问题压缩后，显示回答数，个人认为没有必要；建议取消显示回答数，问题显示两行
- 右滑下滑至底部，再继续下滑时，也应当支持切换到下一个回答，这样操作更顺畅

2.4.3 竞品分析

Quora:问题（回答）详情

差异点	知乎	quora	分析
搜索栏	回答详情页默认显示搜索栏，下滑时隐藏	不显示搜索栏	回答详情页其实没有必要显示搜索栏，知乎的设计稍显冗余
问题	默认显示全部，下滑时压缩成单行显示	问题固定显示在回答上方	知乎设计更好，用户在浏览内容时可以知道当前回答对应的问题，并且在对回答不感兴趣时直接切换到问题
用户操作栏、回答操作栏	下滑时隐藏，上滑、点击、滑动到底部出现	没有用户操作栏，回答操作栏吸底在回答内容下方	回答详情页其实没有必要显示搜索栏，知乎的设计稍显冗余，quora的设计更简洁
切换回答	右滑切换至下一个问题；点击问题查看该问题下的所有回答	无法直接切换至所有回答，feeds流中查看的回答，底部有查看该问题所有回答入口	两者的回答结构不同，知乎的结构是问题详情页-回答详情页，quora没有回答详情页，在底部有查看所有回答入口。所以切换回答的交互两者没有优劣，知乎的切换回答的操作更为顺畅

2.5 回答评论

知乎：回答评论

2.5.1 交互定义

前置条件：有以下入口
回答详情页：点击评论
问题详情页：点击评论
feeds流：点击评论
操作流程：
- 进入评论后，默认时间正序排列评论，点击可切换至时间倒序排列；每条评论并列显示；有精选评论和普通评论
- 评论详情：
  - 默认显示用户头像+评论用户+被评论用户，若是提问者则在用户名后加“（提问者）”，若是回答者则在用户名后显示（作者）
- 点击评论，弹出操作选框：举报、踩评论、复制、分享到知乎首页
- 点击赞，小拇指赞数更新；点击回复，弹出评论输入框，显示回复对象、取消回复，分享到知乎首页勾选项；点击查看回复，进入评论详情页
评论输入框：
调起输入框后显示同时分享到知乎首页，发布
输入评论后，点击发布；发布成功后，底部上滑出发布成功提示，点击查看发布后，跳转到刚发布的评论详情；几S后发布成功提示栏消失

2.5.2 交互分析

场景：
此交互方式是用户在评论时，对回答进行用户间的交流
解决问题：让用户获得较好的查看评论、评论互动、生产评论
优缺点：
- 优点：
  - 显示精选评论，热门评论置顶，可激励用户进一步生产评论
  - 所有评论并列显示，用“评论者>被评论者”区分一次评论、二次评论，平衡了浏览效率和浏览体验
  - 发布成功后，有发布提示，且点击查看评论可迅速定位到自己的评论
- 缺点：
  - 发布评论成功后，没有查看自己评论的快速入口，无法快速定位自己的评论

2.5.3 竞品分析

Quora：回答评论

差异点	知乎	quora	分析
评论显示策略	一次评论、二次评论并且显示，用“评论者>被评论者”区分	评论采用盖楼形式，默认显示一次评论及其下的1条二次评论，点击后展开一次评论下的所有二次评论	知乎并列显示模式浏览效率更高，下滑即可查看所有评论，但是评论、被评论者关系不清晰；qoura的盖楼模式评论者、被评论者关系清晰，但是浏览效率低，操作路径长
评论交互	赞、回复、查看回复、对话，点击显示操作框：举报、踩评论、复制、分享到知乎首页	回复、赞、踩、更多（复制链接到评论、举报）	quora的交互更为直观清晰，知乎的点击回复进行更多操作较为隐晦

总结：知乎的评论浏览效率更高，但是评论操作不是很清晰；quora的评论浏览逻辑更清晰，但需要更多的操作

三、总结与思考

第二部分分别从内容生产、内容消费、内容反馈互动中挑选5个小交互点进行了详细分析，从中可以看出，知乎针对以上核心功能的一些小交互点颇具亮点