分享一个前段时间的设计需求，大体是要对一个高速路况监控的系统做一个视觉提升，以提供更直观、更易于理解的监控体验。先来看下改版前后效果对比：

原稿界面

改版后效果

怎么样？对气质这块提升的可不是亿点点。那么究竟是如何构思的？来跟大家分享下设计经验和思路。

第一步、定个设计方向

在开始设计前必须要明确设计方向，要不然就是无止尽的草稿、推翻......

本次设计的关键词必然是和“高速”相关的，那么很好理解，我们从业务角度出发去发散思考。

分享一个我自己的方法论公式：衍生属性>视觉表现>用户感受，一般场景都可以用这套公式，带给用户真实的感受和体验。

如下图，就用了这个方法分析：

根据上图总结了几个设计纬度： 

• 风格定义：扁平化的，现代化的，工业的，偏科技风的； 
• 颜色定义：蓝色系，延用原版官方蓝； 
• 字号定义：大字号标题和数据；
• 用户群体：青年到中年的管控专员，24小时制。（从客户了解到）

第二步、优化页面布局

减少页面视觉层级，弱化信息的复杂结构，调整视觉重心。

原稿页面：看起来有4层结构，我们都知道视线的聚焦主次是：图片 > 彩色 > 深色 > 浅色；所以视觉会过多的停留顶部系统栏上（下图标“1”区域）

这会形成观感上、操作上的干扰，对于需要具备“严谨”条件的，在某些情况下可能是致命的！！

所以我们将内容重新做了规划，首先调整为左右布局，清晰层次；

然后在内容区域中将顶部系统栏和导航数据内容结合，再赋予配图，就有了空间感和通透感，也顺势引导用户的浏览顺序，将视觉重心聚焦在内容区域上（下图标“3”区域）。

第三步、页面元素设计

1、我们对菜单栏，做了更多精细化的处理：

• 顶部将要素信息融合，选用硬边字体和科技感背景元素设计。体现项目的严谨性和科技感；
• 倾斜的分割元素设计，营造速度感和灵动性；
• 菜单设计以简洁为主，干净利落，清晰表达功能逻辑即可；将更多的精力花在icon的设计上。

2、内容区头部设计：

结合路段图、信号灯、路牌等隐性设计，营造场景体验。元素简化，选用配图，体现出一种很高级的空间感和通透质感。

3、监控卡片设计优化：卡片交互设计，状态和“忽略”操作逻辑优化，更快一步触达目标。

4、最后再给大家展示下深色版效果：

如果有用，可以分享给好朋友一起看哦～

Powered by Froala Editor