远东宏信移动门户APP界面设计

交互设计 | 界面设计 | vue开发

远东宏信有限公司(以下简称“远东宏信”)是一家横跨金融和产业的综合集团,以“汇聚全球资源、助力中国产业”为使命,于2011年在香港联交所主板上市,股票代码03360.HK。公司多年来引领行业发展,蝉联《财富》中国500强、《福布斯》全球2000强。专注于中国基础产业,在城市公用、医疗健康、文化旅游、工程建设、机械制造、化工医药、电子信息、民生消费、交通物流等领域,提供融资租赁、普惠金融、商业保理、资产业务、股权投资、建设项目投

资、海外业务等综合金融服务;同时开展医院运营、健康养老、设备运营、K-12教育等产业运营服务。蓝蓝设计本次与远东宏信合作,对「远东移动门户」APP进行改版设计,针对原有界面信息堆砌,没有主次,交互使用不方便等方面,蓝蓝设计对产品的功能/交互/视觉呈现进行了重新改版。

产品定位

远东移动门户APP包含业务审批、在线考勤、业务申请、费用报销等功能,并增加待审批、今日计划、我的申请模块,实现公司上下考勤打卡、汇报传达、工作计划、业务开展、访客记录、财务管理等一体化综合管理。通过办公、业务、交流等协同配合,工作更便捷、高效,组织管理更透明化,合理化。

目标用户

远东移动门户APP面向和服务于公司全体领导和员工,是一个综合性、协同性的办公管理系统。本着操作便捷,办事方便高效,沟通及时有效的原则,界面友好易用、简洁美观。

设计风格

视觉方面,以“玻璃拟物化”流行风格为整体设计语言。色调与公司logo及网站主色调红色保持一致。交互上,考虑到使用便捷、省时,提取主要功能按钮放在首页上方,并将常用和不常用的分开放置;同时,常用的业务模块集中展示,并做精细化处理。保证界面整体性和简洁统一,并做到有主有次,层次清晰。

远东宏信移动门户APP界面设计

远东移动门户APP设计后的效果图

远东移动门户-首页设计

2020年6月23日,苹果发布macOS Big Sur系统,首次引入「玻璃拟物化」设计,由于毛玻璃的通透性,在有多个控件的情况下,呈现出一种独特的「虚实结合」的美感。

本次设计采用「玻璃拟物化」的设计风格,以「一致」「反馈」「效率」「可控」为核心设计原则,结合远东宏信公司官网和品牌调性,为APP带来新的视觉体验。

远东宏信移动门户APP界面设计
远东宏信移动门户APP界面设计
远东宏信移动门户APP界面设计

远东移动门户-图标设计

图标设计采用实体色块+玻璃浮层方式,用户可以很清晰地感知到多个不同的层次,透过「玻璃」看到的背景层能够很好地暗示出图标的含义,创造朦胧效果的同时,体现出微妙的高级感。

特殊功能图标为了与入口图标去人,加入背景元素和额外的辅助色彩,保证可读性的同时,体现差异性。

底部导航栏图标采用「轻拟物」设计语言,保证图标清晰简洁的同时,赋予图标更多的光影色彩变化。

远东移动门户-交互设计

页面向下滑动过程中,顶部菜单依然显示,方便用户快速办理业务

用户(有权限用户)可以在首屏查看待审批事项,点击条目即可快速办理业务。。

远东宏信移动门户APP界面设计
远东宏信移动门户APP界面设计

今日计划区域,用户可在首页查看今日创建的计划,避免遗漏,首页呈现关键信息可以极大减少寻找信息的时间,提升办公效率。

我的申请模块,用户提交申请后且未办结前,可在首屏查看申请事项及进度;申请模块采用玻璃卡片+横向滑动交互方式,用户可横向滑动卡片查看信息,拓展界面横向空间,避免页面过长导致的寻找信息困难。

设计前后对比

远东宏信移动门户APP界面设计-蓝蓝设计
远东宏信移动门户APP界面设计-蓝蓝设计
远东宏信移动门户APP界面设计-蓝蓝设计
远东宏信移动门户APP界面设计-蓝蓝设计
远东宏信移动门户APP界面设计-蓝蓝设计

之前的设计效果

优化后的设计效果

  返回