首页

B端设计案例修改

蓝蓝小助手

众所周知,B 端设计更注重交互逻辑思维,设计解决方案的出发点需要建立在提升产品体验层面。一个很小的需求也需要更成熟的思考,这个思考过程如果有更多的集思广益定能探索出更好的设计,提升操作体验度。

帮助用户解决B端引导体系

蓝蓝小助手

B端产品引导体系并不是单一 的某个功能,而是一种体系化的能力,旨在帮助用户更好地使用产品,是产品成功与否的关键因素之一。它通过不同的手段,如在线文档、视频教程、客服支持等,为用户提供全方位 的帮助和指导,使用户能够快速上手产品,提高工作效率。

一看就会的【B 端官网设计】方法解析

蓝蓝小助手

B端产品的官网设计不仅要确保一定的独特性,同时也要关注到客户的浏览体验,通过设计更好地“讲述”产品、“吸引”用户,将尽量多的潜在客户转化为注册用户并完成购买。

B端产品设计优化-基于用户需求调研与分析

蓝蓝小助手

篇文章将深入而全面的讲解用户研究的方法与具体实践,包括用户研究的重要性、用户研究的核心因素、定性定量研究方法、基于产品生命周期的用研方式、用户研究在设计流出中的具体应用等多维度探讨用户研究的核心概念及其实际应用方法,帮助读者更好地理解如何通过有效的用户研究提升产品的用户体验和市场竞争力。同时提供清晰的方法论和实际操作指南,帮助在设计和开发过程中有效地应用用户研究,实现产品与市场的良性互动与成长。

解决设计困惑—— B端全攻略色彩系统

蓝蓝小助手

B端设计的色彩体系如何构建? 色彩基础知识,品牌色,辅助色,可视化色彩

讲讲AI在B端设计上的应用方法

ui设计分享达人

