美文网首页
“有我”App Feed页面分析

“有我”App Feed页面分析

作者: 宇要寻找意义 | 来源:发表于2016-04-21 01:10 被阅读0次

    • 本文仅针对于“有我”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

    感谢您花时间阅读本文!

    相关文章

      网友评论

          本文标题:“有我”App Feed页面分析

          本文链接:https://www.haomeiwen.com/subject/jaktrttx.html