首页

132022-4

01. 什么是数据可视化？

数据可视化即数据的图形表示，旨在以更易于掌握和理解的有效方式传达大量海量数据。从某种意义上说，数据可视化是原始数据和图形元素之间的映射，它决定了这些元素的属性如何变化。可视化通常是通过使用图表，折线或点，条形图和地图来进行的。

Data Viz是描述性统计的一个分支，但它需要设计，计算机和统计技能。
美学和功能齐头并进，以直观的方式传达复杂的统计信息。
Data Viz工具和技术对于做出以数据为依据的决策至关重要。
在形式和功能之间取得了很好的平衡。
每个STEM领域都将从了解数据中受益。

Jorge Rey的化石燃料Dataviz

02. 它是如何工作的？

如果我们能看到它，我们的大脑就可以内在化并对其进行反思。这就是为什么理解图表和查看趋势比阅读大量的文档要花费大量时间和精力进行合理化更容易和有效的原因。我们不想重复人类是视觉生物的陈词滥调，但这是事实，可视化更加有效和全面。

在某种程度上，我们可以说数据Viz是讲故事的一种形式，目的是帮助我们根据数据做出决策。这些数据可能包括：

追踪销售
识别趋势
识别变化
监控目标
监测结果
合并数据

秘密7 –塞尔吉奥·费尔南德斯（Sergio Fernandez）提出离婚可视化的理由

03. 什么时候使用？

数据可视化对于每天处理大量数据的公司很有用。必须立即显示您的数据和趋势。胜过浏览庞大的电子表格。当趋势立即脱颖而出时，这也可以帮助您的客户或观看者理解它们，而不会迷失在混乱的数字中。

话虽如此，Data Viz适用于：

年度报告
简报
社交媒体微叙事
信息手册
研究
趋势贩运
SciViz
烛台图，用于财务分析
确定路线

可以看到数据可视化的常见情况是在销售和营销，医疗保健，科学，金融，政治和物流中。

娜塔莉·祖伊娃（Natalie Zuieva）的租金和薪金统计信息图

04. 为什么要使用它？

简短的答案：决策。数据可视化具有快速识别模式和解释数据的不可否认的好处。更具体地说，它是确定以下情况的宝贵工具。

识别变量关系之间的相关性。
获得有关受众行为的市场见解。
确定价值与风险指标。
随时间监视趋势。
通过频率检查速率和潜力。
应对变化的能力。

太空垃圾-BBC科学焦点，作者：Federica Fragapane

05. 数据可视化类型

您可能已经猜到了，Data Viz不仅仅是简单的饼图和图形，而且还具有视觉吸引力。该分支用于可视化统计信息的方法包括一系列有效类型。

地图

地图可视化是一种很好的方法，可以分析和显示与地理位置相关的信息，并通过地图准确地将其呈现出来。这种直观的方法旨在按区域分布数据。由于地图可以是2D或3D（静态或动态），因此可以使用多种组合来创建Data Viz地图。

COVID-19支出数据可视化POGO，George Railean

但是，最常见的是：

区域地图：显示国家，城市或地区的经典地图。对于每个区域中的不同特征，它们通常以不同的颜色表示数据。
线图：它们通常包含空间和时间，由于对特定场景进行了分析，因此通常是路线选择的理想选择，尤其是该地区的驾车或出租车路线。
点地图：这些地图分发地理信息的数据。它们是企业确定区域中建筑物确切位置的理想选择。
热图：它们根据特定属性指示地理区域的权重。例如，热图可以按区域分布感染者的饱和度。

图表

图表以图形，图表和表格的形式显示数据。由于图形确实是图表的子类别，因此它们经常与图形混淆。但是，两者之间的差别很小：图形显示数据组之间的数学关系，并且仅是表示数据的统计图方法之一。

图表数据可视化，作者：Madeline VanRemmen

顺便说一句，让我们谈谈数据可视化中最基本的图表类型。

条状图

他们使用一系列的条形图来说明数据。它们是较轻量数据的理想选择，并遵循不超过三个变量的趋势，否则，条形变得混乱且难以理解。

饼状图

这些熟悉的圆形图按部分划分数据。切片越大，部分越大。它们非常适合描述整体的各个部分，它们的总和必须始终为100％。当您需要显示一段时间内的数据发展或缺少任何部分的价值时，请避免使用饼图。甜甜圈图与饼图具有相同的用途。

线形图

他们使用一条线或多条线来显示随着时间的发展。它允许同时跟踪多个变量。一个很好的例子是跟踪品牌多年来的产品销售情况。面积图与折线图具有相同的用途。

散点图

这些图表使您可以通过数据可视化查看模式。它们有两个不同值的x轴和y轴。例如，如果您的x轴包含有关汽车价格的信息，而y轴包含有关薪水的信息，则正向或负向关系将告诉您某人的汽车所反映的薪水。

表格

与我们刚刚讨论过的图表不同，表格几乎以原始格式显示数据。当您的数据难以以视觉方式呈现，并且旨在显示应该阅读而不是可视化的特定数值数据时，它们是理想的选择。

数据可视化| Aishwarya Anand Singh的养蜂与否

例如，图表非常适合显示特定区域内一段时间内特定疾病的数据，但是当您还需要了解具体原因（例如原因，结果，复发，治疗时间和治疗方法）时，最好使用表格。

06. 数据可视化与信息图表

5个主要差异

它们并没有什么不同，因为它们在视觉上都代表数据。通常，您搜索信息图表并找到标题为“数据可视化”的图像，反之亦然。但是，在许多情况下，这些标题都不会引起误解。这是为什么？

数据可视化仅由一个元素组成。它可以是地图，图表或表格。另一方面，信息图表通常包含多个Data Viz元素。
与可能简单或极其复杂且繁重的数据可视化不同，信息图表简单易行，并且面向更广泛的受众。即使对于信息图表代表的研究领域之外的人，后者通常也是可以理解的。
有趣的是，数据Viz不提供叙述和结论，而是提供这些叙述和结论的工具和基础。虽然信息图表在大多数情况下提供了故事和叙述。例如，数据可视化地图的标题可能是“按区域划分的空气污染饱和度”，而带有相同数据的信息图则显示为“ A区和B区在C国污染最严重”。
数据可视化可以在Excel中进行，也可以使用其他自动生成设计的工具，除非将其设置为演示或发布。但是，信息图表的美学非常重要，其设计必须吸引更广泛的受众。
在交互方面，数据可视化通常提供交互式图表，尤其是在线形式的图表。另一方面，信息图表很少互动，通常是静态图像。

Skype通过可视化.com进行可视化

07. 如何创建有效的数据可视化？

5种有用的技巧

该过程自然类似于创建信息图表，并且围绕了解您的数据和受众。更准确地说，这些是准备有效的数据可视化以使您的查看者立即了解的主要步骤和最佳实践。

1.做功课

准备工作已经完成了一半。在甚至开始可视化数据之前，必须确保您了解该数据的最后细节。

不可否认的是，了解您的数据查看对象是另一个重要部分，因为不同的人对信息的处理方式不同。您要为数据可视化的对象是谁？他们如何处理视觉数据？只需给他们一张饼图就足够了，否则您将需要更深入的可视化报告？

您正在可视化什么样的信息，它能反映出您的目标吗？

最后，考虑要使用多少数据并加以考虑。

图片来自Brodie Vissers

2.选择正确的图表类型

在上一节中，我们列出了可在数据可视化中使用的基本图表类型。要确定最适合您工作的人，需要考虑的因素很少。

图表中将有多少个变量？
您将为每个变量放置几项？
值之间的关系是什么（时间段，比较，分布等）

话虽如此，如果您需要展示整个项目的各个部分，那么饼图将是理想的选择。例如，您可以使用它来展示特定产品的市场份额的百分比。但是，饼图不适用于时间范围内的分布，比较和跟踪趋势。在这些情况下，条形图，散点图，s和折线图更为有效。

另一个示例是如何在图表中使用时间。使用水平轴会更准确，因为时间应该从左到右。它在视觉上更直观。

Oberhaeuser的MagnaGlobal广告市场海报

3.对数据进行排序

首先删除所有不会增加价值并且基本上是图表多余的数据。有时，您必须处理大量数据，这不可避免地会使您的图表变得非常复杂且难以阅读。不要犹豫，将您的信息分成两个或多个图表。如果这对您不起作用，则可以使用突出显示或使用更合适的内容更改整个图表类型。

提示：使用条形图和柱形图进行比较时，请按值（而不是字母顺序）以升序或降序对信息进行排序。

图片由萨曼莎·赫尔利（Samantha Hurley）

4.利用颜色发挥自己的优势

在每种可视化形式中，颜色都是您最好的朋友和最强大的工具。它们产生对比，重音，强调并直观地引导眼睛。即使在这里，色彩理论也很重要。

设计图表时，请确保不要使用超过5或6种颜色。除此之外，任何其他操作都将使您的图表不堪重负，并且难以为观众阅读。但是，您可以使用颜色强度来发挥自己的优势。例如，当您在不同的时间段内比较同一概念时，可以将数据从所选颜色的最浅阴影到其较深的颜色进行排序。它会创建适合您时间线的强烈视觉效果。

选择颜色时要考虑的事项：

不同类别的颜色不同。
系列中所有图表的采用一致调色板，方便以后将进行比较。
最好使用对色盲友好的调色板。

Jamie Kettle可视化塑料废物污染数据

5.获取灵感

当您想成为数据可视化设计中的佼佼者时，请多多发挥自己的灵感。查看优秀的示例、信息图、其他人的工作，并了解哪种方法最适合您需要实现的每种数据。

下图这个Twitter帐户数据可视化是一个很好的例子。同时，我们还将精选一些令人称赞的示例，这些示例将使您有信心开始为数据创建视觉效果。

lilit Hayrapetyan创作的大数据纪录片的人脸

8个数据可视化示例

作为另一种艺术形式，Data Viz为一些令人惊叹的精心设计的图表提供了沃土，这些图表证明了数据也可以是美丽的。现在，让我们来看看一些例子。

1.黑暗之魂III体验数据

我们从孟小伟的个人项目开始，介绍他玩《黑暗之魂3》的经验。这是信息图表和数据可视化也是个人设计工具的完美例子。这项研究非常庞大，但非常专业地归类为针对不同概念的不同类型的图表。所有数据可视化都使用相同的调色板进行制作，并且在信息图表中看起来很棒。

