第三步、规划设计
在第二步的时候已经将大部分分析工作都做完了,现在要做的是如何对这张地图来表达我们的想给来宾传达的信息。
在这块主要是细节和感受的设计。设计顺序:
1.模块设计——长久考虑的模块纵横栅格布局设计还是不顾延展性把只为这一个屏的精致。
2.维度表现——具体维度用什么表现的确定。
3.动效设计——时间的把握和情感的控制。
4.数量控制——对实施数据的不可控性进行展现上的控制。考虑页面最后出现的时候太密或太疏是用户的感受。
大屏和其他显示屏一样,本身都是有固定分辨率的。一般是4*3的比例。在设计时考虑到通用性,可以优先考虑1024*768。如果设计师追求更加极致的表现,可以根据每个大屏本身的像素块的多少来设计。比如:1400*1050或5600*3150
考虑到同系列的屏幕会有相同展现形式,使用相同组件,可以对大屏进行栅格。
大屏是横纵都固定的,可以采用横纵都12栅格的方式。
在第二步中我们已经确定只要重点在地图上表现出不同纬度:地域,攻击点,保护点,方向,攻击大小,攻击类型。
这些内容就要运用到数据可视化的知识了。详见如何设计数据信息图
基本的表现形式有:大小,位置,形状,颜色
对每个表现进行思考:
位置——地域:显而易见。但是什么样的地图符合我们的场景呢?
如上图,在考虑使用世界地图还是中国地图的时候发现业务上,国内攻击很多,而国外很少。而且需要看到的国内的能到地级市,国外的到洲或者国家就行了,最后我们创新除了第三种,以中国为主的世界地图来展现。
形状——攻击点,保护点,方向:作为体现情感的重点体现,可以对保护点做盾牌的形状;攻击点用普通的用户能第一时间理解的感觉到的形状比如圆(因为数量过多时展现最为清晰);用有方向感的连线连接攻击点和保护点来表示方向。
大小,颜色——怎么来处理呢?放在哪个维度上表现呢?
圆的视觉冲击力最强,可以清晰的同时表现大小和颜色。所有把方案一、三、五排除掉了。
当数据量很大的情况下,会有很多线出现,这是很难分清楚这些线是那些哪个线,线需要有颜色区别。所以排除方案二。
现在只剩下方案四和方案六:
上图可以看出:方案六的情况下在看圆的时候会受连线粗细的干扰,连线之间也会被遮住从而干扰视线,所以确定用方案四。
确定好了这些表现方式之后,对每个表现方式做数据量化变现和动效的处理:
小插曲:在设计动效的时候还想通过动效的节奏来体现攻击量的大小,比如频率越快,表示的攻击的量越大,后来实现中发现这样画面会更加的杂乱。
结论:每个维度,只用一种表现。即清晰又易懂。
第四步、检查测试
1.REVIEW需求——过一遍需求是不是能够满足。
2.实地测试——将效果放上大屏,看是否方便阅读,动效是否达到预期,色差是否能接受。
3.可信性测试——当自己的讲解员,给用户讲解大屏。能否一句话描述大屏,同时用户能够理解。
设计大屏一定是一个长期跟进的过程。有很多问题会在真正数据进来了,放在大屏上显示才能发现。
在这个屏中我们改过的细节:
① tab的展现和图例结合,省空间,同时方便理解。
② 线到达保护点之前攻击点不消失(让用户能够回述到攻击源)
③ 保护点更加有动感,情感更加丰富,攻击到达的时候才瞬间出现盾牌,攻击结束后才渐变消失。
④ 在电脑上看整体地图颜色偏暗,但是到了大屏上看效果正好。所以对地图背景进行调暗。
希望这篇文章能帮助到做可视化设计,大屏设计的同学们。