首页

尼尔森十大设计原则

ui设计分享达人

 
尼尔森十大设计原则是由著名的用户体验专家、网站设计师雅各布·尼尔森(Jakob Nielsen)提出的。这些原则旨在帮助设计师创建更具用户友好性和易用性的数字产品和网站。
这些原则的来源可以追溯到尼尔森在其著作《使用者体验的十大原则》("10 Usability Heuristics for User Interface Design")中提出的。

提升B端产品可用性的UI设计策略

ui设计分享达人

随着企业信息化的推进,B端产品(即面向企业或组织的产品)在各行各业中的应用越来越广泛。
然而,很多B端产品在使用过程中存在着操作复杂、难以理解等问题,这大大降低了产品的可用性。为了提升B端产品的可用性,UI设计师需要采取一系列策略来优化用户界面和交互体验。
本文将详细探讨这些策略,以帮助设计师们创造出更加用户友好的B端产品。

如何通过用户体验提高客户忠诚度?

资深UI设计者

如果你能做出改善忠诚度的改变,那么收入也会增加。那么,可用性改进是否会提高客户忠诚度?是的,特别是在您提高可用性的感觉时。

解锁卓越用户体验的四大密钥:四维度的深度剖析

资深UI设计者

具体内容方面,我选择了聚焦于“人”——主要探讨了人与界面、人与内容、人与人和人与品牌的交互体验——大部分话题既有宏观上的纲领,也有微观上的实现细节。这四类交互体验,下文的提及会使用简称,所以先看下简称及对应的全称。

小程序UI设计规范

资深UI设计者

 
最近帮公司的几个小程序制作的UI通用规范,部分地方已脱敏处理。
参考了很多资料,因为主要面向整个部门团队,所以前面甚至对规范是什么也作了阐述和解释,后半部分就是具体组件的展开。
一些地方希望能更专业和规范地呈现,比如单个组件就有多种中文命名,为了确保规范性,附上了英文命名。
刚出炉没多久,仅作为初稿版本,后面还要结合业务去完善。

APP弹窗控件(二)——模态弹窗设计要点与技巧

资深UI设计者

这篇文章将会具体介绍模态弹窗的设计技巧和一些设计要点,希望能够让大家对原本比较模糊的认识有一个全新的认知和了解。

深入探究B端产品设计的核心

ui设计分享达人

在当今高度信息化的商业环境中,B端产品已成为企业高效运营和持续发展的关键支撑。
这些产品不仅提供工具和服务,更是企业优化流程、提升工作效率和竞争力的有力武器。然而,要打造一款成功的B端产品,关键在于对
B端用户需求的深入理解与分析。
B端用户,
如企业决策者、团队管理者和专业人员以及普通员工,他们在日常工作中处理复杂的业务流程,对数据分析、系统整合、安全性等方面有着极高的要求。
这些用户的独特需求不仅体现在产品的基本功能上,更涉及到产品的易用性、可扩展性以及服务支持等多个层面。

移动设计模式

前端达人

现在人们渐渐用智能手机代替PC,连购物也是如此。正当越来越多的人由电脑桌面向移动网页转移,购买产品和服务,网站创建者可以使用已存的设计模式来开启移动电子商务计划。

拥有良好的电子商务经验非常重要。实际上,近期的研究发现,如果能用手机登陆购物网站且过程体验良好,多于67%的人都愿意下单。

使用设计模式的优点在于,你可以看到其他设计师是如何解决类似的问题,这样你就不用走弯路。还能使你了解到人们在其他网站使用类似功能时的需求,并以此为参考来设计网站;并鼓励你思考自己一个人做设计时不会想到的设计方法。

本文中,我们专注于智能手机,而不是图表。我们将介绍一些用于移动电子商务功能的设计模式和方法,如下:

·主页  

·导航  

·搜索建议

·搜索结果

·搜索过滤和分类

·产品页

·图片库

·购物车

·账户或游客登录

·表格

本文中所有例子都来源于移动网页,在智能手机浏览器中运行。大多数属于大型百货零售商,因为他们有庞大的产品目录,这就需要考虑周全的设计方式,以突出搜索,并将搜索结果进行过滤和分类。本文还有许多基于电子商务的原生app,许多模式都能很好的运用其上。

 

主页

在移动设备上访问网页,主页内容通常较少,更多是帮助用户找到所需的内容。常见的模式就是一栏促销,一栏链接列表或产品目录,很简单。关键词搜索一般都有,还有店铺的链接,订阅促销邮件及忠诚度计划的登记表。

 

c9b7569882026ac725af23e7ad60.jpg

 

亚马逊和梅西都使用促销商品和列表目录混排的方式。

 

 

0498569881ab6ac725af23bac5c8.jpg

 

塔吉特的促销内容比简单列表占据屏幕更大的空间,极具视觉冲击力。

Threadless使用仪表盘模式,比起移动电子商务网页,在原生应用中较为常见。

 

如果购物者来你的网站是为了快速比较价格,那么他们更需要的便是简单的列表样式和搜索功能。如果他们是来关注促销和打折的,那么塔吉特的设计模式就更合适。因此,你需要分析消费者来你的网站的目的,以此决定合适的设计模式。

导航

除了使用主页作为主要的导航中心,许多网站也在多数页面上设置了导航目录,通常是作为页头。这让消费者能轻松在页面间跳转,而无需回到主页。

 

cbf2569882186ac725af23c93010.jpg

 

lowe的导航目录中,每个选项都有图标。best buy的目录则使用了两栏的排版,并且用按钮替代列表。Lowe的目录出现时会覆盖整个页面,而Best Buy的目录出现时会向下推挤屏幕上的其他内容。

 