我的黑暗之魂3孟小伟在播放数据

2.有史以来最伟大的电影

凯蒂·西尔弗（Katie Silver）根据评论家和观众的评论汇总了有史以来最伟大的100部电影。可视化显示了每部电影的关键数据点，例如发行年份、奥斯卡提名和获胜、预算、利润、IMDB得分、类型、拍摄地点、电影背景和制作工作室。所有电影均按发行日期排序。

凯蒂·西尔弗（Katie Silver）的100部最佳电影数据可视化

3.最暴力的城市

费德里卡·弗拉加帕内（Federica Fragapane）显示了2017年全球50个最暴力城市的数据。这些项目根据人口在垂直轴上排列，并根据凶杀率在水平轴上排序。

4.家族企业作为数据

这些数据可视化和插图由Valerio Pellegrini为《透视》杂志制作。它们显示了一个饼图，其中包含行业细分以及对就业贡献的散点图。

视角杂志–家族企业by Valerio Pellegrini

5.太阳系的轨道图

该地图显示了太阳系中18000多个小行星的轨道数据。每个小行星都显示在1999年除夕的位置，并按小行星的类型进行了着色。

埃莉诺·卢兹（Eleanor Lutz）的太阳系轨道图

6.标题的语义

KatjaFlükiger对头条新闻的故事情有独钟。数据可视化旨在传达销售对算术的影响程度。该项目在马里兰大学艺术学院完成，目的是可视化对移民的引用，并对用词选择和上下文所暗含的价值判断进行颜色编码。

标题语义学KatjaFlükiger

7.月球和地震

该数据可视化用于回答月球是否引起地震。该图显示了根据月球的相位和轨道位置而发生的地震的时间和强度。

月亮与地震艾西瓦娅·阿南德·辛格（Aishwarya Anand Singh）

8. Nanosats的黎明

可视化效果显示了从2003年到2015年发射的卫星。该图表示了专注于项目的机构类型以及为其提供资金的国家。左侧显示了每年的发射次数和卫星应用次数。

有线英国–由Nanosats拍摄的黎明（Valerio Pellegrini）

最后的话

数据可视化不仅是一种科学形式，而且还是一种艺术形式。其目的是帮助任何领域的企业快速理解复杂数据，并开始根据该数据做出决策。为了使您的图表高效且易于阅读，这一切都与了解您的数据和受众有关。这样，您就可以选择正确的图表类型，并使用可视化技术来发挥自己的优势。

原文地址：https://graphicmama.com/blog/what-is-data-visualization/

译文地址：站酷

作者：AL Boicheva

译者：ZZiUP

转载请注明：学UI网》什么是数据可视化

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务、

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

评论(0) 浏览(3784)

132022-4

前言

在使用产品的过程中，你是否看到了一些有趣的细节，而这些细节提升了你的使用体验？这些产品细节，便是产品设计师需要留意的，因为这些产品细节在某种程度上提升了用户的留存与转化。本文我就对一些产品细节进行了拆解，一起来看一下。

一.【夸克浏览器】节日彩蛋-特定场景下输入关键词触发彩蛋效果

二.【酷狗音乐】播放Tab-多交互操作，应对多场景使用

三.【腾讯新闻】左滑热点榜单-用户关注的热点放在路径短的位置

四.【荔枝博客】品牌传播-产品情感漏出，与用户产生共鸣

五.【百度网盘】自定义倍数-给用户更多可控操作，精细化观影感受

六.【网易云音乐】情感彩蛋-给你梦幻的魔法，带你重拾记忆

七.【即刻】头像彩蛋-趣味互动回弹，把喜欢强烈表现出来

八.【荔枝】录声音-轻拟物动态图，使用中的及时反馈

九.【微博】点赞反馈-情绪最大化宣泄，尽情释放情绪

十.【36氪】隐藏的浮窗-深挖用户操作，快切与停顿的奥秘

一、【夸克浏览器】节日彩蛋-特定场景下输入关键词触发彩蛋效果

1. 使用场景

在圣诞节日来临之际，用户使用搜索引擎输入关键词的频率会增加，在此增加彩蛋给用户营造节日氛围

2. 设计思考

设计目标：增加关键词趣味彩蛋雨，提高产品趣味体验，提高用户搜索频次。

设计方案：在节日来临前，用户通过搜索节日特定关键词，会在搜索结果页中以彩蛋雨的形式坠落下来，图案贴合节日物品，给用户营造出节日氛围，给予用户节日的浪漫。用户在使用时并不是一个冰冷的产品，而是有情感共鸣有情绪的产品。

二、【酷狗音乐】播放Tab-多交互操作，应对多场景使用

1. 使用场景

想要提高屏效，一屏显示更多内容。在浏览操作时会因为功能按钮外漏造成误操作情况。

2. 设计思考

设计目标：提升屏幕显示内容面积，给予TAB播放更多交互形式，增加趣味性提升产品记忆点。

设计方案：在TAB播放中给予「长按」「双击」两种交互操作，长按中包含双击的播放暂停，因为此操作，使用率较高，提供多入口能有效提高易用性。长按时，激活更多常用功能，包含移动进度条、收藏、下一首等操作，配合特有的交互展示形式，给用户形成产品记忆点，同时在浏览不同频道时，功能的隐藏大大降低误操作以及视觉干扰的情况。

三、【腾讯新闻】左滑热点榜单-用户关注的热点放在路径短的位置

1. 使用场景

如今的新闻产品都提供热点时事新闻，给用户提供更多丰富内容聚集。

2. 设计思考

设计目标：提高用户使用率，不影响主框架的情况下给用户最短路径查看热点新闻的入口，提高用户浏览时长。

设计方案：首屏以及导航模块更多还是以新闻资讯等内容为主，关注热点更多是娱乐热门等内容，浏览率都高的情况下，把热点模块放到左滑页面中，在不影响首页框架情况下，增加新的板块，给用户更多浏览选择，丰富产品多元化内容。

四、【荔枝博客】品牌传播-产品情感漏出，与用户产生共鸣

1. 使用场景

如今的产品趋于同质化，由原来只注重功能转变为产品情感表达，给用户产生情感互动，从功能付费变为情感价值观付费。

2. 设计思考

设计目标：传播产品价值观，给予用户引导，产生产品正向记忆，从而提高粘性。

设计方案：上几期产品分析中有说到顶部logo外漏的设计描述，有的植入隐藏功能，有的表示刷新功能等，归根结底都是给予静态标志功能属性，提高屏幕利用率同时提升用户探索欲望。

荔枝博客本身产品内容相对聚焦，想要做出差异化就要往品牌情感入手，当用户点击左上角「荔枝博客」标志时，会弹出产品的由来以及做博客的初衷，让用户思考产品深层意思时无形中把产品植入到用户记忆中，给用户情感绑定，提升用户使用粘性。

五、【百度网盘】自定义倍数-给用户更多可控操作，精细化观影感受

1. 使用场景

市场上的视频倍速参差不齐，0.25、0.5、1倍三种递增逻辑，用户在观影时会存在没有想要选择着倍速，只能使用平台提供的选择使用，操作受限制。

2. 设计思考

设计目标：解决倍速不是用户想要的，提供自定义倍速，给用户更多可操作性，提升观影感受。

设计方案：在百度网盘中观看视频时，点击调节倍速在提供默认常规5种倍速下提供自定义倍速，以0.1的速度逐渐递增，用户可以在0.5-3倍之间任意选择，根据视频类型、观影习惯选择合适的速度，同时把市面上不同倍速问题给用户造成的观影困扰也同步解决，提高视频观影体验。

六、【网易云音乐】情感彩蛋-给你梦幻的魔法，带你重拾记忆

1. 使用场景

音乐无国界，每首音乐背后都有一段很长的故事，在我听哈利波特主题曲时，浏览评论发现特定特定位置点击会有彩蛋，尝试了一下果然如此。网易云音乐评论区的强大之处展示之一。独有的彩蛋。

2. 设计思考

设计目标：提升评论活跃度，强化广告的表现形式，增加用户对产品的探索欲望提高使用粘性。

设计方案：哈利波特音乐中，在评论区第九和第十条中间分割线处，点击两下！触发魔法视频，把用户带入情境之中，勾起满满的回忆，配合音乐声音，真可谓视觉听觉双重享受。

对于开发来说，只需要在特定歌曲评论中写一个位置判定以及触发条件，当用户触发条件后，播放特定视频，触发用户情感共识，提升使用粘性。同时如果做为广告植入也是比较好的呈现方式，但要注意视频质量，尽量弱化广告中的产品，可以把品牌情感揉入视频中与用户产生情感关联。

七、【即刻】头像彩蛋-趣味互动回弹，把喜欢强烈表现出来

1. 使用场景

在看关注人主页时，想要强烈的表达出情感给予对方，释放自己心中的喜欢时如何表现出来。

2. 设计思考

设计目标：提升趣味玩法，增强用户操作感受，丰富产品玩法体验，提升使用粘性。

设计方案：在个人主页，通过拖拽用户头像放手回弹，头像以拉距来弹射回原有位置并且迸发出爱心动画，让用户产生更贴近的情感传达，反复操作达到一定数量会有文字提醒，文案的趣味描述也让彩带功能增加了一份趣味。

八、【荔枝】录声音-轻拟物动态图，使用中的及时反馈

1. 使用场景

在使用录音功能时，单纯靠进度条记忆静态按钮显示很难产生强提醒，除非做大做突出，荔枝在录音中是如何表现的。

2. 设计思考

设计目标：解决录音功能页面元素单一用户进行中与暂停感知浅的问题，结合动态插图给用户及时反馈，同时贴合线下使用场景，给用户注入产品记忆点。

设计方案：在我的-进入录声音模块中，头图展示一个录音磁带机，当开启录音功能时，磁带机会进行旋转播放，左慢右快的展示形式符合真实机器的运动规律，给用户强提醒告知用户此时正在录音中，当暂停时，磁带机及时停止，和按钮形成触发绑定，提高产品使用体验。

九、【微博】点赞反馈-情绪最大化宣泄，尽情释放情绪

1. 使用场景

单一的赞有时无法满足用户的爱意，用户希望更强烈的表达情感，来满足自己反馈欲。

