设计资源

优秀的用户界面设计

前端达人 设计资源

今天为大家分享一些 Good UI 在一些项目中获取的设计以及运营策略等方面的经验。

 

 

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

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

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



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

我眼中的用户体验

前端达人 设计资源

 用户体验是什么?作为相关从业人员,这个好像不是问题的问题关系到我们对职业的认知。百度一下“用户体验是什么”,有许许多多的定义,定义形式多,本质大致一样,我找了一个有代表性的咱们解读看看,“用户在使用产品过程中的操作感受,以及在此过程中产生的心理活动。”

 

  在此之前,请大家先思考这2个问题:

 

1 高跟鞋的用户体验好吗?

  高跟鞋很多女生爱穿,拥有一双CL更是品牌控的梦想,穿起来腿又长臀又翘,但就是很痛苦很累人。

 

 

2 工厂流水线的用户体验好吗?

  传说富士康的工人是候鸟工人,就是说农忙时间在家务农,农闲时在工厂工作。对于新的工种,工人们付出的学习努力,因为一道属于自己的工序完成最低的只需要1秒不到,属于一下就学会,工厂的培训成本低,流水线的工作效率也是相当滴高。

 

 

  心里有答案了吗?还是不确定?

  现在我们看多一次概念:“用户在使用产品过程中的操作感受,以及在此过程中产生的心理活动。”请看概念的三个关键字:用户、操作、心理。

 

  用户体验用户体验,头两个字是“用户”,这是一切的前提,别人问你某样东西用户体验好吗?你得先反问他用户是谁。周杰伦孩子觉得好听,妈妈听不懂。同理,高跟鞋体验好吗?得看谁穿!男人穿,体验肯定不好,既不舒服,穿出去还被人笑话。那女人穿呢?姑且把问题再放放。流水线体验好吗?得看谁用!流水线效率那么高,老板爽,那工人呢?

 

  再看操作和心理。这是用户体验的两个维度,你也可以看成理性和感性,或者生理和心理,又或者交互和情感之类的。也就是说,用户体验好坏,要看这两个维度的综合,看看两个打分加起来绝对值分是不是正的,正多少。这分数很明显对不同用户来说,是不同的(用户是前提的关键就在这里)。比如高跟鞋,我是男的,在生理上,痛苦,负分,心理上,被耻笑,负分,所以体验对于我来说就是负的。如果我是女生,生理上,痛苦,但可能还能忍受,分可能低一些或者负少少,但,是,心理上,我觉得腿长了,变漂亮了,更重要的是,别人对我投来的眼光让我觉得很暗爽,高分。两者一综合,体验的分还是正的,而且有些人还能打特高分,所以高跟鞋一直存在到今天。同理,流水线,老板是爽啦,工人的生理上的打分,低分吧?那么累。心理上,枯燥,低分,当然不排除有些技术能手会被奖金激励啊(这又涉及到钱的问题,也就是商业问题了,姑且不论)。所以总分算起来,还是低分多吧。所以请记住,高效的产品体验并不一定好。

 

  于是乎,就有这么样一个公式出来:

  体验分=生理分+心理分,谁用谁打分

 

  再给大家举几个例子。

  爱马仕,女人的美梦男人的噩梦,铂金包和凯莉包直接秒杀男人钱包,送女人们一个,体验分绝对打高分。

 

 

  这两款手表,有人选左边有人选右边,选左边的人更容易在情感上给高分,选右边的人更在乎功能实用性,也就是操作上给高分。

 

 

  这是我用的第一款手机,motoT191,到现在还没被我扔掉,操作上早就没用了,情感上却必然高分,很简单,它有我大学的回忆呀。你是不是也留了很多“没用”的东西?这就是心理上给高分了。

 

 

  所以说,你想设计一个体验好的产品,在操作上发力吧,在情感上发力吧。

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

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

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



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

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

前端达人 设计资源

一、B端用户需求的深入理解和分析
在当今高度信息化的商业环境中,B端产品已成为企业高效运营和持续发展的关键支撑。
这些产品不仅提供工具和服务,更是企业优化流程、提升工作效率和竞争力的有力武器。然而,要打造一款成功的B端产品,关键在于对
B端用户需求的深入理解与分析。
B端用户,
如企业决策者、团队管理者和专业人员以及普通员工,他们在日常工作中处理复杂的业务流程,对数据分析、系统整合、安全性等方面有着极高的要求。
这些用户的独特需求不仅体现在产品的基本功能上,更涉及到产品的易用性、可扩展性以及服务支持等多个层面。
深入探究B端产品设计的核心
 
 
深入探究B端产品设计的核心
 
 
深入探究B端产品设计的核心
 
 
深入探究B端产品设计的核心
 
 
深入探究B端产品设计的核心
 
 
需求分析是产品设计的核心环节,它要求设计师深入探究用户的需求、痛点和期望,从而确保产品能够满足用户的实际需求。对于B端用户而言,需求分析的重要性更为突出。这是因为B端产品往往需要解决企业运营中的具体问题,其设计必须紧密围绕用户的需求展开,以确保产品的实用性和高效性。
在需求分析的过程中,我们需要关注以下几个方面:
深入探究B端产品设计的核心
 
 
首先,
功能性需求
是B端用户最为关注的一点。他们需要产品具备强大的数据处理能力、灵活的业务流程管理功能以及全面的安全防护措施。这些功能性的需求是确保B端产品能够满足企业日常运营需要的基础。
其次,
易用性需求
同样不容忽视。尽管B端产品往往面向具备一定专业素养的用户,但简洁直观的界面设计、流畅的操作体验以及可定制的用户界面仍然是提升用户满意度的关键。通过优化用户交互流程、减少冗余信息,我们可以帮助用户更高效地完成工作任务。
此外,
整合与扩展性需求
也是B端用户关注的重点。企业需要产品能够与其他系统无缝对接,实现数据共享和业务协同。同时,随着企业业务的发展,产品还需要具备良好的扩展性,以支持新功能的快速添加和部署。
最后,
服务与支持需求
同样重要。B端用户期望获得专业的客户支持、完善的培训机制以及丰富的资源文档,以确保产品的稳定运行和持续优化。
深入探究B端产品设计的核心
 
 
综上所述,深入理解B端用户的独特需求是打造成功B端产品的关键。通过全面的需求分析,我们可以确保产品不仅满足用户的基本功能需求,更在易用性、整合扩展性和服务支持等方面提供卓越的体验。这将有助于提升企业的运营效率,进而推动其在激烈的市场竞争中脱颖而出。
 
