首页

图标统一性不强?来看腾讯设计师总结的这9个自检要素表

周周


不知道大家有没有被说过,设计做的不精致?拿图标举例,其实不精致的原因就是统一性没做好。我们总说做图标要统一,但是到底要统一哪些要素?有没有一个完整的自检表呢?以前我总结了 5 到 6 个要统一的要素,最近观察大家的练习之后,直接扩增到 9 个了,今天就以线形图标为例,看看我们需要统一哪 9 个要素。

大纲如下:

  1. 大小统一
  2. 圆角统一
  3. 语言统一
  4. 粗细统一
  5. 疏密统一
  6. 间距统一
  7. 比例统一
  8. 正负形统一
  9. 角度统一

大小统一

这个很容易理解,就是一组图标看起来大小是一致的。但是最近发现了一个比较重要的点,就是很多同学做一组练习,相邻的图标都差不太多,但是隔的比较远的图标放在一起就差很多了,比如下面这几个图标,就是逐渐变大的:

图标统一性不强?来看腾讯设计师总结的这9个自检要素表

所以对于大小统一,我们必须要做到,一组图标里,任意两个图标拿出来都是大小统一的,否则就是不及格。

保持大小统一的方法见这篇 – 图标设计规范。

圆角统一

圆角统一也是比较好理解的点,无非就是圆角大小,像下面这两个图标:

图标统一性不强?来看腾讯设计师总结的这9个自检要素表

如果圆角差很多,你很容易发现,因为都是差不多大小的矩形,但是我们很容易忽略一些细节,比如下面第一个图标的三角形,和旁边的日历相比,就过于尖锐:

图标统一性不强?来看腾讯设计师总结的这9个自检要素表

这是图标里面很细的细节,所以容易被忽视,大家一定要重视。

语言统一

语言统一你可以理解为设计风格统一,如果一组图标里面出现了多种风格,那会显得非常不专业。

比如下面这组练习:

图标统一性不强?来看腾讯设计师总结的这9个自检要素表

大体看好像是一种语言,但仔细观察其实还是有很多细节不统一的,比如外轮廓上面有的有白色,有的没有,白色还分带描边和不带描边:

图标统一性不强?来看腾讯设计师总结的这9个自检要素表

这就是在语言上不统一的案例,大家在做练习的时候,一定要想清楚你的语言是什么。

粗细统一

粗细统一就不用说了吧,基本就是用在线性图标线条粗的,比如像这种比较明显的粗细不一致,就不应该出现了:

图标统一性不强?来看腾讯设计师总结的这9个自检要素表

这都是最最基础的问题。

疏密统一

疏密统一其实是很多新人朋友容易犯的错,比如下面这一组图标:

图标统一性不强?来看腾讯设计师总结的这9个自检要素表

大部分地方是比较透气疏松的,但是只有第二个比较密集,这样就会让人感觉比较突兀,整体不够和谐。这就是疏密程度的统一性,一定要把握住节奏感,否则就会不舒服。

间距统一

这个点一般用在断线图标上,也就是你开口大小的统一性,比如一个开很大,一个开很小:

图标统一性不强?来看腾讯设计师总结的这9个自检要素表

那就证明细节没有做到位。

比例统一

比例可以分很多种,比如颜色比例,像下面这个原作的颜色比例就没有太统一:

图标统一性不强?来看腾讯设计师总结的这9个自检要素表

在小 y 优化临摹之后,达到了颜色比例的平衡:

图标统一性不强?来看腾讯设计师总结的这9个自检要素表

再比如之前说的一个案例,粗细线条的比例:

图标统一性不强?来看腾讯设计师总结的这9个自检要素表

  • 第一个图标,粗线与细线的比例:95:5
  • 第二个图标,粗线与细线的比例:70:30
  • 第三个图标,粗线与细线的比例:100:0

在这样不统一的情况下,图标是一定不会精致的。这些都是比例统一问题出现的实际场景。

正负形统一

正负形也是没那么容易看出来的,举个例子,下面这组周楠做的图标,乍一看没什么问题,但是仔细一观察,其实我们会发现,白色面积的重量其实是不统一的,那个消息上面的“#”会偏重一点:

图标统一性不强?来看腾讯设计师总结的这9个自检要素表

当优化之后,我们再看:

图标统一性不强?来看腾讯设计师总结的这9个自检要素表

整体就会比之前统一精致很多。

角度统一

角度,也是增加图标统一感的因素之一,最常见的角度统一方式就是按照一定的倍数来制定规范,比如 30 度的倍数:

图标统一性不强?来看腾讯设计师总结的这9个自检要素表

再举一个角度其他方面的例子,在做下面这组图标的时候,最初没有考虑断线的规律:

图标统一性不强?来看腾讯设计师总结的这9个自检要素表