11cf5698824532f87574be578837.jpg

 

Macy的导航目录包含下级选项。CVS则具有双栏目录,每个选项也有图标。它们的目录都在页面顶端展示。

看了上面的屏幕截图,设计网页导航的方式多种多样。Lowe的设计很简洁,而且图标带来了一些视觉上的亮点。而导航以外的其余内容都隐入背景,这使用户在选择导航内容时,更集中于当前目标。CVS的版式相对杂乱,两栏的选项,每个项目都搭配了图标。CVS的目录上有许多可以点击的bar,相互之间很接近,这在触摸屏上可能导致可用性问题。

有趣的是,大型电子商务网站通常不会一次显示许多导航选项。它们尝试在导航的视觉设计和网页信息构架之间寻求平衡,仔细考虑应存在于全站导航上的项目的数量。通过网站分析来确定消费者会点击哪个目录选项,可以帮助你决定目录上的内容。可对不同的设计进行A/B测试和可用性测试,看看哪种设计选项太多太杂,最佳方案应使人们不但找到建议内容,也能找到需要的内容。——为了商业需求,也为了用户需求。

搜索建议

搜索建议,也叫输入提示或自动填写,当消费者键入前几个字幕的时候就显示出可能的输入结果。在常用搜索中,这对消费者来说真的很方便,特别是当输入内容很长的时候。而搜索建议的一个局限就是:在虚拟键盘上很容易输错字,这会改变建议的结果。而显示常见“正确”的结果可能更有用。而且,考虑使用改进的自动建议模式来减少输入内容,在最有效率的前提下使用更慢的移动带宽。

 

0249569882666ac725af232553c1.jpg

 

在Office Depot网站的搜索框中输入“draf”时,会自动提示数个可能的结果。如果错打成“drag”,就会显示出一些和搜索内容无关的结果。在虚拟键盘上输错字母是很常见的问题。

 

人们在输入时的错误,设计师也无可奈何。不过他们可以用其他方式使消费者找到产品页,例如,产品类别或顶层类别的目录可以向下延展出列表。网站管理者也可以优化搜索引擎的功能,如当用户输入“dragt”时,再建议“draft”的结果。你使用的搜索引擎技术将决定你解决问题的方式。

搜索结果

在移动电子商务网站上的搜索结果主要使用两种样式:表格展示和网格展示。表格展示会显示一张产品缩略图和一些密集排列的基本信息如产品名称、价格。网格展示则会显示较大的图片而使用更少的描述信息。一些网站允许消费者在两种展示方式之间切换。

 

97295698828432f87574bea51819.jpg

 

zappos以网格显示搜索结果,这使它可以使用更大的产品图片,使消费者买鞋的时候偏于以感性作出选择。Walgreens使用包含按钮的表格,按钮的功能一个是在店中找到商品,另一个是将商品加入购物车。

 

dff1569882a06ac725af23add0de.jpg

 

OfficeMax让消费者在海量的搜索项目中——如输入“纸”搜索——选择子类别。一旦选择了子类,搜索结果将以表格展示出来。如果搜索“剪刀”,搜索结果的子类别会较少,这让消费者能直接在表格中看到结果。

 

如果产品的分级杂乱不清,此时让消费者选择子类别可能会导致一些问题。如上面在OfficeMax的例子中,某人想买8.5x11英寸的家用打印纸,他可能不知道该在“复印纸&多用纸”还是该在“激光纸”的目录下找。一种比较好的解决方式就是在搜索过滤器下边列出子目录,可以与其它过滤方式并列呈现,如“颜色”和“尺寸”。每隔一段时间(4-6周)就对具有代表性的用户、常见搜索项目和热销产品进行测试,这可有助于你洞察哪种解决方式更佳。A/B测试也可以揭示出哪一种方式能让更多用户到达产品页并具有更高的支付率。

 

25a0569882ba6ac725af234530a6.jpg

 

Gap的默认搜索结果以表格展示,同时提供网格展示方式的选择。注意,Gap也在关键词区域保持搜索项目。

 

Gap的用户可以选择搜索商品的展示方式,这让它们可以随时在易于浏览的形式和具有大图的形式之间转换。但其实Gap可以在网格展示方式中保留一些商品信息——如价格(像Zappo所做的那样)

一些诸如价格和颜色的细节让用户更容易决定想要了解哪个商品的更多信息。

在关键词区域保持搜索文字也可以提醒用户他们正在搜索的内容,让他们更容易通过添加一些限制词(如“红色”)来细化搜索结果。

在Gap中搜索“男式tshirts(正确写法为t-shirts)”,你会来到无搜索结果页面(本文未截图),而且也不提供“男式 t-shirts”的搜索链接。Gap可以在搜索结果页面添加“你是否要搜索-某物品”的搜索建议来提升其用户体验。Google就会列出“mens t shirts”的搜索建议,如果用户忽略,它就会直接呈现出“men’s t-shirts”的搜索结果。

结果分类

将搜索结果分类可以帮助购买用户以一种有规律的方式组织起海量的搜索结果,通常会按照价格和消费者评分排列。常见的分类界面样式是按钮和<选择>菜单。

 

246f569882de32f87574be90c2fe.jpg

 

Walmart让用户点击三个按钮之一来将结果分类。Sears使用了类似的方式,但有一个“分段控制”,Javas cript框架如jQuery移动开发正在使这些类似app的界面小部件对设计师来说更易用。

 

2ee9569882fd6ac725af2376ad8b.jpg

 