二、B端用户的独特需求
B端用户,即企业级用户,他们的需求与C端个人用户有着显著的差异。
这些差异主要体现在以下几个方面:
深入探究B端产品设计的核心
 
 
业务强驱动性:
B端产品的主要需求来源于业务方,由业务驱动并主导。
这是因为B端产品主要是为了解决组织内某个或某一类具体业务领域的问题。业务方通常离业务最近,也最了解使用用户的需求,因此他们在产品需求上拥有较大的话语权。
用户群体差异大:
不同于C端用户需求的大同小异,B端用户群体的需求差异巨大。
这些差异主要体现在角色差异、组织差异、管理层级差异、用户深度差异、客户规模差异、客户行业差异以及客户性质差异等。这种多样性要求B端产品在设计时需要考虑更多的变量和定制化需求。
高效性与便捷性
企业级用户非常重视工作效率和操作流程的简化。
他们希望产品能够提供高效的功能和简洁的操作界面,以减少工作中的繁琐步骤和时间成本。因此,B端产品设计需要注重提升用户的工作效率,提供便捷的操作体验。
安全性与稳定性:
对于企业级用户来说,数据安全和系统稳定是至关重要的。
他们需要一个可靠且安全的平台来处理和存储敏感的业务数据。B端产品必须能够提供强大的安全防护措施和稳定的系统性能,以确保企业业务的正常运行和数据的安全。
定制化与灵活性:
每个企业的业务流程和需求都是独特的,因此B端用户希望产品能够根据自身的实际情况进行定制。
他们需要一个灵活可配置的产品解决方案,以满足企业特定的业务需求和工作流程。
集成性与兼容性:
在企业级应用中,B端产品往往需要与其他系统或软件进行集成,以实现数据的共享和流程的协同。
因此,产品的集成性和兼容性是企业用户非常关注的一个方面。B端产品设计需要考虑到与现有系统的无缝对接和数据交换的便捷性。
深入探究B端产品设计的核心
 
 
综上所述,B端用户的独特需求主要体现在业务的强驱动性、用户群体的大差异性、对高效便捷的追求、对安全稳定的重视、对定制化和灵活性的需求以及对集成性和兼容性的关注等方面。这些需求特点要求B端产品在设计时必须充分考虑企业级用户的实际需求和业务场景,以提供符合用户期望的优质产品解决方案。
 
三、
B端产品设计的核心原则
B端产品设计需要遵循一系列核心原则,以确保产品能够满足企业级用户的独特需求。
深入探究B端产品设计的核心
 
 
3.1 用户中心设计
深入理解目标用户:
在设计B端产品时,必须首先了解目标用户,包括他们的工作流程、需求痛点以及行为习惯。这需要通过深入的用户研究和调查来实现,以便更好地设计适合用户的产品。
符合用户期望:
产品的设计应以用户为中心,确保功能、界面和操作都符合用户的期望和习惯。这有助于提高用户满意度和使用效率。
3.2 简洁直观的界面
简约性:
B端产品的交互界面应该简洁明了,避免过多的复杂功能和视觉元素。这样用户可以更轻松地理解和使用产品。
直观性:
界面设计应直观易懂,减少用户的学习成本。通过明确的导航和标识,帮助用户快速找到所需功能。
3.3 强大的功能支持
满足业务需求:
B端产品需要提供丰富的功能,以满足企业复杂的业务需求。这些功能应涵盖用户在工作流程中的各个环节,确保用户能够顺利完成工作任务。
灵活配置:
产品功能应具备高度的可配置性,以便用户根据自身需求进行灵活调整。这有助于提升产品的适用性和用户体验。
3.4 高度可配置性
定制化体验:
 


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

B端体验设计10大好处

前端达人 设计资源

现代管理学家-彼得.德鲁克说过:“如果你不能够测量,那么就没法很好的管理它”。B端体验设计曾经在我的心中是不可测量的,觉得它很缥缈,它就是一种感受,一种体验,而每个人的感受又是不一样的,想法也是不一样的,这又该如何去评判体验的好与坏;这一度让我苦恼,经过学习研究,发现其实也没那么飘,本文将通过具体的案例来跟大家探讨体验设计在B端设计中的应用,以及它有哪些具体的思维模型和可量化的方法论。
 
B端体验设计10大好处
 
 
 
 
一、B端用户体验设计的10大好处
 
1、主动吸引
好的用户体验是用户积极参与,它就是那道光,让用户不自觉地被吸引,而主动靠近产品,想要一探究竟。
 
百度网盘企业版把产品简介以动画的形式放在了首页,形式非常的美观时尚,让人不禁想要点进去看看,进去之后是一个详细的产品介绍说明,说明也是通过MG动画的形式展出的,画面美轮美奂,让人不禁想多看几遍,产品的吸引感比较强。
 
B端体验设计10大好处
 
 
 
 
2、提升效率
好用的B端产品,可以提升用户操作效率,让你的工作如同行云流水。相反,如果产品难用,那就像是用钝刀切黄油,不仅效率低下,还可能让人心情烦躁。
 
