仪表盘设计艺术——颜色设置和样式选择

原创|其它|编辑:郝浩|2012-08-26 20:47:33.000|阅读 1659 次

概述:本文中的许多材料是基于简单色彩理论和与样式化仪表盘的图像艺术家的讨论。我将介绍个别数据可视化样式(包括图表、量规和地图),如文字和配色以及仪表盘整体布局和样式化的注意事项。此外,需要提及的是创建仪表盘时,功能应遵循形式

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

1.0简介

本文是为尝试仪表盘布局和样式化的开发商而写的。此外,本文中的某些要点对刚开始设计仪表盘的图形艺术家可能也会非常有用。这不是指导,只是本人在探索在仪表盘设计方面的创造力时所遇到的习惯做法的总结。本文中的许多材料是基于简单色彩理论和与样式化仪表盘的图像艺术家的讨论。我将介绍个别数据可视化样式(包括图表、量规和地图),如文字和配色以及仪表盘整体布局和样式化的注意事项。此外,需要提及的是创建仪表盘时,功能应遵循形式;例如,仪表盘怎样运行和用户怎样与仪表盘相互作用应优先于仪表盘的外观和触感。其实,两者之间有一个平衡点。

2.0 一般样式

    开始样式化前,你应该寻找一个起始调色板。通常情况下,是有合适的颜色的,最坏的可能是从正在使用的商标中创建一个简单的调色板。若没有品牌色彩或商标,通常我会使用白色和淡灰色的简单调色板,原色是酷蓝。使用这种方法不会弄出太难看的仪表盘,但如果你是像我一样的面临艺术挑战的开发商,那么一切皆有可能。

Neutral Colors

Corporate Color Palette

Color Palette

    你可以使用调色板生成器通过基色调色板创造更多的颜色,以供使用。当你拥有多个数据可视化组件和不同比例时,你将需要上述所有额外配色。一般我可用的色彩至少是8种。

    数据可视化背景和调色板背景通常使用中性色,如淡粉色和淡灰色;若可能,使用基色调色板上某一颜色的最浅色。这可以使数据可视化元素,如条线和指针更突出。

Neutral Background Colors

    注意细节也是非常重要的,尤其应特别注意文字。整个仪表盘应使用一致的文字字体和大小。网络环境中,可使用TrebuchetMS或Verdana;桌面仪表盘,标题可使用Myriad、Calibri或Arial,内容可使用Verdana或Tahoma。轴标题、轴刻度和图例说明等的一般字体大小约10pt。使用12pt-14pt和黑体字区分主标题和其他标题。

3.0图表样式

3.1图表分类法

 

Chart Elements

3.2提示和技巧

  • 使用类似颜色时应特别小心;这可能使某些用户难以区分各系列。
Color Perception
  • 选择一个基色作为一个系列的起始点然后找到另一系列的补充色。 需要3个以上系列,你需要重新考虑图表。例如,最终用户是否能辨别四条或以上的线条?线条太多可能导致用户难以读懂。
Chart with Four Series
  • 若有三个系列,可考虑使用三列式柱状图或面积、竖栏和线条综合图表。
Area, Column and Line Charts
  • 若是比较两个趋势,可考虑使用中性色将某一趋势显示为面积图(作为基本比较点),将另一趋势用加粗线条显示。这可以帮助用户对两者进行比较。
Comparing Two Chart Series
  • 通常情况,对于趋势图而言,宽度比高度大,并在底部显示图例。这是最节省空间的布局。
  • 通常可以使用条形图显示分类系列,这是因为条形图更容易读懂。
Bar Chart
  • 拥有一个有意义标题的图表可以不需要轴标题,这能为你节省一些屏幕空间。
Chart Axis Labels

4.0 计量器样式

4.1 计量器分类法

Gauge Taxonomy

4.2提示和技巧

  • 在指针使用类似颜色时应特别小心;这可能使某些用户难以区分各指针。
Gauge Pointers
  • 选择一个基色作为一个指针的起始点然后找到另一指针的补充色。
  • 若需要2个以上指针,你需要重新考虑计量器。你需要问你自己,最终用户是否能看一眼就读取指针。
Gauge: Too Many Pointers
  • 请确保有图例能区分指针(大多数时候都至少有2个指针,平均或目标实际值和基准值等)。若有多个量规显示同一度量,则全局图例能为你节省更多空间,并能减少仪表盘上冗余信息的扩散。
Unified Legend
  • 计量器样式(圆形、线性)选择可取决于你要呈现的信息类型,但通常是取决于整体布局。例如,当你要表示的面积不是平方纵横比时,你要使用线性或半圆形计量器,而当面积是平方纵横比时,你要使用用圆形计量器。
  • 计量器背景使用中性色突出覆盖元素(如指针和刻度)。
Neutral Gauge Background
  • 实际值指针选用醒目的颜色,目标值选用补充色。若适合的颜色是中性色,则选择较深的颜色,如蓝色或红色作指针。
  • 对于量程,选择的颜色应能明确说明量程所指代的东西,如绿色表示较好,红色表示不好。
Gauge with Ranges
  • 刻度线太多时,刻度可能重叠,因此应使用最小标尺刻度。较小的字体(10pt)使人能清楚看清刻度。

5.0地图样式

5.1地图分类法
Map Taxonomy

5.2提示和技巧

  • 海洋使用中性色。在使用类似颜色时应特别小心;这可能使某些用户难以区分色码形状。
Map Negative Positive Colors
  • 对于正反色码地图,使用冷热色调变化。
Map Hot and Cold Colors
  • 图例的位置应尽可能较少的妨碍地图各区域的可见性。若有困难,可考虑改变地图的纵横比,从而留有更多的空白,然后可能得到可接受的结果。
Map: Overlapping Legend
  • 若不是色码地图,可使用用于补充合适颜色的中性色填充形状。见图5.2d。
  • 使用深灰色/黑色或各区域已使用的整体颜色的较暗的色调为地图各区域的边界着色。这可以使得地图非常整洁和高雅。
Filling Map Tips

6.0仪表盘样式

归纳仪表盘样式是非常困难的,希望本章节能给予你一些基本模板。

Dashboard Layout

图6.1a描述了一个经典的仪表盘布局,其中包括品牌空间、仪表盘滤器空间和数据可视化组件占有面积。这个布局可以有很多变化,例如,滤器可在左列仪表盘上,滤器上可以有导航项,或甚至没有滤器等。

以下是关于仪表盘内容的两种一般布局:

Dashboard Design Layout

Gauge, Chart, Map Layout

请记住,需要显示的KPI应能驱动布局设计,而不是相反的。若采用相反的方法,则你可能发现额外的KPI也需要空间或因缺乏空间需要删除KPI。

7.0总结

    我已经介绍了基本颜色理论要点、数据可视化样式化要点和整体仪表盘布局。颜色理论最重需要注意的是大多数空白都应该选择浅色。如果你是像我一样的面临艺术挑战的人,坚持使用白色作为主要背景色能让你更成功。应严肃的对待字体,但若你不在乎,坚持使用TrebuchetMS和Verdana就好。整体仪表盘布局时,请记住,最开始可使用本文中介绍的基本布局之一。最理想的是,你的仪表盘落入图像艺术家手中,但如果你只是一个人或你身边没有视觉专家,本文可以帮助你创建在视觉上更有吸引力的仪表盘。

 


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自:慧都控件

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP