提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
分享一个前段时间的设计需求,大体是要对一个高速路况监控的系统做一个视觉提升,以提供更直观、更易于理解的监控体验。先来看下改版前后效果对比:
原稿界面
改版后效果
怎么样?对气质这块提升的可不是亿点点。那么究竟是如何构思的?来跟大家分享下设计经验和思路。
第一步、定个设计方向
在开始设计前必须要明确设计方向,要不然就是无止尽的草稿、推翻......
本次设计的关键词必然是和“高速”相关的,那么很好理解,我们从业务角度出发去发散思考。
分享一个我自己的方法论公式:衍生属性>视觉表现>用户感受,一般场景都可以用这套公式,带给用户真实的感受和体验。
如下图,就用了这个方法分析:
根据上图总结了几个设计纬度:
第二步、优化页面布局
减少页面视觉层级,弱化信息的复杂结构,调整视觉重心。
原稿页面:看起来有4层结构,我们都知道视线的聚焦主次是:图片 > 彩色 > 深色 > 浅色;所以视觉会过多的停留顶部系统栏上(下图标“1”区域)
这会形成观感上、操作上的干扰,对于需要具备“严谨”条件的,在某些情况下可能是致命的!!
所以我们将内容重新做了规划,首先调整为左右布局,清晰层次;
然后在内容区域中将顶部系统栏和导航数据内容结合,再赋予配图,就有了空间感和通透感,也顺势引导用户的浏览顺序,将视觉重心聚焦在内容区域上(下图标“3”区域)。
第三步、页面元素设计
1、我们对菜单栏,做了更多精细化的处理:
2、内容区头部设计:
结合路段图、信号灯、路牌等隐性设计,营造场景体验。元素简化,选用配图,体现出一种很高级的空间感和通透质感。
3、监控卡片设计优化:卡片交互设计,状态和“忽略”操作逻辑优化,更快一步触达目标。
4、最后再给大家展示下深色版效果:
如果有用,可以分享给好朋友一起看哦~
Powered by Froala Editor
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册