B 端设计领域的 AI 应用
大多数同学目前对 AI 应用的认识只有文生图、对话、驾驶等领域,但 AI 应用的场景远远不止它们。
和头部的明星 AI 产品、模型相比,细分市场的 AI 应用就非常没有存在感了。比如使用 AI 进行财务的审核、饮料配方的调节、工程安全的模拟等等,它可以帮助企业节约大量的人力完成工作。
概括起来,就是一些可以通过计算机完成的(也不止)重复性劳动或标准化流程,都可以引入 AI 的技术进行降本增效。
那在 UI 设计领域中,这些重复性和标准化的工作内容有嘛?
有,但是并不会像外行或者新手想象的那么多。AI 难以覆盖的场景我们过去的分享探讨过,等等也会做进一步的说明,而这里我们先要探讨的,就是能用 AI 实现的 B 端设计场景,具体有哪些。
我们都知道市面上现在有很多开源的 B 端前端框架,各个大厂前赴后继地对它们进行更新和完善,里面包含了非常丰富的组件库。
讲讲AI在B端设计上的应用方法
 
 
这些组件库不不止是 UI 的组件,也包含了前端的对应代码,前端工程师可以快速调用这些代码组件而不用自己去重新写一遍样式和交互。
原则上,使用现成的组件开发就可以快速完成整套项目的前端内容,这可以给前端工程师节省大量时间。所以即使项目中有完整的设计稿,前端在开发过程中也会偷懒直接略过,直接套用框架内的组件实现。
这和设计师直接套用素材完成运营图设计一样,明明有现成的素材在那里,为什么要浪费一大堆时间自己重新画一遍还是用 3D 建模渲染?同理,要是组件足够丰富,满足项目的需要,设计师也可以直接复用官方的组件素材,不用自己设计。
组件化思维的运用,就是项目工作标准化和重复性的根源,不仅应用在设计领域,对于前、后端开发来说同理。
基于这种思路,催生出了一种新的 SaaS 模式 —— 低代码 Low-Code 服务。
即通过少量的代码,或者干脆不用代码,仅通过可视的工具和组件实现软件的开发,并完成相应的配置和部署的工具。
这概念咋一看不就是建站工具?比如有赞、微店之类的,用户可以在里面直接创建并配置店铺,然后以网页、H5 或小程序的形式发布。
但这只是最初级的应用,传统的建站工具属于帮你预制好了主要的参数和功能,用户只能在这个范围内做少量的自定义编辑和设置。但进阶的 Low-Code,会赋予用户更大的编辑范围和自由度,让用户通过可视化的界面创建自己想要的产品和功能。
讲讲AI在B端设计上的应用方法
 
 
这类产品已经衍生出一个规模不小的市场,因为有大量的中小企业不想投入太多的精力和成本进数字化平台的搭建上,
并希望能快速创建不同的管理工具来匹配企业日新月异的发展需要
这里要划重点,对于一部分企业来说,经营模式和业务流程是持续迭代的,如果使用传统的开发模式那么很难跟上这种迭代。
以连锁餐饮品牌举例,前期只在一个城市经营,和后期扩张到全省或全国,采购流程和供应链管理必然会持续进行调整,提交一个采购工单所需填写的字段就会发生变化,同理展示的表格、详情页也要跟着调整。
这类变化往往并没有修改界面的视觉、交互、组件,仅仅是增加和减少字段数据,而用传统的收集需求再输出进行开发的模式效率非常低,所以它们就成为 Low-Code 的最佳应用场景。业务方自己配置、修改直接上线,省掉产品经理、设计师、程序员中间耗差时……
并且对于很多企业来说,只需要应用一些非常基础的功能服务和页面类型。比如我经常提到的 B 端管理系统的四个核心页面类型:
讲讲AI在B端设计上的应用方法
 
 
Low-Code 就是把常规需求标准化,并运用组件化的框架,让用户通过简单的填写和编辑就能生成出想要的页面和功能。
既然需求不复杂,功能、组件、页面、代码都可以标准化,那不用 AI 降本增效还有王法嘛?
所以,使用 AI 生成 B 端页面(不是设计稿)的工具已经在大厂内部开始应用了,开发专属大模型,再把做好的组件喂给模型,用户只要在相应的表单内填入需求,就可以快速生成出落地的页面。
并且各家大厂内部的 B 端组件库,可远远不止对外分享的这些开源框架里包含的数量,还有很多特殊的业务组件,可以让模型得到更好的训练和产出,比普通 Low-Code 模式更简单高效,大幅度提升企业内部B端产品的落地和运用效率。
从已经了解到的信息中,有一部分业务部门已经开始进入实践环节了。且随着技术的迭代,这种工具必然会越来越强大,功能越来越丰富。
所以,了解完这个趋势,设计师和前端工程师迎来大结局了?要被AI技术清洗了?现在该捧起《从0到1学习炒粉》学习了嘛?
这就是下面要讨论的内容。
B 端 AI 和设计的关联
前面做了不少铺垫,就是为了强调,适用于 Low-Code 和 AI 生成的 B 端产品,是有前提条件的,包含下面这些要素:
  •  
    完整成熟的前后端组件库
  •  
    需求使用基础做法就能实现
  •  
    需要经常变动调整的业务需求
  •  
    对设计和交互本身要求不高
