首页

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热力图
热力图就是使用冷色到暖色的不同颜色表示数据从大到小的权重,或用同色系颜色的深浅来表示数据的多少。热力图可以在坐标轴上呈现数据的大小分布,也可以在地图或图片上使用。
 
 
 


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

这些包装技巧,简单又出效果,不看一会就删了!

前端达人

最近ui课学员开始做结课作业,在给大家批作业的时候,发现很多同学对于包装审美还是差一些,课上给大家实操了很多案例,今天给大家分享几个,比如一组的这块需求分析,包装的就不太行:
这些包装技巧,简单又出效果,不看一会就删了!
 
 
有点太随意了,包括文字的排版,还有标题前面的两个圆圈:
这些包装技巧,简单又出效果,不看一会就删了!
 
 
如果我来包装的话,一定要加点修饰,不能只是文字,比如加点图标或者加点卡片,我可以先把卡片加上,这样会更加有聚焦的感觉:
这些包装技巧,简单又出效果,不看一会就删了!
 
 
这时候我们可以想办法加点颜色区分,比如用产品的主色:
这些包装技巧,简单又出效果,不看一会就删了!
 
 
然后可以再给圆圈里面加点图标,或者修饰元素,因为一组同学已经有了一些质感图标的绘制,直接加上就可以了:
这些包装技巧,简单又出效果,不看一会就删了!
 
 
然后再加上标题:
这些包装技巧,简单又出效果,不看一会就删了!
 
 
我们来对比下第一版和优化后的效果:
这些包装技巧,简单又出效果,不看一会就删了!
 
 
这里面其实差的仅仅只是一点点包装审美和用心的态度,技法层面没什么门槛,只有两个质感图标,还都是一组同学自己画的!
再举一个1组同学的例子,他们在展示图表的时候,效果是这样的:
这些包装技巧,简单又出效果,不看一会就删了!
 
 
如果面试官用手机看你的作品,能看清楚啥呀,所以如果你觉得自己的作品做的还不错,一定要学会放大展示局部,比如我们这样优化一下:
这些包装技巧,简单又出效果,不看一会就删了!
 
 
是不是比刚才更加简洁大气?
所以大家一定要记住,有优秀的东西,一定要拿出来放大展示,我们看看3组同学的展示方式,就优秀很多:
这些包装技巧,简单又出效果,不看一会就删了!
 
 
再看5组的一个案例,这张图:
这些包装技巧,简单又出效果,不看一会就删了!
 
 
啥问题?是不是太空了,主次也不清晰,左上角的logo快比页面还重了,所以我们一定要先解决画面主次的问题,先把界面变大变饱满:
这些包装技巧,简单又出效果,不看一会就删了!
 
 
这时候可以再优化一下左侧文案的排版,稍微有点空旷:
这些包装技巧,简单又出效果,不看一会就删了!
 
 
如果觉得层次还是不够,可以把底色融入一个黑圈:
这些包装技巧,简单又出效果,不看一会就删了!
 
 
这样的话,把上面黑色的图标页,衔接在一起,就会好很多了:
这些包装技巧,简单又出效果,不看一会就删了!
 
 
这些包装技巧,简单又出效果,不看一会就删了!
 
 
这是不是比最开始那页的包装强太多了:
这些包装技巧,简单又出效果,不看一会就删了!
 
 
所以大家在作品包装展示的时候,一定要注意这些细节,而且是非常细致的细节,有时候真的就是差一点点,感觉就不一样了!
希望今天分享的这几个包装小案例,大家可以有所启发,后面我会经常改ui课同学的作业,尤其是这种细节上的改动,让大家更好的做出精致作品!
加油,兄弟们!
 

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

UI&UE实用方法论 | 做交互体验,你必须得知道的「多尔蒂阈值」

涛涛

“当你使用计算机执行一系列操作,每当你按下回车键,它都能在400毫秒内给予你反馈,反馈时间还不到半秒,那么就可以让你一直保持专注,效率也会飙升,你会完全沉迷进去。但反馈时间哪怕只是偏差到半秒钟,你的注意力都容易被分散,你甚至会想起身洗个碗、拿个遥控板、看场比赛...所以说400毫秒以下的反馈速度,是最佳节点。”

