页面|列表页信息展示,如何搭建视觉结构?
编辑导语:如何做好列表页的信息展示,让用户可以更加清晰地获取信息,在提供用户更好的视觉和使用体验时,推动用户的下一步操作?你可以利用多种方法,如留白、分割等,搭建合理的视觉展示结构。本文作者便做了相应总结,一起来看一下。
文章插图
在列表页设计信息时,面对多种视觉结构时该采用哪种比较合适的疑惑,思考以下了问题:
- 用户是如何有效认知信息?
- 信息使用哪种视觉容器,能更好表现不同信息之间关系的目的,以及在阅读与使用时能带给用户更好的体验?
- 由于手机屏幕尺寸有限,怎么再增加屏效?
- 为什么需要信息整理;
- 列表页信息组织方式有哪些;
- 设计注意;
- 总结。
设计师在设计信息如何在界面展示时,都在思考如何使用户更快理解从而产生下一步操作,本篇文章分析与总结了信息如何通过有效结构化展示,来覆盖各种场景,使用户体验更加流畅,来和读者共同探讨。
用户如何认知信息?用户在看到界面的时候,会无意识在思考“哪里最重要”,接着就会思考“与它有关联的信息有哪些?”等等问题,所以我们在设计界面时,应通过建立合适的视觉层级以及不同信息之间的关系,来解决用户所遇到的问题。
1)建立层级:主要通过字体、字体大小、粗细、颜色来区分层级(文章通过会结合具体实例来解释)。
2)建立关系:为了传达信息之间的关系,比如说上下属关系:菜单栏标签A与标签下方的内容a就是上下属关系,可以通过视觉上的组织与空间上的组织进行设计。
- 视觉上的组织:视觉上感受信息之间的关系主要是通过接近性、相似性、连续性,共同背景等方式。
- 空间上的组织:单页面空间里,人一般有从左至右、从上至下的阅读习惯的顺序。
标题与辅助信息在信息层级上,一般通过设计规范的不同字号、颜色和粗细来区分层级。
信息关系上主要利用格式塔原理之一——接近法则,进行信息分组。 接近性原理是指:物体之间的相对距离会影响我们感知它们是否以及如何组织在一起。互相靠近(相对其他物体)的物体看起来属于一组,那些距离较远的就不是。
辅助信息在使用时,为了提高屏效会有字数最长限制规范,当超过时,采用的缩略方式有:末尾截断、中间截断。
- 末尾截断:当超过限制时,超过字数常用“…”来替代隐藏内容,比如段略文本常采用方式。
- 中间截断:保留开头和结尾,在文字结尾规范字数处截断,除了缩略文本外,还对于过长且名称前部分类似的信息,通过末尾部分的文字进行区分。
操控按钮:一般是提示用户,这部分是可点击交互的模块,不是静态信息。所以操作提示一般可作为中性、或积极操作暗示。
操作提示可分为:按钮、按钮加文字、文字或没有,可根据内容目的采用对应方式,比如说,当在营销活动时,可采用:文字:“立即购买”、或者文字“立即购买”?icon,或者内容区信息过多可采用:icon,或者不用按钮暗示,因为卡片的结构形式已经暗示用户可点击的操作行为。
- 最近你微信列表里的好友是不是突然变得“豹里豹气”?就是它↓今天这只金钱豹 甚至火上了微博...|2022年火的第一个表情包竟然是这只豹子精孙悟空听了
- meta|创建Facebook公共主页需要注意哪些问题?
- 专利|刷完1427页专利文件,我们发现了Meta的元宇宙秘密
- 页面|0.9%不是0.9%?拼多多的“砍一刀”为何没完没了
- IT之家 iOS / 安卓版 8.07 更新:增帖子草稿箱/帖子列表记忆
- 《Among Us》2022更新路线 好友列表功能即将到来
- 自从智能手机普及以来|安兔兔v9.2.7正式发布新增充电测试页面
- 路由器|Mybatis+element简单实现自定义数据库分页查询
- 1月12日晚间|华为花瓣搜索引擎petalsearchpc网页版面向国内用户
- 微软 Win11 即将开放小组件功能:商店条款更新,甚至支持网页