APP设计新知:左文右图和右文左图的差异在哪里

新闻资讯行业从传统纸媒体时代,到PC互联网时代,再到如今的移动互联网时代,用户阅读习惯和媒体转型、技术已有非常大的转变。企业若有计划制作新闻资讯类APP,就需要多留意市面上这类主流APP。

目前市面不少新闻资讯类APP设计的布局排版都是以左文右图或右文左图为主,这两种布局形式看似区别不大,实际存在很大差异。那麽,左文右图和右文左图的差异在哪里呢?

左文右图和右文左图的差异在哪里?

● 左文右图的特点

APP设计新知:左文右图和右文左图的差异在哪里

APP设计新知

左文右图是新闻资讯类APP设计布局中最常见的样式。按照用户长久以来的阅读习惯,即F阅读顺序(尼尔森的用户阅读视线模型),用户浏览页面的顺序都是从左到右自上而下,因此左上角的信息是最触达用户的。

资讯类APP设计选择左文右图样式的理由是什麽?

APP设计新知:左文右图和右文左图的差异在哪里

APP设计新知

按道理,图片的易识别性远优於文字,将图片放在界面的左部分会更容易吸引用户的眼球。但为什麽大部分资讯类APP都会倾向於以文字为主,图片作为辅助信息的形式呢?

原因有四:

① 至文字诞生以来,人类普遍是通过文字来获取信息,因此从信息传递的准确性以及丰富性上来说,文字的优势远大於图片的。

② 根据大部分用户的阅读习惯,将文字放在界面的左边更利於用户获取信息。

③ 左文右图的阅读路径较短,不会有视线的折反。因此,基於效率和阅读习惯的角度来说,左文右图优势更明显。

④ 正因为图片的易识别性优於文字,因此即使图片放在文字後面,用户仍有机会将视线放在图片上。

APP设计使用左文右图的布局方式的好处有哪些

APP设计新知:左文右图和右文左图的差异在哪里

APP设计新知

大多时候资讯类APP为了展示信息的多样性,避免单一的信息流结构让用户感到单调,界面布局除了左文右图的样式,往往还会搭配三图、大图及视频等样式。在这这样多种穿插样式的情况下,APP设计使用左文右图的布局方式,能为用户提供一个扫读时的基准位置,极大地减少用户长时间阅读所带来的视觉压力和疲劳。

* 当界面布局出现多种样式穿插时,除了要考虑单个信息流样式的阅读体验,还要保持整体信息流阅读顺序的一致性,这样才能为用户提供较好的沉浸式体验。

另外,若在标题文字较短的情况,选用右图左文的样式,右上角有可能会出现视觉上的缺角,破坏界面整体的工整性。基於格式塔原理,左文右图样式能更好地避免这个问题。

* 格式塔原理对闭合的研究中提及到,人的大脑无论看见什麽东西,都会将它想像成一个整体,如果元素过於杂乱而无法归类为一个整体,会直接影响整体的视觉感受。

● 右文左图的特点

APP设计新知:左文右图和右文左图的差异在哪里

APP设计新知

从内容形式的吸引力而言,视频>图片>文字,因此高质量的图片往往能在第一时间触达用户并形成转化,但前提是一定要把控好图片的质量,否则效果将适得其反。因此左图右文的样式一般更适合PGC(Professionally-generated Content)类的APP。

PGC类APP大多是由专业内容生产者输出,他们对内容和图片的质量都有较好的掌控力,因此采用左图右文优先给用户展示图片信息,能更好提升用户对内容的兴趣。

APP设计使用右文左图的布局方式的好处有哪些

APP设计新知:左文右图和右文左图的差异在哪里

APP设计新知

在用户带有明确目的场景进行阅读时,用户往往对内容有一个大致的预期,所以如果让用户第一时间识别图片,能让用户立刻作出判断并大大提升用户操作效率,这比在众多文字标题中查找内容更为便捷。

无论资讯类APP采用的是左文右图样式,还是左图右文样式,在设计信息流时都要注意为用户提供图文阅读顺序一致的体验,以及注意以下几点APP布局事项:

