技术解读 1天前 73 阅读 0 评论

信息设计二重奏

作者头像
人人都是产品经理

AI技术专栏作家 | 发布了 246 篇文章

信息设计,不只是排版与美感的协奏,更是认知与策略的双重演绎。本文以“二重奏”为隐喻,从结构逻辑与视觉表达两条主线出发,探讨如何在复杂内容中实现清晰传达与用户引导。

一、什么是信息?

信息,是加工处理后有逻辑的数据,来源于数据并高于数据。信息=数据+处理,通过某种方式组织和处理数据,分析数据间的关系,数据就有了意义,这就是信息(Information)。

这些信息可以回答一些简单的问题,譬如:谁?什么?哪里?什么时候?所以信息也可以看成是被理解了的消息。

对于信息系统而言,信息是包含所有形状和大小的信息,比如:网站、文档、软件应用、图像、文字、视频等等。

二、什么是信息设计?

国际信息交互设计组织给信息设计的定义为:

信息设计,是定义、规划和构建信息内容和信息呈现的环境,以满足目标用户接受信息需求的设计。

《数字信息设计词典》一书中定义:

信息设计是一个搜索、过滤、整理、表达的过程,它会将信息清晰而有效地进行呈现,为受众进行引导、解说,并提供充实的信息量。

信息设计包括信息架构、信息交互和信息呈现。需要结合平面设计、交互设计、心理学、文化研究等多个领域的知识,才能够将信息准确而高效地表达给受众。

信息设计的本质,是提升信息的可寻性、可理解性、可用性。

信息设计的产物

信息设计依托于载体而存在。听上去,信息似乎有些复杂,但信息设计的产物在生活中随处可见。

比如:我们常见的图标,是相对简洁有力的信息设计,基于不同的场景,向受众传递的信息虽有微小差异,但便于识别和记忆。

再如:生活中常见的地图指引,广告、海报等都是我们常见的信息设计产物。

移动端、PC端、AR/VR的系统或应用的界面,也是信息设计的产物。只是相对于上述两者更为复杂,也是后续重点阐述的信息设计形式。

三、信息设计二重奏之一“组”

我们对世界的理解很大程度上取决于我们组织信息的能力。简单来说,“组”就是系统中的信息有逻辑地组织在一起,提升信息的可寻性、可用性。

先来看一个案例:

上述图中针对左上角的小人,采用两种不同的分组方式:左下角按颜色分成四组;右侧的图是把相同排序的列为一组,但对应的基础单元,不是一个人,而是四个人。

试想下哪种更好呢?

没有介绍背景、没有使用环境,没有对应的用户,很难评价。所以,分组的方式,依托于用户的使用情景,用户的行为和心智模式。

下面来做一个小案例测试,现在打开你手机,进入微信应用,然后退出微信应用程序。

你找到退出应用的入口了吗?没有求助,你的第一反应是怎么退出?

“点击我-点击设置-滑动到底部,点击退出”。

对于经常使用手机APP的用户,可能很容易找到这个路径,或许是他曾经做过,或许是别的应用程序也这样,所以在他的思维里有这个模式,很容易就做到了。

但对于一些不常使用手机APP的用户或老年用户,他可能真的不会操作,因为他找不到入口。

从信息的组织上来说,“退出应用”这个功能放在了一级分类“我”的二级分类“设置”中,习得了这个认知模式的用户,便很容易完成任务,而没有习得的用户可以通过学习和搜索来完成。

对于信息设计来说,分类只是信息组织策略中的一个,后文会陆续介绍其他的策略。

通过案例,你会发现,作为产品设计师,我们要去理解用户(或服务对象),理解他们的行为和思考方式,并在产品设计中,尊重和利用用户的这种行为或思维模式。而这种行为或思维模式可能来源于相似产品,或来源于用户的日常生活。

信息组织的结构

在《用户体验的要素》一书中,将信息的结构分成四种,包括层级结构、矩阵结构、自然结构、线性结构。

层级结构——从上至下,逐级展开。其特点结构清晰,关系明确 。而改变父级结构,会影响其子集。