而这里面最关键的东西,就是标准化。必须要知道在今天的 AI 的应用发展中,要生成出符合实际工作需要的结果,绝对不是靠输入信息以后它自己 “蒙” 出来的。为了让结果尽可能准确,那么喂给模型的数据也就要越多且越有针对性。
理论上面向 B 端的 AI 工具,只要不断提供给他新的组件、页面,就能拓展它可以实现的范围。但不管你怎么训练它,都要满足标准化的前提。
而标准化,恰恰就是国内 B 端业务的命门……
我们都知道国内 SaaS 行业现在发展非常的混乱,虽然在不同的细分领域有自己的独角兽,比如财务领域的金蝶,OA 领域的钉钉,ERP 领域的用友等等。
但是这些公司就发展状况良好利润丰厚了?24年一季度的 SaaS 头部公司业绩非常萧条,比如网上找到的统计,和国外 SaaS 头部公司的估值和利润形成鲜明的对比:
讲讲AI在B端设计上的应用方法
 
 
为什么国内 SaaS 市场那么惨淡?说到底就是在国内 B 端领域很难实现真正的标准化,而不是国内 B 端市场规模太小。
比如钉钉、飞书这样的 OA 软件已经很成熟了,但它们的实际普及程度一点都不高,而中大型企业又有各种考量,现成的不用就热衷于开发一套自己的系统,简称定制化。这就倒逼 SaaS 工具为了满足更多的企业需求,拼命叠加功能,使得这些 SaaS 工具一个比一个臃肿。
而我们前面提到的 AI 生成,想要普及同样需要面对这种困境,因为模型不管怎么做,它都是基于特定标准化下的产物,它可以满足其中一部分需求,但难以满足其它需求。尤其是国内 B 端定制化需求中,混乱、抽象、联系复杂的问题非常突出。
换句话说,国内 B 端市场的大多数系统,是非标准化的,需要产品团队在面对这些非标准的需求下做出创新和适配,就必须要考虑很多抽象的因素,领导、背景、体验、交互、周期、难度等等。这个过程不可能由业务方自己完成,且最终导出的设计结果,往往会和常规方案有很大的差异。
按常规逻辑考虑的话,那有多少组件我们整理多少组件,早晚有一天不得穷尽设计师思考范围的边界?
且不说获得不同商业项目的业务组件有多困难,如果组件之间没有更底层的思路去规范它们的设计和交互,那么硬凑到一起的项目是非常割裂的,而 AI 在短时间内没办法做到真正理解交互的逻辑并根据使用场景做理性的推理。
所以基于一套团队产出的组件必然是有限的,它们或许可以满足自己项目,但不可能满足市面上所有项目的使用需求。
还有一个很关键的疑问,就是很多人会想,一个项目中的特殊组件往往只是少数,我们用 AI 工具生成多数页面,少数进行定制和独立开发不就行了?
这思路在逻辑上很合理,但实践起来的问题非常多。举个例子比如设计稿直接生成网页这种技术,从20年前我刚了解到网页设计那天说到现在了,这个实现逻辑理应不需要 AI 的参与都能做到,中间也问世了不少产品和工具,但没有一个做成了,反而网页前端工程师都成为一个独立热门职业了(以前是 UI 写)。
原因就是作为商业项目来说,团队需要 “可控性”,机器生成代码虽然容易,但是如果要修改里面的东西怎么办?实际情况就是前端对这些外部代码深恶痛绝,因为改起来太麻烦,而越大的项目改起来难度也越高。而且这个版本的一部分你改了,下个版本工具再生成的代码要不要兼容你前面写的东西?
所以现在即使有设计稿直接生成代码的工具前端也宁愿自己写,但当他们用到第三方框架的时候,能不动框架里面的东西就不动。想要理解这个感受,只要拿这些框架的组件素材用它们的组件、自动布局形式做完一个项目,你们就会产生 —— 还不如自己重做一遍的想法。
讲讲AI在B端设计上的应用方法
 
 
所以生成工具,要不然能一次性完整满足所有需求,要不然就会因为两三成的缺口形成致命的瓶颈。当然,还有远比这些复杂的进一步因素,我就不在这里展开。
标准化无法在定制化的面前获得优势,这是国内 B 端行业面临的直接困局,当然这里有坏的影响也有好的影响。
坏的影响,就是头部 SaaS 企业没办法得到快速的发展,推高整个 B 端软件业的收入水平和吸引力,AI 生成页面这些技术适用范围小,没办法真惠及全体,行业处于反复造轮子但根本没办法停下来。
好的影响,则是头部的 SaaS 企业发展不起来,市占率就低,它们就没办像 C 端市场一样形成非常显著的马太效应,形成事实的垄断。大家重复造轮子,那么提供的就业岗位才多,才能让我国的炒粉行业没有那么卷,竞争没有那么激烈(???)……
讲讲AI在B端设计上的应用方法
 
 
如果你关注过 B 端市场足够多年,你就会明白任何企图用一种标准、方法论直接平铺整个行业的做法,注定是徒劳的,而无序、野蛮、熵增才是不变的主旋律。
但 AI 的作用短时间内完全发挥不了吗?也不是。除了前面提到的一些简单的项目之外,还有一个非常大的可能,就是中小模型的开发会变得越来越容易,而基于项目自研的界面 AI 生成工具很有可能会普及起来。虽然它们不能随心所欲生成任何需求的样式,但可以完全根据业务方的实际需要进行定制,去服务小范围的群体。
这不代表项目里面就不需要设计师,符合这套项目的标准依旧需要设计师去制定,也需要设计师持续输出特殊的页面和组件。
所以,未来很长一段时间内 AI 和 B 端 UI 设计师之间会是互补的关系,而不是替代关系。这也会对岗位要求形成进一步的影响,所以下面是我对 B 端 UI 设计师所需技能的建议:
  1.  
    进一步提升交互能力,尤其是基于业务认知输出交互方案的抽象思维能力
  2.  
    进一步巩固项目设计规范的创建能力,深入了解规范的应用和落地流程
  3.  
    进一步提升全局性设计思维,能提炼核心价值观并在项目中进行应用
  4.  
    进一步了解编程开发逻辑,能更好的配合前后端完成项目的输出提高效率
