【2022年原创计划第5篇】

笔者个人观点，只作一家之言

笔者在浏览PMTalk网站的时候，一直感觉首页页面布局很不舒服，偶然看到首页右侧有一个按钮：写体验报告。

于是笔者决定简单写一下关于PMTalk网站PC端首页的交互体验，仅供参考。

本文是一个随笔性质，会比较简单，格式方面不会太注重，直接看图说文。

PMTalk首页

这张图片是网站首页的截图，我把整个布局分成3个区域来讲述，导航栏部分暂时不提，因为涉及到网站的业务规划，本次体验和分享重点讨论交互体验。

既然是产品体验，还是拿两个竞品来对比下，更加直观。

产品定位：垂直领域内容社区网站

竞品选择：产品壹佰和人人都是产品经理

产品壹佰首页

人人都是产品经理首页

一、区域1-通用的空白样式

网站左右两侧空白区域，笔者特意看了虎嗅、知乎等网站PC端首页，发现无一例外，都是两侧保留空白区域。

虎嗅网首页

笔者认为可能是因为最初的内容网站都是在PC端，电脑的屏幕比较宽，人的视觉角度如果太分散，体验较差；其次是处于前端的兼容性考虑，两侧留白可以避免PC端各种不同浏览器的兼容导致页面样式难看；最后也是UI设计师有考虑到两侧留白比铺满信息流会更好看些。

目前来看PMTalk把应该是直接参考了其他平台的设计方案，所以这两个区域是没有任何改变和创新，中规中矩。

二、中间区域-资讯列表

网站首页主要区域截图对比

通过三个网站首页截图对比，我们可以看到在首页核心的展示区域-中间区域，产品壹佰和人人都是产品经理（后面简称人人~）都包含Banner 和资讯列表，同时人人还有一个 细分导航区域（序号3的模块），PMTalk就比较简单，只有一个瀑布式的资讯列表展示。

关于这一布局就是笔者最开始感觉特别不舒服的点，可以看三个网站的资讯列表区域（PMTalk是序号2，产品壹佰是序号3，人人是序号4）。

1、展示样式

文章资讯列表样式对比

壹佰和人人的资讯展示是比较常规的布局，即左图右文，左侧都是一张小的封面图，右侧是文章标题、简介、发布时间、浏览量等。

PMTalk则采用了上图下文的展示样式，上面是一张封面图，然后下面是文章标题和浏览量。

2、体验感受

笔者比较倾向于壹佰和人人的类似展示布局。

（1）当代国人的书写和阅读习惯都是从左到右。PMTalk首页资讯文章横向铺开，一些长的标题要看完会花费更多时间。

（2）从上往下的展示更适合图片网站。有大量精致的图片从上往下体验更佳，但是PMTalk文章的配图宽高比差距较大，高度太窄，许多图片容易看成是被强行拉伸过，导致整个区域看着比较压抑。但是直接将图片高度增加，页面信息展示率就非常低效。

单纯增加图片高度效果

（3）上下图文之间的区分不是很明显。容易将标题和下方的图片混在一起，虽然图片本身已经和内容脱节，但是也是一个不太好的体验。

（4）缺少一些关键展示字段。例如：文章发布时间、发布人、收藏、点赞数等。作为一个内容社区，最终是希望有大量的作者参与到其中，而作者参与平台也是需要一定驱动因素，希望获得更多曝光量和关注者。

3、用户需求解读

首页的文章列表主要面向的是两类人群，一类是读者，一类是作者。

读者需求： 对于一个资讯列表，读者的主要需求是快速找到感兴趣的内容（标题的样式需要简洁和明显）；其次是希望看到最新的内容（人类天然喜欢新鲜的事物，喜新厌旧？亦或是时效性？）；然后可能希望看到更多类似的文章（通过点击作者头像或者名称快速定位）；接着还可能看看别人的意见（点赞数、浏览数）作为参考依据。

作者需求： 首先是希望能有更多人可以看到自己，并且关注自己（作者名字或者头像的展示可以有增益效果）；其次希望可以快速定位自己或者别人的文章（标题要很容易识别和阅读）；

