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

首页

302024-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热力图

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

如例图，杭州实时旅游热点区域的热力图，颜色越偏红的区域人流量越大，颜色越偏蓝人流量越小。

4.6.4直方图

直方图（Histogram）形状上看上去好像就是柱状图，但是含义却完全不同。直方图能够显示各组频数或数量分布的情况，易于显示各组之间频数或数量的差别。通过直方图还可以观察和估计哪些数据比较集中，异常或者孤立的数据分布在何处。

直方图构成

如例图所示，绘制了钻石的全深比数据的统计直方图，从图中可以看出在 66 附近有两个孤立值

4.6.5箱型图

箱形图（Box Chart）又称盒须图、盒式图或箱线图，是一种用作显示一组数据分布情况的统计图。

箱形图多用于数值统计，虽然相比于直方图和密度曲线较原始简单，但是它不需要占据过多的画布空间，空间利用率高，非常适用于比较多组数据的分布情况。

蓝蓝设计(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) 浏览(1149)

292024-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端高手是会写我的实战里是怎么去做的。其实就是我的设计项目复盘。

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

3、写在最后

分别是为了更好的相见、我一直希望我的文章可以帮到你。慢慢来路还很长、总是要一步一步的来。很快我们会再次相见。我是KING（国王）

新的开始见.......

注解：标题的40000余字也好、50000字也好都是说的我这个系列总计的字数、因为想让你们看到。

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

评论(0) 浏览(906)

292024-5

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

鹤鹤

一、B端用户需求的深入理解和分析

在当今高度信息化的商业环境中，B端产品已成为企业高效运营和持续发展的关键支撑。

这些产品不仅提供工具和服务，更是企业优化流程、提升工作效率和竞争力的有力武器。然而，要打造一款成功的B端产品，关键在于对

B端用户需求的深入理解与分析。

B端用户，

如企业决策者、团队管理者和专业人员以及普通员工，他们在日常工作中处理复杂的业务流程，对数据分析、系统整合、安全性等方面有着极高的要求。

这些用户的独特需求不仅体现在产品的基本功能上，更涉及到产品的易用性、可扩展性以及服务支持等多个层面。

评论(0) 浏览(727)

282024-5

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

前端达人

一、为什么需要数据过滤

在B端（Business to Business，即企业对企业）应用中，表格数据过滤功能是一项非常重要的功能。它能够帮助企业用户更方便地管理和查询表格数据，提高工作效率和数据准确性。因此一个体验感良好的数据筛选功能有助于用户的任务处理效率。帮助系统更加友好、易用，从而增加用户的满意度和使用频率。

在确定过滤类型之前，首先，需要确定哪些字段需要进行筛选。这需要根据业务需求和用户习惯来确定。例如，在销售系统中，可能需要对产品名称、销售日期、销售数量等字段进行过滤；在人力资源系统中，可能需要对员工姓名、部门、职位等字段进行过滤。

二、数据过滤的类型

根据确定的过滤条件，需要设计合适的过滤方式。常见的过滤方式包括：1）搜索；2）页签导航；3）条件筛选。不同类型的过滤方式对应不同的用户目标及数据特点

三、搜索

搜索是一种通过输入关键词或短语在大量数据中寻找相关信息的过程。在互联网时代，搜索已成为获取信息的主要途径之一。通过搜索引擎，用户可以快速地找到自己需要的内容。

3.1 搜索类型

3.1.1 单条件模糊搜索

介绍：用户在搜索框中输入一个关键词，然后搜索引擎返回与该关键词相关的结果。

优点

：简单易用，用户只需要输入一个关键词即可快速找到相关信息；
缺点

：搜索方式可能不够精确，因为用户可能没有提供足够的上下文信息，导致搜索引擎返回的结果与用户的期望不符

3.1.2 多条件模糊搜索

介绍：指用户在搜索框中输入或选择多个关键词，然后搜索引擎返回与这些关键词都相关的结果。可选择是后台配置查询条件还是用户配置。

优点

：更加精确，因为用户提供了更多的上下文信息，可以帮助搜索引擎更好地理解用户的意图；
缺点

：需要用户输入更多的关键词，增加了用户的输入成本。

3.1.3 搜索条件切换

介绍：指用户在搜索框中输入一个关键词后，可以手动切换到另一个关键词进行搜索。

优点

：灵活性和自由度更高，用户可以根据自己的需要随时切换关键词进行搜索；
缺点

：需要用户手动操作，增加了用户的操作成本。

3.2 触发方式

3.2.1 实时触发

介绍：实时触发是指当用户在搜索框中输入关键字时，搜索功能会立即进行匹配并返回相关结果。这种触发方式可以为用户提供实时的搜索体验，方便用户快速找到所需信息。通常需要后端服务器的支持。

优点

：当用户在搜索框中输入文字时，搜索功能会立即提供搜索结果。这种方式可以提供快速反馈，让用户更快地找到所需信息。此外，实时触发搜索还可以帮助用户逐步缩小搜索范围，提高搜索效率。
缺点

：可能会对服务器造成较大的负担，因为每次用户输入都会触发一次搜索请求。其次，实时触发搜索可能会干扰用户的输入过程，因为用户需要不断地观察搜索结果并根据结果进行调整。

3.2.2 手动触发

介绍：指用户需要手动触发搜索功能，通常是通过点击搜索按钮或按下回车键来执行搜索操作。这种触发方式可以避免用户在输入过程中频繁触发搜索，提高用户体验

优点

：用户需要点击一个搜索按钮或使用特定的快捷键才能触发搜索功能。这种方式可以减少对服务器的负担，并且不会干扰用户的输入过程。
缺点

：可能会让用户感到不便，因为他们需要手动触发搜索功能。此外，如果用户忘记触发搜索功能，他们可能会浪费时间在输入过程中。

3.3 理解用户的搜索意图

提高用户的搜索效率和满意度。通过提供相关的关键词建议和展示之前的搜索历史，搜索引擎可以帮助用户更快地找到所需信息，并减少用户的搜索时间和成本。此外，这些功能还可以增加用户的忠诚度和满意度，因为它们能够提供更加个性化和智能化的搜索体验。

3.3.1 关键字联想

介绍：用户在输入一个关键词时，搜索引擎能够自动推荐与该关键词相关的其他关键词，以帮助用户更快地找到所需信息。

3.3.2 搜索历史

介绍：记录了用户之前搜索过的关键词和搜索结果，以便用户在以后的搜索中更快地找到之前查找过的信息。

四、导航

使用场景：标签切换一般用于和时间、状态的流转有关，且没有交集的数据内容；主要样式有基础、卡片、胶囊等。

4.1 页签导航（tabs）

通过点击不同的标签页来切换不同页面或视图的功能。在许多应用程序中，页签导航可以帮助用户快速地找到自己需要的功能或页面。例如，在浏览器中，页签导航可以帮助用户同时打开多个网页，并在不同的标签页之间进行切换。

优点：

直观易用：页签导航简单明了，用户可以快速理解并使用

节省空间：页签导航可以在有限的屏幕空间内展示多个页面或部分内容，提高了页面的利用率。

便于浏览：用户可以通过页签快速切换到不同的页面或内容，提高了浏览效率。

缺点：

导航深度限制：页签导航通常只适用于一级或两级导航，对于多级导航可能会显得过于复杂。