2. 设计思考

设计目标：提升赞的强烈感知，释放用户内在情绪，提高产品趣味体验，从而增加使用粘性。

设计方案：在微博单条动态页面中，对“赞”进行点击一次操作是普通点赞反馈；长按触发连赞机制，会带来多彩多图标的更强的视觉感受，带来强烈的情感反馈，让用户尽情的释放情绪，得到内在解压。

十、【36氪】隐藏的浮窗-深挖用户操作，快切与停顿的奥秘

1. 使用场景

新闻资讯产品，文章之间来回切换阅读，时有发生，或者手头有事忙完再回过头看。

2. 设计思考

设计目标：解决阅读中断导致回看路径长，影响阅读效率的问题。

设计方案：浏览文章时，屏幕侧边从左向右划动是返回上一级的交互手势，当用户在滑动中停留一下就会激活浮窗功能，随着手势操作移动到黑圈内颜色会显示蓝色，表示移入成功，这时放手返回首页，右下角会显示一个圆形浮窗，可快速查看浮窗内的文章。

值得学习的是，左滑浮窗图形随着手势上下位置进行移动，路径更短更快的进行操作，提高用户使用体验。因为隐藏式的交互有一定学习成本，产品充分考虑到这点，在文章右上角更多按钮中放置加入浮窗功能，两个激活入口，兼容新老用户使用，提高产品易用性。

十一、结语

设计师要有发现美的眼睛。美不仅是视觉，还有好的体验流程。不要让用户思考，这是每个设计师所追求的。认真记录产品细节，了解背后的思考，也是不断提升自己逻辑思维和表达能力的一种方式。

文章来源：站酷作者：碳水sir

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(1784)

132022-4

UI设计师交互设计-教你在UX轻松创建文案

周周

在了解了人物性格语气的重要性以及在大厂中的应用场景之后，大家一定很关心，要如何在自己的业务中从0开始创建文案的人物性格语气呢？下面会结合在酷家乐云设计工具的实践，针对这部分内容做详细介绍。酷家乐云设计工具主要是针对内装设计师的设计工具。整个过程大致分为 5 个阶段：资料研究、小组研讨、确定人物性格关键词、丰富人物性格、绘制画像。

<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__25" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微软雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">

<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode26" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微软雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">性格描述的词汇里，我们进一步聚合细分，总共归为 3 类。灵活友好、随和的、善解人意为一类，理性为一类，直接坦率为一类。非性格描述的词汇里，我们主要看这些描述是否和前面的性格相关联，是否出现一些词汇，是前面的性格类词汇涵盖不了的，进而对性格类词汇进行一个校准。比如，专业、品质化、值得信赖等描述主要表示我们的产品是专业资深，有一定有话语权，这和性格描述的理性关联性很大。我们认为一个靠谱的、沉稳的、理性的人，他的能力一定是足够专业，表现出的特质一定是自信的，值得大家信赖，有一定权威性的。再比如，我们认为崇尚科技、科技感的东西在某种程度上和理性、冷静这种气质是相吻合的。依此类推，经过所有的分析后，我们发现性格描述下的3类词汇基本和非性格描述下的词汇是相关联的，满足这3类性格的人物是符合公司和品牌整体调性的。所以这3类性格将作为我们人物性格的考虑范围。最后我们将每一类性格进行一个关键词的总结，得出了善解人意、理性、直率三个关键词。

<h1 data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-weight: bold; line-height: 1.5; letter-spacing: -0.006em; font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__29" style="white-space: normal; margin: 0px; padding: 0px; outline: none; box-sizing: inherit; caret-color: rgb(40, 40, 40); color: rgb(40, 40, 40); font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微软雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">Chapter FOUR「丰富人物性格」

<h4 data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-weight: bold; line-height: 1.5; letter-spacing: -0.006em; font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode31" style="white-space: normal; margin: 0px; padding: 0px; outline: none; box-sizing: inherit; caret-color: rgb(40, 40, 40); color: rgb(40, 40, 40); font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微软雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW; font-size: 14px;">-细化性格关键词，让人物更好理解

<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode32" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微软雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">基于每种性格，为了更好的理解，我们详细描述这个人物是什么样的，不是什么样的，并给到一些例子描述。

<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-weight: bold; line-height: 1.5; letter-spacing: -0.006em; font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__33" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微软雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">

<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-weight: bold; line-height: 1.5; letter-spacing: -0.006em; font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode34" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微软雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">善解人意

能够理解用户当下的心理状态，知道别人的需求是什么，然后说相应的话
能够理解用户的困难，并帮助他们克服
懂得聆听用户，给到用户反馈渠道，关心用户的反馈
提供新的或更好的方法，帮助用户实现目标

                                    <p style="font-size:16px;white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;line-height:32px;font-family:&quot;">
                                        <br />
                                    </p>

置身事外，只是客观的描述事实，没有体谅用户的心情
给人以压迫感或距离感

                                        <p style="font-size:16px;white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;line-height:32px;font-family:&quot;">
                                            <br />
                                        </p>

发生问题时，应告诉用户可行的解决方案，或产品为用户做了哪些挽救措施
从用户视角描述价值
多给用户支持和鼓励，不要命令、强迫用户，不要责怪用户
使用贴近用户的用语，不使用过于专业、用户难以理解的表述，也尽量不创造新的概念或词汇

能够聚焦关键信息，精炼表达
能够控制情绪，克制表达
逻辑清晰，表达严谨，前后一致

                                    <p style="font-size:16px;white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;line-height:32px;font-family:&quot;">
                                        <br />
                                    </p>

说话没有重点，所有细节都面面俱到
采用情感化的表达方式强调或放大情绪

                                        <p style="font-size:16px;white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;line-height:32px;font-family:&quot;">
                                            <br />
                                        </p>

提供帮助用户实现目标的关键信息，不用把前因后果都解释一遍
慎用“啦”、“哦”、“吧”、“吗”等矫饰的语气词，以及“！”、“？”等语气标点
不说“可能”、“不确定”、“也许”这类似是而非的词，也不能说过于绝对的话，会影响严谨性

不卑不亢，平等地和用户对话
表达简单清晰，不绕弯子
追求效率，为用户提供解决问题的最短路径

                                    <p style="font-size:16px;white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;line-height:32px;font-family:&quot;">
                                        <br />
                                    </p>

过度的关怀和讨好
过于官方，没有提供有效帮助
掩盖问题

                                        <p style="font-size:16px;white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;line-height:32px;font-family:&quot;">
                                            <br />
                                        </p>

说话平等直接，避免用”您“这类词，而是用你、我来进行对话
在出现问题时，及时通知用户，无需遮遮掩掩
在用户遇到问题时，坦诚客观描述事实，无需过多表达歉意

                                    <p style="font-size:16px;white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;line-height:32px;font-family:&quot;">
                                        <br />
                                    </p>

                                                <p style="margin-top:0px;margin-bottom:0px;white-space:normal;caret-color:#282828;color:#666666;font-family:&quot;font-size:16px;outline:0px;padding:0px;line-height:32px;text-align:justify;">
                                                    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><strong style="margin:0px;padding:0px;outline:0px;max-width:100%;box-sizing:border-box !important;overflow-wrap:break-word !important;"><br />

文章来源：站酷作者：酷家乐UED

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

                                                <p style="margin-top:0px;margin-bottom:1rem;white-space:normal;caret-color:#282828;box-sizing:border-box;font-size:16px;background-color:#FFFFFF;color:rgba(0, 0, 0, 0.843);font-family:&quot;letter-spacing:0.1px;text-align:justify;">
                                                    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><strong style="margin:0px;padding:0px;outline:0px;max-width:100%;box-sizing:border-box !important;overflow-wrap:break-word !important;"><strong style="box-sizing:border-box;font-size:14px;font-family:微软雅黑, Arial, Helvetica, sans-serif;color:#323232;"><b style="box-sizing:border-box;widows:1;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="font-family:&quot;font-size:14px;background-color:#FFFFFF;white-space:normal;widows:1;line-height1111111111111111111111111111111111111111111111:20px;color:#3e3e3e;box-sizing:border-box !important;"><strong style="box-sizing:border-box;font-family:微软雅黑, Arial, Helvetica, sans-serif;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><a href="http://www.lanlanwork.com/blog/admin" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;">蓝蓝设计</a>(&nbsp;<a href="http://www.lanlanwork.com/" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#0C386E;transition:all 0.5s ease 0s;vertical-align:baseline;padding:0px;margin:0px;text-indent:34px;background-position:0px -60px;">www.lanlanwork.com&nbsp;</a>)是一家专注而深入的<a href="http://www.lanlanwork.com/index.html" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">界面设计公司</a>，为期望卓越的国内外企业提供卓越的UI界面设计、<a href="http://www.lanlanwork.com/bs.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">BS界面设计&nbsp;</a>、&nbsp;<a href="http://www.lanlanwork.com/csjm.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">cs界面设计&nbsp;</a>、&nbsp;<a href="http://www.lanlanwork.com/scjm.html" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">ipad界面设计</a><a href="http://www.lanlanwork.com/csjm.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">&nbsp;</a>、&nbsp;<a href="http://www.lanlanwork.com/baozhuang.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">包装设计&nbsp;</a>、&nbsp;<a href="http://www.lanlanwork.com/icon.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">图标定制&nbsp;</a>、&nbsp;<a href="http://www.lanlanwork.com/yhty.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">用户体验 、交互设计、&nbsp;</a><a href="http://www.lanlanwork.com/web.html" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">网站建设</a><a href="http://www.lanlanwork.com/WEB.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">&nbsp;</a>、<a href="http://www.lanlanwork.com/xz.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">平面设计服务</a></b></b></b></b></b></b></strong></b></strong></b></strong></b></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></b></strong></strong></strong>
                                                </p>
                                                <div>
                                                    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><strong style="margin:0px;padding:0px;outline:0px;max-width:100%;box-sizing:border-box !important;overflow-wrap:break-word !important;"><strong style="box-sizing:border-box;font-size:14px;font-family:微软雅黑, Arial, Helvetica, sans-serif;color:#323232;"><b style="box-sizing:border-box;widows:1;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="font-family:&quot;font-size:14px;background-color:#FFFFFF;white-space:normal;widows:1;line-height1111111111111111111111111111111111111111111111:20px;color:#3e3e3e;box-sizing:border-box !important;"><strong style="box-sizing:border-box;font-family:微软雅黑, Arial, Helvetica, sans-serif;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><br />

