B端ui设计文章及欣赏 - 设计每日一贴---北京兰亭妙微/UI设计公司

首页

222024-5

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

欢迎小伙伴们收看《B端数据可视化设计经验分享第四弹：图表设计》，本节内容将带领小伙伴们从零开始认识图表，了解图表在数据可视化中的作用，图表的构成，不同图形可以可视化哪些类型的数据等等。希望大家看完后能对图表有个相对完整的认知，在以后的工作中可以得心应手。

一、什么是图表？

大家对图表一定不陌生，图表（chart）就是一种通过图形化的方式呈现和分析数据的工具，就是

将表格中的数据进行二次加工，将复杂的业务数据转化为更加直观的、有趋势性、有时间线、空间性的图形数据

，协助用户根据数据变动而变更相关决策，最终以实现降本提效的目的。

不同部门或者角色在公司中会需要各种类型的数据信息，以支持其业务运营和领导层决策需求。这些数据信息的准确性和及时性对于公司的发展和竞争优势至关重要。

产品部门关注的主要是用户行为数据、收入数据、用户量数据；运营部门关注用户活跃度数据、营销效果数据和用户反馈数据；技术部门关注系统运行数据、技术指标数据；用户增长部门关注用户生命周期数据等。

二、一个优秀图表设计的标准是什么？

要看一个图表是否优秀，主要看它是否符合GLAD原则。GLAD原则是一个在数据可视化设计中常用来确保图表质量和有效性的方法论，它主要包括以下四个要素：

GLAD原则

G原则：优质数据和洞察

G原则是指Good Data and Insight。G原则在探索性数据分析过程中着重提升图表的商业价值，G原则的关键是“有价值的商业信息”，这一点就要求在准备数据的时候，应该剔除那些商业分析价值不大的部分，而主要留下的是有高价值密度的信息。除了要求有高价值的信息之外，还需要有比较好的Insight，也就是能洞察数据中的高价值信息，并以较为通俗易懂的形式在图表中表达出来。

优化前

例图点评：虽然图表本身看上去好像并没什么问题，图形选择的也对、颜色搭配也得体，读者也能理解图本身要表达的意思。但是，

没有商业价值，即我能看出茅台拿铁卖的最好，然后呢？这是哪个阶段的数据？不知道。有没有持续的表现数据？也不知道。

优化后

例图点评：修改后，从数据中提炼出更有价值的商业数据，在时间维度和空间维度都有体现，简洁明了的同时，也具有商业参考价值。

L原则：更少的视觉噪音

L原则是指Less Noise。简单说就是视觉降噪。

B端产品是高度商业化的产品，有用有效远大于好看，

这要求B端设计师对艺术的追求要适可而止，商业数据分析不是追求艺术造诣，不是做一张海报去吸引人的眼球，而是提供商业价值并能快速让人理解。过于酷炫、花哨、浮夸的修饰并不会给图表带来任何附加值，反而会增加读者的阅读负担。

例图1

例图点评：修改前，有些国家由于人口稀少，导致相关数据也非常小，难以在图表中展示，造成整个图表花里胡哨且复杂。修改后，把过小数据的选项折叠为“其他”，默认显示主要几个较大国家的数据，当点击“其他”图例的时候，再显示详细的数据信息，使数据展示更具有侧重点。

例图2

例图点评：图例2是dribbble上的图表作品，左侧是K线图，右侧是柱状图，它们的问题在于花里胡哨，却缺少必要的刻度，形式大于内容，过于追求好看的反面案例。

A原则：准确的表达

A原则是指Accurate Expression。通俗讲，就是要根据不同的数据类型和不同的商业目的，采用正确的、适合的图表类型，如表现占比就要用饼图、百分比柱形图，表现趋势就要用折线图、面积图等，且要保证图例的清晰性、刻度的准确性，避免模棱两可的图例和不准确的刻度。

错误例图

正确例图

例图点评：图例的本意是对比2023和2024年不同品牌手机的销售额占比，是基于时间维度的对比图，但错误图例却用了两个饼图，无法直观的表现特定品牌在不同年度的销售额占比的对比情况。正确的图例则直接用了柱状对比图，一目了然。

D原则：明确的标记

D原则是指Dinstinct Mark。D原则的作用是帮助读者加快理解信息的速度，它强调

突出重点

，需要把通过数据比较得到的差异部分、体现洞察信息的内容利用明显不同的颜色、形状、文字标注等手段进行区别，让读者的视线聚焦到那里去。

三、图表的构成要素

图表是由：标题、图例、纵轴、横轴、图形、图表范围及其他辅助元素（如水位线、网格线、刻度值、提示信息等）构成，每一个元素都有它存在的意义。不过在实际使用中不一定非得把元素全部展示出来，精简化显示想要展示的内容即可。

图表的构成

3.1标题

标题即图表的名字，是图表必不可少的元素。标题要求简短明确通俗易懂，视觉上通常需要字体加粗。标题下面也可以跟一行副标题，用作对标题的补充说明。

信息类标题：提供理解数据所需的所有信息，回答「何事」、「何地」、「何时」这三个问题
描述类标题：突出图表中显示的主要数据模式或趋势，描绘出图表所要讲述的故事

标题常用的位置有3种，左上、顶居中、底居中。

标题常用位置

3.2图例

3.2.1图例的作用：

区分不同类别数据的标志
开启/隐藏类别显示

如果图表中只有一个数据系列，则可以不用显示图例。

常见图例展现形式

3.2.2图例的位置

图例的位置并没有严格限制与要求，常见位置是上、下、右。

图例的位置

3.2.3图例的颜色

在选择图例颜色时，不要用色相过于接近的颜色，否则会容易看混或看错。

要规范图例颜色使用，一般分为两种情况：

常用的图例颜色（颜色本身代表着行业中的某种含义），此类颜色需要是固定色值，无论哪个 chart 中，都是这个颜色；
无特殊含义的图例，可以规范出一个图例颜色的使用顺序表。那些无特殊含义的 chart 可以按顺序使用图例颜色，图例整齐划一。

值得一提的是，为了照顾色弱、色盲群体，有些产品会增加无障碍花纹来进行辅助识别，提高辨识度。这种设计很有温度，毕竟设计以人为本。