UI&UE实用方法论 | 做设计为什么需要“对比”:「冯·雷斯托夫效应」

涛涛

 

罗宾·威廉姆斯《写给大家看的设计书》应该是每一位设计人的入门必读吧?虽然我不确定你有没有读过,但是“亲密、对齐、重复、对比”这四个基本的视觉设计手法,你应该多多少少有听过了吧。

UI&UE实用方法论 | 「美即好用效应」就是UI存在的价值吗?

涛涛

有研究表明,人们会自然地认为外表更漂亮的人拥有更加优秀的品质特质。即我们对一个人的外表印象会影响对他品质的感受和思考,心理学上将这种行为称为「光环效应」

【交互设计】B端产品中后台列表页设计方法总结

涛涛

接触b端产品设计差不多半年多了,每天面对的都是各种控制台,本次自己试着总结了下工作中遇到的各种列表设计的小tips。

设计原则之一致性

鹤鹤

一致性的字面意思和使用的场景不同代表的含义也会有区别,这里主要使用在UI/UX设计中。
UI/UX设计中一致性是指在整个应用程序或网站中使用相同的设计元素和模式。它涉及在所有页面和屏幕上使用相同的视觉语言、布局和交互,以创造一致且直观的用户体验。一致性有助于用户了解如何浏览应用程序或网站,消除困惑和沮丧,并使他们更容易学习和记住如何使用产品。
设计并非孤立的实践。它与其他领域交织在一起,其中之一就是心理学。在设计中发挥根本作用的心理学原理是重复定律。
这一定律的起源可以追溯到 20 世纪早期,当时德国心理学家赫尔曼·艾宾浩斯进行了开创性的研究。他的工作对理解人类记忆具有革命性意义。艾宾浩斯最著名的贡献是“遗忘曲线”,它表明如果不尝试保留信息,信息会随着时间的推移而丢失。然而,他还发现,反复接触信息会极大地影响我们记忆信息的能力。从本质上讲,重复可以强化回忆。

揭开心理学在用户行为的奥秘

鹤鹤

   心理学是研究人的内心世界的学问,它关注的是我们的思想、情感和行为是如何相互作用的。现在,随着大家的生活越来越好,大家都开始追求那些能让自己心情好的东西,这就让设计心理学变得特别火。设计心理学就像是心理学的一个小分队,专门负责帮我们在做广告、搞艺术创作或者是在网上卖东西的时候,更好地抓住人们的心。简单说,就是让我们更懂顾客,让他们更愿意接受我们的产品和服务。
 

B端设计九大精髓

前端达人

五一期间,我阅读了一本设计界的宝典——《B端产品设计精髓》,它系统地向我展示了B端产品设计的世界,我被其丰富的内容和深入浅出的讲解深深吸引,每一个章节都像是一扇窗,让我窥见了B端设计的精彩和复杂,现在我迫不及待地想要把这份感想、收获以及启发分享给大家;我相信这些宝贵的知识能够帮助每一位对B端产品设计感兴趣的朋友,就像它帮助了我一样。
B端设计九大精髓
 
 
 
 
分享目录
一、B端产品的定义
二、B端产品出现的背景
三、B端产品设计的目标
四、B端产品面对不同场景时的两个注意事项
五、设计一个优秀B端产品的四大要素
六、B端产品中的六个一致性设计规范
七、B端表单设计的两个原则及12个思考点
八、常见的五个B端类型产品
九、B端产品中的四个帮助系统
 
 
 
一、B端产品的定义
 
B端产品本质上就是营造、设计一个高效的、安全的、便捷的“用户使用过程”,帮助用户完成在特定场景下的一系列任务目标。它解决了信息如何在系统内、系统间,以及人与系统间,进行有效、高效的生产、组织、呈现和流动的问题。
 
B端产品,它不只是冰冷的软件或系统,而是一把开启高效、安全、便捷体验的钥匙。它精心设计了每一个用户旅程,确保在各种特定场景下,用户都能轻松地达成他们的目标,仿佛有一个无形的助手在默默支持。 在这个信息如海的时代,B端产品更是扮演着指挥官的角色,它智慧地组织和管理信息,确保数据在系统内部、不同系统之间,以及人与系统之间的流动,既高效又有序,极大地提升了我们的工作效率和决策质量。
 
 
 
