移动办公OA平台

移动办公OA平台

移动办公OA平台

Mepal APP是一款移动应用程序,主打集成公司内部OA管理功能,参考钉钉的产品架构,工作台可集成各系统数据。产品设计,按照原子设计理念,统一组件、设计规范。

我参与了前期的需求收集、部分业务线的功能设计、以及对应的项目跟进。并参与视觉规范设计:根据需求设计交互稿、UI稿,并交付给业务需求方进行确认。

Get Started

Mepal APP是一款移动应用程序,主打集成公司内部OA管理功能,参考钉钉的产品架构,工作台可集成各系统数据。产品设计,按照原子设计理念,统一组件、设计规范。

我参与了前期的需求收集、部分业务线的功能设计、以及对应的项目跟进。并参与视觉规范设计:根据需求设计交互稿、UI稿,并交付给业务需求方进行确认。

Get Started

Mepal APP是一款移动应用程序,主打集成公司内部OA管理功能,参考钉钉的产品架构,工作台可集成各系统数据。产品设计,按照原子设计理念,统一组件、设计规范。

我参与了前期的需求收集、部分业务线的功能设计、以及对应的项目跟进。并参与视觉规范设计:根据需求设计交互稿、UI稿,并交付给业务需求方进行确认。

Get Started

需求背景&目标

公司在此前,使用钉钉作为移动OA平台。随着公司人员的扩大,管理需求的激增,数据安全的考虑,已不能满足公司需求。便产生了此产品的基本需求:企业办公平台自研,先从移动办公替换作为首要任务。

在职员工已超1500人,日常至少要满足员工考勤打卡、申请与审批、查找企业通讯录、查收公司活动通知。适配手机系统iOS、安卓。

1、保证员工留存与日活,协助业务部门推进办公管理改革;

2、保证体验,更多玩法,提升公司活动宣传的传播效率;

3、设计规范统一,清晰路线为移动OA平台,核心功能交互统一,使用快捷无门槛;

竞品结构拆解

竞品调研可辅助设计方案的决策与落地,作为功能与用户体验设计方面的参考,分析不同角色的用户,达到更好的理解产品作用。

产品功能层:首先确定产品的功能架构、核心亮点、功能的层级流转等,梳理出产品逻辑,作为交互与视觉的风格基调的参考基础。

交互体验层:包括操作交互、数据刷新、页面流转、动效实际效果,来确定适配系统及交互规范。

视觉表现层:主要包括配色、文字、排版、视觉风格等,美化产品视觉让用户印象深刻。

运营模式层:包括产品定位、用户习惯、商业模式,来确定后续的迭代方案。

此项目目标为替换钉钉,竞品分析以钉钉移动端为参考。

参考竞品图
参考竞品图
参考竞品图

总的来说。

设计风格注重简洁、直观和易用性,符合现代设计的趋势和用户需求。它的扁平化设计、清晰的界面布局、强调视觉层次、一致的设计语言和简洁明了的图标和标签等设计元素,都为用户提供了一个优秀的使用体验。同时钉钉支持公司第三方插件的活动,于是钉钉具备消息的分层,以及多种不同程度的消息通知等级(应用内强提醒、短信、电话通知等)。

流程梳理、需求评审

在项目执行过程中,我参与了需求与设计的流程、评审等。涉及到的产出有:

  1. 需求拆解:根据用户需求,转化为具体功能和交互需求。

  2. 原型设计:基于前期需求沟通,设计应用的原型,包括用户界面和交互原则等。

  3. 界面设计:进行用户界面设计,包括图标、颜色、字体、排版等。

  4. 界面验收:提前做交互UI样式的验收,发现问题。

色彩规范

在企业应用中,可以根据企业的品牌形象和产品特点来选择合适的色彩搭配。公司品牌HuoBi_APP的主色调为蓝色,绿色作为高亮标签色,此项目的颜色遵循相同原则。并且参考钉钉等移动办公的简洁设计原理。制定的色彩规范如下:

文字规范

自动适配为操作系统默认字体,UI设计时以 iOS 为例。

图标设计

图标应该尽量简洁明了,能够快速地传达信息和功能。具有较强的可视性,能够在不同的背景下清晰地展示。使用简单的形状和色彩组合,避免使用过于花哨的设计。色彩相协调、易于辨识、可适应多种场景。

组件设计

UI组件设计是以标准化用户界面元素和统一性原则为准则。好的UI组件设计可以使用户界面更加直观、易用、美观,提高用户体验。

  • 可重复性原则

  • 简洁性原则

  • 一致性原则

  • 易用性原则

  • 可访问性原则

  • 安全性原则

  • 响应性原则

头部标题栏

头部导航栏使用频次较高,为遵循组件设计原则,统一设计为一级标题栏、二级标题栏(含返回、子标题、详情、操作、完成、空白)

底部标题栏

常规类型的底部导航栏,组合形式为icon+文字,这种形式可以降低用户理解成本,提高用户操作体验。

按钮标准化

移动端手机按钮不需要hover态,本次遵循简洁原则,设计如下:

消息提醒

设计三种类型的消息提醒,文本类、连接类、按钮类。

弹窗设计

iOS与安卓的模态弹窗设计,根据系统有不同的区别。点击空白区域可以关闭弹窗。

日历模块

此项目会多处用到日历。日历包含两种形态:展开、收起。当向下滑动查看日程信息时,日历可以收起。

主要功能展示

登录

登录分为欢迎页与账号登录页:

首页(工作台)

工作台包含:

运营区(banner图+快捷入口)、办公入口(各业务管理工具入口)。

可以有效的解决快速办公的需求,并且方便随时上下架“小程序”。

消息

消息可以接入各服务,能做到统一交互提醒:

日程

日程可以作为提醒时间轴

考勤打卡

人事考勤业务,参考钉钉中打卡的交互逻辑,使用频次非常高的页面,因此主要改善界面阅读舒适度。

项目总结

此项目为真实上线项目。
降本增效、数据安全。
不再使用 Excel 流转入职信息,减少ER工作量50%以上;
出差补助,OA 系统自动化审批,审批直通率达80%以上;
UI 按照原子设计理念,统一组件、设计规范。节约开发成本;