人人都是产品经理在文章投稿发布页面,设置了一个文章导入功能,支持文章从公众号、简书、知乎专栏导入,大大节约了投稿人编辑文本和排版的时间,节约了用户宝贵的时间,投稿人不需要重复排版去应对每个平台的需求,也加大了人们投稿的意愿。
 
B端体验设计10大好处
 
 
 
 
3、愉悦心情
面对每天都要用的产品,若其使用体验好,用户就会觉得工作也是一件令人愉悦的事情,若使用体验差,就会影响用户工作时的心情,严重的还会阻碍用户(员工)KPI的达成,导致用户的离职率上升。
 
飞书的登录加载页非常有趣,小鸟不停啄食以及铃铛不断摇摆的动画,看着非常的童趣,感受到了童真的快乐和轻松愉悦的氛围。
 
B端体验设计10大好处
 
 
 
 
4、符合心智
B端产品若没有体验设计这一环节,产品想法落地就只是研发逻辑的呈现,而不是用户需求与用户心智的呈现,无法给用户提供合理的人机交互。体验设计打开了用户需求和心智的世界,让用户感受到产品是为他们量身定制的。
 
今年由Alibaba Design发起D20全球设计院长峰会,他的官网首页设计的特别符合用户的心智,画面简洁又不失时尚,还带着点动感,特别的耐看,人性深处也更多的会对动的东西产生更多的注意力。
 
下边的导航栏,设计的也非常贴切,正好在一个电脑屏幕中展示,想要看哪个部分,直接点击对应的导航栏就能精准的跳到该部分,不需要用户进行长时间拖拽就能看到。
 
B端体验设计10大好处
 
 
 
 
5、简化流程
在符合业务逻辑的基础上,体验设计可以优化B端复杂的流程,把复杂的迷宫简化成一条直线,从而让用户在操作界面时感觉到畅通和舒适。
 
腾讯文档的登录页,没有让用户输入一连串的账号和密码,通过二维码的方式,让用户扫码登录,快捷又方便,简化了用户登录的流程。
 
B端体验设计10大好处
 
 
 
 
6、优化布局
体验设计师参与过的界面布局,与研发工程师构建的界面布局完全不同,这种不同体现在设计思路和设计结果上。体验设计师从用户视角出发,在布局上追求信息主次分明、重点突出、同类功能样式一致性等,让用户用着更舒服;体验设计师就像是室内装潢师,他们把界面布局设计得像一个温馨的家,每个角落都井然有序,每个功能都恰到好处。
 
这是日常参与的一个页面设计,上面这个是研发工程师设计开发的页面,下面那个是我运用体验思维设计的一个新的改良页面,通过对比发现,运用了体验思维的页面设计,信息传达更加的清晰,信息之间的层次感更强,美观度也更高。
 
B端体验设计10大好处
 
 
 
 
7、反馈友好
在体验设计师没有介入之前,B端产品界面的反馈信息要么意思表达不清晰,要么是一连串的代码,体验设计师参与后让用户更加容易理解产品的设计思路,让产品变得“会说话”,提供清晰易懂的反馈,甚至在你迷茫时,还能给你指明方向,告诉你下一步该干什么。
 
网络拓扑图是描绘网络结构和设备间互联关系的图形化表示,它直观地展示了网络中各个节点(如计算机、服务器、交换机、路由器等)以及它们之间的物理连接或逻辑连接,通过可视化的拓扑图,给运营人员良好的使用反馈,让他们知道每台设备的运营情况。
 
B端体验设计10大好处
 
 
 
 
8、促进增长
对于Saas产品,在满足业务场景的条件下,好的体验就像是口碑的种子,一旦种下,就会生根发芽,让越来越多的人愿意为它付费,甚至愿意将它推荐给朋友,这样,你的产品就像一棵茁壮成长的树,不断吸引新的养分。
 
oneThingAI推出邀请有礼,每个会员给他人推荐会获得相应的代金券,再加上这个工具的体验感很好,工具非常的便捷,一学就能快速上手,我记得当时这个优惠活动,让很多的AI爱好者纷纷注册购买,这个推荐有礼的策略以及良好的产品体验,很好的促进了产品销量的增长。
 
B端体验设计10大好处
 
 
 
 
9、减少投诉次数
好的体验设计会让人觉得很人性化,感觉使用过程像呼吸一样自然,更容易获得用户的认可,从而减少投诉次数,提升用户的满意度。
 
以下是自己曾经参与过的项目,上面那个是完全没考虑用户体验,没考虑用户喜欢什么样的风格,有什么特殊化的要求,哪些参数、指标需要明显化的展示?没有这些考虑,结果很惨,被客户一顿乱批,还被投诉到了公司老大那里去。
 
下面那个是跟客户反复沟通后出来的效果,考虑到了客户对地域文化的表达有需求,对关键数据指标的展示有需要,对风格有着朝气、蓬勃、阳光的表达有需求,抓取到了这些关键信息后,开始靠近用户的需求,结果客户很满意,也再没有因为UI被投诉过。
 
B端体验设计10大好处
 
 
 
 
10、超越竞品
B端市场竞争越来越激烈,产品越来越多,靠功能多已无法轻易胜出,还需要好的用户体验加持,好的用户体验就像明星的光环,它能让产品在众多竞争者中脱颖而出,成为用户心中的明星。
 
360浏览器的体验做的是相当的好,在众多的浏览器中可谓是一股清流,看到它头顶部的动效没,那个是鼠标移上去,那些花才会动,不移上去,不会动,这个动效它跟传统的动效不一样,它让用户与它之间产生了一个交流的动作,非常的吸引人,产品的情感化做的很好。
 
B端体验设计10大好处
 
 
 
 
二、B端用户体验设计中的三大模型
 
C端是客户用户体验,B端则是企业用户体验,他是为大公司及其员工内部使用的应用程序创建的用户体验设计。B端设计常见的用户体验度量模型有以下三个:
 