J.C. Penney可以通过有点自定义样式的<选择>菜单来分类结果,Eddie Bauer则使用了浏览器的默认<选择>菜单。两者都通过浏览器的本地控制来触发<选择>菜单(本例中为iphone选择器)

Walmart的按钮之间空间较大,点击起来不易出错,但同时也因此无法容纳更多选项,而Sears有四个按钮,包含一个“全部”的按钮,这使得用户在分类筛选后没有找到所需商品时可以回到初始页面。用<选择>菜单是一种很安全的选择,因为现代移动浏览器都支持这种方式,这使应用可以列出更长的分类选项。但是,也占用了许多有用空间。这些都是可用常规测试方法来评估的折中设计类型。

结果过滤

过滤器让用户可以缩小搜索范围,一般基于诸如颜色,品牌和尺寸等属性。过滤器通常要划分类型(称为分面),每个分面下会显示数个值(比如,颜色就是一种分面,红色是一种分面值)常见的展示过滤选项的界面样式是<选择>菜单,下拉式菜单和可折叠菜单。现在在技术上使单个搜索包含数个分面值是可以实现的,但也因此带来更高的交互成本,并导致无搜索结果(比如,低于75美元的交叉训练运动鞋)。

 

 

a20c569883626ac725af23e1019e.jpg

 

CVS在其高级搜索中使用<选择>菜单来过滤结果,选择一个菜单选项将立即对结果进行过滤。JC Penney则提供了一个下拉菜单来过滤结果,并会提示出符合过滤值的产品数量。JC Penney也允许一个分面带有多个值,以供用户进行一次性的选择,确认信息用户要触碰“apply”按钮。

 

c9215698844832f87574be43468e.jpg

 

Kohl’s在其每个过滤类型中使用折叠方式收纳系列复选框。Threadless把所有搜索分面的值以按钮体现。两个网站中,你只需选择一个过滤值就能立刻看到结果。

 

在每个分面值下面显示商品数量能让消费者更清楚地了解每个选择为他们带来的结果。Threadless的方式是用整一屏展示出所有可用的分面值,让消费者对所有可用搜索结果一目了然。你是选用这种方式还是使用Kohl的方式,取决于你打算为指定产品目录提供多少过滤分面值。如果你的产品目录在分面值方面变化不定,那么你就需要进行试验找出合适的设计方式。你可以优化那些最热门的产品目录的过滤结果显示页面。

产品页面

产品页是电子商务网站真正展示产品细节的页面。它们并不关于某种模式,而是关于系列模式,包括标签,折叠导航和照片库等系列元素。产品页有两种展示方式,一是包含所有产品信息的长页面,二是包含标签或折叠导航能将信息收起的短页面。

 

f8f25698846632f87574bede44d3.jpg

 

三星和戴尔都在产品页上逐步揭开内容,为消费者提供许多信息。三星使用折叠导航来展开大段内容,戴尔则使用标签。

 

49f25698848532f87574bea7abfc.jpg

 

Cabela和Office Depot都使用一整个长页面来展示产品信息。这种方式需要用户频繁滑动屏幕来获取信息,但他们就不用触碰标签或展开折叠导航栏。你需要根据产品信息量的多少和分解信息的方式来选择合理的方式。

 

长的产品页比起带折叠导航和标签的页面需要用户进行更多滚动操作,也令购买者需要更费力地找出特定信息。在我自己的可用性测试中,我了解到人们对两种方式各有偏好,但是似乎对网页信息进行划分具有更高的可用性。如果你要采用这种方式,确保在人们触碰标签或折叠导航栏的时候,被收起来的信息能快速显示。

一种办法就是开始便一次性加载所有信息内容,这样触碰标签或折叠导航的时候时,被收起的内容就会立即显示。如果采用这种办法,即使用户在各种信息之间切换的过程中掉线了也没关系。但是有个弊端:不管用户阅读与否,也必须下载所有的产品信息;这为服务器带来更大负荷,而且也会占用户较多带宽。

照片库

照片库对电子商务领域如服装和消费电子行业来说特别重要。在Home Depot上购物时,看衣服、鞋子、高端智能机或平板电脑你可能并不需要看到商品的三视图,但图片总是越多越好。常用的展示方式是可滑动的照片库,“双击照片放大”,单击缩略图以选择照片。

 

69f85698849b32f87574bec38555.jpg

 

Payless非常英明地将“双击放大”的提示框放在屏幕中心并持续几秒,给购物者充分的时间去消化理解网页的操作方式。对服装和鞋子来说,放大商品图片查看细节非常重要。

 

2605569884b66ac725af238198e5.jpg

 

Dockers(上左图)具有可滑动的照片库,双击放大查看细节,而且购物者可以查看同一商品的不用颜色。Levi(上右图)也用了类似方式,但添加了商品缩略图,显示照片库内不同视角的照片。在Docker上,选择另一种颜色的商品会令网页刷新,但Levi不会。

 

Levi网站在用户选择商品的不同色彩时大多数网页不会刷新,这似乎能带给用户更好的体验。但是,如果对比Levi和Dockers网站在同一天同一时刻的表现,你会发现触碰Levi上的颜色标签并等待响应照片载入所花的时间,竟然比Dockers刷新一整个网页的时间要多。Levi之所以这么慢,可能是因为它还要刷新那5个缩略图,加上主要照片和其他不可见的元素,这种负载比较重。看来每种方式都有利有弊。

 

f200569884d06ac725af2318b247.jpg

 

三星(上图左)和戴尔(上图右)的照片库都可以左右滑动。三星还将折叠导航合并到产品也,戴尔则单纯只有照片。

 

