2020-12-21 16:30 来源: 京东设计中心 JDC
从二十世纪七十年代,特格拉姆第一次提出了 “信息设计”,不同于主张“精美的艺术表现” 图形设计的是,信息设计更强调“进行有性能的信息传递”。
信息设计是除了图形以外的文字、数据等内容设计,通过信息设计可以提高人们应用信息的性能,在众多信息中能够迅速找到自己所需要的,并且使得信息能被有效地理解。所以, 信息设计的关键在于如何将信息有效地展示,而不是强调如何艺术性的表达。
因此,以下总结了 5 条 信息设计的原理,同时结合了后台设计的实际案例进行应用。
靠近与动态
这主要针对 信息提示的设计。“靠近”指的是信息需要靠近行为目标,显示在用户的中央凹区域内;“动态”可理解为 “变化” 的,但不仅是内容的变化,还需要有位置样式的变化。
因为人们的 视觉系统分为两个区域,一个是中央凹区域,而剩余的是边缘视觉区域(相当于视觉盲区)。人们可以轻易的感知到中央凹区域里的事物,而对于落在边缘视觉区域的事物,他们的存在都很难被发现。除非这个事物是动态的,才会引起人们中央凹区域的转移,将视线转移到这个动态事物上。
在界面设计中,这将会影响 信息的可见性。比如在我们之前的后台,有个关于当前 “网络状态” 的信息设计。在正常情况下,界面顶部会显示 “网络良好” 的横幅,当用户没联网的时候,顶部的横幅内容会变为“网络异常”… 但当时我们因为这个设计被用户投诉了。
(在实际操作过程中,右边的提示设计比左边的更容易让用户看到)
因为用户在后台中进行的都是主流程操作,根本没注意到页面顶部的信息变化,进而导致了后面操作的失败。所以我们将这里的提示信息进行调整,只有异常情况才会显示 toast 提示以引起用户的注意。
让提示信息显示在用户的目标行为附近,或通过动态的展示以引起用户的注意。
适应与侧重
“适应” 指信息设计需要考虑 产品属性与应用场景,“侧重” 是根据不同场景需求,适当调整信息呈现的 侧重点。
一个产品可能是作为线上独立运作的平台,也可能只是线下的辅助拓展;可能是供娱乐消遣的内容展示,也可能是作为实用的专业工具运用。甚至比如在一个运动类产品中,用户动态下使用的页面,与静态时使用的页面,信息的导向、可触发的范围设计都可能产生变化。同时,不同的产品属性与应用场景,对应不用的 用户人群,这些人群的需求也相差迥异。
像当时在我们后台里,有一个关于商品列表的设计。常规的商品列表会包含商品图、商品标题与价格,而商品价格通常被重点突出用来吸引消费者;但在后台中,用户群体是我们的商家,他们最关注的其实是这个商品 “我卖了多少份”、“我赚了多少钱”,商品价格反而不是最重要的点。
(相比左边的设计仅是把信息 “添加” 进页面中,右边的设计同时适当调整了信息层级,让信息效用于当下的场景)
所以我们在做这块商品列表设计的时候,弃用了常规的商品列表组件,重新设计了 信息层级以适应当前的商家场景,侧重展示用户最关注的信息。
根据不同的场景适当调整设计,有侧重性地呈现信息以提高使用效率。
前置、直达
严谨的框架界定、完整的信息展示有时候并不是最佳解决方案。“前置”“直达” 意为将二级页面(或独立功能)信息前置于主页面中展示,为用户提供更快捷的 直达入口。
其实对于大部分用户来说,用的只是一个产品中的某个 核心功能而不是全部功能,所以如果从使用效率上讲,将这个核心功能入口前置展示在主页面,要比用户先进入二级页面、再在全部功能中寻找这个核心功能的使用效率更高。
这种设计理念我们也可在 ios14 中见到,通过小组件的形式,在主屏幕展示每个 APP 最核心的内容,用户无需进入 APP 即可直达功能入口。
特别是对于后台这种专业型工具来说,对产品 精准、便捷的诉求会更加明显。比如当时我们后台中有一个邀请功能,包含主页的历史邀请列表与设置邀请条件的二级页。这个二级页中有是否接受邀请的开关、对邀请级别与粉丝量的限制;如果关闭这个开关,则此时页面中对级别与粉丝量的限制设置失效。
(在实际运用场景下,右边的设计不仅能快速进行操作,而且这个开关与列表、更多设置选项之间的承接关系也表达地更加清晰)
所以我们将这个决定了二级页中其他选项 “生死” 的开关前置到列表主页中,毕竟在关闭开关的情况下,用户已没必要为了其他无效的设置选项进入这个二级页。
通过将关键功能前置,打破页面层级间的分隔,帮助用户直达关键功能。
非必要折叠
保持简洁似乎是设计师恒定不变的主题,在许多常规页面中,如果一个内容包含 ABCD 不同分类,这些分类信息基本上会被 “合并同类项”,折叠成左右滑动的菜单栏样式。
不过除了图片的折叠还较为显眼,对于文字标题的折叠还是 需要慎用的。因为用户进入一个页面会快速浏览页面中的主要内容(或占比大的模块),同时经过长久以往的 浏览习惯,用户操作界面的滚动方向都是上下为主;所以当文字标题作为辅助信息不仅占比较小、且是左右滑动的菜单栏样式时,位于菜单栏第 2 项以后的内容会被大部分用户 自动忽略。
在我们之前的后台设计中,有一个关于活动类型的切换就是采用这种左右滑动的菜单栏形式,这也间接导致了当时位于第 2、3 项菜单中的类型被选中率特别低。
(对于一些重要功能的切换,右边的设计比左边更能引起用户注意,让用户进入选择的状态)
后来我们将这里进行优化,把原本作为顶部滑动菜单栏的活动类型下移、并变成 3 个展开的选项,将活动类型的选择作为需要用户操作的主要内容的一部分,绕开用户的自动忽略。
折叠为左右滑动的文字菜单栏,由于样式不显眼与用户浏览习惯的影响,除了第一项以外的其他内容,通常会被用户忽略。
默认与引导
“默认” 指界面中一些 默认选项,这些默认的设计可帮助我们引导用户的操作,同时对于用户而言,他们并 不会轻易改变这些默认信息。
因为用户对于有可能导致自己失去一些权利或其他什么的时候会表现的无比敏感。当用户面对不同选项时,如果此时有个默认选项(不选择)将比选择一个可能导致自己失去什么的选项更能获得 安慰。所以被动的选择默认状态会让用户感到安全感,更加简单,和更小的风险。
基于这种 默认项心理,也可以 引导用户按我们推荐的路径操作,尽量减少异常情况的发生。比如我们后台设计中有个数据分析模块,用户可筛选不同时间段查看数据情况。但如果用户频繁切换时间段,将会增加我们系统的计算负荷进而导致数据异常。
(面对不同筛选项时,左边的设计给用户的第一反应是 “这里还有 2 个选项,我切换试试有什么反应”;右边的默认项设计可有效削弱用户对“可选择” 的敏感度)
所以我们将时间筛选中的某一项作为默认项,并将其他时间选项收起(如果说前面说的 “非必要折叠” 是绕开用户的自动忽略,这里的 “默认” 选项则是进入用户的自动忽略),用户来回切换的频率减少,相应也降低了系统的计算负荷。
运用默认项设计,营造用户在使用过程中的安全感,引导用户的同时尽量减少异常情况的发生。返回搜狐,查看更多