二、B端产品出现的背景
 
B端设计九大精髓
 
 
 
 
1、企业电算化
 
想象一下,在古老的账房里,算盘的声音此起彼伏。但随着1946年电子计算机的诞生,这一切都被改写。这台由美国军方定制的‘电子数字积分计算机’,不仅计算着复杂的弹道,更预示着一个新时代的到来——电子计算机时代。 中国虽然起步较晚,但在20世纪80年代,我们开始拥抱这一变革,并在90年代迅速普及。这不仅仅是技术的飞跃,更是企业管理方式的一次革命。
 
会计电算化,就是将繁琐的手工记账工作交给了聪明的计算机。它不仅提高了会计工作的准确性和效率,还让会计人员能够从数字的海洋中解放出来,专注于更有价值的财务分析和决策。这是一次从手工到智能的巨大跨越,也是我们迈向现代化管理的重要一步。
 
 
2、企业信息化
 
企业信息化,就像是为企业的运营装上了智能的大脑和灵活的神经。它拆除了企业内部信息孤岛的无形墙,建立起一个畅通无阻的信息高速公路,让数据在各个部门、组织、业务之间自由流动。 这种无缝的信息对接,让企业各部门的协作更加紧密,就像乐队中的乐器,虽然各自独立,却能合奏出和谐的乐章。企业信息化的最终目标,就是通过优化资源配置、提升业务管理、实现数据的互联互通,来提高企业的整体合作效率,让企业在激烈的市场竞争中,能够更加灵活、高效地应对各种挑战。
 
比方说我们日常的的OA办公系统,一个出差报销的申请正常都会有五六个流程,每个流程都对应一个负责人,如果要是内部没有这种OA的办公系统,申请人要挨个挨个去找相关的人签字审批,会占用大量的上班时间,也给员工带来了很多的不方便,有了OA系统,申请人只需要把相关的资料一次性提交到系统,然后等待相关的审批通过即可。
 
 
3、企业数字化
 
在移动互联网、大数据等新兴技术的推动下,企业正站在数字化转型的风口浪尖。这不仅是一次技术的升级,更是一场深刻的管理革命。面对技术的浪潮,企业没有选择,只能乘风破浪,进行数字化转型。 
 
未来的企业将分为两种:一种是从出生就带有数字化基因的数字原生企业,它们在水中自由穿梭;另一种是通过数字化转型重生的企业,它们浴火重生,焕发出新的活力。 而现代的B端产品,不仅要服务于产品的直接用户,还要像一位社交能手,连接更广泛的社会网络,满足外部用户和非使用者的信息传输需求,打破信息孤岛,实现信息的自由流通。这不仅是B端产品的挑战,更是它们在数字化时代中的重要使命。
 
 
 
三、B端产品设计的目标
 
在B端产品设计的世界里,追求的是简洁而不简单。产品应该像一位贴心的助手,用清晰的任务目标和直观的界面设计,引导用户一步步完成工作。它简化了操作流程,让工作变得像流水一样自然顺畅。面对复杂任务,它又能提供清晰的指引,确保用户在每一个关键步骤都能得到及时的反馈。
 
我们知道,在企业中,有这样一群员工,他们充满探索精神,渴望解决更深层次的问题。对于这些奋斗者,产品设计不仅要满足他们的需求,还要激发他们的潜能,让他们在产品中找到成长和创新的空间。
 
此外,现代的B端产品不再是孤立的岛屿,而是相互连接的大陆。功能之间的关联性,信息的穿透力,让产品成为了促进企业内部协作和信息共享的桥梁。这样的设计,不仅能够满足奋斗者的需求,还能够提高整个组织的运作效率,让企业在激烈的市场竞争中保持领先。
 
 
 
四、B端产品面对不同场景时的两个注意事项
 
1、面对专业性高的职业,产品需要严格符合职业习惯
 
例如,我参与设计过的一个项目“能调平台”,它的目标是打造一个专业人士的得力助手,追求的是为专业人士提供一个他们能够立即识别和使用的工具。这些工具可能对外行人来说像天书一样难以理解,但对于专业人士而言,它们就是清晰明了的指令,能够迅速指导他们完成任务。
 