内容展示限制：由于页签的空间有限，可能无法展示所有需要的内容，需要用户点击后才能查看全部内容。

4.2 卡片导航

优点：

内容丰富：卡片导航可以展示更多的内容和信息，用户可以通过卡片了解更多详情

直观性强：卡片导航以视觉化的方式展示内容，更加直观和易于理解

交互性强：用户可以通过滑动或点击卡片进行操作，增强了交互性和体验感

缺点：

占用空间大：卡片导航需要占用更多的屏幕空间，可能会影响页面的整体布局和美观度；

操作复杂度较高：对于一些用户来说，卡片导航的操作可能会比较复杂，需要一定的学习成本

五、条件筛选

筛选是一种对搜索结果进行过滤和排序的过程，以便用户能够更快地找到自己需要的信息。筛选可以根据不同的标准进行，例如相关性、时间、重要性等。在许多应用程序中，筛选功能可以帮助用户缩小搜索范围，提高搜索效率。

5.1 页面布局

5.1.1 上下布局

特点：筛选条件和表格数据分别位于页面上方和下方，用户可以逐行查看数据，同时看到筛选条件。

使用建议：适用于筛选条件较少，且数据量较大的情况。用户可以快速浏览数据，同时方便对筛选条件进行修改。

5.1.2 左右布局

特点：筛选条件和表格数据分别位于页面左侧和右侧，用户可以同时看到筛选条件和数据。

使用建议：适用于筛选条件较多，且数据量较小的情况。用户可以在筛选条件和数据之间进行快速切换，提高操作效率。

5.1.3 浮层（弹窗/抽屉）

特点：仅展示筛选图标按钮，以浮层形式呈现。可以在当前页面的上方或侧边以浮动的形式展示，不会占用太多页面空间。

使用建议：当页面的空间利用率要求比较高，非高频操作场景时可使用浮层的模式，节省页面空间。

5.2 筛选类型

B端表格的筛选类型主要有平铺式、收折式和下拉式三种：

5.2.1 平铺式

介绍：平铺式是将所有筛选项罗列出来平铺在页面上，可以兼容多种数据格式，如数字、文本、标签、枚举值、布尔值等，包含但不限于日期选择期、标签切换、单选框、复选框等多种控件。

优点

直观明了：平铺式筛选将所有选项平铺展示，方便用户快速找到所需选项；

易于操作：平铺式筛选通常采用简单的点击或拖拽操作，方便用户进行筛选。

缺点

占用空间较大：平铺式筛选需要展示所有选项，因此可能会占用较多的页面空间；

不适合大量选项：如果选项数量过多，平铺式筛选可能会显得拥挤，影响用户体验。

使用建议

适用于选项数量适中的情况：平铺式筛选适合选项数量适中，且用户需要直观看到所有选项的情况；

可以结合其他筛选方式：如果选项数量过多，可以考虑结合其他筛选方式，如收折式筛选或表单式筛选。

5.2.2 收折式

介绍：收折式筛选通常以收折的状态展示筛选条件，只有在用户触发搜索后才会完全展开。一般筛选条件少于6个，可以通过1行或者2行展示筛选项的结果。

优点

节省空间：收折式筛选可以将不常用的选项折叠起来，节省页面空间；

易于查找：收折式筛选通常会提供搜索或筛选条件，方便用户快速找到所需选项。

缺点

操作相对复杂：收折式筛选需要用户展开或折叠选项，操作相对复杂一些；
不适合所有场景：如果用户需要直观看到所有选项，或者需要快速筛选大量选项，收折式筛选可能不太适合。

使用建议

适用于选项数量较多的情况：收折式筛选适合选项数量较多，且用户需要节省页面空间的情况；

可以结合其他筛选方式：如果用户需要直观看到所有选项，或者需要快速筛选大量选项，可以考虑结合其他筛选方式，如平铺式筛选或表单式筛选。

5.2.3 表单式

介绍：表单式是在系统中页面中的筛选区设置下拉筛选条件，用户通过下拉选择筛选条件中的值对数据进行筛选操作。当然筛选区中可能除了下拉选择之外还有输入筛选，下拉筛选和数据筛选共同组成筛选区。

优点

直观明了：表格形式的筛选方式可以让用户直观地看到各个字段和对应的数据，方便用户进行对比和筛选；

操作简单：用户可以通过简单的点击、输入等方式进行筛选，操作简便，提高了筛选效率；

灵活性高：表格形式的筛选方式可以支持多种筛选条件和筛选方式，用户可以根据自己的需求进行筛选，灵活性较高。

缺点

界面拥挤：如果表格中的字段较多，会导致界面拥挤，影响用户的使用体验；

数据量大时筛选性能不佳：对于大量数据，表格形式的筛选方式可能需要较长时间才能得出结果，影响筛选效率；

不易展示复杂数据关系：表格形式的筛选方式更适合展示简单的数据关系，对于复杂的数据关系可能难以直观地展示。

使用建议

根据实际需求选择筛选方式：在选择筛选方式时，需要根据实际需求和数据量的大小来选择适合的筛选方式。对于简单的筛选需求，可以使用表格形式的筛选方式；对于复杂的筛选需求，可能需要考虑使用其他筛选方式，如条件语句等；

优化表格布局：为了提高用户的使用体验，可以对表格的布局进行优化，如对字段进行排序、隐藏不必要的字段等；

限制筛选条件数量：为了提高筛选效率，可以限制用户可以设置的筛选条件数量，避免过多的筛选条件导致筛选性能下降。

5.2.4 浮层弹出式

介绍：页面中仅展示筛选按钮，点击后以气泡或抽屉的方式去承载筛选内容。

优点

用户友好：浮层式的筛选条件提供了一种直观的方式来展示筛选选项，用户可以轻松地查看和选择，无需在页面之间切换或变动页面布局；

节省空间：通过将筛选条件放在浮层中，主页面可以保持简洁，不受到过多的干扰元素影响，同时也可以避免筛选条件过多导致的页面拥挤；

灵活性高：浮层式的筛选条件可以方便地调整和修改，以适应不同的筛选需求和业务变化。

缺点

可能会引起混淆：如果用户不熟悉这种交互方式，可能会对浮层式筛选条件感到困惑，需要额外的引导和说明；

可能会影响用户体验：浮层式的筛选条件需要用户手动关闭或选择选项，如果操作不够便捷或流畅，可能会影响用户体验；

可能会影响页面性能：如果筛选条件过多或数据量较大，浮层式的筛选条件可能会导致页面加载速度变慢，影响用户体验。

使用建议

提供清晰的引导：在应用中使用浮层式的筛选条件时，需要提供清晰的引导和说明，帮助用户更好地理解和使用；

优化关闭和选择操作：为了提高用户体验，需要优化筛选条件的关闭和选择操作，使其更加便捷和流畅；

考虑数据量和性能：在应用中使用浮层式的筛选条件时，需要考虑数据量和页面性能等因素，采取相应的优化措施。

5.2.5 表头筛选

介绍：位于表格表头区域，每一列表头可做单列筛选，也可多列同时筛选。

优点

直观明了：表头筛选将筛选条件直接展示在表格的表头位置，方便用户直观看到所有可用的筛选条件；

提高效率：表头筛选可以减少用户的操作步骤和时间成本，提高筛选效率。

缺点

适用范围有限：表头筛选通常适用于简单的单字段筛选或单列筛选，对于多字段或多列的复杂筛选需求可能不太适用；