这些能力的掌握是 B 端 UI 设计师应对未来市场变化的核心竞争力,也是 AI 在短时间内绝对无法替代的东西。
不管是作为已经入行的,还是准备入行的 B 端设计新人,都不用对 AI 技术在 B 端的影响太过担心,自怨自艾,因为
如果 B 端项目的设计都那么简单的话,那么从前端框架普及的那一天起,B 端 UI 设计师就可以集体下岗,而不用等到 AI 应用的那天
换个表述方式,祝大家不会菜到那么轻易就被 AI 给取代了……


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

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

WechatIMG27.jpg

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

 

好的UI规范让系统视觉更加统一,交互更加高效~

资深UI设计者

好的UI规范让系统视觉更加统一,交互更加高效~

Web后台管理系统套件分享|可视化搭建平台的创新应用

资深UI设计者

后台管理系统是企业信息化建设的重要组成部分,它通常具备内容管理、用户管理、权限设置、系统配置、数据分析和安全管理等核心功能。在选择或开发后台管理系统时,应考虑其功能需求、易用性、安全性和扩展性。

Web端设计语言库——数据可视化

ui设计分享达人

一、可视化原则
数据可视化是把相对复杂、抽象的数据通过可视化手段,表达数据内在的信息和规律,促进数据信息的传播和应用。
Dreawer Design 团队总结了以下四个可视化原则,供设计者参考及使用:
1. 准确
数据图表需精准、如实地反应数据信息的变化特征。
Web端设计语言库——数据可视化
 
 
2. 清晰
让设计服务于数据内容,给用户以最为清晰、明确、迅捷的数据展示。用户看到可视化图表时,应能在 5 秒内了解到它的用途,而不是花几分钟都不能理解各个数据的含义。
Web端设计语言库——数据可视化
 
 
3. 简单
可视化结果应该是一看就懂,不需要思考和过度理解,因而选定图表时要理性,避免为了视觉上的效果而选择一些对用户不太友好的图形。
下面为图标类型与认知成本对比:
Web端设计语言库——数据可视化
 
 
4. 美观
优秀的数据可视化界面,会有一套非常严谨一致的版面。这里的一致性需要考虑到布局、结构和内容。
Web端设计语言库——数据可视化
 
 
二、图表解构
1. 构成元素
我们从标题、坐标轴、图例、标签、提示信息、数据图形这 6 个大类,对数据图表进行进一步元素拆解及阐述。设计过程中,需遵循可视化原则来精简数据图表,让用户快速获取图表中的关键信息,完成任务。
 