B端体验设计10大好处
 
 
 
1、HEART + GSM模型(Google)
 
1.1 简介
 
Google公司在2010年提出的HEART模型,其以用户为中心的设计理念,成为了业界广泛认可和应用的度量体系。HEART模型不仅仅是一套度量工具,它更是一种思维模式,引导我们从用户的角度出发,深入理解并优化用户体验。
 
B端体验设计10大好处
 
 
 


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

折叠屏设计规范

前端达人 设计资源

持续更新中……

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
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

移动设计模式

前端达人 设计资源

现在人们渐渐用智能手机代替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端基础 | 52000余字总结 B 端基础设计知识

前端达人 设计资源

缘起
最近看汪曾祺的《叹息桥》中的一句话,我必须分享给你。缘起我在人群中看见你,缘散我看见你在人群中。是的我想你在人群中看到我。这就是最初我分享这系列设计文章的初衷。
 
慢慢发现其实分享也是一件快乐的事情、而且在分享的过程中我自己也收获了很多。而且对设计的理解也更深了。更快乐的是收获了一群一起同行的小伙伴、这个还挺开心。和他们一起在群里吹水、一起吐槽。一起讨论问题、那真的是快乐无边。哈哈哈
 
上面扯多了。我们开始今天的内容。今天内容分三部分、第一部分内容总结是对我写的这个系列文章每一篇文章内容和核心的小总结。第二部分这个系列的文章页算是告一段落了、下一阶段我会做些什么。第三部分分享一些我写文章的感受、然后煽煽情。
 
1、
内容总结
因为在写这个系列的文章时我加入了很多扩展知识。希望告诉你更多。这里我会把主要的这个系列的知识总结一下让你尽量一次看完。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
1.1、登陆页面
 
最近就在做我们系统的登陆页面优化。回头我会写一个项目总结给你们看。这里介绍一下B端登陆页面该怎么去做。其实还挺简单了。因为现在主流的布局就那几个。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
登陆页面:布局分为三种;居左、居右、居中
页面元素:导航、登录框、背景(装饰元素)、互联网信息。
导航
高度:68px或48px、文字大小:14(大部分)16(也可以)
登录框
大小:大小尺寸不统一、没有固定的尺寸。可以根据自己和领导的喜好决定。对还有要承载的内容多少。
登录方式:扫码、手机号、账号、第三方
标题切换字号:我喜欢用26px(也要其他的16、/18、/20)
输入框高度:48px
按钮文字和高度:16px、和输入框高度一直就行。
背景
可以是配的插画(这种最简单)、一般都是科技风
底部
要不就是单纯的互联网信息。要不就是快捷入口、联系方式什么。这个就不多说了正常排版就行。
 
1.2、筛选
 
筛选相对是很简单的部分把、因为你直接用规范里的组件。虽然不会很优秀、但是刚重要的是不会出什么错误。主要是就大厂规范能够快速的帮你解决问题。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
筛选的意义:定位数据、缩短查询路径、数据内容分类
 
筛选类型:基础筛选组件(就是我们常见的页面顶部的筛选)、高级筛选(就是那些需要你定义想一想的筛选部分)
 
筛选布局:顶部和左侧
 
筛选样式:平铺;折叠;Tab筛选;单侧选择;表头;综合
 
1.3、栅格
 
这里其实还简单的、首先你要明白栅格在我们的设计里面很重要。你不用当然也可以呀。但是你想要做的更好那就用起来你会有意外的收获。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
怎么用:直接看ant design、TDesign、阿科desing的规范就行、写的很清楚。
 
注意点:不要硬套、我们要根据自己的系统去自己定制。比如我们系统、用的是ant design的框架、但是我们的网格系统是自己定制的。因而我们的边距不是24px、我们是20px
 
1.4、颜色
 
这部分相对来说是我自己的弱项、在写当时的文章的时候也是收获颇多的。明白了大厂规范是怎么确定自己色彩设计规范的。也清楚了自己应该怎么去规定自己的设计规范。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
主色确定:常见的方法、1、用自己品牌logo的颜色;2、用行业色
 
配色确定:我一般是找竞品、或者优秀的配色方案、来确定自己的。多参考大厂的配色方案。虽然不全是好的。但是好的还是站大多数的。
 
大厂色彩:这里我分享了大厂的色彩是怎么去确定的、如何去确定。可以去看看。我在自己的工作中色彩的应用就参考了ant Design的色彩应用方式定制的。
 
1.5、字体
 
字体部分我觉得最有意思是的是分享了、我们宋体、楷体、隶属、甲骨的发展历史和由来。还有就是如何去设计一款自己的字体。还有后台字体规范的制定
B端基础 | 52000余字总结 B 端基础设计知识
 
 
中国文字:这里中国文字的发展历史、所有字体的产生都是有自己发展的历史原因的。很有意思。建议你看看、可以当做你喝酒吹水的谈资。
 
字体规范:我们大部分的字体会采用黑体、可读性强、亲和、现代、清晰。
 
字号:最新的字体12px、正文、14px、通过+2, +4,+8,+12,+16 的步数增长规律
 
行高:通过逻辑得到这样一个公式:「 行高 = 字号 + n 」,8 作为变量正好同时满足与 1.5 倍的「 14px & 16px 」常用字号行高保持一致,总体文字间隙稳定呼吸,行高空间较一致得出计算公式:「line-height = font size+8」
 
字重(就是字粗):建议使用两种常规和加粗(在前端里一般就是400和500)
 
颜色:我是主张带有色彩倾向的颜色应用的。根据字体样式的设计原则,制定了简易好记的透明度数值区间并且将该字色与界面系统的色彩系统结合,文字显示色彩对比满足至少1:4.5( AA级别)。且验证了其中的实用性,共分为亮暗两种模式,4 个色阶。
 
