项目背景

界面设计 | 交互优化 | DataV开发

北京交科院科技发展公司和蓝蓝设计合作“交通数据瞭望台”。数据“瞭望台”是结合用户需求为中心的主题规划,通观全局综合态势,将海量、不同来源、多维度的数据源深度融合关联以支持科学决策和感知研判,一体化联动交互控制、可扩展和复用、灵活部署和发布的专业级大数据可视化平台。

基于行业数据的积累,用更生动、友好的形式,即时呈现隐藏在瞬息万变且庞杂数据背后的业务洞察,在交通运输领域通过交互式实时数据可视化视屏墙来帮助业务人员发现、诊断业务问题,越来越成为大数据解决方案中不可或缺的一环。

行业态势展示了道路交通运输行业的基础数据和走势,实时反映行业的运行状态,将采集的数据形象化、直观化、具体化。为了加强某些重点工作,我们还需加入“联网联控”、“互联互通”等相关专题。系统所具备的数据管理能力可将现有的数据进行有效的整合,快速准确地提供报表并提出决策依据。

数据瞭望台界面后期使用DataV来实现开发。DataV对于开发有很多好处便捷提高工作效率表现形式更加生动,友好。但也有一定的弊端,控件的形式有一定的局限性,必须选用控件库里现有的形式。所以当时设计时也要对这些控件有所了解才能和开发工程师更好的交接。

为了更好的和开发沟通,达到最优实现效果,该项目蓝蓝设计驻场一个月完成全部设计。设计前要知道DataV控件库里有哪些控件可以用,设计时尽量采用已有控件以便后期可以实现。设计好的页面会及时开会讨论,增加办公效率。为了实现更加卓越的效果,有些控件不能实现的(比如艺术数字等),我们将以切图的形式交付开发。为了开发设计完成后蓝蓝设计会对页面做详细的标注交付开发。最后蓝蓝设计将开发后的界面和设计图进行对比,有出入的地方进行指正、调整,以确保最后效果能和设计图更大程度还原。

风格定义

此次界面设计分辨率为1920X1080,主要使用场景为投屏的方式。在了解项目的大背景后,我们决定采用深蓝色的系的设计风格。界面主要以科技,大气,信息展示清晰等为设计的重要要素。在主色调的基础上图表和数据展示运用了多种鲜明的点缀色,相对比较重要的信息,视觉上采用突出的形式展示,丰富了视觉效果。

界面设计

数据“瞭望台”是交通运输领域专业级的大数据可视化平台。通过前期的调研和沟通最终采用富有科技感的设计形式。

界面整体采用深蓝背景,通过背景图案展示界面的纵深感。富有科技感的边框和线条来凸显界面的科技感。数据展示和控件在主色调的基础上运用一些鲜明色作为点缀,即丰富了页面也突出了要展示的信息。

细节体现

仪表盘:入网率和上线率用仪表盘的形式来展示,整体增加了整个页面的科技感。两个仪表盘 分别采用蓝、青两种比较亮的颜色同是也有轻微的渐变。仪表盘没有全部封闭,下边由数字显示当 前具体的百分比。

环状图:这里采用环状图来表示各个部分占总体的百分比,区别于传统的饼状图,显得更加精巧、 炫酷。业户、车辆、人员三个种类通过不同的色系来表示。同时也丰富了页面整体的色调。交互上鼠 标移入某个部分,该部分的名称和所占百分比在环形图的中间显示。

返回