图表构成 6 大类,元素细分:
1. 标题:图表标题;
2. 坐标轴:X/Y轴线、刻度线、网格线、X/Y轴标题、X/Y轴标签;
3. 标签:数据点、引导线、(文本)数据值;
4. 提示信息;
5. 图例;
6. 数据图形:线、矩形、扇形、环形等。
下面为数据图表的基本构成元素示例(为了便于观察,某些字母做了大写处理):
Web端设计语言库——数据可视化
 
 
除了以上的常规元素,还有常用于饼图、环形图中的“引导线”:
Web端设计语言库——数据可视化
 
 
2. 标题
标题是概括图表主题的说明文字,一个明确、精简的标题可以迅速让读者理解图表要表达的内容。
2.1 位置
一般位于数据图表卡片的左上方。
2.2 使用建议
标题需言简意赅、符合图表主题;尽量控制在 20 个字以内,标题宽度尽量不要超过卡片宽度。
Web端设计语言库——数据可视化
 
 
2.3超长处理
当标题超过长出卡片宽度时,省略标题中间的文字,保住首尾,如“我是...标题”。
Web端设计语言库——数据可视化
 
 
 
3. 坐标轴
3.1 坐标系
坐标轴包含在坐标系的概念里,因此,我们需要先了解坐标系。坐标系是能够使每个数组在维度空间内找到映射关系的定位系统,更偏向数学/物理概念。
 
数据可视化中,最常用的二维坐标系有两种:
笛卡尔坐标系:即直角坐标系,是由相互垂直的两条轴线构成。常用于柱状图、条形图、折线图、面积图等。
极坐标系:由极点、极轴组成,坐标系内任何一个点都可以用极径 r 和夹角 θ(逆时针为正)表示。常用于饼图、圆环图、雷达图等。
Web端设计语言库——数据可视化
 
 
补充说明:
1. 坐标轴由定义域轴(X 轴)和值域轴(Y 轴)组成。条形图中,定义域轴为 Y 轴,值域轴为 X 轴。
2. X轴为水平方向的横轴,Y 轴为垂直方向的竖轴。以下主要针对笛卡尔坐标系的坐标轴构成进行分析:
3.2 坐标轴
定义:坐标轴指二维空间中统计图表中的轴,是坐标系的构成部分,它用来定义坐标系中数据在方向和值之间的映射关系。
构成元素细分:X/Y 轴线、刻度线、网格线、X/Y 轴标题、X/Y 轴标签。
3.3 轴类型
根据对应变量是连续数据还是离散数据,可以把坐标轴分为:分类轴、时间轴、连续轴三大类。
Web端设计语言库——数据可视化
 
 
3.4 X/Y 轴线
颜色层级:X/Y轴线要比网格线层级高、颜色深,这样能让图表有主次区分。
使用建议:有网格线时,柱状图/折线图会隐藏 Y 轴线,条形图则是隐藏 X 轴线,以达到信息降噪、突出重点的目的。
Web端设计语言库——数据可视化
 
 
3.5 刻度线
轴刻度线是轴线上的小线段, 用于指示数值标签在坐标轴上的具体位置。轴刻度线有 3 种放置方式:置内、置中(即交叉方式)、置外。
位置建议:刻度线置中/置内时,可能会和网格线、数据图形重叠,所以建议将刻度线置于数值坐标轴外侧,以呈现最佳显示效果。
Web端设计语言库——数据可视化
 
 
显示建议:
折线图:刻度线、X/Y 轴标签、数据点需要保持在同一垂直线上;
柱状图/条形图:由于单个柱子有很强的对应关系,此时可以隐藏刻度线;
Web端设计语言库——数据可视化
 
 
 
