页面|列表页信息展示,如何搭建视觉结构?

编辑导语:如何做好列表页的信息展示,让用户可以更加清晰地获取信息,在提供用户更好的视觉和使用体验时,推动用户的下一步操作?你可以利用多种方法,如留白、分割等,搭建合理的视觉展示结构。本文作者便做了相应总结,一起来看一下。
页面|列表页信息展示,如何搭建视觉结构?
文章插图
在列表页设计信息时,面对多种视觉结构时该采用哪种比较合适的疑惑,思考以下了问题:

  1. 用户是如何有效认知信息?
  2. 信息使用哪种视觉容器,能更好表现不同信息之间关系的目的,以及在阅读与使用时能带给用户更好的体验?
  3. 由于手机屏幕尺寸有限,怎么再增加屏效?
笔者接下来会按以下方式来讲述:
  1. 为什么需要信息整理;
  2. 列表页信息组织方式有哪些;
  3. 设计注意;
  4. 总结。
一、为什么需要信息整理?思考一下在界面中,当信息以一种无序的排列,和信息以结构化的排列相比,为何大多数的界面都选择了后者。
设计师在设计信息如何在界面展示时,都在思考如何使用户更快理解从而产生下一步操作,本篇文章分析与总结了信息如何通过有效结构化展示,来覆盖各种场景,使用户体验更加流畅,来和读者共同探讨。
用户如何认知信息?用户在看到界面的时候,会无意识在思考“哪里最重要”,接着就会思考“与它有关联的信息有哪些?”等等问题,所以我们在设计界面时,应通过建立合适的视觉层级以及不同信息之间的关系,来解决用户所遇到的问题。
1)建立层级:主要通过字体、字体大小、粗细、颜色来区分层级(文章通过会结合具体实例来解释)。
2)建立关系:为了传达信息之间的关系,比如说上下属关系:菜单栏标签A与标签下方的内容a就是上下属关系,可以通过视觉上的组织与空间上的组织进行设计。
  • 视觉上的组织:视觉上感受信息之间的关系主要是通过接近性、相似性、连续性,共同背景等方式。
  • 空间上的组织:单页面空间里,人一般有从左至右、从上至下的阅读习惯的顺序。
二、列表页信息组织方式有哪些?1)列表页单个容器内信息的组成部分有标题、辅助信息、图片/icon、操控按钮、提示信息等。
标题与辅助信息在信息层级上,一般通过设计规范的不同字号、颜色和粗细来区分层级。
信息关系上主要利用格式塔原理之一——接近法则,进行信息分组。 接近性原理是指:物体之间的相对距离会影响我们感知它们是否以及如何组织在一起。互相靠近(相对其他物体)的物体看起来属于一组,那些距离较远的就不是。
辅助信息在使用时,为了提高屏效会有字数最长限制规范,当超过时,采用的缩略方式有:末尾截断、中间截断。
  • 末尾截断:当超过限制时,超过字数常用“…”来替代隐藏内容,比如段略文本常采用方式。
  • 中间截断:保留开头和结尾,在文字结尾规范字数处截断,除了缩略文本外,还对于过长且名称前部分类似的信息,通过末尾部分的文字进行区分。
辅助信息:也还可以通过不同的对齐方式与标题文字进行区分,展示内容一般是来对跳转的二级界面进行解释说明,以免用户对于标题的产生误解,而产生的不点击行为或者误操作。
操控按钮:一般是提示用户,这部分是可点击交互的模块,不是静态信息。所以操作提示一般可作为中性、或积极操作暗示。
操作提示可分为:按钮、按钮加文字、文字或没有,可根据内容目的采用对应方式,比如说,当在营销活动时,可采用:文字:“立即购买”、或者文字“立即购买”?icon,或者内容区信息过多可采用:icon,或者不用按钮暗示,因为卡片的结构形式已经暗示用户可点击的操作行为。