首页

折叠屏设计规范

前端达人 设计资源

持续更新中……

Part 1:折叠屏手机设计概述

 

折叠屏手机形态 ,主要是以下3种:

 

1、展开态:折叠屏设备完全展开后的形态。有更大的屏幕尺寸,可充分显示应用内容。

2、折叠态:折叠屏设备折叠后的形态。折叠后屏幕尺寸变小。

3、支架态:折叠屏设备处于完全展开和折叠的中间状态,可平稳放置。

 

 

Part 2:UI设计规范

 

一、设计尺寸

 

1、展开态: 8英寸 2480x2200px 约8:7.1

2、折叠态: 正面屏 6.6英寸 2480x1148px 约19.5:9

3、折叠态: 背面屏 6.38英寸 2480x892px 约25:9

 

 

二、字号规范

字体

字号大小和粗细决定了信息的层级和主次关系。在设备上我们使用以下字号的合集为不同的控件及排版场景创造了清晰易读、层次分明的阅读体验。

 

 

 

 

展开态图标和字体大小不应发生明显变化,在保证可读性的基础上,建议保持跟折叠态一样的大小。若一定要发生大小变化,则最大不要超过1.2倍。为确保有较好的可读性,展开态单屏文本长度不超过40字,推荐36字左右。

 

 

 

三、圆角规范

 

1、通用原角场景:从系统层面建立参数化圆角,目前支持 5 种通用圆角大小。分别是:4vp、8vp、12vp、 16vp、 24vp。

 

 

 

2、控件圆角场景:不同控件会有不同的圆角大小,因此单独定义了圆角场景。

 

 

Part 3:UX设计规范

一、页面布局

 

折叠屏展开态下屏幕尺寸变大,有利于更高效的信息展示或更沉浸的内容浏览。要充分利用折叠屏的大屏幕优势,需要进行宽屏的页面布局适配。态布局:针对设备宽度变化而进行界面版面重排的一种布局方式。动态布局可以细分为“自适应动态布局”和“响应式动态布局”两类。基于栅格系统考虑动态布局时,可参考:栅格系统

 

1、自适应动态布局:随着屏幕设备规格的变化,界面中所呈现的信息量有增加,但信息架构不变。常见的自适应动态布局的表现形式为:相对拉伸、相对缩放、延伸布局等。

 

 

2、响应式动态布局:随着设备屏幕规格的变化,页面内的信息架构会发生变化。常见的响应式动态布局的变形形式为:挪移布局、重复布局、瀑布布局等。

 

 

 

一、页面布局布局&交互创新

结合六种动态布局规则,三种双页面交互架构规则以及多窗交互规则,在折叠屏上可以进行多种布局样式和交互的创新设计,以下为一些参考范式。包括:分栏布局 、挪移布局 、重复布局 、瀑布流&宫格布局 、临时双窗

 

分栏布局

分栏是一种层级关系的左右分窗口布局,旨在在宽屏设备上有较好的显示效果,帮助用户更高效地处理任务。文件管理、联系人、设置、备忘录等应用非常适合在展开态分栏布局。备忘录的分栏布局示例,如下图:

挪移布局

折叠屏设备,从折叠到展开,可以通过挪移布局进行布局的变化,提升阅读舒适度和浏览效率。

以下为4种常见的挪移布局用法。

范式1:不同页面的内容整合到同一页的挪移布局。

边看边评

阅读时,在展开态同时显示文章详情和评论列表,满足一边阅读文章一边看评论的诉求。阅读新闻时新闻详情页和评论页合一的示例,如下图:

 

图片较多的阅读场景,同样适用于“边看边评”体验。本场景下建议默认保持大图显示,点击“评论”按钮后,再触发页面布局的变化,同时显示图片和评论。用户主动触发“边看边评”后,下一次访问该页面,需要保持上一次的布局效果。查看图片时边看边评的示例,如下图:

范式2:同一页面的上下结构内容,变成左右结构的挪移布局。

杂志排版

本范式常用于阅读场景的图片和文本之间的挪移布局。不仅能解决图片过大的问题,还能通过杂志化布局带来更好的视觉效果。同一页面的新闻,从上下图文变成左右图文的挪移布局示例,如下图:

 

范式3:有层级结构的图文内容,变成左右结构的挪移布局。首页的图文内容,从层叠变成左右图文的挪移布局示例,如下图:

 

 

