Building a Sexy Dashboard——设计流程思考

这里自己翻译一片关于dashboard设计的文章,因为讲述了设计的思维和过程,很有用。原文地址:https://medium.com/sketch-app-sources/building-a-sexy-dashboard-40831ea274a4
作者Oleksii Drozdenko

出乎意料的,好的dashboard设计和一个完美的女人有许多共同点。聪颖,坦率,简单,迷人,而且很性感。我知道这听起来很傻很天真,但是这是事实。

和其他明显的相比它唯一的问题 —— 太难去发现了。而且真是没办法。但是dashboard都是手工制作的。因此,你可以尽情去重新设计它们。

考虑到这个事实,我开始着手探索我真正想要去深入去做的那一个设计。而且,当然,这花了我很多时间去寻找。

请看看Geckoboard。我一见钟情的公司。我没有在这家公司就职,他们也没有给钱让我说这些话。他们正在做一个伟大的产品,并不需要解释。有时候,就是这么简单。

在这里我挑选了Peter Thomas的设计,他是Geckoboard的产品设计。

只是作为记录,并不是要尝试去重新设计 Peter的作品。他做的特别棒。而且很明显他在公司的业务,任务和目标上比我要更明确。我要做的就是尝试去理解这些dashboard是怎么被设计的,然后把我的发现分享给你们。

让我们开始吧!

Define what you want

At first we’re setting our basics:

  • 主要方向:销售与市场营销。
  • dashboard的类型:战略/执行。应该提供每日,每月和每年的KPI。如果你想要学习更多关于dashboard的类型,我推荐这篇文章
  • 关键指标:访客,注册,转化率,排行榜,计划,团队销售,今日/月/总的销售。
  • Use cases: HD/4K TVs。

Group into sections

Grab your pencil and sketch out the layout before you even open your computer

我个人使用的是“Sidecar”制作的可打印的UI prototypes,在这里购买花费了$3。但是基本上用一张纸就够了。

首先,创建6*3的类似block。然后给每个部分分配合理数量的block。在我们这个case中:2-排行榜,1-计划,3-人次/注册等,1-平均转换率,1-当日销售,3-月销售,1-平均销售/月,1- MRR,3-组的销售,1-组平均销售/月,1-销售总量。

我们需要确定的是,有逻辑联系的数据要放在一起:

  • 排行榜和计划放一块。这将要占据3个block,所以我们要将其垂直分布。
  • 转化通道最好放在单独的一行。就是说我们将人次/注册,平均转换率和当日销售分为一组。我们没有太多的空间来对他们进行垂直的分布,所以我们选择水平分布。
  • 月销售和每月平均销售,MRR放一组。我们要把它们水平分布,并放在转化通道的下面。这将是一个对日销售的延续。
  • 组的销售当然要和组评价销售放一起。
  • 最后总的销售要放在右下角。通常右下角就是放置总价的位置:checks, e-commerce, bills等。用户在这个地方看到这个会觉得很舒服。

Zoom in

Each and every detail matters.

  • 当用户来浏览信息block的时候,标题是他们最先看到的。我们来添加一些图标,把标题做的有区分度一些。

    • 缺点:可能会把界面弄乱,对仪表盘来说是双刃剑。
    • 优点:标题很容易被发现。
  • 访客/注册,每月销售和团队销售的时间区间应该是对等的。在这里我们选择一年的时间。

    • 缺点:如果时间区间太厂了那么就很难找到一个特定的时间点。
    • 优点:这种方法带来了更多的一致性,允许用户来比较单一时间段中不同的数据。

  • Axis图表是相当复杂的block。为了让它们看起来更简单,我有以下几点建议:

1.X轴序列用别的颜色。
2.为Y轴添加分隔。
3.添加季度指标,有可能用户想要对比三个月的数据。

  • 缺点:还是那个问题,但凡你添加了一些东西到表中,就可能会打乱所有的东西。
  • 优点:增加的标识可以减少用户查找信息所花费的时间。没有人喜欢路标的样子,但他们会帮助你到达最终的目的地。

以上的建议对所有的dashboard情况不一定都是有用的。综合 A/B 测试可以显示给定的情况中的优势和劣势。我的建议如下:

Create a styleguide

Work on your color scheme, fonts and icons

  • 我们选择对比色的配色方案:黑色的背景,发光的字母和生动的板块。这样我们就可以确定信息是可分辨而且易读的。 >* 缺点:亮色可能显得过于醒目,而且分散用户的注意力。 >* 优点:亮色可以很好的抓住徘徊的眼睛。

  • 我选择Open Sans Light作为我们的主要字体。

    • 缺点:字母有标准宽度,有时候长段的文本用更窄的字体更好。
    • 优点:这种字体清爽简单,对latin and cyrillic都可用,有很多字形而且都免费。
  • 选择图标其实是最简单的环节了。一些是自定义的,其他的是从 “Streamline” 4000 icon set 里面下载的 —— 每个设计师都应该考虑拥有的终极时间节省神器。

Dive into the SketchApp

Finally we are putting all the pieces together. I call it a “Lego Time”.

  • 为每个部分创建一个大致的UI。它应该简单而且快速,因为我们已经在layout和内容方面达成了一致。
  • 当你对其一切的显示都很满意的时候,就可以开始把东西打磨出来了。要确保所有的元素具有一致性,而且很容易iterate。Hint:用SketchApp的symbols和 styles 来提高效率。
  • 关掉电脑,一天后再次打开。如果你不喜欢你所看见的设计了,再回到1和2中。重复这样直到你不会讨厌你的设计。

Create functional animation

Try avoiding surprising transitions. Animate only where it is needed. Not more.

我们最终的静态图片看起来不错。现在是时候给它生命了。在我们打开AE之前,我们要讨论一下我们需要什么样的动画,这些动画将如何帮助我们的用户。

Dashboard包含了从不同数据库和资源里面调用的数据。因此,它需要一些时间去把每个数据下载。这就是我们使用动画的绝佳时机。

我们可以采用多种解决方案:动画预加载图标,百分比前载bar,自定义等待信息等等。我将会做一些不同的尝试:展示一个空的dashboard然后展示它的加载方式。它有点类似于你点上你车里的发动机,等待几秒,直到它起步。

Let’s dive into details:

  • 排行榜在单独list中。我们让它每一行依次出现。
  • 计划部分含有三个直方图。很显然高度不一,我建议采用相同的动画时间。这样我们可以得到这些结果:

    • 每一列都会同时出现。
    • 较高的一列速度会快一些,给用户一些更成功计划的指示。
  • 访客/注册,每月销售,团队销售是一样的axis图表。我们给他们一个蒙板层。这对于我们和开发者都是一个很简单而且强大的方案。

  • 转换率,每月销售,团队每月销售有很好的gauges。用户已经习惯于在温度计,汽车,音响系统等地方看到类似的表盘了。我花了一些时间来研究他们在真实世界的表现:箭头上升20%,减缓并返回5-7%,然后再一路加速升到最终指数。
  • 当日销售,月销售,月平均销售是简单的计数器。我们将用滑块控制添加一个普通的动画。

Render and enjoy

And don’t forget to ask your questions or start a discussion. I’m sure there’s still a big room for improvement here.

Instagram / Facebook / Dribbble

2015-07-31 15:00383