Echarts的无障碍花纹样式

3.2.4图例的数量

一般来说图例不要过多，基本要遵循米勒定律，即7±2法则。

米勒定律

所以，5个以内是最佳图例数量。如果遇到比较复杂的图表，则可以进行尝试进行图例合并，如上面讲GLAD原则的时候的L原则案例，除了多个图表可以共用一组图例（前提是图例代表的意思一致），还可以把过于零碎的比重要的数据图例合并为一个“其他”。

如果图表中只有一个图例的话，则可以不显示。

3.2.5图例名称的长度

根据不同使用场景，为了更好的展示效果，要给图例名称设置一个最大值，超过最大值后省略展示，鼠标hover时再显示完整名称。

3.3坐标轴

3.3.1什么是坐标轴

坐标轴是定义域轴（叫什么）和值域轴（有多少）的统称。由于可视化图表绘制的数据大部分都有一定的现实意义，因此我们可以根据坐标轴对应的变量是连续数据还是离散数据，将坐标轴分成连续轴、时间轴、分类轴三大类。轴的类型不同在设计处理上也有差异。

坐标轴分类

3.3.2常见坐标轴组合方式

常见二维图表坐标轴分为X轴（横轴）和Y轴（纵轴），多用于表示趋势、排名、比较的数据结构。常见搭配是1 个 X 轴+1 个 Y 轴。不过特殊情况下也会用到 2X+Y 或 X+2Y。

轴的常见组合方式

在三维图表里，会多一个Z轴。

3.3.3坐标轴容易被忽略的设计细节

轴线一般只考虑是否显示，例如柱状图、折线图等，在有背景网格线的情况下，会隐藏 y 轴线，条形图则是隐藏 x 轴线，以达到信息降噪，突出视觉重点的目的。

轴刻度通常不显示，只有在肉眼无法定位到某个标签对应的数据点时，会显示刻度线，辅助用户定位，比如折线图，或抽样显示的柱状图。

网格线用于定位数据点的值域范围，跟随值域轴的位置单向显示，柱状图采用水平网格，条形图采用垂直网格。样式为虚实线的最多，斑马线由于感知过强，一般不用。

轴标题/单位主要用于说明定义域轴、值域轴的数据含义。当可视化图表标题、图例、轴标签已经能充分表达数据含义，无需单独显示标题/单位，「如无必要，勿增实体」。

没有必要就不要多此一举

连续轴/时间轴进行适当抽样。连续轴/时间轴，是由一组前后包含同等差值的等差数列组成，缺少几个数值也能明显看出中间的对应关系。当多个标签在容器内全显示发生重叠，我们可以利用抽样显示的手段来避免这种情况。常见的抽样方式是等分抽样：当多个标签在 x 轴无法完全显示，优先保留首尾标签，其余标签按同等步长间隔显示。间隔等分的前提是间隔数是合数，能被 1 和其本身以外的数整除。如果间隔数为质数，就需要「-1」转成合数。

举个例子：9个标签，间隔数是 8，能被 2 或4整除，即分成 2 等分和4等分。8个标签，间隔数是 7，无法等分，需要在间隔数基础上再「-1」，转成合数 6 后再等分，此时最后一个标签显示在倒数第二个数据点上。

分类轴是由几组离散数据组成，独立存在无紧密逻辑关联。若采用抽样规则，隐藏一些标签，用户对图表认知就会有困难，违背了数据可视化清晰、有效的设计原则。分类轴最佳处理方式是标签旋转 45 度，若 45 度仍显示不下，继续旋转 90 度。如果 90 度还是放不下就要考虑结合图表交互或反转图表。

分类轴标签字段有长有短，长文本标签直接旋转不仅影响美观，而且也不利于用户阅读。如果数据量比较少只有 2~4 个，长文本标签更适合水平展示，显示不下省略即可；如果数据量比较多，就限定字符数后旋转。

3.4图形数据

图形数据是图表中最为明显的地方，即图表的核心元素，如折线图中的折线，柱状图中的柱，饼状图中的圆。

图形数据的使用规则：

边界要清晰，不可虚化；
多个数据同时显示的时候，要保证每个数据都能清晰的看到，可以采用透明度来保证所有数据的显示。

关于图形的选择，第四章会着重介绍。

3.5提示信息

提示信息用来标识出图表中重要点的数据信息，相当于一个popover浮窗，鼠标指针在图形中hover的地方通常就是该点的数据信息。需要注意的是：重要信息尽量简化，只需要展示重要字段。

3.6水位线

根据不同产品的使用场景，有的时候会用到阈值，当达到某个阈值后，就会触发某种联动效果。这个时候就需要有个水位线了，它起到警示的作用。

水位线的表现形式有两种，实线和虚线，颜色的选取则取决于产品的警告级别。

水位线可以是一个，也可以是多个，视情况而定。

3.7图表范围

图表范围就是时间宏变量，用来切换数据的时间区间，如今天、本周（最近7天）、本月（最近30天）、本年等。

四、常见图形分类及使用场景

图形种类多种多样，个个身怀绝技，而设计师则是作为挑选者。想要做好图表设计，就需要对不同图形有较为深入的了解，并对数据进行正确理解后，与之匹配正确的图形，用可视化的方式将数据表现出来。

大多数人可能熟悉折线图、饼状图、柱状图，但是对其他的图形可能就不太了解了。本章节将带大家了解更多的图形和对应的特性，以便更好的运用和设计。

常见的图形可以分为七大类：

趋势类、比较类、排名类、占比类、流程类、分布类、关系类。

4.1趋势类图形

趋势类图形指的是对一段时间内数据的展示，如单个或多个分类数据之间的趋势变化和比较。常见的趋势图形有折线图、柱状图、堆积柱状图、面积图、蜡烛图、瀑布图等。

4.1.1折线图

折线图（Line Chart）常用于显示数据在连续时间上的趋势变化。通过折线连接各数据点，突出数据的上升或下降趋势，适合用于时间序列数据的展示。

折线图构成

4.1.2柱状图

柱状图（Basic Column Chart）用于展示多个分类的数据变化和同类别各变量之间的比较。

柱状图构成

如例图，既能展示店铺每天销售额所对应的数据，也能反映出每天份销售额的对比情况，并能通过图形能够快速了解销售额最多和最少的日期。