评论(0) 浏览(1684)

132022-4

2022设计作品精选 | 数据可视化

seo达人

展示一：

[png 到 jpg 输出图像]

[优化输出图像]

[png 到 jpg 输出图像]

[优化输出图像]

展示二：

[优化输出图像]

展示三：

[png 到 jpg 输出图像]

展示四：

展示五：

原文地址：黑马家族（公众号）

作者：黑马青年

转载请注明：学UI网》2022设计作品精选 | 数据可视化

评论(0) 浏览(1599)

132022-4

提高用户体验的10个优秀案例

seo达人

一、特殊场景下的差异化设计

根据用户使用场景和特殊情况出现时，产品会结合变化呈现不同的功能或者服务，这种差异化的设计更能体现情感化设计的一面，提高用户对于产品的认可度。

腾讯新闻 APP 在东航事故出现时，在底部操作栏新增了祈祷的图标，方便用户表达祈祷的心情。特殊情况下的差异化设计满足了用户的情感需求，也体现出了产品的温度，带给用户更强的粘性。

二、优化指引路径提高操作效率

通过提取本机号码一键登录减少了繁琐的注册流程，提高了登录的效率，减少用户的操作路径。在登录时都需要用户同意一些条款协议等内容，当用户未勾选时通常都是提示用户，指引用户选择后操作。这样的设计增加了用户的操作路径，使用体验不是很好。

网易云音乐 APP 在同样问题出现时，提供了一个弹窗进行指引，用户无需重复操作，直接点击“同意并继续”即可完成登录。在用户误操作出现时，无需用户过多的操作路径，给出了更高效的操作解决方案，提高了用户使用体验。

三、温馨提示降低用户的过度依赖

随着互联网时代的到来，太多的娱乐产品占据了我们的时间，过度依赖和使用耗费了大量时间。特别是短视频的走热，刷视频容易带来过度依赖，影响用户的视力等健康问题。

抖音 APP 作为用户量庞大的短视频产品，提高用户体验至关重要。为了降低用户的过度依赖，提示用户注意休息，特意设计了温馨提示。用户可以设置提示时间和进行管理，APP 也会定期提示用户。温馨的设计提高了用户对产品的好感度，也能辅助用户做好时间管理，以免过度依赖而影响休息时间。

四、隐藏式设计提高版面利用率

对于用户来说希望内容具有较高的可见性，提高内容的曝光度才能被关注。在控制内容的优先级时，通过隐藏式设计可以满足更多内容的呈现，不过需要做好隐藏内容的引导，提高隐藏内容被发现的概率。

网易云音乐 APP 在云贝中心签到设计中使用了隐藏式设计，将签到相关的附属内容隐藏在展开卡片中，为更多主要内容提供了展示空间。为了提高展开的交互设计，在每天初次访问时会默认展开，然后再收起隐藏，这个动态的指引提高了这个交互动作的曝光度。利用隐藏式设计满足了产品需求，通过动作引导提高了用户知晓度，是一个具备较好体验的设计解决方案。

五、更人性化的模式设计

随着用户群体的跨度增加，为了带给不同年龄段用户更好的体验，众多产品都针对不同用户提供了定制化模式。特别是针对老年用户而进行适老化设计，还有针对青少年儿童设计的时间管理等，不同模式满足了更多不同年龄段的用户需求。

比如优酷 APP 在个人中心设计了“模式切换”，点击可以设置长辈模式、青少年守护、儿童守护。针对不同年龄段对于产品的使用需求进行定制化，带给用户更加人性化的使用体验。

六、定制化的播放页模式设计

不同用户对于产品的使用需求有所差异，固定的模式虽然可以减少产品的开发成本，但是单一的体验不够人性化。针对不同用户提供更多选择，可以带给用户更加人性化的体验。

MOO 音乐 APP 为了满足不同用户对于播放页的体验差异，设计了播放页模式定制化切换，用户可以选择以专辑封面或者背景大图进行展示。为了直观的方便用户做出选择，模式设计以可视化的图形展示，便于用户更快的做出选择。定制化的模式虽然把繁琐的事情留给了产品开发者，却把更好的体验带给了用户。

七、缩放预览满足对细节的体验

随着短视频走进更多用户的视野中，短视频的形式也是越来越丰富，满足不同用户的使用体验至关重要。特别是图片形式引入短视频平台，对于细节的体验因人而异，缩放画面满足对于细节的体验才能更加人性化。

抖音 APP 无论是针对视频还是图片形式作品都可以缩放预览，配合缩放的手势交互带给用户放大细节查看的体验，满足了不同用户对于细节的需求。手势交互也是产品设计师需要多多探索的方向，更加便捷的操作有助于提升用户对于产品的使用体验。

八、满足用户好奇心的设计

用户从小白到依赖是一个逐步探索的过程，好奇心的用户会点击尝试任何的功能，甚至连一个图标或者 LOGO 都希望获得彩蛋。作为设计师来说设计出来的每一个元素都需要考虑用户体验，给予反馈式的设计才能满足好奇心的驱使。

爱奇艺 APP 首页左上角的 LOGO 展示你有注意到吗？有没有尝试去点击体验，作为好奇心驱使特意尝试了一下。点击之后会跳转到皮肤等设置的页面，为该功能的曝光新增了首页入口，用户也可以通过个人中心“装扮”进行设置。该设计解决方案不仅满足了用户点击的好奇心，也赋予了 LOGO 展示功能化的作用。

九、可以标记和叠加的点赞设计

点赞设计在众多产品中均有体现，这是用户表达对于内容的喜欢，以此来增加作者和用户之间的互动性。为了吸引用户点击和带来差异化的体验，点赞设计也被脑洞大开，在表情化、叠加点赞、点赞标记、微动效等方向不断探索。

小宇宙 APP 在播放页中对音频进行点赞时，可以多次叠加点赞，点击之后会针对音频播放进度条进行点赞标记，反复点击也会使得进度条纹增高，以此来强化点赞的程度。该设计解决方案不仅丰富了点赞的设计，也能通过标记和进度条纹的高度让用户记住关键的部分，方便后续回顾的时候知道哪些时间段是重要内容，提高用户对于产品的使用体验。

十、差异化的短视频推荐设计

作为新闻资讯类产品来说，大部分用户的习惯还是图文结合的阅读形式，不过随着短视频的出现，改变了一部分用户的阅读习惯。通过短视频获取新闻资讯、搜索指定内容、学习生活技巧或者专业技巧等均可实现，改变了用户的阅读习惯和获取内容的形式。

央视新闻 APP 作为新闻资讯类的专业平台，在满足用户阅读新闻的同时，也跟进了短视频观看新闻的体验。在底部标签栏以舵式导航的形式作为短视频新闻入口，点击之后会有推荐视频展示，差异化的推荐设计不仅提高了内容的曝光度，也吸引了用户的关注度。

小结

本期为大家总结了提高用户体验的十个优秀设计解决方案，体验、分析、总结是为了掌握别人的设计经验，积累设计灵感并运用到项目设计中。灵感的积累离不开总结，探索细微之处的差异化对于 UX 设计师而言至关重要。

本期分享到此结束，仅为个人角度的体验总结，希望可以带给大家更多灵感启发。

原文地址：黑马家族（公众号）

作者：黑马青年

转载请注明：学UI网》提高用户体验的10个优秀案例

评论(0) 浏览(5367)

122022-4

交互设计中排行榜设计详解

博博

排行榜设计有几种展示方式？排行榜入口引导怎么做？视觉表现有那些？看这一篇，带你全面了解排行榜的背后思考及做法！

“今天吃什么啊？”

“不知道啊，看看大众点评，哪家店比较靠前”

“一会去看什么电影？”

“我看豆瓣上，这部片子评分特别高，我们去看这个吧”

当我们每天面对类似“吃什么”“买哪个品牌”“周末去哪玩”等等需要抉择的问题时，会发现当你面对的选择越多时却越不知道该如何做决定，或者当下做了决定后会一直思考做的这个决定是不是最好的，这恰恰是当代绝大部分用户在实际生活中面临的问题-选择困难。面对用户的选择需求各大平台都有自己的方式，帮助用户做决定的同时，引导用户购买目标产品，极大的降低了用户的选择成本，其中排行榜就是平台的常用套路。用户的选择成本是什么？排行榜为什么能够帮助用户降低选择成本？如果排行榜仅仅是用来降低用户的选择成本，为什么所有商家都对排行榜趋之若鹜？下面带你了解为什么人人都爱排行榜，及我们生活无处不在的“显性”“非显性”排行榜。你可能不知道是我们的生活正在被各种排行榜所支配！

排行榜的本质是一个没有感情的信息筛选机制，将所有相关的同类事物之间通过比较，从而反映出同类事物的客观实力。排行榜建立的基础在于用户对信息筛选平台权威性的认可，比如我们买衣服会首选淘宝，电子类产品会首选京东，看电影会看豆瓣评分，这些都是对平台某一领域权威性的认可。用户信任平台权威性对信息的筛选，由于锚定效应使得用户降低自己的选择成本，可以准确快速的做出选择。同时由于用户的从众心理或者羊群效应，也会对上榜主体产生强烈的品牌认可，为上榜主体带来更多的利益、强烈的荣誉感、甚至流量以及平台背书标签，比如：B站的百大up主，各个平台排行榜的销量冠军、朝阳地区必吃榜第一名，那么这一切背后的原理是什么？

一个完整的排行榜是由平台、上榜主体、用户三大组成部分，俗话说屁股决定脑袋，不同的定位决定了排行对三大组成部分不同的作用，当然背后的原理也不尽相同。

1.选择类排行榜-降低用户选择成本

在没有各种应用前，当我们决定购买什么东西或去哪家消费时，前期需要花费大量的人力、物力去搜集相关的信息进行整理集合，对比集合信息后才能做出决定，也就是说用户需要经过信息的搜集-备选集的建立-择优决策3个过程才能等到最终的结果。在建立备选集后，做出择优决策阶段发生的成本或费用都是用户付出的选择成本（前两个阶段发生的成本是交易费用，而不是选择成本）。在备选集的建立过程中，包含的选择越多，用户选择的难度就越大，选择成本就会越高。