所以看久了会觉得有些凌乱,于是我将断线处定为右下角 45 度,如遇到圆角拐角处,可挪动靠近拐角处进行断线:

图标统一性不强?来看腾讯设计师总结的这9个自检要素表

这样我们就会看到所有的图标断线位置都大致出现在右下角的地方,最终效果如下:

图标统一性不强?来看腾讯设计师总结的这9个自检要素表

很大程度上提高了图标的统一性,并且在延展执行的时候节省了大量的思考时间(思考在哪里断)。

但是对于断线的位置是否一定要规定其出现的角度,我觉得不一定,也可以从其他角度考虑,但最终的目的还是让整体统一和谐,且延展性高。

总结

以上就是目前总结的 9 个需要统一的点,只要能把所有的统一性做好,精致一定是没问题的。






文章来源:优设网     作者:菜心设计铺



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



9招,提升设计中的空间感!

鹤鹤

空间感是指艺术形象通过一定手法引起的类似现实空间的审美感受。包括作品直接表现的空间和作品具体形象之外的使人想象到的空间。这种空间感,一定程度上决定着版面的视觉效果与美感。巧妙的利用空间,可以集中观众的注意力,丰富的层次感使作品更具观赏性,同时又可以让作品主次分明,更有效的传达信息。

通过对设计作品的参考分析,设计师深海总结了营造空间感的方法,大致分为以下九个类别,希望这篇文章能对大家有所帮助。



一、遮前掩后

“遮前掩后”的意思是:通过画面设计元素之间的遮挡,交代空间关系,从而产生一定的空间感。这种形式可能空间感较弱,但易于表达,可以使文字和图片更好的结合。


设计时为了保证信息的传达,普遍会选择将文字信息完整的展示出来。其实像上面两个案例一样,适当使用遮挡关系,反而能让文字与图像结合的更好。

人的大脑有“惯性阅读”的能力,这使得即使文字被遮挡,也不会影响太多识别性。


利用蒙版,然后局部破出,这也是营造空间感常用的手法。本质上,这也属于使用遮挡关系的一种方式,这种效果空间感更强,让观众有一种打破次元壁的感觉。

使用这种样式时需要注意:用作蒙版的图形或文字,必须简洁,并且识别性足够高,否则会影响信息的传达。



二、以小见大

“以小见大”指的是:利用近大远小、近疏远密的基本透视原理,来营造空间感的一种方式。

在平面设计中,面积大的元素使我们感觉更近,面积小的感觉更远,即使是单一的设计元素,只要遵循基本的透视原理,也能塑造出空间感。


从这两个案例可以看出,元素的面积大小变化越大,空间的纵深感就越强;通过控制元素之间的位置关系,可以使空间看起来平整或者曲折,表现力非常丰富。



三、山重水复

“山重水复”是“以小见大”的进阶版,同样是利用近大远小的物理规律,塑造空间感。不同的是,通过元素的无限重复,会让空间感更强,对排版的把控能力也要求更高一些。


重复的元素会让画面有很强的冲击力,强烈的空间感让观众仿佛在无限的跌落。使用这种版式一定要注意近疏远密的空间关系,否则会降低画面的可信度。



四、横峰侧岭

“横峰侧岭”是指:通过变形,改变元素的透视,在整个版面中塑造多个平面,以此来增强作品的空间感。


将同一平面的元素对齐,创造出虚拟的边界线,借助这些参考线来塑造不同方向的平面。如果觉得空间感不够强烈,可以借助辅助线加强透视。使用这种形式的重点在于,要注意阅读顺序和空间平面之间的关系,不要为了画面,一味地堆砌空间,信息的传达永远都是最重要的。


最近非常流行的立体效果,因为空间感强,很容易出效果,深受设计师们喜爱。其实这种类型也是通过透视和多个平面来塑造空间感,制作时大多需要3D软件进行辅助,才能实现如此真实的透视效果。



五、冰厚三尺

“冰厚三尺”指的是通过给元素添加厚度,增强元素的立体感,从而提升空间感。这是一种非常简单粗暴的方式,立体化后的元素,可以展现更多的角度,使排版方式更加多变,画面也更加灵动。


最常见的2.5D风格,去除了透视感,依靠立体元素来营造空间感,可以使整个版面更加稳定和谐。有些设计师还会引入矛盾空间,让设计作品看起来更有趣味性,吸引用户目光。



六、潜踪隐迹

“潜踪隐迹”的意思是:通过改变透明度,模拟雾中的物体,距离越远的元素可见度越低,从而营造出空间感。


在中国传统国画中,就会通过控制水墨的浓淡,来展现画面的空间感。因此这种方法很适合中国风的设计,让整个作品富有神秘、幽寂的气质。



七、雾里看花

“雾里看花”和“潜踪隐迹”很相似,通过虚实的变化,模拟现实世界中的景深效果,从而塑造空间感。这种方法是最常见的,也是最出效果的,在塑造空间感的同时,还可以强调主体信息。