1.6、ICON(图标)
 
你要统一风格成套的去找参考和应用。在我们的系统里我是自己画icon的然后传到阿里巴巴矢量图库让开发直接引用。这个是自己累点、但是可以保障实现效果。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
设计原则:准确、简单、节奏、愉悦。
 
设计实战:采用栅格
我是用的阿里巴巴矢量图库的设计规范、因为我要传到这个平台应用
 
ICON分类:交互性图标、装饰性图标、说明性图标
 
1.7、按钮
 
按钮我觉得这部分是相对简单的、也是要做到风格的统一。直接用大厂组件然后根据自己平台的风格、不如圆角的大小其他的倒是没什么了。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
常规按钮:次要按钮、主要按钮、文字按钮、图标按钮
 
按钮状态:可用、禁用、加载、悬浮
 
尺寸:把按钮分成:迷你、小、中、大,四种尺寸。高度分别为:24px/28px/32px/36px。推荐及默认为尺寸「中」。
 
样式:各个规范对按钮形状的规范基本都一样。提供长方形、正方形、圆角长方形、圆形四种形状。
 
 
布局:这里分享了两个概念、古登堡法则、费茨定律、告诉你我们为什么这么排版。对产品和甲方很有用、哈哈、这是我的秘诀。
 
1.8、弹窗
 
后台弹窗是一个很复杂的内容、但是也是一个相对很好处理的部分。只要你做好规范这部分、简直就是一点开胃小菜。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
弹窗是一个我头痛的问题因为不太好规范。但是我还是把这个弹窗系统、在我们的体系中形成了一个小的规范。感谢领导、感谢前段端的龙哥。
 
我们把前段粗略的分为400px、600、800、1000、最大、广告。业务里我们会采用4、/6、/8、/1、最大、推广和通知我们就统一的尺寸。
 
1.9、表单
 
什么是表单:我理解表单就是系统为和用户进行交互、所要收集用户信息的或获得用户反馈的一种方式的载体。在后台产品中对我们数据做的增、删、改、查、验都可以通过表单完成。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
我们在后台系统中、大部分的场景都会使用上表单。信息采集呀、编辑数据呀等。在表单设计时要遵循的原则、简洁明了、清晰高效、适应业务、即时反馈。
 
表单的构成结构、基本都是由、标签、域、提示、操作按钮这四个部分构成的。
 
表单布局在表单中我们采用多种布局方式。信息分组、内容列表、标签页、分步骤。
 
1.10、表格
 
B端设计中,对数据浏览、操作、过滤、展示是最高效的。这你就不用质疑了。因为结构简单、精准高效、数据形式丰富。
 
B端基础 | 52000余字总结 B 端基础设计知识
 
 
表格是用来收集、整理、组织、分析数据的二维矩阵。它由内、外两部分组成。其中,内部包含表头、表体、底栏等。外部包含标题、筛选区、操作按钮区等。
 
表格的类型:基础表格、树形、子表格、交叉表格、图表表格、卡片表格
 
表格的样式:网格型、水平线型、斑马纹、自由形式
 
进阶的一些知识就是表格数据的优化和表格的交互知识了。想了解去看更详细的我的文章11表格设计和12表格优化项目实战。
 
1.11、大厂规范
 
如果你是一个小厂B端设计师、刚好没有自己平台的设计规范。那就去直接用的场的设计规范。去用没问题的。大厂那么多的牛逼设计给你做好了你不用。都塞到嘴巴上、不吃就不给面了。
B端基础 | 52000余字总结 B 端基础设计知识
 
 
在使用大厂的设计规范时然后慢慢的积累自己平台的设计规范。逐渐的你就会形成一个属于你们自己平台业务的高质量设计规范了。
 
2、计划
 
这个基础系列的文章就这样写结束掉吧、希望可以对你的B端设计有所帮助。之后我会写二个系列的文章、去分享我理解的B端设计。
 
B端基础 | 52000余字总结 B 端基础设计知识
 
 
第一个系列是B端基础设计的加强版、B端高手。B端高手是会写我的实战里是怎么去做的。其实就是我的设计项目复盘。
 
第二个系列就随便的去分享一些设计知识。比如哪些什么什么原理呀、什么什么法则呀、在设计里的应用。而且会提出和讨论一些设计问题。
 
3、写在最后
 
分别是为了更好的相见、我一直希望我的文章可以帮到你。慢慢来路还很长、总是要一步一步的来。很快我们会再次相见。我是KING(国王)
 
B端基础 | 52000余字总结 B 端基础设计知识
 
 
新的开始见.......
 
注解:标题的40000余字也好、50000字也好都是说的我这个系列总计的字数、因为想让你们看到。
 
 
 
 
 


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

【万字干货】B端进阶|表格数据过滤分析

前端达人 设计资源

一、为什么需要数据过滤
在B端(Business to Business,即企业对企业)应用中,表格数据过滤功能是一项非常重要的功能。它能够帮助企业用户更方便地管理和查询表格数据,提高工作效率和数据准确性。因此一个体验感良好的数据筛选功能有助于用户的任务处理效率。帮助系统更加友好、易用,从而增加用户的满意度和使用频率。
在确定过滤类型之前,首先,需要确定哪些字段需要进行筛选。这需要根据业务需求和用户习惯来确定。例如,在销售系统中,可能需要对产品名称、销售日期、销售数量等字段进行过滤;在人力资源系统中,可能需要对员工姓名、部门、职位等字段进行过滤。
 
二、数据过滤的类型
根据确定的过滤条件,需要设计合适的过滤方式。常见的过滤方式包括:1)搜索;2)页签导航;3)条件筛选。不同类型的过滤方式对应不同的用户目标及数据特点
【万字干货】B端进阶|表格数据过滤分析
 
 
 