选择性排行榜在备选集建立完成后，利用沉锚效应在用户心理建立潜意识的目标参照，帮助用户完成择优决策，降低用户的选择成本。（另一方面平台在帮助用户降低选择成本的同时，也影响着用户的最终选择，在接下来的平台侧方面会有详细的分析）。

比如说：当我需要买个耳机时，如果在没有各大应用的前提下，我需要通过找到我身边的耳机发烧友或数码电子方面方面的内行人对耳机进行了解，收集信息建立备选集，但由于京东在电子设备购物方面的权威性，我会优先查看京东的耳机类排行榜，也就是说京东帮助我完成了前期对于信息的搜集及备选集的建立，而用户出于对平台权威性的信任，根据平台给出的维度参照、品牌参照、价格、标签参照等信息，最终快速的完成自己的选择。整个过程就是用户在对锚的寻找，以及用户对信息确定性的寻找过程。

2.信息类排行榜-满足社交需求

在马斯洛需求中，当个人的生理需求和安全需求被满足时，与他人建立情感联系或关系成为人们最强烈的需求，即社交需求。社交又分为：为达到某种目的产生的功利社交或为获得情感连接及体验的共情社交需求。例如：QQ音乐新增的扑通社区、微博的明星超话打榜等功能模块的火热正是满足了拥有共同兴趣爱好的用户对于共情社交的需求。

无论是“功利社交”还是“共情社交”首先需要的是沟通，沟通的本质则是信息的流通，但当双方都没有可以沟通的信息时则社交不成立，而类似：微博热搜、今日头条、澎湃新闻等信息类排行榜，则给有社交需求的用户提供了可以展开话题相通的谈资。

在选择类排行榜中，提到的从众心理（又称羊群效应），是指人类由于对信息压力及规范压力，会希望融入到群体中寻求安全感的特性，即便此类信息与自己无关。大部分人由于对未获得及时信息的焦虑感，会热衷于浏览此类排行榜来获取实时信息，融入群体生活。每天早上，在通勤的路上用户利用碎片时间刷微博、浏览知乎或今日头条等应用了解最近发生了什么社会事件，在上班电梯或工作间隙讨论各自掌握的信息，及对事件的见解，甚至在与他人有相同的见解或之后，会对对方产生莫名的亲近感等等，这些都是在满足大众自己的社交需求。

3.分享类排行榜-自我确认需求

过年期间各家app纷纷都推出了自己的用户年度报告总结榜，不知道你有没有参与到其中，并把这些报告的截图分享到自己的朋友圈！在我们的日常生活中也会在朋友圈、B站等看到各种测试自己隐藏能力或性格的小程序，人们对于这类活动的空前热情其实是因为人类除了需要信息的确认外，还需要清楚自身在大数据下的自我确认，通过各种各样自我测试类榜单，判断自身的能力、情绪、价值等等，来达到自我认同，否则就会感到焦虑不安。

加拿大社会学家欧文·戈夫曼在《日常生活中的自我呈现》中提出他对社会生活的理解是“社会是舞台，人人皆演员”。在社会这个舞台我们需要对外有印象管理的过程，我们想要呈现给观众怎样的形象，需要我们对自身及身边人有所思考和了解。所以在社会生活中我们呈现的是自己思考管理下被他人和社会接受的自己，为了维持自身的平衡防止崩溃，人类会自发“忠诚、纪律、谨慎”的维护自己的外在形象。而互联网平台大数据则折射出“隐形”的自己，让用户更加清楚的认知自己，同时通过分享，满足自我确认以及他人确认的需求。

我目前只总结出这三种类型的排行榜，如果有小伙伴想到其他类型欢迎在评论区提出，大家一起参与讨论。

无论哪种排行榜，用户信任的基础都来自对平台的信任，那么用户为什么信任平台？排行榜对平台意味着什么？背后原理是什么？下面我们来讨论排行中平台的影响及背后的原因。

对于用户来说排行榜是为了满足用户对于数据参数、社交信息、自我个人的确定性，选择成本是品牌经济学的核心，而用户对于排行的信任首先要建立在平台品牌的权威性下的结果。

1.平台权威性—用户侧

从我们记事起，我们对世界的认识来自我们的父母或老师，而这些教导我们什么是对、什么是错的长辈或老师，对当时刚来到这个世界的我们来说就是权威的化身。长大后我们对于权威的认可则更倾向于某一领域的专家，比如：医生、律师、教授等，认为处于权威地位的人在某一领域相对普通用户的判断更可靠，可以帮助普通用户节省研究这一领域问题的工作，做出更轻松的决定，虽然不一定是正确的。

搜索我们会第一时间想到百度，需要观看影视、书籍会想到豆瓣，想听音乐会打开网易云音乐、QQ音乐等等。各大应用经过长时间的厮杀各自在用户心中建立了某一领域的权威性，形成品牌号召力，推动着用户做出需求决策。另一方面排行榜中也会说明数据来源，比如京东会在排行榜页面有明确的榜单说明，豆瓣根据平台数据更新，汽车之家依靠外部的权威数据等等方式力证自己榜单的公正、透明，减少用户做出决定中的思考、猜测，获得用户的信任，增强平台的权威性。那对于平台来说权威性的建立意味着什么？

2.平台权威性—平台侧

影响用户的决策方向

平台权威性对用户来说意味着说服力和影响力，在减轻用户的决策压力的同时，也影响着用户做出平台所需的决策方向；

平台自带话题性

平台本身的权威性也会为平台承载的内容带来讨论的话题度，加大平台承载内容的传播范围。比如，每年苹果发布会都会带来范围极大的热度讨论，而app store内的热门推荐自带话题度和讨论热度。

输出口优化

排行榜作为内容输出口，在平台权威性的背书下，产品优化自身的价值，而平台也可以通过排行榜优化自身平台价值。

平台盈利

平台权威性下，可以通过多种方式达到盈利，比如苹果app store应用商店内的付费应用，百度的凤巢系统、微博热搜的第3、4位排名等。

3.平台权威性—广告告知

在平台完成建立权威性后，部分平台开始利用排行榜进行商业变现，比如百度、58的竞价排名等，现在大部分应用会使用明显的方式告知用户，防止平台建立品牌权威性。比如微博热搜第3、4位广告位的“荐”，淘宝、小红书推荐猜你喜欢的“广告”。

上榜主体作为整个排行榜的内容中心，由于排行榜自带的竞争机制、筛选机制，使得上榜用户会很乐于分享出去，比如游戏类应用王者荣耀的胜利者排位、微信运动排行榜。

由于马太效应上榜主体中的头部用户会获得平台更多的曝光量、绝大部分用户的关注度，以及各种潜在资源，比如：流量、资源、人脉、某一领域影响力、平台背书等等，这些都是潜在的社交货币。这种激励机制极大的满足了上榜主体的荣誉感、及平台归宿感，比如bilibili不同粉丝量级会送出相对应的粉丝牌。

而平台方也利用上榜主体挖掘潜在的用户，为平台带来更多的新用户，加强平台权威性，形成平台和上榜主体的良性循环。甚至与出现上榜主体自己的流量超过平台自身流量，带走平台用户的情况。比如去年和热闹的“巫师财经推出b站，签约西瓜视频”，各大平台也时不时会出现抢占流量up主的情况。

排行榜资源的建立

排行榜设计要达到用户攀比的效果，很重要的充分条件就是相同需求的好友基数足够大，这样才能构成排行榜设计成功的必要条件。

同系同门资源导流

对于已有成功产品的公司，可以借助平台相互间的导流完成初试资源的搭建，比如：微信初期借助QQ好友流量，带来好友初期的爆发；抖音最初的活跃借助今日头条的流量输入。

自建用户体系

不断推送已关注好友的信息流，当通讯录好友开始使用头条都要发送系统推送。比如全年年低火爆全网的cloubhouse就是利用的熟人社交，你要先有这个人联系方式才能要求好友，关注的人越多才能解锁更多的聊天室。通讯录、地理位置、兴趣偏好等等，不断社区建设推送动态信息流和好友卡片推荐。

伪造

当应用建立初期，没有很多的资源和内容时，需要平台自行填充内容，使得排行榜信息量大，增加用户活跃，才能挖掘用户的需求和个性化。不如一些小编推荐、猜你喜欢等等，或是平台pgc发布推送的内容。

面对不同的用户人群及使用场景排行榜的入口表现形式也会千变万化，根据表现形式大体可分为“显性排行榜”和“隐形排行榜”。

在界面有明显的榜单名称、排序、评判规则、上榜主体、卖点信息等。排序和内容主体是这个排行榜的基本构成，其他则根据不同产品类型及产品需求决定是否展示。

1.页面tab

在首页底部或顶部tab形式出现，多出现在以UGC或文字信息为核心的产品，以内容信息为主，常见以信息热度为主要功能的资讯、新闻类应用。比如：知乎、今日头条、36氪。

知乎热榜内容完全展开；36氪分为话题榜、人气榜，话题榜仅展示前5条，人气榜展示10条，仅在前5条有名次图标，在36氪热榜的中部还会出现收藏榜，综合榜。

而今日头条仅在整个页面的1/3处展示部分“头条热榜”，点击“查看更多”后，展开“头条热榜”及“今日关注”“北京热榜”，整个交互形式类似微博热搜。

2.图标入口

首页功能入口处明显排行榜图标，优先级较高，常见自带推荐属性，能够帮助用户快速选择，减少选择成本，比较依赖榜单的应用。比如：豆瓣、音乐类、腾讯动漫等应用。

其中豆瓣、网易云音乐由于各种类型的排行榜很多，在图标点击开后，在当前页面平铺不同维度榜单类型，用户进行点击跳转；腾讯动漫相对榜单类型较少，在左边侧边栏切换不同的榜单。

3.商品详情页榜单入口

用户查看商品详情时，可能会希望能够横向对比同类商品，才能最终决定购买那件商品。常见于电商类应用，比如：京东、拼多多、得物等。点击后进入不同的榜单页面，获取更多产品信息进行筛选。（淘宝的商品详情页没有排行榜，但在首页却存在隐形排行榜，在隐形排行榜模块会有详细说明）。

4.搜索-筛选（无明确搜索目的）