3.6 网格线
定义:网格线是用来辅助图表优化映射关系的,我们需要弱化网格线的视觉效果,来增加数据的可阅读性。
作用:1. 延伸数值刻度至可视化对象中,以便观察数据值的大小;2. 增加可视化对象之间的对比观察度。
使用建议 1 :使用网格线时,需遵从主次原则,以轴线为主、网格线为辅;样式上可采用实线或虚线;避免颜色过重、使用纯黑/纯白色。
Web端设计语言库——数据可视化
 
 
使用建议 2 :网格线一般跟随值域轴的位置单向显示,柱状图、折线图等采用水平网格,条形图采用垂直网格。
Web端设计语言库——数据可视化
 
 
3.7 X/Y 轴标题
轴标题主要用于说明坐标轴数据组的含义,也可理解为“轴单位”。当可视化图表标题、图例、轴标签等已能充分表达数据含义时,可隐藏轴标题。
这样处理体现了奥卡姆剃刀定律:如无必要,勿增实体。
Web端设计语言库——数据可视化
 
 
3.8 X/Y 轴标签
轴标签是对当前某一组数据的内容标注,用于提高数据的可读性。
以下从 X 轴标签、Y轴标签两方面进行分析:
a.  X 轴标签
X 轴标签的设计重点在显示规则上。卡片宽度过窄、标签过多、名称过长时,X 轴标签便会出现显示问题(如标签重叠等)。
为了解决显示问题,我们从连续/时间轴标签(数值类)、分类轴标签(文本类)两方面进行分析:
 
  •  
    连续/时间轴标签
显示规则:建议等分抽样显示、旋转;不尾部省略。
建议等分抽样:连续/时间轴,通常由一组等差数列组成,具有规律性,缺失的数据用户会在脑海中自动补全。所以建议用等分抽样来避免标签的重叠问题。
注意:等分抽样尽量保留首尾数据标签;随机抽样没有规律,会影响用户的判断及辨认,不建议采取随机抽样显示。
Web端设计语言库——数据可视化
 
 
连续/时间轴标签是由“关键数值”组成的标注点,一般都明确精简,尾部省略会影响用户对关键数值的辨认。
为了保证标签的辨识度,我们可以将标签旋转 45°、 90° 。极端情况下(图表宽度极窄),可以同时进行旋转+抽样。
Web端设计语言库——数据可视化
 
 
  •  
    分类轴标签
显示规则:建议旋转显示;不建议抽样显示。
分类轴由几个离散数据标签组成,标签之间独立存在,无紧密逻辑关系,用户无法自动补全缺失信息。因此,不能采取抽样显示,应尽量展示全部标签的全部文本。
若标签横向展示空间不够(文字重叠),我们可以将标签旋转 45°、 90° 来达到预期显示效果。若通过旋转无法满足需求,可使用条形图,将分类轴放在Y轴。
Web端设计语言库——数据可视化
 
 
旋转方向说明:通常情况下,用户的阅读视线为从左至右、从上到下。因此,标签顺时针旋转 45° 更符合用户的浏览习惯。
Web端设计语言库——数据可视化
 
 
b. Y 轴标签
Y 轴标签的设计重点在标签数量、取值范围和数据格式上。标签显示区域一般根据最长标签宽度进行自适应缩放。
  •  
    轴标签的数量
使用建议:根据米勒定律(7±2 法则),Y 轴标签数量应控制在 5-9 个的范围内;Web页面中,Y 轴常用标签数为:6 或 7(含标签0)。
轴标签的数量越多,横向网格线就会越多。过多的轴标签及网格线会造成元素冗余,违背了清晰、准确的可视化原则,也不利于图表信息的表达及阅读。
对齐方式:右对齐
Web端设计语言库——数据可视化
 
 
  •  
    轴标签的取值范围
