“有我”App Feed页面分析

---

• 本文仅针对于“有我”App Feed页面进行分析，其他页面不涉及。
• 本文仅针对于iOS版本进行分析，Android版本不涉及。
• 本文包含逻辑分析与部分UI分析。

1.“报名”按钮在Feed页面直接显示的必要性

1.png

点击“报名”会直接进入到支付状态，直接在Feed页面就进行支付的用户，数量应该不多，理由如下：

• 用户此刻会比较珍惜自己的财产(现金、钻石)，在未了解PO主的情况下，直接使用此按钮的几率较少

• 右上角已经存在悬赏数额(此处为1000钻石)，没有理由通过点击“报名”来查看悬赏数额

综上，我觉得实际情况是，当其他用户看到这样一条PO时，要么会点击PO主头像去查看PO主的详细资料(照片、单身与否等)；要么会点击本PO进入详情页面，查看本PO下面的评论及已报名的其他用户数量来权衡是否要报名；更多的是两者兼而有之。这样一来，使用详情页面的底栏的报名按钮就可以了，不必在宝贵的Feed页面空间上直接显示“报名”按钮。

2. 可见不可点击的图标

2.png

大多数用户是有在用微博客户端的，微博卡片式页面可直接点赞的用户习惯很可能会延续到本App上面。除开第四个图标，新用户可能不知道这是报名人数，红框中的3个图标都会让人产生直接点击并生效的冲动 ，特别是第一个“赞”。然而当用户发现这些图标是无法点击的，会一定程度上减少本PO被赞、被收藏、被评论的机会，这样其实不不太利于打造一个很火爆的PO。用户很懒，此刻他们或许在想：还要点进详情页面才能赞、收藏、评论，那索性直接滑过算了。

3. 已阅本PO用户头像的显示

以例2中的图片为例，当PO被其他用户阅读之后，会有一排阅读过的用户头像。问题在于：

• 这排头像是不可点击进行交互的，进入详情页面之后也没有

• 对普通关系的用户来说，谁看了谁的PO而没有评论、收藏或者打赏，是无关紧要的；在较亲密的朋友之间，才会产生一丝影响：比如“我这么好看的照片你居然不看？”“我这么好看的照片你居然看了不评论？(不打赏？)”

• 当本PO确实没什么有价值的内容，导致本PO只在Feed页面滑过而没有用户愿意点击进入详情页面查看的时候，会导致下面这种情况 ：

  3.png
  用户发现只有他本人查看本PO，会让用户心里有点尴尬 。

综上，这一排用户头像是否应该存在我觉得还有待讨论。

4. PO中单张图片显示问题

4.png

这里可以看到，包含单张图片的PO的高度远大于多张图片的PO，从实际体验上来说，多张图片的PO的高度更合适，因为Feed页面的图片框架是无法完整显示整张图片的 ，本App的图片又有众多的自拍照，而自拍照的构图中，大部分脸部图像都位于照片的上半部分 ，这样就会导致如图女生脸部显示不全的情况出现。

因此，与其放一张大图显示不完全且模糊，不如按照多图PO高度处理，反正都是要点进去看的，节省Feed页面的空间以便在同一屏内显示更多数量的PO或许更好一点。

5. PO文头像下方的文字、空白区域及对称性

5.png

• 头像下方文字
  “更多新人”不应该带有下划线，通过下划线来暗示用户这是链接可以点击的做法是早期互联网Web网站设计时采用的做法，在App上不太适用；并且“更多新人”语义上已经表明了这是可以点击的，没必要再加上下划线。

• 空白区域
  这种留空白的方式的确是可以起到分割PO与PO的作用，但是分割作用其实已经由头像这排内容 与赞、收藏、评论 这一行内容继承了，除此之外，还有灰色的分割线也起到相同的作用，所以此处留空白的做法值得商榷。另外它还引出了下一个问题：

• 对称性
  由于上述空白区域的留出，导致PO文实际上并不处于整个App的正中央，而是偏右的位置，从美观度上来说会有影响。

6. 底部工具栏高度不统一

6.png

如上图，Feed页面底部工具栏高度(不考虑圆形按钮)和详情页面的底部工具栏高度是不统一，此外背景配色也不统一。

7. 顶部标签页有Bug

7.png

• 标签左侧的空白
  当手指在Feed页面左右滑动导致标签页切换的时候，大概在切换到第四、第五项的时候，会出现上图左侧所示的Bug，参照此处同类布局的“网易新闻”，这个地方不应该出现空白。

• 标签下方的红色横线
  肉眼其实能看出来这条横线并没有采用“居中”，而是采用了“左对齐”，导致横线并不是处在标签文字的正中。实际上可以去掉这条横线节省一点空间，其功能由标签文字本身的变色(变大)来继承，可参照“网易新闻”：

  
  8.png

---

感谢您花时间阅读本文！