有效的Feeds 信息应该如何设计丨艾体验产品干货分享

设计界面时,相信设计师们一定听过这样的反馈“页面太平了、看起来很复杂、抓不到重点”。但细问时只说:“你是设计师,你比我专业,你看着来吧”。然后…… 

“我看XXX挺好的,你就照着那个改吧”

“我把你的‘排版’改了一下,现在这样才好看”

“把这个放大点,再大点!我就喜欢这样”

结果花费了大量的时间在界面修改上,反而越改越乱,信息越来越杂!这样的界面,完全不能传达出主次信息,用户也会迷失其中。

配图1.jpg

以致于最终去参考“朋友圈”、“购物列表”、“新闻页面”等同类型产品界面的排版布局。复用他们的模块,却没有思考过这些“排版布局”后的信息层级。最终是画虎不成反类犬。

那么,怎么有针对地去优化产品界面的信息层级呢?思考好“信息归纳、信息分级、信息组织”这三块内容即可。接下来将结合案例,看A产品是如何优化“Feeds卡片”中的信息层级。

1.jpg

△A产品在不同时期的“信息卡片”

 

  信息归纳,找到分类的共性

要点:阐明各信息之间的统一性;突出产品的特点

首先,罗列出每个页面承载的功能和内容,并通过共性将它们分组归类,从中发现适合的表达方式。

比如,A产品Feeds的卡片中包含的信息大致如下:

2.jpg

最终可以将其分为三大类:

招聘方:公司名称、公司规模、发布者

吸引点:工作岗位、薪资待遇

应聘条件:地理位置、工作经验、学历等

这个分类依据,简单来说就是:谁+发布了什么信息+需要什么条件,由这三大块的信息,共同组成了整个招聘信息卡片。

但是,不同的产品侧重点不同,分类的方式也要发生变化。比如,A产品着重招聘者与应聘者之间的直接沟通,而B产品以公司整体形象为重。这两者的展示层级自然就有明显区别。 

3.jpg

△B产品

 

  信息分级,考虑排布的优先级

要点:突出用户的关注点,排列信息的优先级 

优先级不是随意排列,各层级需要满足以下的条件:

第一层级,作为“重点信息”,对“吸引用户注意、产生兴趣”起着很大的作用;

而第二级,作为“辅助信息”,意在帮助用户对最重要信息进行理解;

而第三级,作为“补充信息”,在用户一定理解的情况下,给到补充信息以及刺激用户操作行为的入口。

0.jpg

把自己设想为一个求职者,你会倾向于关注哪些内容?大致会偏向这样一种情况「什么工作→待遇如何→公司及前景→自己满足哪些条件」。

可以看到,在A产品的旧版本中,将“岗位”和“招聘高管头像”列为了重要信息,虽然“招聘高管”直接对话是产品特色,但不是用户最关心的内容。所以在新版本中,让“岗位信息”占据了主要的地位。

5.jpg

 

  信息组织,串联用户视线流

要点:运用好格式塔原理及用户视线定律

在亚洲人的阅读习惯中,我们大致遵循F型的视线流进行阅读,也就是先从左到右,再从上到下的规律。因此,左上和上中部分被称为“最佳视域”。

6.jpg

△图片来自:nngroup

在信息的分级后,可以参考格式塔原理排布不同类别信息的远近关系,运用用户视线规律对应优先级,将信息有据可循地组织起来。

7.jpg

如上图所示,旧版信息在用户求职时干扰信息过多,阅读顺序混乱;在整个卡片中,信息分裂为三块,却没有过渡或关联,增加了不少认知成本。 

新版本以“岗位”信息为中心,清晰地对应用户「什么工作→待遇如何→公司及前景→自己满足哪些条件」的认知需求。

根据优先级确认信息位置后,从信息的留白、明度、字号、字重等要素,拉开主次信息比例,即使内容丰富也可以让用户所看即所得,轻松get到想要的内容。

                   

每周,艾体验都会向大家分享一些有关于设计师/设计的文章,也许是干货;也许是案例;也许是一些好玩的事情;也许是一些心理学的分享……

如果,艾体验分享的内容正是你喜欢的,不妨关注关注我们吧!想和你交个朋友!

 

8.jpg

正在热招

产品体验设计师  Product UX Designer

智能设计算法工程师  Algorithm Designer

创意工程师   Creative Technologist

简历和作品集投递:hr@aiux.cc

联系我们

Copyright © 2019 艾体验 AIUX