可能影响表格美观度：在表格中添加多个表头可能会影响表格的美观度，需要权衡设计和用户体验之间的平衡。

使用建议

适用于简单筛选需求的情况：表头筛选适合简单的单字段或单列的筛选需求，如根据姓名、性别等进行筛选；

可以结合其他筛选方式：如果用户需要复杂的筛选需求，可以考虑结合其他筛选方式，如平铺式、收折式或表单式等。

5.2.6 已选条件

介绍：将已经录入的条件展示在查询条件的下方，可快速删除

优点

用户体验：显示已选条件可以帮助用户更好地理解筛选结果，提高用户体验。用户可以直观地看到哪些条件已被选中，从而更好地理解数据的筛选结果；

可视化效果：在筛选区显示已选条件，可以增强表格的可读性和可视化效果。筛选条件的显示可以提供一种直观的方式，帮助用户更好地理解数据和筛选结果；

筛选灵活性：如果筛选区显示已选条件，用户可以根据需要轻松地修改或删除已选条件，提高筛选的灵活性；

筛选逻辑清晰度：通过显示已选条件，用户可以更好地理解筛选的逻辑。这有助于用户更好地理解数据之间的关系和关联，提高数据分析的准确性；
筛选操作效率：对于大量数据的筛选，显示已选条件可以帮助用户更快地定位和调整筛选条件，提高筛选操作效率。

六、优化过滤性能

表格过滤是用户在处理大量数据时常用的功能之一。如果过滤性能不佳，用户需要等待很长时间才能看到结果，这将严重影响用户体验。优化表格过滤性能可以减少用户等待时间，提高用户体验。

6.1 索引优化

通过创建索引来提高查询过滤的效率。通过创建模版的方式更快地定位到特定的数据行，通过创建合适的索引，可以显著减少查询过滤所需的时间，提高查询性能。

6.1.1 查询条件模版

将常用的查询方案保存为模版，通过快速切换模版的方式批量替换查询条件，达到快速查询的效果，方便用户快速筛选出所需的数据。

6.1.1 查询值模版

将常用的查询方案连同值一起设置为模版，在下次切换查询方案时，自动根据预置的值进行自动查询，查询结果保存至浏览器，方便下次调用。

6.2 缓存机制

介绍：（浏览器前端）将已经过滤过的数据缓存起来，避免重复查询。

6.3 分页加载

介绍：采用分页加载的方式，减少一次性加载的数据量，提高加载速度。

七、总结

在本文中，我们探讨了B端表格数据过滤功能的类型和实现。通过了解用户需求和使用场景，我们提出了表格数据过滤方案。以上方案需要结合实际场景合理配置和选择。同时，我们还介绍了表格数据过滤的实际案例，以及一些性能优化技巧。通过实际应用案例的展示，证明了以上方案的有效性和实用性。

在未来的工作中，我们可以进一步探索表格数据过滤功能的扩展和优化。例如，可以增加对异步数据的支持，提高表格数据的实时性；还可以引入机器学习算法，实现智能过滤和推荐功能。此外，我们还可以考虑与其他系统的集成和交互，以实现更广泛的应用。

总之，B端表格数据过滤功能是提高数据处理效率和准确性的重要工具。通过不断优化和完善该功能，我们可以更好地满足用户需求，提升用户体验，为B端业务的发展提供有力支持。

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

评论(0) 浏览(951)

282024-5

解锁HMI设计规范

前端达人

1. 前言

车载HMI设计近年来成为一个热门领域。许多朋友对HMI设计感兴趣，却苦于不知如何入手，不了解HMI设计的基本原则和规范。有人误以为HMI设计仅是设计类似iPad的界面，认为可以直接应用移动端或Web端的规范，这是不正确的。HMI设计拥有其独特的设计规范。本文旨在介绍HMI端的设计系统和原则。当然，这些规范主要用于参考，特殊情况下可以适当打破这些规则。

2. HMI设计原则

2.1. 交互原则

在当前的驾驶环境中，自动驾驶尚不能完全取代人工驾驶，驾驶者在行车过程中仍需保持对路况的高度注意，因此确保驾驶安全是设计的首要前提。本文将主要介绍视觉部分的设计考量，关于车载交互的详细讨论将在后续文章中更新。

2.2. 视觉原则

在以驾驶安全为前提的设计中，需要确保内容的易读性，目标的易用性，以及界面元素的一致性，从而满足用户在全场景下的体验需求。

3. HMI设计系统

3.1. 为什么要搭建设计系统

一致性

：设计系统提供了一套统一的视觉和功能组件，确保不同的产品、页面和功能在视觉表现和用户体验上具有高度一致性。这不仅减少了用户的学习成本，也加强了品牌的整体形象和专业性。

提高效率

：设计系统中的可重用组件和明确的设计指南可以大大减少设计和开发的工作量。设计师和开发者可以快速采用预定义的元素来构建新功能或改进现有功能，无需从零开始。这有助于缩短项目时间线，实现产品的快速迭代。

易于维护

：当所有设计元素和代码都遵循一个统一的系统时，维护和更新变得更加简单和高效。例如，如果需要更新品牌颜色或修改按钮样式，只需在设计系统中进行更改，相关变更即可自动应用到所有使用这些元素的地方。

提高跨团队协作

：设计系统作为一个共享的资源库，可以帮助不同的团队成员（如设计师、开发者、产品经理等）更好地协同工作。一个拥有详细文档和标准的系统确保每个团队成员都能理解和正确使用组件，减少沟通成本和误解。

适应性和可扩展性

：良好的设计系统具备高度的适应性和可扩展性，能够随着公司和产品的发展而成长。随着新需求的出现，设计系统可以持续更新和扩展，新的设计元素和组件可以被添加进来，而不会破坏现有的系统结构。

提升用户体验

：统一和标准化的用户界面组件不仅可以加速开发流程，还可以直接提升最终用户的体验。一致的界面和预测性的交互可以帮助用户更快地适应软件，提高用户满意度。

3.2. 原子设计

谈到设计系统，我们不得不提原子设计。原子设计是由Brad Frost于2013年提出的一种设计系统方法论，它将界面设计分解为更小的组件，目的是提高工作效率和保持设计一致性。原子设计包括五个层次：原子、分子、组织、模板和页面。

原子

：设计中最小的可复用单元，包括颜色、字体、图标等基础元素。

分子

：由原子组合形成的更复杂元素，例如按钮、输入框等具有特定功能的组件。

组织

：由分子和原子构成的模块，承载更复杂的功能和信息结构。

模板

：将原子和分子组合成的布局框架，定义页面结构和内容区域的排版。

页面

：结合模板和具体内容，形成最终的界面设计。

接下来步入正题，本文将详细讲述HMI的视觉样式指南，内容包括颜色、布局、排版和图标。

4. 颜色

4.1. 颜色对比度

由于驾驶环境复杂多变，如地下车库、隧道、阴雨天、阳光刺眼的晴天、白天及夜晚，设计时需考虑不同光照条件下的可读性。文本与背景色的对比度应满足特定标准，建议对比度大于7:1，至少应为4.5:1。这些数字区间的依据是什么呢？参考WCAG（网络内容无障碍指南），这些标准旨在为视障人士提供更好的体验，同时也便于普通人使用。汽车作为面向大众的产品，应考虑视障用户的需求。在不佳的使用场景下（如强烈阳光或昏暗环境中），我们也可能经历暂时性的视觉障碍，难以清晰感知内容。