柱状图还有个进阶用法，就是折柱混合图。顾名思义，就是折线+柱状图的组合。折柱混合图通常使用在多组数据进行对比的情景下，如商场物品销售数据增长或减少，商品价格走势比较等，它可以非常直观的展示数据与数据的比拟，这样就能一眼查看到不同时间段的数据值，通过折线和柱状的形式展现出来。

如例图，通过柱状图能看出每个月的销售数据，而折线图能体现出利润率。当鼠标移入对应位置就可以看到详细数据。

4.1.3堆积柱状图

堆积柱状图（Stacked Bar Chart）是柱状图的变种，可以展示两个或多个数据的变化，以及数据之间的综合比较情况。

堆积柱状图构成

如例图所示，两个店铺每月总销售额用堆积图展示，在坐标轴上的每个品类都有两个数据，可以直观的展示每个品类的数据总量。

4.1.4面积图

面积图（Area Chart）是折线图的变种。与折线图不同的是，其变量数据和坐标轴之间有颜色田中，这样可以更加突出数据的变化趋势，更加直观的体现量的变化。

面积图构成

需要注意的是，填充的颜色要有30%左右的透明度，这样在展示多组数据的时候不会互相遮盖彼此信息。

4.1.5蜡烛图

蜡烛图也叫K线图（K Chart），常用于股市或期货市场（近期炒股的同学可能看到K线图心里会一咯噔）。K线是围绕开盘价、最高价、最低价、收盘价等反映市场趋势和价格信息的。

蜡烛图构成

4.1.6瀑布图

瀑布图也叫阶梯图，顾名思义，瀑布图的形状像挂在高山上的瀑布流水。瀑布图也可以呈现随时间变化的数据，但不同于堆积柱状图的是，瀑布图能够重点突出数据变化的结果，以强调多个特定数据之间的变化关系。

4.2比较类图形

比较类图形主要用于两个或两个以上的类别数据进行比较。常见的类别比较图形有柱状图、分组柱状图、气泡图、多条折线图、子弹图等。

4.2.1柱状图

这里的柱状图与前面讲的柱状图的区别在于X轴是表现类别的，前面例图的X轴是表现时间的。

4.2.2分组柱状图

分组柱状图（Grouped Bar Chart）是柱状图的延伸，它可以在同一数轴上展示各个分类下不同分组的数据情况。如例图为三家企业在产研部、设计部、商务部的人数对比情况，由此可以清晰的看出企业丙设计部人数最少，商务部人数最多的结论。

4.2.3气泡图

气泡图（Bubble Chart）是是散点图的变体，由卡迪尔坐标系（直角坐标系）和大小不一的圆组成，通常每一个气泡都代表着一组三个维度的数据。其中两个决定了气泡在笛卡尔坐标系中的位置（即x，y轴上的值），另外一个则通过气泡的大小来表示。

气泡图构成

如例图，x轴表示季度，y轴表示销售额，气泡大小代表产品所占全年销售额百分比。

4.2.4多条折线图

多条折线图除了可以表示数据随时间的变化趋势，还可以展示多组数据的对比情况。如例图所示，图为某app经营情况的分析，在时间维度上对比下载量、注册量、成交量三组数据及变化趋势。

4.2.5子弹图

子弹图（Bullet Graph）顾名思义，就是像子弹发射轨道的图表。它的数据展示类似仪表盘，优势在于可以表达丰富的数据信息，且占用的空间相对较小。子弹图的数据值是需要提前设计好的。

子弹图构成

如例图所示，差、良、优和目标值、实际值都是作为动态数据呈现的。相较于饼图，子弹图可以更高效的传递信息。

4.3排名类图形

排名图形可以为分类数据进行排排坐，它可以直观的展示最大值和最小值。它的特点是“有序”，数值往往是从高到底依次排列，类似榜单。

4.3.1有序条形图

有序条形图主要用于展示各个分类的数据排名，它是最常用的排名图形，因为是线性结构，对于微小数据间的对比会有很好的易读性。

4.3.2有序柱状图

有序柱状图和有序条形图一样，都可以表现数据的排名情况。区别在于一个是横向对比图，一个是纵向对比图。

4.4占比类图形

占比图形是大家最常见的图形了，主要用于表现分类数据占整体的

百分比情况

。常见的图形有饼图、环形图、堆积面积图、矩形树图、旭日图等。

4.4.1饼图

饼图（Pie Chart）是展示占比数据最最直观的图形了，它是通过饼块的大小来直观的表示分类的占比。但是饼图也有一定局限性，即当占比数值比较接近或者占比分类比较多时，在视觉上就不太容易分辨各个类别的占比情况。

4.4.2环形图

环形图（Donut Chart）的作用和饼图一样，但是环形图的特点是中间区域是空的，所以视觉表现上比饼图要弱一些，中间空心区域还可以用来放标题、图标、数据等。

4.4.3堆积面积图

堆积面积图（Stacked Area Chart）就是叠加数据，不同颜色之间的数据并没有叠加关系，它的整体色块面积是数据总量，不同的分类数据可展示不同的占比情况。如例图，不仅可以展示全球能源消耗总量，切换百分比模式还能展示不同国家消耗能源的占比情况。

4.4.4矩形树图

矩形树图（Treemap）由马里兰大学教授Ben Shneiderman于上个世纪90年代提出，起初是为了找到一种有效了解磁盘空间使用情况的方法。矩形树图适合展现具有层级关系的数据，能够直观体现同级之间的比较。

矩形树图的好处在于，相比起传统的树形结构图，矩形树图能更有效得利用空间，并且拥有展示占比的功能。矩形树图的缺点在于，当分类占比太小的时候文本会变得很难排布。相比起分叉树图，矩形树图的树形数据结构表达的不够直观、明确。

4.4.5旭日图

旭日图（Sunburst Chart）是一种现代饼图，它超越传统的饼图和环图，能表达清晰的层级和归属关系，以父子层次结构来显示数据构成情况。旭日图中，离远点越近表示级别越高，相邻两层中，是内层包含外层的关系。

如例图，对医院进行看病、挂号、取药的流程，用旭日图呈现。比如取药是等号、排队、拿药的父级，其中等号占取药的比重最大。

