首页

信息流产品个人资料卡如何设计?这些思路供你参考!

雪涛


在信息流产品中,个人资料卡是一个很重要的页面。一方面,创作者通过这个页面展示账号价值,突显账号魅力,引导用户关注;另一方面,消费型用户通过这个页面了解创作者,查看创作者更多内容,是众多消费型用户消费内容中重要的一环。只有把这个循环做好才能长期促进平台生态发展。

这个页面承载着这么多的价值,该如何设计?本篇将以 QB 看点号资料卡升级的设计思路为例,进行分析解答。

前言

在前期分析过程中,我们发现当前版本存在诸多问题。

从数据上看,对比公司内同类产品,关注按钮转化率较低(出于数据保护,数据隐藏)。

信息流产品个人资料卡如何设计?这些思路供你参考!

从样式上看,信息布局较乱,重点不突出。

信息流产品个人资料卡如何设计?这些思路供你参考!

基于以上背景,我们开始对资料卡进行改版升级。

设计前应该思考什么

做任何一个设计前,都应该思考设计目标,否则设计出来的结果没有意义,也缺乏过程依据和支撑。那么资料卡的设计目标是什么呢?这要从资料卡在信息流产品中的使命和价值说起。

一方面,消费型用户通过这个页面了解创作者,查看更多内容;另一方面,创作者通过这个页面展示账号价值,突显账号魅力,引导浏览者关注。

如果创作者能够在资料卡充分展现自己的才华和魅力,带来了更多浏览者的“关注”,那他们就更有动力分享或生产优质内容,进而使产品内容更加丰富;从而吸引更多新用户的浏览、留存。

更多新用户的加入、浏览、留存,让内容生产者有更多的涨粉空间,粉丝规模做起来之后再进行商业化。这样对消费型用户、内容生产者、平台方都有利,进而处于良性循环。

信息流产品个人资料卡如何设计?这些思路供你参考!

信息流产品个人资料卡如何设计?这些思路供你参考!

如何进行资料卡设计

了解了资料卡的使命和价值,设计目标也呼之欲出,作为平台方,我们需要帮创作者解决两个问题:辅助创作者吸粉 & 助力商业化变现

当然,创作者产出优质的内容才是吸粉的关键,平台方只能助攻。但不同的信息流产品有着不同的定位和侧重点,吸引着不同的用户,所以资料卡设计的样式也不尽相同。

信息流产品个人资料卡如何设计?这些思路供你参考!

1. 辅助创作者吸粉

在辅助创作者吸粉这里,有两个维度可以思考:

  • 内容展示维度
  • 用户关注维度

内容展示分析

在资料卡中,有三个大区域:头图区、信息区和作品区。

  • 头图区:指的是顶部的头图区域,这里可以让创作者设置个性化头图,展示个性。
  • 个人信息区:主要是作者的基本信息,包括昵称、账号名、简介、粉丝数、认证信息等…这里通常还承载着一些等级、榜单,属于信息展示和官方背书区。
  • 作品区:主要展示账号发布的内容,这部分通常是浏览者最关注、浏览时间最长的部分。

信息流产品个人资料卡如何设计?这些思路供你参考!

通过对比市面 20+信息流产品,我们发现了一些有趣的规律:

信息流产品个人资料卡如何设计?这些思路供你参考!

① 头图区:越是社区类产品,对头图个性化重视程度越高,而资讯类的产品则不太重视。

从产品功能上来看,越是偏向于社区类属性产品,头图区域越大,可自定义替换的范围也越广。从用户使用角度来看,社区类产品的用户也更爱展示自我,头图替换的比例也更大,风格更多样化。而资讯类产品的创作者大多使用默认头图,并不进行个性化设置,自定义头图的比例很小。

所以我们在设计页面布局时,需要思考自身产品定位以及创作者需求,把有限的空间利用在刀刃上。

信息流产品个人资料卡如何设计?这些思路供你参考!

② 信息区:越是追求多元化收益商业化的产品,信息区承载量越大。

创作者不是活雷锋,想让他长久的留在平台必然需要给到创作者更多收益(收益除了显性也有隐形的,比如 B 站,很多创作者在 B 站发文平台收益相比其他平台少,但因为品牌声量大、氛围好,获得了巨大的关注和曝光,所以即使收益低,创作者也会持续在平台投稿)。

除了流量分成外,平台们也在帮助创作者实现多元化的收益,比如商铺、直播、付费课程粉丝圈等。甚至抖音很多创作者直接把商务合作写在了个人简介中招商引资。所以这个区域,随着多元化商业收入的更多尝试,信息承载量也越来越大。

信息流产品个人资料卡如何设计?这些思路供你参考!

③ 内容区:越是长内容,越倾向于展示更多作品和更多信息;越是短内容,越是“看就完了”。

对比多款产品我们发现,越是长内容的产品,在内容区越是注重效率选择。通常会显示更多内容,且单条内容会显示更多维度帮助浏览者决策是否点击查看。猜测可能是因为内容较长,浏览者通常会花费更多精力在选择上。而越是短内容,把单条内容放大,促进浏览者点击,直接“看就完了”,反正一条也没太长时间。

所以设计资料卡时,需要设计者清晰了解自己平台内容特征以及用户行为偏好,做出更合适自己平台风格的设计。

信息流产品个人资料卡如何设计?这些思路供你参考!

综上,在做内容布局展示时,需要综合考虑产品定位,思考这些区域对于产品和创作者浏览者意味着什么。

比如头图区域,资讯类产品并不重视,毕竟账号还是靠内容说话,即便是放张个性化头图,浏览者也不会因此而关注。而且大家都使用默认头图,个性化无从说起,就更没有什么意义了。

那么如何让头图有价值?创作者愿意为此更换,而浏览者看到能够感受到帐号的特殊性?

笔者提供一个思路抛砖引玉,参考 App Store 的编辑精选:只有精选的 APP 才可以有头图权利,其他 APP 都是默认样式。而稀缺性和被认可,正是人类所追逐和渴望的。如果平台选出一些精选帐号,赋予其设置头图资格。作为创作者,非常有意愿去更换,因为可以体现出和其他账号的不同。浏览者也可以通过头图感受到当前账号的优质属性。

信息流产品个人资料卡如何设计?这些思路供你参考!

用户行为关注调研

既然要帮账号吸粉,那么我需要了解浏览者的行为偏好,知晓浏览者根据哪些内容判断是否关注该账号。这里我们线下调研了 12 名用户,了解他们在信息流产品中(产品不限于 B 站、抖音、小红书、知乎、快手等)进入资料卡后,通过哪些信息和元素来决策是否关注账号。

信息流产品个人资料卡如何设计?这些思路供你参考!

通过访谈,我们得到了 12 名用户的原始表述。

信息流产品个人资料卡如何设计?这些思路供你参考!

我们发现,浏览者在关注账号的时候,主要在意“内容是不是感兴趣” 、“粉丝量多少” 和 “内容领域”。少量同学提到了会关注下作品数,其他信息基本不看。

信息流产品个人资料卡如何设计?这些思路供你参考!

原话摘录:

  • 主要看作者发的内容,把高播放量的看一下,如果都比较感兴趣就会关注。会看一下粉丝量,粉丝量多代表质量比较好,关注不会踩坑。作品数会看一眼,如果作品太少,比如5个以下就不关注了直接看。
  • 只看内容,其他作者资料基本都不看,偶尔看一下粉丝数。教程不看粉丝数,教程如果是我需要的内容,就算粉丝少我也会关注。
  • 主要看作者别的视频,关注主要是为收藏,不看别的只看所有视频。会关注最近内容的播放量怎么样,其他基本不看。
  • 那肯定是看内容是不是感兴趣啊,关键还是看内容,粉丝量和点赞作品数会看一下,但不会作为关注的主要原因。如果粉丝量作品数多的话,关注动力会大一些。其他的都不看。
  • 还是看内容是不是感兴趣。粉丝量分情况,特别需要的内容不关注粉丝量,搞笑类生活类的会看下粉丝量再考虑是不是关注。有一些作者如果只看个别内容感兴趣但整个领域不感兴趣的话不会关注。通过标题大概判断是不是自己喜欢的类型,最主要的还是内容,其他的不看,粉丝量会看一下别太差就行。

而在操作路径上,进入资料卡后:先到作品区查看内容列表 → 拖动页面向上查看更多内容 → 返回信息区查看粉丝量 → 关注账号。呈现先下后上的操作路径。

信息流产品个人资料卡如何设计?这些思路供你参考!

行为路径结合关注决策,有三个关键元素是形成操作链条并绑定在一起:内容、 粉丝数 、关注按钮,且内容为高播放量内容。所以高播放量内容,粉丝数是决策关键,激发下一步关注行为。

信息流产品个人资料卡如何设计?这些思路供你参考!

而且我们在访谈中发现,关注行为也是一个偏冲动行为,用户通常在进入资料卡的几分钟内做出决定,在页面停留时间越长,越不容易发生关注行为。所以在设计中,尽量缩短决策路径,减少决策时间。

基于以上结论我们做了两个方案再次进行测试:

  • 方案1:传统样式
  • 方案2:高播放量内容,粉丝量,关注按钮放置在同一区域,缩短决策路径

信息流产品个人资料卡如何设计?这些思路供你参考!

为什么做一个传统方案进行对比测试也是因为现在很多产品资料卡页面趋同,大家已经形成了认知惯性,而尊重用户习惯也是产品设计中需要考量的因素。接下来,我们又找了 12 名同学进行访谈和测试。

出乎意料的是,大家对于新事物的接受程度很高,有八名同学选择方案 2。虽然只是理论上的选择,并没有延伸到实际行为,但也佐证了大家对于高播放量内容确实存在很高的需求。对于选择方案 1(传统样式)的同学来说,主要是不喜欢横滑操作和不想改变既有习惯。

信息流产品个人资料卡如何设计?这些思路供你参考!

原话摘录:

  • 喜欢方案1,不喜欢横滑,习惯竖着操作,标题清晰
  • 喜欢方案1,横着这样展示好像没有竖着这样展示清晰,喜欢这种长条的样式
  • 喜欢方案2,喜欢这个,重点突出,符合我的习惯,如果高播放量内容都不错我就会关注,省得找来找去了
  • 喜欢方案2,上面这个类似youtube的popular uploads的东西能让你第一眼看出这个UP主牛在哪

不管哪种样式,内容都是重中之重。既然是重中之重,大家也会注意到,有些内容区视频是双列形式,有些视频是单列形式。那么浏览者如何看待这种区别呢?会对关注产生影响吗?

基于两种样式进行访谈,比分最后打成平手。虽然在 2 选 1 的要求下大家各有各的选择,但最后也都表示差不太多,都能接受。从信息利用率上来讲,双列的形态展示的内容更多,而且对视频更加友好,预览图比较大。所以如果是视频内容,可以使用双列大预览图样式。

信息流产品个人资料卡如何设计?这些思路供你参考!

以上是关注吸粉的部分,设计时需要综合考虑产品定位和用户行为特征进行页面布局。

2. 助力商业化变现

商业化能力是创作者与平台形成强关系的纽带。平台为帮助创作者变现,不仅通过各类扶持政策给予补贴, 更是通过整合各类商业资源,不断拓展商业化渠道,打通全流程商业链条,帮助创作者实现内容价值最大化。

一般平台提供商业化有三种类型:

基础工具

  • 商业基础:平台提供流量分成、现金奖励等
  • 商业化功能:打赏、电商功能、内容付费功能、直播功能等
  • 精准推送功能:粉丝分组推送、粉丝必达等

平台政策

  • 扶持计划:出台各类流量扶持政策,赋能变现
  • 奖励政策:MCN 签约、创作活动

资源整合

商业资源整合:整合平台内外部的广告主资源、商业活动资源、投融资服务、新媒体账号孵化等各类资源

资料卡涉及到的商业化展示主要为:电商能力,内容付费,粉丝圈/粉丝付费。当有这些商业化内容的时候,通常占用信息区一行区域,大多数信息流产品多如此。