资讯类APP设计布局的注意事项有哪些?

APP设计新知:左文右图和右文左图的差异在哪里

APP设计新知

① 文字颜色:根据Material Design设计语言推荐,在明亮光线下,浅色背景深色字比深色背景浅色字更容易识别;在较暗光线下,文字与背景的文本对比度应为7:1相对阅读更舒适。

② 文字大小与间距:如今不少APP都深有字体及字体大小设置功能,用户可根据使用场景与需要自定义字体及大小阅读,有效提升用户粘度。

③ 对齐方式:对於英文段落排版,通常使用左侧对齐,让右侧自然形成起伏边;而对於中文排版则使用两端对齐效果更佳。

以上就是有关资讯类APP设计布局的基础知识点,简单来说:若想让更多用户愿意长期使用你的产品,就必须深入了解用户习惯,选取最合适且最能满足目前用户体验的设计形式!

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/40667.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
InspirrInspirr订阅用户
上一篇 2022年6月15日 23:50
下一篇 2022年6月15日 23:50

相关推荐

  • Android将会被取代?看看Google下一代操作系统是怎样

    Google 拥有全世界使用最广泛的手机系统Android,以及桌面系统Chrome OS。你以为这只是Google的终点,那就想错了。而事实上,Google从去年开始就已经开发下一代操作系统Fuchsia,很可能会取代Android。最近,Fuchsi…

    2022年6月12日 建站资讯
    01.7K
  • 网页设计案例分析:你所知道的极简主义是什麽

    极简主义是什麽?极简主义的应用领域非常广泛,平面设计,建筑,音乐,文学,绘画等等领域都有它的身影。尽管极简主义已在数十年起步,但早期网页设计仍然充斥着大量元素、图片、弹窗等。 如今我们身处着信息爆炸时…

    2022年6月25日 建站资讯
    0155
  • Apple发布iOS 11.3 又有哪些新功能值得惊喜

    美国时间1月24日上午,Apple发布首页iOS 11.3开发者预览版,正式版也将在春季向广大用户推送。作为iOS的一次重大版本更新,这次Apple有将会为我们带来新的功能呢? 电池和性能 本次Apple给iOS11.3加入了有效的电池管…

    2022年6月12日 建站资讯
    0256
  • 贴心!两招解决移动端输入难题

    词典不够智能时关闭自动纠错 很明显,对於低效的自动纠错功能只会对用户体验有挫伤的功能。常见的自动纠错多用於单词缩写、街道名称、邮箱、人名以及一些不在字典的单词。若然词典不够智能,最好不要使用自动纠错功…

    2022年6月7日
    0155
  • 两步找出用户痛点  

      第一步:通过用户当前需求去挖掘机会点 通过列举场景可以掌握到场景的描述,从而进行分析用户在当前场景的需求,然後去挖掘出潜在的机会点。具体例子如iOS系统接电话,有两种场景:非锁屏场景与锁屏场景。非…

    2022年6月7日
    0146
  • 功能性APP页面,交互更需简洁

    第一个原因:毕竟是功能性的APP页面设计,主要是服务於用户的具体操作。因此,简化用户的操作流程和步骤,是提升用户交互体验的一个很直观的要求。其次,还要保证交互功能的外观设计,尽量地符合用户所见即所得的要…

    2022年6月7日
    0205
  • 新iOS模拟器中有哪些新的功能

    iOS模拟器是在开发任意iOS应用程序过程中不可或缺,无法被忽视的一个部分。最值得一提的是,Xcode 9的新模拟器带来了很多有用的功能,能够提升开发者的开发效率。那麽,新iOS模拟器中有哪些新的功能呢? 功能一:在…

    2022年6月12日
    0166
  • 网页设计规范:如何选择合适的图片排版方式

    无论是平面设计、网页设计还是APP设计,排版布局都是非常重要的。排版的难处并不是根据设计好的版面来填充内容,而是根据具体的内容布局排版。下面,南宁网页制作公司将分享,「如何在不同情况下,选择合适的图片排…

    2022年6月25日 建站资讯
    0619

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息