矩阵结构——从多维度到达同一内容。较为复杂,学习成本略高。比如,微信的常用的聊天窗口,从微信最近聊天记录可进入;通过通讯录找到联系人,点击聊天可进入;在朋友圈点击好友,查看详情,点击聊天也可进入,不同的路径但都可以到达同一内容。

自然结构——自然流畅,接近现实认知。但随机性强,用户不可控。这里的自然结构,往往伴随着算法而存在,越是自然,算力越强。如,购物、视频的内容推荐,还有抖音类产品瀑布流式的浏览模式。用户不知其具体的结构是什么,但能感知内容与自己喜好的匹配度。

线性结构——简单易懂 ,操作简便。但拓展性有限,用户控制感差。通常来说,线性结构常用于有着明确前后逻辑关系的任务类操作设计,对用户来说更像是一个既有路径,而这个路径较为单一、固定。比如:医生看诊,先问诊、查体——诊断——开医嘱。

信息组织的策略

在信息设计中,这里将信息组织的策略整理为:“分类”、“分层”、“分块”和“排序”。

分类——分类是信息组织的基础,在系统设计设计中往往对应着导航设计。它是对大量信息进行分组,把相似或相关的信息归为同一类,便于用户快速找到所需的信息。例如,在电商平台上,商品被分类为电子产品、家居用品、食品饮料等不同类别,用户可以根据自己的需求快速找到所需商品。

但是每一种商品又有详细的指标,便于用户进一步了解商品,并下单购买,电商产品又设计了产品详情页,用于展示产品信息,这便是信息分层的一种。

分层——分层是指将复杂的信息组织成层次结构,不同层次的节点表示不同的信息粒度或抽象程度。从搜索产品,到查看商品详情,再到下单购买,缴费,在信息系统中对应着不同的页面,也对应着不同的信息维度,我们会将这些信息逐级展开,形成与用户的交互。

同样,电商的例子,商品信息也有很多,有些信息对用户而言很重要,有些对用户不那么重要,那么在信息展示时,会先让用户先找到商品的重点信息,而不是一下子将所有的信息给予受众。这样也可以让用户感觉条理清晰,便于寻找信息。

分块——如果说分层,是对不同信息粒度或维度的分组 ,那么分块便是是对各种维度信息的设计呈现。当一个页面需要承载太多信息时,设计师往往需要对信息进行筛选、组织,划定界面板式布局,就好像超市里的货架,什么物品应该放在什么位置,最合适。这里会依据使用者对信息的诉求,及产品本身的目标,双重维度综合来考虑,便也是下文的排序策略。

排序——排序是根据一定的规则将信息排列成有序的序列。排序可以说无处不在,大到信息系统分类分层,小到单个区域如导航或列表的排序规则。通过排序能够明确用户先做什么,再做什么,先看到什么,再看到什么。提升用户获取信息的效率和可用性。

分类、分层、分块排序是信息组织的重要策略。它们可以帮助我们将大量复杂的信息变得更加清晰、有序和易于理解。在信息化类产品的设计中,这些策略的使用依赖于信息设计的媒介,受众或产品的使用者。

“为了什么设计?”,“你的用户是谁?”,“这些人有什么特点”,“他们知识的范围是什么”,“他们有什么样的行为特点”… …等等与产品和使用者相关的问题,要有针对性地搜集素材,从而确定信息设计的要点及方案。

4、信息设计二重奏之一“流”

人类,通过五感来获取信息,即视觉、听觉、味觉、嗅觉和触觉,分别对应着人的器官——眼、耳、口、鼻和皮肤。基于这五种感觉器官,人可以感知周围的环境变化,从而与外界进行交互。

而在用户与信息系统的交互过程中,主要通过视觉和触觉来获取并反馈信息。那么,本文中,信息设计的“流”,包括视觉流,和操作流

视觉流在信息系统或平面设计中,用户扫描页面信息时视线的移动轨迹,称为“视觉流”。它受颜色、大小、布局、动效等因素的影响。

操作流对于信息系统或产品而言,用户在界面上的输入过程,或界面与界面间的跳转流,称为操作流。

视觉流决定了用户先看到什么,再看到什么;而操作流决定了用户操作步骤。通常,视觉流对操作流有引导作用,操作流对视觉流有反馈作用。