B端设计九大精髓
 
 
 
 
2、对专业性不高的职业,产品需要给予更多的关怀,产品需要浅显易懂,不那么“专业”反倒更加重要
 
例如,我们电脑里面自带的画图软件,它就非常的平易近人,每一个功能模块的摆放,每一个图标的设计是任何小白都能理解的方式,降低了普通用户学习的成本,加速了用户快速上手使用的时间。
 
B端设计九大精髓
 
 
 
 
五、设计一个优秀B端产品的四个要素 
 
设计一个产品,本质上是设计用户在一些特定场景、特定目标下的使用过程,是设计一系列分散的或者聚合的服务;用户不是为了“用产品”而用产品,更不是为了漫无目的的消磨时间,而是通过产品来获得必要的服务,高效的解决和处理其在业务上、管理上、商业上的问题,帮助他们降低成本,增加效益,最终帮助他们获得商业上的成功。因此想要做好这个服务,我们需要具备以下几个优秀的品质。
 
1、敬畏用户,理解用户
用户永远是最好的老师,任何一个产品设计师都应该努力抓住各种接近真实用户的机会,真正理解用户,挖掘和分析业务场景。
 
 
1.1、了解用户工作内容
了解用户平时工作的内容、机制、处理方式、完成方式、评估方式以及相关岗位。评估方式尤为重要,因为在某些方面用户对产品体验可能有特殊的要求。
 
1.2、了解用户工作场景
了解用户何时工作、在哪里工作以及怎么工作;尤其要搞清楚用户怎么工作,并且要了解用户工作的困难、压力、强度、周期等重要指标。例如,收银员大部分是收银工作,每隔一段时间,就处于高压、高强度的工作状态。
 
“一个场景=若干人物角色+若干用户情境+用户体验地图+……”,把可能出现的角色与情境进行搭配,形成若干个“真实”场景的组合,是设计之旅的开始;理解需求和对接设计不再只考虑功能点,更多的面向用户而非面向系统进行设计,从一个个场景出发,思考和完善产品的设计,使这些场景对应的需求得到满足。
 
2.积极沟通
在工作中多多沟通,把产品经理当成自己最好的伙伴,优秀的B端产品经理往往都是一个领域或者行业的专家,有着很深的业务背景和大量的实践经验,对相应业务的发展有着很深刻的理解和洞察,对产品的客户、用户都有着很深入的了解,是B端产品设计师最好的老师。
 
3、具备同理心
描述一个场景,本质上是以某种代入感的形式,使应用场景的人产生强烈的参与感,从而理解真实用户使用产品完成一个任务目标的真实感觉,产生相应的同理心,这是产品设计中设计师较高境界的追求,是一种深层次的用户研究方法,也是实现卓越用户体验的关键。
 
4、积极进行竞品分析
在创新的道路上,盲目冲刺可能会让我们迷失方向,甚至跌入陷阱。因此,尽早开展竞品分析,就像是在出发前仔细研究地图,它能够帮助我们规避风险,找到通往成功的捷径。通过深入了解竞争对手的产品,我们不仅能够学习他们的长处,还能够洞察他们的短板,从而为我们的产品定位和设计提供宝贵的参考。 正如古语所说:“知己知彼,百战不殆”。在激烈的市场竞争中,只有深入了解自己和对手,才能在每一次对决中占据优势。竞品分析,就是我们在这场没有硝烟的战争中的侦察兵,它能够帮助我们洞察市场动态,把握用户需求,从而制定出更加精准有效的产品策略。
 
 
六、B端产品中的六个一致性规范
一个好的设计规范有助于提高产品的一致性、减少错误出现的可能性、提高开发和实施效率、减少用户学习成本、方便后期追溯检验等。同时,也能统一向用户、客户传递一致的印象,形成一定的品牌价值。
 
1、一致性的价值
一致性有很多众所周知的好处,如降低认知成本、减少用户学习时间、提高工作效率、提升研发效率等。
 
2、产品一致性应该包含以下几点:
 