当用户没有明确搜索目的时，搜索框的下方，平台会推荐没有明确指向性但有热度的产品信息。衡量的标准一般为搜索热度或信息本身的热度。利用榜单效应留住用户，比如：微博热搜、淘宝热卖、抖音热榜等。

没有明显排名及规则，但经过大数据、平台或榜单制作者筛选后呈现在平台用户的面前，位置越靠前，在用户心目中的默认位置越靠前，比如淘宝的“有好货”、编辑精选等。

1.编辑推荐/小编推荐

在平台建立初期没有特别的内容供平台呈现，这时候就需要平台人工有目的的推荐一些内容，不同于“猜你喜欢”建立在用户的行为数据下，编辑推荐更多的平台希望用户看到的内容，一方面作为平台内容的输出口引导用户，另一方面内容是平台自己发布内容，也可以保证内容的高质量。

2.猜你喜欢/相关推荐

平台根据用户之前的浏览量、收藏量、转发、搜索等用户行为数据推荐给用户相关内容。这个时候的应用基本已度过最初的获客期，并且存在大量的平台用户使用数据，“猜你喜欢或相关推荐”模块用来增加用户的浏览时长及购买的可能性，各大应用平台适用性强，一般出现在首页部分。

3.年度总结排行榜

朋友圈每年年底都会晒出的各种各样的生活、音乐、消费的排行榜，这些其实是用户自己确定了解自己，且喜欢他人了解自己的一种方式。用户通过网络数据折射出自我的轮廓，清楚的认识自己。

4.TOP排行榜

不知道大家小时候看没看过《第10放映室》，那是我最早关于排行榜的印象，里面会有各种最佳动作片总结、最佳男配角总结等等，以香港电影偏多，是我早年的电影信息资料库。现在我们也会在小红书、抖音、公众号平台刷到各种各样的top推荐，这其实也是排行榜的一种。TOP类是已经经过人为筛选的排行榜，从众多选择中选择出部分答案，给出理由，而用户只需在已被筛选过的内容中进行决定，节省选择成本，比如豆瓣每年都会举行的豆瓣电影。另外一种TOP榜并不能帮助用户做决定，但可以迎合用户对确定性需求的各种盘点性质的排行榜，比如抖音的TOP榜哥就是盘点各种内容，人物。

5.搜索-筛选（有明确搜索目的）

相比其他排行榜，筛选后的内容已经体现了用户的具体需求，高效明确的给用户提供选项，引导用户快速选择。

排行榜一般由必需的榜单头部、上榜主体，及非必需的榜单规则、更新信息构成；而上榜主体由必需的主体信息、排序，以及非必需的推荐理由、排名变化、热度信息构成。

好的榜单能够快速吸引用户快速找到自己的需求点，引导用户点击排行榜进行查看。而榜单头部也由于功能需求的不同分为唯一性榜单头部、可复用性榜单头部。

1.唯一性榜单头部

当排行榜在整个应用中有且只有一个时，通常会对榜单头部的背景及榜单名称进行个性化、品牌化设计。比如微博的微博热搜、知乎的盐选榜单、今日头条的头条热榜、大众点评的大众点评榜单等。其中微博、头条、大众点评都在名称上有做品牌漏出，增加平台的品牌权威性。

2.可复用性榜单头部

有些应用平台会存在内容需要多种不同纬度的排行榜展示的情况，为了平台的统一性、降低后期的维护成本，一般会使用可复用的榜单头部，如豆瓣、京东、QQ音乐等。

得物通过替换左右切换商品进行宣传。豆瓣、微博、马蜂窝虽然都是通过替换图片及文案的形式达到适配，但根据场景又有不同。豆瓣、微博因榜单效应根据榜单第一位的变化更换底图及文案；马蜂窝沿用自己品牌的蜂窝形状及“马蜂窝榜单”的标签设计形式，通过更换文案底图达到适用不同主题；京东就相对比较简单，只是更换标题的文案达到多主题适配。

排行榜上榜主体由于不同的场景业务需求，一般有纯文字形式、图文结合形式、横排+列表结构3种表现形式，其中主体信息及排序为排行榜必须信息，而推荐理由、排名变化、热度信息、评分等等非必须信息则根据用户关注信息点选择漏出。

1.纯文字形式

纯文字的排行榜一般是以内容（或标题）加排名的形式出现，常见以信息为主的排行榜，比如微博、知乎、今日头条等以信息为主要关注点的应用，或是搜索列表下方的热度排行榜。信息类排行榜一般以信息热度为衡量标准，因此会在标题及排位外，增加各种突出热度信息的表现形式，如关注热度人数，或是“热”“新”“爆”等等表示热度的标签，如抖音、微博。而淘宝搜索热度则是在标签外增加了上升下降的排名变化。

2.图文结合形式

相对于纯文字形式，图文结合的排行榜因为图片信息的增加，使整个榜单主体占居更多的空间也可以展示更多的产品信息，辅助用户进行选择。

图片形式

上榜主体图片尺寸一般会有横版、方版、竖版3种形式。头条、知乎等资讯类应用都采用传统的横版图片形式，延续了用户阅读新闻类资讯的习惯；而豆瓣、腾讯动漫等由于现实中书籍封面、电影海报等用户视觉场景都是竖版构图，因此沿用至线上使用的也是竖版图片形式；而京东、大众点评、马蜂窝则使用方版的图片形式，大概是因为产品的多样性需要考虑多种图片的适配问题。（视频、游戏类由于使用场景大部分采用横版图片形式；但由于游戏封面、宣传海报也会有竖版的形式，比如：游民星空、小黑盒）。

左文右图VS左图右文

每当设计图文结合的部分，首先要考虑到底是采用左图右文还是左文右图的形式呢？可能很多人会说这两种形式没有什么大的区别啊，有什么可纠结的！或者认为由于视频、图片、文字对人类的吸引力是呈递减形式的，因此应该选择左图右文的形式。但实际上这跟我们长久以来的阅读习惯以及应用希望触达的用户类型有很大的关系。

人类对画面的阅读及扫描方式通常为三种布局方式，包括：古腾堡图（Gutenberg），Z型（z-pattern）和F型（f-pattern）。其中产品列表页中最常使用的就是F型布局模式，F型布局是雅各布·尼尔森（Jacob Nielsen）在公司进行眼动追踪研究后首次提出的。与其他模式相同的是，眼睛从上/左，水平移动到上/右，然后回到左边缘再此进行水平扫描。但在F型布局第二次扫频后，向右扫动的次数会越来越少，并且会随着向下移动，眼球会紧贴左边缘。用户也倾向于F型模式浏览浏览整个页面，即自左向右自上而下的阅读模式，越向下信息获取效率会越低。

因此今日头条、知乎等需要通过文字传递给用户准确、丰富的新闻资讯类应用普遍以左文右图的形式展现。而电影、游戏、动漫等以画面触达用户需求的应用则都采用的是左图右文的表现形式，比如：腾讯动漫、爱奇艺、得物等等。

3.横排+列表表现形式

说到排行榜我们一般第一个会想到领奖台，很多平台也采用领奖台这种前三名横排+其他排名列表的结构。纯列表形式的排行榜，平台用户的注意力大部分集中在第一名，而领奖台的形式模仿现实生活中的奖励形式和仪式感，将整个排行榜的关注范围从第一名扩展至3名，另一方面排行榜的竞争关系从单一争争夺一名变成前三名的竞争关系，增加了第一名的高度。（目前这种形式我只在微博的明星势力榜及抖音的直播总榜中有看到）

榜单规则是排行榜规则的描述，是平台权威性的体现。榜单规则有些平台本身具有数据库，会有相关的平台数据支持如京东；而汽车之家则依靠“汽车工业协会”外部的数据支持，增加平台的权威性及榜单的可信度；

信息更新一般存在在榜单头部和上榜主体的中间，有些是固定时间更新，也有类似微博热搜是实时更新的模式，而腾讯动漫的更新作为用户的痛点会在延续企鹅形象的侧边栏头部标明榜单更新周期。

排行榜的成功看似是人们对于选择困难、信息获取的解决方案，但归根到底因为人们对于不确定性的惧怕，无论是信息的不确定性或是对自身价值的不确定性。而平台方利用金钱、名誉、奖励的外部激励方式，结合满足感、确定性、社交性的内在激励相互作用使得排行榜成为无论何种平台都非常受欢迎的产品功能。作为平台方因产品使用受众、产品侧重点、宣传方式的不同，排行榜会以多种入口及展现形式出现。作为设计师需要深入了解排行榜等功能背后的产品逻辑，以及用户操作行为背后的思考及心理效应，提出合理的设计，帮助用户了解产品功能，满足用户需求。

资料来源：

社交的本质
社会心理学对用户体验的影响系列：权威性原则
3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern
交互分析：排行榜应该如何设计？
如何利用好排行榜产生榜单效应？
万字长文深度分析：产品排行榜的设计和玩法
关于排行榜的设计，这有一份7000字干货手把手教你做！
淘宝“有好货”竞品分析：淘宝为何要把排行榜藏起来？
我们晒网易、支付宝年度榜单，其实只是在晒自己？

评论(0) 浏览(4247)

122022-4

界面设计中的那些版式-图版篇

博博

这篇主要说一下版面和图形使用，对高手来说可能有些老生常谈，但对移动端界面设计或许会有点参考价值，用几分钟看看吧。

作者：王铎(Micu设计)

这篇主要说一下版面和图形使用，对高手来说可能有些老生常谈，但对移动端界面设计或许会有点参考价值，用几分钟看看吧。

界面美不美，除了构图之外，另一个重要手段的就是如何处理留白，也可以理解成版率。留白就是为了凸显层次、突出内容。

手持设备屏幕较小，决定了信息显示是有限的。用户有效接受信息并不与界面内提供的信息量成正比，有的时候提供的越多，用户反而真正接受的越少。妄想满屏都是信息是不可能的。用户越来越受不了满屏的信息了。

让用户接受该接受的有效信息，是关键。

在设计界面的时候，因为内容和页面都比较多，为了保证页面与页面的统一性，首先需要设定页面内容四周的留白。在设定页面的间距后相应的内容图标，图片等的安排就确定下来了。用这样的方法能使调整出来的页面更为条理化。