三星的方式似乎更人性化,因为页面相对更少。三星和戴尔都使用了高分辨率的照片,显然在展示价值不菲的产品时图片质量很重要。戴尔的方式有一个好处,那就是消费者会更专注于产品本身,而不被页面的其他内容干扰。

购物车

购物车通常用表格来展示商品。除了展示需要购买的商品,还提供其他功能,比如可以保存订单,保存商品到收藏夹,删除商品或更新数量,选择快递或实物店拿货,接受促销卷或优惠券,以及结账等。一旦加入了商品,就可以通过网站页头的购物车图标或者全网站导航菜单进入购物车。

e19c569884e732f87574be99e78c.jpg

 



作者:插画师景豆豆
链接:https://www.zcool.com.cn/article/ZMzg0Nzk2.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

B端数据可视化设计经验分享第四弹:图表设计

前端达人

欢迎小伙伴们收看《B端数据可视化设计经验分享第四弹:图表设计》,本节内容将带领小伙伴们从零开始认识图表,了解图表在数据可视化中的作用,图表的构成,不同图形可以可视化哪些类型的数据等等。希望大家看完后能对图表有个相对完整的认知,在以后的工作中可以得心应手。
一、什么是图表?
大家对图表一定不陌生,图表(chart)就是一种通过图形化的方式呈现和分析数据的工具,就是
将表格中的数据进行二次加工,将复杂的业务数据转化为更加直观的、有趋势性、有时间线、空间性的图形数据
,协助用户根据数据变动而变更相关决策,最终以实现降本提效的目的。
B端数据可视化设计经验分享第四弹:图表设计
 
 
不同部门或者角色在公司中会需要各种类型的数据信息,以支持其业务运营和领导层决策需求。这些数据信息的准确性和及时性对于公司的发展和竞争优势至关重要。
产品部门关注的主要是用户行为数据、收入数据、用户量数据;运营部门关注用户活跃度数据、营销效果数据和用户反馈数据;技术部门关注系统运行数据、技术指标数据;用户增长部门关注用户生命周期数据等。
B端数据可视化设计经验分享第四弹:图表设计
 
 
二、一个优秀图表设计的标准是什么?
要看一个图表是否优秀,主要看它是否符合GLAD原则。GLAD原则是一个在数据可视化设计中常用来确保图表质量和有效性的方法论,它主要包括以下四个要素:
GLAD原则
GLAD原则
 
 
G原则:优质数据和洞察
G原则是指Good Data and Insight。G原则在探索性数据分析过程中着重提升图表的商业价值,G原则的关键是“有价值的商业信息”,这一点就要求在准备数据的时候,应该剔除那些商业分析价值不大的部分,而主要留下的是有高价值密度的信息。除了要求有高价值的信息之外,还需要有比较好的Insight,也就是能洞察数据中的高价值信息,并以较为通俗易懂的形式在图表中表达出来。
优化前
优化前
 
例图点评:虽然图表本身看上去好像并没什么问题,图形选择的也对、颜色搭配也得体,读者也能理解图本身要表达的意思。但是,
没有商业价值,即我能看出茅台拿铁卖的最好,然后呢?这是哪个阶段的数据?不知道。有没有持续的表现数据?也不知道。
优化后
优化后
 
例图点评:修改后,从数据中提炼出更有价值的商业数据,在时间维度和空间维度都有体现,简洁明了的同时,也具有商业参考价值。
B端数据可视化设计经验分享第四弹:图表设计
 
 
 
L原则:更少的视觉噪音
L原则是指Less Noise。简单说就是视觉降噪。
B端产品是高度商业化的产品,有用有效远大于好看,
这要求B端设计师对艺术的追求要适可而止,商业数据分析不是追求艺术造诣,不是做一张海报去吸引人的眼球,而是提供商业价值并能快速让人理解。过于酷炫、花哨、浮夸的修饰并不会给图表带来任何附加值,反而会增加读者的阅读负担。
例图1
例图1
 
例图点评:修改前,有些国家由于人口稀少,导致相关数据也非常小,难以在图表中展示,造成整个图表花里胡哨且复杂。修改后,把过小数据的选项折叠为“其他”,默认显示主要几个较大国家的数据,当点击“其他”图例的时候,再显示详细的数据信息,使数据展示更具有侧重点。
例图2
例图2
 
例图点评:图例2是dribbble上的图表作品,左侧是K线图,右侧是柱状图,它们的问题在于花里胡哨,却缺少必要的刻度,形式大于内容,过于追求好看的反面案例。
 
B端数据可视化设计经验分享第四弹:图表设计
 
 
 
A原则:准确的表达
A原则是指Accurate Expression。通俗讲,就是要根据不同的数据类型和不同的商业目的,采用正确的、适合的图表类型,如表现占比就要用饼图、百分比柱形图,表现趋势就要用折线图、面积图等,且要保证图例的清晰性、刻度的准确性,避免模棱两可的图例和不准确的刻度。
错误例图
错误例图
 
正确例图
正确例图
 
例图点评:图例的本意是对比2023和2024年不同品牌手机的销售额占比,是基于时间维度的对比图,但错误图例却用了两个饼图,无法直观的表现特定品牌在不同年度的销售额占比的对比情况。正确的图例则直接用了柱状对比图,一目了然。
 
D原则:明确的标记
D原则是指Dinstinct Mark。D原则的作用是帮助读者加快理解信息的速度,它强调
突出重点
,需要把通过数据比较得到的差异部分、体现洞察信息的内容利用明显不同的颜色、形状、文字标注等手段进行区别,让读者的视线聚焦到那里去。
B端数据可视化设计经验分享第四弹:图表设计
 
 
B端数据可视化设计经验分享第四弹:图表设计
 
 
 
