恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
左图右文与左文右图
0.0°
2017-08-14 原创文章 经验/观点 举报 5205 21 18 1

平时在使用APP查看新闻时,发现不同的平台对于新闻列表的图文布局并非一致,便从自己的角度对这一问题提出自己的看法。

应该有不少小伙伴在平时在使用各种APP阅读新闻资讯时遇到过这样的问题:

同样是新闻资讯类的APP,为什么有些的布局是左文右图,而有些则是左图右文?


Image title


刚开始发现这个问题的时候自己也比较困惑,便和一些设计伙伴进行讨论,也在网上查看了其他人的理解。当中不少人认为这样的差异是因为不同新闻平台侧重点不一样,像今日头条侧重的是保证用户阅读信息的流畅性便采用左文右图的布局,而网易则想让用户更加注重深度阅读,同时图片也更能吸引人的注意,便选择左图右文。也有一些人认为就是谁重要就放在前面,只不过是今日头条认为文字重要,而网易新闻认为图片重要。


在寻求问题的答案之前,我们不妨来看看其他类型产品的左右布局问题(以电商为例)


Image title


对于电商平台,所有的左右布局中都是左图右文,至少我是没有见过左文右图的布局。那为什么都是左图右文的布局呢?其实理由也很简单,因为图片所表达的信息更为直接,能够帮助用户更快的了解商品信息(颜色、款式、造型灯),从而更快的找到自己想要的,而且将更为吸引用户视觉的元素置于前面也更符合人们一贯以来的排列习惯。但最根本的原因就是帮助用户更快的找到自己想要的商品。


Image title


我们平时在实体店进行购物时,我们从来都是先通过外包装来挑选商品,之后再通过具体的商品信息(价格、保质期、原料等)来最终确定要购买的商品,这一过程和如今人们在线上的购物流程其实是一样的。电商平台之所以会如此设计其实也是遵循了人们在线下的购物流程体验,而并不是说图片更重要或更吸引用户。


同样,我们也可以将新闻看作是一种商品,用户在对新闻列表页面进行浏览时其实也是在挑选自己感兴趣的商品,那这是不是就意味着新闻的列表也应该采用左图右文的布局?接下来我们以一个例子来进行说明。


Image title


人的视线顺序是从左往右的,所以先看图片再阅读文字,但这则新闻对用户而言就会产生一个问题,因为移动端的尺寸都很小,图片所包含的信息有时又太过于隐蔽,用户一眼根本看不出是什么意思,之后通过阅读文字才知道那张图片原来是隧道,这时候用户可能会再一次查看那张图片,这便造成了用户的视觉反复,如下图。


Image title


对于新闻资讯类APP而言,用户的使用场景是比较多样的,可能是睡前睡后,地铁或公交上,甚至是走路时等等,当中的很多场景都有一个特点,就是用户无法集中精力去阅读,阅读的同时会有很多外界的因素干扰,这时候保证用户阅读的流畅性就十分重要,而流畅性的体现就是让用户快速的了解新闻的信息,不让其有视觉上的反复进而影响阅读效率。上诉左图右文的布局方式明显使用户的阅读不怎么流畅,视觉上会有反复。造成这种情况的根本原因其实是新闻资讯的图片形式和一般商品的图片形式不同。


Image title


商品的图片虽然各不相同,但他们都有一个共同的属性:商品。而且用户在购物时都会进行分类搜索,比如要买鞋,通过搜索之后列表里的图片都是鞋的图片,用户在先浏览图片的信息时并不会对图片产生疑问(这张图片是什么东西?)。而新闻资讯类图片的内容则五花八门,用户第一眼可能无法理解图片的内容,受移动端尺寸的影响,这个问题就会愈发严重。如采用左文右图的布局,虽然与一般的视觉布局习惯不同,但用户阅读的流畅性就会有较大的提升。


Image title


经过分析之后,我认为对于新闻资讯类APP(移动端)而言,左文右图比左图右文的阅读体验更佳。至于为什么有些APP(少数)会采用左图右文,当中的原因我也不打算做过多的揣测。


希望自己的分析对各位能有所帮助。





更新:2017-08-14

收藏

21人已收藏

邻居家的小明

今天你做了别人不想做的,明天你就能做别人不能做的

  • 27

    作品

  • 136

    粉丝

  • 67

    关注

  • 测试测试测试测试
  • 临时临时
  • 金融图标
  • Siri语音动画(高还原度)

    猜你喜欢

      2017-08-14 原创文章 经验/观点 举报 5205 21 18 1

      左图右文与左文右图

      0.0°

      你确定要举报左图右文与左文右图

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年08月14日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      18
      21
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录