基准线: Y 轴标签取值应从 0 基线开始,以反映数据的真实性。如果展示被截断的 Y 轴数据,会导致用户做出错误的判断。
Web端设计语言库——数据可视化
 
 
  •  
    轴标签的数据格式
使用建议 1: 标签保留的小数位数保持统一。
Web端设计语言库——数据可视化
 
 
4. 数据标签
数据标签是对数据点对应数值的标注,用于直接观察每个数据点的具体数值。
若图表主要是用来看趋势变化、占比大小等,则不需要显示数据标签。若想精确了解每组数据的具体数值,则可以显示数据标签。
Web端设计语言库——数据可视化
 
 
4.1 位置
数据标签位于数据点的上方。
4.2 显示规则
在不同类型的图表中,数据标签的显示规则不同。我们可以根据数据图形、数据值的特性,选择合适的显示方式,提高图表的准确性。
a. 柱状图
  •  
    基础柱状图
    :数据标签可显示在数据图形内部、外部。
数据标签在图形内部的显示规则:正常情况下,横向显示;数据标签超长时,旋转 90°;图形高度 < 数据标签高度时,不显示数据标签。
Web端设计语言库——数据可视化
 
 
  •  
    分组柱状图
    :数据标签可显示在数据图形内部、外部。显示在内部的数据标签显示宽度不够时,解决方案同上。
Web端设计语言库——数据可视化
 
 
  •  
    堆叠柱状图
    :数据标签显示在数据图形内部。
数据标签在图形内部的显示规则:正常情况下,横向显示;数据标签超长时,旋转 90°;图形高度 < 数据标签高度时,不显示数据标签。
Web端设计语言库——数据可视化
 
 
b. 条形图
数据标签在图形内部的显示规则:正常情况下,横向显示;图形宽度 < 数据标签高度时,不显示数据标签;条形图高度需 >= 数据标签高度。
Web端设计语言库——数据可视化
 
 
基础、分组条形图的数据标签也可以显示在图形外部:
Web端设计语言库——数据可视化
 
 
c. 折线图
数据标签显示在数据点的上方。
图表宽度过窄,数据点多且密时,相邻的数据标签会出现重叠的问题。此时,我们会采用抽样的方式显示数据标签。鼠标悬停数据点,显示隐藏的数据标签。
Web端设计语言库——数据可视化
 
 
d. 饼图、环形图
数据标签显示在图形内部、外部均可。
由于扇形有角度,且形状相对不规则,对数据标签的文本长度包容度较低,环形更是如此。所以,当扇/环形分割过多、面积较小时,建议将数据标签显示在图形外部。
Web端设计语言库——数据可视化
 
 
当然,我们也可以内外部结合使用:
Web端设计语言库——数据可视化
 
 
e. 数据标签颜色
数据标签显示在图形内部时,图形为背景,数据标签为前景。此时,数据图形作为背景色,会影响到数据标签的显色度及易读性。
为了确保良好的可读性,我们通过对图形颜色 HS 值的判断,来决定文字的颜色。这样对比度就在可控范围内,不会出现可读性低的问题。
Web端设计语言库——数据可视化
 
 
由于篇幅问题,剩余内容接下一篇文章展示
 


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

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。我们建立了一个微信群,每天分享国内外优秀的设计,有兴趣请加入一起学习成长,咨询及进群请加蓝小助微信ben_lanlan。

WechatIMG27.jpg

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

B端用研体系框架的搭建

资深UI设计者

B端拥有复杂的业务流,用户研究体系框架的搭建对于产品的成功至关重要,它不仅关系到用户的直接体验,还涉及到产品的长期发展和市场竞争力。通过用户研究,可以更好地理解B端用户的需求和使用习惯,从而设计出更加符合用户期望的产品功能和交互流程。

日历

链接

个人资料

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

存档