根据WCAG，对比度应符合AA级与AAA级的标准。AA级要求小文本与背景的对比度至少为4.5:1，大文本与背景的对比度至少为3:1。AAA级则要求小文本与背景的对比度至少为7:1，大文本与背景的对比度至少为4.5:1。

根据WCAG，小文本指的是字号在19px以下的粗体文本，或者字号在24px以下的常规体文本。大文本则是指字号至少为19px且为粗体的文本，或者字号为24px以上的常规体文本。在HMI设计中，最小文本字号定为20px，字重为常规。因此，文本与背景的对比度不应低于4.5:1。同时，对比度也不宜过高，因为过高的对比度可能导致阅读疲劳，降低阅读效率。在深色背景下，文本与图形的对比度建议不要超过18:1。您可以通过以下链接访问一个网站，以计算文本与背景的对比度：https://www.siegemedia.com/contrast-ratio#%23272e3b-on-%231868de

4.2. 颜色分类

HMI设计主流趋势是采用深色背景，这在夜间或光线较暗的环境中可以减少屏幕亮度对视野的冲击，并有效减少阳光及其他光源的反射。在深色背景上，鲜艳的色彩（如红色、蓝色等）更加突出，便于驾驶员快速识别重要信息。在使用深色背景时，应避免大面积使用纯白色，以免过度吸引用户注意力。

然而，随着屏幕硬件技术的进步，越来越多的车机系统开始采用浅色背景。这样做不仅能在保持高对比度的同时有效控制反射和眩光，还确保了浅色背景在各种光线条件下的良好可读性。由于手机和平板设备普遍采用浅色背景，用户已习惯此类界面，这一习惯也推动了车机页面设计向浅色背景的转变。

在界面设计中，中性色主要用于文字、背景、边框和分割线，通过中性色的明度差异来营造空间的纵深感。在视觉感知中，明度较高的颜色在Z轴上的位置看起来更高，这有助于区分不同层次。在深色背景下，应通过调整白色的透明度而非使用灰色来进行对比和层次区分。功能色代表特定的信息状态，需符合用户对色彩的基本认知，例如：成功用绿色表示、失败用红色表示、提醒用黄色表示、链接用蓝色表示。同时，还需要设定合理的对比度和饱和度，以确保在驾驶环境下能有效识别这些颜色。

车机配色应避免大量使用鲜艳的色彩，以免过度吸引用户的注意力。根据Munsell Color原理，颜色的饱和度和明度两个数值越大，颜色越鲜艳。在车机配色中，我们需要遵循以下两个规则：

1.越接近右上角的颜色越鲜艳，应避免使用这类颜色；

2.选色时应关注饱和度和明度，这两个数值之和应尽量小于180（S饱和度 + B明度 ≤ 180）。同时，品牌色的合理应用能有效传达品牌调性，但不建议大量使用红色系作为品牌的功能色。

4.3. 大厂颜色规范

5. 布局

5.1. 屏幕种类与屏幕分辨率

车机的屏幕尺寸与分辨率种类繁多，且车机涵盖多种屏幕类型，如仪表屏、中控屏、副驾娱乐屏、后排娱乐屏等。接下来介绍几款热门车型的屏幕参数。

小米SU7

仪表屏：7.1英寸

中控屏：16.1英寸、3072x1920

特斯拉 Model Y

中控屏：15英寸、1920x1080

问界M7

仪表屏：10.25英寸、1920x720

中控屏：15.6英寸、1920x1080

蔚来ES6

仪表屏：10.2英寸、1920x532

中控屏：12.8英寸、1728x1888

小鹏G9

仪表屏：10.25英寸、1920x720

中控屏：14.96英寸、2400x1200

副驾娱乐屏：14.96英寸、2400x1200

理想L7

仪表屏：4.82英寸、800x166

中控屏：15.7英寸、2880x1620

副驾娱乐屏：15.7英寸、2880x1620

通过对主要汽车厂商车型的屏幕分辨率进行收集与分析，发现当前市面上主流的屏幕分辨率比例主要为16:9和8:3，这两种比例合计覆盖了72.39%的车型。因此，建议将这两种比例作为屏幕适配的基准。

5.2. 栅格系统

布局区域大于或等于1600dp时，建议使用12栅格系统。布局区域在720dp到1600dp之间时，建议使用8栅格。而当布局区域小于720dp时，则建议使用4栅格。

5.3. 间距规范

间距可以赋予页面信息更有节奏的感觉，从而提升内容的可读性和阅读效率。通过采用不同的间距，可以有效区分页面的组织和内容。

在设计师层面：制定间距规范可以有效减少决策和思考的时间，提高工作效率。

在开发层面：开发者不一定能够准确辨识1dp的差异，但能够明显区分出8dp的差距。基础间距以8dp及其倍数为增量（例如8dp、16dp、24dp、32dp、48dp等），这样开发者无需每次都精确测量，同时也能减少误差，提高设计稿的还原度。

在用户层面：具有一致节奏和韵律的页面更加美观。依据亲密性原则合理调整间距，可以使用户更加轻松地感知和区分信息，从而提升用户体验。

谷歌Android Auto的布局间距采用8dp作为主要增量，而一些较小的组件则采用4dp作为增量。间距规范共设定了九种数值，分别为P0至P8。

小tips：为了更好地对齐并留出足够的间距，较小的组件可以使用4dp和12dp的间距，但需谨慎使用。对于信息较少的页面（如缺省页、登录页等），使用96dp的间距可能无法很好地满足留白需求，此时可以考虑使用120dp、160dp或200dp等其他间距数值。细心的朋友可能会注意到，在以8dp为基准单位定义间距时，40dp和56dp这两个数值并未包括在内，尽管它们都是8的倍数。例如，16dp是8dp的2倍，间距变化较为明显。然而，将56dp与64dp进行比较时，64dp仅比56dp大1.4倍，两者间的差异相对较小。设计师在定义间距规范时需要遵循倍数规则，同时也应考虑页面的美观和用户体验，避免过于呆板地遵守规则。

定义间距没有绝对的标准，主要取决于最小单位，如4dp、5dp、6dp、8dp等，具体选择哪个取决于产品的定位和内容的形式。重要的是，所有间距需要基于最小单位并以倍数的形式规律排列，以保证元素间有良好的节奏感。

6. 排版

文字是界面设计中非常重要的信息元素，其字体选择、字阶、字重、颜色及行高都是影响视觉可读性和阅读效率的关键因素。对于字体的选择，建议在中文排版中使用思源黑体，而英文则使用Roboto。在中英文混排的情况下，应统一使用系统中文字体；在纯英文排版时，则统一使用系统的英文专用字体。

6.1. 字阶

字阶在界面设计中用于区分内容的主次关系，合理的字阶应用决定了内容的节奏和秩序。为了构建稳定且具有良好可读性的字阶设计，根据IDX & 同济（2020）百度Apollo中控视觉基础研究项目、谷歌Android Auto和华为车机UI设计规范的研究成果，我们可以发现字号通常以4的倍数递增，且最小字号不应小于20（标签类辅助文案应谨慎使用），正文字号最小为24。文本的主副层级应通过4至8的字号差距来区分。对于需要用户阅读和处理的重要信息，每个段落的文字数量不应超过20字，以确保用户可以在2秒内阅读完毕（700字/1分钟)