三、搜索
搜索是一种通过输入关键词或短语在大量数据中寻找相关信息的过程。在互联网时代,搜索已成为获取信息的主要途径之一。通过搜索引擎,用户可以快速地找到自己需要的内容。
3.1 搜索类型
3.1.1 单条件模糊搜索
介绍:用户在搜索框中输入一个关键词,然后搜索引擎返回与该关键词相关的结果。
【万字干货】B端进阶|表格数据过滤分析
 
 
 
  •  
    优点
    :简单易用,用户只需要输入一个关键词即可快速找到相关信息;
  •  
    缺点
    :搜索方式可能不够精确,因为用户可能没有提供足够的上下文信息,导致搜索引擎返回的结果与用户的期望不符
 
3.1.2 多条件模糊搜索
介绍:指用户在搜索框中输入或选择多个关键词,然后搜索引擎返回与这些关键词都相关的结果。可选择是后台配置查询条件还是用户配置。
【万字干货】B端进阶|表格数据过滤分析
 
 
 
  •  
    优点
    :更加精确,因为用户提供了更多的上下文信息,可以帮助搜索引擎更好地理解用户的意图;
  •  
    缺点
    :需要用户输入更多的关键词,增加了用户的输入成本。
 
3.1.3 搜索条件切换
介绍:指用户在搜索框中输入一个关键词后,可以手动切换到另一个关键词进行搜索。
【万字干货】B端进阶|表格数据过滤分析
 
 
 
  •  
    优点
    :灵活性和自由度更高,用户可以根据自己的需要随时切换关键词进行搜索;
  •  
    缺点
    :需要用户手动操作,增加了用户的操作成本。
 
3.2 触发方式
3.2.1 实时触发
介绍:实时触发是指当用户在搜索框中输入关键字时,搜索功能会立即进行匹配并返回相关结果。这种触发方式可以为用户提供实时的搜索体验,方便用户快速找到所需信息。通常需要后端服务器的支持。
【万字干货】B端进阶|表格数据过滤分析
 
 
 
  •  
    优点
    :当用户在搜索框中输入文字时,搜索功能会立即提供搜索结果。这种方式可以提供快速反馈,让用户更快地找到所需信息。此外,实时触发搜索还可以帮助用户逐步缩小搜索范围,提高搜索效率。
  •  
    缺点
    :可能会对服务器造成较大的负担,因为每次用户输入都会触发一次搜索请求。其次,实时触发搜索可能会干扰用户的输入过程,因为用户需要不断地观察搜索结果并根据结果进行调整。
 
3.2.2 手动触发
介绍:指用户需要手动触发搜索功能,通常是通过点击搜索按钮或按下回车键来执行搜索操作。这种触发方式可以避免用户在输入过程中频繁触发搜索,提高用户体验
【万字干货】B端进阶|表格数据过滤分析
 
 
 
  •  
    优点
    :用户需要点击一个搜索按钮或使用特定的快捷键才能触发搜索功能。这种方式可以减少对服务器的负担,并且不会干扰用户的输入过程。
  •  
    缺点
    :可能会让用户感到不便,因为他们需要手动触发搜索功能。此外,如果用户忘记触发搜索功能,他们可能会浪费时间在输入过程中。
 
3.3 理解用户的搜索意图
提高用户的搜索效率和满意度。通过提供相关的关键词建议和展示之前的搜索历史,搜索引擎可以帮助用户更快地找到所需信息,并减少用户的搜索时间和成本。此外,这些功能还可以增加用户的忠诚度和满意度,因为它们能够提供更加个性化和智能化的搜索体验。
3.3.1 关键字联想
介绍:用户在输入一个关键词时,搜索引擎能够自动推荐与该关键词相关的其他关键词,以帮助用户更快地找到所需信息。
【万字干货】B端进阶|表格数据过滤分析
 
 
 
3.3.2 搜索历史
介绍:记录了用户之前搜索过的关键词和搜索结果,以便用户在以后的搜索中更快地找到之前查找过的信息。
【万字干货】B端进阶|表格数据过滤分析
 
 
 
四、导航
使用场景:标签切换一般用于和时间、状态的流转有关,且没有交集的数据内容;主要样式有基础、卡片、胶囊等。
 
4.1 页签导航(tabs)
通过点击不同的标签页来切换不同页面或视图的功能。在许多应用程序中,页签导航可以帮助用户快速地找到自己需要的功能或页面。例如,在浏览器中,页签导航可以帮助用户同时打开多个网页,并在不同的标签页之间进行切换。
【万字干货】B端进阶|表格数据过滤分析
 
 
 
优点:
  •  
    直观易用:页签导航简单明了,用户可以快速理解并使用
  •  
    节省空间:页签导航可以在有限的屏幕空间内展示多个页面或部分内容,提高了页面的利用率。
便于浏览:用户可以通过页签快速切换到不同的页面或内容,提高了浏览效率。
 
缺点:
  •  
    导航深度限制:页签导航通常只适用于一级或两级导航,对于多级导航可能会显得过于复杂。
  •  
    内容展示限制:由于页签的空间有限,可能无法展示所有需要的内容,需要用户点击后才能查看全部内容。
 
4.2 卡片导航
【万字干货】B端进阶|表格数据过滤分析
 
 
 
优点:
  •  
    内容丰富:卡片导航可以展示更多的内容和信息,用户可以通过卡片了解更多详情
  •  
    直观性强:卡片导航以视觉化的方式展示内容,更加直观和易于理解
  •  
    交互性强:用户可以通过滑动或点击卡片进行操作,增强了交互性和体验感
缺点:
  •  
    占用空间大:卡片导航需要占用更多的屏幕空间,可能会影响页面的整体布局和美观度;
  •  
    操作复杂度较高:对于一些用户来说,卡片导航的操作可能会比较复杂,需要一定的学习成本
 
