首页

数据可视化--如何应用这12种图表

资深UI设计者

怎样设计图表才能准确传达数据故事,设计的过程中需要注意什么?下面介绍这12种图表是如何应用的以及它们的优缺点

图表设计原则

怎样设计图表才能准确传达数据故事,设计的过程中需要注意什么?总结了几个设计图表的基本原则

1.确保准确性

数据可视化的设计首先需要始终保持数据的准确性和完整性。通过使用清晰的标签、准确的轴线等精准的的展示数据,使数据时刻都是真实可信未修饰过的,不能为了修饰美化数据而歪曲混淆信息。

2.提升用户体验

为用户浏览数据提供上下文标识有助于用户快速感知数据,设计时要考虑到用户现有的心智模型——这些心智模型可能由广泛使用的工具塑造而成,创建出色的可视化体验可使用标志性的功能引导用户找到他们需要的东西。以帮助感知快速响应的系统。

3.突出重点

减少认知负担使用户专注于主要的信息上,需要对整体视觉进行降噪处理。最大化数据信息的呈现比率并避免设计过多无关的图形元素。应用颜色促进图形的理解:标签、分类、突出显示或度量;帮助用户理解层次结构、数据方向和关系。


12种图表应用方式

下面介绍12种图表,应该根据什么样的场景结合哪种数据结构使用,以及是否存在可替代的方案等。其中有几种是在实际使用中并不常用的类型,大众对这类图表的理解并不多,我们只有在理解图表的含义及功能才可快速应用在设计中。

1.气泡图

气泡图也是散点图的一种,其拥有多元变量,除 X 轴和 Y 轴所代表的变量值外,每个气泡的面积代表第三个值。

缺点:气泡的大小是有限的,太多的气泡会使图表难以阅读。

设计时需注意:

a. 选择合适的气泡大小,不可过大或者过小,太的气泡容易遮挡到其他气泡不便于选择查看被遮挡的详细数据;太小的气泡难以选择

b. 不要使用奇怪的形状,均采用同一种气泡类型仅通过颜色做区分即可;无需做太多造型,多种造型结合不够直观难以区分种类


2.热力图

热力图用于指示区域内每个点的权重。除了将地图作为背景层外,还可以使用其他图像。热力图中的颜色通常与密度挂钩,每个颜色代表一个数据区间,通过使用颜色的对比来表示地理区域或数据列表的密度分布信息。

如何设计?

a. 使用简单的地图轮廓: 少量的留白轮廓可适当区分个区域边界,大量留白轮廓使边界过于清晰使各区域有割裂感的会分散注意力。

b. 使用简单的图案:图案过多容易干扰阅读,尽量不使用图案,如果必须要用使用1-2种即可,过多则难以驾驭;

c. 使用合适的颜色: 强烈的颜色会导致视觉负担,难以区分轻重缓急。使用单色或相近色,并调整阴影以区分区域更好。

d. 选择合适的数据范围:数据范围区间应该是均等的,而超出范围的数据可用 +/- 表示。

这些是设计热力图时需要注意的地方,适用于大多数情况,当然这也不能作为绝对的标准,需要具体情况具体分析。


3.桑基图

桑基图显示了从一个指标到其子级指标的流量及比例。在流程的每个阶段,节点可以组合或分割路径。两端的节点宽度显示其数值大小,因此节点越宽,占比越大。可用于财务、管理和能源分析或代表产品的生命周期。这种类型的可视化可用于描述实体从源头到终点的流程

优点:对于文字流尤其有用:金钱、货物、时间、选票等,但也可用于许多其他目的。通过连接流线可以直观的区分变量的聚散关系。

缺点:桑基图只能通过节点、连接和数值展示简单的数据故事。不能从中推导出更复杂的关系。


4.华夫饼图

华夫饼图是一个非常有趣的图表,通常由100 个方块组成一个整体,因此它可以根据指标与整体的关系进行着色或填充显示指标的占比情况,就像饼图一样,同时它也适合显示单个百分比。

优点:它能够显示整体的各个部分并比较单个百分比的多样性,指标比例能够更清楚地通过色块面积表示。

缺点:涉及太多指标时颜色区分变多使展示变得过于复杂,无法直观看出单个指标的面积结构,因此适合用在只有少数指标的展示


5.矩形树图

当画面中需要多次出现饼图或环形图展示指标间占比情况时,重复元素过多用户阅读时更加如意感觉到乏味,此时可以采用矩形树图展示占比,通过使用色块面积比例来区分指标间占比大小情况。

优点:使用区域空间而不是角度显示数据,当类别超过五个时(避免有时难以标记的饼图)以及可视化类别内的子类别,树形图比饼图更有用。

缺点:此类图表应用不够普遍,可能有大量用户对这种图表形式不太了解。


6.旭日图

旭日图是树图的一种替代方案,采用圆环形式表示分层数据信息。层次结构从内圈到外圈扩散,其展示形式像太阳一样由中心向四周发散。圆环的每个指标被切片对应一个节点,圆心是根节点,在出现多个层级换结构时通过圆心切换回上一层级。旭日图在用色上最好采用不同深浅的颜色来表示父子级结构在色调上保持一致性,使用户能够直观的看出层级间的关联关系。

优点:可以显示层次流以及整个关系的一部分

缺点:如果配色方案不正确,那么理解图表就会变得困难。此外,过多的切片会使图表拥挤且难以阅读。


7.靶心图

同样是占比图的一种,与常见饼图不同之处在于,该图的指标间没有关联即占比百分数相加不等于100,但又需要同时查看指标的占比情况,因此需要采用这种形式进行对比分析

优点:适用于指标间比较分析,视觉上较为直观;

缺点:因层叠环形过多无法在图表上加大量文字辅助展示


8.热词云

热词云是展示文本数据的可视化形式,由大量关键词组成的云状彩色图形。通过关键词的大小颜色等区分词语的使用频率以及重要性,可以快速帮助用户感知最突出的关键词。

优点:能够快速获取关键词信息,可通过热词快速检索所需信息

缺点:因热词云需要大量的数据支撑,对数据依赖度高,如果数据过少效果则不明显,不适合精确分析。


9.河流图

河流图是显示指标的大小或比例如何随时间变化,“流线”的垂直宽度表示该实体的大小。可以通过使用固定比例查看所有指标的整体大小的变化;也可以使用相对比例以某一项指标为参照目标,其他指标的值与此做对比;若所有指标始终达到 100%呈现的效果类似于面积图。

优点:可查看新指标的出现而其他指标消退的速度,整体的趋势发展状态比较直观。

缺点:虽然看趋势发展方向比较直观,但是详细的信息阅读起来较为困难。


10. 瀑布图

瀑布图通过对初始值进行多次加减运算来呈现达成某个值的运算过程。在瀑布图中,需定义好颜色的含义,不同的颜色用于显示不同的操作过程,例如绿色表示加法,红色表示减法,蓝色表示所有操作后收到的总值。这里起始值和最终值之间的所有值都是浮动的。

优点:快速查看在上一数据的基础上当前数据的变化情况

缺点:使用此图表是只能表示过程的流程


11.仪表盘

仪表盘是一种物化图表常用在时钟、汽车仪表等,通过指针角度代表当前数值进度。它可以直观地表示一个指标的进度或实际情况。一个仪表板仅能表示一种含义,若出现两种含义的仪表尽量分开展示,

优点:仪表适用于间隔之间的比较。

缺点:不适合用在具有多个分量的数据结构


12.甘特图

甘特图直观地显示了任务的时间区间、实际进度以及与需求的比较。因此管理人员可以轻松了解项目的进度情况。

优点:适合快读查看项目进度、状态随时间变化、项目流程等时间管理类信息

缺点:可查看整体情况,详细细节还需进行具体标注


总结

图表的类型多种多样,实际项目中使用何种图表需要根据数据间的关系来决定,如果画面出现同类型结构关系的频率过高想要增加画面的趣味性减少阅读的疲惫感可以通过改变图表的颜色进行区分,或者变换图表类型,有部分图表是可以替换使用的,例如:饼图表示占比关系,可以换成南丁格尔玫瑰图或环形图,也可换成上文所提到过的华夫饼图、矩形树图。因此在设计时可以不用太过于局限在图表的结构上,可以在其他方向进行优化。



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

文章来源:站酷    作者:胖kuan 

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

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

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






占满DIV剩余高度的三种方法

前端达人

第一种,老套路,浮动大法

代码:

 

效果图:

       绿色DIV占满了外层DIV

第二种:calc  CSS计算

代码:

   这里在类名为div2的DOM外又加了一层div,主要就是为了说明,如果利用calc(100% - 50px);这种模式,那么这个DIV的父元素必须指定高度,可以是具体值,也可以是百分比,特别是dom结构嵌套很深的时候,特别好用。

 

效果图:

 