6.2. 字重

对于需要用户关注的文本信息，可以通过调整字重来突出内容。建议使用Regular或Medium字重，这样的字重使文本看起来更清晰和舒适。相比之下，更粗的字体不易辨认，可能会影响阅读速度，导致驾驶员分心，同时也可能引起视觉疲劳。

6.3. 行高

行高是指上边框、下边框加上字号高度的总和，可以想象成一个包裹在字体外面的透明盒子。行高主要针对多行文本；对于单行文本，使用默认的Auto行高即可。在设计页面时，由于文字会有不同的字号构成，便于阅读的考虑通常会设定适当的行高。不同的行高对文字的易读性影响较大。

文本的行高一般设置为字号的120%-150%，然而由于字阶规范中包含多个字号，不易确定具体每个字号应使用120%还是150%的行高。行高的具体比例与字号密切相关：字号越小，建议的行高比例越大；反之，字号越大，折行的概率通常越小。

根据Ant Design的经验，行高可以设置为字号加8。虽然这种动态变化的字号与固定加8的方法看起来可能显得死板，实际上它非常有效。例如，20px的字号加8等于28px行高，这是字号的1.4倍；56px字号加8则为64px行高，约是字号的1.14倍，符合‘字号越小，行高越大’的原则。这样的规范使得设计师和开发者可以更方便地调整行高。

6.4. 字色

为保证普通文本在黑白背景下的清晰可读，根据WCAG的AA级与AAA级标准，文本与背景的对比度应设定在4.5:1至7:1之间。

在深色背景上，建议通过调整纯白色文本的透明度来创建一致且强烈的视觉层次结构，而不是使用纯灰色。根据IDX & 同济 (2020) 百度Apollo中控视觉基础研究项目、谷歌Android Auto和华为车机UI设计规范，建议设置一级文本的透明度为100%-90%，二级文本的透明度为70%-60%，三级文本的透明度为40%-30%。

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

评论(0) 浏览(950)

272024-5

设计师必备思维模型

前端达人

设计师应该具备的思维模型

数据思维

设计思维

用户思维

产品思维

如何提升思维

设计师在职业发展中应具备多种思维模型，包括数据思维、设计思维、用户思维，商业思维和产品思维。这些思维模型有助于提升设计师的专业能力和解决复杂问题的能力。

数据思维：在当前竞争激烈的市场环境下，数据思维对于设计师尤为重要。它可以帮助设计师在众多同行中脱颖而出。数据思维不仅是为了获取数据，更重要的是利用数据来验证商业价值，指导设计策略，从而赋能商业价值。

设计思维：设计思维模型对于设计师至关重要，它包括了解基础设计规范、常用设计原则、设计的实用性以及对落地负责的态度。设计思维还包括对主流设计趋势和手法的把握。

用户思维：用户思维要求设计师从用户的环境和场景出发，进行深入的用户洞察。用户洞察可以通过三部曲来进行：理解用户需求、分析用户行为、预测用户趋势。

商业思维：商业思维模型对设计师而言同样不可或缺。它要求设计师不仅熟知商业基础知识，还要掌握常用的商业策略与原则。设计师需深入理解商业目标的实用性，并对商业成果的落地负责。

产品思维：产品思维涉及到对商业设计的理解，包括如何做出符合市场需求的商业设计。设计师需要了解什么是好的商业设计，并掌握商业设计的步骤。

设计师需要掌握的思维模型-数据思维

为了提升数据思维能力，设计师可以采用推理设计模型和溯因模型（5W模型）。这些模型有助于提高设计思维的缜密度和深度。

北极星指标是公司在当前阶段最重要的唯一指标，它有助于公司聚焦于最重要的问题，提升团队凝聚力，并鼓励实验文化。北极星指标的设定需要考虑公司的长期价值和不同发展阶段的重点。

设计师常用的数据指标模型包括HEART指标、GSM指标、海盗指标（AARRR模型）和NPS指标。这些指标模型有各自的优缺点，但北极星指标因其重要性而被特别推荐。设计师在实际工作中，可以将北极星指标根据不同场景进行分解，以设定具体工作目标。

数据分析方法多样，包括使用第三方工具、数据埋点、问卷调研、内部行为分析工具和百度指数等。数据埋点需要明确要追踪的事件，并与数据分析师或前端工程师合作。问卷调研可以帮助收集用户的详细信息，而百度指数可以提供竞品的用户画像。

产品设计驱动的增长可以通过四步闭环方法实现：确定指标、提出假设、进行分解和实验。这有助于设计师系统地优化产品，实现数据的持续提升。

通过上述方法，设计师可以更好地理解用户、市场和业务，从而提升设计质量，实现个人和产品的共同成长。

提高设计思维的缜密度和深度，设计师可以采用推理设计模型和溯因模型（5W模型）。

推理设计模型：

- 目的：推理设计模型的核心是满足人的需求，通过推理过程产生多种解决方案。

- 组成部分：

- 形态：产品的基本外观或互联网产品的品牌调性。

- 属性：决定产品形态的特定属性或种类。

- 功能：产品表达的目的与用途，受人的意向、喜好、目标等因素影响。

- 需求：产品满足的用户需求。

- 价值：产品创造的价值。

- 联系：产品使用受特定环境影响，属性客观而功能主观，需求和价值基于功能满足。

- 注意点：设计需要直觉和创造力，同时考虑设计场景。

溯因模型（5W模型）：

- 定义：溯因推理是一种根据现象特征推测其原因的信息加工方式。

- 例子：通过连续提问“为什么”来找到问题的根本原因，如丰田汽车公司的5WHY法。

- 作用：从结果出发，通过层层提问找到并解决根本问题。

设计师需要掌握的思维模型-设计思维

设计领域中，经验丰富的设计师会逐渐意识到，优秀的设计既需要艺术的直觉和创造性，也需要科学的严谨和系统性。这种理念可以被重新表述为：

随着设计实践的深入，设计师们会发现，设计工作不仅仅依赖于创意和审美（即“艺术”的一面），同样需要依赖于理性的分析和科学的方法（即“科学”的一面）。艺术性让设计作品具有吸引力和表现力，而科学性则确保设计解决方案的实用性、逻辑性和可行性。设计师在追求视觉美感的同时，也必须关注设计如何满足用户需求和商业目标，实现三者之间的和谐平衡。

因此，设计师不仅要专注于设计的艺术性，即那些涉及创意、美学和情感表达的方面，同样要关注设计的科学性，这包括采用系统化的问题解决方法、基于用户研究和数据分析的决策过程，以及对设计在整个产品开发和市场策略中角色的深入理解。简而言之，设计师的工作是将艺术的灵感与科学的分析相结合，创造出既美观又实用的设计作品。

设计思维，作为设计师专业成长的基石，融合了审美、创造力、用户需求理解、设计实现以及对新趋势的敏锐洞察。这一思维模式不仅要求设计师掌握基础的设计技能，更要求他们具备全局性的视野和解决问题的能力。

一、理解设计规范是设计思维的首要任务。设计师需要深入了解不同平台的设计规范和原则，如苹果的界面设计准则、谷歌的Material Design理念等。这些规范为设计师提供了清晰的设计方向，确保设计作品的一致性和专业性。通过遵循这些规范，设计师能够减少设计中的不确定性和误解，提高设计的效率和质量。

