评论互动功能如何设计

概述：

社区产品中，评论作为最基础的功能，扮演着连接生产者与消费者的角色，同时，也是众多社区产品吸引用户的利器之一。在一些产品中，评论甚至比原内容会更加有趣，“内容决定平台的下限，评论决定平台的上限”，今天，我将以交互的角度去思考评论功能设计的要点。

下面的内容，我会通过CSDN的PC端博客详情页的评论区为例，具体分析用户发表评论的动机、他们想看什么内容，以及设计中可能会遇到的细节问题，期望能够给看到文章的你有一些启发。

01

—

1.确定设计目标

用户需求/痛点分析，提炼用户体验设计目标及设计策略

做需求优先级排序 

2.确定页面框架结构与信息层级

现有框架结构与信息层级梳理

3.交互方案摸索及详细交互细节设计

设计多种有效解决方案，以用户视角分析易用性

发散思维，创新交互形式及流程细节

好的，我们在做完一些初步的设计思考后，开始正式进入设计执行阶段：

第一步：

体验评测发现当前版本问题及优化点

当前版本的体验及功能梳理：从结构层、框架层和表现层三个方面考虑，现有版本存在的问题，发散思考创新点和优化点...

如果你是一个资深的交互设计师，或者你对产品定位、商业目标等很了解，加入这些内容去思考会更完善。

通过对现有版本详情页体验发现如下问题

发现问题记录：1、2、3、4、5...

第二步：

梳理用户评论互动场景及发表评论的动机

那么问题来了，用户到底想看到什么样的评论呢？

概括来说，用户对于评论的诉求无非是以下三类：时效性、逻辑性和趣味性。

时效性：我要看最新的评论；

逻辑性：我要看懂评论；

趣味性：我要看最好玩/有用的评论。

针对以上三点，我们可以开动脑筋对症下药：思考一下，提升用户发表评论，参与互动因素。

发散思考激发用户参与因素

第三步：

通过上述用户需求分析，挖掘到的痛点和机会点如下：

结合痛点和机会点，明确优化方向

通过KANO模型对需求分类：评论互动的需求类型/优先级

第四步：

确定设计优化策略：整体评论/互动优化策略

用设计解题，落地方案

根据设计策略优化博文详情评论区及整体页面

根据前面设计前的思考及分析工作，我们最后得出了很多具象的设计创新点及整体设计策略：

1.强化评论功能的位置呈现——强化呈现

2.内容精心筛选后再给用户——内容分类

3.酒香也怕巷子深，精彩评论要外放——信息外放

4.创新交互细节符合人性化体验——体验人性

5.其他交互细节优化

1.强化评论功能的位置呈现

根据「菲兹定律」可知：目标越大，指向越快，时间越短；同样地，目标越近，指向越快，时间越短。

优化后

优化前

2.内容精心筛选后再给用户

评论少不好，但是多而杂的评论也并不是用户想要的，热门/精选/神评，可以勾起用户的兴趣，引发用户参与其中。

3.酒香也怕巷子深，精彩讨论要外放

对于用户间的讨论、楼层回复是评论区的最精彩内容，正是因为这些互动内容才会更吸引用户游览，不要把回复内容收缩起来。

4.1.创新交互细节符合人性化体验

顶部导航，在用户向上滚动查看页面时，显示文章及作者简要信息（文章标题、用户头像/昵称、关注、赞赏）便于用户操作。

同样基于「菲兹定律」原理，有限的屏幕中，页面的四个角落及边缘最便于用户定位，查找固定且常用功能。

4.2.保证用户操作状态及时可见

用户点赞不仅仅是简单的图标颜色变化及数字增长，可以在页面顶部设置Tip提示，这样用户更直观，点赞操作也更有仪式感。

现有生产点赞状态不明显，用户容易反复点赞，因为用户没有得到回应，不知道是否点赞成功。

5.其他交互细节优化

01.功能操作符合用户心理认知：用户想要回复博友评论内容，点击评论内容出现「举报」「回复」功能，点击回复应该在评论内容下直接出现输入框，而不是跳转回固定的回复区域，这样的回复操作才更符合用户心智模型。

点击「查看更多评论」依次加载展开内容，到最后评论结尾处，提示用户：没有更多评论，同时，重复展示「写评论」功能，再次激发用户参与互动。

02.补充热门评论，同时增加评论助手：引导话术可配，点击进入今日最热议的文章排行榜，查看更多精品内容及评论。全部评论中，点赞最多的设置精彩评论，在热门评论中展示并显示特殊标签。

03.赞赏功能无论对于平台还是作者都是重要的，平台可以抽成盈利、文章博主可以得到来自实际金钱的鼓励，这种鼓励的激励性远远大于用户评论内容好评，所以要提升「赞赏」功能的位置权重。

04.根据「交互设计4原则」及用户的使用频次，隐藏次要的收藏文章及举报文章功能，强化主要高频操作功能。

05.根据「尼尔森十大原则」中的状态可见/防错原则，用户未录入时，发表评论按钮置灰显示，输入文字后，按钮可点击。

增加表情功能，丰富用户情绪表达，纯文字的情绪理解不尽相同，但是表情符号对于整体用户的认知是一致的，便于用户传递情感。

06.评论区为空，空态展示，指引性文案，引导用户做首发评论，点击文字链接，焦点直接获取到评论输入框的录入状态，方便用户直接发表评论内容。

以上我对「评论」功能做的一个简单的分析和设计，如果你有什么不同的建议或者看法，欢迎留言讨论。