信息流产品个人资料卡如何设计?这些思路供你参考!

但当多种商业化能力同时提供时,不同的产品给出了不同的解决方案。比如大多数产品合并在信息区的一行,通过横划展示更多,以保证其他内容的露出。毕竟对于浏览者来讲,内容才是最重要的。

信息流产品个人资料卡如何设计?这些思路供你参考!

有一些产品则没有选择合并的方式而每个占用一行空间,与此同时,把创作者的信息展示的也更为详细,可能和本身社区类产品的定位有关,希望更能关注除了内容以外,创作者自身的独特价值。

信息流产品个人资料卡如何设计?这些思路供你参考!

还有一些产品则利用了内容 tab 区域承载橱窗和付费服务,减少信息区的占用,还可以通过逻辑把不同渠道或不同场景的用户引导不同 tab,让浏览者看到更适合自己的内容。

信息流产品个人资料卡如何设计?这些思路供你参考!

总结

资料卡里承载了很多的信息,从创作者的个性展示到内容到商业化变现,需要我们不断平衡每个区域的关系。

别的产品这么做,并不一定适合自己的业务,需要我们找准自己产品的定位,结合当下业务重点去综合考虑。

业务是偏资讯的还是偏社区的?是偏短内容平台还是长内容?有没有提供足够多的商业变现能力给到创作者?商业化能力做的如何?不同模块的用户数据怎么样?只有对现有业务充分了解,才知道哪些是现阶段的重点,才能对一个页面做出更有依据的设计。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:优设   作者:腾讯设计 

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务




消息通知系统设计指南

雪涛

消息通知可以及时地将状态、内容的更新触达到用户,用户则可以根据收到的消息做后续判断。但是如果没有及时将重要消息触达到用户或者滥用消息,则失去了消息通知的初衷。特别是针对涉及复杂任务流程的产品,消息类型繁杂,难以全面盘点消息类型,消息系统的设计就显得尤为重要。

希望通过这篇文章让各位在设计消息通知系统的时候能够更加全面高效。

如何「理解」消息通知

消息通知需要为产品服务,帮助用户快速获取对应的通知信息。收到一条新回复的提示、工作台展示工作进度、朋友的来电,生活中处处是信息的交换。在 App 和网页应用中最常见的信息交换方式则是消息通知。

消息作为一种信息交换方式,抽象其过程,即为“在达到某一触发条件下,由发送方发送消息给到接收方,接收方可针对此条消息提供反馈”。需要包含以下关键因素:

腾讯出品!消息通知系统设计指南

消息触发时间与条件(何时什么事):如按周期重复的时间点,或系统状态变更、用户操作结果等;

消息发送方(谁发现的事):可能是系统、第三方服务商,或者某个用户;

消息接收方(谁需要知道):即接收方,可能是系统中的全部用户,也可能会根据权限划分推送到某个用户群组,或者是某个特定用户;

消息触达渠道(怎么找到他):短信、电话、App 内通知等;

消息通知内容(告诉他什么):短信的文本、电话对话内容、通知消息的文案等消息通知;

消息操作反馈(他可以干嘛):主要分为只读与操作反馈。只读,即当前消息用户在浏览后不需要做更多的操作,主要以了解为主;操作反馈,即当前消息需要用户浏览,且在浏览后做相应的后续操作。

好的消息系统要满足什么条件:

腾讯出品!消息通知系统设计指南

全面:通知的消息项要完整全面,用户才能放心地通过消息通知系统了解消息更新内容;

及时:消息的触达方式要及时有效,在消息相关事件发生后,用户能在第一时间获取到信息并提供操作反馈给到消息发送方;

高效:能通过合理的消息发送途径,允许用户设置及合并相似信息等方式避免过多消息侵扰用户,让用户能够高效处理消息通知。

如何「盘点」消息通知

设计全面、及时、有效的消息通知系统需要对消息的六个关键因素进行全面盘点,通过分步的方式逐步完成消息通知系统的设计。主要分为以下三步:

腾讯出品!消息通知系统设计指南

① 盘点系统中包含的消息项:包含其触发条件、通知来源及通知对象。需要盘点完整消息项从而保证消息系统的完整性;

② 确定消息触达渠道:包含各消息项的触达渠道。让所有消息都能触达到用户的同时,能够让重要信息更易触达,保证消息通知的及时性;

③ 撰写通知内容与操作反馈:包含各消息项的通知内容与操作反馈。让消息内容能够有效地传达给用户,让用户能快速反馈、操作。

盘点的过程,即对消息通知清单的梳理。与产品、研发等团队成员的沟通也将使用该清单。最终目标即完成下方表格的填写:

腾讯出品!消息通知系统设计指南

1. 盘点系统中包含的消息项

当前步骤需要对系统中可能会有的消息项进行完整的盘点。盘点消息项可以通过按消息类型走查方式完成。市场上比较有共识的消息的分类方式主要分为禁止、警告、成功三类。但是在实际设计工作中还需要配合以下的消息分类方式去更完整地盘点消息项:

腾讯出品!消息通知系统设计指南

盘点出的每个消息项

都需要补充以下四个关键因素:

触发条件:结合产品核心场景梳理完整。可通过状态图或泳道图查缺补漏(详见下段内容);

通知来源:可能是某个内部系统,可能是某个用户组,也可能是某个具体用户。用户组的划分需要提前与产品、研发同事沟通完成;

通知对象:可能是全部用户,也可能是某个用户组或具体用户。由触发条件中的场景决定;

重要性:需要与团队沟通得出,可使用“高”、“中”、“低”的分类方式。

盘点完成的消息项使用下表进行整理,方便产品、设计、研发之间的沟通。

腾讯出品!消息通知系统设计指南

用流程图或泳道图查缺补漏:

对于 ToB 或 ToG 类含有复杂状态转换以及任务流的产品,除了使用分类的方式盘点消息项,还需要对照流程图或泳道图查缺补漏,避免消息类型的遗漏。

如,顾客线上购买商品并收取商品的商品相关状态变化如下图所示,每个状态都可对应着一条消息项:

腾讯出品!消息通知系统设计指南

线上购物过程中的消息流程图示意

当系统内包含多角色,且角色间流程有交互时,则可以使用泳道图的方式进行梳理。在泳道图中的每一条状态变更线,都对应着一个状态变更提醒。其中角色间交互的线,由于需要角色主动处理方可进入下一流程状态,这条消息一般会成为一条待办消息。

什么类型的消息不要纳入消息通知系统:

需要注意的是,虽然通知的完备性很重要,但某些消息在前期梳理时就需要从清单中剔除,包括:

  • 单纯问候类消息,如“好久不见”等
  • 不需要用户知道的消息,如系统后台数据更新等
2. 确定消息触达渠道

确定要推送给用户的消息类型后,需要给各消息匹配适合的通知方式。不同的通知方式会有不同的适用场景,可对照下表结合第一步整理的重要性配置消息的触达渠道:

腾讯出品!消息通知系统设计指南

消息触达渠道的配置结果到第一步的表格中:

腾讯出品!消息通知系统设计指南

平衡通知量:

一个好的消息系统需要能有效触达的同时不过分侵扰用户。这就要求我们对系统实际运行中可能会出现的通知量进行预估,并适量调整通知方式,让重要的消息能够更有效及时地触达到用户。最终调整后的消息数量与提醒强度的关系最好能形成如下图所示金字塔的模式。

腾讯出品!消息通知系统设计指南

提醒强度与消息数量的金字塔关系

合并重复消息:

对于出现频率较高,且用户不需及时了解每条消息的消息项,可以通过合并消息的方式减少通知的数量。合并主要有两种方式:合并流程过往节点信息和合并同类消息。

  • 合并流程过往节点消息:对于一些流程类通知,若用户在响应或查看前,流程已经进入到下一阶段,历史节点的信息已经无需了解时,可合并过往流程节点的消息。如淘宝在展示物流时,针对同一订单的物流,仅保留最新的一条。
  • 合并同类信息:对于同类型消息过多,且用户不需要一一查看,只需在用户有需要的时候提供入口查看完整内容时,自动合并同类型的消息,减少对用户的打扰。如 Instagram 在展示用户动态信息时,会合并同一天同一类型的消息。

腾讯出品!消息通知系统设计指南

两种合并消息方式

智能推送:有条件的系统可根据用户行为分析及用户画像,进行智能推送。如基于用户画像按类型推送运营类消息,基于用户接受消息数量,判断是否合并消息推送等。

渠道间消息项的延续与统一:

出于信息持续性的考虑,触达渠道之间有部分关联关系在制定消息触达渠道时需要注意,如:

  • 若系统包含 App、web 等不同端,相同通知类型的消息要保持统一
  • badge 提示需要在应用内消息通知模块有对应消息提示
  • push 消息的文案需要与应用内消息中心保持一致
3. 撰写通知内容与操作反馈

通知的内容需要满足简明易懂的同时,还要让用户能够快速处理。根据大量经验总结,通知内容的撰写可使用一个通用撰写公式:

腾讯出品!消息通知系统设计指南

在应用撰写公式写内容时,需注意以下要点:

  • 重点前置:用户触达的第一场景,可能是手机的 push 消息,可能是多个消息的列表。这就要求在撰写文案时要将重要信息前置,如验证码、还款金额、事件提醒名称等。
  • 敏感信息保护:由于无法确认用户获取信息的场景是否私密。对于金额、个人信息等隐私数据,建议在应用内或其他渠道提供设置项,提供用户自主选择是否在消息通知中包含具体数值。如果要默认显示,需要提前告知用户。
  • 来源信息露出:在邮件、短信等非产品自有渠道推送消息时,用户可能会不确定消息的来源是否官方,需要包含消息来源信息。
  • 提供触发时间:当消息的发生时间对用户后续判断、操作有影响时,需要在通知内容中包含消息发生的时间。

除了以上通用注意事项,由于渠道本身的特征差异,还需注意以下渠道相关的要点:

电话:需要设定客服话术标准,一般需要在会话开始前先告知用户来电是谁、有什么目的。在讲述完通知内容后,还应告知用户如何处理当前信息,如果想了解详细内容该前往哪个渠道了解。

短信-来源平台:由于通知类短信的发送号码可能会由于服务商设置的问题导致有多个发送号码发送给用户,用户无法根据号码判断发件人身份。故需要在短信最开始说明平台来源,建立品牌认知,避免用户错认为是垃圾短信。如:「腾讯科技」***

短信-操作反馈:由于大部分短信为纯文本短信,相关操作反馈需要通过链接或者路径指引的方式提供。若短信包含详情链接,链接最好能设置为保留根域名的短链,如:点击了解详情:cdc.qq.com/d8djei

邮件:与短信相似会有来源可信度问题,邮件内容需包含品牌元素,同时发件的邮箱地址后缀使用产品官方网站。另外需要注意,某些邮件软件会设置不自动下载图片,邮件重要内容不要使用图片。

push 推送(移动端):是消息在移动端的特有触达渠道,由手机系统发送。发送的信息格式会受系统要求有所限制。最新的推送要求可参考相关设计规范文档或接口规范。应用的 icon 与名称系统会自动补充,撰写文案时不用包含。

微信公众号(订阅号/服务号):由于微信对订阅号与服务号的消息推送方式会经常变化,需要确认最新的要求并撰写文案。

在完成通知内容以及操作反馈的梳理后,对消息梳理表格进行更新,补充相关信息:

腾讯出品!消息通知系统设计指南

自此,消息项的盘点已经完成,后续可基于该表格与产品、研发沟通。当业务出现变更时,也需要对表格内容进行同步更新。

如何「设计」消息中心

消息通知的触达渠道中,电话、短信、push 推送的呈现由系统决定。但是若产品有独立 App,往往需要消息中心去承载全量的消息列表。本章会介绍如何设计消息中心。

