MzzAds Dashboard Redesign(持续更新)

创作时间:2015.8.13

前几天看到一篇文章写一个sexy的dashboard设计流程的思考(译文原文),很有启发,就自己动手来试一下。

我将用在Dribbble上找到的一个MzzAds的dashboard作为原图,进行redesign。其实原作品很棒,我只是来学习一下。

原作的链接是:https://dribbble.com/shots/2184257-Mzzads-Material-style-Dashboard
作者是:Nasir Uddin

原图长这样:

这个dashboard看的很舒服啊,但是如果我非要来修(po)改(huai)一下呢。所以,根据那篇文章中的流程,我开始了自己的思考。

设计的内容是什么

首先要分析对象,MzzAds是一个广告公司,这次的对象是广告点击量和产品销售。类型是战略/执行。关键指标有年月日浏览量,周点击量,交易次数,清单数量,热销产品,热销产品对应的销售额等。

对指标分类确定区块

  • 总的浏览量原图放在最显眼的地方,一般感觉total类的东西放到右下角更稳,因为有总结压轴的意思吧。但是流量就是广告的生命,浏览量绝对是最重要的数据,所以这里还是放在最显眼的位置。右边的折线图是对左边数据的扩展说明,两者必须放在一起,而且是主体。
  • Sales Activity讲的是广告对象——产品的统计,我认为也是非常重要的,产品又是广告的实质,所以我想要把它放在浏览量的下方。
  • Number of Listing, Clicks, Bids似乎是一样的辅助信息,我将他们三个放成一列,安排在右边。
  • 另外的Money放在Activity的下面,因为它们讲的一个对象,是有逻辑联系的。
  • 原图把Number of Clicks单独拿出,说明数据的重要性。我也延续,并同时给出总数放在Listing和Bids一起比较。

开始着手细节部分

  • 我把导航栏也做了改动,觉得可以尝试一下不用侧边栏。这样会不会显得更简介一些呢。
  • 我想给用户更集中的注意,所以在total部分我之留下总浏览量和当日浏览量。而在右边的graph中延续原作的方式,点击之后切换到month或者90十天的数据。如果有动画,则在选中month之后左边的today‘s visitor也将同时换成month’s visitor的数据。
  • 对于sales activity,有sold和unsold部分,如果数据开始就有个总数的话,我建议就用环形的图示比较合乎逻辑。
  • Listing,Bids,Clicks作为辅助数据,我希望它们能简明扼要,所以借鉴sexy dashboard的表盘形式。

创建设计规范

  • 颜色。我先确定了主色调紫色(它是那么美),然后将用对比的色彩来区分数据和元素。

  • 字体。我选择lato字体,它的样式超多又很好看。
  • 图标。我直接使用了自己收藏的图标,很节省时间。

用Sketch作图

尽量运用我熟悉的和才学习的提高效率的方法来作图。我感觉作图的时候特别专注特别亢奋,当然也很享受。

好了,大致就是这样子。肯定还有可以商榷的地方,等我过几天再来看,不爽了就继续改。


第一次修改

以下内容更新于2015.8.15

过了两天再看那个紫色的dashboard感觉颜色怪怪的,我po到zcool上有设计师也跟我说配色奇怪。然后我想来进行一次微调,看看能不能好一点点。紫色真的挺难驾驭的,我在的dribbble上也确实没发现多少这种纯紫色背景的dashboard,大家普遍多用白色(安全),蓝色(好配色)等主流颜色。但是,我还是尝试来改一改吧。

有没有好一点呢?

还是用紫色主色;绿色辅助,给亮点;橙色点缀色。有一个App的界面设计是这样配色的,我借鉴过来发现还可以接受。我还把block的背景色调整了一下,不是那么暗了。横向直方图想了很久不知道怎么处理,最后还是决定用三种颜色来平衡,既有亮点又不突兀,至少我自己这么感觉吧。

再看看吧,过几天再来改。

之后还想弄出一个其他颜色版本的试试,可能是蓝色也可能是白色吧,看看怎么样。其实像原设计那样用白色为主,蓝色辅助应该是最科学的,因为别人的logo就是蓝色的!我在紫色的最新的一次修改中把别人的logo改成了紫色!因为logo蓝色,主色用紫色确实没有体现视觉一致性。但是我只是练习一下,所以就把logo颜色改了,解释一下。

对这次的修改大家有没有什么建议呢?包配色或者是框架或者是逻辑方面的,欢迎大家看完之后留下一句批评!感谢!


第二次修改

以下内容更新于2015.08.20

猜我发现了什么?我找到了原作者的MzzAds的App界面概念图,神奇的是,它们居然也是紫色的!看来我们都喜欢紫色。先来看看作者的作品吧!

原作链接:图1图2

他的这个处理就非常棒。首先视觉上就很惊艳。紫色本来就比较暗,他把中间部分提亮了一些,有梦幻,有让深紫不那么压抑。在进度条方面用更亮的紫红色渐变很有层次和对比,色彩也很融合。我还觉得他对文字的处理也很好,值得学习。

我这次就做了一个地方的修改。

就是将这个折线图部分的背景矩形的颜色提亮了一些。之前那一个版本的对比不够,看不清楚。

另外这次也跟着画了两张App的界面,我想让界面更简单一些。所以做好之后是下面这个样子的。我在Sketch中用了James Tang开发的插件叫Magic Mirror,可以不用转到PS里面做mockup了。很方便,而且非常简单。

大家觉得怎么样呢?我感觉上面那张的白色部分有点突兀。再继续修改吧!

2015-08-20 10:50577