最后也希望有更多读者能够互动交流，提升作者的成就感（浏览量、点赞数、分享数、收藏数、评论数等）。

4、优化方案

如果有改版需求，可以将上图下文这种展示样式调整下，如果希望和壹佰、人人做出区分，展示自家风格，笔者提供一个思路作为参考：标题改在上方，因为标题长度不同，在上面容易控制，其次最下面增加了一些关键字段，可以让用户直观区分不同文章。

资讯列表区域优化样式（参考）

三、右侧功能区域-社群转化关键区域

右侧功能区域样式对比

通过三个网站对比，可以看到，广告展示是这个区域的主题，线上课程、线下活动都是在这个区域重点展示。三家网站没有太大区别，不做讨论。

1、功能亮点

壹佰：

在右侧区域最让人眼球一亮的就是下方的文章排行榜单，上面有周、月、年三个时间维度的排行展示。这个功能的出现对于读者和作者都是比较有吸引力的，读者可以愿意看看长期霸榜的文章内容，而作者自己的文章若是出现在榜单上面，则会增强创作欲望，希望可以再接再厉，同时也更有意愿分享这个网站，因为自己获得成就感，和平台是共同利益体。

再往下分别有推荐作家 和 精选评论，推荐作家暂且不提，精选评论是一个很不错的互动功能，让读者和作者都会眼球一亮，通过感兴趣的评论就会去主动查看相关的文章。

人人：

在这个区域的特色功能就是私域圈子，上面有许多人人官方运营的微信群、QQ群等，在需要进行社群运营引流方面比较有效果，但是功能本身缺乏一个自动化闭环。什么意思呢，就是说壹佰的排行榜和PMTalk的写体验报告按钮，这两个功能只需要让用户看见，然后用户产生了兴趣就达到了目的，对于平台来说没有增加更多的运营成本，却可以让平台的运营效率和曝光率被动提升。

而圈子功能却只有一半流程是自动化闭环，就是前面用户看见这个圈子，有了兴趣就去添加微信或者QQ，到这一步系统化的功能流程已经走完。后面就全部要依靠运营人员去审核、添加、拉群等进行转化，路径非常长。

单纯从软件功能角度，人人的圈子不是特别理想，但是产品功能最终也是服务业务需求，私域社群如果可以实现大量课程活动变现，那这也是一个非常棒的设计。

然后人人右侧还有两个功能模块价值明显，推荐作家和热门文章，这两个功能也满足了前面所描述的读者和作者需求。

PMTalk：

右侧最上面的写体验报告功能让笔者感觉比较有新意，这是一个吸引作者群体的很好功能设计，让用户可以快速参与到内容创作中，笔者会写这篇文章也是因为看到这个功能突然来了兴趣。这里点个赞，虽然这个功能后续的流程不是特别理想，但是在首页这个位置的设计是很有创意的。

再往下可以看到PMTalk有个作者榜和圈子功能，这两个和人人、壹佰的设计类似，所以不予置评。

2、优化方案

综合上面的分析，笔者提供两份优化方案供参考，融合壹佰和人人的亮点功能，同时保留PMTalk本身的特点和风格。

笔者更倾向于方案二，方案一右侧功能区域占比太多，会让人有些找不到重点。

优化方案一

方案二将资讯列表放置在中间，两侧放置其他业务功能，广告宣传类的放在左侧。因为大部分人都习惯用右手使用鼠标，所以天然会认为右侧距离自己更近，所以左侧的广告图片如果放在右侧会显得比较突兀。而且右上角还有用户头像、写文章这一类基础功能，而日常使用鼠标会下意识朝右侧滑动，所以 写体验报告 这个功能使用概率会增加，这样平台的内容量会有一定提升，下面的排行榜等功能同理。

优化方案二

三、总结

本来想写一个几百字的体验报告，没想到却快三千多字。整个体验分享就是希望通过这篇文章，让一些朋友可以了解到一个常见的网站首页，不同的页面布局和样式设计都会让用户产生不一样的体验，并且也和平台的业务目标息息相关，所以我们在做任何一款产品的时候，都需要多方面、多维度考虑。

— end —