三、图表的构成要素
图表是由:标题、图例、纵轴、横轴、图形、图表范围及其他辅助元素(如水位线、网格线、刻度值、提示信息等)构成,每一个元素都有它存在的意义。不过在实际使用中不一定非得把元素全部展示出来,精简化显示想要展示的内容即可。
图表的构成
图表的构成
 
 
3.1标题
标题即图表的名字,是图表必不可少的元素。标题要求简短明确通俗易懂,视觉上通常需要字体加粗。标题下面也可以跟一行副标题,用作对标题的补充说明。
  •  
    信息类标题:提供理解数据所需的所有信息,回答「何事」、「何地」、「何时」这三个问题
  •  
    描述类标题:突出图表中显示的主要数据模式或趋势,描绘出图表所要讲述的故事
标题常用的位置有3种,左上、顶居中、底居中。
标题常用位置
标题常用位置
 
 
3.2图例
3.2.1图例的作用:
  •  
    区分不同类别数据的标志
  •  
    开启/隐藏类别显示
B端数据可视化设计经验分享第四弹:图表设计
 
 
如果图表中只有一个数据系列,则可以不用显示图例。
常见图例展现形式
常见图例展现形式
 
3.2.2图例的位置
图例的位置并没有严格限制与要求,常见位置是上、下、右。
图例的位置
图例的位置
 
3.2.3图例的颜色
在选择图例颜色时,不要用色相过于接近的颜色,否则会容易看混或看错。
B端数据可视化设计经验分享第四弹:图表设计
 
 
要规范图例颜色使用,一般分为两种情况:
  •  
    常用的图例颜色(颜色本身代表着行业中的某种含义),此类颜色需要是固定色值,无论哪个 chart 中,都是这个颜色;
  •  
    无特殊含义的图例,可以规范出一个图例颜色的使用顺序表。那些无特殊含义的 chart 可以按顺序使用图例颜色,图例整齐划一。
值得一提的是,为了照顾色弱、色盲群体,有些产品会增加无障碍花纹来进行辅助识别,提高辨识度。这种设计很有温度,毕竟设计以人为本。
Echarts的无障碍花纹样式
Echarts的无障碍花纹样式
 
 
3.2.4图例的数量
一般来说图例不要过多,基本要遵循米勒定律,即7±2法则。
米勒定律
米勒定律
 
所以,5个以内是最佳图例数量。如果遇到比较复杂的图表,则可以进行尝试进行图例合并,如上面讲GLAD原则的时候的L原则案例,除了多个图表可以共用一组图例(前提是图例代表的意思一致),还可以把过于零碎的比重要的数据图例合并为一个“其他”。
如果图表中只有一个图例的话,则可以不显示。
B端数据可视化设计经验分享第四弹:图表设计
 
 
 
3.2.5图例名称的长度
根据不同使用场景,为了更好的展示效果,要给图例名称设置一个最大值,超过最大值后省略展示,鼠标hover时再显示完整名称。
B端数据可视化设计经验分享第四弹:图表设计
 
 
 
3.3坐标轴
3.3.1什么是坐标轴
坐标轴是定义域轴(叫什么)和值域轴(有多少)的统称。由于可视化图表绘制的数据大部分都有一定的现实意义,因此我们可以根据坐标轴对应的变量是连续数据还是离散数据,将坐标轴分成连续轴、时间轴、分类轴三大类。轴的类型不同在设计处理上也有差异。
坐标轴分类
坐标轴分类
 
 
3.3.2常见坐标轴组合方式
常见二维图表坐标轴分为X轴(横轴)和Y轴(纵轴),多用于表示趋势、排名、比较的数据结构。常见搭配是1 个 X 轴+1 个 Y 轴。不过特殊情况下也会用到 2X+Y 或 X+2Y。
轴的常见组合方式
轴的常见组合方式
 
在三维图表里,会多一个Z轴。
B端数据可视化设计经验分享第四弹:图表设计
 
 
 
3.3.3坐标轴容易被忽略的设计细节
  •  
    轴线一般只考虑是否显示,例如柱状图、折线图等,在有背景网格线的情况下,会隐藏 y 轴线,条形图则是隐藏 x 轴线,以达到信息降噪,突出视觉重点的目的。
 
  •  
    轴刻度通常不显示,只有在肉眼无法定位到某个标签对应的数据点时,会显示刻度线,辅助用户定位,比如折线图,或抽样显示的柱状图。
 
  •  
    网格线用于定位数据点的值域范围,跟随值域轴的位置单向显示,柱状图采用水平网格,条形图采用垂直网格。样式为虚实线的最多,斑马线由于感知过强,一般不用。
B端数据可视化设计经验分享第四弹:图表设计
 
 
 
  •  
    轴标题/单位主要用于说明定义域轴、值域轴的数据含义。当可视化图表标题、图例、轴标签已经能充分表达数据含义,无需单独显示标题/单位,「如无必要,勿增实体」。
没有必要就不要多此一举
没有必要就不要多此一举
 
 
  •  
    连续轴/时间轴进行适当抽样。连续轴/时间轴,是由一组前后包含同等差值的等差数列组成,缺少几个数值也能明显看出中间的对应关系。当多个标签在容器内全显示发生重叠,我们可以利用抽样显示的手段来避免这种情况。常见的抽样方式是等分抽样:当多个标签在 x 轴无法完全显示,优先保留首尾标签,其余标签按同等步长间隔显示。间隔等分的前提是间隔数是合数,能被 1 和其本身以外的数整除。如果间隔数为质数,就需要「-1」转成合数。
   举个例子:9个标签,间隔数是 8,能被 2 或4整除,即分成 2 等分和4等分。8个标签,间隔数是        7,无法等分,需要在间隔数基础上再「-1」,转成合数 6 后再等分,此时最后一个标签显示在倒      数第二个数据点上。