范式4:通过挪移布局,在展开态上减少次要信息对核心信息的干扰。看视频时,弹幕和操作按钮挪移布局到周边空闲区域的示例,如下图:

 

多人视频通话时,参会人信息从底部挪移到展开态的侧边,减少对视频通话画面遮挡的示例,如下图:

 

重复布局

折叠屏设备,从折叠到展开,页面内的列表、卡片等均可通过重复布局,横向展示更多信息,提升页面的浏览效率,同时避免信息过疏。列表在展开态重复布局的示例,如下图:

从折叠态到展开态,使用重复布局时,通常内容按照从左到右的Z字形排布。如下图:

 

瀑布流&宫格布局

瀑布流布局适用于卡片式结构。折叠态的单列卡片,到展开态显示双列卡片,不同高度的卡片形成错落有致的瀑布流布局。可以有效提升页面的浏览效率和可视化效果。新闻首页卡片瀑布流布局示例,如下图:

 

 

瀑布流布局和卡片的重复布局比较相似,内容也按照从左到右的Z字形排布,卡片的高度可以不同。视频卡片从折叠到展开态的瀑布流布局示例,如下图:

 

 

二、交互架构

在大屏幕设备上,双页面同时显示,为用户创造了新的操作体验。当应用中的两个页面间有关联关系时,可以考虑采用组合页面的方式,根据不同的场景诉求,选择合适的页面组合关系。组合页面有三种:层级关系 、主从关系、并列关系。

 

1、层级关系
层级关系有多层级和单一层级两种。层级关系的双窗口,即为通常说的分栏。

 

2、多层级分栏
多层级关系有完整的多层结构,例如复杂的系统设置菜单,海量内容(例如综合电商的商品,视频、图片或音乐的媒体资源,新闻网站的海量新闻)的门户及多级分类子页面。
此类型的交互特点为:


(1)第一级的基础分类通常以列表形式呈现。


(2)末级列表页面中的元素为最小内容元素,例如单个商品、单个媒体素材、单条新闻等。

 

有多个层级递进关系的场景示例,如下图:

 

单一层级分栏

单一层级结构一般以“列表+详情”形式呈现,列表中的每个元素都是末端元素,元素中没有二级分类列表。例如邮件、信息、备忘录等内容型元素的列表。

此类型的交互特点为:

(1)列表中只存在单独的元素,没有子列表,左右两侧内容属性固定,较少用户迷失。

(2)点击左侧中某一个条目,右侧打开对应的详情内容。

(3)用户可以借助在左侧列表中点击任意一个条目,在右侧快速打开对应的详情内容,实现内容快速切换。

 

主从关系

在主从关系类型中,一侧主导页面为沉浸式场景;辅助页面在另一侧,呈现评论、互动讨论、参考信息等相关内容。可根据沉浸内容情况分为左右或上下的组合页面结构。

此类型的交互逻辑特点:

(1)两部分之间相互独立,且有明显的主从关系。

(2)辅助侧依赖主导侧存在,如果主导侧关闭或切换,辅助侧页面不能单独存在,需同步关闭或切换。

(3)主导侧的内容呈现,没有受到打扰和中断,持续保持最佳的沉浸状态。

(4)辅助侧的内容用户可以进行滚动浏览,适合于信息流数据,用户可参与互动。

 

主从关系的信息架构样式主要有如下几种,应用可根据具体场景进行选择:

 

悬浮面板

从属信息默认以悬浮面板的形式显示,通过特定按钮或特定手势交互触发,一般用于作为主要信息的筛选项或更多菜单项,不影响主要信息的展示。短视频应用使用悬浮面板的示例,如下图:

 

 

导航应用悬浮面板的示例(折叠屏展开后,悬浮面板不拉伸,不遮挡底部主要信息),如下图

 

 

侧边栏

从属信息默认以边栏形式显示,通过界面比例和视觉效果表现从属关系,不影响主要信息的展示,同时能快速浏览或操作从属信息。短视频应用使用侧边栏的示例,如下图:

 

并列关系

在并列关系中,界面中的两侧内容处于同等重要的地位。两侧的内容可以是同类型的内容,也可以是不同类型的内容。

例如购物应用中,下单前对两个相似商品的情况进行详细的对比就是相同类型内容的页面并列;购物应用中一侧窗口显示商品,另外一侧显示和商家的对话界面,就是不同类型内容的页面并列。