不同应用的消息中心处理方式受产品定位、应用框架等因素影响,设计差异化较大。但是可以通过按路径分割去简化设计:消息中心的入口、消息列表的组织方式、消息卡片的样式、消息的设置等几个部分。

腾讯出品!消息通知系统设计指南

1. 消息中心入口

主要有底部 tab、个人中心附近的图标入口、个人中心的菜单项等三种入口形式:

腾讯出品!消息通知系统设计指南

消息中心的三种入口

  • 底部 tab:一般适用于产品核心功能中包含大量用户间通讯,或者希望通过强化消息露出来促进用户上传更多内容。对于重要的消息类型可提供数字 badge 作为未读消息数量的提示;
  • 顶部图标入口:一般适用于产品消息数量较少,或消息对产品核心场景的影响较少的情况。一般会在首页的顶部,或个人中心页的顶部有一图标作为入口。图标会包含数字 badge 作为未读消息数量的提示;
  • 个人中心菜单项:一般适用于当产品顶部空间作他用,没有图标入口的位置时使用。

2. 消息列表

从消息中心入口点击后跳转到消息列表。由于消息的即时性,需要按时间维度排列。但是如果产品的消息类型较多,可通过分组合并或者分 tab 的方式提升用户触达消息的效率。

腾讯出品!消息通知系统设计指南

分组合并消息列表

腾讯出品!消息通知系统设计指南

分 Tab 合并消息列表

对于通知类型复杂的系统,还可使用二级列表的形式对消息进一步分类展示,如微信及支付宝,由于其包含大量第三方服务,消息复杂,均设置了二级消息列表帮助用户分类查找消息。

腾讯出品!消息通知系统设计指南

二级消息列表

3. 消息卡片

消息列表中的卡片有两种样式可选,一般在一级消息列表使用小卡片样式,让用户有更高的浏览效率。大卡片样式则用于二级消息列表,或当前应用的消息数量较少时。

腾讯出品!消息通知系统设计指南

消息卡片应用示意

4. 消息中心设置

一般位于消息中心列表页右上角,若可设置项较多,则提供设置入口在二级页设置。一些常用的消息设置项如下:

全部已读:对于消息数量较多,且未读态会影响 badge 的展示时需要提供该设置项。点击后设置列表消息项全部已读。

发起对话:若系统包含通讯功能,一般会在消息类表页提供发起对话的快捷入口。点击后跳转到通讯录或好友列表。

设置通知提示方式:提供按消息类型设置某些通知项的接受渠道、接收时间段、各渠道之间的已读联动等,如微博;或者让用户选择消息通知的精确度,是否包含具体信息,如微信可接收“您收到了一条信息”的模糊消息。

打开消息推送权限:一些应用有一些状态更新或重要的提醒需要用户在系统设置中打开当前应用的通知权限,会包含提示用户打开通知的功能。这些提示需要在用户进行了如“办理事项”、“上传状态”等发起流程的操作后提示。不建议在用户启动 App 时就弹窗提示打开通知。

总结

本文是对消息通知系统设计的初步介绍,希望能帮助到新手产品、交互、产品体验设计师快速了解消息通知系统的内容盘点与消息中心的设计方法,制定及时、高效、完整的消息通知系统。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:优设   作者:腾讯设计 

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



如何从零开始创建新的设计原则?

雪涛

本期提纲:

  • 为什么我们需要新的设计原则
  • 制定新的设计原则
  • 推行新的设计原则
  • 新设计原则的影响

在本文中,我们将分享如何提炼出设计原则,并在团队中引推广实施的。

去年,我们一群人聚在一起探讨了一个棘手的问题:随着 Spotify 的不断发展,我们如何在产品迭代中保持高水平的设计质量?

经过研究和讨论,我们确定了一个方向:为了提高质量,我们需要清晰、有用的设计原则。一方面,我们认为只有定义了 Spotify 的设计原则是什么,才能够帮助团队评估他们是否以 “Spotify 方式” 进行设计。另一方面,我们还希望帮助设计师在讨论设计目标和设计评审时使用相同的评价标准。通过不断更新的设计原则可以实现保持高水平设计质量的目标。

为什么我们需要新的设计原则

为了解决设计无法标准化的问题,2013 年,Spotify 制定了最初的设计原则:内容优先、尽量活泼、建立熟悉感、争取事半功倍、保持真实、恰如其分,这些原则让设计师们在输出和讨论方案的时候有方向可循。有了设计原则之后,我们的设计方案在字体、色彩、图片、板式、信息架构和交互方式等方面都具备了一致性,即使不是设计师也能够对我们的设计产生共鸣。

官方译文!Spotify 如何从零开始创建新的设计原则?

Spotify 在 2013 年制定的设计原则:内容优先、尽量活泼、建立熟悉感、争取事半功倍、保持真实、恰如其分。

但设计原则是需要与我们的业务目标一起向前的,到了 2020 年,Spotify 已经发生了很大变化,我们在播客上加倍发力,我们为消费者提供的不仅仅是音乐,而是包含广播、故事等更多元的音频形式;我们服务的对象,不仅仅是听众,还有艺术家和广告商;我们的设计师团队也不断的壮大,发展到现在已经有近 200 人。

看着 2013 年制定的设计原则,我们问自己:这些设计原则对于我们现在的设计是否还是正确的?Spotify 的设计师们是否真的意识到这些设计原则的存在?答案是否定的。

我们经过对现有设计原则的讨论,发现了以下三个方面的问题:

1. 无法满足不同内容的需求:原本的设计原则,更专注于消费者的音乐体验,然而随着 Spotify 的发展壮大,我们的产品不仅仅是音乐,而是包含更多内容的音频,但这些原则似乎并不适用于我们设计的所有内容。

2. 概念容易混淆:比如 “lagom” 和 “do less”,都有简约的、恰到好处的意思,在表意上存在重叠使得它们很难分辨,在评估设计方案时,我们很难确定从哪一方面评估我们的工作。

3. 数量过多的原则很难记住:根据我们的调研和设计师的反馈,设计师们往往记不住这些设计原则的内容,这也就导致了他们无法很好的在设计实践中应用。

简而言之,旧的设计原则需要更新。

制定新的设计原则

去年,我们工作组的十几名产品设计师和用户体验设计师,在一个协作研讨会上聚在一起讨论如何制定新的设计原则,我们希望团队中的每个人都参与进来,而不是让一个人来决定 Spotify 的设计原则应该是什么。

我们通过以下三个问题,指导我们制定新的设计原则:

  • 我们为什么要制定这些设计原则?
  • 它们是给谁用的?
  • 它们将如何使用?

经过一番激烈的辩论,我们得到了答案:

  • 设计原则是为了帮助设计创造,并为评估设计成果提供衡量标准。
  • 设计原则的核心对象是我们的设计师。
  • 在设计创作过程中设计可以帮助产品设计师做出设计决策;在评估设计时,提供统一的衡量标准,避免以短暂流行风格进行判断。

然而真正的挑战是应该怎样定义新的设计原则。我们在设计时应该追求什么样的价值观和设计属性?产品应该传递给用户什么感受?

对于这些问题,每一位设计师都有自己的观点。我们让所有人将自己对 spotify 的设计原则进行定义,并将这些想法写在便利贴上。我们将这些想法进行总结分类,为了避免重复性的概念,我们把相似的概念归为同一类别,并且让大家对这些观点进行具体的描述,来帮助大家理解他们想要的设计原则。最后,我们将所有的想法都汇集在一个巨大的矩阵图中,通过设计师们的投票来帮助我们缩小范围,确定大家认为合理的设计原则。

官方译文!Spotify 如何从零开始创建新的设计原则?

带有便利贴的矩阵图

通过上面的方式,我们提出了新原则的草案。同时我们也通过与用户沟通,进一步了解用户对于 spotify 设计的理解,根据这些反馈,我们进一步在设计原则的概念细节上进行调整后,确定了新的 Spotify 设计原则:相关性、人性化、统一性。

官方译文!Spotify 如何从零开始创建新的设计原则?

Spotify 新设计原则:相关性、人性化、统一性

1. 相关性

把每个用户作为一个独立的个体来看待。

Spotify 是为每一位用户量身定做的,我们希望 Spotify 具有个性化的感觉。为了给用户提供专享的感受,在设计过程中,我们认真思考我们所展示的内容是什么、展示给谁以及在什么背景下呈现。简单来说,我们会在正确的时间提供正确的信息给特定的人,我们不想要 “一刀切” 的体验。

那么我们在具体的实践中,是怎样体现 “相关性” 的设计原则呢?

举个例子,同样是歌曲 “pure seduction” 的封面,欧美国家的用户看到的画面可能是激情热吻,但对于相对内敛的东南亚国家用户,封面的内容就会以更加含蓄柔和的方式呈现。同样的,印度用户大多数更喜欢听印度语的歌曲,我们在一开始就让他们选择自己喜欢的音乐语言,使用户得到与自己具有 “相关性” 的音乐内容。

我们尊重不同的文化和社会环境,我们希望每一个视觉呈现都能够适合当地用户,能够被当地用户所理解。

官方译文!Spotify 如何从零开始创建新的设计原则?

Spotify 播放列表封面和注册页面的示例

2. 人性化

人性化的设计是可以与用户交流的。

Spotify 是依赖于推荐算法的产品,但这种技术也是基于人的喜好的。Spotify 像人类一样,也会有情感,有自己的思考方式。我们希望用户在使用 Spotify 时,可以有一种 “和人交流的感觉”,如果我们把 Spotify 设计得太工具化,就会失去这种感觉了。我们的每周推荐歌单封面,没有选用精致的照片,而是直接使用用户的个人头像,通过这种方式我们告诉用户 “这是只为你一个人准备的歌单”,还有什么比自己的个人形象更加 “人性化” 呢?再举个例子,在 Spotify 的儿童版本中,我们将创建个人资料的行为变成了创建有趣的卡通角色的过程,“人性化” 的虚拟形象使 Spotify 与儿童用户更流畅的交流。

官方译文!Spotify 如何从零开始创建新的设计原则?

Discover Weekly 封面和 Spotify Kids 应用程序的示例

3. 统一性

统一性可以使线下产品和线上产品实现品牌感。

我们的线上和线下产品的设计风格都应该具有统一性,即使没有过多的说明,人们看到一眼也可以知道这是 Spotify 的设计。统一的设计风格,可以让用户对于我们的产品有一定的熟悉感和信任感。正因如此,我们没有完全抛弃 2013 年制定的的设计原则,去创造新的方向,而是根据之前的设计原则进行修改和优化。为了实现品牌的一致性,我们希望我们所制定的原则是可以在不同设计对象和设计场景中复用的。

下图中是一个营销活动的案例,无论是线下的广告牌、宣传海报,还是线上的活动页面,我们的设计风格都保持了统一性,无论你在线下还是线上看到,你都会知道这是 Spotify 的产品。

官方译文!Spotify 如何从零开始创建新的设计原则?

Spotify 营销活动的示例

推行新的设计原则

提出设计原则是一回事,让每个人都参与进来完全是另一回事。如果我们想让新设计原则持续运行下去,就需要一个执行计划。

在推行设计原则的初期,我们在一个设计团队的工作坊中试运行了新的设计原则。通过观察设计师在实际工作过程中,是否由于运用了新的设计原则更好的完成了设计实践,帮助我们判断这些原则是否是真的发挥作用。之后,我们将这些原则纳入现有的设计活动中 —— 例如,在全员设计会议中,介绍这些原则,并将它们添加到我们的设计手册和新员工的入职流程中。几个月后,我们与 Spotify 的所有设计团队都开展了一系列工作坊。这样,每个设计师都可以学习如何将设计原则应用在工作实践当中。

在工作坊中,我们将设计项目中应用设计原则的案例记录下来,比如,以用户的名字来命名歌单,建立与用户的 “相关性”。我们将这些设计师们在真实的项目中遇到的案例整理到一起,以便其他设计师看到具体案例时,更好的理解新的设计原则。

官方译文!Spotify 如何从零开始创建新的设计原则?