红色色的部分就是内容。在页面中一般会有导航的存在，那么内容区的版面是从导航下面计算的。

界面四周增加留白。这样的界面很容易集中用户的视线到少数的内容上去，突出了焦点，整体给人一种典雅高级的感觉。

反之，缩小留白或者不留白，页面会显得更丰富更充满活力。而图片的展示空间会增加，冲击感增强，让界面更显得富更有张力。

根据页面的内容不同和功能点，适当的调整界面周边的留白非常重要。一般图片本身比较有意境，可以直接采用“出血”的方式，不留白或者少留白。

下面介绍一些版面的小规律、小技巧。

1.取其精华，一块颜色也能定天下！

提取主要的信息，通过对整个页面的颜色进行调整，从而提高版面使用率。将一个或多个功能点作为主信息，提到首页中进行设计，从达到想要的视觉效果。这样处理后的界面设计不仅能显得大气有张力，而且展现出来的信息聚合度高。

在缺少图像素材的情况下，如何让界面显得有张力，整体感强，呈现出来的版面率高。

单色背景留白，凸显主要信息。要求图标或者文字，相对简洁，能够很好地和背景色融为一体。再通过线条和规则的图形来分割留白区域，增加层次感。

做好这些的前提是，设计师要明确主要信息，以及它们之间的关系。

结合产品特点巧妙的运用大色块，将变化的信息用颜色区分出来。让用户最直观的感知信息的变化。

2.多色块灵活分割，加强内容使用率

图片素材少，还可以采用多色块进行分割，让界面显得不那么单调。

加强内容使用率可以通过色块（临近色或是互补色）的延伸或是图像的重复来组织页面版式。将图片和色块进行统一化排版布局，整体基调能使页面丰富化。图片与相同大小的色块可以保持界面的统一性与简洁性，色调的一致的统一性和连续性使页面更为整体，这样看起来的页面就像一张图片一样有张力。并且这种方式让用户感觉点击的区域也会增加，从而操作也变得便捷起来。

3.构图不拘一格，找到最合适的内容版率。

横向和纵向分割，使界面显得整齐、稳定，而斜向分割让界面冲击感强。

使用不同的构图方式，穿插性地将少量的图片整合在构图的形状中，能让界面变得活跃而富有活跃性。这样的表现方式还能将产品的气质融入进去，淋漓尽致地展现。有节奏感的设计更为取巧地加强了版式率。在界面设计中，图文的穿插可以引导用户的视线，让原本简单的内容变得有趣。在层次上，也可以区分内容的主次性，让阅读更加的轻松。

4.简约化桌面或主页，让界面越近越美

常用方式：图标、加大文案字号、序号、数字等来达到加强版式率的运用，提高视觉上的丰富性。

图标表达

人们越来越认同扁平化，一方面是因为扁平化的图标看上去清新简洁，用户理解快。另一方面，与图标搭配的背景更加单纯，要么留白，要么炫简，尽可能减少给用户在视觉上干扰。好的扁平化图标不是简单地删减细节，而是着重凸显有效的信息。

图标是最为直接的表达方式，简单明确的图形，能让用户通过对图标的认识快速找到想要的功能和需求点。图标与文案的搭配有效的降低了阅读时候的疲劳感。从而加强了界面内容的节奏。运用图标的设计条理清晰，功能明确。

信息化图标能给产品增色。有趣的图标设计不仅能很好的将功能点进行区分，也能好的将软件的特性和品牌展现出来。

把图形融入到界面中，可让内容更为丰富，层次更加的分明。

5.突出重点文案，调整版面率，让信息更清晰。

调整文字大小将调整版式的使用率，使原本空的界面内容显示的更为饱满，用户阅读起立更为直接。使用较大的字号进行加强页面使用率能让页面显得更为信息。突出重要的引导文案，加强了软件的情景感和带入感。快速引导了用户对功能的理解，从而准确的使用。

在页面中我们可以强调重点数据或功能词等来区分界面中的层次感。让用户的视线更为集中。

6.串联图片，让它们讲故事，视图化版面。

这种设计方法更多的是将文案用图形或插图展现出来。在数据页面和引导页中最为常见。

一段文案一副插图的引导页更为有特色，给用户的情怀感更强。这种设计手法也是最容易体现产品特质和吸引眼球的。图案的易读性高，能在极其短暂的时间内快速传达给用户信息。用图像来讲故事，是设计中最根本的表现方法，也更是最为受欢迎的表达方式。

图在界面中的运用

三种方式：抠，边界关系，残缺

1.切抠弄，制造纯色留白！

在处理图片素材的时候，常常会碰到图片背景杂乱，产品不够突出的问题。在设计之前我们可以对素材先进行处理，将产品直接抠出来。利用这种方式可以找到产品的形状，越明确的形状越能反映用户对产品的认知度。产品的独特性能快速明确的表达给用户，用户从潜意识第一时间的判断到产品的类型和使用特性。

下面是一个曲奇饼干的网站，将主饼干的勾出来，进行层次感的区分。在产品介绍中采用了侧面的实物抠图，体现出了曲奇饼干最为真实的厚度。运用碎落的饼干块虚化拉开产品的层次。深色的背景与饼干对比强烈，直接凸显了实物的形状。让用户一目了然，食欲大增。从而增了用户的购买欲望。

在很多的电商APP中也常采用抠图，去除多余杂乱的信息，利用产品的形状直接体现不同商品的特点。这样的界面用户阅读起来轻松愉悦。

2.建立边界，再打破边界，破出重围

如果需要展示的信息较多，采用分割区域的方法，可以使界面显得整齐干净。而当信息较少时，设计师可以大胆选用“局部出血”的方式，建立边界，再突破它，增加层次感和冲击力，以凸显主题。

一定要记得设定好的内容范围是为了让页面显得整体化，而不仅仅是摆放和拼图。

在网页设计中有时候会见到这种方式，其实在手机、平板等UI设计中我们完全可以套用。

运用图片的穿插来区分背景和产品或形象的层次感，处理完的界面更加富有生命力。放大需要突出的主形象，把它作为第一焦点展现在用户的眼前，有种强烈的“面对面”感受。

在APP中采用将图片局部突出出来，能拉开信息的层次，将需要突出的图片信息第一时间展示给用户。一方面可以方便和引导用户点击，另一方面在上下滚动的长副瀑布流里，适当地打破平衡，可以丰富页面的节奏感。

在ICON的设计中我们也常用到破图的方法。在统一的圆角矩形中，将表达寓意的图形局部超出，使图标更为有空间感和灵活性。

采用这种方式设计的图标空间感强，层次感强烈，能使产品形象显得更为突出。

在字体中也经常运用到破图的方法，让字体更为生动。在破字的过程中也能引发出不同的创意点。

大美青海字体设计我把数字9破出了方块。而在优车尚品字体的设计中，我通过品字的破图找到了车的联想，让整个字体设计的更为贴切灵动。

3.冲出画面，只保留局部，让产品再大一点！

有时候，我们拿到素材，在处理后发现，图片比较平常，用户一眼就知道是什么。这个时候，可以考虑保留局部的方式，营造残缺美，增加时尚感。不要小看用户的的脑补能力，当然，这种方案还是要与客户或者产品经理及时沟通，残缺美不是所有人动能接受的。

我们将图片进行放大，找出产品特点。选择能撑起整个页面构图的位置，切除不必要的图形，让图片冲出画面！这样处理后，页面显得非常富有张力，激发了用户想看到产品整个形象的欲望，起到产品预热的效果。

在WATCH的预热官网中，设计师将图片放大，裁取有特点的部位进行展示，引导了用户点击观看产品的整体形象，激发了用户更多的去了解产品的特性。

从版面角度看，局部放大裁切图片，增加了留白，增加了版式率，让整个页面显得饱满，微距的效果使用户与产品更贴切。

这一篇主要理顺了一下版面和图形使用知识，并不全面，大家还是以欣赏为主。看完了能有个留白、破图的印象就不算白看。

设计大方向上的东西终于絮叨得差不多了，我知道其实大家都懂，就是不知道从何下手而已，下一篇来点小方向的实用东西，欢迎大家留言。

文章来源：站酷作者：micu设计

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、

BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(1554)

082022-4

UI设计师交互设计-如何写好产品体验文档

周周

文章将分为6部分

1、撰写文档的目的

2、什么样的产品值得体验

3、产品体验类型

4、产品体验文档应该包含的内容

5、文档质量的评判标准

6、体验文档和竞品文档的异同

一、撰写目的

首先要理清楚，我们为什么要写产品体验文档， 是工作需要？还是兴趣使然？

明确写作目的才不会迷失方向，不知道自己在写什么，应该写什么。

其次，要 明确文档的受众是谁。

好的文档，是写别人想看的内容，你要明白受众想要看什么内容。

二、什么样的产品值得体验

1、与你工作相关的

如果你是做平台型电商，那么淘宝、京东这些你就得去体验体验。

2、上热搜、应用商店登榜

例如之前大火的啫喱，一度在APP Store的热度超过微信、抖音，作为产品经理就很有必要下载体验一番，琢磨一下它爆火的原因，提升自己的产品感觉。

3、新颖的商业模式

例如之前QQ音乐，在听歌过程中给用户插入广告播放，虽然极度恶心，但确实是一个比较新颖的商业模式。。。

4、新颖的交互模式

例如现在有很多APP的开屏广告，直接使用手机的重力感应器，用户稍微摇动手机就会跳转到对应的广告页，不需要用户去点击。

虽然我觉得这种交互方式挺恶心的，但在不同的场景下，其实也有可借鉴之处。

5、新颖的解决方案

例如之前房产平台推出的3D实景看房，用新的方式更好地满足，用户想直观了解房屋布局的需求。

三、产品体验类型

1、深度体验

特点： 多角度、深挖产品细节。

这意味着，我们需要投入大量的时间和精力，持续做很多案头工作。

哪些产品适合我们去做深度体验呢？

个人建议是：经久不衰、行业TOP 10、与你工作比较相关的产品。

全面体验这些产品，可以在很多方面带给我们灵感。

例如从0到1它是怎么做出来的？1到100的推广它是怎么完成的？100到正无穷的行业壁垒它是怎么形成的？......

相信我，花一段时间去持续研究这些产品，一定收获满满。

2、快速体验

「快餐式」体验，特点： 短平快。