五、条件筛选
筛选是一种对搜索结果进行过滤和排序的过程,以便用户能够更快地找到自己需要的信息。筛选可以根据不同的标准进行,例如相关性、时间、重要性等。在许多应用程序中,筛选功能可以帮助用户缩小搜索范围,提高搜索效率。
5.1 页面布局
5.1.1 上下布局
特点:筛选条件和表格数据分别位于页面上方和下方,用户可以逐行查看数据,同时看到筛选条件。
使用建议:适用于筛选条件较少,且数据量较大的情况。用户可以快速浏览数据,同时方便对筛选条件进行修改。
【万字干货】B端进阶|表格数据过滤分析
 
 
 
5.1.2 左右布局
特点:筛选条件和表格数据分别位于页面左侧和右侧,用户可以同时看到筛选条件和数据。
使用建议:适用于筛选条件较多,且数据量较小的情况。用户可以在筛选条件和数据之间进行快速切换,提高操作效率。
【万字干货】B端进阶|表格数据过滤分析
 
 
 
5.1.3 浮层(弹窗/抽屉)
特点:仅展示筛选图标按钮,以浮层形式呈现。可以在当前页面的上方或侧边以浮动的形式展示,不会占用太多页面空间。
使用建议:当页面的空间利用率要求比较高,非高频操作场景时可使用浮层的模式,节省页面空间。
【万字干货】B端进阶|表格数据过滤分析
 
 
5.2 筛选类型
B端表格的筛选类型主要有平铺式、收折式和下拉式三种:
5.2.1 平铺式
介绍:平铺式是将所有筛选项罗列出来平铺在页面上,可以兼容多种数据格式,如数字、文本、标签、枚举值、布尔值等,包含但不限于日期选择期、标签切换、单选框、复选框等多种控件。
【万字干货】B端进阶|表格数据过滤分析
 
 
 
优点
  •  
    直观明了:平铺式筛选将所有选项平铺展示,方便用户快速找到所需选项;
  •  
    易于操作:平铺式筛选通常采用简单的点击或拖拽操作,方便用户进行筛选。
缺点
  •  
    占用空间较大:平铺式筛选需要展示所有选项,因此可能会占用较多的页面空间;
不适合大量选项:如果选项数量过多,平铺式筛选可能会显得拥挤,影响用户体验。
使用建议
  •  
    适用于选项数量适中的情况:平铺式筛选适合选项数量适中,且用户需要直观看到所有选项的情况;
  •  
    可以结合其他筛选方式:如果选项数量过多,可以考虑结合其他筛选方式,如收折式筛选或表单式筛选。
 
5.2.2 收折式
介绍:收折式筛选通常以收折的状态展示筛选条件,只有在用户触发搜索后才会完全展开。一般筛选条件少于6个,可以通过1行或者2行展示筛选项的结果。
【万字干货】B端进阶|表格数据过滤分析
 
 
 
优点
  •  
    节省空间:收折式筛选可以将不常用的选项折叠起来,节省页面空间;
  •  
    易于查找:收折式筛选通常会提供搜索或筛选条件,方便用户快速找到所需选项。
缺点
  •  
    操作相对复杂:收折式筛选需要用户展开或折叠选项,操作相对复杂一些;
  •  
    不适合所有场景:如果用户需要直观看到所有选项,或者需要快速筛选大量选项,收折式筛选可能不太适合。
使用建议
  •  
    适用于选项数量较多的情况:收折式筛选适合选项数量较多,且用户需要节省页面空间的情况;
  •  
    可以结合其他筛选方式:如果用户需要直观看到所有选项,或者需要快速筛选大量选项,可以考虑结合其他筛选方式,如平铺式筛选或表单式筛选。
 
5.2.3 表单式
介绍:表单式是在系统中页面中的筛选区设置下拉筛选条件,用户通过下拉选择筛选条件中的值对数据进行筛选操作。当然筛选区中可能除了下拉选择之外还有输入筛选,下拉筛选和数据筛选共同组成筛选区。
【万字干货】B端进阶|表格数据过滤分析
 
 
 
优点
  •  
    直观明了:表格形式的筛选方式可以让用户直观地看到各个字段和对应的数据,方便用户进行对比和筛选;
  •  
    操作简单:用户可以通过简单的点击、输入等方式进行筛选,操作简便,提高了筛选效率;
  •  
    灵活性高:表格形式的筛选方式可以支持多种筛选条件和筛选方式,用户可以根据自己的需求进行筛选,灵活性较高。
缺点
  •  
    界面拥挤:如果表格中的字段较多,会导致界面拥挤,影响用户的使用体验;
  •  
    数据量大时筛选性能不佳:对于大量数据,表格形式的筛选方式可能需要较长时间才能得出结果,影响筛选效率;
  •  
    不易展示复杂数据关系:表格形式的筛选方式更适合展示简单的数据关系,对于复杂的数据关系可能难以直观地展示。
使用建议
  •  
    根据实际需求选择筛选方式:在选择筛选方式时,需要根据实际需求和数据量的大小来选择适合的筛选方式。对于简单的筛选需求,可以使用表格形式的筛选方式;对于复杂的筛选需求,可能需要考虑使用其他筛选方式,如条件语句等;
  •  
    优化表格布局:为了提高用户的使用体验,可以对表格的布局进行优化,如对字段进行排序、隐藏不必要的字段等;
  •  
    限制筛选条件数量:为了提高筛选效率,可以限制用户可以设置的筛选条件数量,避免过多的筛选条件导致筛选性能下降。
 
5.2.4 浮层弹出式
介绍:页面中仅展示筛选按钮,点击后以气泡或抽屉的方式去承载筛选内容。
【万字干货】B端进阶|表格数据过滤分析
 
 
【万字干货】B端进阶|表格数据过滤分析
 
 
 