展示如何使用设计原则的卡片

在推行新的设计原则的过程中,我们发现有两点值得注意:

1. 恰当的案例,有助于我们对新设计原则的理解

口头上表达 Spotify 的设计原则是 “人性化” 或是 “相关性” 是很容易的,但是什么样子的设计才是 “人性化” 和 “相关性” 的呢?在推行设计原则时,用例子来说明这些原则的含义非常有用,案例越多越有利于我们对这些抽象设计原则的理解。

2. 周边产品可有助于设计师理解和记忆新的原则

设计原则也可以通过更多的周边产品,如海报、贴纸或其他产品去推广。理解新的设计原则和理念需要很多时间,周边产品可以帮助团队理解和记忆这些原则。为了推行新的设计原则,我们已经开始设计相关的海报、文具等周边产品。

官方译文!Spotify 如何从零开始创建新的设计原则?

设计原则的在线下产品应用的示例(由 deepyellow 和 dribbble 图形组成的样机模板)

在没有 “官方” 的周边产品时,一位设计师把设计原则作为自己的笔记本电脑桌面背景,这也是一个很好的理解设计原则的方法。

官方译文!Spotify 如何从零开始创建新的设计原则?

带有壁纸的笔记本电脑,壁纸上写着设计原则:相关的、人性化的、统一的。

新设计原则的影响

我们推出了这些设计原则后,有什么变化呢?

1. 新的设计原则更容易被大家记住和应用

现在,大多数设计师都意识到了 Spotify 有设计原则。根据我们的设计行动小组最近的一项调查表明,设计师们已经了解了 “相关性、人性化和统一性” 的设计原则,并且在设计过程中,设计师们也会考虑这些原则。这表明新的设计原则与我们之前的六项原则(内容优先、尽量活泼、建立熟悉感、争取事半功倍、保持真实、恰如其分)相比,更适用且更容易被记住,也更容易在实践中应用。

2. 为设计评审建立了统一的标准

设计师有时在设计评审时会参考这些原则,但在这方面还有有待改进。在评审期间,设计师仍然需要有意识的参考设计原则。随着时间的推移,我们希望这成为设计师的本能反应。

我们开始制定新的设计原则时,目的是帮助设计师提升设计质量。那么我们的新设计原则是否使设计质量有所提升呢?现在说还为时过早。但我们希望 “相关性、人性化和统一性” 可以传达出 Spotify 的产品目标,这些原则能够不断提醒我们做得更好。

总结

设计原则不应该是一成不变的,设计原则需要根据我们的产品目标的不断发展进行优化更新,不断适应新的设计环境和设计对象,以持续保持高质量的设计输出。

好的设计原则应该是更容易被大家记住,并在工作实践中应用的。好的设计原则可以帮助我们在工作中做出正确的设计决策,在设计评审中建立统一的标准。相比设计原则的制定,设计原则的推行也同样重要,合理的推行方式可以使设计师真正的理解设计原则,并能够像本能反应一样在设计实践中应用。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:优设    作者:腾讯设计

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



防呆设计——10个防错的通用设计原则

雪涛

防呆(日语:ポカヨケ poka yoke),是一种预防矫正的行为约束手段,运用防止错误发生的限制方法,让操作者不需要花费注意力、也不需要经验与专业知识,凭借直觉即可准确无误地完成的操作。

而说到防呆设计,在各行各业都应用得非常广泛。为了避免用户在使用产品时不小心犯错,产品在设计时都会加入“防呆设计”。防呆设计,就是通过设计的方法来实现防呆,来帮助尽可能多的人进行“无脑操作”的方法。当然,防呆设计如果做得不好,就变成了招呆设计。

今天老王就跟大家来分享一下,在UI界面的设计中10种防呆设计原则。


1.阻断性原则




2.保险性原则



3.自动原则



4.相符原则


5.顺序原则



6.隐私原 



7.重复原则



8.提示原则



9.错误提示



10. 缓和原则


如果你细心观察你的四周,就会发现生活中很多细节都运用到了防呆设计。今天跟大家分享的这10种防呆设计的原则其实更是一种方法总结,具体如何运用还需要大家带入到实战中多多练习,在产品遇到错误时,想想该用哪种方式解决。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷    作者:micu设计

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


兴趣电商,是新机遇还是伪概念?

雪涛

编辑导语:如今,电商的发展如火如荼,我们的生活已经离不开电商平台。随之带来的是丰富多样的选择,消费者可选择的种类更多了。但消费者的需求也在发生着变化,兴趣电商的机会也来了。如何在兴趣电商中拔得头筹,脱颖而出?我们一起来看看吧。

作者 | 周晓奇

编辑 | 子夜

来源 | 连线Insight(ID:lxinsight)

“过度丰富的商品对于消费者来说,或许是一种恩赐,或许是一种诅咒。”在《品类杀手》一书中,美国著名零售业研究专家罗伯特·斯佩克特提到。

经过十几年的蓬勃发展,电商生态已经足够丰富,如今人们足不出户就可以购买到市面上绝大部分商品。

但电商在丰富消费者物质生活的同时,也出现了商品过度丰富、信息过剩,用户反而会因此感到疲倦,货比三家也颇费精力。

这也让“推荐商品”成了新的商机。从社交电商,到目前依靠内容吸引用户购买行为的电商生态,都是“货找人”的场景。

据招商证券发布的《直播电商三国杀》报告显示,从2015年开始,以短视频、直播为主要载体,依托优质内容激发消费者兴趣的电商生态,在国内突然兴起,并呈现爆发式发展。

图源招商证券报告

今年2月,中国互联网络信息中心发布的第47次《中国互联网络发展状况统计报告》,其中数据显示,在电商直播中购买过商品的用户已经占到整体电商直播用户的66.2%,其中17.8%用户的电商直播消费金额占其所有网上购物消费额的三成以上。

通过短视频、直播,用户发现并了解了商品,而优质的内容则激发了用户潜在的消费需求。

这种电商生态,用兴趣电商表述更为准确。

不过,颇受争议的是,在国内电商生态如此繁荣的环境下,兴趣电商是涌现的新机遇,还是伪概念?

商家、品牌商们已经在用脚投票,越来越多的品牌正在组建独立的兴趣电商团队。

据连线Insight不完全统计,美的、珀莱雅等品牌都在内部搭建了专门的直播团队,三只松鼠有十余人的直播运营团队,良品铺子甚至还专门为抖音电商渠道单独注册了一家公司。

在技术的不断突破下,电商生态也随之风云变幻,而兴趣电商的出现,或将成为当前短视频平台在电商领域突围的关键。

一、用户消费习惯变了,电商的新机会是什么?

时代浪潮滚滚向前,电商世界也随着用户习惯的变化而风云变幻。

在最早期,人们希望买到自己需要的东西,搜索式电商满足了这一阶段的用户需求,解决了购物渠道和价格信息不对称的问题。

搜索电商时代解决了“人找货”的问题,而社交电商时代很快进入了“货找人”的阶段。

在新的阶段,出现了借助社交流量激活的电商生态。在社交电商中,人的价值开始发挥重要作用,通过用户与用户建立联系,进而推荐商品,极大地提升了用户对不熟悉商品的信任感。

更关键的是,在社交电商生态中,产生第一次交易后,真正的裂变才刚刚开始。通过社群或个体联系,社交电商可以覆盖单个用户所有生活必需品。

由此,专业的社交电商玩家陆续诞生,开始有了与传统电商分庭抗礼的实力。

可见,跟随用户消费习惯的变迁,在不同阶段都会诞生不同的电商模式。

那么目前,用户出现了什么新的消费习惯?电商领域还有什么新趋势?

通过观察用户可支配收入、规模,以及日常高频使用的软件,或许能够看到正在诞生的新机会。

如今,随着全国居民人均可支配收入的连年增长,人们的消费习惯在不断发生改变。

据国家统计局数据显示,2020年,全国居民人均可支配收入为32189元,比上年名义增长4.7%,扣除价格因素,实际增长2.1%。其中,城镇居民人均可支配收入43834元,增长3.5%,扣除价格因素,实际增长1.2%;农村居民人均可支配收入17131元,增长6.9%,扣除价格因素,实际增长3.8%。

与电商刚崛起的时代不同,如今网购已演变为一种基础消费形式,成为大多数用户日常生活的基础组成部分,而此时大部分用户已经跨越了生存需求阶段,越来越愿意为自己的兴趣付费。

抖音电商总裁康泽宇提到,当前用户的消费结构发生了升级,早期大众消费时代,消费者需要什么买什么,现在消费者生活富裕了,出现了很多精品店、Shopping Mall,消费者逛街过程中,没有什么特别明确的需求,只是看到什么喜欢买什么。

据中国网络视听节目服务协会发布的《2020年中国网络视听发展研究报告》(以下简称网络视听报告)显示,我国短视频用户规模已经达8.18亿,占网民整体的87.0%,其中,抖音稳居行业第一梯队。

在报告进行的专项调查结果中,其中46.9%的用户每天看综合视频的时间在1-2小时,对于短视频而言,这一数字为34.8%;此外,有16.1%的用户每天收看综合视频的时长在2小时以上,对于短视频而言,这一数字为18.2%。

从各项维度来看,短视频已经成长为互联网行业第一大用户时长、流量和内容的聚集地。

这意味着,很多用户的喜好在短视频这个巨大的内容平台上展示,他们对感兴趣的内容点赞和评论。

根据用户喜爱的内容,发现用户的潜在需求,给他们推荐他们感兴趣的商品,这是兴趣电商最大的特点。

但要做好这件事并不容易,当消费者的需求不明确的时候,商家要怎么帮助用户发现潜在需求?平台又怎么帮助商家将商品推荐给感兴趣的人?

二、兴趣电商,重在兴趣

兴趣电商,真的能带来成交吗?

兴趣电商对应的消费特征是,用户存在潜在的消费需求,但并不知道真正契合自己需求的是什么商品,或者说,在海量的商品信息、层出不穷的新科技新产品面前,消费者不知道自己的兴趣和需求究竟应该以怎样的产品形态出现。

而在用户观看短视频或直播的过程中,丰富而生动的内容会激发出用户潜在的消费需求,从而转化为商品订单。

在招商证券的《直播电商三国杀》报告中提到,直播带货能够带动观看用户的消费欲望:超过60%的用户表示直播带货能够非常大或者比较大地引起消费欲望。

抖音创作者马玲敏最先感觉到了这一趋势。三年前,马玲敏只是在朋友中最先玩抖音,平常拍摄的也都是自己上下班的日常,而在一次无意中,她拍摄了一条云南特色美食”油炸玫瑰花”的视频,这让其一夜涨粉五万。

当地习以为常的食物与乡货,在外界看来却是新鲜事、新鲜好物。马玲敏捕捉到这种变化后,开始通过短视频和直播,将更多云南的特色乡货传播给更多地方。

2020年,马玲敏与团队小伙伴,走了上万公里路,探访了30多个云南村庄,在传播云南特色乡货的同时,也卖出了2.5万件当地特色美食,年销售额达到123万元。

马玲敏的案例,正展现出兴趣电商的独特性与商业价值。如果没有抖音短视频和直播,马玲敏或许还是一个幼儿园老师,而没有她的传播,全国各地的用户也不会知道众多云南特色乡货。

通过短视频和直播,货找人的路径得以实现,而依托优质的内容,才是真正推进兴趣电商诞生并发展壮大的重要因素。

更多的创作者,正在短视频平台上输出着优质的内容,而这些内容,都蕴藏着商机。

只要在工作室内,陈凯拿起一把锤子,就能敲敲打打一整天,但他不是修理工,而是一位中国传统甲胄爱好者。

传统甲胄,图源抖音账号殿前司-胖虎

作为中国铠甲爱好者社团“殿前司”的发起人之一,2018年,陈凯注册了抖音账号,开始通过短视频的形式,让那些曾经只存在于壁画上、书籍里的传统铠甲“活了起来”。