第三种,弹性盒 子


  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>Document</title>
  8. </head>
  9. <style>
  10. *{
  11. margin:0;
  12. padding:0;
  13. }
  14. .parent{
  15. width:100vw;
  16. height:100vh;
  17. display:flex;
  18. flex-flow:column nowrap;
  19. overflow:hidden;
  20. }
  21. .a{
  22. height:50px;
  23. background:red;
  24. }
  25. .b{
  26. flex:1;
  27. background:green;
  28. }
  29. </style>
  30. <body>
  31. <div class="parent">
  32. <div class="a"></div>
  33. <div class="b"></div>
  34. </div>
  35. </body>
  36. </html>

 

 

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

文章来源:博客园

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

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

jquery判断元素是否隐藏的多种方法

前端达人

这篇文章主要介绍了jquery判断元素是否隐藏的多种方法,本文总结了多种判断方法实例,需要的朋友可以参考下

第一种:使用CSS属性

复制代码代码如下:

var display =$('#id').css('display');
if(display == 'none'){
   alert("被你发现了,我是隐藏的啦!");
}

第二种:使用jquery内置选择器

假设我们页面有这么个标签,

复制代码代码如下:
<div id="test">
<p>仅仅是测试所用</p>
</div>

那么,我们可以用以下语句来判断id为"test"的标签是否隐藏:
复制代码代码如下:
if($("#test").is(":hidden")){...} //前提是已经将jQuery的库导进来了

这样,我们就能够很简单地判断一个元素是否隐藏,并根据其状态来设置动画,比如:
复制代码代码如下:

if($("#test").is(":hidden")){
       $("#test").show();    //如果元素为隐藏,则将它显现
}else{
      $("#test").hide();     //如果元素为显现,则将其隐藏
}

jQuery判断元素是否显示 是否隐藏

复制代码代码如下:

var node=$('#id');

第一种写法
复制代码代码如下:

if(node.is(':hidden')){  //如果node是隐藏的则显示node元素,否则隐藏

node.show();

}else{

node.hide();

}


第二种写法
复制代码代码如下:

if(!node.is(':visible')){  //如果node是隐藏的则显示node元素,否则隐藏

node.show();

}else{

node.hide();

}

if(node.is(':visible')){  //如果node是显示的则隐藏node元素,否则显示

node.hide();

}else{

node.show();

}

jQuery判断对象是否显示或隐藏

Js代码

复制代码代码如下:

// jQuery("#tanchuBg").css("display") 
// jQuery("#tanchuBg").is(":visible") 
// jQuery("#tanchuBg").is(":hidden") 

Js代码

复制代码代码如下:

$(element).is(":visible") // Checks for display:[none|block], ignores visible:[true|false] 

Js代码

复制代码代码如下:

$('element:hidden') 
$('element:visible') 

Js代码

复制代码代码如下:

$(".item").each(function() 

    if ($(this).css("visibility") == "hidden") 
    { 
        // handle non visible state 
    } 
    else 
    { 
        // handle visible state 
    } 
}) 

Js代码

复制代码代码如下:

ar isVisible = $('#myDiv').is(':visible'); 
var isHidden = $('#myDiv').is(':hidden'); 

Js代码

复制代码代码如下:

if( $(this).css("display") == 'none' ){ 
 
    /* your code here*/ 

else{ 
 
    /*  alternate logic   */ 

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

文章来源:博客园

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

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


用研成熟度的5个灵魂拷问

资深UI设计者

最近一系列的对话让我意识到,类似于用户体验成熟度模型(UX Maturity Model),我们同样需要一套设计研究的成熟度模型(Design Research Maturity Model)。

在我看来,将某一领域的成熟框架死搬硬套地应用于所有企业,而忽略企业自身的使命或业务结构,是毫无帮助的。这种过度简化,甚至会导致企业自嗨式地以为自己每一步都做到了。

总体的能力成熟度模型(overarching Capability Maturity Model),沿用自美国国防部(Department of Defense),不过目前为止依旧是一个尚未被验证的框架。可能不像通常意义上讲的“硬技能(hard skills)和软技能(soft skills)”那样广为人知也弊端明显,但确实值得商榷。

因为任何值得做的事,都值得去质疑是否真值得去做。

因此,对于组织中真正想要通过评估产品和系统设计而持续探究领域潜能的个人,我提出这5个探索性问题。(最终,我会探索出一些类似节日五角星那样比较直观的视觉符号来展示每一个维度的进阶梯度和它们所代表的含义。)

 

5个灵魂拷问

这5个问题能帮你衡量所在组织做出更好设计研究的潜力,并让你在精准表达和实现组织目标上做得更好。

1. 你所在的组织中,让每个人敢于承认TA对于某件事的无知,在多大程度上是安全的?

To what extent is it safe for anyone in your organization to admit they don’t know something?

我之前有提到过这一点,如果一个人不承认自己知识欠缺时,是不可能虚心学习的。当组织内越多的人感觉到承认无知是安全的时,就越容易让你的组织处于持续学习并能毫无障碍地分享洞察的状态。

 

2. 在选择解决方案之前,探究多大程度上是从明确问题开始的?

To what extent does inquiry start with identifying the question before picking a method?

很多组织偏执地认为定量数据本质上就比定性数据更有价值,或是条件反射式地运用用户访谈和问卷调研去回答任何类型的问题。你要解决的问题会告诉你什么是最好的解决方案:是去阅读文献报告,或是做个问卷调研,或者做一轮访谈。你需要在调研前,先描述清楚问题。举个例子,如果你已经接受的实践方案是在烤箱内放入一把尺子看它是否温度足够,那么,你放多少把尺子都无济于事。

 

3. 跨职能和部门识别和共享问题,在多大程度上是组织的优先事项?

To what extent is identifying and sharing questions across disciplines and departments an organizational priority?

我们花了很多精力去建立知识库(research repositories)和知识分享,却没有花足够的精力让每个员工去理解一个组织需要知道的知识以及为什么需要知道。部门墙和职能墙持续存在。(比如为什么要将市场研究和产品研究区分开来?)跨职能和部门的协作探索(Coordinated inquiry)是效率和创新思维的源泉。围绕某个问题讨论并达成一致也能增进合作,因为个体和团队都不会再为了争夺一个神话般的胜利而争论不休。

 

4. 组织内各个层级的决策逻辑在多大程度上是清晰的?

To what extent is the basis of decision-making clear at every level?

我们擅长对外提问,却很容易忽视企业内部的现实。组织本身就是组织制定决策的社会背景,而这些决策工作也应该能被组织内想弄明白和受影响的人明确理解。

 

5. 通过系统研究产生的洞察结果,在多大程度上为决策提供了依据?

To what extent do the insights that emerge from systematic inquiry inform decision-making?

这是最终测试。如果设计研究产生的洞察容易被管理者忽视,那不论研究本身有多么稳健强大,都会毫无意义。

一种从目标(goals),到问题(questions),再到在明确的证据标准内运行的洞察力(insights operating within clear standards of evidence),所形成的功能反馈闭环,应该是每个组织的愿望。


翻译:贾婷   审校:LilyZhou
原作者:Erika Hall

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


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

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

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


B端数据可视化设计指南(信息图表篇)

资深UI设计者

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

在如今的工作中(尤其是 B 端)越来越多的会开始出现数据可视化的身影,对于一部分小伙伴来说这个概念是较为陌生的,面对这道无形之中提升的“门槛”我们常常会表现的手足无措。所以,为了让大家对于数据可视化不再那么束手无措,我希望能通过这篇文章和大家一起交流学习,解决一些属于我们共同的问题。

那么我们还是老规矩,想要了解一个事物首先需要知道的是它的定义。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

数据可视化的基本信息

1. 数据可视化的定义

较为笼统的来说数据可视化是一种由图形、图像、数字等元素组成的语言用于解释、呈现目标数据之间的关系。从这个定义上来看,数据可视化从外观层面来说是与图形、图像这些视觉元素密不可分,这也是数据可视化最为明显的特征。

而结合我们实际的生活与工作来说,数据可视化是一种以图形符号为主要表现形式,将不可见的、抽象的、复杂的、枯燥的、专业的、不直观的数据内容,有趣的、浅显的传递给用户的有效手段。用户可以通过这样的手段完成自己的目标(例如对选定范围内的数据进行分析,发现数据的周期与规律、迅速找到自己目标节点中的关键数值、对比几组数据以了解当下研究对象的情况等)这也是数据可视化最为明显的价值。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

2. 可视化发展简史

关于可视化的发展史上可追溯至 1950 年,当时人们利用计算机创建出了首批图形图表,可以说是数据可视化图表最为早期的雏形,而在 50-60 年代的可视化中又以查尔斯·约瑟夫·米纳德的《1812-1813 对俄战争中法军人力持续损失示意图》为代表。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

该图描绘了拿破仑的军队自离开波兰到俄罗斯边界后军力损失的状况,也是后世分析拿破仑对俄战争的重要数据分析资料,后来这种带状图被称为“桑基图”用来解释能量的流动。

而可视化真正被提到一个应用理论的高度是到了 1987 年布鲁斯·麦考梅克和马克沁·布朗所编写的美国国家科学基金会报告《Visualization in Scientific Computing》(科学计算之中的可视化),其意在强调了基于计算机的可视化技术方法的必要性,此时的概念已经与现在我们所接触的工作中的数据可视化是非常接近。

到了 90 年代初人们发起了一个称为“信息可视化”的研究领域旨在为许多应用领域(科学、商业、行政、财务、数字媒体)之中对于抽象的异质性数据集的分析工作提供支持,与前面提到的“科学可视化”交叉形成了现在耳熟能详的“数据可视化”,此时这个词汇才慢慢的被更多的专业领域的人所接受,并在之后互联网的不断发展中扩充着自己的分支。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

3. 为什么会使用数据可视化

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

目前大量开始使用视觉可视化的原因其实非常简单大致的原因可以分为需要处理的数据量太大了和人脑不够用了。

据不完全统计 IBM 公司每天有 2.5 亿字节数据的吞吐量,麻省理工学院的研究科学家 Andrew McAfee 和 Erik Brynjolfsson 教授指出,如今在互联网上传递的数据量比过去 20 年的总和还多,而且根据 IDC 预测,到 2025 年将有 163 万亿 GB 的数据。

这是非常惊人的,而这么多需求的数据量单凭人脑的计算能力和处理能力来说是完全无法与之匹配的,研究表明人脑很难同时处理 5 组以上的抽象数据,所以这种单线程的处理方式就决定了需要借助外力。

而对于用户尤其是决策层的用户来说在现实的工作场景中经常需要同时处理超过 5 组以上的数据并需要对其建立精准的分析模型以便于做出最准确的决策所以基于这样的需求,数据可视化设计氤氲而生。

4. 数据可视化的优势

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

基于数据可视化的需求来看,数据可视化的优势是显而易见的,可以概括为两点:认知减负和传递赋能。

认知减负是使用者在使用数据可视化工具时候的最直观感受,当所面对的庞大的、复杂的枯燥海量数据集变成了图像化、通俗化、形象化的视觉符号时,我们会本能的放下对于面对冰冷数据时候的抗拒和戒备,这是因为人对于一目了然更加接近自己熟悉的有趣事物的时候,会更为亲切和愿意去主动理解。而且被处理过、规划过的简洁直观表现形式,能更为直接的让使用者看到数据与数据之间的关联,进而分析出其潜在关系,在人对数据的认知这个环节上降低了识别成本和分析成本。

传递赋能上图像传递更接近人类最本能的获取信息的方式,比起文字来说图像更像是一个解密的步骤,通过解开文字描述这重“密码”将最本质的信息进行呈现,而且对比文字,图像所能够承载的信息其实更为广泛,而且人类读图的效率要远远高于阅读文字。

无论是一个约定俗成的语义符号形象还是符合语境的配色都能够起到比文字直白表述更为强烈的深入人心效果,并且图解的形式并不受限于语言的障碍,极大的降低了沟通成本。

5. 使用目标

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

基于用户的使用目标来说,使用数据可视化其实就像是一个侦探用“蛛网图”辅助自己梳理思绪进行破案的过程:将一些有关的,但是较为零散信息数据用一根根线索穿插起来,形成体系化的联系,方便使用者迅速把握各个节点之间的关系进行推导。

所以说我们在设计数据可视化的时候并不是对我们拿到的数据的无脑映射,而是要基于用户的目标经过一定的处理和优化后才能进行呈现,随时记住我们是给用户在打辅助,所以我们每一步的设计一定要基于用户的思考。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

用户的期望是能够高效、清晰、简洁地完成数据的对比、关键节点的查询、每组数据之间的分析等一系列交互,提升自己的工作效率,降低自己的学习和使用成本。

6. 应用场景

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

数据可视化的应用领域较为广泛涉及医疗、统计、管理、金融、娱乐、人工智能等一系列领域,在 UI 的设计中我们最常接触到的包括:PC 后台的数据概览、数据可视化大屏、游戏 UI、后台实时监控等。

设计师们的任务

当我们大致了解了数据可视化的历史、使用原因、优势、用户目标、应用领域后下面就要切入我们设计师最为关心的话题:我们在设计中的任务。

1. 设计难点

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

数据可视化作为一门跨领域的学科,本身对于从业者而言就有着一定的综合素质要求,但由于国内教育并没有垂直教学学科,所以在现在的阶段从业人员一部分由纯视觉设计专业的同学组成,另一部分由纯工科类型的专业的同学组成。

于是这就导致了非视觉设计师在进行设计时,会将全副精力放在强数据的准确性、合理性上,从而让视觉的易读性上有一定的损失,表现形式也较为单一枯燥,视觉感官较差,反观视觉设计师通常会将数据可视化在视觉表现形式上过度用力,虽然营造了很好的视觉体验,但是从其实用度、可用性上来说会大打折扣。

于是设计的难点很多时候就会集中在平衡视觉与实用之间的关系。

2. 设计目标

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

通过以上分析,不难看出设计的主要目标,而面对这句较为抽象的“把握设计与实用之间的平衡”其实无外乎也就是拆解到功能和视觉这两个方面。

从功能上来说,我的目标是提升用户的数据阅读效率、让用户能够迅速 Touch 到目标信息,提升交互效率,一切都是以结果为导向,以解决用户问题为导向,一定记住人们不愿意接受未处理过的数据。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

而从视觉上来说,我们的目标是处理好在视觉上各个模块之间的统一、透气关系,将数据进行可视化的同时尽量提升感官上的审美体验与传达上的有趣。

以上会作为后文中我们每一步设计的指导和检验的方式,从实际操作的维度上来说二者也并不是五十比五十的分配,遵循的原则是:体验一定要让位于功能,所以在视觉的层面发挥的空间其实需要比较克制。

案例制作

了解了数据可视化的设计难点,明确了数据可视化的设计目标,那么我下面进入我们最重点的环节:可视化页面案例制作,由于数据可视化的形式较多,这次我们以工作中经常接触得到的 PC 页面数据概览页为例。

1. 明确性质

同样的,细化到数据概览这个分支项目,我们同样需要明确了解其基础定义和性质,严格意义上来说数据概览部分属于 Dashboard design(仪表盘设计)的一种,其主要的目的和功能可分为分析和操作两块。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

所以从综合的角度来说数据概览部分可以理解为:

其它模块的摘要视图,并显示来自应用程序各个部分的关键信息,从这点上来说建议此模块可以在其余模块设计完后再进行设计,如此有利于设计师从一个全局的视角切入进行设计,理解上也会更加透彻,否则很可能会陷入在你设计其他模块的时候不断地返回对其进行修改的怪圈。

它也是核心功能、常用功能的快速操作助手和快捷页面跳转(有点类似于导航),交互功能的排布和关键信息的显示,其共同的要求点是显而易见的,即明确各个模块之间的层级,做好顺序、优先级排布。这就需要你对业务目标有一定的了解,记住,对业务目标不了解,你的设计将毫无意义。

你可以通过查询一些内部资料、报告、也可以询问产品经理等相关负责人,还可以通过用户调研得出,这里不展开说,在动手之前你需要搞清楚:各模块之间优先级如何、你需要在一张单独的图表内展示多少变量、想展示一段时间内的值是项目和项目之间还是组与组之间、每段变量中有多少关键数据需要展示等问题。

2. 定义模块优先级

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

如上图所示,在工作中我们接到需求的时候是面对一堆冗杂的数据集,组成了若干个模块,但是正如上文所说,我们并不能对其进行无脑的可视化映射,所以首先要做的就是要对各个模块进行优先级的梳理排序

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

明确了各个模块的优先级排布之后,我们开始对每一个单独模块进行可视化转化,即哪一个部分分别用什么类型的可视化形式表现,这一步非常类似于土地使用规划,当你在将土地划分完后,为每一块土地定义其使用类型。

3. 明确图表选择

想准确的将图表与所要表现的数据进行对应,需要了解图表本身所包含的基本元素。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

在这些元素中正常情况下一定在图表中的有:标题、时间范围、图形主体,经常出现的有:坐标系、图例、提示信息,有时候会有的有:切换选项和值域。

知道了这些重要的基础信息了,那么在面对这么多图表的时候我们该如何正确的选择来进行使用呢?

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

其实和之前说的一样:基于目的来进行思考,所谓的基于目的来进行思考也就是要明确你所确立的数据指标需要分析的维度,而日常使用的数据需要分析的维度无外乎:比较、构成、分布联系。

比较类图表

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

比较类图表应该是大家最为熟悉的范畴,第一时间能够想到的就是柱状图,这也是运用最为广泛的图表之一,经常出现在 PC 端之中,用于描述分类数据之间的对比,描述的数据可以是地区、品类甚至一个时间周期,但由于其扩展能力有限,所以一般不建议项目超过 12 条。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

条形图与柱状图类似,看上去只是交换了 X 轴与 Y 轴,功能和承载数据种类较为类似,但不同的是,条形所能承载的项目数量相对于柱状图而言更多,由于其优良的纵向延展性一般用于手机端较多,而且从上到下的阅读方式符合人眼阅读习惯,所以也会经常用于排行榜的设计中。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

分组条形图是条形图的衍生之一用于比较多个变量在不同区域之间的数量关系,比如当想比较同样一款衣服和鞋子在四个门店中的一个季度的营业额时就可以使用分组条形图。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

双向条形图表适合比较两组以上的分类数据比较,和分组条形图较为类似,但是由于自身外观特征更适合用于比较两组意义相反的数据,也正是如此,双向条形图的组内二级分类数量一般不要超过 3 条最好。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

折线图与前者最大的不同就在于在坐标轴中加入了连续类别这个概念,数据基于时间等因素变得动态了起来,注重变化趋势的展现。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

面积图是折线图的延伸,除了表示变化趋势之外还能比较所选范围内积累的值。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

玫瑰图应该算是可视化图表中的“网红”,因为我们从小学的课本中就知道它还有一个别称叫“南丁格尔玫瑰图”。它是一种圆形的直方图,使用半径长短表示数值大小,其特点就在于因为其独特的外观可以将数值之间的差距在视觉层面进行放大,和将坐标轴范围缩小来提升视觉上数值的碾压是一个道理,发布会吹水最爱,但是要注意的是这不是一个表示占比构成的图,因为玫瑰图的每一份角度是一样的,一定要和饼状图等图区分开来,它用来表示的还是数值与数值之间的大小

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

雷达图经常用于分析一些多维的性能数据、评分数据,经常打游戏的朋友应该不陌生,有多少五边形选手可以扣个 1,每一项指标越接近圆心说明状态越差,越向外说明越佳。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

子弹图用于比较当前数值与目标之间的关系,比如看当前业绩是否达标,也可以通过标记划分区域来进行更好的评估。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

漏斗图适用于业务流程比较规范、周期长、环节多的单流程单项分析,一定要有清晰的环节,比如监控买家从浏览到最后下单的数量统计以求得转化率,不适合无逻辑、无流程的分类对比。

构成类图表

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

构成类图表整体上来说主要用于观察部分和整体的占比关系,最经典的莫过于饼状图,这个不用多说,通过每一份半圆角度所占整个圆的大小来表示部分和整体的关系,但是由于其所占面积较大,经常会让视觉过于集中,影响注意力。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

相对于饼状图而言,环状图十分有效的避免的干扰视觉的问题,其本质是将饼图中间掏空,功能与饼图基本一致,但是视觉上做到了轻量化,目前在日常设计中较为常用。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

旭日图相当于前面二者的结合,适用于展示多层级数据的占比关系,距离圆心越近代表层级越高,下一层级的总和构成上一层级,存在一定的父子层级关系。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

堆叠面积图出了可以表达趋势外,其优势在于能够表达总量和分量的构成关系,堆叠面积图上的最大的面积代表了所有的数据量的总和,是一个整体。各个叠起来的面积表示各个数据量的大小。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

堆叠柱状图的优势在于它既可以表达一级分类的比较,同时还能看出二级分类在其一级分类中的占比,但是缺点在于二级分类并不是按照同一基准线对齐的,相比于堆叠面积图更为常用。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

瀑布图用表达两个数值之间的变化过程,过程值为正的时候,向上加,过程值为负的时候向下减。

分布联系类图表

分布联系类地图在这两年在国人的心中其实已经非常熟悉了,因为疫情今年的地图可视化的应用经常出现在我们的生活中,地图可以结合不同的表达方式:

可以结合散点、可以结合动画、还可以结合引导线以及热力图的方式,图的形式使用视具体的业务需求来定

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

最后就是气泡图,这是在查看分布关系中最为经典的视觉模型,用气泡的面积大小表示数量,结合辅助线可以更好地观察分布情况

4. 匹配图表 重构布局

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

当我们对每种图表的功能和使用范围有了一个较为明确的认知之后,下面我们就可以对我们之前所规划好的优先级的模块进行可视化形式(图表)的匹配了。

进行匹配过后,我们将对布局进行重构,整体重构需要遵循的原则是

  • 布局层级明确,首屏尽量曝光更多内容
  • 统一透气,具有呼吸感

布局层级明确,首屏尽量曝光更多内容

从首屏曝光更多内容来说,主要是因为基于分析类的数据概览工作场景和 Analytical dashboard 自身特征决定的,用户希望能够通过仅仅一屏的的大小进行对各类信息的情况有基本的把控,达到一眼全局的目的,其主要注意力都会放在首屏,所以我们需要尽可能的在首屏安排更多的信息。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

当然首屏内容也并不是越多越好,一般建议也尽量不要超过 7 组模块,而在层级明确这块儿主要是根据人眼阅读习惯所产生的优先级排布:正常情况下都是左上为优先级最高,而右下优先级较低,这是无数经典的眼动测试和设计总结产生的最常用结论,就不展开叙述了,所以当我们按照优先级、首屏曝光更多内容的原则进行处理后会得到如上图的布局。

统一透气 具有呼吸感

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

这主要是视觉层面的问题,统一透气的要求在首页概览中可以依靠栅格系统来解决,它可以有效的保持页面布局一致性,为页面建立基础布局框架,将页面中的所有元素都捆绑在一个体系之中,同时还能有效解决适配问题。

5. 模块拆解

完成了大规划之后,下面我们开始对一个一个的模块进行拆解,同样的以目标指导设计,边设计边验证

层级明确 突出重点

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

和大规划一样,单独到每一个图表同样要时刻注意层级的梳理,销售渠道部分很明确应该是运用一个折线图的形式,由于业务目标上来说更关注销售额而不是销售额和订单数的比较,所以我们选用了一个带有切换选项的折线图形式。

但是我们会很容易发现在读图时会出现较大的视觉干扰,并没有能够很好地突出重点信息,视觉层级不清晰、混乱。

于是我们对没有重点的视觉层级进行梳理,像之前划分模块那样,对视觉元素进行高、中、低的 P0、P1、P2 的设定,提升易读性

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

P0:层级最高的自然是重点信息突出部分,所以我们需要在其之上做加法,给予内容异形悬停样式进行具体强调,配合投影加强视觉效果,有效传递用户,拉开与别的元素的层级,同时数据部分用特殊字体并适当加大字号进行设计,方便用户第一时间能够看到所要强调的数据具体值。

P1: 其次就是主体图形部分,这是用户需要看到的重要部分,在使用场景中会长时间盯视,所以采用更低的明度与更高的饱和色颜色确保易读性,但是也不致于会让用户太晃眼产生视觉疲劳,最后考虑到该模块所处位置属于页面中较为核心的地带,给予一定的颜色透明度渐变装饰,在强化主体图形的同时不致于太显单薄。

P2:前两者都是一定程度的做加法,那么层级最低的元素需要开始做减法,此时轴线、刻度、切换选项等元素需要弱化视觉层级,降低透明度,尤其是背后的刻度线与背景的明度对比大概控制在 1.6:1 上较为合适。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

销售总额、订单数、渠道数同属于一个数据统计的范畴,最忌讳的就是把以上提供的三个信息给做平,让用户抓不住重点,面对这样的情况还是一样,确立需要突出的重点信息给予特殊文字和大小的设计,选择合适的主体图形。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

但在这里需要注意的是由于在这个模块中 P0 是金额数、订单数、渠道数这些重要值,所以可视化图形需要适当为其让步,不要放在阅读中心位置,按照 P1 来进行处理,而订单数、转换率这样的标题就成了 P2 需要适当降低透明度和文字大小,不干扰主要信息的表达。

统一营造

说到统一,最先想到的一定是色彩,无非也就是需要处理好对立统一关系,而这其中统一的比例又要大于对立,配色上尽量选用同类色系,不宜太过花哨,尤其是对于 B 端而言,建议在可能的情况下不要超过 5 种,而且主色、辅助色,对比色的比例建议控制在 6:3:1 的比例(但不绝对),既能做到有所区别又不致于过于绚丽干扰视觉。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

你的主色不一定要迁就你的品牌色,但是一定要是如上文说的尽量低明度高饱和,以适应于长时间的注视。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

颜色过后就是字体,字体的使用需要极为谨慎,如果可以尽量只出现一种字体(但不要超过三种),并且只采用基础字体,正常情况下都是将其作为一个需要被降噪了的视觉元素来对待(比如降低透明度),在 PC 端中尽量也不要出现较多不同的字号、字重,造成没有必要的视觉干扰。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

除了字体之外,在统一感的营造上卡片的布局结构也需要尽量保持一致,这是为了提升易用性,同一个产品内,相同布局会给予用户相同交互、相同功能的暗示,也更容易培养用户习惯,提升操作效率。

呼吸适中

呼吸感是留白的艺术,很考验设计师的排版能力,在单独的模块内,元素与元素之间尽量不要用实线进行间隔,可以的话利用亲密性原则通过元素间距的远近进行布局。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

而柱状图的设计上,柱与柱之间的间距最好大于柱宽的 1.5 倍,这样才显得视觉上较为透气,不致于太臃肿。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

最后就是模块中的边距留白部分,这点一定要重视,不然不仅你的版心会变散,还会严重影响你的页面呼吸感。

细节处理

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

细节上首先要说的就是横纵坐标轴上的文字,上面的文字一定不要过长,最好的方式是将文字进行精简。然后横、竖排对齐处理,如果实在不能精简那么再进行斜排的方式。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

第二点就是横纵坐标轴有的时候会因为需要展示的数据过多而过于密集影响阅读,这个时候可以采用适当增加一个值域的划定的方式来进行坐标间距的缩放。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

第三点就是,在排行榜等模块可以适当增加一些小设计,比如金、银、铜的设计,提升情感化元素的融入。

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

第四点就是,尽量不要选用一些 3D 的酷炫效果来做可视化,因为这种效果很容易对数据进行遮挡和扭曲,不是非常适用于高效阅读,也不适合 PC 页面上的交互,而且也不利于开发,比较得不偿失。

6. 组装自检

8000 字深度长文!B端数据可视化设计指南(信息图表篇)

当所有的模块设计完成后,像拼高达一样进行组装,组装完成后适当调整其过于干扰视觉的地方,然后进行自检。

自检不只是从检查你的视觉、你的模块间的布局,更重要的是带入使用角色来进行检查,你可以模仿用户使用中的各种需求场景,对已经制作好的页面进行交互和阅读,看是否能够快速高效地完成使用目标。

当然除了自己之外,你还能在有条件的情况下找专家用户进行使用,即使记录使用中存在的问题并及时进行调整,当初步使用大致无问题后便可以交付。


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



文章来源:优设    作者:肃静、

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

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

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




B端设计师如何快速了解业务

seo达人


1.查阅报告“知”行业

如果是之前从未接触的新业务,我们可以通过市面上的行业报告,来对其有一个宏观的认知,因为在行业报告中,会提到 SaaS 产品相关行业的发展状态政策导向以及未来的发展趋势。

比如在 艾瑞网的 《2020年中国企业级 SaaS 行业研究报告》 当中,通过报告你能了解到 SaaS 行业究竟是为何进行快速的发展,并且在未来几年的发展趋势,并且通过报告,能够构建起你对整个行业的宏观认知。甚至找到行业当中的头部产品,同时能够对其进行体验。(当然如果没找到,可以使用我们的B端竞品书签~)

图片

行业报告相关网站:

艾瑞:http://report.iresearch.cn/

易观:https://www.analysys.cn/

 

2.通过竞品“学”词汇

专业词汇它是B端设计师的一个门槛,在实际工作沟通当中都需要通过专业词汇来进行准确的描述。比如在CRM产品当中,我们必须要了解:公海池、商机、线索、跟进记录 等一些基本词汇,而词汇的背后往往是一个较为庞大的功能,又或者是产品当中的深层逻辑。

其实这就如同我们学习英语一样,只有先学习“单词” 才会有后面的“短语以及语法”,而行业当中,其实是有类似的“英语词典”来帮助我们进行学习。

还是以CRM为例,行业当中较为头部的竞品为:纷享销客、销售易

通过竞品的官网、产品内部,我们可以寻找到“用户手册、帮助中心”等模块,这里面就会有相应的专业词汇的讲解,我们可以通过 竞品的产品对其用户的解释,也让我们作为用户,对于该模块会有更深的理解。

图片

你可以自己学者找找,找不到我这里也提供了网站链接

纷享销客帮助文档:https://www.fxiaoke.com/ap/datacenter/

销售易帮助文档:https://www.xiaoshouyi.com/service/help

 

3.销售客服“理”流程

业务流程往往是一件复杂的事情,因为不同的产品其流程的侧重点也会不尽相同。但可以利用官网去了解该产品更擅长哪方面的功能模块(在对B端产品的官网设计当中,都会突出强调产品的特点,进而提升转化)。比如在纷享销客与销售易的官网首页当中,产品模块都有着这样的一些不同点:

图片

对于这些不同点,我们可以利用B端产品功能演示的形式,来让经验丰富的销售人员来进行解答。

比如在面对销售易的销售人员时,我们可以问:“我对比过你和纷享销客的产品功能,你们的销售云和纷享销客的销售管理在流程上有什么区别,有哪些特点呢?”

而我们可以通过销售人员的解答,清晰的了解到两者之间的差别,以便于为我们在之后接到类似需求时有所帮助。

当然一定要在销售人员演示结束后说上感谢,因为“利用”别人本身不太好。

 

4.试用产品“看”结构

试用往往是在真实的环境下对该产品进行体验,试用可能是销售人员给到你相应的体验测试账号,也有可能是让你注册一个测试环境。但要记住并不是所有的系统都有试用的功能,有些产品你需要通过“间接”的方式才能体验(间接指的是通过 企业微信、钉钉、飞书 这样的平台注册团队 登录获得产品的体验环境)

我见过很多设计师试用产品就是一味的点点点,像个无头苍蝇。

设计师应该根据上一步销售人员演示的流程进行相应的页面梳理,通过截图将该产品的主流程进行截图。最终将页面流程静态的还原到设计图上,这样做有两点好处:

  • 1.在时候遇到同类型需求时,能够快速了解竞品的功能设计思路
  • 2.帮助我们在产品的后续更新迭代,有了可以参考的版本

 

结语

通过以上四个步骤,基本能够对一个B端新业务有所认知,希望能够对你有所帮助。

 

原文链接:CE青年(公众号)

作者:CE青年

转载请注明:学UI网》B端设计师如何快速了解业务

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

截屏2021-05-13 上午11.41.03.png


文章来源:csdn

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

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




学好这个方法,可以解决80%的Logo设计

seo达人



设计logo你用过最多的手法是哪一种?加法是logo图形设计中最主流的设计方法,即把两个或两个以上的图形元素,结合成一个全新的图形,每个做过logo的设计师应该都用过这个方法。

 

前不久,一个朋友发了他公司新设计的logo给我看,问我怎么样?他的公司叫达志文化,主要经营与教育相关的业务,他发来的Logo长这样:

好不好我就不评价了,我想说的是,logo设计中的加法并不是简单地把几个元素相加就可以了,讲究的地方其实有很多,葱爷分享几点自己的经验。
1

 一、有哪些比较主流的加法?

01.品牌名首字母相加

可以是大写字母相加、也可以是小写字母相加,关键看哪一种形态更容易结合出高质量的图形,结合的方式常用的有:

①叠加,比如L V、圣罗兰的Logo。

 

 

②共用笔画,比如服装品牌UR。

 

以及陈幼坚最近为香港公开大学设计的Logo也是这种做法。

 

 

③融合,比如交通银行的Logo把首字母c做字母b的负形。

 

比如李宁的Logo首用字母L和N融合成一个类似红旗飘扬的图形。

 

④创意组合,比如LG的Logo用L和G组合成一个笑脸。

 

 

大众汽车的Logo用V和W组合成类似三个胜利手势的图形。

 

02.品牌名的简称相加

这种做法适合比较简洁的文字,且通常为两个字相加,加法的组合形式与字母相加差不多,比如北京大学的Logo是用“北大”二字组合而成。

 

我在大学期间为北部湾艺术研究院设计的Logo,则是用“北”字和“艺”字融合而成的。

 

 

03.品牌名首字母加代表行业属性的元素

使用这种做法的品牌非常多,比如抖音的Logo是用小写字母d加音符图形融合而成的。

 

 

饿了么的Logo是用小写字母e加吃豆人的图形融合而成的。

 

 

04.品牌名“首字”或关键字加代表行业属性的元素

比较典型的代表案例是中国银行和工商银行的Logo,分别用“中”字与“工”字加铜钱图形结合而成。

 

 

再比如中国南方电网的logo,是用“电”字结合电线、电线杆而成。

 

 

05.品牌名中提到的元素加代表行业属性的元素

比如西瓜视频的Logo是用西瓜图形结合视频符号设计出来的。

 

 

贝壳找房的Logo是用贝壳图形结合房屋图形得来了的。

 

06.代表行业属性的元素相加

比如网易云音乐的logo是用音符图形加上唱片图形。

 

比如葱爷以前为一个饰品品牌设计的logo,是用四叶草图形与星光图形结合。

 

 

二、用加法设计Logo有哪些讲究?

01.美观

logo设计的最基本条件是要美观,因为这个符号代表了一个企业、一个品牌的形象和精神面貌。另外,这个符号以后还会出现在品牌对内对外的绝大部分物料、媒体上,如果logo不好看,就会影响到所有的其他设计。

 

如何让自己设计的logo图形好看呢?提升自己的审美当然是最重要的,比如每天都要看一些优秀的logo设计作品,还可以多看一些图形、图案作品等等,当然这是一个需要慢慢积累的过程。

而想快速知道自己设计logo好看不好看,你可以把自己的logo与众多优秀的logo放在一起,如果自己的logo明显不“合群”,那多半是你的logo设计不够好看、不够专业,那么你就要继续尝试其他的图形组合方式,或者是优化一些影响图形美观的细节,比如线条、轮廓、配色等。

例如几年前我给一个叫“音眸”的服装品牌设计了一个logo,也是用了加法,我用品牌名相关的两个元素:高音符号和眼睛做结合,刚开始是这么结合的:

 

 

但感觉造型不是很美观,于是我又进行了其他尝试:

 

这种结合方式感觉更好一些,但图形的比例以及线条的细节不到位,所以我又继续做了优化,从而得到了最终的方案:

 02.要具有行业属性

例如文章开头列举的达志文化logo,就只是用字母“D”和“Z”做了简单的相加,这样的图形凭什么说他是达志文化的logo呢?任何一个品牌字母是D和Z开头的品牌都可以这么做。

所以,设计出来的新图形一定要具有该行业的气质和特点,例如李宁旧的Logo是由其品牌首字母L和N组合而成的,且组合出来的图形很有动感、很简洁,这就贴合了运动品牌的属性,而不是直接用两个简单的字母加在一起就完事了。

 

如果logo图形只是用字母或文字简单组合而成,那么这些文字的字体则一定要与该行业的气质相符,比如LV的logo是由品牌首字母的简单相加,并没其他深刻的含义,但由于其使用的罗马体具有优雅、高端、经典等特质,以及图形也还算好看、独特,所以它们的logo总的来说还是符合行业属性的。

 

还有一种处理方式是,除了文字以外可以再融入一个能体现该品牌行业性质的元素,比如LG的logo是用品牌首字母L和G组合成了一个笑脸图案,寓意热情服务、客户至上,这就让这个Logo有了内涵。

 

我设计的北部湾艺术研究院logo图形,刚开始的方案是这样的:

 

虽然也是把“北”字与“艺”字完美的结合起来的,但是该图形在气质上与艺术学院并没什么联系,所以后来我在此基础上加上了传统的回形纹,传统艺术的感觉就加强了。

 

03.可识别

图形中融合的几个主要元素最好能清晰、易识别,而不是只有设计师自己能看出来。有些设计师为了让logo图的寓意尽量丰富,把五六个图形融入其中,结果是别人一个都看不出来,这就很没必要,因为一个图形融合的元素太多很容易做成“四不像”,而且logo设计并不是寓意越多就越好,如果寓意足够准确、可识别性足够高,那么一两个足以,否则就算再多也是徒劳。

比如中国银行的Logo图形,“中”字代表中国,铜钱代表银行,简单易懂、易识别。

 

再比如耐克的logo图形就是一把勾。

 

前段时间长隆要我们帮设计一款“奇妙动物直播间”的logo,我也是使用了加法,创意是用动物掌印结合视频播放符号,刚开始的方案是这样:

 

为了照顾完整的圆形外轮廓,我把整个掌印图形都所在圆内,但这样做就导致了,三角图形没有在圆形的正中央,于是弱化了视频播放符号的识别性,所以后来我把整个掌印图形向右移动冲出了圆圈,这么做不仅加强了识别性,而且使整个图形变得更特别。

 

 

加法可以让logo图形的设计有理可依、有迹可循,可以增加logo设计的合理性,所以很受设计师和客户的青睐,但加法只是手段而不是目的,所以,在使用加法的时候也千万别忘了logo设计的一些原则性问题,比如:美观性、简约性、相关性、原创性等。

 

原文地址:站酷 

作者:葱爷

 转载请注明:学UI网》学好这个方法,可以解决80%的Logo设计

好的表格信息展示都有这三个特征

资深UI设计者

表格是B端产品中出现最高频的模块之一,我们认为良好呈现信息的表格应当做到疏密适度、高效扫视、精简克制。

前言


表格作为组织整理数据的手段,可以有效的向用户展示数据信息,是B端产品中出现最高频的模块之一。

下图为典型的B端表格示例:



用户主要通过表格浏览获取信息、对数据进行筛选、排序以及相关业务处理等更多复杂操作、对比数据的差异与变化(关联和区别)。好的表格信息展示设计,应当是能够辅助用户高效便捷的实现以上场景中的诉求。

今天我们就来讨论表格设计中一个重要的问题——【应该如何考虑表格信息展示】。首先抛出结论,我们认为良好呈现信息的表格应当做到疏密适度、高效扫视、精简克制。


///


一、疏密适度


常见的表格信息包含文本、标签、状态样式、数值统计图表、关键信息Icon等。表格单元格是信息填充的基本单元,行高和列宽的定义决定了表格信息的疏密程度,进而决定了表格给用户的直观感受,因而下面分别从行高和列宽两个方向来探讨表格信息展示如何疏密适度。



1、定义合理的表格行高


a、行高模数设定

在具体设定表格行高时,由于表格中以文字信息为主,我认为可以参考文字排版的常用做法,将整个表格的行高分成文字行高、文字与分割线间距离,即上下间距两部分来考虑。文字行高可以设定为字号的1.2~1.8倍,文字与分割线间距离可以设定为字号的1~1.5倍。分为这样的两部分也比较符合开发同学写代码时的习惯(多行行高同理去设定)。



根据用户场景的不同,来选择模数倍数,需保证系统内使用统一的模数。比如,针对用户快速浏览获取大量数据场景时,可以选择1.2倍作为模数,列表更为紧凑,同样扫视范围内,可获取更多信息。


b、为小屏幕考虑一屏显示的行数

表格行高决定屏幕内能呈现的行数,即用户在一屏内能获取信息的数量,主要影响用户纵向对比数据的效率。对于1920*1020(包含该分辨率)以上的大屏用户,对于一屏显示行数的感知不强,但对于1366×768、1280*720等这类小屏,显示行数有限,用户进行纵向数据对比的效率就会有所降低。在设计前,应当充分了解目标用户的行为诉求,了解目标用户设备屏幕分辨率的占比分布情况,有针对性的设置行高。


c、用户自定义行高的场景

B端产品的特点之一是通用化,覆盖用户角色多样。然而用户个体对于表格信息呈现密度的诉求经常是有所差异的。比如个人视力的原因,有些用户喜欢表格行高值大一些,看起来舒适透气,便于阅读。而有些平台用户由于很熟悉线下excel表格模式,希望线上的表格也尽可能像excel那样紧凑,以便他们在一屏内看到更多的数据,进行对比,提升工作效率。产品为了让不同用户都能获得较好的体验,可以考虑把表格疏密度的设置开放给用户,建议不是完全开放给用户去调整尺寸,而是给出一定阶梯度的快速选项,例如舒适、标准、紧凑三种高度来满足用户需求。

例如,Gmail提供默认/标准/紧凑三种表格密度设置,如图:



2、灵活扩展的横向空间


通过对表格固定位置与列宽的调整,扩大表格数据空间,使信息不局促,空间更透气,保证横向扫视易读性。


a、列宽极限值设定

设计师需要根据表格承载内容定义表格的列宽,应包含最大/最小/默认列宽的定义以及使用规则。

我推荐的一个规则是:

规则1:当相对列少【浏览器宽度-页面其他模块 > 全部列的默认宽度和】,则各个列自动等比拉伸,撑满屏幕;

规则2:当相对列多【浏览器宽度-页面其他模块 < 全部列的默认宽度和】,则出横向滚动条,每列宽度为默认宽。

另外需注意最小值设定时应避免信息展示出现【对联式表格】。对联式表格最大的问题在于,一屏内展示的行数有限,当用户纵向对比数据时,需往复滚动多次,记忆压力大;横向扫视时,阅读视线不能一直保持左右横向预览,而是不停上下左右切换,使用体验不佳。



b、横向『偷取』屏幕外空间、行高模数设定

当压缩列宽也无法在有限空间内展示大量的数据指标列时,我们可以借助横向滚动来『偷取』屏幕外更多空间。横向滚动需用户拖动滚动条进行浏览,有一定操作成本,所以要结合业务实际情况选用是否利用屏幕外横向空间。

随着行和列的增加,用户的瞬时记忆会达到极限,超过“7±2原则”的范围,用户需要依靠辅助信息去阅读表格内的数据,防止遗忘某列数据的意义。因而当表格数据列较多横向滚动时,建议为用户固定重要信息列,如标题列、操作列。同时用户浏览表格时是符合F型扫视原则的,建议固定列显示在表格左侧,方便用户从左至右浏览数据、从上至下对比数据时能够清晰定位当前所浏览数据的主体是什么,同时可根据需要快速发起操作。



同理,用户拖拽纵向滚动条来阅读数据时,可固定表格的表头,帮助用户在阅读过程中清晰知晓单元格数据的意义。


c、用户自定义展示信息

针对需展示大量数据的情景,我们除了【偷取】屏幕外空间外,可以根据B端产品提供的数据表格是覆盖全部用户角色的全量数据的特点,让不同用户角色来自定义想要浏览的信息,从而提升表格的可读性。下图为百度信息流推广平台的自定义列功能,用户可根据需要选择展示的数据列,系统将在用户完成选择后,主动帮用户保存自定义内容,下次登录后,表格依然按照用户定义的数据来展示。



///


二、高效扫视


无论是在表格中要明确的定位数据,还是顺序阅读,高效扫视都是B端用户一个很重要的诉求,我们在设计表格时可尝试一些有效手段提升用户浏览获取信息的效率。


1、合理的对齐方式


数据信息本身包含多种格式,可遵守一个基本原则即文字左对齐,符合从左到右的阅读习惯;数据信息右对齐,方便数据大小的直观对比。

具体对齐方式可参考我们建议的方式:

文本字段:可点击字段、普通文本类、数字、字母等,长短参差不齐,左对齐;

格式化字段:日期、时间、部分枚举类等,字符数一致且较短的,左对齐。

数据字段:金额、数据、百分比。带小数点等数据,方便对比为主,右对齐。



2、去除视觉杂音,强调对比关系


a、正确使用分割线,实现对表格行与列的强调

横向分割线可强调行内信息的连续性。垂直分割线在缩减元素之间的距离后也能区分不同元素,更好的强调纵向数据对比。但只要遵循良好的对齐方式,通常不展示纵向分割线,避免信息干扰。因而表格中通常仅使用横向分割线和底色分割,提升表格阅读效率。



b、斑马线作用有限

斑马线即隔行(列)变色。它能让行(列)间界限更为明显,但由于与分割线的作用类似,起到的作用有限,可针对不同场景酌情考虑是否使用。比如针对不同类型的数据(如总和、平均值)使用不同底色来区分,可以更突出强调该数据。要注意的是,隔行(列)换色的两种颜色不能反差过大,否则看来太“跳跃”。

对同一类数据而言,分割线就已经能够明显区隔,所以可不使用斑马线,但需要给出单行的悬浮状态,强化横向导视,避免出现列数过多引起数据错行的问题。



3、突显重要内容的视觉重量


前面我们提到表格呈现的数据信息除文本外,还有其它一些可视化数据。可视化一方面提升了列表视觉表现力,增加差异化,另一方面让内容更加突出,提升阅读效率。例如:数据列中数据异常时,最好可以醒目的形式突显,让用户一进入页面就能快速注意到异常状况。



///


三、精简克制


体验好的表格一定是克制的,克制应表现在信息的适度隐藏以及内容折行与截断展示原则。


1、适度隐藏信息


a、隐藏低频操作

当表头需要承载排序、表头筛选、提示等功能时,不建议一股脑的将所有功能展示出来。用户对表头的诉求是定位数据指标﹥执行操作的,因此可根据具体业务定义展示哪些操作,将其它操作隐藏,有需求时用户主动触发再展示。比如,百度搜索推广平台的推广管理页面提供了全局筛选,所以表头筛选对于用户而言是相对低频的操作,我们选择隐藏表头筛选的图标,当用户鼠标HOVER表头单元格时再展示。



对于表格行内的操作我们也应当进行优先级排序,为用户专门设置操作列展示高频核心的操作,其它相对低频的次要操作可隐藏在相关数据单元格中,用户有诉求时hover对应单元格即可快速发起操作。



b、隐藏辅助信息

表格中的有些数据指标是综合纬度的,当用户关注点定位于该指标时,需要通过细分数据来理解、分析。指标的细分纬度信息虽能起到辅助用户更好理解数据指标的作用,但如果全部拿出来在表格列展示,会让表格变得臃肿不易读,此时可以考虑采取一定设计手段去隐藏这些信息,把触发展示的自由度交给用户,也更符合用户逐级查看的场景。例如,百度搜索推广平台中关键词列表中,质量度指标是由多条数据共同决定的,我们采用了将细分指标聚合在气泡卡片中,当用户HOVER质量度得分数据时展示出来。



再比如,有父子层级关系的数据,可以通过父子折叠表格将子信息默认隐藏,用户根据需要,去展开查看详细的子信息。



2、设定折行与截断规则


B 端业务的数据信息复杂多样,信息内容的长度高度是多样不可控的,很多内容会超出我们限定的最大列宽,最大列高,我们应当给出折行与截断原则去约束内容的展示,而非总是为具体情况而做特殊设计,破坏体验的一致性。

截断折行原则设定时要细分,不能简单粗暴的一刀切,比如一行截断这种,如日期、时间等固定格式内容,拖动列宽后文字应折行而非截断展示,避免影响用户误读。再比如很多业务实体标题字段是格式化的,即标题前面部分可能都是一致的,这时候如果简单的截断,用户就需要逐一Hover才能找到定位到要找的数据。因而折行与截断原则,我们建议是给出三种:单行截断、双行截断以及自适应截断,根据具体业务情景选择。

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


文章来源:站酷    作者:百度MEUX

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

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

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


《2021年第一季度民用航空业移动端趋势分析报告》

资深UI设计者



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


文章来源:站酷    作者:简立方SimpleUX 

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

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

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


「感知性模式设计」是什么?

资深UI设计者

总的来说,所谓的感知性模式就是物体或者物件的一种外在的呈现而给人的感觉或者感受。例如同样的一个电脑桌上都有电脑、鼠标、或者其他的物件摆设,但根据不同人的使用给人的感觉是完全不同的,或是凌乱、或是整洁、或是简约,而更直观的差异可能来源于这些物件的样式、材料、颜色、纹理的不同而传递出来的视觉感知,

如果沿用到互联网方面的设计,那么感知性模式的例子可能包括:文字信息、版式、配色、布局、插图、图标、形状纹理、间距、交互或者动画等等,这些都作为具体方式来表达感知性设计。

说到这里,你可能会认为感知性设计是一个纯粹的外在视觉表现,但想要完全的得到一些成效,更多需要把这个事情融入到品牌的核心中,随着产品的发展而发展,进而在众多的同类此产品中脱颖而出。

感知性模式较强的产品例子

案例一:微信

微信作为一个超过十亿用户的产品,随着版本的不断迭代,功能也越来越强大,因此从产品体验上来说也可能会给人一种臃肿的感受。但微信整体的感知性模式的设计是非常清晰的,从桌面 APP 的 logo,再到内页呈现的图标、颜色、按钮样式、交互反馈等等的设计都是统一性很好的设计。

腾讯高手都在学的「感知性模式设计」是什么?

案例二:Instagram

Instagram 作为全球热度最高的图片分享社区,自始自终都有着非常明显的感知性,整体 APP 的简洁性设计让用户更加专注于内容本身,似有似无的品牌蓝色似乎已经牢牢融入了用户的大脑中,这种感知性无需被刻意放大,但就在潜移默化中用户就能感受到。

腾讯高手都在学的「感知性模式设计」是什么?

案例三:抖音

作为目前国内最热的短视频平台,抖音的感知性模式已经深入的印在用户的脑里,我认为抖音主要在以下三个方面让用户记住了 TA:1.品牌属性,抖音的品牌属性就是用最简单的方式让用户记住了 ta,通过 APP图标、闪屏、发起按钮的图形及品牌色的串联;2.内容属性,具有自己平台气质的内容特性,抖音在最早期主打的“潮酷”类的视频让它跟快手做了明确的区分;3.体验属性,大胆的全屏滑动视频交互很好的结合了手机的体验方式。

腾讯高手都在学的「感知性模式设计」是什么?

感知性模式的作用

1. 有助于品牌形象传递

在同一个领域中的产品,在功能上大多会具有一定的趋同性,而由于这几年的扁平化风格盛行,更把产品之间的类同性推向极致。因此更需要通过感知性模式的设计来进行区分,这种区分不仅仅只是视觉上的差异,更多是来自于产品者对于自己产品方向的把控。

书中提到 Spotify 的例子,Spotify 给人感觉是温暖的、私人的,虽然月活跃量已经超过一亿,但给用户的感受仍然是独特的,除了功能之外,主要在于整体的图形样式、颜色搭配(黑绿的品牌色比例把控)、交互中微妙而平静的感觉,以及排版上传递出来的感受。

从上面这个案例来说,基础体验是用户值得参与的一个重要环节,但感知性模式的设计更多是来源于产品者想要给用户传递什么样的品牌性格或品牌核心,Spotify 的静谧性及沉浸式体验,这是 Spotify 设计师想要传递出来的品牌核心

2. 感知性模式通过界面传递品牌

感性性模式的品牌传递主要是通过界面或者运营调性来让用户得到感知,并且让人记住。在界面上想要让用户记住我们的产品,更多的是需要思考三个关键点:设计的独特性;设计的辨识性;设计的区分度。

设计的独特性

设计的独特性往往是通过我们界面的排版、图标、图像、交互体验方式、交互措辞等等一系列的内容来奠定。这些内容我们常常可以在国外的软件中看到很多不错的案例。

还是以 Instagram 作为案例来说,ins 风的极简设计是一种贯彻始终的独特性存在,除了设计界面本身的研究之外,还在内容上下足了功夫。以照片浏览来说,始终坚持大图的体验方式,保证一屏内的沉浸度,而非为了效率,这与 Instagram 一直具有较高的照片质量密不可分。

腾讯高手都在学的「感知性模式设计」是什么?

设计的辨识性

辨识性的可打磨方式有很多种,以图标作为一个基础的案例来说,我们在设计图标的时候是否有结合整体产品的性格去思考并且设计,并且深入打磨。简单的区分,我们可以从风格(例如:简洁的、有趣的、硬朗的、柔软的等等),更深入的内容就是需要思考如何传递品牌感,以及将图形与品牌理念、产品性格进行结合,通过设计贯彻品牌辨识性。

以 YouTube 这个 APP 的图标作为案例,设计师在设计时更多是希望表达整体 APP 设计的简洁性,弱化图形对于内容的影响,因此在整体坚持了三个核心关键点:简约、细线、普识。

腾讯高手都在学的「感知性模式设计」是什么?

设计的区分度

在目前趋同性的主潮流之下,如何把握好产品设计的区分度变得尤为关键,也就是说,当用户在看我们产品的时候会不会乍一眼认为是另一个产品。区分度的把握往往来源于品牌对于颜色的选择,我们在定义色调之前需要对主流竞品做一个分析,从中找出属于我们的区分度,并且尽量避免重合性。

以现在流行的电商 APP 为案例,很大电商平台的设计大多类似,在品牌色的选择上则尤为重要,因此需要尽量避免具有耦合性。

腾讯高手都在学的「感知性模式设计」是什么?

让设计系统更加连贯

我们在产品设计中想要把所有的模块或者组件做得一模一样几乎是不可能的,但我们可以利用感知性模式的设计进行内容模块的渗透,让用户对于整体的感受感知是一致的。

以 material design 的设计系统为案例,他所确定的是一个规则,而并不是任何的模块或者任何的图标都是一样的、无差别的,如果都完全长得一样会让设计变得单调、无差异性,通过设计准则来限定整体的图形风格,应用在不同的位置让用户从视觉角度感知到风格的一致性,这样也可以让整体的体验更连贯。

Material design 的设计准则

富有表现力

为了突出 Material Theming 必须提供的功能,每个 Material 研究都表达了一个不同的品牌。

各种各样的

为确保 material 主题化和组件满足尽可能多的产品需求,material 研究代表了不同类型的产品。

基于现实

为了尽可能地复制真实产品,每项研究都会识别用户、显示功能用户流并应用现实世界的限制。

腾讯高手都在学的「感知性模式设计」是什么?

感知性模式的探索与思考

我们在日常设计功能性模块更多的是考虑到用户对于产品的体验感受,而感知性模块则是我们想要用户在这里获得什么品牌感知,通过品牌结合视觉设计系统给用户带来产品独特的性格及个性化氛围。

对于探索感知性设计的方法也有很多,目前比较流行的技巧主要有:情绪板、样式叠片、元素拼贴。无论是哪种方式,都没有唯一的答案,更多是利用这些方法在不断的尝试中探索到属于自我品牌的感知。

情绪板

情绪板是一种较为轻量的风格探索方法,在这个过程中往往不需要花费过多的精力,我们需要做的就是把统一或者接近类型的图片进行重新整合,得出我们想要表达的视觉感受即可。

情绪版属于比较前期的视觉品牌调性探索,在整体的颜色、排版上也都可以利用情绪板来获得初步的答案,如果想要再往深一步,可能则需要样式叠片的方式。

腾讯高手都在学的「感知性模式设计」是什么?

样式叠片

给予情绪板获得的大致品牌方向之后,便可以利用样式叠片的方式来进行更精细化的探究,我们可以用一种或多种不同的样式叠片来表达,但是希望在截取这些内容的时候要记得保持控件、组件、颜色、字体等等内容的一致性,避免差别性较大,形成不了统一的视觉系统。

腾讯高手都在学的「感知性模式设计」是什么?

元素拼贴

从书中讲到的大体概念是:将界面元素等内容拼贴在一起,从而达到设计稿初稿的雏形感受。这个方法可以比较敏捷的对需求方进行试探,但相比上面 2 种方法需要花费更多的时间及精力,同时这个方法出来的内容也比较偏向高保真。

腾讯高手都在学的「感知性模式设计」是什么?

从表面上来看,这三种方法似乎都可以帮助我们更好的进行设计,没有太大的差异化,不过从本质上来看,这三个方法影响的是我们设计初期输出的保真程度,从情绪版到样式叠片再到元素拼贴似乎是一个越来越保真的方式,我们可以选择其中一种,或者 2 种结合来进行表现。

平衡品牌性与一致性

过多的个性化设计,会削弱整体的品牌感,同样,如果设计的内容需要全部都一模一样的规范,也会扼杀设计的品牌感的创造性。因此,在感知性设计的概念下,一致性设计不是一味的复用,不求变通,而是通过整体统一的理念,允许个性化设计的存在,这样既满足部分模块的独特视觉表现又并不影响品牌传递。

举个例子

例如外面在设计一个完整的 APP 时,我们已经规范好了大体的基础视觉规范,在不影响这个规范的前提下,我们针对部分模块,例如福利类、游戏类,这种比较偏运营的设计界面,我们可以考虑有更丰富的颜色、图形等视觉表现,但前提在于是否符合基础规范的设定,如果符合那我们完全可以对这些类型进行个性化设计。

如果没有打破常规的设计方式,固化的追求一致性的设计,那么它就会变得普通、僵化,感知性设计的存在就是让我们在允许的范围内追求更不一样的设计,鼓励设计师积极探索更多的可能性,好的设计体系既能体现品牌的一致性也能表达出创造性。

由于感知性模式的相关设计,容易被当作只是样式或者主题化皮肤设计,很多人会认为这方面的设计比优化交互流程更容易些。在这种状况下,临时的业务经常会去挑战产品的品牌性和规范性,综合这 2 方面的原因,我们需要随时调整我们对于感知性模式的策略。

好数据不代表感知性设计的好坏

数据的好坏往往来自各种原因,优化设计后得到好的数据,但并不能说我们的感知性设计是好的,首先刺激数据的手段有很多,例如加重内容的表现、利用颜色对比突出想要突出的模块,这些方式都是与感知性设计背道而驰的。

基于上面这个问题,我们在日常设计中有几个基本原则是需要我们去遵守的,尽量避免为了满足短时间的产品需求而影响整体的设计感知性。

1. 不挑战基础规范原则

基础规范作为整体设计的基本标准,整体的制定肯定经过多种尝试之后的结果,如果轻易推翻的话,其中产生的设计成本是巨大的,往往需要重新输出、多方对齐、最终输出、再落地形成开放组件,在我日常的工作中也常遇到。往往是因为一个极小的模块而产生了巨大的设计成本。

2. 不改变用户的普识习惯

这里说的不是不去优化或迭代体验设计,而是我们应该尽量避免因为一个很小的内容而调整全局的体验方式。

举个例子:早前很多 APP 在设计表单选择器时都喜欢进行 UI 定制,从这个问题分析,用户在使用这种表单选择器的时候是用的系统多一点还是我们的 APP 多一点,如果是系统的多一点,我们何不直接调用系统?因为组件的 UI 改造,往往会带来一定的开发成本,但其造成的感知却并不够大,反而会让用户觉得很奇怪,为啥这些选择权在不同 APP 的不一致。

3. 一致性最大化

任何的设计都应该以一致性作为最大的前提,这样才能更加完整体现感知性模式,在各个模块、颜色、图形等等内容都具有完整的呈现,无时无刻影响着用户,让用户对于整体具有潜移默化的感知。

最后

感知性模式不是一个原则,而是一种工作方式、设计模式,除了个人的坚持之外,还需要有团队的意识才能让我们的设计更加具有品牌性,自上而下的调性、方向的确定,在团队中形成共识,这样设计语言才能形成。

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



文章来源:优设    作者:ID设计站

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

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

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


日历

链接

个人资料

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

存档