在对版面元素进行模糊处理的时候,要考虑元素与焦点的位置关系:距离焦点越远,模糊程度越高,普遍情况下,会将最主要的视觉元素作为焦点,保证信息的准确传达。



八、浮光掠影

有光的地方就存在影子,投影本就是空间感的一种直接反应,“浮光掠影”就是利用光影的变化,在平面中营造视觉上的空间感。


光影的变化非常丰富,因此,光影的表现方式也是五花八门。殊途同归的是,所有的光影都是为空间感服务的,所以大多数情况下,都要遵循现实世界中的规律,确定一个光源,保证整个画面的光影统一。



九、镜花水月

随着软件功能越来越强大,重现现实世界越来越容易。“镜花水月”指的就是:参考现实世界的折射、反射等自然现象,在平面空间塑造空间感。这种方式看起来质感很强,效果也非常酷炫。


需要注意的是:在设计之前一定要考虑好效果与内容的关系,一味的堆加效果,除了炫技毫无价值。

文章来源:站酷  作者:设计师深海

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


什么是数据可视化

鹤鹤

什么是数据可视化:概述


什么是数据可视化?

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

  • 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个主要差异

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

  1. 数据可视化仅由一个元素组成。它可以是地图,图表或表格。另一方面,信息图表通常包含多个Data Viz元素。

  2. 与可能简单或极其复杂且繁重的数据可视化不同,信息图表简单易行,并且面向更广泛的受众。即使对于信息图表代表的研究领域之外的人,后者通常也是可以理解的。

  3. 有趣的是,数据Viz不提供叙述和结论,而是提供这些叙述和结论的工具和基础。虽然信息图表在大多数情况下提供了故事和叙述。例如,数据可视化地图的标题可能是“按区域划分的空气污染饱和度”,而带有相同数据的信息图则显示为“ A区和B区在C国污染最严重”。

  4. 数据可视化可以在Excel中进行,也可以使用其他自动生成设计的工具,除非将其设置为演示或发布。但是,信息图表的美学非常重要,其设计必须吸引更广泛的受众。

  5. 在交互方面,数据可视化通常提供交互式图表,尤其是在线形式的图表。另一方面,信息图表很少互动,通常是静态图像。

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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


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

前端达人

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


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


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

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

jhk-1617328921467.jpgjhk-1617328931488.jpgWechatIMG1620.jpegWechatIMG1621.jpegWechatIMG1622.jpegWechatIMG1623.jpegWechatIMG1625.jpeg


--网站建设UI设计--

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



app界面赏析,--蓝蓝设计 移动端UI设计资源分享(十五)

前端达人

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


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


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


WechatIMG1626.jpegWechatIMG1627.pngWechatIMG1628.jpegWechatIMG1631.pngWechatIMG1632.jpeg


--手机appUI设计--

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



  更多精彩文章:

       手机appUI界面设计赏析(一)

       手机appUI界面设计赏析(二)

       手机appUI界面设计赏析(三)

       手机appUI界面设计赏析(四)

       手机appUI界面设计赏析(五)

       手机appUI界面设计赏析(六)

       手机appUI界面设计赏析(七)

       手机appUI界面设计赏析(八)

       手机appUI界面设计赏析(九)

        手机appUI界面设计赏析(十)

       手机appUI界面设计赏析(十一)

       手机appUI界面设计赏析(十二)

        手机appUI界面设计赏析(十三)

       手机appUI界面设计赏析(十四)

完整的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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

 

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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

 

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

涛涛

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

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

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

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

△ 高德 AR 导航效果

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

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

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

AR 导航设计原则

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

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

1. 环境影响设计

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

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

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

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

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

2. 空间体验设计

AR 空间体验设计最大的难点在于:在界面设计中,我们只关注信息层级、颜色、大小、动态等,都是在二维平面中去思考信息效率的最大化,但是在 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导航,是如何从无到有设计的?

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

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

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

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

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

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

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

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

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



文章来源:优设  作者:
AlibabaDesign

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


浅聊B端产品设计

涛涛

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



初识C端和B端产品


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

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

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


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

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

常见的两种类型:

  1. 支撑前台产品(千牛、商家后台、微信公众平台、微信开发平台、微博开放平台等)

  2. 资源管理产品(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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务




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

前端达人

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

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

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

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

  1. 浏览器会先获取DOM树并依据样式将其分割成多个独立的渲染层
  2. CPU 将每一层绘制进位图中
  3. 将位图作为纹理上传至 GPU(显卡)绘制
  4. 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,并且重排一定会引发重绘,而重绘不一定会引发重排。所以在性能优化工作中,我们更应当着重减少重排的发生。


还有什么可以优化的?

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

日历

链接

个人资料

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

存档