在他的短视频中,包含了从传统甲胄的整体展示,到制作过程、盔甲相关的历史文化知识。

在现代追求高科技、新技术的潮流下,陈凯为喜爱甲胄的玩家,开辟了一个小小的天地,而网友在陈凯的短视频和直播当中,也找到了自己对传统甲胄的热情,成为了资深爱好者,积极地消费、传播着相关工艺作品和文化。

据连线Insight了解,如今在抖音上,手艺人的比例越来越多。原本,这些手艺人制作的工艺品无人问津,而通过抖音等短视频平台,这些手艺人甚至实现了年入百万。

追根溯源,这些手艺人能够崛起的关键原因之一是,他们越来越习惯并擅长使用短视频渠道。

相比图文内容,丰富的视频内容更为通俗易懂,理解短视频内容的门槛也就更低,由此吸引并带来了更多元化的用户群体。

据网络视听报告显示,截至2020年6月,我国网民较2020年3月新增3625万。新增网民中,15.2%的人第一次上网时使用的是短视频应用,此外,新网民对短视频使用率为77.2%,较2018年底增长10个百分点以上。

对手艺人而言,他们创作的内容天然具有稀缺的趣味性,而这种趣味性内容一旦匹配到相关爱好者,就有了商业变现的可能。

可以说,短视频和直播带货,将商品展示变得更加生动、直观,而这也是推动兴趣电商兴起的时代背景。

根据第三方测算,兴趣电商的GMV到2023年大概会超过9.5万亿,整个电商行业会有越来越多的参与者转向兴趣电商。

三、风口渐起,谁能突围成功?

兴趣电商的想象空间很大,但想吃到这块蛋糕得有真实力。

需要比拼的要点,包括了平台创作者的数量、用户数量、内容的丰富和优质程度、推荐分发技术。

只有这些都具备了,才能同时服务好用户和商家,在激烈的电商竞争中实现突围。

对于商家而言,兴趣电商的崛起,意味着更严峻的考验,其不仅需要挑选出符合用户兴趣的商品,还要通过丰富的内容来展现该商品的趣味性,但这也意味着有更多发展与崛起的机会。

首先最直观的,就是获得新客。

在流量普遍高昂的情况下,商家获客的成本居高不下,兴趣电商显然是一个值得尝试的渠道。

据康泽宇透露,抖音平台的商家反馈,抖音电商85%的消费者都是新客,这意味着越来越多的消费者,开始涌入兴趣电商生态。

当前,据抖音官方数据显示,截至2020年8月,包含抖音火山版在内,抖音的日活跃用户数已经超过6亿。

在这个用户数量的基础上,只要结构合理、运行得当,其未来发展空间足够广阔。

加华资本创始合伙人宋向前曾提到,现在年轻人受到非常好的教育,他们的视野更广阔,而且作为数字经济原住民,这一代年轻人掌握了很多信息,填补了信息差距。

庞大的年轻群体,也有更高的消费力。

据第一财经商业数据中心发布的《2020Z世代消费态度洞察报告》显示,在中国,Z时代的开支达4万亿人民币,占全国家庭总开支的13%,同时Z时代人群更愿意为自己的多元兴趣而买单。

Z时代消费规模,图源2020Z世代消费态度洞察报告

可见,在不久的将来,随着Z时代逐渐成为社会重要支柱,更有趣、精准,内容质量更好的兴趣电商,可能将改变整个电商产业以及重塑其中各个环节。

但如今,国内兴趣电商市场还在发展初期,与传统电商生态依旧有很大差距,同时兴趣电商要想避免仅停留在概念层面,平台应该有耐心、有远见,重视治理、重视质量,重视单纯的GMV数字之外更切实的用户体验,如此才能让兴趣电商真正成为增长引擎。

更为重要的是,作为电商生态中的新势力,兴趣电商不仅需要保证商品的内容有趣,更需要确保商品质量,保障每个消费者的购物体验。

看起来质量好,拿到手的产品不低于预期,这才能真正让感兴趣的用户,沉淀为忠诚粉丝。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:人人都是产品经理   作者:米可

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



页面加载方式介绍

雪涛

网易新闻




Pinterest

Artand



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷    作者:WseSteven 

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务




数据可视化--如何应用这12种图表

雪涛

怎样设计图表才能准确传达数据故事,设计的过程中需要注意什么?下面介绍这12种图表是如何应用的以及它们的优缺点

图表设计原则

怎样设计图表才能准确传达数据故事,设计的过程中需要注意什么?总结了几个设计图表的基本原则

1.确保准确性

数据可视化的设计首先需要始终保持数据的准确性和完整性。通过使用清晰的标签、准确的轴线等精准的的展示数据,使数据时刻都是真实可信未修饰过的,不能为了修饰美化数据而歪曲混淆信息。

2.提升用户体验

为用户浏览数据提供上下文标识有助于用户快速感知数据,设计时要考虑到用户现有的心智模型——这些心智模型可能由广泛使用的工具塑造而成,创建出色的可视化体验可使用标志性的功能引导用户找到他们需要的东西。以帮助感知快速响应的系统。

3.突出重点

减少认知负担使用户专注于主要的信息上,需要对整体视觉进行降噪处理。最大化数据信息的呈现比率并避免设计过多无关的图形元素。应用颜色促进图形的理解:标签、分类、突出显示或度量;帮助用户理解层次结构、数据方向和关系。


12种图表应用方式

下面介绍12种图表,应该根据什么样的场景结合哪种数据结构使用,以及是否存在可替代的方案等。其中有几种是在实际使用中并不常用的类型,大众对这类图表的理解并不多,我们只有在理解图表的含义及功能才可快速应用在设计中。

1.气泡图

气泡图也是散点图的一种,其拥有多元变量,除 X 轴和 Y 轴所代表的变量值外,每个气泡的面积代表第三个值。

缺点:气泡的大小是有限的,太多的气泡会使图表难以阅读。

设计时需注意:

a. 选择合适的气泡大小,不可过大或者过小,太的气泡容易遮挡到其他气泡不便于选择查看被遮挡的详细数据;太小的气泡难以选择

b. 不要使用奇怪的形状,均采用同一种气泡类型仅通过颜色做区分即可;无需做太多造型,多种造型结合不够直观难以区分种类


2.热力图

热力图用于指示区域内每个点的权重。除了将地图作为背景层外,还可以使用其他图像。热力图中的颜色通常与密度挂钩,每个颜色代表一个数据区间,通过使用颜色的对比来表示地理区域或数据列表的密度分布信息。

如何设计?

a. 使用简单的地图轮廓: 少量的留白轮廓可适当区分个区域边界,大量留白轮廓使边界过于清晰使各区域有割裂感的会分散注意力。

b. 使用简单的图案:图案过多容易干扰阅读,尽量不使用图案,如果必须要用使用1-2种即可,过多则难以驾驭;

c. 使用合适的颜色: 强烈的颜色会导致视觉负担,难以区分轻重缓急。使用单色或相近色,并调整阴影以区分区域更好。

d. 选择合适的数据范围:数据范围区间应该是均等的,而超出范围的数据可用 +/- 表示。

这些是设计热力图时需要注意的地方,适用于大多数情况,当然这也不能作为绝对的标准,需要具体情况具体分析。


3.桑基图

桑基图显示了从一个指标到其子级指标的流量及比例。在流程的每个阶段,节点可以组合或分割路径。两端的节点宽度显示其数值大小,因此节点越宽,占比越大。可用于财务、管理和能源分析或代表产品的生命周期。这种类型的可视化可用于描述实体从源头到终点的流程

优点:对于文字流尤其有用:金钱、货物、时间、选票等,但也可用于许多其他目的。通过连接流线可以直观的区分变量的聚散关系。

缺点:桑基图只能通过节点、连接和数值展示简单的数据故事。不能从中推导出更复杂的关系。


4.华夫饼图

华夫饼图是一个非常有趣的图表,通常由100 个方块组成一个整体,因此它可以根据指标与整体的关系进行着色或填充显示指标的占比情况,就像饼图一样,同时它也适合显示单个百分比。

优点:它能够显示整体的各个部分并比较单个百分比的多样性,指标比例能够更清楚地通过色块面积表示。

缺点:涉及太多指标时颜色区分变多使展示变得过于复杂,无法直观看出单个指标的面积结构,因此适合用在只有少数指标的展示


5.矩形树图

当画面中需要多次出现饼图或环形图展示指标间占比情况时,重复元素过多用户阅读时更加如意感觉到乏味,此时可以采用矩形树图展示占比,通过使用色块面积比例来区分指标间占比大小情况。

优点:使用区域空间而不是角度显示数据,当类别超过五个时(避免有时难以标记的饼图)以及可视化类别内的子类别,树形图比饼图更有用。

缺点:此类图表应用不够普遍,可能有大量用户对这种图表形式不太了解。


6.旭日图

旭日图是树图的一种替代方案,采用圆环形式表示分层数据信息。层次结构从内圈到外圈扩散,其展示形式像太阳一样由中心向四周发散。圆环的每个指标被切片对应一个节点,圆心是根节点,在出现多个层级换结构时通过圆心切换回上一层级。旭日图在用色上最好采用不同深浅的颜色来表示父子级结构在色调上保持一致性,使用户能够直观的看出层级间的关联关系。

优点:可以显示层次流以及整个关系的一部分

缺点:如果配色方案不正确,那么理解图表就会变得困难。此外,过多的切片会使图表拥挤且难以阅读。


7.靶心图

同样是占比图的一种,与常见饼图不同之处在于,该图的指标间没有关联即占比百分数相加不等于100,但又需要同时查看指标的占比情况,因此需要采用这种形式进行对比分析

优点:适用于指标间比较分析,视觉上较为直观;

缺点:因层叠环形过多无法在图表上加大量文字辅助展示


8.热词云

热词云是展示文本数据的可视化形式,由大量关键词组成的云状彩色图形。通过关键词的大小颜色等区分词语的使用频率以及重要性,可以快速帮助用户感知最突出的关键词。

优点:能够快速获取关键词信息,可通过热词快速检索所需信息

缺点:因热词云需要大量的数据支撑,对数据依赖度高,如果数据过少效果则不明显,不适合精确分析。


9.河流图

河流图是显示指标的大小或比例如何随时间变化,“流线”的垂直宽度表示该实体的大小。可以通过使用固定比例查看所有指标的整体大小的变化;也可以使用相对比例以某一项指标为参照目标,其他指标的值与此做对比;若所有指标始终达到 100%呈现的效果类似于面积图。

优点:可查看新指标的出现而其他指标消退的速度,整体的趋势发展状态比较直观。

缺点:虽然看趋势发展方向比较直观,但是详细的信息阅读起来较为困难。


10. 瀑布图

瀑布图通过对初始值进行多次加减运算来呈现达成某个值的运算过程。在瀑布图中,需定义好颜色的含义,不同的颜色用于显示不同的操作过程,例如绿色表示加法,红色表示减法,蓝色表示所有操作后收到的总值。这里起始值和最终值之间的所有值都是浮动的。

优点:快速查看在上一数据的基础上当前数据的变化情况

缺点:使用此图表是只能表示过程的流程


11.仪表盘

仪表盘是一种物化图表常用在时钟、汽车仪表等,通过指针角度代表当前数值进度。它可以直观地表示一个指标的进度或实际情况。一个仪表板仅能表示一种含义,若出现两种含义的仪表尽量分开展示,

优点:仪表适用于间隔之间的比较。

缺点:不适合用在具有多个分量的数据结构


12.甘特图

甘特图直观地显示了任务的时间区间、实际进度以及与需求的比较。因此管理人员可以轻松了解项目的进度情况。

优点:适合快读查看项目进度、状态随时间变化、项目流程等时间管理类信息

缺点:可查看整体情况,详细细节还需进行具体标注


总结