4.5流程类图形

流程类图形用来显示流程流转和流程流量。一般流程都会呈现出多个环节，每个环节之间会有相应的流量关系，这类图形可以很好的表示这些关系。常见的流程类图形有漏斗图和桑基图。

4.5.1漏斗图

漏斗图（Funnel Chart）适用于业务流程

比较规范

、

周期长

、

环节多

的

单

流程单向分析，通过漏斗各环节业务数据的比较能够直观地发现和说明问题所在的环节，进而做出决策。漏斗图用梯形面积表示某个环节业务量与上一个环节之间的差异。漏斗图

从上到下

，有逻辑上的顺序关系，表现了随着业务流程的推进业务目标完成的情况。

漏斗图总是开始于一个100%的数量，结束于一个较小的数量。在开始和结束之间由N个流程环节组成。每个环节用一个梯形来表示，梯形的上底宽度表示当前环节的输入情况，梯形的下底宽度表示当前环节的输出情况，上底与下底之间的差值形象的表现了在当前环节业务量的减小量，当前梯形边的斜率表现了当前环节的减小率。通过给不同的环节标以不同的颜色，可以帮助用户更好的区分各个环节之间的差异。漏斗图的所有环节的流量都应该使用同一个度量。

漏斗图构成

4.5.2桑基图

桑基图 (Sankey Diagram)，是一种特定类型的流图，用于描述一组值到另一组值的流向。因为首次使用它的人是一名叫Sankey的爱尔兰土木工程师，所以就叫桑基图。

桑基图通常应用于能源、材料成分、金融等数据的可视化分析。

桑基图的构成

如例图所示，可以清晰的看到，从搜索框直接搜索进入酒店详情页的流量是最大的。充分说明了搜索是刚需。

4.6分布类图形

分布图形主要用于展示每个数值在数据集中出现的频次和数量，常见类型有散点图、气泡图、热力图、直方图、箱型图、等高线图等

4.6.1散点图

散点图Scatter Chart，也叫 X-Y 图，它将所有的数据以点的形式展现在笛卡尔坐标系上，以显示变量之间的相互影响程度，点的位置由变量的数值决定。

例图展示的是AB两国男性的身高和体重数据，通过散点图中的数据点分布情况可看出，B国男性的身高远大于A国。

4.6.2气泡图

前面4.2.3里讲过单维度数据的气泡图，这里是多维度的气泡图案例。如例图所示，图中展示了5个维度的数据，气泡的代表地区类别，气泡的大小代表人口总数，气泡颜色代表国家类别，X轴代表人均国内生产总值，Y轴代表人均寿命。

需要注意的是，气泡图的数据大小容量有限，气泡太多会使图表难以阅读。但是可以通过增加一些交互行为弥补：隐藏一些信息，当鼠标点击或者悬浮时显示，或者添加一个选项用于重组或者过滤分组类别。另外，气泡的大小是映射到面积而不是半径或者直径绘制的。因为如果是基于半径或者直径的话，圆的大小不仅会呈指数级变化，而且还会导致视觉误差。

4.6.3热力图

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

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

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

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

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

评论(0) 浏览(1273)

222024-5

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

涛涛

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

评论(0) 浏览(848)

212024-5

分享一些排版技巧

博博

评论(0) 浏览(937)

212024-5

常见的B端弹窗样式设计总结

鹤鹤

B 端产品的业务场景通常比 C 端更为复杂，因此在进行产品设计时对信息的处理方式也需要根据不同的业务场景进行设计。今天主要聊一下 B 端产品设计中弹窗设计。

弹窗的定义

弹窗是展现在用户操作界面之上的容器，在 X 轴和 Y 轴的平行空间之上扩展了页面的高度。是系统与用户之间建立联系非常重要的组成部分。它通常在用户进行特定操作或访问特定页面功能时弹出，目的是向用户展示某些信息、提供选择或执行某些操作。

弹窗使用场景

需要呈现的内容篇幅相对较少。
常用于针对某些内容进行补充说明、需要用户处理关键信息、重要的警告提示等。
通常是由系统触发（用户被动接受）。
弹窗整体高度和宽度不做绝对的标准或规定，可以根据内容篇幅的多少和视觉的平衡度来确定，整体规范保持一致即可。

总体概括为简单和复杂两个场景。

一、场景简单

场景简单包括：全局提示、气泡确认框、警告提示、通知提醒框，通常是操作确认和系统内部自动触发性提示时使用。

1. 全局提示

以 toast 提示居多，通常在页面中间偏上的位置。

2. 气泡提示

用于解释难理解的功能名词或者由于版面限制文字展示不完，利用气泡来展示。

3. 警告提示

用于重点内容的警告提醒，降低用户犯错概率，提升用户的使用体验。

4. 提示性通知弹窗：

位置相对固定，通常出现在需要介绍说明的功能旁边或者居页面中间展示。

例如，当系统发生重要更新维护或者重点功能引导时，可以显示一个提示性通知弹窗，告知用户当前状态。

类型主要包括以下三种：

举例：

有赞后台页面

二、场景复杂

1. 场景复杂｜全屏弹窗

新开页签（浏览器）

为什么是全屏弹窗，而不是页签？

全屏弹窗功能和页面相似，之所以使用全屏弹窗作为页面载体，原因就是对原触发页面的使用和关注并没有结束，编辑完成后需要快速关闭当前窗口并返回到原来的页面中去，数据可以做到实时同步。如果用新页签打开，则会对数据同步造成隔断，需要二次打开页面。页签是浏览器新开窗口，通常用于不同功能的展示。

2. 场景复杂｜非全屏弹窗

①中间弹窗·纯文本

确认弹窗：用于向用户确认某个操作或决策，通常包含确认和取消两个按钮。例如，当用户点击删除按钮时，可以显示一个确认弹窗，询问用户是否确定删除。

②中间弹窗·下拉框

下拉框：后台将全部数据返回，下拉展示全部内容，方便用户快捷查询。

③中间弹窗·文本输入

文本输入：通常用于备注等说明性内容的填写。

④中间弹窗·选择器

包括单选和复选两种类型，下图以单选框举例。

⑤中间弹窗·步骤条