优点
  •  
    用户友好:浮层式的筛选条件提供了一种直观的方式来展示筛选选项,用户可以轻松地查看和选择,无需在页面之间切换或变动页面布局;
  •  
    节省空间:通过将筛选条件放在浮层中,主页面可以保持简洁,不受到过多的干扰元素影响,同时也可以避免筛选条件过多导致的页面拥挤;
  •  
    灵活性高:浮层式的筛选条件可以方便地调整和修改,以适应不同的筛选需求和业务变化。
缺点
  •  
    可能会引起混淆:如果用户不熟悉这种交互方式,可能会对浮层式筛选条件感到困惑,需要额外的引导和说明;
  •  
    可能会影响用户体验:浮层式的筛选条件需要用户手动关闭或选择选项,如果操作不够便捷或流畅,可能会影响用户体验;
  •  
    可能会影响页面性能:如果筛选条件过多或数据量较大,浮层式的筛选条件可能会导致页面加载速度变慢,影响用户体验。
使用建议
  •  
    提供清晰的引导:在应用中使用浮层式的筛选条件时,需要提供清晰的引导和说明,帮助用户更好地理解和使用;
  •  
    优化关闭和选择操作:为了提高用户体验,需要优化筛选条件的关闭和选择操作,使其更加便捷和流畅;
  •  
    考虑数据量和性能:在应用中使用浮层式的筛选条件时,需要考虑数据量和页面性能等因素,采取相应的优化措施。
 
5.2.5 表头筛选
介绍:位于表格表头区域,每一列表头可做单列筛选,也可多列同时筛选。
【万字干货】B端进阶|表格数据过滤分析
 
 
 
优点
  •  
    直观明了:表头筛选将筛选条件直接展示在表格的表头位置,方便用户直观看到所有可用的筛选条件;
  •  
    提高效率:表头筛选可以减少用户的操作步骤和时间成本,提高筛选效率。
缺点
  •  
    适用范围有限:表头筛选通常适用于简单的单字段筛选或单列筛选,对于多字段或多列的复杂筛选需求可能不太适用;
  •  
    可能影响表格美观度:在表格中添加多个表头可能会影响表格的美观度,需要权衡设计和用户体验之间的平衡。
使用建议
  •  
    适用于简单筛选需求的情况:表头筛选适合简单的单字段或单列的筛选需求,如根据姓名、性别等进行筛选;
  •  
    可以结合其他筛选方式:如果用户需要复杂的筛选需求,可以考虑结合其他筛选方式,如平铺式、收折式或表单式等。
 
5.2.6 已选条件
介绍:将已经录入的条件展示在查询条件的下方,可快速删除
【万字干货】B端进阶|表格数据过滤分析
 
 
 
优点
  •  
    用户体验:显示已选条件可以帮助用户更好地理解筛选结果,提高用户体验。用户可以直观地看到哪些条件已被选中,从而更好地理解数据的筛选结果;
  •  
    可视化效果:在筛选区显示已选条件,可以增强表格的可读性和可视化效果。筛选条件的显示可以提供一种直观的方式,帮助用户更好地理解数据和筛选结果;
  •  
    筛选灵活性:如果筛选区显示已选条件,用户可以根据需要轻松地修改或删除已选条件,提高筛选的灵活性;
  •  
    筛选逻辑清晰度:通过显示已选条件,用户可以更好地理解筛选的逻辑。这有助于用户更好地理解数据之间的关系和关联,提高数据分析的准确性;
  •  
    筛选操作效率:对于大量数据的筛选,显示已选条件可以帮助用户更快地定位和调整筛选条件,提高筛选操作效率。
 
六、优化过滤性能
表格过滤是用户在处理大量数据时常用的功能之一。如果过滤性能不佳,用户需要等待很长时间才能看到结果,这将严重影响用户体验。优化表格过滤性能可以减少用户等待时间,提高用户体验。
6.1 索引优化
通过创建索引来提高查询过滤的效率。通过创建模版的方式更快地定位到特定的数据行,通过创建合适的索引,可以显著减少查询过滤所需的时间,提高查询性能。
6.1.1 查询条件模版
将常用的查询方案保存为模版,通过快速切换模版的方式批量替换查询条件,达到快速查询的效果,方便用户快速筛选出所需的数据。
【万字干货】B端进阶|表格数据过滤分析
 
 
 
6.1.1 查询值模版
将常用的查询方案连同值一起设置为模版,在下次切换查询方案时,自动根据预置的值进行自动查询,查询结果保存至浏览器,方便下次调用。
【万字干货】B端进阶|表格数据过滤分析
 
 
6.2 缓存机制
介绍:(浏览器前端)将已经过滤过的数据缓存起来,避免重复查询。
 
6.3 分页加载
介绍:采用分页加载的方式,减少一次性加载的数据量,提高加载速度。
【万字干货】B端进阶|表格数据过滤分析
 
 
 
七、总结
【万字干货】B端进阶|表格数据过滤分析
 
 
在本文中,我们探讨了B端表格数据过滤功能的类型和实现。通过了解用户需求和使用场景,我们提出了表格数据过滤方案。以上方案需要结合实际场景合理配置和选择。同时,我们还介绍了表格数据过滤的实际案例,以及一些性能优化技巧。通过实际应用案例的展示,证明了以上方案的有效性和实用性。
在未来的工作中,我们可以进一步探索表格数据过滤功能的扩展和优化。例如,可以增加对异步数据的支持,提高表格数据的实时性;还可以引入机器学习算法,实现智能过滤和推荐功能。此外,我们还可以考虑与其他系统的集成和交互,以实现更广泛的应用。
总之,B端表格数据过滤功能是提高数据处理效率和准确性的重要工具。通过不断优化和完善该功能,我们可以更好地满足用户需求,提升用户体验,为B端业务的发展提供有力支持。
 


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

日历

链接

个人资料

蓝蓝 http://www.lanlanwork.com

存档