为什么说左图右文字比右图左文字要好
东东推荐:有时候设计的微妙之处就是你觉得这个好,但是却说不出一个所以然,这是需要深入思考并分析问题才能验证自己的感觉。
要说正在负责的网站改版和别人家最大的不同,大概就是绝大多数图文横排的新闻博客,都是以左图右文字结构呈现新闻列表的。
对于这一从开发、设计到运营都十分不解的疑问,BOSS的解释是:
配图是不包含信息量的,而人的视觉习惯从左侧开始,左图右文字的视觉动线是一个连续的「Z」,而非一条向下的直线,既然配图不包含信息量,那么把它挪到右侧,也就不会对视觉动线形成干扰,方便用户快速(竖直)地浏览文章标题。
同时还能对左侧列表和右侧栏进行分隔。
起初我大概也算被说服了,毕竟「图片的信息量」一听就觉得好高大上,好像很有道理的样子。
直到最近,网站临近上线,首页也早已成型,故而长时间观察的机会逐渐多了起来,久而久之,便发现其中的「不对劲」:
1、「信息量」的确不假,但信息量再低,图片终归是图片,终归要比文字抓人眼球,因而右图左文字结构下的用户的视觉动线只会是一个从标题到配图再到标题的加宽版的「Z」。
因此把标题和配图分这么开,可能的结果往往是「累感不爱」,于是便快速(竖直)只浏览标题/配图了事,毕竟路程太长了。
2、而在左图右文字结构下,尽管视觉动线仍时不时呈「Z」型,但比起右图左文字结构,路程显然要短得多。即便用户只是快速扫视配图/标题,也很容易通过余光观察or快速切换到相应的标题/配图。
3、此外,从宏观布局角度而言,左图右文字结构下,标题可以处在网页的水平中部区域,不至于让人觉得网页太宽,眼球要跑好远。加之左侧配图与右侧栏所形成的壁垒(|————|)在视觉上营造出了边界感,使得新闻部分看起来会短些。 或者说,它就像一个汉堡一样,把最美味的部分夹在了中间,这在某种意义上恰恰突出了新闻内容;
而右图左文字结构,正如BOSS所想要的那样,对左右进行了分隔——事实是咱们网站右侧栏的内容确实和别人家新闻博客太不一样,做一些区隔多少也是需要的——但这种结构却是把用户最关心的部分甩在了左侧,因而右侧栏也就离用户更遥远了,这恐怕不是初衷。
4、最后,左图右文字结构下,眼球从标题向右移动至配图时,右侧是没有边界的,换言之,此时4、用户将下意识地面临:①看右侧栏 or ②折回看下一篇 2个选择;
而左图右文字结构呢?正如第2点所述,眼球可以轻松地在配图和标题之间来回摆动,而不至于分心至距离较远的右侧栏,因而从局部关系上来看,也是左图右文字结构更胜一筹。
好吧,说是这么说,想是这么想,猜是这么猜,但究竟效果如何,还是要上线才知道。
毕竟DeadLine高于一切,先完成再完美嘛。
作者:@Stove3;来源:简书
-
微信创始人张小龙首次公开演讲(官方无删减版)
微信创始人张小龙首次公开演讲(官方无删减版) -
如何通过APP看到产品战略层面
产品经理拿到一款产品的时候,不能只能看到表面信息,而是要能看到产品背后的信息。 -
基于用户的“真需求”创新产品
产品创新是保证企业在竞争激烈的市场上长久生存的关键,今天,我们就围绕产品创新和用户研究分享一些看法。 -
有一种交互设计研究验证叫“设计走查”
如何在最短的时间内对自己的产品做出检验,确保其在定位、设计、营销计划等多个环节,在可视范围内是正确的,需要一套比较科学、完善的方法去做出检测。 -
你为什么离不开微信?
张小龙说用完即走,你却爱不释手; 到底是什么让你离不开微信? -
移动互联时代APP的发展方向
现在我们已经走上了移动互联网时代,无论是企业还是公司,都会经过网络竞争中争取有利的优势,较为传统的产品竞争逐渐向互联网竞争转型,出现了很多数据云大数据等等 -
AI 时代产品经理的机遇和挑战
AI 时代产品经理的机遇和挑战 -
前1%与前10%的产品经理差距在哪?
前1%与前10%的产品经理差距在哪? -
你有哪些策略应对不断的需求变更?
你有哪些策略应对不断的需求变更? -
如何运营天猫【十亿俱乐部】商家页面?
如何运营天猫【十亿俱乐部】商家页面?