⑥中间弹窗·多内容组合

⑦中间弹窗·左右穿梭框

穿梭框左侧通常会有分页，为了防止用户对已选内容造成遗忘，右侧框展示已选内容进行二次核对。

⑧中间弹窗·上下穿梭框

举例：

3. 场景复杂｜抽屉

抽屉呈现的内容篇幅介于弹窗和页面之间，通常居右侧展示。

①抽屉·纯文本

通常展示较大篇幅的说明性内容。

②抽屉·横向 tab

通常展示同一大类下，不同分类的信息内容。比如全部消息、已读、未读等。

③抽屉·纵向 tab

④抽屉·多内容结合

多类型内容的聚合展示。

三、其他情况

①强制性提示

为了更好的了解用户特征，提供更加优质的服务，有的系统在用户首次使用时，会出现强制性弹窗，执行必要操作后，才可进入系统使用。

四、弹窗使用规范

上下左右间距大小固定，弹窗大小根据内容的多少来自动调整。

①中间弹窗

②侧边弹窗

以上就是全部内容，谢谢。

作者：西城门设计
链接：https://www.zcool.com.cn/article/ZMTYyMDI5Ng==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

评论(0) 浏览(1599)

212024-5

层级思维解构图标分类体系

鹤鹤

近年来，Ul设计行业蓬勃发展，图标设计风格更是呈现出多元化的特点，各种新颖、创意的设计风格层出不穷。图标样式早已从潺潺溪水变成汪洋大海，通过系统归纳和整理各类常用的面性图标设计类型与风格，我们构建了一套体系化的记忆框架，使得在日常工作中能够迅速且准确地作出图标样式的决策，从而有效提升设计效率与质量。本文章主要讨论近年UI界面中会经常使用的图标风格，线性图标样式组成一般过于简单，在此不做讨论。

本文在探讨图标的分类思维时，巧妙地运用了层级理念，

并特别关注层级是否穿透这一关键因素来区分不同类型的图标。这种分类思维不仅使图标的辨识变得更为便捷，还有助于人们更轻松地形成深刻的记忆印象。通过这种创新性的分类方法，我们得以更清晰地理解图标的本质与特点，进一步提升我们对常用图标的认知水平和应用

评论(0) 浏览(905)

212024-5

B端基础 | 52000余字总结 B 端基础设计知识

鹤鹤

1、

内容总结

因为在写这个系列的文章时我加入了很多扩展知识。希望告诉你更多。这里我会把主要的这个系列的知识总结一下让你尽量一次看完。

1.1、登陆页面

最近就在做我们系统的登陆页面优化。回头我会写一个项目总结给你们看。这里介绍一下B端登陆页面该怎么去做。其实还挺简单了。因为现在主流的布局就那几个。

登陆页面：布局分为三种；居左、居右、居中

页面元素：导航、登录框、背景（装饰元素）、互联网信息。

导航

高度：68px或48px、文字大小：14（大部分）16（也可以）

登录框

大小：大小尺寸不统一、没有固定的尺寸。可以根据自己和领导的喜好决定。对还有要承载的内容多少。

登录方式：扫码、手机号、账号、第三方

标题切换字号：我喜欢用26px（也要其他的16、/18、/20）

输入框高度：48px

按钮文字和高度：16px、和输入框高度一直就行。

背景

可以是配的插画（这种最简单）、一般都是科技风

底部

要不就是单纯的互联网信息。要不就是快捷入口、联系方式什么。这个就不多说了正常排版就行。

1.2、筛选

筛选相对是很简单的部分把、因为你直接用规范里的组件。虽然不会很优秀、但是刚重要的是不会出什么错误。主要是就大厂规范能够快速的帮你解决问题。

筛选的意义：定位数据、缩短查询路径、数据内容分类

筛选类型：基础筛选组件（就是我们常见的页面顶部的筛选）、高级筛选（就是那些需要你定义想一想的筛选部分）

筛选布局：顶部和左侧

筛选样式：平铺；折叠；Tab筛选；单侧选择；表头；综合

1.3、栅格

这里其实还简单的、首先你要明白栅格在我们的设计里面很重要。你不用当然也可以呀。但是你想要做的更好那就用起来你会有意外的收获。

怎么用：直接看ant design、TDesign、阿科desing的规范就行、写的很清楚。

注意点：不要硬套、我们要根据自己的系统去自己定制。比如我们系统、用的是ant design的框架、但是我们的网格系统是自己定制的。因而我们的边距不是24px、我们是20px

1.4、颜色

这部分相对来说是我自己的弱项、在写当时的文章的时候也是收获颇多的。明白了大厂规范是怎么确定自己色彩设计规范的。也清楚了自己应该怎么去规定自己的设计规范。

主色确定：常见的方法、1、用自己品牌logo的颜色；2、用行业色

配色确定：我一般是找竞品、或者优秀的配色方案、来确定自己的。多参考大厂的配色方案。虽然不全是好的。但是好的还是站大多数的。

大厂色彩：这里我分享了大厂的色彩是怎么去确定的、如何去确定。可以去看看。我在自己的工作中色彩的应用就参考了ant Design的色彩应用方式定制的。

1.5、字体

字体部分我觉得最有意思是的是分享了、我们宋体、楷体、隶属、甲骨的发展历史和由来。还有就是如何去设计一款自己的字体。还有后台字体规范的制定

中国文字：这里中国文字的发展历史、所有字体的产生都是有自己发展的历史原因的。很有意思。建议你看看、可以当做你喝酒吹水的谈资。

字体规范：我们大部分的字体会采用黑体、可读性强、亲和、现代、清晰。

字号：最新的字体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的然后传到阿里巴巴矢量图库让开发直接引用。这个是自己累点、但是可以保障实现效果。

设计原则：准确、简单、节奏、愉悦。

设计实战：采用栅格

我是用的阿里巴巴矢量图库的设计规范、因为我要传到这个平台应用

ICON分类：交互性图标、装饰性图标、说明性图标

1.7、按钮

按钮我觉得这部分是相对简单的、也是要做到风格的统一。直接用大厂组件然后根据自己平台的风格、不如圆角的大小其他的倒是没什么了。

常规按钮：次要按钮、主要按钮、文字按钮、图标按钮