二、应用设计原则是设计思维的关键环节。设计原则如格式塔原理等，为设计师提供了有效的视觉排版方法。设计师需要运用这些原则，通过合理的布局、色彩搭配和字体选择，使设计作品更加美观、易读和易于理解。同时，设计师还需要关注设计的实用性和用户体验，确保设计作品能够满足用户的需求和期望。

三、重视实用性是设计思维的核心要求。设计不应仅仅追求美观，更应服务于用户的实际需求。设计师需要深入了解用户的需求和痛点，通过设计来解决他们的问题。例如，设计师可以通过优化操作流程、提高界面交互的便捷性等方式，提升用户的使用体验。实用性是设计作品能否得到用户认可的关键，因此设计师需要时刻关注用户的需求反馈，不断优化设计作品。

四，对设计落地负责是设计思维的重要体现。设计师不仅要关注设计的创意和美感，更要关注设计从概念到实现的全过程。设计师需要与开发团队紧密合作，确保设计的可行性和可实现性。同时，设计师还需要关注设计的细节和规范，确保设计作品在实际应用中能够达到预期的效果。这种对设计落地的责任感有助于提升设计师的综合素质和团队协作能力。

五，把握设计趋势是设计思维的重要组成部分。随着科技的进步和审美观念的变化，设计手法和风格也在不断演变。设计师需要时刻关注新的设计趋势和风格，如手绘风格、分形艺术、柔光风格和纹理风格等。将这些新元素融入设计中，可以使作品更具时代感和创新性。同时，设计师还需要保持对新技术的敏感度和探索精神，不断尝试新的设计方法和工具，提升设计的效率和品质。

六、认识设计的全局性是设计思维的升华。设计不仅仅是界面或外观的呈现，更是产品体验的一部分。设计师需要理解产品设计背后的整体逻辑，包括框架层、结构层、战略层等。通过深入理解产品的整体架构和用户需求，设计师可以创造出更符合产品战略的设计作品，提升产品的整体竞争力。同时，设计师还需要关注行业动态和市场变化，了解行业趋势和用户需求的变化趋势，为未来的设计创新提供有力支持。

设计师需要掌握的思维模型-用户思维

用户思维是设计师在设计过程中必须具备的一种核心思维模式，它要求设计师从用户的角度出发，深入理解和满足用户的需求。用户思维不仅是一种理念，更是一种实践方法，它涉及到对用户环境的深入洞察、对用户行为的细致观察、以及对用户心理的同理心理解。

用户环境的理解是用户思维的起点。设计师的工作环境往往与用户实际使用环境存在差异，这种差异可能体现在设备的多样性、操作系统的不同、屏幕尺寸和分辨率的差异，以及用户所处的物理环境（如室内、室外、网络条件等）。设计师需要超越自己的工作环境，真正站在用户的立场上，考虑他们在使用产品时可能遇到的各种情况。

换位思考是用户思维的重要实践方式。设计师需要将自己置于用户的情境中，用普通用户的视角去审视产品，理解用户的情绪和需求。这种换位思考的能力可以通过多种方式培养，如使用用户使用的设备、参与用户的日常活动、倾听用户的声音等。

场景思维是用户思维的另一个关键组成部分。设计师

需要理解用户在不同场景下的行为和心理状态，如购买行为中的“认知、搜索、判断、下单、查看”等环节。通过深入分析用户在各个环节的需求和问题，设计师可以找到设计撬动点，优化用户体验。

时间维度的考虑也是场景思维中的重要方面。设计师需要关注用户在完成任务的整个过程中的行为变化，从用户接触产品的第一时间开始，一直到用户完成目标后的反馈和分享。这种全程的视角有助于设计师发现并解决用户在整个使用过程中可能遇到的问题。

在实际操作中，设计师可以通过以下方式提升用户思维：

1. 使用不同设备：设计师应同时使用苹果和安卓设备，体验不同系统的设计差异，发现设计中的问题。

2. 深入用户场景：通过实地调研、用户访谈等方式，深入了解用户在实际使用中的行为和需求。

3. 倾听用户声音：定期收集和分析用户的反馈，理解用户的真实想法和需求。

4. 全程跟踪用户行为：从用户接触产品的第一时间起，全程跟踪和分析用户的行为路径，发现设计中的断点和痛点。

换位思考是用户思维的重要实践方式。设计师需要将自己置于用户的情境中，用普通用户的视角去审视产品，理解用户情绪和需求。例如，支付宝提倡管理层倾听用户声音，以真正解决用户问题。

场景思维是用户思维的另一个关键组成部分。设计师需理解用户从哪里来，要到哪里去，关注用户在每个环节的体验。场景思维带有时间维度，包括用户在购买前、购买中和购买后的行为和心理变化。

设计师需要掌握的思维模型-商业思维

商业思维是设计师在互联网公司工作时必须具备的另一种核心思维模式。设计师不仅是艺术家，更是商业目标的实现者。商业思维要求设计师在设计产品时，不仅要考虑用户需求，还要考虑如何通过设计实现商业价值的增长。

好的商业设计通常具备以下特点：

1. 获得设计大奖：如无印良品海报、德国红点设计大奖、Apple Watch等。

2. 符合好的设计原则：遵循Dieter Rams的“好设计的10个原则”。

3. 好用且销量高：如苹果系列产品和戴森产品，既获得设计奖项，也有良好的市场反馈。

进行商业设计的三个步骤：

1. 了解商业目标：与产品经理或运营沟通，明确产品的商业目标。

2. 以商业目标为前提做设计：根据商业目标进行设计思考，找到设计与商业之间的平衡点。

3. 设计判断和验证：通过数据、需求方和用户反馈验证设计的有效性。

设计师应掌握商业思维，通过系统化的方法和清晰的设计思路，提升个人影响力，驱动产品创新，实现商业价值的增长。

设计师需要掌握的思维模型-产品思维

设计师在现代商业环境中，不仅要具备良好的审美和创意能力，还必须拥有产品思维。产品思维是指设计师能够从产品的角度出发，理解用户需求、市场趋势和商业目标，从而创造出既符合用户期望又具有商业价值的设计作品。

一、用户洞察：设计师的首要任务

产品思维的第一步是深入理解用户。设计师需要通过用户画像、用户访谈、问卷调查等方法，收集用户的详细信息，包括他们的行为习惯、偏好、痛点和需求。例如，通过用户画像，设计师可以构建起用户的立体形象，从而在设计中有更强的代入感和同理心。

二、市场趋势：把握行业发展脉络

了解市场趋势对于设计师同样重要。设计师应关注行业报告、竞品分析和市场动态，以便把握设计方向和创新点。例如，通过分析竞品，设计师可以发现行业内的通用设计模式和潜在的创新机会。

三、商业目标：设计服务于商业

设计师需要明确设计作品的商业目标。这包括提高用户转化率、增加用户粘性、提升品牌形象等。设计师应与产品经理和市场团队紧密合作，确保设计方案能够支持并推动商业目标的实现。

四、用户体验地图：梳理用户旅程

用户体验地图是设计师梳理用户旅程和发现设计机会的有力工具。通过绘制用户与产品交互的全过程，设计师可以识别出用户在不同阶段的感受、想法和痛点，从而找到改进产品体验的机会。

五、设计发力点：从用户和市场洞察中提炼