(1) 
布局一致性:
保持某一种类似的结构,因为新的结构变化会让用户思考,而排列规则的顺序能减轻用户思考与记忆的负担。
(2) 
色彩一致性:
产品所使用的主要色调应该是统一的,用来传递一致的品牌印象和风格,而功能性色彩也能形成固定的规则,方便记忆与识别。
(3)
 操作一致性:
降低用户的学习成本,提高开发效率 。
(4) 
反馈一致性:
系统对同一种功能和同类信息传递的呈现方式一致,使得用户与系统的沟通更加顺畅。
(5)
 文字一致性:
产品中呈现的文字大小、颜色、布局、语言风格等都应该是一致的。
(6) 
声音一致性:
产品中各种操作过程的声音,正向的如确定等提示声,负向的如警告等提示声。
 
联想电脑管家在优化加速、垃圾清理、安全中心、硬件驱动四个模块中都保持了相同的画风,布局、文字和反馈方式也都一样,很好的体现了产品的一致性。
 
B端设计九大精髓
 
 
 
 
七、B端表单设计的两个原则及12个思考点
 
B端业务以场景的多样性和复杂性著称,但也是有规律可循的,经过长时间的实战,我发现大量的业务都是以“表单+流程”的方式进行处理的。这些表单和流程的设计都有着极强的公共属性,这些公共属性进行梳理之后,可以形成一些公共的设计模块,不仅节约了设计和开发的成本,还让系统在操作、布局等上的一致性大大的增强,便于用户理解和操作,当然,随着智能化程度的提升,这些经典的设计模式也在不断的发生着变化,甚至可能消失。
 
1、表单设计的原则
 
1.1 表单信息力求简约
表单不能设计的过于繁复,要本着以用户实际工作为中心的原则,妥善分组、分区,经过分组、分区后的功能信息会使操作变得更有逻辑性,并根据角色、权限、状态以及使用场景来决定具体的显示方式,默认将不重要的信息隐藏起来,尽量给用户展示一个简单清晰的信息结构。
 
搜狗输入法在输入法显示器的文字旁边有个问号的小图标,鼠标触碰到这个图标就可以看到对输入法显示器一个完整的解释,看完之后这段注释语又隐藏了起来,让界面看起来更加的简洁。
 
B端设计九大精髓
 
 
 
1.2 要兼顾多角色多场景
在企业日常生活中,几乎每个员工都会跟表单打交道,为了给不同目的的用户在查看和处理表单时有更好的体验,我们需要使用“场景驱动的设计”方法,根据不同角色、不同场景,设计不同的方案。
 
例如,我日常工作中遇到的一个项目,它在同一个页面需要对IP、端口、地址映射进行颗粒非常精准的搜索以及新增的需求,基于这样的需求,我对每个功能点都做了分门别类的设计搜索及新增功能,这样就圆满的满足了业务的需求;在B端的表格设计中,它更多的是要满足多场景多角色下的功能需求,而不是为了视觉的彰显,在这个模块的设计,功能的实现、页面信息的清晰是第一位的。
 
B端设计九大精髓
 
 
 
 
2、表单设计的12个思考点 
 
B端设计九大精髓
 
 
 
(1) 需要展示的字段还可以更少吗?界面可以更简单吗?
(2) 用户光靠自己,是否能顺利填写单据?
(3) 怎样才能让用户填写更少的信息?
(4) 是否能帮助用户避免大量机械化的录入?
(5) 当无法避免大量录入时,怎样帮用户提高录入效率?
(6) 用户是否频繁在多种录入方式间切换?
(7) 怎样帮助用户尽量少犯错,并在出错的时候尽快纠正错误?
(8) 哪些角色在使用同一张表单?
(9) 在什么场景下使用表单?
(10) 他们主要完成哪些任务?
(11) 他们关心哪些信息?使用哪些功能?
(12) 他们在使用中有哪些特殊需求?
 
 
 
八、常见的五个B端类型产品
 
1、ERP系统
 
1.1 ERP系统的定义和功能
ERP是英文Enterprise ResourcePlanning的缩写,即企业资源计划。在当今复杂多变的商业环境中,企业需要一个能够全面掌控资源的智能系统,它就是ERP系统。它不仅涵盖了财务管理、供应链管理、销售与市场、客户服务等核心功能,还包括了制造管理、库存管理、人力资源等关键领域,为企业打造了一个无缝整合的管理平台。
 