图表的类型多种多样,实际项目中使用何种图表需要根据数据间的关系来决定,如果画面出现同类型结构关系的频率过高想要增加画面的趣味性减少阅读的疲惫感可以通过改变图表的颜色进行区分,或者变换图表类型,有部分图表是可以替换使用的,例如:饼图表示占比关系,可以换成南丁格尔玫瑰图或环形图,也可换成上文所提到过的华夫饼图、矩形树图。因此在设计时可以不用太过于局限在图表的结构上,可以在其他方向进行优化。



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷    作者:胖kuan 

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务






用研成熟度的5个灵魂拷问

雪涛

最近一系列的对话让我意识到,类似于用户体验成熟度模型(UX Maturity Model),我们同样需要一套设计研究的成熟度模型(Design Research Maturity Model)。

在我看来,将某一领域的成熟框架死搬硬套地应用于所有企业,而忽略企业自身的使命或业务结构,是毫无帮助的。这种过度简化,甚至会导致企业自嗨式地以为自己每一步都做到了。

总体的能力成熟度模型(overarching Capability Maturity Model),沿用自美国国防部(Department of Defense),不过目前为止依旧是一个尚未被验证的框架。可能不像通常意义上讲的“硬技能(hard skills)和软技能(soft skills)”那样广为人知也弊端明显,但确实值得商榷。

因为任何值得做的事,都值得去质疑是否真值得去做。

因此,对于组织中真正想要通过评估产品和系统设计而持续探究领域潜能的个人,我提出这5个探索性问题。(最终,我会探索出一些类似节日五角星那样比较直观的视觉符号来展示每一个维度的进阶梯度和它们所代表的含义。)

 

5个灵魂拷问

这5个问题能帮你衡量所在组织做出更好设计研究的潜力,并让你在精准表达和实现组织目标上做得更好。

1. 你所在的组织中,让每个人敢于承认TA对于某件事的无知,在多大程度上是安全的?

To what extent is it safe for anyone in your organization to admit they don’t know something?

我之前有提到过这一点,如果一个人不承认自己知识欠缺时,是不可能虚心学习的。当组织内越多的人感觉到承认无知是安全的时,就越容易让你的组织处于持续学习并能毫无障碍地分享洞察的状态。

 

2. 在选择解决方案之前,探究多大程度上是从明确问题开始的?

To what extent does inquiry start with identifying the question before picking a method?

很多组织偏执地认为定量数据本质上就比定性数据更有价值,或是条件反射式地运用用户访谈和问卷调研去回答任何类型的问题。你要解决的问题会告诉你什么是最好的解决方案:是去阅读文献报告,或是做个问卷调研,或者做一轮访谈。你需要在调研前,先描述清楚问题。举个例子,如果你已经接受的实践方案是在烤箱内放入一把尺子看它是否温度足够,那么,你放多少把尺子都无济于事。

 

3. 跨职能和部门识别和共享问题,在多大程度上是组织的优先事项?

To what extent is identifying and sharing questions across disciplines and departments an organizational priority?

我们花了很多精力去建立知识库(research repositories)和知识分享,却没有花足够的精力让每个员工去理解一个组织需要知道的知识以及为什么需要知道。部门墙和职能墙持续存在。(比如为什么要将市场研究和产品研究区分开来?)跨职能和部门的协作探索(Coordinated inquiry)是效率和创新思维的源泉。围绕某个问题讨论并达成一致也能增进合作,因为个体和团队都不会再为了争夺一个神话般的胜利而争论不休。

 

4. 组织内各个层级的决策逻辑在多大程度上是清晰的?

To what extent is the basis of decision-making clear at every level?

我们擅长对外提问,却很容易忽视企业内部的现实。组织本身就是组织制定决策的社会背景,而这些决策工作也应该能被组织内想弄明白和受影响的人明确理解。

 

5. 通过系统研究产生的洞察结果,在多大程度上为决策提供了依据?

To what extent do the insights that emerge from systematic inquiry inform decision-making?

这是最终测试。如果设计研究产生的洞察容易被管理者忽视,那不论研究本身有多么稳健强大,都会毫无意义。

一种从目标(goals),到问题(questions),再到在明确的证据标准内运行的洞察力(insights operating within clear standards of evidence),所形成的功能反馈闭环,应该是每个组织的愿望。


翻译:贾婷   审校:LilyZhou
原作者:Erika Hall

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。


分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


B端数据可视化设计指南(信息图表篇)

雪涛

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

在如今的工作中(尤其是 B 端)越来越多的会开始出现数据可视化的身影,对于一部分小伙伴来说这个概念是较为陌生的,面对这道无形之中提升的“门槛”我们常常会表现的手足无措。所以,为了让大家对于数据可视化不再那么束手无措,我希望能通过这篇文章和大家一起交流学习,解决一些属于我们共同的问题。

那么我们还是老规矩,想要了解一个事物首先需要知道的是它的定义。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

数据可视化的基本信息

1. 数据可视化的定义

较为笼统的来说数据可视化是一种由图形、图像、数字等元素组成的语言用于解释、呈现目标数据之间的关系。从这个定义上来看,数据可视化从外观层面来说是与图形、图像这些视觉元素密不可分,这也是数据可视化最为明显的特征。

而结合我们实际的生活与工作来说,数据可视化是一种以图形符号为主要表现形式,将不可见的、抽象的、复杂的、枯燥的、专业的、不直观的数据内容,有趣的、浅显的传递给用户的有效手段。用户可以通过这样的手段完成自己的目标(例如对选定范围内的数据进行分析,发现数据的周期与规律、迅速找到自己目标节点中的关键数值、对比几组数据以了解当下研究对象的情况等)这也是数据可视化最为明显的价值。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

2. 可视化发展简史

关于可视化的发展史上可追溯至 1950 年,当时人们利用计算机创建出了首批图形图表,可以说是数据可视化图表最为早期的雏形,而在 50-60 年代的可视化中又以查尔斯·约瑟夫·米纳德的《1812-1813 对俄战争中法军人力持续损失示意图》为代表。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

该图描绘了拿破仑的军队自离开波兰到俄罗斯边界后军力损失的状况,也是后世分析拿破仑对俄战争的重要数据分析资料,后来这种带状图被称为“桑基图”用来解释能量的流动。

而可视化真正被提到一个应用理论的高度是到了 1987 年布鲁斯·麦考梅克和马克沁·布朗所编写的美国国家科学基金会报告《Visualization in Scientific Computing》(科学计算之中的可视化),其意在强调了基于计算机的可视化技术方法的必要性,此时的概念已经与现在我们所接触的工作中的数据可视化是非常接近。

到了 90 年代初人们发起了一个称为“信息可视化”的研究领域旨在为许多应用领域(科学、商业、行政、财务、数字媒体)之中对于抽象的异质性数据集的分析工作提供支持,与前面提到的“科学可视化”交叉形成了现在耳熟能详的“数据可视化”,此时这个词汇才慢慢的被更多的专业领域的人所接受,并在之后互联网的不断发展中扩充着自己的分支。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

3. 为什么会使用数据可视化

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

目前大量开始使用视觉可视化的原因其实非常简单大致的原因可以分为需要处理的数据量太大了和人脑不够用了。

据不完全统计 IBM 公司每天有 2.5 亿字节数据的吞吐量,麻省理工学院的研究科学家 Andrew McAfee 和 Erik Brynjolfsson 教授指出,如今在互联网上传递的数据量比过去 20 年的总和还多,而且根据 IDC 预测,到 2025 年将有 163 万亿 GB 的数据。

这是非常惊人的,而这么多需求的数据量单凭人脑的计算能力和处理能力来说是完全无法与之匹配的,研究表明人脑很难同时处理 5 组以上的抽象数据,所以这种单线程的处理方式就决定了需要借助外力。

而对于用户尤其是决策层的用户来说在现实的工作场景中经常需要同时处理超过 5 组以上的数据并需要对其建立精准的分析模型以便于做出最准确的决策所以基于这样的需求,数据可视化设计氤氲而生。

4. 数据可视化的优势

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

基于数据可视化的需求来看,数据可视化的优势是显而易见的,可以概括为两点:认知减负和传递赋能。

认知减负是使用者在使用数据可视化工具时候的最直观感受,当所面对的庞大的、复杂的枯燥海量数据集变成了图像化、通俗化、形象化的视觉符号时,我们会本能的放下对于面对冰冷数据时候的抗拒和戒备,这是因为人对于一目了然更加接近自己熟悉的有趣事物的时候,会更为亲切和愿意去主动理解。而且被处理过、规划过的简洁直观表现形式,能更为直接的让使用者看到数据与数据之间的关联,进而分析出其潜在关系,在人对数据的认知这个环节上降低了识别成本和分析成本。

传递赋能上图像传递更接近人类最本能的获取信息的方式,比起文字来说图像更像是一个解密的步骤,通过解开文字描述这重“密码”将最本质的信息进行呈现,而且对比文字,图像所能够承载的信息其实更为广泛,而且人类读图的效率要远远高于阅读文字。

无论是一个约定俗成的语义符号形象还是符合语境的配色都能够起到比文字直白表述更为强烈的深入人心效果,并且图解的形式并不受限于语言的障碍,极大的降低了沟通成本。

5. 使用目标

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

基于用户的使用目标来说,使用数据可视化其实就像是一个侦探用“蛛网图”辅助自己梳理思绪进行破案的过程:将一些有关的,但是较为零散信息数据用一根根线索穿插起来,形成体系化的联系,方便使用者迅速把握各个节点之间的关系进行推导。

所以说我们在设计数据可视化的时候并不是对我们拿到的数据的无脑映射,而是要基于用户的目标经过一定的处理和优化后才能进行呈现,随时记住我们是给用户在打辅助,所以我们每一步的设计一定要基于用户的思考。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

用户的期望是能够高效、清晰、简洁地完成数据的对比、关键节点的查询、每组数据之间的分析等一系列交互,提升自己的工作效率,降低自己的学习和使用成本。

6. 应用场景

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

数据可视化的应用领域较为广泛涉及医疗、统计、管理、金融、娱乐、人工智能等一系列领域,在 UI 的设计中我们最常接触到的包括:PC 后台的数据概览、数据可视化大屏、游戏 UI、后台实时监控等。

设计师们的任务

当我们大致了解了数据可视化的历史、使用原因、优势、用户目标、应用领域后下面就要切入我们设计师最为关心的话题:我们在设计中的任务。

1. 设计难点

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

数据可视化作为一门跨领域的学科,本身对于从业者而言就有着一定的综合素质要求,但由于国内教育并没有垂直教学学科,所以在现在的阶段从业人员一部分由纯视觉设计专业的同学组成,另一部分由纯工科类型的专业的同学组成。

于是这就导致了非视觉设计师在进行设计时,会将全副精力放在强数据的准确性、合理性上,从而让视觉的易读性上有一定的损失,表现形式也较为单一枯燥,视觉感官较差,反观视觉设计师通常会将数据可视化在视觉表现形式上过度用力,虽然营造了很好的视觉体验,但是从其实用度、可用性上来说会大打折扣。

于是设计的难点很多时候就会集中在平衡视觉与实用之间的关系。

2. 设计目标

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

通过以上分析,不难看出设计的主要目标,而面对这句较为抽象的“把握设计与实用之间的平衡”其实无外乎也就是拆解到功能和视觉这两个方面。

从功能上来说,我的目标是提升用户的数据阅读效率、让用户能够迅速 Touch 到目标信息,提升交互效率,一切都是以结果为导向,以解决用户问题为导向,一定记住人们不愿意接受未处理过的数据。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

而从视觉上来说,我们的目标是处理好在视觉上各个模块之间的统一、透气关系,将数据进行可视化的同时尽量提升感官上的审美体验与传达上的有趣。

以上会作为后文中我们每一步设计的指导和检验的方式,从实际操作的维度上来说二者也并不是五十比五十的分配,遵循的原则是:体验一定要让位于功能,所以在视觉的层面发挥的空间其实需要比较克制。

案例制作