并列关系方便用户对两个商品的信息进行更详细的比对或进行更高效的交互操作。 在这种组合页面下,左右两页面间无主次和从属关系,页面分割比例应为1:1

 

 

多窗口交互


折叠屏展开态、平板、电脑等大屏幕设备,具有多任务并行和效率型任务处理的先天优势。
系统提供了悬浮窗、分屏、平行视界三种多窗口交互,为用户在大屏幕设备上的多任务并行、便捷的临时任务处理提供更佳的使用体验。多窗口类,如下图:

多窗口的应用

多任务并行
通过分屏可实现多任务并行。有左右分屏和上下分屏两种方式。针对短视频、IM对话、购物等内容,左右分屏体验更佳;针对长视频、游戏、会议等内容,上下分屏体验更佳。通过分屏进行任务并行的示例,如下图:

 

临时任务处理

通过悬浮窗可实现便捷的临时任务处理。

三方应用根据业务需求,列举需要调用窗口的场景,对系统提出调用窗口显示的请求,系统提供将特定页面窗口化显示的能力。例如,临时查看附件、拨打电话、查看地图、IM对话、登录等场景,都非常适合使用应用内悬浮窗。应用内悬浮窗查看附件的示例,如下图:

 

 

跨窗口拖拽

形成分屏或打开悬浮窗后,从某个窗口内拖拽内容到另一个窗口,即为跨窗口拖拽。跨窗口拖拽图片的示例,如下图:

 

 

 

 

 

二、体验设计点

 

折叠屏相对于普通手机有个明显的特点:可随时折叠展开、展开后屏幕变大。折叠屏UX设计中需考虑如下体验诉求:

 

1、体验连续

 

屏幕可随时折叠展开,在体验上要保证用户体验的连续性,应用需要遵从屏幕显示的兼容和应用状态的连续。屏幕兼容:由于屏幕尺寸发生变化,应用应采用适当的手段对屏幕上内容布局进行优化调整。

应用连续:应用在折叠与展开状态切换的过程中保持正常运行。

 

2、体验增值

 

屏幕变大后,用户体验在某些方面有增值。

更多内容:大尺寸屏幕可显示更多内容,提高显示和操作的效率。

更加沉浸:大尺寸屏幕可显示更清晰的细节,适合图片浏览、视频欣赏、游戏等应用和场景。

多任务并行:多个窗口可同时在大尺寸屏幕内展示,为用户多任务并行提供了直观高效的方式。

 

 

三、基础体验要求

 

1、基础要求


(1)保证布局良好
(2)窗口内布局的特殊处理
(3)保证应用任务的连续性
(5)音频冲突处理
(6)多窗口体验融合

 

2、保证布局良好


应用内的元素布局应进行响应式设计,保证应用界面在全屏、悬浮窗、分屏不同窗口模式间进行切换时、在设备横竖屏旋转时、调整系统字号、调整系统显示模式后,依然保持可用、良好的布局,不出现应用元素无法显示的问题。

 

3、窗口内布局的特殊处理


分屏窗口内,在应用界面顶部会显示分屏拖拽横条,且隐藏系统状态栏。应用界面中需要增加一个状态栏高度,来避免出现分屏拖拽横条和应用顶部的功能热区重叠,导致应用功能无法操作的问题。悬浮窗窗口内,悬浮窗的操作横条是在应用界面外显示的,因此应用不需要留出状态栏高度,避免在窗口内出现空白区域。

 

4、保证应用任务的连续性


当应用以分屏、悬浮窗显示时,需要保证应用不被特殊情况所打断进程。例如应用在不同窗口模式间切换时、在设备横竖屏旋转时、调整系统字号、调整系统显示模式后,应用不会发生重启、闪退等问题。且切换之前的任务和相关状态得以保存和延续,或者能够快速恢复,给用户提供连续的体验。

 

5、保证多个任务同时正常使用


例如用户正在玩游戏或看视频,同时在使用其他应用。只要游戏或视频应用还在前台显示,依然要保证能正常运行,不会因为用户正在使用的是另一个应用,而导致游戏暂停或视频暂停。

 

6、音频冲突处理


当应用正在播放视频或播放音乐时,新打开一个窗口应用,并触发了新的音频任务,原应用对音频的处理要符合用户预期,例如临时暂停音视频的播放或降低音量,以便于用户听到新的音频。

 

7、多窗口体验融合


可通过长按顶部横条并拖拽的交互,实现分屏和悬浮窗之间的互换。实现多窗口体验融合。

 

 

