菜单

一点资讯一个视觉交互设计失败的案例

2018年9月25日 - 一点资讯

近年来在召开产品设计时,遇到了一个不行独立的统筹失败案例。这个案例反应了一部分末常谈的题目,我觉着好有意思。

尴尬的筹划未必好用

自顶之是千篇一律暂缓秀场类产品,近期一旦于动端挨补充加一个模块,模块主要的意义是显示主播的录播视频。下面展示一下原型图和功力图的自查自纠。

一点资讯 1

原型图

一点资讯 2

效果图

自我的原型图中,采用了最为简便易行常用的布局方式,而UI设计师将到需要后,觉得这么做实际死板,想做一些与另外竞品的差异化。所以,将视频封面放在了右侧,视频标题、主播名称、点赞数放在了左手。当效图下时,我先是目感觉是得天独厚,精致,整体力量特别不易。领导看了以后,也认为视觉效果很硬。于是,效果图一律文稿便由此审核,步入开发。

但,在出到位以后,我看在手机上的测试版,效果并无顺手。首先,成品并不曾功效图那么精良。在条分缕析对比后才意识,原来意义图可以的因,很挺程度上是坐摆放的图纸非常美。而实际产品遭之主播,并没有那好看。这招了看看实际产品晚,有比充分之落差感。

因此,建议UI设计师在出效果图的时段,尽量摆放产品真实的始末图片。效果图并不需要做得生多精彩,而是要以产品开发前,模拟产品的真样子,保证产品内容在太差之事态常常,依然会起不错的视觉感受。

除此之外视觉落差感以外,我当深体验产品常常感到到稍微别扭。所有拖欠显示的信还显得出了,那别扭的题材肯定是出现于布局方面。我起翻看竞品,想寻找问题所在。

拿YY神曲的页面来说,虽然消息比多,显得有点混乱,但是连没有别扭的发。那干什么信息左右交替位置,就会生别扭的感到吗?

一点资讯 3

YY神曲

本身开搜索将图片右置的连锁产品,比如:今日条漫漫、ZAKER、一点消息、央视新闻、腾讯新闻等。看罢以后,发现采用这种布局方式的,大多是新闻类的APP。

一点资讯 4

于是,我首先次于始发深入地解析页面布局问题。

先是分析:为什么新闻类的APP的图样要在右边?

一点资讯 5

如若齐图所示,每条消息之要素来:新闻标题、新闻来源、点击次数、热度和情报图片。

那么这些因素于用户来说,优先级是何许的啊?首先,拿新闻来说,标题的事先级是好大的,用户判断是否拘留是消息的率先素通常都是标题。这是殊早以前用户阅读报纸时即养成的惯。基于这个缘故,新闻类APP标题的预级大于图片的先级是未曾问题之。

这就是说本回过头来再看自己要好的APP,分析一下用户之翻阅顺序。

一点资讯 6

先是使说的凡对于秀场类制品,图片绝对是首先视觉焦点。用户筛选信息,绝不会相继字逐句浏览,而是大脑进行重大信息寻找,过滤次要信息。用户“第一视觉区域”是没有问题之,用户率先当下这页面肯定是给这区域吸引。接着用户扫视“①本子块分类”的标题栏后,下面要来了。

一点资讯 7

用户视线会扫描整块信息条,图片肯定是首先先行级的音讯,用户通过图形来判断:1、足够吸引,点击进入;2、有硌吸引,需要查阅此视频的旁消息来判断;3、完全无抓住,跳反下一致长达信息。

一点资讯 8

丢掉开第一栽情形,当用户觉得此视频封面是好稍感兴趣之东西,那么用户要阅读外信息来确定好是不是爱。此时用户之视线一点资讯由“②视频封面”跳反到“③视频标题”然后向下扫视其他“④糟而信息”。如果当认清是视频自己从来不兴趣后,用户会继续于下扫视,焦点以会超越到下同样漫长信息之“⑤视频封面”。然后还以上途径,循环扫视。

最后造成的结果就是是:用户因起右侧为左的相同栽顺序浏览内容,违反从左往右的开卷习惯。

总结:

实际上,在产品设计中,追求创新、追求差异化是蛮值得鼓励的业务。但偶尔为摸索差异化,而导致用户使用基金大增是用产品经理细细琢磨的工作。在某个同行没有成熟时,创新一款APP是比较简单的,因为行业外并不曾一个大概的正经,也并未尽多用户习惯的要专注。但当行趋于成熟,众多出品涌现时,任何一点点微创新都难能可贵。

于此间还眷恋说一个问题,就是豪门在功能图对时,常常会说:我觉得是页面有接触别扭,我道这互动动画有接触未舒适。这究竟是怎吧?这种别扭到底是怎有的吗?我怀念这种别扭一定是视觉或互相传达出底音有悖于个人的常备感知。如果来一个页面,很多人犹觉得别别扭扭的口舌,那非常可能是某地方统筹出题目。也许有点题目是阳的,也许有点题目是生层次之题材。如果是殊层次问题就是用产品、UI设计师或者相设计师精心地去找寻问题。存在的问题并无吓人,最可怕的凡题材隐藏起来,而活经理却不用感知。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图