基于用户洞察和市场趋势，设计师应提炼出设计发力点。这些发力点应聚焦于解决用户的核心问题和满足商业目标。例如，针对理财平台的新手用户，设计师可能会提出简化操作流程、提供教育性内容等发力点。

六、创新与迭代：不断优化产品体验

设计师应不断探索创新的设计方案，并基于用户反馈和数据分析进行迭代优化。这要求设计师具备快速原型制作和测试的能力，以及灵活调整设计方案以适应市场变化的敏捷性。

七、跨部门合作：形成合力

设计师需要与产品、市场、技术等不同团队成员合作，共同推动产品设计和开发。这种跨部门合作能够帮助设计师获得更全面的视角，同时也能提升设计方案的实施效率。

八、持续学习：提升专业能力

产品思维要求设计师不断学习新知识、新技能，以适应不断变化的市场需求。这包括学习最新的设计工具、理解新兴技术如人工智能对设计的影响，以及掌握数据分析等技能。

总结而言，产品思维使设计师能够超越单纯的视觉表现，将用户需求、商业目标和市场趋势融入设计过程中，创造出具有竞争力的产品。通过用户洞察、市场分析、跨部门合作和持续学习，设计师可以提升自身的产品思维能力，成为真正对产品有影响力的设计专家。

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

评论(0) 浏览(864)

272024-5

雾里看花？这些是你能用上的产品思维

前端达人

你也许会困惑，明明绞尽脑汁想出方案但为什么总是不被认可，为什么每当自己来讲述设计方案时总是无从谈起。在走出新手村之后，你是否也会思考，这一切背后是否有什么规律可循。今天咱们略微换一个视角，盘一盘这背后的细节。

——

我们作为设计师这个角色，对于设计思维并不陌生。而在实际的工作中只根据设计者常有的思维显然是不太够的，将视角聚焦在更上游，你是否在心里追问为什么会有这个需求呢？为什么要做这一改动呢？

在实际的工作场景中，设计思维和产品是为是相辅相成的。多方位的思考可以更好的理解需求把控设计方向，帮助你更好的发挥自己的作用，设计出更符合用户需求和商业目标的优秀产品。

1.1 产品思维是什么

产品的目的是为用户解决问题满足用户的需求。而产品经理需要权衡用户场景和业务三者，发现问题分析问题解决问题，从而实现产品不断的迭代和优化。产品思维则是解决问题的思维方式。这里我根据之前的工作经验，我挑关键来总结了一下。

用户导向

理解产品的核心用户群体，这其中包含了解他们的需求偏好和行为习惯。为用户提供好用方便的功能，提升用户的产品满意度。

数据驱动

利用产品数据分析方法和工具，分析用户的实际实用情况，从中找到产品优化的机会点，迭代产品方案。

市场分析

了解产品处在的市场竞争环境和行业发展趋势，通过竞品的特点和优势从而发现产品的差异化和创新点，获得更好的市场竞争力。

用户增长

面对存量市场，掌握用户的增长的方法策略，通过产品设计和优化实现用户和业务的增长。

产品策略

了解产品策略的定制和执行过程，包括但不限于产品定位，目标设置，功能规划。制定产品的发展策略，对东产品的发展和优化。

产品思维并不是照本宣科的工具，而是解决问题的切入点。不同的产品经理对产品思维也有着不同的理解。如今高度竞争的环境下，只有为用户创造独特的价值才能在市场中脱颖而出。这也变相的提高了设计师的要求，能否快速准确的把握需求方向产出有效的设计方案显得尤为重要。

1.2 产品思维可以帮助设计师做什么

更全面的思考问题

很多时候受限于视角，设计师往往会执着于界面的视觉表现。耗费更多的精力试图吸引更多的用户注意力。而掌握一定的产品思维可以帮助设计师在设计环节更好的思考和参与。设计出更符合用户和业务预期的界面，发现用户真实的痛点从而有针对性的优化设计方案。

举个例子：设计师通过对复杂流程的简化，视觉降噪等方案，聚焦核心功能，改善用户的交互体验和视觉感受。

优化产品设计

通过对数据的研究，深入分析用户行为和市场环境，发现产品的改进方向。通过数据分析和竞品分析等手段，发现用户需求与市场趋势，为产品的功能设计和界面优化提供有力的支持。

举个例子：设计师根据用户反馈的结果调整页面的布局，优化产品的交互设计，提高产品的易用性和吸引力。

提升团队协作效率

具备产品思维，可以让设计师和产品经理无阻力沟通，通过与团队的有效沟通和协作，共同推动产品的开发和优化，提升团队的协作效率和产品的质量，达到事半功倍的效果。

举个例子：和产品共同研讨产品需求文档，和开发团队讨论实现方案。确保项目的快速推进。

提升职业竞争力

具备产品思维的设计师在职场更具有竞争力，可以在不同的工作场景中承担更多的责任和挑战，为团队带来更大的价值。拥有较好的产品思维可以帮助设计师保持对行业趋势和技术发展的敏感性，在职场竞争中也更具优势。

现在让我们立即切换到工作视角，怎样在原有的工作流程中应用好产品思维尤为关键。我们作为设计者，了解产品思维是为了更好的发散思考和推敲设计方案。授人以鱼不如授人以渔，面对不同领域不同项目的纷繁需求，不妨多问几个问题，在不断的提问中找到答案。

2.1 明确设计目标

设计师需要明确项目背景推导出正确的设计目标。这要求设计师时刻需要将项目的目标和成果放在首位，之后的设计决策和行动都需要和这些目标保持一致。另外注重跨团队协作，合理分类时间和设计资源，将会让你更加游刃有余。切忌钻牛角尖的闭门造车，务必确保项目按时交付。

自问自答：

项目组都有谁，自己负责的哪些板块，我的目的是什么？
项目进展到了哪里，什么时候需要交付，什么时候需要上线？
设计方案确定提交后怎样快速和开发团队对接实现落地，期间是否有什么问题？

2.2用户研究

设计师进行用户研究是为了更好的了解用户的需求和行为，确保产品能够满足用户的真实需求。用户研究的方式很多，设计师可以根据团队需要和项目时间排期进行合理的安排。

成功的用户研究可以帮助设计师验证设计假设的有效性，降低产品的开发风险，减少不必要的时间和成本损耗。

自问自答：

你的用户是谁，使用场景是什么，需要为他们解决什么问题？
你的用户是如何使用这些功能的，这期间是否还有优化的空间？

2.3 竞品分析

竞品分析是一种通过研究和对比竞争对手的产品和服务细节，从中发现优势和劣势，进而指导自身产品设计和优化的方法。对于设计师来说，可以帮助我们更快的了解市场和行业的整体情况，为产品的设计提供给更多的参考依据，另一方面可以快速发现自身产品的问题找到优化的方向。

需要注意的是，竞品分析需要带着目的进行，切勿走马观花泛泛而谈。

自问自答

竞品分析的主题是什么，目标是解决当下的什么问题？
你的竞品是谁，他是怎么做的，反馈怎样？
我们可以借鉴什么，改善什么？

2.4埋点与数据回收

虽然设计师并不会直接参与埋点的设计，但为了更好的捕捉用户的行为数据，在设计中可以根据情况和优先级将埋点纳入设计考虑。

设计师和数据分析的沟通可以避免后期添加埋点时，出现和设计的不匹配的尴尬状况。数据是验证设计合理性的重要指标，很多时候设计师需要一个具体的成果反馈来复盘和指导之后的设计工作，多多留意最终呈现页面效果和用户反馈，并不是完成上线就可以将这些抛掷脑后了。

