UI设计中设计文章列表左右的思考优漫动游

2023-10-24 04:52

本文主要是介绍UI设计中设计文章列表左右的思考优漫动游,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

  当我们仔细看APP的文章列表时我们会发现:有些采用的是左文右图;有些采用的则是左图右文。这个时候我们有没有进一步思考过,这两种方式有什么区别呢?各自的优缺点又是什么呢?  
UI设计中设计文章列表左右的思考  
  在对比各大APP时,我们会发现文章列表的排版方式有些是左文右图,有些是左图右文。  
  左文右图你可能知道就是文字比较重要,但是同样是新闻类的App你也会看到这两种情况都存在,因此还不单单是文字重要的原因,下面我就分别从左文右图和左图右文分别来说。  
  一、左文右图  
  左文右图我们看到大多数新闻类APP都是这样做的。  
  1.优势:  
  1.人的阅读习惯:从左至右,从上至下。采用左文右图的布局,可以提高用户阅读的流畅性;  
  2.发布者有第三方,质量不能保证:今日头条、网易新闻其发布者有些不是专业的媒体人,文章质量高低不齐,同时有可能出现没有的情况。因此为了界面统一,放在右侧是不错的选择。  
  2.缺点:  
  由于人的视线往往先关注,因此当用户看到感兴趣的内容时,阅读的顺序先是然后文字,因此在阅读上也会有一定的阻碍。  
  因此,左文右图的文章结构在使用时需要根据产品具体属性来分析,比如今日头条,其内容主要来自一些不专业的用户,同时其产品属性又多以文字为主,因此他在使用时就采用左文右图的结构。  
  二、左图右文  
  左图右文,往往从产品属性来说以为主,我们常见的电商类产品多以该结构为主。不过在新闻类APP中,来分析左图右文有缺点:  
  1.优势:  
  1.文章内容往往由专业人士发布,因此相对于今日头条和网易新闻,其质量有所保证,同时不会出现有些有图,有些没用图的情况;  
  2.可以用内容引发用户兴趣,UI设计中设计文章列表左右的思考作为营销的手段提高转化率,比如,当你看到照片,你是不是大概就能够猜到新闻内容,从而进一步了解新闻内容。  
  2.缺点:  
  1.如果与内容没啥关系,就会增加碍眼的污染信息,影响用户的阅读速度;  
  2.如果主要是以营销为目的的,久而久之用户就会下意识自动过滤左侧的,就成了无用的障碍信息。  
  因此,左图右文的文章结构在使用时需要根据产品具体属性来分析,比如搜狐,其内容主要来自一些专业的用户发布,在左边可以有效的引导用户阅读,同时它不存在没有的情况,因此采用左图右文的结构比较好。  
  三、总结  
  了解了左文右图和左图右文,那么在具体操作时就能够更好、更快的确定使用哪种结构了,下面再来回顾下:  
  左文右图:适合用户量较大,其内容主要来自一些不专业的用户,同时其产品属性又多以文字为主;  
  左图右文:适合于细分类APP,其内容质量高,主要由一些专业人士编辑的APP。  
  

这篇关于UI设计中设计文章列表左右的思考优漫动游的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/272846

相关文章

MyBatis设计SQL返回布尔值(Boolean)的常见方法

《MyBatis设计SQL返回布尔值(Boolean)的常见方法》这篇文章主要为大家详细介绍了MyBatis设计SQL返回布尔值(Boolean)的几种常见方法,文中的示例代码讲解详细,感兴趣的小伙伴... 目录方案一:使用COUNT查询存在性(推荐)方案二:条件表达式直接返回布尔方案三:存在性检查(EXI

VS配置好Qt环境之后但无法打开ui界面的问题解决

《VS配置好Qt环境之后但无法打开ui界面的问题解决》本文主要介绍了VS配置好Qt环境之后但无法打开ui界面的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要... 目UKeLvb录找到Qt安装目录中designer.UKeLvBexe的路径找到vs中的解决方案资源

Python中合并列表(list)的六种方法小结

《Python中合并列表(list)的六种方法小结》本文主要介绍了Python中合并列表(list)的六种方法小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋... 目录一、直接用 + 合并列表二、用 extend() js方法三、用 zip() 函数交叉合并四、用

Spring Boot中的YML配置列表及应用小结

《SpringBoot中的YML配置列表及应用小结》在SpringBoot中使用YAML进行列表的配置不仅简洁明了,还能提高代码的可读性和可维护性,:本文主要介绍SpringBoot中的YML配... 目录YAML列表的基础语法在Spring Boot中的应用从YAML读取列表列表中的复杂对象其他注意事项总

QT6中绘制UI的两种方法详解与示例代码

《QT6中绘制UI的两种方法详解与示例代码》Qt6提供了两种主要的UI绘制技术:​​QML(QtMeta-ObjectLanguage)​​和​​C++Widgets​​,这两种技术各有优势,适用于不... 目录一、QML 技术详解1.1 QML 简介1.2 QML 的核心概念1.3 QML 示例:简单按钮

在 PyQt 加载 UI 三种常见方法

《在PyQt加载UI三种常见方法》在PyQt中,加载UI文件通常指的是使用QtDesigner设计的.ui文件,并将其转换为Python代码,以便在PyQt应用程序中使用,这篇文章给大家介绍在... 目录方法一:使用 uic 模块动态加载 (不推荐用于大型项目)方法二:将 UI 文件编译为 python 模

C++类和对象之初始化列表的使用方式

《C++类和对象之初始化列表的使用方式》:本文主要介绍C++类和对象之初始化列表的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录C++初始化列表详解:性能优化与正确实践什么是初始化列表?初始化列表的三大核心作用1. 性能优化:避免不必要的赋值操作2. 强

Python列表去重的4种核心方法与实战指南详解

《Python列表去重的4种核心方法与实战指南详解》在Python开发中,处理列表数据时经常需要去除重复元素,本文将详细介绍4种最实用的列表去重方法,有需要的小伙伴可以根据自己的需要进行选择... 目录方法1:集合(set)去重法(最快速)方法2:顺序遍历法(保持顺序)方法3:副本删除法(原地修改)方法4:

微信公众号脚本-获取热搜自动新建草稿并发布文章

《微信公众号脚本-获取热搜自动新建草稿并发布文章》本来想写一个自动化发布微信公众号的小绿书的脚本,但是微信公众号官网没有小绿书的接口,那就写一个获取热搜微信普通文章的脚本吧,:本文主要介绍微信公众... 目录介绍思路前期准备环境要求获取接口token获取热搜获取热搜数据下载热搜图片给图片加上标题文字上传图片

Python中DataFrame转列表的最全指南

《Python中DataFrame转列表的最全指南》在Python数据分析中,Pandas的DataFrame是最常用的数据结构之一,本文将为你详解5种主流DataFrame转换为列表的方法,大家可以... 目录引言一、基础转换方法解析1. tolist()直接转换法2. values.tolist()矩阵