ERP系统的应用范围广泛,它不仅服务于生产制造业,也广泛应用于金融投资、质量管理、运输管理、项目管理等领域。它通过整合企业的所有资源,帮助企业在各个环节实现优化管理,提升运营效率,降低成本,增强企业的市场竞争力。
 
ERP系统,就像是企业的指挥官,它用智慧和策略,协调着企业的每一个部门,确保企业的资源得到最有效的利用。在ERP系统的辅助下,企业能够更加灵活地应对市场变化,把握每一个商机,实现持续的发展和创新。
 
这是我体验过的一个项目管理的系统平台,在这里面可以清晰的看到一个项目的搭建到完工的整个流程以及它的进展,对于管理者来说,这是一个很好的项目管控平台。
 
B端设计九大精髓
 
 
 
 
2、CRM系统
 
2.1 CRM系统的定义和功能 
 
CRM是英文Customer RelationshipManaqement的简写,即客户关系管理,通过满足客户个性化的需要、提高客户忠诚度,实现缩短销售周期降低销售成本、增加收入、拓展市场全面提升企业赢利能力和竞争能力为目的。
 
客户,是企业最宝贵的资产。而CRM系统,就是企业守护和增值这份资产的智能管家。它通过细致入微的客户关系管理,帮助企业倾听客户的声音,记住客户的喜好,从而建立起稳固而长久的客户关系。
 
CRM系统的功能强大而全面,它不仅能够维护老客户,寻找新客户,避免客户资源的流失,还能提高客户的忠诚度和满意度,降低营销成本,提高销售效率。它帮助企业管理客户的每一个细节,从企业信息到联系方式,从网站互动到每一次服务的反馈,都记录得清清楚楚,为企业提供了一个全面、精准的客户视图。
 
在这个竞争激烈的市场中,CRM系统是企业赢得客户、保持竞争力的利器。它让企业的服务更加贴心,让客户的微笑更加灿烂,帮助企业在商海中乘风破浪,勇往直前。
 
下面就是曾经自己设计过的一个客户关系的B端后端界面,这个是给海外客户设计的,它很好解决了公司对客户信息模糊不清的痛点,通过这个产品,可以把用户的信息可视化,并且还能很好的观察用户的使用诉求以及使用频率,给公司理解用户分析用户提供了很好数据支撑。
 
B端设计九大精髓
 
 
 
 
3、OA系统
 
3.1 OA系统的定义和功能
 
OA是Office Automation的缩写,即办公自动化,是将现代化办公和计算机网络功能结合起来的一种新型的办公方式。
 
在快节奏的商业世界中,OA系统如同一位高效的办公室管家,用现代化的信息技术将日常办公管理化繁为简。它不仅管理着工作流程、发文审批,还负责传递公司新闻、公告,同时确保日程安排得井井有条,让团队沟通变得即时而顺畅。
 
OA系统的功能远不止于此,它还涵盖了人员考勤、知识管理、企业论坛等多元化模块,为企业提供了一个全面、一体化的办公平台。随着企业对协同工作和信息共享的需求日益增长,OA系统已经成为企业管理升级的重要推手,尤其是对于大型企业而言,它更是确保组织内部高效协同、信息流通的核心系统。
 
这个是我给某科技厅设计的一个OA系统界面,现在政府也越来越追求办公的自动化,通过设计可视化的平台希望给需要申请相关科技服务的人才以便捷。
 
B端设计九大精髓
 
 
 
 
4、 HR系统
 
4.1 HR系统的定义和功能
 
HR是Human Resource的英文缩写即人力资源。HR系统是为企业持续地提升人力资源管理水平和能力而出现的信息化支撑平台。
 
在这个竞争激烈的商业时代,人才是企业最宝贵的资产。而HR系统,就是企业守护和增值这份资产的得力助手。它集成了从组织管理到人事信息,从招聘选拔到培训发展,从考勤监督到绩效评估,再到福利薪酬等一系列功能模块,为企业提供了一个全面、高效的人力资源管理平台。
 