当我们想了解一些产品有趣的表现层、交互层设计时，就可以用这种方式，花个1-2小时把玩，记录你觉得特有意思的点。

四、文档应该包含的内容

接下来，阿G将通过分析「善诊」这款APP，和大家分享一下，好的产品体验文档应该包含的7部分内容。

注意： 我们不是为了写文档而写文档。

1、体验环境

1）产品信息，通常会包含

产品名称

产品logo
产品版本

2）体验信息，通常会包含

体验人
体验目的

体验时间

3）系统信息，通常会包含

体验系统
体验设备

撰写体验环境的 3个注意事项：

1、产品版本

不同环境，版本可能不一样，导致功能、界面等差异。

例如善诊，截止文章发出前，苹果最新的版本是2.7.0，小米最新的版本是2.6.0，华为最新版本是2.6.9，所以写的时候最好备注一下。

2、体验时间

可以是持续一段时间，特别是深度体验时。

3、写体验环境的目的

为了让读者（包括自己）清楚了解所体验产品的基础信息，方便（日后）翻阅。

特别是体验目的，要 很清晰地让读者知道， 为什么要体验这款产品，体验这款产品能收获什么。

2、产品概述

1）产品类型

写清楚产品的类型和形态，例如善诊是一个中老年健康医疗服务平台，专注在移动端。

2）Slogan

一个产品向外界传递的产品理念，例如「父母健康找善诊」。

3）产品介绍

通过体验产品和查阅公司/产品的资料，为读者提炼产品特点，介绍产品的主要用途。

4）产品历程

按时间线，介绍产品一些重大事件。

以上信息获取渠道：

1、公司官网（特别是B端产品，官网会给你安排得明明白白）

2、应用商城相关的产品介绍（注意灵活使用搜索引擎，哈哈）

3、用户分析

1）用户画像

一般会从人口学、社会学角度，放一些用户的年龄分布、地域分布、学历、性别占比等数据。

具体还是要以体验的产品类型、所处行业为准，把需要呈现给读者的重点信息放出来就好，不用贪多。

2）用户需求

3）使用场景

通过行业信息、产品功能、用户画像，结合自己的思考，提炼重点用户需求和使用场景。

很多时候，我们不熟悉体验产品所处的行业，不要紧，可以猜，然后通过和他人交流、查阅资料，修正内容。

以上信息获取渠道：

1、用户画像：百度指数、头条指数，或者行业报告

2、需求和场景：行业报告 + 体验产品（当然如果你身处于行业之中，就可以依据经验来做一些总结）

4、商业模式

1）模式概述

详细描述一下公司/产品的变现方式，最好可以图文 + 数据。

2）模式优势

每一个产品能活下来，都有能够形成闭环、具备一定优势的商业模式。利用搜索引擎查阅相关资料，再加上对产品的体验思考，剖析、学习其商业模式，有助于培养我们的商业嗅觉。

以上信息获取渠道：

行业报告 + 新闻报道

做产品，可不仅仅是为了情怀，首先你要考虑的是，如何活下去。

5、市场表现

1）市场/用户规模

产品在所处市场的占比，或者用户规模，可以侧面验证它是不是一个好产品。

这里的「好」不仅是用户体验好，更是真正解决了一些行业/用户的需求。

2）融资情况

资本是最敏感的，一个产品有没有前景，融资情况会很坦白地告诉你，哈哈。

以上信息获取渠道：

1、市场/用户规模

上市公司，可以看一下财报，里面真的啥都有......
非上市公司，那只能去官网瞅瞅，或者通过搜索引擎，看看对应的小道新闻或者行业报告

2、融资情况：企查查

6、运营体系

1）版本迭代

为什么要看产品的版本迭代？

任何产品的迭代，都是基于内外部环境变化引起的策略调整，我们可以通过观察某个产品的迭代情况，培养我们对市场环境变化的敏锐度。

同时可以通过历史版本迭代，思考产品的迭代逻辑和规律，看看是否有可借鉴之处。

2）增长转化策略

结合时间线和版本迭代记录，思考体验产品的运营策略是如何完成其用户/销量的增长转化。

以上信息获取渠道：

版本迭代：七麦数据、App Annie（付费）

7、功能体验

1）核心流程图

通过把玩产品，梳理出最核心的业务流程图。

2）信息架构图

信息架构图，简而言之就是把产品主要对象的属性列出来，与页面、交互都无关。（后面可以再单独出一篇和大家聊聊信息架构图应该怎么画）

3）特色功能

可以找一些你觉得最有意思，最特别的功能，并做简单介绍。

4）产品建议

在体验产品过程中，觉得哪些地方可以改进，具体说一下问题点，分析问题点可能产生原因，再提出有效的改进建议。

8、总结反思

对比自身

思考一下体验产品上某个亮点，如何能和自己负责的产品进行有效结合，站在巨人的肩膀上看世界。

上面说的7部分内容，是不是每次写体验文档的时候，都应该有？

当然不是，我们应该根据体验目的、体验类型、产品类型，适当地做一些裁剪。

五、文档质量的评判标准

围绕着体验目的和读者感受，可以把产品体验文档的质量评判标准做一个总结。

1、通用（两种体验类型都应该有）

1）体现产品核心价值

2）抓住产品重点

3）体现产品特色

4）结构清晰

5）格式美观

6）思考总结

2、深度体验可以有

1）详细数据支持

2）商业模式分析

六、体验报告和竞品报告的异同

很多小伙伴会把产品体验报告和竞品分析报告搞混：都是对产品进行体验和分析，除了名字之外，到底有啥区别？

我们从「异同」两个方面来分析，看看它们究竟有啥区别。

1、异

1）目的不同

竞品分析文档是对竞品做分析，常用SWOT模型，将自己和竞品做对比分析，学习借鉴。而产品体验，不一定是竞品，可能只是你个人感兴趣而已。

2）范围不同

竞品分析文档，一般仅限于输出竞品的思考总结，而产品体验的范围更广。

3）深度不同

产品体验可以浅尝辄止，但竞品分析不行，竞品分析需要透过现象看到本质，观察竞品的一举一动，配合市场动态，不断调整我们自身产品方向，甚至是公司战略定位。

2、同

产品分析报告和竞品分析报告，除了都是对产品进行分析之外，还有一个共同点：我们要 做自己。

不管体验的产品多厉害，不管竞品多无敌，我们都是抱着学习、借鉴的心态去分析，去思考问题。

每个团队、每个产品诞生的环境都不尽相同，纵然其他产品做的再好，我们也不能「全盘皆抄」，要时刻保持初心，做自己。

好了，产品体验文档如何撰写，阿G就先聊到这里。

其实产品体验的整个过程，最重要是以下几点思考：

1、如果你是这个产品的产品经理，你会用什么方案去解决重点用户的需求？

2、你的方案和现在产品方案的差异点在哪里？

3、为什么会有这些差异点？

4、方案对比的优缺点各有哪些？

不管是C端还是B端，不断思考这几个问题，相信慢慢就提升自己的产品Sense。

多体验、多思考、做自己、少纠结模板

文章来源：站酷作者：阿G聊产品

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

评论(0) 浏览(1551)

072022-4

echarts设置柱状图柱状图粗细大小

前端达人

主要属性：

 //设置柱状图大小
                    barWidth: 20, 
            

                
                    1
                

                
                    2

demo:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>柱状图大小</title>
        <!-- 引入 echarts.js -->
        <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
        <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    </head>

    <body>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            // 指定图表的配置项和数据
            myChart.setOption({
                title: {
                    text: '柱状图'
                },
                tooltip: {},
                legend: {
                    data: ['销量']
                },
                xAxis: {
                    data: ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    　 //设置柱状图大小
                    barWidth: 20,
                    //设置柱状图渐变颜色
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: "#1268f3" // 0% 处的颜色
                            }, {
                                offset: 0.6,
                                color: "#08a4fa" // 60% 处的颜色
                            }, {
                                offset: 1,
                                color: "#01ccfe" // 100% 处的颜色
                            }], false)
                        }
                    },
                    data: ["1", "2", "3", "4", "5", "2", "3", "4", "3"]
                }]
            });
        </script>
    </body>

</html> 
            

                
                    1
                

                
                    2
                

                
                    3
                

                
                    4
                

                
                    5
                

                
                    6
                

                
                    7
                

                
                    8
                

                
                    9
                

                
                    10
                

                
                    11
                

                
                    12
                

                
                    13
                

                
                    14
                

                
                    15
                

                
                    16
                

                
                    17
                

                
                    18
                

                
                    19
                

                
                    20
                

                
                    21
                

                
                    22
                

                
                    23
                

                
                    24
                

                
                    25
                

                
                    26
                

                
                    27
                

                
                    28
                

                
                    29
                

                
                    30
                

                
                    31
                

                
                    32
                

                
                    33
                

                
                    34
                

                
                    35
                

                
                    36
                

                
                    37
                

                
                    38
                

                
                    39
                

                
                    40
                

                
                    41
                

                
                    42
                

                
                    43
                

                
                    44
                

                
                    45
                

                
                    46
                

                
                    47
                

                
                    48
                

                
                    49
                

                
                    50
                

                
                    51
                

                
                    52
                

                
                    53
                

                
                    54
                

                
                    55
                

                
                    56
                

                
                    57

评论(0) 浏览(6267)

072022-4

css 设置tr的边框

前端达人

有时候有设置tr边框的需求，写下如下css

tr{

border-bottom: 1px solid red;

}

发现不起作用，后来在w3c上查了查，原来只有table，th和td有独立的边框，tr并无边框。

但我想实现每一行都存在下边框，其他边框不存在，该怎么办呢？

有两种实现方法：

方法1：

table{

border-collapse: collapse;

}

tr{

border-bottom: 1px solid red;

}

解释，border-collapse: collapse; 将table，th和td的边框合成单一的边框，此时在使用tr就可以达到目的。

方法2：

先在table标签里面设置cellspacing等于0，

然后，

td{

border-bottom: 1px solid red;

}

解释，如何不设置cellspacing等于0，直接设置td的下边框，则下边框会不连续，因为cellspacing不为零，单元格于单元格之间存在间隙。

转自：csdn

评论(0) 浏览(5453)

« 1 ... 5 6 7 ... 9 »

日历

链接

个人资料

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