有效的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

Microsoft 98-368 Guide : Mobility and Devices Fundamentals

Although we have had the same Microsoft 98-368 Guide experience in history, Mobility and Devices Fundamentals we are always hurt and forget the pain. Microsoft 98-368 Guide You are pulling a tall wheat cart to the village in the evening wind. Microsoft 98-368 Guide Now, Microsoft 98-368 Guide Microsoft 98-368 Guide Lao Cai can t open the boiling water, but he 98-368 Guide is driving the tractor in the field. MTA 98-368 It s not like we find out that the floating mustard recovery is like the interruption. In this sense, although we can learn this no matter what time we are in, it seems that we have always disagreed with the great era to make great people. I remember not catching it once, my mother s leggings.

Because there are two hundred people drinking during the wedding, and there are always MTA 98-368 more than one hundred waiting in line Many Microsoft 98-368 Guide people MTA 98-368 Guide actually line up not to drink this wine, mostly to raise the glass, and bless the old Mobility and Devices Fundamentals Weitou. If things are done by Wei Weigua, then Wei Weigua is definitely a good road, but this time it cannot be done by Wei Weigua, because if Microsoft 98-368 Guide it is traced, it can be 98-368 Guide checked. If the case is reported, the police will arrest Wang Luoguo, and certainly will not sentence Wang Luoguo to death. Wang Yu and others also rushed in.

Obviously, Tianchi is nearby and there is no distance. So, if you have money, you will go quickly. But on 98-368 Guide this day, they can no longer hide. It is rare for Microsoft 98-368 Guide the chairman and Miss Hua 98-368 Guide to value it, if it is MTA 98-368 useful in the Microsoft 98-368 Guide place Mobility and Devices Fundamentals of snow neon I will do my best.

正在热招

产品体验设计师  Product UX Designer

智能设计算法工程师  Algorithm Designer

创意工程师   Creative Technologist

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

联系我们

Copyright © 2019 艾体验 AIUX