终极问题：

如何证明这是个改版方案是合理的

3.1设计师的痛点

在实际的工作中，往往会由于不同的产品特点和团队的配置，设计师不得不身兼多职面对更为复杂的情况。在开发流程中设计师始终处在“夹缝之中”的位置，而站在公司的视角设计师这一环节既不能直接产生收益也不能为整体降低成本。在进入职业生涯不久我开始思考为什么设计师处在这样一个被动的处境呢，跑遍了前端后端数据和产品小组，“厚着脸皮”旁听了各种冗杂的会议，以及多少次和前辈的交流中，我才慢慢发现了背后的“难言之隐”

依赖需求方案

设计师通常是根据产品需求方案确定以后再参与工作的，设计师的工作很大程度上取决于产品需求的制定，因此单从设计视角来看有一定的滞后性。设计师接到产品需求后没有办法理解背后需要解决的核心问题，也很少思考和判断需求的合理性，很容易和产品的最初想法产生偏差。

反馈的延迟

设计师的工作成果也需要后期数据回收和复盘，而在实际的工作中，往往是一个需求结束后就需要急匆匆的应对下一个需求。如果不去留意，很多时候作为设计师并不清楚最终交给开发的设计稿到底取得了什么样的数据表现，到底哪一个方案才能更好的实现目标。这也使得设计师很难进行经验总结。

有限的时间和资源成本

当前市场竞争相对激烈，各方产品都需要在有限的时间中尽可能的抢占市场，而设计师需要在较短的时间中给出合理的设计方案，同时和产品以及开发团队不断进行细节的调整，这也使得设计师面对的压力和挑战更大。

较低的话语权、只多不少的需求使得本就焦虑内卷的设计师处境更加雪上加霜。但是反过来想想，既然改变不了外在的环境，是否有办法可以让设计师们由内而外的主动争取些什么呢，我能想到的答案既是化被动为主动，尽可能的参与项目的推进，同时和上下游保持沟通，从而提升设计师在团队中的存在感和参与感。而产品思维，是一块刚刚好的垫脚石。

2.2产品思维的训练

讲到如何提升产品思维，我总会想起一位前辈曾经说过一切技巧惟手熟尔。你也许会说每天都在一成不变的做着公司的内容实在提不起兴趣，不过没有关系。产品思维的提升并不需要过多一板一眼的训练。就像你走入繁华地段的商场，明明入驻着大差不差的品牌为什么客流量却有着明显的不同？是清晰明了的导视路牌？是更为合理的动线规划？是明亮舒适的灯光统一的装置风格？用户体验是多元的，因此很多时候善于发现身边各种各样的体验细节，便可以拥有较好的产品感知。关于具体的方法，我有两个方向可供大家参考。

保持好奇心

打开手机想想看哪些应用是高频使用的，同样的音乐类应用你更习惯用哪个呢，在联想一下身边的朋友同事在听音乐这件事情上更喜欢哪个应用呢。横向对比一下便可发现，虽然是同类型的产品但在体验细节上其实有很多门道可以考究。或者你是否留意过最新出现的产品和刚刚更新的功能？为什么要有这样那样的改版？用户的反馈是怎样的？

刨根问底多问一步为什么，而不是将自己禁锢在工作范围中的一亩三分地，在不经意之间，其实你已经迈出了第一步。

知识整理与沉淀

如果你还有多余一些的精力，不妨进行更深入的学习。不过好消息是，你想要学习的很多技术都可以在网络上轻松找到。定期翻看设计平台分享，相关短视频频道，公众号文章，可以让你探索更深入更广阔的知识。不过先别急着开始，走马观花的阅读往往并不会留下什么印记，试着整理这些碎片知识并总结收获和心得。不要急于阅读量收藏量而是争取收获更多自己的理解才尤为关键。

PS：关于这部分我之后也会有更多内容的分享，多多关注喽，谢谢各位啦。

3.3 啰啰嗦嗦写在最后

在工作的第二年，我开始感到枯燥和厌烦。很多次面对频繁紧急加塞的产品需求和一头雾水的业务指标，我时常情绪激动的和当时的组长抱怨吐苦水，但由于人员紧张，并没有什么实质的改变。后来的一段日子我试着躲避，觉得做好分内的任务就得了，每天出几版方案到时候由着他们定夺吧。就这样又过了一段时间，从前得枯燥和厌烦变本加厉，而我好像游离在各个环节之中，渐渐我的状态变得很差，每天的工作毫无成就感可言，我开始认真的思考，究竟为什么会这样。

事情的转机出现在不久之后组里来了新的伙伴，一方面分担了很多任务压力，另一方面由于是刚刚毕业的职场新人，很多工作细节都需要帮他快速上手。也在这期间我发现了自己的浮躁和心急，我试着系统的总结过往的经验和思考，在这个过程中我开始和产品以及前端的伙伴更多的交流和请教。在找不到思路的时候试着切换到其他视角看待问题，去刨根问底无数个为什么，竟发现不知不觉中一切似乎都往积极的方向改变了。

或许我的想法与你也会有所偏颇，不过没有关系，每当观点不一致的时候也意味着我又发现了一个新的视角。不同的链接使得我们不断的发现和探索，正如那句话说没有人是一座孤岛。

在这里我非常期待与更多的优秀前辈交流，也很十分荣幸为后辈提供一些思路和帮助。

真诚的感谢诸位。

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

评论(0) 浏览(755)

222024-5

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

前端达人

一、什么是图表？

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

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

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

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

GLAD原则

G原则：优质数据和洞察

优化前

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

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

优化后

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

L原则：更少的视觉噪音

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

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

例图1

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

例图2

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

A原则：准确的表达

错误例图

正确例图

例图点评：图例的本意是对比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法则。

米勒定律

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

3.2.5图例名称的长度

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

3.3坐标轴

3.3.1什么是坐标轴

坐标轴分类

3.3.2常见坐标轴组合方式

轴的常见组合方式

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

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

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

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

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

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

没有必要就不要多此一举

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

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

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

3.4图形数据

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

图形数据的使用规则：

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

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

3.5提示信息

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面积图

面积图构成

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

4.1.5蜡烛图

蜡烛图构成

4.1.6瀑布图

4.2比较类图形

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

4.2.1柱状图

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

4.2.2分组柱状图

4.2.3气泡图

气泡图构成

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

4.2.4多条折线图

4.2.5子弹图

子弹图构成

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

4.3排名类图形

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

4.3.1有序条形图

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

4.3.2有序柱状图

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

4.4占比类图形

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

百分比情况

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

4.4.1饼图

4.4.2环形图

4.4.3堆积面积图

4.4.4矩形树图

4.4.5旭日图

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

4.5流程类图形

4.5.1漏斗图

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

比较规范

、

周期长

、

环节多

的

单

从上到下

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

漏斗图构成

4.5.2桑基图

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

桑基图的构成

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

4.6分布类图形

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

4.6.1散点图

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

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

4.6.2气泡图

4.6.3热力图

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

评论(0) 浏览(1604)

222024-5

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

涛涛

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

评论(0) 浏览(906)

212024-5

分享一些排版技巧

博博

评论(0) 浏览(1020)

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

日历

链接

个人资料

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

首页

分类

日历

链接

个人资料

存档