按钮状态：可用、禁用、加载、悬浮

尺寸：把按钮分成：迷你、小、中、大，四种尺寸。高度分别为：24px/28px/32px/36px。推荐及默认为尺寸「中」。

样式：各个规范对按钮形状的规范基本都一样。提供长方形、正方形、圆角长方形、圆形四种形状。

布局：这里分享了两个概念、古登堡法则、费茨定律、告诉你我们为什么这么排版。对产品和甲方很有用、哈哈、这是我的秘诀。

1.8、弹窗

后台弹窗是一个很复杂的内容、但是也是一个相对很好处理的部分。只要你做好规范这部分、简直就是一点开胃小菜。

弹窗是一个我头痛的问题因为不太好规范。但是我还是把这个弹窗系统、在我们的体系中形成了一个小的规范。感谢领导、感谢前段端的龙哥。

我们把前段粗略的分为400px、600、800、1000、最大、广告。业务里我们会采用4、/6、/8、/1、最大、推广和通知我们就统一的尺寸。

1.9、表单

什么是表单：我理解表单就是系统为和用户进行交互、所要收集用户信息的或获得用户反馈的一种方式的载体。在后台产品中对我们数据做的增、删、改、查、验都可以通过表单完成。

我们在后台系统中、大部分的场景都会使用上表单。信息采集呀、编辑数据呀等。在表单设计时要遵循的原则、简洁明了、清晰高效、适应业务、即时反馈。

表单的构成结构、基本都是由、标签、域、提示、操作按钮这四个部分构成的。

表单布局在表单中我们采用多种布局方式。信息分组、内容列表、标签页、分步骤。

1.10、表格

B端设计中，对数据浏览、操作、过滤、展示是最高效的。这你就不用质疑了。因为结构简单、精准高效、数据形式丰富。

表格是用来收集、整理、组织、分析数据的二维矩阵。它由内、外两部分组成。其中，内部包含表头、表体、底栏等。外部包含标题、筛选区、操作按钮区等。

表格的类型：基础表格、树形、子表格、交叉表格、图表表格、卡片表格

表格的样式：网格型、水平线型、斑马纹、自由形式

进阶的一些知识就是表格数据的优化和表格的交互知识了。想了解去看更详细的我的文章11表格设计和12表格优化项目实战。

1.11、大厂规范

如果你是一个小厂B端设计师、刚好没有自己平台的设计规范。那就去直接用的场的设计规范。去用没问题的。大厂那么多的牛逼设计给你做好了你不用。都塞到嘴巴上、不吃就不给面了。

在使用大厂的设计规范时然后慢慢的积累自己平台的设计规范。逐渐的你就会形成一个属于你们自己平台业务的高质量设计规范了。

2、计划

这个基础系列的文章就这样写结束掉吧、希望可以对你的B端设计有所帮助。之后我会写二个系列的文章、去分享我理解的B端设计。

第一个系列是B端基础设计的加强版、B端高手。B端高手是会写我的实战里是怎么去做的。其实就是我的设计项目复盘。

第二个系列就随便的去分享一些设计知识。比如哪些什么什么原理呀、什么什么法则呀、在设计里的应用。而且会提出和讨论一些设计问题。

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

评论(0) 浏览(829)

202024-5

设计原则之一致性

前端达人

一、什么是一致性呢？

二、为什么一致性很重要呢？

三、生活中一致性的案例

四、 UI设计一致性的体现

五、交互设计一致性的体现

六、总结

一、什么是一致性呢？

一致性的字面意思和使用的场景不同代表的含义也会有区别，这里主要使用在UI/UX设计中。

UI/UX设计中一致性是指在整个应用程序或网站中使用相同的设计元素和模式。它涉及在所有页面和屏幕上使用相同的视觉语言、布局和交互，以创造一致且直观的用户体验。一致性有助于用户了解如何浏览应用程序或网站，消除困惑和沮丧，并使他们更容易学习和记住如何使用产品。

设计并非孤立的实践。它与其他领域交织在一起，其中之一就是心理学。在设计中发挥根本作用的心理学原理是重复定律。

这一定律的起源可以追溯到 20 世纪早期，当时德国心理学家赫尔曼·艾宾浩斯进行了开创性的研究。他的工作对理解人类记忆具有革命性意义。艾宾浩斯最著名的贡献是“遗忘曲线”，它表明如果不尝试保留信息，信息会随着时间的推移而丢失。然而，他还发现，反复接触信息会极大地影响我们记忆信息的能力。从本质上讲，重复可以强化回忆。

艾宾浩斯的重复实验主要关注学习和记忆的过程，但其影响远不止于此。这让人们认识到，重复的元素更容易被记住，从而引导观众的注意力和焦点。很明显，重复可以用来引导行为和理解。

通过重复颜色、形状和图案等特定元素，设计师可以创造一种统一感和节奏感。这种重复还使设计师能够强调基本元素或信息。

重复不仅仅是一种设计原则，更是生活的一个基本方面。在自然界中，重复以各种方式体现，从雪花的对称性到海浪拍打海岸的韵律图案，从贝壳的螺旋到一年四季的循环。这种自然的重复带来了节奏、结构和可预测性，创造了一种舒适和熟悉的感觉。

人类是自然的一部分，天生就能够识别和响应这些模式。我们的大脑是出色的模式识别机器，我们倾向于认为重复的模式令人感到舒适和熟悉。这种认知特征解释了为什么设计中的重复模式（无论是在数字界面、实体产品、建筑还是营销中）会引起我们的共鸣。

二、为什么一致性很重要？

在 iOS 的设计指南中，一致性被视为让设计融入 iOS 生态的关键，它帮助用户在不同应用间建立起一种熟悉感。遵循规范的一致性可以「help your design feel at home in iOS」，保持一致性是为用户带来产品愉悦感的重要方式。

在经典交互设计原则中，「一致性」一直是重要的设计准则。在几乎可以称为「设计师必读」的雅各布·尼尔森的十条可用性原则中，一致性（Consistency and standards）位列第四，原则建议设计者在界面和交互上遵循既定的规则，无论是在应用内部还是跨平台之间。