B端数据可视化设计经验分享第四弹:图表设计
 
 
B端数据可视化设计经验分享第四弹:图表设计
 
 
 
  •  
    分类轴是由几组离散数据组成,独立存在无紧密逻辑关联。若采用抽样规则,隐藏一些标签,用户对图表认知就会有困难,违背了数据可视化清晰、有效的设计原则。分类轴最佳处理方式是标签旋转 45 度,若 45 度仍显示不下,继续旋转 90 度。如果 90 度还是放不下就要考虑结合图表交互或反转图表。
B端数据可视化设计经验分享第四弹:图表设计
 
 
 
  •  
    分类轴标签字段有长有短,长文本标签直接旋转不仅影响美观,而且也不利于用户阅读。如果数据量比较少只有 2~4 个,长文本标签更适合水平展示,显示不下省略即可;如果数据量比较多,就限定字符数后旋转。
B端数据可视化设计经验分享第四弹:图表设计
 
 
 
3.4图形数据
图形数据是图表中最为明显的地方,即图表的核心元素,如折线图中的折线,柱状图中的柱,饼状图中的圆。
图形数据的使用规则:
  •  
    边界要清晰,不可虚化;
  •  
    多个数据同时显示的时候,要保证每个数据都能清晰的看到,可以采用透明度来保证所有数据的显示。
关于图形的选择,第四章会着重介绍。
 
3.5提示信息
提示信息用来标识出图表中重要点的数据信息,相当于一个popover浮窗,鼠标指针在图形中hover的地方通常就是该点的数据信息。需要注意的是:重要信息尽量简化,只需要展示重要字段。
B端数据可视化设计经验分享第四弹:图表设计
 
 
3.6水位线
根据不同产品的使用场景,有的时候会用到阈值,当达到某个阈值后,就会触发某种联动效果。这个时候就需要有个水位线了,它起到警示的作用。
水位线的表现形式有两种,实线和虚线,颜色的选取则取决于产品的警告级别。
水位线可以是一个,也可以是多个,视情况而定。
 
3.7图表范围
图表范围就是时间宏变量,用来切换数据的时间区间,如今天、本周(最近7天)、本月(最近30天)、本年等。
 
四、常见图形分类及使用场景
图形种类多种多样,个个身怀绝技,而设计师则是作为挑选者。想要做好图表设计,就需要对不同图形有较为深入的了解,并对数据进行正确理解后,与之匹配正确的图形,用可视化的方式将数据表现出来。
大多数人可能熟悉折线图、饼状图、柱状图,但是对其他的图形可能就不太了解了。本章节将带大家了解更多的图形和对应的特性,以便更好的运用和设计。
常见的图形可以分为七大类:
趋势类、比较类、排名类、占比类、流程类、分布类、关系类。
 
4.1趋势类图形
趋势类图形指的是对一段时间内数据的展示,如单个或多个分类数据之间的趋势变化和比较。常见的趋势图形有折线图、柱状图、堆积柱状图、面积图、蜡烛图、瀑布图等。
4.1.1折线图
折线图(Line Chart)常用于显示数据在连续时间上的趋势变化。通过折线连接各数据点,突出数据的上升或下降趋势,适合用于时间序列数据的展示。
折线图构成
折线图构成
 
B端数据可视化设计经验分享第四弹:图表设计
 
 
4.1.2柱状图
柱状图(Basic Column Chart)用于展示多个分类的数据变化和同类别各变量之间的比较。
柱状图构成
柱状图构成
 
如例图,既能展示店铺每天销售额所对应的数据,也能反映出每天份销售额的对比情况,并能通过图形能够快速了解销售额最多和最少的日期。
B端数据可视化设计经验分享第四弹:图表设计
 
 
柱状图还有个进阶用法,就是折柱混合图。顾名思义,就是折线+柱状图的组合。折柱混合图通常使用在多组数据进行对比的情景下,如商场物品销售数据增长或减少,商品价格走势比较等,它可以非常直观的展示数据与数据的比拟,这样就能一眼查看到不同时间段的数据值,通过折线和柱状的形式展现出来。
如例图,通过柱状图能看出每个月的销售数据,而折线图能体现出利润率。当鼠标移入对应位置就可以看到详细数据。
B端数据可视化设计经验分享第四弹:图表设计
 
 
 
4.1.3堆积柱状图
堆积柱状图(Stacked Bar Chart)是柱状图的变种,可以展示两个或多个数据的变化,以及数据之间的综合比较情况。
堆积柱状图构成
堆积柱状图构成
 
如例图所示,两个店铺每月总销售额用堆积图展示,在坐标轴上的每个品类都有两个数据,可以直观的展示每个品类的数据总量。
B端数据可视化设计经验分享第四弹:图表设计
 
 
4.1.4面积图
面积图(Area Chart)是折线图的变种。与折线图不同的是,其变量数据和坐标轴之间有颜色田中,这样可以更加突出数据的变化趋势,更加直观的体现量的变化。
面积图构成
面积图构成
 
