大数据时期的到来,愈来愈多的企业刚开始意识到数据的管理和应用,大数据可视化大屏展现被大量的公司看重。作为资深的可视化大屏UI界面设计师,整理了多年设计数据可视化大屏UI界面的工作经验和见解,希望对你有帮助。
01、项目背景
城市计算是一款利用定位、地图、用户画像的完美结合,为客户提供指定区域的实时人流分布和人群洞察服务的产品。比如某个旅游景区,需要知道每天景区客流量多少,男女比例,以及哪些设施人流多哪些人流少,景区工作人员可以依据这些数据去做优化改进,这类数据展示与数据分析的项目就可以采用城市计算大数据可视化产品
产品目标客户:政府机关、旅游局、交通机构等
02、用户洞察
通过产品侧前期的用户调研了解到用户更希望看到的是一款炫酷、吸引眼球、数据图表清晰的界面设计,与产品沟通决定尝试采用深色界面设定整体视觉风格。
深色在某种程度上会被感知为黑色,尤其是在颜色对比较强烈的情况下,而黑色具有高贵、稳重、神秘、炫酷、科技的意象,比如苹果产品介绍页通常采用深灰色背景,一方面引起用户对新产品的探索,具有神秘感;另一方面在深灰色背景下产品信息可以更清晰地展示并且聚焦吸引用户眼球。
同样地,此次城市计算界面设计采用深色也是为了能够给用户营造稳重、科技的氛围,让数据信息可以更清晰地传达给用户。
03、前期尝试
在设计前期尝试多种界面配色、图表配色、控件标签形态以及hover态的表现形式
设计尝试过程中的心得建议:
- 深色界面在图表设计上采用高饱和度、高对比度配色,与背景形成对比,突出数据图表;
在深色界面中为什么要采用高饱和度、高对比度图表配色?
浅色背景与深色背景在内容信息上的设计还是有很大差别:在浅色背景下要尽量避免高饱和度的配色,反而在深色背景下需要高饱和度甚至接近刺眼的配色与背景形成对比来突出数据图表,吸引用户的眼球。比如在白天不论亮色还是暗色人眼基本都可以看到,但在夜晚只有特别亮的颜色人眼才能清楚看到。
对比上图图4高饱和度、高明度的配色更适合深色背景,反之相对低饱和度、低明度的图3更适合在浅色背景下应用。
2.页面信息卡片布局采用栅格化系统,避免整行卡片平铺,栅格化卡片布局使页面内容分割清晰,拓展性强;
- 缩小左侧导航占用面积,为右侧内容部分提供更大空间
通常在使用百度、谷歌地图时都是全屏展示地图信息,在这个界面设计中同样想给用户类似的体验感受,同时左侧导航在设计时拥有收缩功能,当用户打开这个界面时可以随时展开收缩左侧导航来提升操作体验。
- 控件多样化设计尝试
此次设计中控件按钮最终使用圆角设计,提升页面亲和力,拉近与用户之间的距离。同时控件形态及hover态尝试探索其他形式,为后续私有云大数据产品设计提前积累。
控件形态:直角矩形、小圆角矩形、大圆角矩形
控件表现形式:线、面(如mac新系统)
控件hover态有多种样式:线形变色、面形变色等(其他形式有待探索)
- 在弹窗、下拉菜单等设计上尝试半透明毛玻璃效果,提升品质感
04、方案输出
通过设计探索,最终输出4种设计方案,在界面配色、图表配色、控件形态以及hover态上都有不同的表现形式,满足产品风格个性化定制需求。
方案一、二:
A、蓝紫色背景配色
B、大圆角矩形控件
C、控件hover态采用描边文字变色
D、两种不同的图表配色
方案三、四:
A、深蓝色背景配色
B、小圆角矩形控件
C、控件hover态采用底色变色
D、两种不同的图表配色
其中一种风格应用在实际产品中示例:
深色界面风格是此次项目设计中新的尝试,在配色与控件形态上还有待继续探索挖掘新的视觉表现形式,如果大家有更好的想法欢迎随时一起探讨~