在具体的执行中，内部一致性通常指应用内应当使用统一的视觉风格和交互语言，相同的功能和操作应该在体验上保持一致。而外部一致性则更强调用户应该遵循平台和系统的设计规范，保持用户在同一平台不同应用间体验的相似性。

一致性在UI/UX（用户界面/用户体验）中非常重要，因为它对于提供良好的用户体验和用户界面的可用性至关重要。下面详细说明一致性的几个重要原因：

1、用户学习曲线：

一致的UI/UX设计可以降低用户的学习曲线。当用户在应用程序或网站中遇到一致的元素、布局和交互方式时，他们可以快速理解并准确预测如何与界面进行交互。这减少了用户的混淆和困惑，提高了他们的效率和满意度。

2、提升可用性：

一致性使用户界面更加易于使用。当用户在不同的页面或功能之间找到相似的设计元素和交互模式时，他们可以轻松地将已有的知识和经验应用于新的情境中。这种一致性帮助用户快速完成任务，减少错误和迷失，提供更好的导航和流畅的体验。

3、品牌认可度：

一致的UI/UX设计有助于树立品牌形象和增强品牌认可度。通过在不同的渠道和平台上保持一致的设计元素、标识和视觉风格，品牌可以建立起独特而可识别的形象。用户在不同的触点上都能感受到品牌的一致性，从而增加品牌的信任和忠诚度。

4、用户满意度：

一致性直接影响用户的满意度。当用户在使用应用程序或网站时感受到一致的设计和交互方式时，他们会感到更加舒适和自信。一致性传递了专业和质量的信号，让用户感到被关注和重视。这种积极的用户体验有助于提升用户满意度，并促使他们持续使用和推荐你的产品或服务。

三、生活中一致性的案例

生活中的案例保持一致性的有很多，

a、例如红绿灯，在学习驾照或老师教学时会统一讲解红灯停，绿灯行。

b、向左向右箭头符号的使用，在日常生活中都会保持一致。

c、我们乘坐地铁时，地铁的线路图也会保持一致性，每个站的点大小，文字，到站和未到站以及行驶过的站点都有清晰统一的设计和交互操作。

四、 UI设计一致性的体现

1、颜色

颜色是一种物理现象和感官体验,是光波在人眼视网膜上的反射或吸收所形成的视觉效果。

设计中的颜色选择代表了一个项目的品牌，例如常见的饿了么蓝，美团的黄，京东的红等等，颜色的一致性有助于营造良好的视觉体验,强化品牌形象,提升可用性和无障碍性,最终改善用户的整体交互感受。这对于产品的成功至关重要。在设计时颜色（品牌色）会延续到按钮，图标，字体、标签，背景，banner等模块使用。

2、字体

字体是一种特定的文字样式,它描述了文字的形状、大小、粗细、间距等视觉特征。

字体是设计中非常重要的元素之一，不同类型的字体，字体的粗细，有衬线字体和有衬线字体，字体的字重等，这些不一致会造成页面混乱，字体的选择和使用会对用户的视觉体验、信息感知、品牌联系和情感体验产生重要影响。

开发实现上如果字体使用较多，会影响加载速度，没有统一的字体制定规则后期更新迭代也会比较繁琐，造成资源浪费。

3、图标

图标是一种简化的、具有视觉表现力的符号图形,在用户界面设计、信息传达等领域广泛应用。

在众多APP中，常使用APP的你肯定可以感受到，图标除了准确的表达某个含义，还需要在设计时保持一致性，图标的大小，设计的风格例如线型图标、填充图标、简约图标、立体图标、卡通图标等，如果这些图标风格进行混合使用就会造成混乱，影响用户体验，看起来很不专业也会影响用户使用时对于安全性的担忧。

4、按钮样式

按钮是一种常见的交互界面元素,用于触发某种操作或功能。

设计中的按钮有很多样式，因为项目类型的不同按钮样式也不同，按钮的样式有圆形按钮，矩形按钮，圆角矩形按钮，菱形按钮等，同一个项目中建议使用统一的按钮样式，除了可以体现专业性，还可以让用户增加信任度，按钮样式使用很多，用户除了使用体验不友好，还会觉得是不是跳出了这个产品去到了另一个地方。

5、排版

排版是指在印刷或数字媒体中,对文本、图像等内容进行有规则的布局和格式化的过程。

设计中排版的一致性，使用户能够快速适应和理解界面的结构，降低学习成本，用户对于熟悉的排版模式产生更强烈的归属感和安全感，使内容更易读，用户可以依照熟悉的视觉动线快速找到所需信息，提高信息获取效率。

五、交互设计一致性的体现

1、操作一致

根据文字意思就是用户才操作时候的流程保持一致，操作保持一致，例如大家常见的下单购买商品流程，

用户在购买商品时：点击商品——商品详情——付款购买，其他商品也应该是这样流程，

如果每个商品流程不同就会很乱，例如：

点击A商品————商品详情——付款购买；

点击B商品——付款购买——查看商品详情；

点击C商品——同类商品列表——商品详情——付款购买，

这样就会很乱，用户不知道点击下一个商品会是什么样子。

例如：

1、APP中的视频浏览是上下滑动，进入新的模块后视频浏览变成了左右滑动。

2、需要确认某些操作时，确认按钮一会在右侧，一会确认又在左侧。

用户在操作时会除了体验很乱，也很难培养用户习惯。

2、文案符号一致

文案和标点符号的一致比较好理解，例如常见的输入框，“请您输入帐号”，“请输入你的密码”，同一页面场景下文案和称呼不统一，会造成用户操作迟疑，是不是这个不重要才用了“你”，重要的才用“您”，为了避免用户进行不必要的思考文案保持一致，符号亦是如此。

3、反馈一致

当我们看到下一步按钮时，有些地方交互是进入了新的页面，有的是分步式使用。建议使用一种保持统一，避免用户产生误导。

操作反馈后的弹窗，相同功能反馈的弹窗样式不一致：一会是图文弹窗，一会纯文字提示，用户也会很乱，包括交互时出现的样式也需要保持一致，剧中或从下向上弹出。

六、总结

一致性在UI/UX中的重要性在于提供清晰、高效、易用和令人愉悦的用户体验。通过保持设计元素、布局和交互方式的一致性，可以降低用户的认知负荷，提高用户的学习效率，增强品牌形象，提升用户满意度，并最终实现更好的业务成果，详细分为以下七点：

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