需要注意的是,填充的颜色要有30%左右的透明度,这样在展示多组数据的时候不会互相遮盖彼此信息。
B端数据可视化设计经验分享第四弹:图表设计
 
 
4.1.5蜡烛图
蜡烛图也叫K线图(K Chart),常用于股市或期货市场(近期炒股的同学可能看到K线图心里会一咯噔)。K线是围绕开盘价、最高价、最低价、收盘价等反映市场趋势和价格信息的。
蜡烛图构成
蜡烛图构成
 
B端数据可视化设计经验分享第四弹:图表设计
 
 
4.1.6瀑布图
瀑布图也叫阶梯图,顾名思义,瀑布图的形状像挂在高山上的瀑布流水。瀑布图也可以呈现随时间变化的数据,但不同于堆积柱状图的是,瀑布图能够重点突出数据变化的结果,以强调多个特定数据之间的变化关系。
B端数据可视化设计经验分享第四弹:图表设计
 
 
 
4.2比较类图形
比较类图形主要用于两个或两个以上的类别数据进行比较。常见的类别比较图形有柱状图、分组柱状图、气泡图、多条折线图、子弹图等。
4.2.1柱状图
这里的柱状图与前面讲的柱状图的区别在于X轴是表现类别的,前面例图的X轴是表现时间的。
B端数据可视化设计经验分享第四弹:图表设计
 
 
4.2.2分组柱状图
分组柱状图(Grouped Bar Chart)是柱状图的延伸,它可以在同一数轴上展示各个分类下不同分组的数据情况。如例图为三家企业在产研部、设计部、商务部的人数对比情况,由此可以清晰的看出企业丙设计部人数最少,商务部人数最多的结论。
B端数据可视化设计经验分享第四弹:图表设计
 
 
4.2.3气泡图
气泡图(Bubble Chart)是是散点图的变体,由卡迪尔坐标系(直角坐标系)和大小不一的圆组成,通常每一个气泡都代表着一组三个维度的数据。其中两个决定了气泡在笛卡尔坐标系中的位置(即x,y轴上的值),另外一个则通过气泡的大小来表示。
气泡图构成
气泡图构成
 
如例图,x轴表示季度,y轴表示销售额,气泡大小代表产品所占全年销售额百分比。
B端数据可视化设计经验分享第四弹:图表设计
 
 
4.2.4多条折线图
多条折线图除了可以表示数据随时间的变化趋势,还可以展示多组数据的对比情况。如例图所示,图为某app经营情况的分析,在时间维度上对比下载量、注册量、成交量三组数据及变化趋势。
B端数据可视化设计经验分享第四弹:图表设计
 
 
4.2.5子弹图
子弹图(Bullet Graph)顾名思义,就是像子弹发射轨道的图表。它的数据展示类似仪表盘,优势在于可以表达丰富的数据信息,且占用的空间相对较小。子弹图的数据值是需要提前设计好的。
子弹图构成
子弹图构成
 
如例图所示,差、良、优和目标值、实际值都是作为动态数据呈现的。相较于饼图,子弹图可以更高效的传递信息。
B端数据可视化设计经验分享第四弹:图表设计
 
 
 
4.3排名类图形
排名图形可以为分类数据进行排排坐,它可以直观的展示最大值和最小值。它的特点是“有序”,数值往往是从高到底依次排列,类似榜单。
4.3.1有序条形图
有序条形图主要用于展示各个分类的数据排名,它是最常用的排名图形,因为是线性结构,对于微小数据间的对比会有很好的易读性。
B端数据可视化设计经验分享第四弹:图表设计
 
 
4.3.2有序柱状图
有序柱状图和有序条形图一样,都可以表现数据的排名情况。区别在于一个是横向对比图,一个是纵向对比图。
B端数据可视化设计经验分享第四弹:图表设计
 
 
4.4占比类图形
占比图形是大家最常见的图形了,主要用于表现分类数据占整体的
百分比情况
。常见的图形有饼图、环形图、堆积面积图、矩形树图、旭日图等。
4.4.1饼图
饼图(Pie Chart)是展示占比数据最最直观的图形了,它是通过饼块的大小来直观的表示分类的占比。但是饼图也有一定局限性,即当占比数值比较接近或者占比分类比较多时,在视觉上就不太容易分辨各个类别的占比情况。
B端数据可视化设计经验分享第四弹:图表设计
 
 
B端数据可视化设计经验分享第四弹:图表设计
 
 
4.4.2环形图
环形图(Donut Chart)的作用和饼图一样,但是环形图的特点是中间区域是空的,所以视觉表现上比饼图要弱一些,中间空心区域还可以用来放标题、图标、数据等。
B端数据可视化设计经验分享第四弹:图表设计
 
 
4.4.3堆积面积图
堆积面积图(Stacked Area Chart)就是叠加数据,不同颜色之间的数据并没有叠加关系,它的整体色块面积是数据总量,不同的分类数据可展示不同的占比情况。如例图,不仅可以展示全球能源消耗总量,切换百分比模式还能展示不同国家消耗能源的占比情况。
B端数据可视化设计经验分享第四弹:图表设计
 
 
4.4.4矩形树图
矩形树图(Treemap)由马里兰大学教授Ben Shneiderman于上个世纪90年代提出,起初是为了找到一种有效了解磁盘空间使用情况的方法。 矩形树图适合展现具有层级关系的数据,能够直观体现同级之间的比较。
B端数据可视化设计经验分享第四弹:图表设计
 
 
矩形树图的好处在于,相比起传统的树形结构图,矩形树图能更有效得利用空间,并且拥有展示占比的功能。矩形树图的缺点在于,当分类占比太小的时候文本会变得很难排布。相比起分叉树图,矩形树图的树形数据结构表达的不够直观、明确。
4.4.5旭日图
旭日图(Sunburst Chart)是一种现代饼图,它超越传统的饼图和环图,能表达清晰的层级和归属关系,以父子层次结构来显示数据构成情况。旭日图中,离远点越近表示级别越高,相邻两层中,是内层包含外层的关系。
如例图,对医院进行看病、挂号、取药的流程,用旭日图呈现。比如取药是等号、排队、拿药的父级,其中等号占取药的比重最大。
B端数据可视化设计经验分享第四弹:图表设计
 
 
B端数据可视化设计经验分享第四弹:图表设计
 
 
4.5流程类图形
流程类图形用来显示流程流转和流程流量。一般流程都会呈现出多个环节,每个环节之间会有相应的流量关系,这类图形可以很好的表示这些关系。常见的流程类图形有漏斗图和桑基图。
4.5.1漏斗图
漏斗图(Funnel Chart)适用于业务流程
比较规范
周期长
环节多
流程单向分析,通过漏斗各环节业务数据的比较能够直观地发现和说明问题所在的环节,进而做出决策。漏斗图用梯形面积表示某个环节业务量与上一个环节之间的差异。漏斗图
从上到下
,有逻辑上的顺序关系,表现了随着业务流程的推进业务目标完成的情况。
漏斗图总是开始于一个100%的数量,结束于一个较小的数量。在开始和结束之间由N个流程环节组成。每个环节用一个梯形来表示,梯形的上底宽度表示当前环节的输入情况,梯形的下底宽度表示当前环节的输出情况,上底与下底之间的差值形象的表现了在当前环节业务量的减小量,当前梯形边的斜率表现了当前环节的减小率。 通过给不同的环节标以不同的颜色,可以帮助用户更好的区分各个环节之间的差异。漏斗图的所有环节的流量都应该使用同一个度量。
漏斗图构成
漏斗图构成
 