了解了数据可视化的设计难点,明确了数据可视化的设计目标,那么我下面进入我们最重点的环节:可视化页面案例制作,由于数据可视化的形式较多,这次我们以工作中经常接触得到的 PC 页面数据概览页为例。

1. 明确性质

同样的,细化到数据概览这个分支项目,我们同样需要明确了解其基础定义和性质,严格意义上来说数据概览部分属于 Dashboard design(仪表盘设计)的一种,其主要的目的和功能可分为分析和操作两块。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

所以从综合的角度来说数据概览部分可以理解为:

其它模块的摘要视图,并显示来自应用程序各个部分的关键信息,从这点上来说建议此模块可以在其余模块设计完后再进行设计,如此有利于设计师从一个全局的视角切入进行设计,理解上也会更加透彻,否则很可能会陷入在你设计其他模块的时候不断地返回对其进行修改的怪圈。

它也是核心功能、常用功能的快速操作助手和快捷页面跳转(有点类似于导航),交互功能的排布和关键信息的显示,其共同的要求点是显而易见的,即明确各个模块之间的层级,做好顺序、优先级排布。这就需要你对业务目标有一定的了解,记住,对业务目标不了解,你的设计将毫无意义。

你可以通过查询一些内部资料、报告、也可以询问产品经理等相关负责人,还可以通过用户调研得出,这里不展开说,在动手之前你需要搞清楚:各模块之间优先级如何、你需要在一张单独的图表内展示多少变量、想展示一段时间内的值是项目和项目之间还是组与组之间、每段变量中有多少关键数据需要展示等问题。

2. 定义模块优先级

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

如上图所示,在工作中我们接到需求的时候是面对一堆冗杂的数据集,组成了若干个模块,但是正如上文所说,我们并不能对其进行无脑的可视化映射,所以首先要做的就是要对各个模块进行优先级的梳理排序

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

明确了各个模块的优先级排布之后,我们开始对每一个单独模块进行可视化转化,即哪一个部分分别用什么类型的可视化形式表现,这一步非常类似于土地使用规划,当你在将土地划分完后,为每一块土地定义其使用类型。

3. 明确图表选择

想准确的将图表与所要表现的数据进行对应,需要了解图表本身所包含的基本元素。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

在这些元素中正常情况下一定在图表中的有:标题、时间范围、图形主体,经常出现的有:坐标系、图例、提示信息,有时候会有的有:切换选项和值域。

知道了这些重要的基础信息了,那么在面对这么多图表的时候我们该如何正确的选择来进行使用呢?

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

其实和之前说的一样:基于目的来进行思考,所谓的基于目的来进行思考也就是要明确你所确立的数据指标需要分析的维度,而日常使用的数据需要分析的维度无外乎:比较、构成、分布联系。

比较类图表

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

比较类图表应该是大家最为熟悉的范畴,第一时间能够想到的就是柱状图,这也是运用最为广泛的图表之一,经常出现在 PC 端之中,用于描述分类数据之间的对比,描述的数据可以是地区、品类甚至一个时间周期,但由于其扩展能力有限,所以一般不建议项目超过 12 条。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

条形图与柱状图类似,看上去只是交换了 X 轴与 Y 轴,功能和承载数据种类较为类似,但不同的是,条形所能承载的项目数量相对于柱状图而言更多,由于其优良的纵向延展性一般用于手机端较多,而且从上到下的阅读方式符合人眼阅读习惯,所以也会经常用于排行榜的设计中。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

分组条形图是条形图的衍生之一用于比较多个变量在不同区域之间的数量关系,比如当想比较同样一款衣服和鞋子在四个门店中的一个季度的营业额时就可以使用分组条形图。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

双向条形图表适合比较两组以上的分类数据比较,和分组条形图较为类似,但是由于自身外观特征更适合用于比较两组意义相反的数据,也正是如此,双向条形图的组内二级分类数量一般不要超过 3 条最好。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

折线图与前者最大的不同就在于在坐标轴中加入了连续类别这个概念,数据基于时间等因素变得动态了起来,注重变化趋势的展现。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

面积图是折线图的延伸,除了表示变化趋势之外还能比较所选范围内积累的值。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

玫瑰图应该算是可视化图表中的“网红”,因为我们从小学的课本中就知道它还有一个别称叫“南丁格尔玫瑰图”。它是一种圆形的直方图,使用半径长短表示数值大小,其特点就在于因为其独特的外观可以将数值之间的差距在视觉层面进行放大,和将坐标轴范围缩小来提升视觉上数值的碾压是一个道理,发布会吹水最爱,但是要注意的是这不是一个表示占比构成的图,因为玫瑰图的每一份角度是一样的,一定要和饼状图等图区分开来,它用来表示的还是数值与数值之间的大小

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

雷达图经常用于分析一些多维的性能数据、评分数据,经常打游戏的朋友应该不陌生,有多少五边形选手可以扣个 1,每一项指标越接近圆心说明状态越差,越向外说明越佳。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

子弹图用于比较当前数值与目标之间的关系,比如看当前业绩是否达标,也可以通过标记划分区域来进行更好的评估。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

漏斗图适用于业务流程比较规范、周期长、环节多的单流程单项分析,一定要有清晰的环节,比如监控买家从浏览到最后下单的数量统计以求得转化率,不适合无逻辑、无流程的分类对比。

构成类图表

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

构成类图表整体上来说主要用于观察部分和整体的占比关系,最经典的莫过于饼状图,这个不用多说,通过每一份半圆角度所占整个圆的大小来表示部分和整体的关系,但是由于其所占面积较大,经常会让视觉过于集中,影响注意力。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

相对于饼状图而言,环状图十分有效的避免的干扰视觉的问题,其本质是将饼图中间掏空,功能与饼图基本一致,但是视觉上做到了轻量化,目前在日常设计中较为常用。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

旭日图相当于前面二者的结合,适用于展示多层级数据的占比关系,距离圆心越近代表层级越高,下一层级的总和构成上一层级,存在一定的父子层级关系。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

堆叠面积图出了可以表达趋势外,其优势在于能够表达总量和分量的构成关系,堆叠面积图上的最大的面积代表了所有的数据量的总和,是一个整体。各个叠起来的面积表示各个数据量的大小。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

堆叠柱状图的优势在于它既可以表达一级分类的比较,同时还能看出二级分类在其一级分类中的占比,但是缺点在于二级分类并不是按照同一基准线对齐的,相比于堆叠面积图更为常用。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

瀑布图用表达两个数值之间的变化过程,过程值为正的时候,向上加,过程值为负的时候向下减。

分布联系类图表

分布联系类地图在这两年在国人的心中其实已经非常熟悉了,因为疫情今年的地图可视化的应用经常出现在我们的生活中,地图可以结合不同的表达方式:

可以结合散点、可以结合动画、还可以结合引导线以及热力图的方式,图的形式使用视具体的业务需求来定

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

最后就是气泡图,这是在查看分布关系中最为经典的视觉模型,用气泡的面积大小表示数量,结合辅助线可以更好地观察分布情况

4. 匹配图表 重构布局

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

当我们对每种图表的功能和使用范围有了一个较为明确的认知之后,下面我们就可以对我们之前所规划好的优先级的模块进行可视化形式(图表)的匹配了。

进行匹配过后,我们将对布局进行重构,整体重构需要遵循的原则是

  • 布局层级明确,首屏尽量曝光更多内容
  • 统一透气,具有呼吸感

布局层级明确,首屏尽量曝光更多内容

从首屏曝光更多内容来说,主要是因为基于分析类的数据概览工作场景和 Analytical dashboard 自身特征决定的,用户希望能够通过仅仅一屏的的大小进行对各类信息的情况有基本的把控,达到一眼全局的目的,其主要注意力都会放在首屏,所以我们需要尽可能的在首屏安排更多的信息。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

当然首屏内容也并不是越多越好,一般建议也尽量不要超过 7 组模块,而在层级明确这块儿主要是根据人眼阅读习惯所产生的优先级排布:正常情况下都是左上为优先级最高,而右下优先级较低,这是无数经典的眼动测试和设计总结产生的最常用结论,就不展开叙述了,所以当我们按照优先级、首屏曝光更多内容的原则进行处理后会得到如上图的布局。

统一透气 具有呼吸感

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

这主要是视觉层面的问题,统一透气的要求在首页概览中可以依靠栅格系统来解决,它可以有效的保持页面布局一致性,为页面建立基础布局框架,将页面中的所有元素都捆绑在一个体系之中,同时还能有效解决适配问题。

5. 模块拆解

完成了大规划之后,下面我们开始对一个一个的模块进行拆解,同样的以目标指导设计,边设计边验证

层级明确 突出重点

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

和大规划一样,单独到每一个图表同样要时刻注意层级的梳理,销售渠道部分很明确应该是运用一个折线图的形式,由于业务目标上来说更关注销售额而不是销售额和订单数的比较,所以我们选用了一个带有切换选项的折线图形式。

但是我们会很容易发现在读图时会出现较大的视觉干扰,并没有能够很好地突出重点信息,视觉层级不清晰、混乱。

于是我们对没有重点的视觉层级进行梳理,像之前划分模块那样,对视觉元素进行高、中、低的 P0、P1、P2 的设定,提升易读性

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

P0:层级最高的自然是重点信息突出部分,所以我们需要在其之上做加法,给予内容异形悬停样式进行具体强调,配合投影加强视觉效果,有效传递用户,拉开与别的元素的层级,同时数据部分用特殊字体并适当加大字号进行设计,方便用户第一时间能够看到所要强调的数据具体值。

P1: 其次就是主体图形部分,这是用户需要看到的重要部分,在使用场景中会长时间盯视,所以采用更低的明度与更高的饱和色颜色确保易读性,但是也不致于会让用户太晃眼产生视觉疲劳,最后考虑到该模块所处位置属于页面中较为核心的地带,给予一定的颜色透明度渐变装饰,在强化主体图形的同时不致于太显单薄。

P2:前两者都是一定程度的做加法,那么层级最低的元素需要开始做减法,此时轴线、刻度、切换选项等元素需要弱化视觉层级,降低透明度,尤其是背后的刻度线与背景的明度对比大概控制在 1.6:1 上较为合适。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

销售总额、订单数、渠道数同属于一个数据统计的范畴,最忌讳的就是把以上提供的三个信息给做平,让用户抓不住重点,面对这样的情况还是一样,确立需要突出的重点信息给予特殊文字和大小的设计,选择合适的主体图形。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

但在这里需要注意的是由于在这个模块中 P0 是金额数、订单数、渠道数这些重要值,所以可视化图形需要适当为其让步,不要放在阅读中心位置,按照 P1 来进行处理,而订单数、转换率这样的标题就成了 P2 需要适当降低透明度和文字大小,不干扰主要信息的表达。

统一营造

说到统一,最先想到的一定是色彩,无非也就是需要处理好对立统一关系,而这其中统一的比例又要大于对立,配色上尽量选用同类色系,不宜太过花哨,尤其是对于 B 端而言,建议在可能的情况下不要超过 5 种,而且主色、辅助色,对比色的比例建议控制在 6:3:1 的比例(但不绝对),既能做到有所区别又不致于过于绚丽干扰视觉。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

你的主色不一定要迁就你的品牌色,但是一定要是如上文说的尽量低明度高饱和,以适应于长时间的注视。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

颜色过后就是字体,字体的使用需要极为谨慎,如果可以尽量只出现一种字体(但不要超过三种),并且只采用基础字体,正常情况下都是将其作为一个需要被降噪了的视觉元素来对待(比如降低透明度),在 PC 端中尽量也不要出现较多不同的字号、字重,造成没有必要的视觉干扰。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

除了字体之外,在统一感的营造上卡片的布局结构也需要尽量保持一致,这是为了提升易用性,同一个产品内,相同布局会给予用户相同交互、相同功能的暗示,也更容易培养用户习惯,提升操作效率。

呼吸适中

