062021-4

什么是数据可视化：概述

什么是数据可视化？

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

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

Jorge Rey的化石燃料Dataviz

它是如何工作的？

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

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

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

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

什么时候使用？

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

话虽如此，Data Viz适用于：

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

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

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

为什么要使用它？

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

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

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

数据可视化类型

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

地图

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

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

但是，最常见的是：

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

图表

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

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

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

条状图

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

饼状图

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

线形图

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

散点图

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

表格

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

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

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

数据可视化与信息图表

5个主要差异

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

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

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

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

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）

最后的话

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

文章来源：站酷作者：ZZiUP

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

评论(0) 浏览(2840)

062021-4

网站界面赏析简洁，新颖 --蓝蓝设计

前端达人

网页中超过95%以上的信息都是通过文字的形式呈现。然而，页面文字并非毫无章法的随意呈现。事实上，更具可读性、视觉效果以及独特排版和布局的网页文本设计，更能吸引用户，提升用户愉悦度。这也是为什么越来越多的设计师日益重视网页排版设计的重要原因。

网站界面是基于浏览器的界面，随着人们对于用户体验要求的不断提高，BS界面的设计要求也越来越高，

接下来为大家分享一下我收集到的案例：

蓝蓝设计(北京兰亭妙微科技有限公司）是一家专注而深入的UI设计公司，公司对UI设计的追求一向很高，致力于为卓越的国内外企业提供卓越的手机 ui设计、软件界面设计、网站设计，用户研究、交互设计等服务。

--网站建设UI设计--

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

评论(0) 浏览(1439)

062021-4

app界面赏析，--蓝蓝设计移动端UI设计资源分享（十五）

前端达人

移动互联网的迅速崛起，让移动网页，移动客户端越来越重要，客户端的页面设计也是一门很大的学问。科技迅速发展的今手机屏幕的尺寸越来越放大化，但却始终很有限，因此，在APP的界面设计中，精简是一贯的准则。这里所说的精简并不是内容上尽可能的少量，而是要注重重点的表达。在视觉上也要遵循用户的视觉逻辑，用户看着顺眼了，才会真正的喜欢。

接下来为大家分享六款精美的app UI设计案例：

蓝蓝设计(北京兰亭妙微科技有限公司）是一家专注而深入的UI设计公司，公司对UI设计的追求一向很高，致力于为卓越的国内外企业提供卓越的手机 ui设计、软件界面设计、网站设计，用户研究、交互设计等服务。

--手机appUI设计--

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

更多精彩文章：

评论(0) 浏览(1396)

062021-4

完整的SEO优化方案包括哪些方面？

seo达人

【转载】SEO包括很多方面。正常的SEO优化一般是对网站进行系统的诊断之后，以一份全面的整体的优化方案，来指导网站的优化。单独针对SEO的一个点进行优化，无法让网站的推广发挥出最好的效果。

完整的SEO优化方案包括以下几个方面：

网站页面优化：

1. 关键词选择及合理分布

关键词是SEO优化方案的重中之重。具体做的时间，需要考虑竞争对手的情况和词的热度。如果是新站，那么一般会选择集中化的部署某长尾词。随着网站权重的提升，逐渐的拓展关键词。

在一篇文章中，关键词同样需要注意不能堆砌关键词。堆砌关键词会被判定为优化过度。好的SEO文章要符合两方面的需要：蜘蛛的需要和用户的需要。对关键词词频和密度都有独特的要求。

2. 页面除了K（关键词）的设置外，T（标题）也是重要的一部分

标题除了文章或页面的标题引人入胜之外，需要将调动用户兴趣最大的吸引点放在一目了然的位置上，也就是首屏要有特色，去激发用户的深度阅读，这样才能让用户停留更长的时间，提高网站的吸引力和权重。而描述D，目前已不影响SEO排名，但是能够影响用户。因此描述应偏向于向用户进行解读。

3. 除了TDK设置外，网站页面的内容优化还有段落、锚文本等

网站上的内容切忌一个段落内容太长。锚文本要分散布局，不能集中堆叠。在具体的页面内容部署上，前期请专业的SEO文章写手是一条性价比比较高的办法。企业也能通过这些写手的带路，掌握网站页面内容SEO优化的办法和窍门。

网站代码优化：

1.网站后台也需要针对SEO的需求进行一定的调整

比如代码中其实可以直接部署关键词方便蜘蛛抓取。但是全盘的网站代码优化较为复杂。普通的SEO优化代码方案中，更多的是初步的梳理。

2.网站代码中的meta标签、H标签、a标签、mg图片标签、图片的alt属性等代码设定，也是SEO必不可少的一环

SEO推广公司的方案中，应包括这些代码修正的方案。

网站结构优化

1.网站的结构层级尤其是新站一般不要超过3级

结构太深影响SEO。网站尽量追求扁平化的框架结构。

2.网站的404页面、301、302重定向等，也是SEO必须要设置的部分

网站SEO需要对死链、坏链等进行检索，网站页面的打开速度，页面内容或者友情链接更新的频率，也是SEO的范畴。

网站站外优化

站外优化可以登录搜索引擎，不断的从关键词结果页点击进入网站。站外优化最主要的手段是部署外链。比如在贴吧、论坛、门户网站等部署外链。如果企业有站群，可以多假设友情链接。主动提交网址到行业目录网站等外部优化办法也能提高SEO的效果。

网站SEO的优化方案，需要针对具体的网站具体的关键词进行分析。好的SEO方案会周期性的提供SEO报表，关键词的搜索结果排名必然是稳步上升的。

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

评论(0) 浏览(1282)

062021-4

SEO优化策略

seo达人

网站需要有清晰设定网络的主题、用途和内容；关键词设定要突出；页面容量要合理化；网站导航要清晰化；网站内容要保持发布更新。

网站 SEO 优化

1．主题要明确，内容要丰富

在设计制作网站之前，要清晰设定网络的主题、用途和内容。根据不同的用途来定位网站特性，可以是销售平台也可以是宣传网站，网站主题须明确突出，内容丰富饱满，以符合用户体验为原则。对于一个网站来说，优化网站的主题与实际内容才是最为重要的。一个网站需要有鲜明的主题，丰富的与主题相关的内容，专注于某些领域的变化的，及时更新。

2．引出链接要人气化

搜索引擎判断网站的好坏的一个标准是外部链接的多少以及所链接的网站质量。创建有人气化的、有意义的引出链接，提高链接广泛度，既能提高在搜索引擎的排名，同时也可以起到互相宣传的作用。研究表明：当一个网站的链接 PR 值达到 4～6，那么这个网页的访问量比较好；当链接 PR 值达到 7 以上，那么网站的质量与知名度都很优秀了。如果一个网页被其他网页链接得越多，那么该网页越有可能有最新和最有价值的高质量网页。尽可能增加与行业网站、地区商务平台和合作伙伴网站之间的链接，被 PR 高的网站引用能更快地提高本站的 PR，同时开发人员可以在访问量较大、PR 值较高网站上发表与网站主题以及业务相关的信息，用户在别的网站看到这些信息，进而访问该网站，即通过外部链接来提高该网站的访问量。

3．关键词设定要突出

网站的关键词非常重要，它决定网站是否能被用户搜索到，因此在关键词的选择上要特意注意。关键词的选择必须突出，遵循一定的原则，如：关键词要与网站主题相关，不要一味的追求热门词汇；避免使用含义很广的一般性词汇；根据产品的种类及特性，尽可能选取具体的词；选取人们在使用搜索引擎时常用到与网站所需推广的产品及服务相关的词。5 至 10 个关键词数量是比较适中的，密度可为 2%～8%。要重视在标题（Page Title）、段落标题（Heading）这两个网页中最重要最显眼的位置体现关键词，还须在网页内容、图片的 alt 属性、META 标签等网页描述上均可不同的程度设置突出关键词。

4．网站架构层次要清晰

网站结构上尽量避免采用框架结构，导航条尽量不使用 FLASH 按钮。首先要重视网站首页的设计，因为网站的首页被搜索引擎检测到的概率要比其他网页大得多。通常要将网站的首页文件放在网站的根目录下，因为根目录下的检索速度最快。其次要注意网站的层次（即子目录）不宜太多，一级目录不超过两个层次，详细目录也不要超过四个层次。最后，网站的导航尽量使用纯文字进行导航，因为文本要比图片表达的信息更多。

5．页面容量要合理化

网页分为静态网页与动态网页两种，动态网页即具有交互功能的网页，也就是通过数据库搜索返回数据，这样搜索引擎在搜索时所费的时间较长，而且一旦数据库中的内容更新，搜索引擎抓取的数据也不再准确，所以搜索引擎很少收录动态网页，排名结果也不好。而静态网页不具备交互功能，即单纯的信息介绍，搜索引擎搜索时所费时间短，而且准确，所以愿意收录，排名结果比较好。所以网站要尽量使用静态网页，减少使用动态网页。网页容量越小显示速度越快，对搜索引擎蜘蛛程序的友好度越高，因而在制作网页的时候要尽量精简 HTML 代码，通常网页容量不超过 15kB。网页中的 Java.script 和 CSS 尽可能和网页分离。应该鼓励遵循 W3C 的规范使用，更规范的 XHTML 和 XML 作为显示格式。

6．网站导航要清晰化

搜素引擎是通过专有的蜘蛛程序来查找出每一个网页上的 HTML 代码，当网页上有链接时就逐个搜索，直到没有指向任何页面的链接。蜘蛛程序需要访问完所有的页面，需要花费很长的时间，所以网站的导航需要便于蜘蛛程序进行索引收录。可根据自己的网站结构，制作网站地图 sitemap.html，在网页地图中列出网站所有子栏目的链接，并将网站中所有的文件放在网站的根目录下。网站地图可增加搜索引擎友好度，可让蜘蛛程序快速访问整个站点上的所有网页和栏目。

7．网站发布要更新

为了更好的实现与搜索引擎对话，将经过优化的企业网站主动提交到各搜索引擎，让其免费收录，争取较好的自然排名。一个网站如果能够进行有规律的更新，那么搜索引擎更容易收录。因而合理的更新网站也是搜索引擎优化的一个重要方法。

文章来源：泪雪网作者：Fanly

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

评论(0) 浏览(1344)

062021-4

最近爆火的高德AR导航，是如何从无到有设计的？

雪涛

近日在短视频上有关「高德 AR 导航」的相关视频成为爆款，得到了广大用户的欢迎和点赞，下面就和大家一起分享，高德 AR 导航从无到有的体验设计原则和背后思考。

最近爆火的高德AR导航，是如何从无到有设计的？

△ 高德 AR 导航效果

各大公司入局 AR 现实增强领域，现实增强技术也逐渐趋于成熟，随着对 AR 应用领域深入探索，图像识别数据的积累以及 AR 导航体验探索变得非常重要。高德地图基于大量的地理信息数据和精准的导航能力，AR 实景导航正式发布，让驾驶员能够身临其境的感受增强现实带来的驾驶乐趣，那么在复杂的环境中又如何把握体验设计？与界面设计又有什么不同？一直是我们在思考的课题。

我们先从用户反馈、竞品分析、AR 导航载体、安全性、环境感知、设计语言 6 个层面切入分析，把探索的方案落地到 AR 引擎中实验，再到高德地图车机版上线验证，最后服务于高德 ToB 车企出货，带来实际收益。

最近爆火的高德AR导航，是如何从无到有设计的？

AR 导航设计原则

作为设计师，习惯了用屏幕的二维空间去思考信息效率的最大化，但是把体验和设计放在三维空间中，会受到环境、光线、安全性、场景、人、车、路等相互影响。

最近爆火的高德AR导航，是如何从无到有设计的？

1. 环境影响设计

环境的变化影响分为自然环境、道路环境、驾驶环境三类，不同的天气、道路等级、驾驶因素都会对驾驶员的感受、反应、状态产生影响，所以在 AR 的空间体验设计中，这些影响需要充分考虑其中。

最近爆火的高德AR导航，是如何从无到有设计的？

当考虑完环境因素后，还应该去真实的驾驶情景中分析信息呈现的权重，比如车辆在行驶中前方移动的物体一定比车辆静止时看到移动物体的权重要高，那么在设计上，需要明确信息层级和显示时机及策略，让驾驶员在行驶中能够快速获取，且正常驾驶不受其影响。

最近爆火的高德AR导航，是如何从无到有设计的？

2. 空间体验设计

AR 空间体验设计最大的难点在于：在界面设计中，我们只关注信息层级、颜色、大小、动态等，都是在二维平面中去思考信息效率的最大化，但是在 AR 的三维空间中，除上述我们还需关注安全性、空间性、以及如果让驾驶员快速获取增强信息来辅助他进行平稳驾驶。从下图比较看，在界面中告诉我前方有什么路况信息远远不如直接看的效率快。

最近爆火的高德AR导航，是如何从无到有设计的？

AR 导航的视域不仅要考虑水平、垂直视野中的布局，划定舒适区域，还要考虑距离对于信息呈现的感受。

最近爆火的高德AR导航，是如何从无到有设计的？

经过以上对于布局的规划，我们可以得到以下布局关系。

最近爆火的高德AR导航，是如何从无到有设计的？

3. 颜色及视觉权重

在颜色的选取上，让整体的配色符合真实世界的认知，在我国道路交通中对于颜色界定，路牌中的蓝绿色为不会立即影响驾驶者行为的信息，红色、橙色、黄色用户告知驾驶员暂时性和永久性的危险，所以我们可以得出以下颜色体系。

最近爆火的高德AR导航，是如何从无到有设计的？

在 AR 导航设计中，最大的不同在于，你所有的设计都需要跟据实现后的策略+真实环境路测去反复调整，检验设计逻辑是否符合驾驶员的真实感知，经过了大量路测及实验才能敲定。

最近爆火的高德AR导航，是如何从无到有设计的？

从设计到落地

1. 案例分析

我们尝试用一个案例展开来诉说实际的道路环境远比纸面上的分析要复杂的多。

在司机正常驾驶中，既为用户提供了红绿灯检测，又给用户提供了车道线提示，单独看红绿灯识别及车道线提醒都没有问题，但在十字路口场景可以发现，红绿灯和车道线重合，带来了信息叠压的问题，经过分析发现：

红绿灯策略：在十字路口驻车时，检测开始，并在红绿灯变化颜色时，语音提示用户并展示绿灯可通行。
车道线策略：常驻显示，无论什么情况下，都显示当前道路车道线。

最近爆火的高德AR导航，是如何从无到有设计的？

针对上述的红绿灯和车道线重合问题，可以从两个层面分析解决。

车道线和红绿灯其一换位置：红绿灯为视线位置图像识别所得，无法更改位置，因此只能调整车道线位置。
策略规避：分析可发现，驾驶员在十字路口场景时，是没有查看车道线诉求的，但是检测红绿灯诉求强烈，车道线在驾驶员临近路口时，是强诉求。

所以迅速采取了方案 2 的方式，让红绿灯和车道线差异策略时段显示，规避了该问题，上述问题为简单举例，在实际现实空间场景时，需要注意的是现实物体识别是否遮挡驾驶视线或者和 AR 常驻信息重叠。

最近爆火的高德AR导航，是如何从无到有设计的？

△ 压线效果

最近爆火的高德AR导航，是如何从无到有设计的？

△ 场景服务卡片

最近爆火的高德AR导航，是如何从无到有设计的？

△ 斑马线提醒及行人预警

我们试想下，如果在转弯情况下，我们展示了很多行人 ADAS（预警系统）提醒，是否影响了正常驾驶？在每个元素出现和消失的时候，需要充分的考虑到它对其他元素的影响，是否符合 AR 空间设计体系和权重策略，差异化显示为更优解。

最近爆火的高德AR导航，是如何从无到有设计的？

△ 标注：本篇文章内容效果在后续版本中陆续上线

愿景&未来价值

1. 有趣真实互动

抖音、快手、snapchat 等国内外社交平台上的 AR 滤镜应用大多简单有趣，比如给你的脸上实时画个妆，拍边时四周漂浮一些可爱的小动物，非常符合现代人的使用心态。但是 AR 在地图中的应用（如步行导航、驾车导航) , 也应该考虑如何利用 AR 的特性让地图中的数据清晰易懂、与人的互动也变得更轻松随意。

常规使用导航时，随着地图放大，可以看到更多的道路细节（车道数量，路边停车位，斑马线，交通事故等）。但是开车时需要时刻和真实世界做对应。受限于屏幕大小，这些信息的展示总是有限的。当我们用上了 AR，这些信息就能直接展示在真实世界中的相应位置，不用费力去寻找。传统地图的方式也将被颠覆。

案例分析 1：放在道路上的虚拟路障

利用 AR 视觉效果进行更逼真的强警示作用，而不是导航路线上的一个简单标记。

最近爆火的高德AR导航，是如何从无到有设计的？

案例分析 2：AR 导航商圈透出

开车到陌生城市时，结合 AR 地理位置标记，能清楚的知道所在商圈的信息。

最近爆火的高德AR导航，是如何从无到有设计的？

2. AR 在出行领域的更多应用

最近爆火的高德AR导航，是如何从无到有设计的？

随着城市建设路网越来越复杂，AR 在旅游景区的导览，多种交通工具混合出行的场景都能更好的发挥出价值。这也是今后我们探索的方向

文章来源：优设作者：AlibabaDesign

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

评论(0) 浏览(2053)

062021-4

浅聊B端产品设计

雪涛

带各位了解下B端和C端的区别，重点介绍下设计规范体系搭建的框架和思路

初识C端和B端产品

C端 Consumer，表示为消费者、个人用户或终端用户，

直接面向普通用户提供服务来帮助他们实现个人需求，

常见就是大家手机中常用的应用。

B端 Business，表示为商业和企业，

是为帮助企业集团等实现商业目的而设计的软件、工具或者平台，

常见的两种类型：

支撑前台产品（千牛、商家后台、微信公众平台、微信开发平台、微博开放平台等）
资源管理产品（Sass、ERP、CRM、OA、WMS、TMS、呼叫中心客服系统、FMS财务管理系统等）

C端产品主要偏向消费互联网，更感性，怎么用的舒服怎么来，用户体验极佳；

B端产品主要偏向产业互联网，更理性，能解决实际问题，降本增效；

B端产品为什么要做设计规范

因为B端产品属性不同于C端，竞品参考少之又少，能找到也可能因为付费或者权限的原因，无法从“上帝”视角查看全局，也只能看到冰山一角，而且每个企业单位都有一套自己的产品体系，竞品差异化还是有的，但是有一点是不变的，就是设计底层的规范和原则，变得只是产品流呈现，就像乐高。

B端产品往往拥有复杂的业务逻辑且页面量级巨大，快速迭代也会引发频繁的变动以及并行概率的增加，需要设计师内部协同，或与开发能够快速的产出方案保证上线。这样的工作模式引发的副作用如：“体验一致性差”、“设计效率低”、“还原度不可控”的问题也逐渐显现，变成一个急待解决的问题。

设计规范就是为了节约成本，提升效率，保证质量。

这里不由得要提另一个概念——原子化组件思维，一个完整的页面是由无数个元素构成的，页面元素可以进行层层拆解。“组”是页面元素的搭建方式，“件”由不同的最小单位解耦元素组成。

这里着重说一下一定在前期做好设计规范的规划和宣导落地，自己在项目设计执行阶段因为时间紧张且经验不足，一边画页面一边搭建规范，设计稿前后优化内容差异较大，导致有大量之前实现的页面问题较多，后期要投入很多的时间和人力去修改，这个问题还是蛮典型的，希望各位可以意识到设计规范的重要性。

怎样搭建设计规范？

我们没必要自己从0开始搭建，一套完整的规范体系，需要经过上百甚至上百张页面的积累打磨才能完成，时间也不允许我们这样做，但我们可以站在巨人的肩膀上去实现，现在很多大厂都有自己一套完整的设计规范体系，以下也是自己经常参考的规范：

蚂蚁设计：https://ant.design/index-cn

蚂蚁数据可视化：https://antv.vision/zh

饿了么：https://element.eleme.cn/#/zh-CN

iview：https://www.iviewui.com/

贝壳：http://design.ke.com/page/home

自己为公司建立的设计规范体系也是基于AntD，根据公司产品属性做了一些调整和优化，才逐渐形成了适合自己产品的规范体系，下来带各位梳理下设计规范需要做什么？

先放一张通用架构图，总体了解下有什么

接下来带各位过一下这五大板块内容，重点展示会配图解释，没配图的可在文末下载AntD设计规范作为参考，

设计过程中及时要和产品研发进行沟通评审，防止大面积复用带来的改稿，痛苦面具···

一、全局样式

1. 常规颜色

主题色、功能色（错误/警告/成功）；
状态色（A/B/C等级）；
文字色（主要/次要/辅助/禁用/占位符/白色）；
线条色（基础/分割器）；
背景色（基础/禁用/表头）；

2. 图表颜色（较常规颜色饱和度偏低，视觉体验较好）

顺序色板（8种顺序颜色，饼图/环图适用）；
同色相色板（8种顺序颜色，饼图/环图适用）；
分组柱状图/堆叠图色板（5种颜色）；
语义色板（成功/警告/严重）；
文字色（轴标签/轴单位，继承文字常规颜色）；
线条色（XY轴实线/网格虚线）；

3. 字体

字体家族（字体识别顺序）；
字号（3~5种，保持克制）；
字重（Regular/Medium/Semibold）；
行高（一般为@1.5，较大字体行高需特殊处理）；

4. 阴影

默认（上下左右方向）；
悬浮（较默认偏深）；
模态框；

5. 图标（建议上传iconfont自己的项目库，方便前端调用）

通用图标（线性/填充）；
行业图标（业务需要）；

6. 布局（特别注意栅格自适应问题）

间距（8点网格法是最为合适的产品间距制定方法）；
框架（导航/头部/页头/标签栏/树状容器/内容区域）；
栅格与标注（筛选/表单/详情/表格单元/弹窗）；

顺手

二、组件库

1. 按钮

常规按钮（填充/线框/虚线按钮）；
图标按钮；
文字按钮；

2. 导航

下拉菜单、标签页、步骤条、分页器、锚点链接、面包屑；

3. 数据录入

输入框、选择器、单选框、多选框、开关、日期选择器、时间选择器、滑动输入条、上传；

4. 数据展示

头像、徽标、标签、文字提示、气泡卡片、内容、表格、滚动条、统计数值、时间轴、折叠面板、分隔器；

5. 反馈

对话框、全局提示、警告提示、进度条、结果、气泡确认框、加载中；

三、数据规则

空数据、电话号码、数值、金额、日期、时间、相对时间、脱敏、标准词汇库；

四、数据可视化

数据可视化这个板块其实并没有想象的那么简单，画个圆画个长方形什么的，你要重点了解的是以下几点：

1. 选择正确的图表类型（时间类、比较类、分步类、流程类、占比类）；

2. 组件使用规范和说明（标题与注释、轴、图例、标签、提示信息）；

3. 图表布局自适应（面对海量数据量与有限屏幕空间的冲突）；

4. 交互（数据获取、信息加工、知识流转）；

这里不多做赘述，基础介绍可以看看之前发布的文章，深层级的介绍可移步https://antv.vision/zh。

五、模板页面提炼

规范体系搭建完成后，我们就可以用组件去搭建各类型场景的标准模板页面了，就像搭积木一样，过程还是很有成就感的。

登录页、引导页、工作台、查询列表、表单、详情、弹窗、左树右表、设置页、异常页、空状态；

每一类模板页面都有自己的使用场景、基本构成、注意要点等，举个例子，

1.【工作台】为用户提供处理和查看信息的捷径，为产品适当宣传产品的新动向等运营内容。

2.【查询列表】四大构成：数据过滤—数据统计—数据列表—批量操作；；

3.【表单页】明确当前页面任务，快速定位修改目标，简化填写流程，确保用户准确、轻松、快速地完成任务；

最终的这些模板页面还是要根据自己公司的产品属性来做一些调整，随着经手的同类型页面越多，最后的模板页面越标准。私密原因，这里展示些AntD的标准页面参考下：https://preview.pro.ant.design/

规范宣导落地

上述就是规范体系的主要构成了，规范搭建也只是设计部门的产出物，宣导和落地才是重中之重，

我们要对产品和研发拉会进行一次完整规范的内容宣导，

让产品同学明晰现在的产品框架和样式，原型图绘制样式和交互接近视觉稿；

让研发同学知晓我们是基于什么前端框架设计，源生组件有哪些地方修改过，还原过程中注意些什么；

给出我们规范的产出物，一份完整的PDF查看手册，一份上传设计稿可查看标注的链接地址和一个规范迭代文档，方便相关人员查看和对接迭代。

这中间过程不比规范搭建所花费的时间和精力少，做好持久战的决心，公司产品体验升级是否能成功就靠这一战了···加油。

总结

以上就是本次分享的全部内容了，总结的方向比较多，但都不太细致，也是先给各位一个整体框架和思路来应对相关的设计，更多的内容可以多去参考大厂，你会发现很多有意思的东西，从0到1或者从0.5到1，自己去探索去实践，成就感满满，这个过程就是进步的味道，相信你会爱上。

文章来源：站酷作者：MiFan菌

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

评论(0) 浏览(1481)

022021-4

高效前端之再探页面渲染优化

前端达人

首先仍然不得不提的是 “在客户端拿到 HTML 后的处理”：

从上到下解析 HTML 文档生成DOM树；
加载解析样式构建CSSOM树；
加载并执行JavaScript代码；
根据DOM树和CSSOM树，生成 render 树；
渲染；
布局；
绘制

我们可能很多次听到过：“要尽可能地减少重排和重绘，因为它们会影响浏览器性能。”
但，为什么呢？

事实上，一个页面是由许多层级组成的（就像千层饼一样） —— 这里的“层级”指的是“ DOM 元素渲染层（Layer）”。一个页面在构建完 render tree 到展现在我们面前还经历了一个“特别的流程”：

浏览器会先获取DOM树并依据样式将其分割成多个独立的渲染层
CPU 将每一层绘制进位图中
将位图作为纹理上传至 GPU（显卡）绘制
GPU 将所有的渲染层缓存并复合多个渲染层最终形成我们的图像（如果下次上传的渲染层没有发生变化，GPU 就不需要对其进行重新绘制）

（：从上面的步骤我们可以知道：布局是CPU处理的，而绘制是由GPU完成的。
就像这张图说的（from Firefox的3D View插件的页面Layers层级图）
layer-index

问题就发生在上面所说流程的第2、4步中。大家试想一下：如果我们把那些会发生复杂运动/变化或一直发生大量重排重绘的元素提起出来，单独放在一个渲染层触发，那它就不会连累其他元素了！

那什么情况下会触发渲染层呢？
比如 video 、WebGL 、Canvas 、CSS3 3D 、CSS滤镜 、z-index大于某个相邻节点的值 的元素都会触发新的Layer —— 这里要理解一点：它并不单单指 z-index！这里极力推荐张鑫旭大大的这一篇文章：深入理解CSS中的层叠上下文和层叠顺序
比较简单的方法是，给元素加上下面的样式：

transform: translateZ(0); backface-visibility: hidden; 


    
        1
    

    
        2

我们把容易触发重排重绘的元素单独触发渲染层，让它与那些“静态”元素隔离，让 GPU 分担更多的渲染工作，我们通常把这样的措施成为硬件加速，或者是 GPU 加速。大家之前肯定听过这个说法 —— 就比如CSS中的 will-change 。

不论是重排还是重绘，都会阻塞浏览器。要提高网页性能，就要降低重排和重绘的频率和成本，近可能少地触发重新渲染。正如我们上面提到的：重排是由 CPU 处理的，而重绘是由 GPU 处理的，CPU 的处理效率远不及 GPU，并且重排一定会引发重绘，而重绘不一定会引发重排。所以在性能优化工作中，我们更应当着重减少重排的发生。

还有什么可以优化的？

CSS 属性读写分离：浏览器没次对元素样式进行读操作时，都必须进行一次重新渲染（重排 + 重绘），所以我们在使用 JS 对元素样式进行读写操作时，最好将两者分离开，先读后写，避免出现两者交叉使用的情况
通过切换 class 或者 style.csstext 属性去批量操作元素样式
DOM 元素离线更新：当对 DOM 进行相关操作时，例、appendChild 等都可以使用 documentFragment 对象进行离屏操作，带元素“组装”完成后再一次插入页面，或者使用 display:none 对元素隐藏，在元素“消失”后进行相关操作，然后再显示出来
visibility: hidden 是个好东西，它既有display的隐藏，又有opacity的占位。而且它还支持移动动画
图片在渲染前指定大小：因为 img 元素是内联元素，所以在加载图片后会改变宽高，严重的情况会导致整个页面重排，所以最好在渲染前就指定其大小，或者让其脱离文档流

评论(0) 浏览(1195)

022021-4

Web前端：前端知识总结，

前端达人

Web前端基础：

Web前端工具：

概念

jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。 jQuery库包含以下功能:

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
A JAX
Utilities

提示: 除此之外，jQuery还提供了大量的插件。
目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。

知识框架

在这里插入图片描述

安装

版本问题

jQuery版本有很多，分为1.x 2.x 3.x
1.x版本:能够兼容IE678浏览器
2.x版本:不兼容IE678浏览器
1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。 3.x版本:不兼容IE678，更加的精简(在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678)
国内多数网站还在使用1.x的版本

该总结中所用版本为1.1的版本

下载

jQuery有两个版本:

生成环境使用的和开发测试环境使用的。 
Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发(未压缩，是可读的代码) 


    
        1
    

    
        2
    

    
        3

以上两个版本都可以从 jquery.com 中下载。

这里给个国内的下载地址：
JQuery 下载

jQuery的使用

jQuery 库是一个 JavaScript 文件，我们可以直接在 HTML页面中通过script 标签引用它，跟引用自己的外部JavaScript脚本文件一样的语法。

//将第一步中下载好的jQuery资源包进行解压，然后就可以饮用解压好的.js文件 <head> <script src="jquery-1.11.1.js"></script> </head>了。 


    
        1
    

    
        2
    

    
        3
    

    
        4

jQuery语法结构

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作(actions) 


    
        1

基础语法

$(selector).action() 说明:美元符号定义 jQuery 选择符(selector)"查询"和"查找" HTML 元素 
    jQuery 的 action() 执行对元素的操作 


    
        1
    

    
        2
    

    
        3
    

    
        4

文档就绪事件

文档就绪事件，实际就是文件加载事件。

这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。

如果在文档没有完全加载之前就运行函数，操作可能失败。所以我们尽可能将所有的操作都在文档加载完毕之后实现。

写法一：

$(function(){ // 开始写 jQuery 代码... }); 


    
        1
    

    
        2
    

    
        3

写法二：

$(document).ready(function(){ // 开始写 jQuery 代码... }); 


    
        1
    

    
        2
    

    
        3

jQuery的ready方法与JavaScript中的onload相似，但是也有区别 :

区别	window.onload	$(document).ready()
执行次数	只能执行一次，如果执行第二次，第一次的执行会被覆盖	可用执行多次，不会覆盖之前的执行
执行时机	必须等待网易全部加载挖完毕(包括图片等)，然后再执行包裹的代码	只需要等待网页中的DOM结果加载完毕就可以执行包裹的代码
简写方式	无	$(function(){ });

jQuery选择器

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头:$()。

元素/标签选择器

Query 元素选择器基于元素/标签名选取元素。
语法:$("标签名称")

<div>div1</div> <div>div2</div> <div>div3</div> <script type="text/javascript" src="js/jquery-1.11.1.js" > <script> //文档就绪事件:  $(document).ready(function(){ //编写jQuery  }); $(function(){ //1、标签选择器: //获取所有的div元素(集合) var divList=$("div"); console.log(divList);//jQuery的对象  console.log(divList.length); for(var i=0;i<divList.length;i++){ console.log(divList[i]);//js的对象  //将js对象转换为jQuery的对象  console.log($(divList[i])); } }); </script> 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20
    

    
        21
    

    
        22
    

    
        23

id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以在页面中选取唯一的元素需要通过 #id 选择器。

通过 id 选取元素语法如下:

$("#p1")

class 选择器

jQuery 类选择器可以通过指定的 class 查找元素
$(".mydiv")

全局选择器

匹配所有元素
$("*")

并集选择器

将每一个选择器匹配到的元素合并后一起返回
$("div,ul,li,.mydiv")

后代选择器

在给定的祖先元素下匹配所有的后代元素
$("form input"

子选择器

在给定的父元素下匹配所有的子元素
$("form > input")

相邻选择器

匹配所有紧接在 prev 元素后的 next 元素
$("label + input")

同辈选择器

匹配 prev 元素之后的所有 siblings 元素
$("form ~ input")

属性选择器

匹配包含给定属性的元素

$("div[id]");//获取所有有id属性的div的元素集合  $("div[class]");//获取所有有class属性的div的元素集合  $("input[name='userName']");//获取所有input标签中name属性是userName元素的集合  $("input[name^='user']");//获取所有input标签中name属性是user开头的元素的集合  $("input[name$='user']");//获取所有input标签中name属性是user结尾的元素的集合  $("input[name*='user']");//获取所有input标签中name属性包含了user的元素的集合  $("input[id][name^='user']"); 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7

可见性选择器

匹配所有的可见或不可见的元素
$("div:visible");
$("input:hidden");

所有选择器的案例

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>选择器</title> <script type="text/javascript" src="js/jquery-1.11.1.js" ></script> <script> //1、标签选择器： function htmlSelector(){ //获取所有的div元素（集合） var divList=$("div"); console.log(divList);//jQuery的对象 console.log(divList.length); for(var i=0;i<divList.length;i++){ console.log(divList[i]);//js的对象 //将js对象转换为jQuery的对象 console.log($(divList[i])); } } //2、id选择器 function idSelector(){ //根据id获取到的元素是惟一的，即使页面上有重名的id，获取的是第一个 var p=$("#p1"); console.log(p.html()); } //3、.class选择器 function classSelector(){ var list=$(".mydiv"); console.log(list.length); } //4、全局选择器 function allSelector(){ var list=$("*");//包括了html、head、title.....所有标签 console.log(list.length); for(var i=0;i<list.length;i++){ console.log(list[i]);//js的对象 } } //5、并集选择器 function andSelector(){ var list=$(".mydiv,p,li"); printList(list); } //6、后代选择器:包括所有的后代，儿子和孙子辈都有 function subSelector(){ var list=$("form input"); printList(list); } //7、子选择器：只有子元素 function sunSelector(){ var list=$("form>input"); printList(list); } //8、相邻选择器 function nextSelector(){ var list=$("label + input"); printList(list); } //9、同辈选择器 function sublingsSelector(){ var list=$("form ~ div"); printList(list); } //10、属性选择器 function attrSelector(){ var list=$("div[id]");//获取所有有id属性的div的元素集合 list=$("div[class]");//获取所有有class属性的div的元素集合 list=$("input[name='userName']");//获取所有input标签中name属性是userName元素的集合 list=$("input[name^='user']");//获取所有input标签中name属性是user开头的元素的集合 list=$("input[name$='user']");//获取所有input标签中name属性是user结尾的元素的集合 list=$("input[name*='user']");//获取所有input标签中name属性包含了user的元素的集合 list=$("input[id][name^='user']");//获取所有input标签中既有id属性又有name属性以user开头的元素的集合 printList(list); } //11、可见性选择器 function seeSelector(){ //匹配所有的可见div元素 var list=$("div:visible"); //匹配所有的不可见div元素 var list=$("div:hidden"); //匹配所有的不可见input元素,样式有display：none的元素和type=hidden的元素 list=$("input:hidden"); printList(list); } //文档就绪事件：页面加载完毕之后执行： $(function(){ seeSelector(); }); //打印集合 function printList(list){ for(var i=0;i<list.length;i++){ console.log(list[i]); console.log(list[i].innerHTML);//非表单项元素使用该种方式输出 console.log(list[i].value);//只有表单项元素才有value } } </script> </head> <body> <form> <label>用户名：</label> <input type="hidden" name="userId" value="1001" /> <input style="display: none;" value="隐藏的input" /> <input id="userName" name="userName" value="jiaobaoyu" /><br /> <label>密码：</label> <input name="userPass" type="password" value="1234567"/><br /> <fieldset> 电话：<input id="phone" name="phoneuser" value="13712345789"/><br /> 邮箱：<input name="emailuser" type="email" value="lina@sina.com" /> </fieldset> </form> 地址：<input name="addressuser1" value="北京" /><br /> <ul> <li>li111111</li> <li>li111111</li> <li>li111111</li> </ul> <p id="p1">p111111111111</p> <div id="div1" class="mydiv" style="display: none;" >div1</div> <div class="mydiv">div2</div> <div id="div3">div3</div> </body> </html>

jQuery中的事件

页面对不同访问者的响应叫做事件
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法 
    

        
            1
        

        
            2

常用DOM事件列表

鼠标事件	键盘事件	事件	文档/窗口事件
click	keydown	submit	load
dblclick	keyup	change
mouseover		focus
mouseout		blur
hover

常用的 jQuery 事件方法

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法

评论(0) 浏览(1147)

022021-4

如何选择合适的图标？来看这份图标类型和风格汇总

周周

看到好的图标我们会习惯性地截图保存，但随着收集的图标越来越多，会发现对图标的分类会变得越来越混乱…做设计时也不清楚到底该参考或运用哪种风格最合适。来看看如何解决这些问题！

图标是基本但重要的表达元素，在 UI 设计中有着不可替代的作用。

常见的分类是简单的线性分类，缺少立体化的图标分类思维。文章通过梳理来帮助大家对不同类型及风格的图标有一个体系化的认知。

如何选择合适的图标？来看这份图标类型和风格汇总

图片定义图标类型

对图标进行分类时，普遍会遇到的问题是一个图标有多种风格。例如下面这个水滴图标，样式很简单，但可以划分到多个类别中。

如何选择合适的图标？来看这份图标类型和风格汇总

面对这样的问题，推荐使用系统性的结构来划分图标类别：

首先将图标按尺寸大小分为两类；
继续细分对应的面性、线性、线面结合、扁平、拟物化等类型；
最后选择标准、容器、渐变、3D、手绘、阴影等风格。

如何选择合适的图标？来看这份图标类型和风格汇总

利用这种结构层级，可以明确定义图标类别。

图标尺寸

图标的大小取决于具体功能。例如带有渐变和阴影的图标看起来很酷，但把它缩小到 16px，这些酷炫的效果都无法呈现出来。

如何选择合适的图标？来看这份图标类型和风格汇总

在对图标归类时，首先要考虑图标用在什么位置需要多大尺寸。这里将图标分为两大类：

大尺寸图标通常指标志性图标，例如 App 启动图标或代表品牌形象；
小尺寸图标用作 UI 控件，起到引导功能或装饰目的。

图标类型

确定图标尺寸后，进一步细分图标类型：

面性图标
线性图标
线面结合图标
扁平化图标
拟物化图标

如何选择合适的图标？来看这份图标类型和风格汇总

每个类型对应的图标绘制方法看 → https://www.uisdc.com/zt/icon-drawing-guide

利用这种简单的分类方式就能避免图标发生重叠。另外拟物化这种细腻的风格不适用于小尺寸图标中，所以在小图标分类中没有展示。

如何选择合适的图标？来看这份图标类型和风格汇总

图标组成

图标尺寸越小，展示的细节越有限。相比于大图标，小图标的尺寸有一定局限性，图标组成包括标准和容器两种。

如何选择合适的图标？来看这份图标类型和风格汇总

大图标利用尺寸上的优势能展示更多内容，分为多种组成形式。

如何选择合适的图标？来看这份图标类型和风格汇总

小尺寸图标样式

简单的图像可以更具包容性。图标的尺寸越小，越考验设计师传达信息的能力。

1. 面性图标

标准面性图标

如何选择合适的图标？来看这份图标类型和风格汇总

面性图标易识别，适合应用在小尺寸图标中。

关键点：

确保图标有清晰的边缘，避免羽化；
图标复杂程度随着尺寸变小而灵活调整。

如何选择合适的图标？来看这份图标类型和风格汇总

带有背景色的面性图标

彩色背景为简约设计带来了更多可能。通过这个技巧使面性图标更友好，更具吸引力。

关键点：

为背景选择 4-12 种颜色。
考虑图标是浅色还是深色，是否适用于所有背景色。
在彩色背景上使用白色图标比黑色效果更好。

如何选择合适的图标？来看这份图标类型和风格汇总

2. 线性图标

标准线性图标

如何选择合适的图标？来看这份图标类型和风格汇总

线性图标因为简洁性和现代性而受到用户的欢迎。随着屏显越来越清晰，我们可以更加大胆地使用线性图标。

关键点：

确保轮廓像素清晰。
越简单越好。
追求更简单的细节。

如何选择合适的图标？来看这份图标类型和风格汇总

双色线性图标

如何选择合适的图标？来看这份图标类型和风格汇总

设计小尺寸图标时，必须放弃细节并强调简单的形状。但当使用一种颜色效果不太理想时，可以考虑添加一些颜色。

关键点：

使用两种搭配和谐的颜色。
考虑将一种颜色用于主要形状，另一种颜色用于细节。
少即是多。
使用粗线条。

如何选择合适的图标？来看这份图标类型和风格汇总

3. 线面结合图标

如何选择合适的图标？来看这份图标类型和风格汇总

线面结合拥有更多细节，提升用户的愉悦感。

关键点：

最好使用深色而不是纯黑色描边。
限制图标的颜色种类。
避免过多细节。

如何选择合适的图标？来看这份图标类型和风格汇总

4. 扁平化图标

如何选择合适的图标？来看这份图标类型和风格汇总

扁平化图标既简单又巧妙，表达品牌形象的同时具有丰富的内涵。

关键点：

避免在<20px 的尺寸中使用此图标样式。
选择 2-3 种颜色，可以一起使用。
一种颜色为主色，另一种颜色应为高光/细节色。

如何选择合适的图标？来看这份图标类型和风格汇总

大尺寸图标样式

大尺寸图标在界面中使用较少，更多用于产品标识或品牌宣传。

1. 线性图标

标准线性图标

如何选择合适的图标？来看这份图标类型和风格汇总

在设计任何图标前，都可以先创建一个线性轮廓，确保形状看起来足够美观后再添加颜色。

关键点：

这类图标最容易制作。
避免出现轮廓羽化。
线条粗细要一致。
不要害怕添加细节。

如何选择合适的图标？来看这份图标类型和风格汇总

渐变线性图标

如何选择合适的图标？来看这份图标类型和风格汇总

添加一些渐变能让原本单一的线性图标赋予更多的个性。

关键点：

在小尺寸图标中添加渐变会降低图标的可视性。
选择渐变时，首先考虑邻近色。
线条越粗，渐变越明显。
线条细节越多，渐变越明显。

如何选择合适的图标？来看这份图标类型和风格汇总

等距线性图标

如何选择合适的图标？来看这份图标类型和风格汇总

2.5D 图标做起来会花费很多时间，但效果往往会很好。在设计汽车、房屋、家具等实体产品时，建议优先使用 2.5D 图标。

关键点：

同一组图标要使用相同的等轴测网格。
2.5D 等轴图标很复杂，在较小的尺寸下会失去作用。
如果可以，让所有图标都朝向同一个方向。

如何选择合适的图标？来看这份图标类型和风格汇总

手绘线性图标

如何选择合适的图标？来看这份图标类型和风格汇总

随着设计趋势向简约化、扁平化发展，很多设计师丧失了手绘图标的能力。实际上手绘图标让品牌更真实甚至更有趣。

关键点：

手绘图标扫描后，再用数字方式重新绘制，这样可以保证线条粗细一致。
尽量让所有的线条保持相同的颜色，这会使文件更小。

如何选择合适的图标？来看这份图标类型和风格汇总

断线图标

如何选择合适的图标？来看这份图标类型和风格汇总

标准的线性图标看起来可能会很单调，而简单灵活的断线处理能为图标增加更多个性。

关键点：

断线粗细应该相同。
图标的中断次数尽可能保持一致。

如何选择合适的图标？来看这份图标类型和风格汇总

双色线性图标

如何选择合适的图标？来看这份图标类型和风格汇总

关键点：

确保两种颜色具有相同的对比度，否则可能会导致用户看不清其中一种颜色，因此无法识别完整的图标。例如左下角的浅绿色对于视力弱的用户来说就很不友好。

如何选择合适的图标？来看这份图标类型和风格汇总

2. 线面结合图标

线面结合图标可以看作是添加颜色后的线性图标。线面结合具有很强的轮廓，让图标能够清晰可见。

标准线面结合图标

如何选择合适的图标？来看这份图标类型和风格汇总

关键点：

使用有限的颜色和统一的线条风格，使图标具有品牌性。
使用线条和点来添加更多细节。
避免使用纯黑色描边。

如何选择合适的图标？来看这份图标类型和风格汇总

带有背景色的线面结合图标

如何选择合适的图标？来看这份图标类型和风格汇总

关键点：

描边断开时，图标效果很更好。
避免在小尺寸时使用。
使用有限的调色板。
考虑使用较浅的描边/背景色。
考虑在图标下方添加一条水平线，使图形具有相同的位置(中间的图标示例)

如何选择合适的图标？来看这份图标类型和风格汇总

错位线面结合图标

如何选择合适的图标？来看这份图标类型和风格汇总

当填充色与描边错位时，颜色移到右边图标左上角留出高光，带来一种清新的感觉。

关键点：

考虑使用断线描边。
使用有限的调色板。
确保描边和填充色简单且一致。

如何选择合适的图标？来看这份图标类型和风格汇总

色块图标

如何选择合适的图标？来看这份图标类型和风格汇总

这种风格的图标的特点在于并不依赖于颜色，仅将其用于装饰。

关键点：

选择有限的调色板。
先关注轮廓再关注颜色，颜色仅用于装饰。
避免形状色和背景色过于相似，降低可见度。

如何选择合适的图标？来看这份图标类型和风格汇总

单色线面结合图标

如何选择合适的图标？来看这份图标类型和风格汇总

关键点：

避免使用暖色调尤其是红色，会让用户感到压抑。
首先确定合适的描边颜色，再考虑填充色。

如何选择合适的图标？来看这份图标类型和风格汇总

3. 扁平化图标

扁平化图标通常没有描边，主要使用形状和颜色来完成组合搭配。简洁、友好和适当的细节，让这类图标非常具有吸引力。

标准扁平化图标

如何选择合适的图标？来看这份图标类型和风格汇总

关键点：

使用柔和的调色板，避免明亮的颜色。
分清简化和添加细节之间的界限。

如何选择合适的图标？来看这份图标类型和风格汇总

带有容器的扁平化图标

如何选择合适的图标？来看这份图标类型和风格汇总

尝试让图形打破容器，带来动态的感觉。

关键点：

尝试让图形从容器中凸出来，以增加深度。
因为在容器中，可以添加更多的细节而不用担心图形变得混乱。
尝试使用正方形、椭圆形或与品牌相关的容器形状。

如何选择合适的图标？来看这份图标类型和风格汇总

等距图标

如何选择合适的图标？来看这份图标类型和风格汇总

关键点：

保持所有图标朝向同一方向。
选择恰当的调色板能让图标看起来更一致。
避免小尺寸使用。

如何选择合适的图标？来看这份图标类型和风格汇总

半阴影扁平图标

如何选择合适的图标？来看这份图标类型和风格汇总

半阴影图标是在扁平图标的基础上添加半色调阴影，得到更具个性的图标。

关键点：

小尺寸图标不起作用。
使用有限的调色板。
确保所有的图标色调相似。

如何选择合适的图标？来看这份图标类型和风格汇总

长阴影扁平图标

如何选择合适的图标？来看这份图标类型和风格汇总

当图标位于容器中时，可以考虑添加长阴影，主要包括纯色阴影和渐变阴影两种类型。

关键点：

使容器具有相同的颜色或类似的色调。
只在大尺寸图标中使用。
将半阴影与长阴影组合使用效果更好。

如何选择合适的图标？来看这份图标类型和风格汇总

4. 拟物化图标

拟物化图标实际上已经包含了大部分的样式，例如它们是立体的，有丰富的渐变和阴影。

如何选择合适的图标？来看这份图标类型和风格汇总

这种风格的图标看起来与现实生活中的图标尽可能类似，让用户感到更舒适。

关键点：

考虑添加底部阴影。
使光源来自同一方向。
确保图标都朝向相同的方向。

目前绝大多数界面不再有这种风格的图标，可以考虑使用 3D 建模来实现这种效果。

如何选择合适的图标？来看这份图标类型和风格汇总

总结

希望大家能对图标的分类及设计有更全面深入的认识，从而构建一套完整的图标思维体系。

文章来源：优设网作者：Clip设计夹

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

评论(0) 浏览(1430)

首页

什么是数据可视化：概述

什么是数据可视化？

它是如何工作的？

什么时候使用？

为什么要使用它？

数据可视化类型

地图

图表

数据可视化与信息图表

5个主要差异

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

5有用的技巧

1.做功课

2.选择正确的图表类型

3.对数据进行排序

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

5.获取灵感

8个数据可视化示例

1.黑暗之魂III体验数据

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

3.最暴力的城市

4.家族企业作为数据

5.太阳系的轨道图

6.标题的语义

7.月球和地震

8. Nanosats的黎明

最后的话

1. 关键词选择及合理分布

2. 页面除了K（关键词）的设置外，T（标题）也是重要的一部分

3. 除了TDK设置外，网站页面的内容优化还有段落、锚文本等

1.网站后台也需要针对SEO的需求进行一定的调整

2.网站代码中的meta标签、H标签、a标签、mg图片标签、图片的alt属性等代码设定，也是SEO必不可少的一环

1.网站的结构层级尤其是新站一般不要超过3级

2.网站的404页面、301、302重定向等，也是SEO必须要设置的部分

1．主题要明确，内容要丰富

2．引出链接要人气化

3．关键词设定要突出

4．网站架构层次要清晰

5．页面容量要合理化

6．网站导航要清晰化

7．网站发布要更新

AR 导航设计原则

从设计到落地

愿景&未来价值

1. 有趣 真实 互动

初识C端和B端产品

B端产品为什么要做设计规范

怎样搭建设计规范？

一、全局样式

1. 常规颜色

2. 图表颜色（较常规颜色饱和度偏低，视觉体验较好）

3. 字体

4. 阴影

5. 图标（建议上传iconfont自己的项目库，方便前端调用）

6. 布局（特别注意栅格自适应问题）

二、组件库

1. 按钮

2. 导航

3. 数据录入

4. 数据展示

5. 反馈

三、数据规则

四、数据可视化

五、模板页面提炼

规范宣导落地

总结

概念

知识框架

安装

版本问题

下载

jQuery的使用

jQuery语法结构

基础语法

文档就绪事件

jQuery选择器

元素/标签选择器

id 选择器

class 选择器

1. 有趣真实互动