四、多窗口交互

 

1、方式介绍

 

悬浮窗用于在已有的任务基础上,临时处理另一个任务,或短时间多任务并行使用的场景。 支持同时使用多个悬浮窗。手机、折叠屏折叠状态下,一屏幕内最多展开一个悬浮窗;平板或 折叠屏展开状态下,一屏幕内最多展开两个悬浮窗。其他悬浮窗自动最小化为悬浮球叠加显 示。悬浮窗适用于玩游戏看视频等沉浸式场景下临时回复消息;购物时临时使用计算器计算等。

 

1.1 触发方式

(1)通过一步小窗的手势操作快速让应用从全屏到悬浮窗。本交互适用于所有支持智慧多窗的应用。

 

 

 

(2)智慧多窗应用栏触发:从屏幕边缘向内滑并悬停,拖出应用栏,点击应用图标,打开该应用的悬浮窗。本交互适用于所有支持智慧多窗的应用。

 

 

 

 

 

 

(3)横幅通知触发:沉浸式场景来通知,点击通知,悬浮窗展示。本方式有效解决了查看通知的跨应用跳转痛点。

 

 

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

关键词:UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司

银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发

 

 



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

路由图标情感化设计

前端达人 设计资源

情感化路由路标设计,传递寄递温暖

 

 

作为面客的战略级重点渠道,客户端的查单详情功能日均使用量达千万级别。随着公司业务的不断增长,查单诉求也随之增加。

 

 

 

结合功能体验、业务需求等方面的调研与了解,得出以上地图路由可解决的四个主要痛点。通过轨迹稀释与动态采样、底层数据归集、生动化视效、元素动态运营等手段,提升快递路由信息在地图上传达的透明度与丰富性,方便用户自助查询快递位置等内容,管理客户预期,同时加强用户对功能忠诚度、将客户留存在顺丰的平台上。

 

 

 

确认按照信息精度强化、情感共鸣设计、渠道视效优化三个目标方向来推动需求的实现,同步梳理需求优先级、管理需求迭代,敏捷满足功能诉求。

 

 

信息精度强化

1. 通过梳理线下现有收转运派等全流程操作场景,针对性处理、展示对应运输工具元素,突显顺丰多样场景、多式联运的运输优势。

 

 

2. 拉通多关联系统顺利完成数据流转,纳入包括顺丰小哥/顺丰大哥/同城骑士上报的快递员位置、陆运系统等上报的货车位置,辅以里程数等高精度信息完成展示。

 

图标应用延展

 

 

新年图标

 

造型:以新年元素老虎,兔子延展,直观的反映新年气息,瑞狮迎新。飞机挂上中国结和小兔子开飞机突出新春的喜庆氛围。小哥派件图标给小哥戴上瑞狮/兔子帽子,增加年味,寓意小哥给大家送福了。
色彩:俯视插画风格配合高饱和色彩,活泼氛围加上新春元素体现趣味性。
执行难点:由于图标尺寸很小,需要顾及图标的精美丰富程度,但也不能画得过于复杂繁琐,在精简与精美的中间做一个良好的平衡。

 

传统节日图标

 

造型:由于劳动节是个严肃的节日,需要高举劳动的旗帜, 不分贫富贵贱,愿大家努力齐进取。所以在货车和飞机后面飘着鲜艳的红旗,上面标着“劳动光荣”字样。小哥派件图标后面带着一个麦穗满满的袋子,寓意共同努力就会得到丰收的成果。端午是“飞龙在天”吉祥日,龙和龙舟文化始终贯穿在端午节的传承历史中,所以我们以龙舟为载具,用卡通的形式简化龙舟繁杂的造型,让用户一看就能产生共鸣。另外飞机及小哥的图像中就加上粽子,清晰明了传达出端午送安康的信息。
色彩:劳动节俯视插画风格配合温暖的色彩,突出劳动节的光荣与奋斗的热情。端午节以黄绿色为

 

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

关键词:UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司

银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发

 


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

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

雪涛 设计管理与成长

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

你好,我是《用户体验四维度》

雪涛 设计管理与成长

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

小程序UI设计规范

雪涛 设计管理与成长

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

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

雪涛 设计管理与成长

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

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

分享达人 B端界面设计文章及欣赏

在当今高度信息化的商业环境中,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
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

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

分享达人 B端界面设计文章及欣赏

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

日历

链接

个人资料

蓝蓝 http://www.lanlanwork.com

存档