呼吸感是留白的艺术,很考验设计师的排版能力,在单独的模块内,元素与元素之间尽量不要用实线进行间隔,可以的话利用亲密性原则通过元素间距的远近进行布局。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

而柱状图的设计上,柱与柱之间的间距最好大于柱宽的 1.5 倍,这样才显得视觉上较为透气,不致于太臃肿。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

最后就是模块中的边距留白部分,这点一定要重视,不然不仅你的版心会变散,还会严重影响你的页面呼吸感。

细节处理

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

细节上首先要说的就是横纵坐标轴上的文字,上面的文字一定不要过长,最好的方式是将文字进行精简。然后横、竖排对齐处理,如果实在不能精简那么再进行斜排的方式。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

第二点就是横纵坐标轴有的时候会因为需要展示的数据过多而过于密集影响阅读,这个时候可以采用适当增加一个值域的划定的方式来进行坐标间距的缩放。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

第三点就是,在排行榜等模块可以适当增加一些小设计,比如金、银、铜的设计,提升情感化元素的融入。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

第四点就是,尽量不要选用一些 3D 的酷炫效果来做可视化,因为这种效果很容易对数据进行遮挡和扭曲,不是非常适用于高效阅读,也不适合 PC 页面上的交互,而且也不利于开发,比较得不偿失。

6. 组装自检

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

当所有的模块设计完成后,像拼高达一样进行组装,组装完成后适当调整其过于干扰视觉的地方,然后进行自检。

自检不只是从检查你的视觉、你的模块间的布局,更重要的是带入使用角色来进行检查,你可以模仿用户使用中的各种需求场景,对已经制作好的页面进行交互和阅读,看是否能够快速高效地完成使用目标。

当然除了自己之外,你还能在有条件的情况下找专家用户进行使用,即使记录使用中存在的问题并及时进行调整,当初步使用大致无问题后便可以交付。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。



文章来源:优设    作者:肃静、

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务




好的表格信息展示都有这三个特征

雪涛

表格是B端产品中出现最高频的模块之一,我们认为良好呈现信息的表格应当做到疏密适度、高效扫视、精简克制。

前言


表格作为组织整理数据的手段,可以有效的向用户展示数据信息,是B端产品中出现最高频的模块之一。

下图为典型的B端表格示例:



用户主要通过表格浏览获取信息、对数据进行筛选、排序以及相关业务处理等更多复杂操作、对比数据的差异与变化(关联和区别)。好的表格信息展示设计,应当是能够辅助用户高效便捷的实现以上场景中的诉求。

今天我们就来讨论表格设计中一个重要的问题——【应该如何考虑表格信息展示】。首先抛出结论,我们认为良好呈现信息的表格应当做到疏密适度、高效扫视、精简克制。


///


一、疏密适度


常见的表格信息包含文本、标签、状态样式、数值统计图表、关键信息Icon等。表格单元格是信息填充的基本单元,行高和列宽的定义决定了表格信息的疏密程度,进而决定了表格给用户的直观感受,因而下面分别从行高和列宽两个方向来探讨表格信息展示如何疏密适度。



1、定义合理的表格行高


a、行高模数设定

在具体设定表格行高时,由于表格中以文字信息为主,我认为可以参考文字排版的常用做法,将整个表格的行高分成文字行高、文字与分割线间距离,即上下间距两部分来考虑。文字行高可以设定为字号的1.2~1.8倍,文字与分割线间距离可以设定为字号的1~1.5倍。分为这样的两部分也比较符合开发同学写代码时的习惯(多行行高同理去设定)。



根据用户场景的不同,来选择模数倍数,需保证系统内使用统一的模数。比如,针对用户快速浏览获取大量数据场景时,可以选择1.2倍作为模数,列表更为紧凑,同样扫视范围内,可获取更多信息。


b、为小屏幕考虑一屏显示的行数

表格行高决定屏幕内能呈现的行数,即用户在一屏内能获取信息的数量,主要影响用户纵向对比数据的效率。对于1920*1020(包含该分辨率)以上的大屏用户,对于一屏显示行数的感知不强,但对于1366×768、1280*720等这类小屏,显示行数有限,用户进行纵向数据对比的效率就会有所降低。在设计前,应当充分了解目标用户的行为诉求,了解目标用户设备屏幕分辨率的占比分布情况,有针对性的设置行高。


c、用户自定义行高的场景

B端产品的特点之一是通用化,覆盖用户角色多样。然而用户个体对于表格信息呈现密度的诉求经常是有所差异的。比如个人视力的原因,有些用户喜欢表格行高值大一些,看起来舒适透气,便于阅读。而有些平台用户由于很熟悉线下excel表格模式,希望线上的表格也尽可能像excel那样紧凑,以便他们在一屏内看到更多的数据,进行对比,提升工作效率。产品为了让不同用户都能获得较好的体验,可以考虑把表格疏密度的设置开放给用户,建议不是完全开放给用户去调整尺寸,而是给出一定阶梯度的快速选项,例如舒适、标准、紧凑三种高度来满足用户需求。

例如,Gmail提供默认/标准/紧凑三种表格密度设置,如图:



2、灵活扩展的横向空间


通过对表格固定位置与列宽的调整,扩大表格数据空间,使信息不局促,空间更透气,保证横向扫视易读性。


a、列宽极限值设定

设计师需要根据表格承载内容定义表格的列宽,应包含最大/最小/默认列宽的定义以及使用规则。

我推荐的一个规则是:

规则1:当相对列少【浏览器宽度-页面其他模块 > 全部列的默认宽度和】,则各个列自动等比拉伸,撑满屏幕;

规则2:当相对列多【浏览器宽度-页面其他模块 < 全部列的默认宽度和】,则出横向滚动条,每列宽度为默认宽。

另外需注意最小值设定时应避免信息展示出现【对联式表格】。对联式表格最大的问题在于,一屏内展示的行数有限,当用户纵向对比数据时,需往复滚动多次,记忆压力大;横向扫视时,阅读视线不能一直保持左右横向预览,而是不停上下左右切换,使用体验不佳。



b、横向『偷取』屏幕外空间、行高模数设定

当压缩列宽也无法在有限空间内展示大量的数据指标列时,我们可以借助横向滚动来『偷取』屏幕外更多空间。横向滚动需用户拖动滚动条进行浏览,有一定操作成本,所以要结合业务实际情况选用是否利用屏幕外横向空间。

随着行和列的增加,用户的瞬时记忆会达到极限,超过“7±2原则”的范围,用户需要依靠辅助信息去阅读表格内的数据,防止遗忘某列数据的意义。因而当表格数据列较多横向滚动时,建议为用户固定重要信息列,如标题列、操作列。同时用户浏览表格时是符合F型扫视原则的,建议固定列显示在表格左侧,方便用户从左至右浏览数据、从上至下对比数据时能够清晰定位当前所浏览数据的主体是什么,同时可根据需要快速发起操作。



同理,用户拖拽纵向滚动条来阅读数据时,可固定表格的表头,帮助用户在阅读过程中清晰知晓单元格数据的意义。


c、用户自定义展示信息

针对需展示大量数据的情景,我们除了【偷取】屏幕外空间外,可以根据B端产品提供的数据表格是覆盖全部用户角色的全量数据的特点,让不同用户角色来自定义想要浏览的信息,从而提升表格的可读性。下图为百度信息流推广平台的自定义列功能,用户可根据需要选择展示的数据列,系统将在用户完成选择后,主动帮用户保存自定义内容,下次登录后,表格依然按照用户定义的数据来展示。



///


二、高效扫视


无论是在表格中要明确的定位数据,还是顺序阅读,高效扫视都是B端用户一个很重要的诉求,我们在设计表格时可尝试一些有效手段提升用户浏览获取信息的效率。


1、合理的对齐方式


数据信息本身包含多种格式,可遵守一个基本原则即文字左对齐,符合从左到右的阅读习惯;数据信息右对齐,方便数据大小的直观对比。

具体对齐方式可参考我们建议的方式:

文本字段:可点击字段、普通文本类、数字、字母等,长短参差不齐,左对齐;

格式化字段:日期、时间、部分枚举类等,字符数一致且较短的,左对齐。

数据字段:金额、数据、百分比。带小数点等数据,方便对比为主,右对齐。



2、去除视觉杂音,强调对比关系


a、正确使用分割线,实现对表格行与列的强调

横向分割线可强调行内信息的连续性。垂直分割线在缩减元素之间的距离后也能区分不同元素,更好的强调纵向数据对比。但只要遵循良好的对齐方式,通常不展示纵向分割线,避免信息干扰。因而表格中通常仅使用横向分割线和底色分割,提升表格阅读效率。



b、斑马线作用有限

斑马线即隔行(列)变色。它能让行(列)间界限更为明显,但由于与分割线的作用类似,起到的作用有限,可针对不同场景酌情考虑是否使用。比如针对不同类型的数据(如总和、平均值)使用不同底色来区分,可以更突出强调该数据。要注意的是,隔行(列)换色的两种颜色不能反差过大,否则看来太“跳跃”。

对同一类数据而言,分割线就已经能够明显区隔,所以可不使用斑马线,但需要给出单行的悬浮状态,强化横向导视,避免出现列数过多引起数据错行的问题。



3、突显重要内容的视觉重量


前面我们提到表格呈现的数据信息除文本外,还有其它一些可视化数据。可视化一方面提升了列表视觉表现力,增加差异化,另一方面让内容更加突出,提升阅读效率。例如:数据列中数据异常时,最好可以醒目的形式突显,让用户一进入页面就能快速注意到异常状况。



///


三、精简克制


体验好的表格一定是克制的,克制应表现在信息的适度隐藏以及内容折行与截断展示原则。


1、适度隐藏信息


a、隐藏低频操作

当表头需要承载排序、表头筛选、提示等功能时,不建议一股脑的将所有功能展示出来。用户对表头的诉求是定位数据指标﹥执行操作的,因此可根据具体业务定义展示哪些操作,将其它操作隐藏,有需求时用户主动触发再展示。比如,百度搜索推广平台的推广管理页面提供了全局筛选,所以表头筛选对于用户而言是相对低频的操作,我们选择隐藏表头筛选的图标,当用户鼠标HOVER表头单元格时再展示。



对于表格行内的操作我们也应当进行优先级排序,为用户专门设置操作列展示高频核心的操作,其它相对低频的次要操作可隐藏在相关数据单元格中,用户有诉求时hover对应单元格即可快速发起操作。



b、隐藏辅助信息

表格中的有些数据指标是综合纬度的,当用户关注点定位于该指标时,需要通过细分数据来理解、分析。指标的细分纬度信息虽能起到辅助用户更好理解数据指标的作用,但如果全部拿出来在表格列展示,会让表格变得臃肿不易读,此时可以考虑采取一定设计手段去隐藏这些信息,把触发展示的自由度交给用户,也更符合用户逐级查看的场景。例如,百度搜索推广平台中关键词列表中,质量度指标是由多条数据共同决定的,我们采用了将细分指标聚合在气泡卡片中,当用户HOVER质量度得分数据时展示出来。



再比如,有父子层级关系的数据,可以通过父子折叠表格将子信息默认隐藏,用户根据需要,去展开查看详细的子信息。



2、设定折行与截断规则


B 端业务的数据信息复杂多样,信息内容的长度高度是多样不可控的,很多内容会超出我们限定的最大列宽,最大列高,我们应当给出折行与截断原则去约束内容的展示,而非总是为具体情况而做特殊设计,破坏体验的一致性。

截断折行原则设定时要细分,不能简单粗暴的一刀切,比如一行截断这种,如日期、时间等固定格式内容,拖动列宽后文字应折行而非截断展示,避免影响用户误读。再比如很多业务实体标题字段是格式化的,即标题前面部分可能都是一致的,这时候如果简单的截断,用户就需要逐一Hover才能找到定位到要找的数据。因而折行与截断原则,我们建议是给出三种:单行截断、双行截断以及自适应截断,根据具体业务情景选择。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。


文章来源:站酷    作者:百度MEUX

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档