B端数据可视化设计经验分享第四弹:图表设计
 
 
4.5.2桑基图
桑基图 (Sankey Diagram),是一种特定类型的流图,用于描述一组值到另一组值的流向。因为首次使用它的人是一名叫Sankey的爱尔兰土木工程师,所以就叫桑基图。
桑基图通常应用于能源、材料成分、金融等数据的可视化分析。
桑基图的构成
桑基图的构成
 
如例图所示,可以清晰的看到,从搜索框直接搜索进入酒店详情页的流量是最大的。充分说明了搜索是刚需。
B端数据可视化设计经验分享第四弹:图表设计
 
 
 
4.6分布类图形
分布图形主要用于展示每个数值在数据集中出现的频次和数量,常见类型有散点图、气泡图、热力图、直方图、箱型图、等高线图等
4.6.1散点图
散点图Scatter Chart,也叫 X-Y 图,它将所有的数据以点的形式展现在笛卡尔坐标系上,以显示变量之间的相互影响程度,点的位置由变量的数值决定。
例图展示的是AB两国男性的身高和体重数据,通过散点图中的数据点分布情况可看出,B国男性的身高远大于A国。
B端数据可视化设计经验分享第四弹:图表设计
 
 
4.6.2气泡图
前面4.2.3里讲过单维度数据的气泡图,这里是多维度的气泡图案例。如例图所示,图中展示了5个维度的数据,气泡的代表地区类别,气泡的大小代表人口总数,气泡颜色代表国家类别,X轴代表人均国内生产总值,Y轴代表人均寿命。
B端数据可视化设计经验分享第四弹:图表设计
 
 
需要注意的是,气泡图的数据大小容量有限,气泡太多会使图表难以阅读。但是可以通过增加一些交互行为弥补:隐藏一些信息,当鼠标点击或者悬浮时显示,或者添加一个选项用于重组或者过滤分组类别。另外,气泡的大小是映射到面积而不是半径或者直径绘制的。因为如果是基于半径或者直径的话,圆的大小不仅会呈指数级变化,而且还会导致视觉误差。
 
4.6.3热力图
热力图就是使用冷色到暖色的不同颜色表示数据从大到小的权重,或用同色系颜色的深浅来表示数据的多少。热力图可以在坐标轴上呈现数据的大小分布,也可以在地图或图片上使用。
如例图,杭州实时旅游热点区域的热力图,颜色越偏红的区域人流量越大,颜色越偏蓝人流量越小。
B端数据可视化设计经验分享第四弹:图表设计
 
 
4.6.4直方图
直方图(Histogram)形状上看上去好像就是柱状图,但是含义却完全不同。直方图能够显示各组频数或数量分布的情况,易于显示各组之间频数或数量的差别。通过直方图还可以观察和估计哪些数据比较集中,异常或者孤立的数据分布在何处。
直方图构成
直方图构成
 
如例图所示,绘制了钻石的全深比数据的统计直方图,从图中可以看出在 66 附近有两个孤立值
B端数据可视化设计经验分享第四弹:图表设计
 
 
B端数据可视化设计经验分享第四弹:图表设计
 
 
4.6.5箱型图
箱形图(Box Chart)又称盒须图、盒式图或箱线图,是一种用作显示一组数据分布情况的统计图。
箱形图多用于数值统计,虽然相比于直方图和密度曲线较原始简单,但是它不需要占据过多的画布空间,空间利用率高,非常适用于比较多组数据的分布情况。
 


作者:MoeDesigner
链接:https://www.zcool.com.cn/article/ZMTYxOTU3Mg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

UI/UX 设计选择题 | 02 期

资深UI设计者

如何做到交互操作更便捷的同时兼备功能的延展性?

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档