西派特化学检测界面设计

图标设计 | 交互设计 | 界面设计

  • 西派特(北京)科技有限公司是一个光、机、电、算四为一体的高科技产品研发和生产公司。西派特(北京)科技有限公司秉承健康、安全、环保的理念,专业从事分析仪器、智能检测设备、自动化设备研发和生产。致力为食品、药品、危化品、农业、环保、公安司法鉴定、电力、纺织品纤维、烟草、石油化工等行业的客户提供专业的整体解决方案。产品覆盖实验室、便携快检和在线监测等领 。

    西派特这次的产品,是对化学含量的一种检测,主要检测水含量和各种醇类的化学含量。这款产品主要解决检测工人在野外进行检测。蓝蓝设计通过客户给的原型图,进行界面的设计和交互的设计。整个过程双方沟通积极。合作比较愉快。

    西派特化学检测界面设计

    主要用途

    这套界面是在化学检测仪器上使用,用来检测被检测物中含水量和各种醇类的化学含量的检测系统。

    MICAPS4系统
    MICAPS4系统

    用户场景分析

    西派特这套化学检测系统是给检测工人使用,化学检测人员在室外进行检测,室外的光线比较比较强,这是设计界面的条件之一,界面要在强光的情况下使用不会受到影响。

    设计原型展示

    界面设计内容:包括主要界面,加载页面,界面的提示框。

    界面设计要求:整体界面简洁,有科技感,检测结果清晰明了,户外使用考虑背景基调。

    主界面区域展示:1、显示日期、时间;2、电池条;3、logo;4、帮助/最小化/关机按钮;5、检测指标及结果显示;6、分析次数显示;7、自检/分析按钮。

    MICAPS4系统

    视觉设计风格探索


    设计前后对比

    1、色彩规范定义—

    背景色采用深蓝色,品牌色采用logo的蓝色。考虑到检测在室外进行,所以对比度增强,更容易识别。采用高的饱和度颜色,蓝色具有科技感,稳重理性。文字的颜色与界面背景颜色有强烈的对比,凸显文字的清晰度,在室外强光下也不会影响使用。

     


    设计前后对比

    2、设计风格的设定—

    在风格设定上,采用卡片式设计和圆角设计,这样的设计让界面更具有亲和力,信息更加聚焦。界面的背景采用工业纹理进行设计,具有工业感。根据格式塔原理,利用留白区分版块与版块之间的信息,这样设计让界面更简洁轻量化。

    MICAPS4系统

    初步设计稿展示

    左侧是界面是根据客户要求和原型图设计的界面。背景颜色采用深蓝色,主界面上是自检和分析的图标按钮。颜色为较亮一些的蓝色。点击自检按钮,自检按钮会变亮的蓝色,同时分析按钮会灰掉,表示自检正在进行。下方的环形进度条和数字也会同时发生变化。

    主页面设计稿一和稿二对比

    右侧分别是设计稿一和设计稿二的主要界面。根据客户要求,经过优化,以设计稿二为最终设计。

    设计稿一之前的主要按钮单独在一张界面上,经给客户沟通后,决定把主要按钮放在如有图设计稿二的界面上,这样不会显得空旷。

    设计稿二的图标在设计稿一的基础上做了简化,这样更为整洁。

    设计稿一和设计稿二在交互层级也做了优化,设计稿二的路径更为简短,减少操作成本。

    检测的类别,在设计稿二也相应做了改动,在未分析结束前,不显示结果。

    下方的进度条由环形改为横条的形状,这样更为简洁。

    设计颜色,设计稿二在设计稿一的基础上的纯度更高,拉大对比度,确保了在室外强光下正常使用。

    MICAPS4系统
    MICAPS4系统

    自检页面和弹窗设计

    点击自检按钮图标,开始进行自检,自检图标发生变化,变为较深一点的蓝色,分析按钮图标变成暗灰色,突出正在自检的按钮,表示正在自检中。

    含水检测和醇类判别,分别用水滴和仪器瓶表示的小图标,简单,富有含义,容易识别。

    下方的进度条也同时发生变化,处在加载中,可以清晰看到自检的进度情况。

    当自检完成,界面会自动弹出,自检完成的窗口提示,点击确定按钮,表示自检已经完成。

    当自检过程中出现问题的时候,界面会弹出自检异常的窗口。

    分析页面和分析结果

    点击分析按钮图标,开始进行分析,分析图标发生变化,分析按钮图标变成暗灰色,由分析变成暂停图标,当有紧急事物可以点击暂停图标,再次点击分析继续进行。

    下方的进度条随着分析的情况也也同时发生变化,当处在暂停状态中,进度条也会暂停,分析进行,进度条也同时发生变化,可以清晰看到分析的进度情况。

    当分析完成,界面中含水检测和醇类判别会得出相应的结果和数据。

    当分析过程中出现问题的时候,界面会弹出操作异常的窗口。

    MICAPS4系统
    MICAPS4系统

    其他界面展示

    展示界面包括其余的界面,包括加载界面,界面的弹窗。

      返回