蓝蓝设计-油气检测软件UI界面设计

西派特（北京）科技有限公司是研发和制造科学仪器和智能工业仪表的国家高新技术企业，公司总部位于北京经济技术开发区。产品是将光谱与物质物化性质全息智能分析技术相结合，开发制造的快检设备，可快速检测液体、固体、气体物料的多种性质指标。适用于炼油、化工、煤炭、电力、生物发酵等领域。

该软件由北京西派特科技有限公司委托蓝蓝设计负责界面视觉设计、交互设计。蓝蓝设计人员通过前期详细沟通，参考大量相关竞品，为其提供四种方案视觉设计。最终双方确定方案一设计风格，后续根据客户提供的原型图及需求完成其他页面设计。

产品定位

公司研发的分子光谱物质鉴别与性质感知技术，将分子光谱（包括中红外、近红外和拉曼等）与数据库信息挖掘技术相结合，实现即时物质鉴别与性质测定，为油品快速分析而开发，具有检测速度快、结果准确、操作方便、维护简单等优点。

目标用户

西派特光谱多指标快速分析软件通过与先进的定标数据库技术相结合，该仪器能检测油品多种性能指标的需求。适用于市场监管部门及炼油、化工企业开展成品油快速筛查、原材料进厂检测、化验室中控分析、加油站油品品质监控。

设计风格

此次蓝蓝设计共为该软件设计了四种方案，最终确定方案一。其主要风格偏向简洁大方，呈现严谨统一的视觉体验，使界面更加干净整洁。通过层级，大小，颜色，字体的区分在展现数据的清晰的同时，内容层次分明，保留一定的空间感与呼吸感。

前期通过客户提供的原型图，蓝蓝设计人员为其提供四种设计方案供用户选择，效果图如右图所示。

方案一：简约淡雅优美，将⼈视觉关注点集中在信息本身。⻚⾯分为⻚头、背景图、表格部分，形成空间层感。表格设计不同寻常，层次清晰、现代。表头字体和内⽂字体有深浅变化，重点突出。超标或不达标有图符显著示意。

方案二：本⽅案与之前设计的其它产品⻛格⼀致。颜⾊采⽤深灰为背景⾊、蓝⾊为主⾊调，具有科技感，主背景使⽤⼯业纹理的效果，体现⼯业精准度。图标颜⾊和内容颜⾊都是同⼀⾊系，在体现科技感的同时，⼜不失稳重。

方案三：蓝⾊顶部⻛格下，其它细节表达⽅式的尝试。

方案四：蓝⾊顶部⻛格下，其它细节表达⽅式的尝试。

方案一

方案二

方案三

方案四

蓝蓝设计人员将原型图中的logo放置右侧，让用户一眼看到，能够加强品牌的感知度。

首页功能区采用现在流行的扁平化风格，检测和数据图标融入代表行业属性的设计元素，提升产品专业度。同时采用蓝色，增强品牌认知。

首页主要展示检测数据，该页面数据与数据之间留有空白，同时重要信息用不同颜色的色块进行区分，将复杂的数据以清晰简洁的方式呈现给用户，提升用户的产品体验。

原型图

蓝蓝设计

该页面为检测页面的仅采谱页面。右侧通过滑动滚动条可以看到更多编号信息，提升使用效率。数据列表时通过颜色深浅区分显示是否点击，使内容层级明确。

我们可以看到原型图中功能区放置左侧，蓝蓝设计人员将功能区放置右侧，这样做的目的一是一般情况下人眼视觉重点在右侧，更方便用户操作；二是可以左右平衡，加强视觉比例。

原型图

数据页面用户通过搜索框，输入想查找的样本。完成输入后，即显示相关样本数据信息。通过点选数据，来进行删除、保持、打印的操作。

蓝蓝设计人员将原型图右侧中的查询、删除、保存、打印功能放置界面上面，即节省页面的空间，又可以简单高效的传达给用户，同时增强页面的美观性。

数据页列表采取与检测页相同样式的列表样式，保证界面的统一规范，减少后期项目的开发成本。