通过HR系统,人事管理专员可以轻松维护员工资料、部门架构和人员分组,及时更新员工异动信息,从而帮助企业降低人力成本,提高工作效率。这不仅仅是一个系统,更是一个企业人力资源管理的强大引擎,帮助企业在人才竞争中占据优势,推动企业持续成长和发展。
 
这是我体验过的一个HR系统界面,他把日常的考勤、离职流程、内部调动、培训申请等流程办理都集合在了这里,大大提高了企业的效率,也大大方便了员工流程的申请,不需要一个流程自己亲自跑很多趟。
 
B端设计九大精髓
 
 
 
 
5、BI系统
5.1 BI系统的定义和功能
 
Bl是英文BusinessIntelligence缩写,Bl就是商业智能系统,将企业数据转化为有用的信息,辅助业务经营决策。
 
BI系统就像是企业的智慧大脑,它能够将海量的企业数据转化为清晰的信息,帮助企业洞察业务的每一个角落。无论是读取数据、深入分析,还是将结果以直观的方式展示出来,BI系统都能轻松应对,让决策者能够基于事实,做出更加精准的业务决策
 
云电脑运维服务系统是我设计过的一个后台系统,专门用来记录云电脑专家的一个运营情况,能时刻获取每个地市云电脑的一个安装量、用户数量等信息。
 
B端设计九大精髓
 
 
 
 
九、B端产品中的四个帮助系统
 
1、提示(tips) 
TIPS一般指带有说明文字的“气泡”,通常出现在需要被解释说明的字段、列表的表头文字、按钮等位置。TIPS中的文字说明不宜过长。为了不影响用户操作,TIPS一般在鼠标悬停到相关区域后显示,鼠标移开即消失。
 
阿里云盘在打印功能页面对需要做出解释的按钮和图标旁边,有设计鼠标悬停功能,当鼠标触碰到对应的功能点时,页面会弹出对应的文字解释和说明,并且文字没有太长,当鼠标离开,文字又会消失,很好的帮助了用户理解页面的信息。
 
B端设计九大精髓
 
 
 
2、操作指引 
操作指引是指在特定场景下,系统对用户接下来的操作进行的指引。常见的有:新手指引、新上线功能指引、对某功能点的操作引导等。
 
EV录屏对于新手用户,他提前设置了操作指引模块,帮助新手用户快速上手,解决了很多朋友不知道如何录制声音、如何在线直播、如何录制视频、如何上传视频等痛点。
 
B端设计九大精髓
 
 
 
3、客服
早期的B端产品,客服是获取客源的一个渠道,很少提供在线客服;AI技术的出现,AI客服也萌生了,它将用户常见的问题一一进行回答,大大减少了人工客服的成本。
 
飞书的客服就是机器人,一个问题过去基本是秒回,及时响应了客户,省去了高昂的人工成本,快速的响应也提升了用户体验。
 
B端设计九大精髓
 
 
 
 
4、帮助中心
帮助中心主要面向两类用户角色和场景:一是使用产品的用户,在遇到某特定业务问题时,可以通过帮助文档提供的内容自行解决;二是需要全面理解产品的用户(比如售前人员或培训人员),为他们提供一个可以全面学习产品的渠道。
 
百度网盘在产品的右上角有个帮助入口,它提供了一个很全面的帮助文档,让对百度网盘陌生的用户通过阅读此文档就能对产品有一个很好的认知。
 
B端设计九大精髓
 
 
 
 
总结:
在设计的广阔天地里,每一次阅读都像是点亮了一盏明灯,照亮了我前行的道路。它不仅让我对设计的原理有了更深刻的理解,还激发了我对那些细微之处的好奇心。正如一位经验丰富的厨师会通过尝试不同的食谱和亲自烹饪来磨练技艺,设计师也需要将阅读和实战经验相结合,以此来深化自己的设计内功。通过广泛阅读,我学会了从不同的角度审视问题,对设计中的每一个小细节都有了更加多维和全面的认识。这样的过程,就像是在显微镜下观察世界,让我发现了那些常被忽视的角落里隐藏的宝藏。
 
本文观点都为个人理解和总结,不足之处也欢迎大家留言区多多点评指正,大家共同进步!
 
 
 
 
 


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

日历

链接

个人资料

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

存档