伟讯科技ioc移动驾驶舱软件界面视觉设计

html前端 | 交互设计 | 视觉设计 | 图标设计

伟讯科技(北京)有限公司所研发的ioc移动驾驶舱,用于描述城市总体运营状况,涵盖了各个特定于机构的解决方案领域,并支持深入了解每个基础机构的功能,它通过集中化的智能,提供了对日常城市运营的洞察,高效的协调行动、解决问题所需的实时沟通和协作,可以优化运营效率并改进规划。

伟讯科技有限公司委托蓝蓝设计负责界面视觉设计、交互设计。蓝蓝设计人员通过前期详细沟通,参考大量相关竞品。该软件由DataV实现开发,DataV是阿里的一个实时数据大屏搭建工具,为更便捷的实现开发工作,在设计工程中尽量采用组建库中的原有控件,最终达到双方认可的视觉设计,后续也通过此方式完成其他页面设计。

伟讯科技ioc移动驾驶舱软件界面视觉设计UI界面设计

产品定位

ioc移动驾驶舱,能够让城市管理者像在汽车驾驶舱里面对仪表盘一样,直观地监测城市运营情况,并对异常关键指标预警和挖掘分析,实现决策分析无处不在的实时动态管理。通过智慧城市智能运行中心,来监视并管理城市服务。高级的协作、分析来帮助城市机构协调事件响应工作,不断提高城市运作的效率。

伟讯科技ioc移动驾驶舱软件界面视觉设计UI界面设计

目标用户

重点经营数据分析、业绩指标监控以及业务数据查询。集团领导层、管理者经营管理驾驶舱,各个模块多维度展示,经营数据一览无余。 门店经营管理,在零售、市场等行业利用率很高。利用tab展示销售、商品、库存、会员等数据,一张模板搞定店长所有需求,数据指导门店经营管理。

伟讯科技ioc移动驾驶舱软件界面视觉设计UI界面设计

设计风格

在设计风格上我们以深蓝色为主背景,科技感的边框和线条来凸显界面的科技感。数据展示和控件在采用明亮的蓝为辅助色,作为最要内容的显示,添加对比色与邻近色作为点缀来起到信息的强调作用,营造整体的观感为科技,稳重,理性的设计风格!

驾驶舱软件界面视觉设计

此页面主要为数据总览页,便于领导和管理层查看总的数据,快速获取重点经营数据。页面主要通过5大分类来反应此城市中人群信息。

从内容布局与排版上,采用清晰的框架来进行明确的区分, 在这5部分内容中,把关键的内容置于视觉中心,在总纳管人口下,其它几个板块作为详细的分析,其数字采用液晶显示类文字,观感更符合数据的展示,同时具有强调作用。

年龄分析以纵列的柱状图,清晰的反应每个年龄阶段的对比情况;数据来源采用堆砌的横向对比方式,便于观察每个单位来源与总的分类情况对比;人口结构用双向柱状图来进行分析,更加直观;特征人群的三大类,加入图标的设计来避免过多数据信息扰乱视觉,增加视觉舒适与解释度。

驾驶舱软件界面视觉设计

驾驶舱软件界面视觉设计

在事件分析页面的设计中,事件发生内容较多,信息量较大,以列表翻页的形式来展示,放大事件标题,添加标签来给此事件定义类型,布局清晰直观!

为预防事件的错误传递,添加编辑功能,可进行修正处理,在选中该事件后,顶部会进行详细信息的表述与补充,方便对事件的了解与直观提取。

驾驶舱软件界面视觉设计

为预防事件的错误传递,添加编辑功能,可进行修正处理,在选中该事件后,顶部会进行详细信息的表述与补充,方便对事件的了解与直观提取。

驾驶舱软件界面视觉设计

驾驶舱软件界面视觉设计

企业信息总览中,主要分为5大模块,对所提供的信息进行图形化处理,企业图谱解读商业关系;企业关系清晰的展示各个组织架构层级,加入图形间隔,增加信息识别性;高管信息和变更记录都采用表格的方式,通过滚动可以展示更多的信息。

驾驶舱软件界面视觉设计

在企业全息画像直通车中,最主要的是对办理状态的信息处理,底部以时间段的形式来进行事件的筛选;事件采用卡片的方式,具有易阅读性;绿色以比较醒目的视觉感知绿色作为标签的底色,未解决则采用警告提示性质的红色;整体布局与信息反应清晰明了!

驾驶舱软件界面视觉设计

驾驶舱软件界面视觉设计

在智慧城市管理中,从社区到个人,通过集中化信息洞察到个人的信息展示,详细便捷的信息管理更好的帮助了城市的管理。

驾驶舱软件界面视觉设计
驾驶舱软件界面视觉设计
驾驶舱软件界面视觉设计
驾驶舱软件界面视觉设计

  返回