用户通过触点对界面进行输入,信息界面做出相应的反馈,用户通过视觉焦点接受信息,并引导下一步的触点操作。这是流系统的循环过程,大部分交互都是由这些视觉焦点,触点以及之间的流构成。

下面,我们来看一个案例:

用户名->密码->登录,这是主操作流,从视觉(排版)上遵循了从上到下的用户浏览习惯,引导着用户的操作流。

登录下面的注册,为用户提供注册场景的便捷入口,但在登录页非主流程,视觉上也没有着重引导,排版布局上偏于界面底部,字体也不突出,自然而流畅。

在登录上,密码有可见功能,视觉上用图标显示,清晰不占空间。

“30天内免登录”非必选项,用户可直接跳过进行登录,视觉呈现上也进行了一定的弱化,不影响主流程操控,操作效率较高。

再来看登录错误反馈,红色字体突显,布局和颜色都能够快速引起用户注意,从而进行下一步操作,“再试一次”,或直接选择“忘记密码”。

通过上述案例,我们看到:

视觉焦点负责将信息输入给用户,设计目标是抓住用户的注意力;操作焦点负责用户信息的输入,设计的目标是操控的易用性。

好的设计是能够将最核心的内容输入给用户,且视觉流轨迹简洁流畅,提升信息的可寻性;操作触点反馈明确,操作流自然流畅,整个过程交互阻力较少,无需用户思考,提升产品的可用性和易用性。

影响流的因素

影响流的因素,包括色彩、形状、大小、版式布局、交互动效以及信息的组织,交互元素等等。

其中,在影响流的因素中,界面的布局要尊重用户在不同媒介的阅读和浏览习惯。再辅以版式、色彩、大小和形状,用以从不同维度吸引用户的注意力。

比如:对比色和强调色的运用能够有效突出视觉焦点。面对大小不等的物体时,人们会自动地按照物体的大小进行排序,而当大小差异足够大时,可以迅速吸引注意力。

不同形状亦直接影响我们的感知,圆形通常被认为是一种温暖和友好的形状,而角形则表现出冷酷和威胁的感觉。同样,不同的色彩可以表达不同的情感和氛围。所以,设计师在考虑设计风格时,应首先考虑用户的目标、环境、内容和品牌,要精确而谨慎地选择色彩和造型。

在信息设计中,版式构图常用于平面设计,而对于信息系统类产品,往往指界面的框架页面模式,通过信息的组织,来确定界面中什么区域放什么内容。

反馈与提示,往往伴随动效的出现,恰到好处的动效,既能引导用户的操作,也能瞬间吸引用户注意力,在视觉起到有效提醒的作用。故在动效在视觉流和操作流的转换过程中扮演着重要的角色。

交互元素,往往是界面的构成元素,如:按钮、表单、表格、导航等组件。这部分的重点在于组件规范,保持一致性与便捷性。

视觉流,关注对用户注意力的影响。操作流,则是对用户行为模式和习惯性思维的尊重与探索,核心是信息的组织逻辑,其背后依赖于用户目标和任务的设定。就本质而言,用户的需求决定了一切。

参考书目:

《用户体验的要素》

《信息架构-超越Web设计》

《图形对话-什么是信息设计》

《交互设计精髓4》

《认知心理学》

“视觉流和操作流理论在移动设备界面中的交互设计研究”

作者:momous 公众号:KM学舍

本文由 @momous 原创发布于人人都是产品经理。未经作者许可,禁止转载

题图来自Unsplash,基于CC0协议

作者头像

AI前线

专注人工智能前沿技术报道,深入解析AI发展趋势与应用场景

246篇文章 1.2M阅读 56.3k粉丝

评论 (128)

用户头像

AI爱好者

2小时前

这个更新太令人期待了!视频分析功能将极大扩展AI的应用场景,特别是在教育和内容创作领域。

用户头像

开发者小明

昨天

有没有人测试过新的API响应速度?我们正在开发一个实时视频分析应用,非常关注性能表现。

作者头像

AI前线 作者

12小时前

我们测试的平均响应时间在300ms左右,比上一代快了很多,适合实时应用场景。

用户头像

科技观察家

3天前

GPT-4的视频处理能力已经接近专业级水平,这可能会对内容审核、视频编辑等行业产生颠覆性影响。期待看到更多创新应用!