效能提升!B端列表视觉设计的T型思考法

 

先试试看,10s钟内你能记住下面多少字母

那再看看下面这张图呢?现在是不是很快就可以把它们都记住了?

B端产品也是一样的。大多数B端产品被人诟病说丑,根本原因不在于配色不好看、图标不新颖这些问题上,而是有没有让信息有序地呈现——尤其是B端系统中的列表页面,如果没有设计的干预,让大量的信息堆砌在列表中,就容易出现这么几个问题:

· 文字都长得差不多,不容易看到重点

· 信息太多,对比困难

· 呈现方式太单调,容易走神

△列表真的太难了

那怎么通过视觉设计优化列表页,提升效能呢?这里总结了10个字“横向看信息,纵向做类比”,合起来就是“T型思考”的关键。

横向看信息

整合信息、优化呈现方式

虽然列表是由多项数据构成的,但每项信息的重要程度却不尽相同,所以厘清各项数据的关系、重要程度,找到其中的联系与差异,方能找到B端产品列表呈现的规律。

1.划分信息重要度

就跟体育课站队形要按照高矮顺序一样,B端产品也需要划分出“重要信息”,这样才能做到条理清晰。

因为涉及保密性原则,所以接下来的例子我们会替换成其他的行业的,要是有所出入的地方还请大家谅解哦~比如某企业的一个内部物资管理列表模块:

从行政管理者的角度来看,需要他关注的点非常多:比如货品名称、余量、品牌、采购价、保质期……这么多信息怎么管理呢?

想像平时去超市购物的场景,你肯定不会先去找500g的零食,而是先看我要买什么、价格合不合适、成分对我的健康有没有影响……

B端管理也是一样的。首先从使用者的角度判断,各数据项之于B端产品业务逻辑的重要程度是怎样排序的,梳理出的信息大致分为三类:重要信息、次重要信息、辅助信息。 

2.分类处理信息

明确了B端产品的信息重要层级后,从用户的心流出发,对各层级的信息进行设计:
A.突出重要信息

突出并不需要像「腰椎间盘突出」那样格格不入,而利用对比让字重、字号、字色看起来有区别,将重要的数据项突出,让用户看一眼就能感知到,减少识别的时间成本。(想突出不是只有放大而已哦~)

B.聚集相关性高的内容

为什么要聚集相关性高的内容呢?这个问题就跟厕纸为什么一定要挨着马桶一样,都是为了方便用户的下一步使用。

这里可以将关联性高的信息放一起,例如:品牌和名称、采购时间与调整时间操作列放一起,让用户更方便地管理与操作。  

C.隐藏低频重要操作

根据我们平时的使用习惯,是不是常用的东西都会放在显而易见的地方,而一些谨慎又少用的东西则会小心收纳起来呢?

B端产品也存在着一些低频但重要的操作,比如删除。适当地隐藏部分低频操作,既可以降低列表的复杂度让用户专注当前的重要内容,也能避免一些危险的操作出现。比如PC端,可以让删除键在鼠标hover时出现。

3.优化信息呈现方式

对各层级的信息进行分类后,即可开始对信息的呈现方式进行处理,让页面更简单,同时具有辨识度,提升用户的查找效率。

A.数据信息符号化

你现在跟别人聊天,是不是都要加一个表情或者表情包?因为这不但能快速传达出你的情绪,而且也不至于让聊天显得太干瘪、严肃。

将B端产品的部分通识性信息符号化,不但可以丰富页面,也能够降低页面理解的复杂度。例如:进度条、上升下降趋势。

B.融入点缀色,让变化可感知

跟状态相关的信息,可以加入符合常理的点缀色,引起用户的注意,及时跟进,避免出现不知道而延迟处理。例如:耗材消耗量不高时以蓝色表示,随着消耗率逐渐升高颜色也逐渐变化。 

C.灵活运用字体

大多情况下,大家会默认使用系统字体,Windows系统使用微软雅黑,Mac系统使用苹方。有时也会打破常规选择不同的字体,体现特色,让信息更具有记忆点。例如:选择重量感较重/缩短横向空间的数字。 

D.呈现内容的排版方式

横向内容整合后,可以有怎样的呈现方式呢?

一种是常规的展示方式:优势是信息对比方便 

另一种打破常规:优势是信息简洁聚集,重点突出 

让列表的呈现服务于用户的需求,达到真正的好用,从而提升用户使用B端产品的工作效率。

纵向做类比

优化各列信息,提升韵律感

数据行设计完成后,为了让整个页面呈现的数据列有规律,让用户能感知数据呈现出的韵律感,有如下一些方式。

1.对齐与统一

同类型数据的单位符号、对齐方式的统一让某一列数据的对比分析更容易,减少用户的对比成本。 

2.使用留白

行与行之间的数据展示,需要运用合理的间隔,这样能使页面既具有呼吸感,也不会让信息太过分散以至于无法对比。

3.汇总列表信息

列表除了呈现很多数据外,需要考虑用户在看数据时的简单汇总信息,让用户更了解当前的数据。 

用视觉的手段,赋予列表更明确的表达能力,让列表信息自己说话,更易于理解。

最后再给大家整理这样一张“T型思考”对照表。希望“T型思考”能触发你的设计力,为更好的B端产品体验助力。

不过需要注意的是,视觉设计的T型思考方式虽然如此,但最终和不同类型的产品形态有很大的关系(即,业务目标是什么;业务流程是怎样的;核心用户又是谁)

所以设计完后,以小部分核心用户为测试对象,提前了解引导无误、用户认可度,避免上线发布后产生更大的问题。这样才是一个完整的B端产品设计思考流程。

艾体验是一家提供智能交互体验设计服务的公司,面向有需求的企业,根据已有商业模式或者产品痛点,提供商业+科技+设计+体验的产品解决方案。致力于B端产品效能提升、线下空间互动触点设计以及线上产品的增长设计。

正在热招

产品体验设计师  Product UX Designer

智能设计算法工程师  Algorithm Designer

创意工程师   Creative Technologist

简历和作品集投递:hr@aiux.cc

联系我们

Copyright © 2019 艾体验 AIUX