评论(0) 浏览(1005)

202024-5

常见的B端弹窗样式设计总结

前端达人

弹窗的定义

弹窗使用场景

需要呈现的内容篇幅相对较少。
常用于针对某些内容进行补充说明、需要用户处理关键信息、重要的警告提示等。
通常是由系统触发（用户被动接受）。
弹窗整体高度和宽度不做绝对的标准或规定，可以根据内容篇幅的多少和视觉的平衡度来确定，整体规范保持一致即可。

总体概括为简单和复杂两个场景。

一、场景简单

场景简单包括：全局提示、气泡确认框、警告提示、通知提醒框，通常是操作确认和系统内部自动触发性提示时使用。

1. 全局提示

以 toast 提示居多，通常在页面中间偏上的位置。

2. 气泡提示

用于解释难理解的功能名词或者由于版面限制文字展示不完，利用气泡来展示。

3. 警告提示

用于重点内容的警告提醒，降低用户犯错概率，提升用户的使用体验。

4. 提示性通知弹窗：

位置相对固定，通常出现在需要介绍说明的功能旁边或者居页面中间展示。

例如，当系统发生重要更新维护或者重点功能引导时，可以显示一个提示性通知弹窗，告知用户当前状态。

类型主要包括以下三种：

举例：

有赞后台页面

二、场景复杂

1. 场景复杂｜全屏弹窗

新开页签（浏览器

评论(0) 浏览(859)

172024-5

比GIF更好用的Lottie动画是什么？

前端达人

不知道大家有没有这样的困扰，每次制作GIF图的时候，难免会出现边缘锯齿，就算加上白边之后，在夜晚模式的时候锯齿就更明显了。除此之外，GIF图对于渐变填充的呈现也很糟糕，会出现渐变断层的情况，看起来很不自然。

最让人难以接受的情况是：

稍微把动画做流畅一些，GIF的文件大小就变得巨大无比。

在2017年的时候，一款比GIF动画更好用的动画图片格式诞生了！！！

那就是我们今天将要介绍的Lottie动画。

什么是Lottie动画？

Lottie动画是一种基于 JSON 的动画文件格式，允许在任何平台上发送动画，就像发送图片一样轻松。Lottie是可在任何设备上运行的小文件，并且可以放大或缩小而不会出现锯齿的一种动画格式。

相较于其他动图格式，Lottie有哪些优点？

①文件大小

和GIF、Apng 或 MP4 等其他格式相比，Lottie 动画要小得多，同时保持相同的动画表现，甚至更流畅。

②无线扩展

Lottie动画是基于矢量设计制作的，这意味着可以随意放大或缩小它们，而不必担心分辨率的大小导致的锯齿问题。放大无数倍也是清晰如初。

③支持多平台

对于所有开发人员来说，Lottie动画的交接非常简单。现在我们可以在 iOS、Android、Web 和 React Native 上使用 Lottie 动画，也不需要修改。使用和调用都非常方便。

④可交互

在 Lottie 动画中，动画元素可以设计为可交互组件，用户可以操纵它们进行交互，实现滚动、单击和悬停等交互效果。这是GIF、Apng和MP4等动画文件都没办法做到的。

怎么设计制作Lottie动画呢？

目前，Lottie官网提供了很多动效设计软件的插件供大家使用和下载。目前下面这些设计软件可以在官网下载到Lottie动画的导出插件。

其中，Lottie Creator是Lottie官方的网页版动画制作工具，登录官网就可以使用。

Lottie官网地址

https://lottiefiles.com

说了这么多Lottie的优点，其实Lottie也是有短板的。比如说，AE里面的fx效果，Lottie就全部不支持，另外复合路径动画等等动效效果也不支持。

为了方便大家快速上手Lottie动画，作者把Lottie支持的效果整理归类成了几张图片，方便大家制作的时候快速查阅。

作者：江浩大叔工作室
链接：https://www.zcool.com.cn/article/ZMTYxODY4MA==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

评论(0) 浏览(1190)

172024-5

B端后台管理界面设计欣赏

前端达人

在现代企业中，B端后台管理界面设计是提升工作效率和用户体验的关键因素。本文将通过UI设计公司提供的优秀案例，探讨如何优化后台管理界面的设计，提升用户的使用体验。

1. 界面简洁，功能齐全

一个优秀的B端后台管理界面，首先应具备简洁明了的设计风格。UI设计公司在设计过程中，通常会通过简洁的布局和清晰的导航，帮助用户快速找到所需功能。例如，蓝蓝设计公司就采用了极简设计原则，在保持美观的同时，确保用户能够高效操作。

2. 交互设计人性化

人性化的交互设计是提升用户体验的关键。UI设计公司会根据用户的使用习惯和需求，设计直观的操作流程和反馈机制。例如，通过在重要操作后提供即时反馈，减少用户操作的疑惑和错误。

3. 数据可视化

对于后台管理界面来说，数据可视化是不可或缺的一部分。通过图表、仪表盘等可视化工具，用户可以直观地了解业务数据，从而做出更好的决策。UI设计公司通常会使用最新的数据可视化技术，帮助用户快速理解复杂的数据。

4. 响应式设计

随着移动设备的普及，响应式设计变得尤为重要。优秀的B端后台管理界面应能够在不同设备和屏幕尺寸下保持良好的使用体验。UI设计公司会在设计时考虑多种终端的兼容性，确保界面在手机、平板和电脑上都能流畅运行。

5. 安全性与稳定性

后台管理界面涉及大量敏感数据，安全性和稳定性是设计过程中不可忽视的因素。UI设计公司在设计时会采用多层次的安全措施，保障数据的安全，同时通过优化代码和服务器配置，确保系统的稳定性和高效性。

通过以上几个方面的优化，UI设计公司能够打造出高效、美观、易用的B端后台管理界面，助力企业提升管理水平和工作效率。希望这些优秀案例能为你的设计工作提供一些启发和参考。

评论(0) 浏览(1260)

« 1 ... 11 12 13 14 15 16 17 ... 66 »

日历

链接

个人资料

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

首页

分类

日历

链接

个人资料

存档