打卡功能交互设计是最近面试的时候遇到的一个试题,在发给面试官的内容基础上作了进一步的整理,完善了一些没有注意的步骤和细节问题。
一、功能需求:
1、实现打卡功能
2、查看打卡记录
目标拆分:
1、实现用户实时打卡功能
2、确定线上打卡范围
3、处理用户打卡异常情况
4、用户能查询详细的打卡记录
5、了解月度打卡数据、记录
目标用户:工薪阶层、都市白领
二、关键信息提取:
明确需实现的产品功能及目标后,通过提取相关关键词,明确需要主要功能及辅助信息有哪些,确定产品设计具体应包含的信息内容。

关键信息提取
三、同类型产品体验
明确功能设计内容后,在开始设计之前可以体验市场上同类型产品的相关功能设计的优劣,能进一步理清设计流程和步骤。在体验同类产品时,要明确设计需求和目标。
钉钉:阿里旗下的移动办公管理平台。,打卡功能设计比较完备,但因为不是主要功能,对于打卡记录统计比较单一,仅对异常考勤进行的基本的统计和显示。
考勤助手:主要用于用户打卡,单一的打卡功能设计。是一个功能上不是很完备的产品,可体验其打卡流程,其他功能模块可忽略。
喔趣:对比钉钉全方位的办公管理,企业员工考勤管理其更加具有针对性,打卡流程、考勤数据及异常申请流程均比较完备。

同类产品体验
四、流程图:
明确需求及设计目标后,输出基本功能框架图、业务信息流程及页面原型交互流程图,确定设计方案和页面原型。
1)功能框架图

框架图
2)业务流程图

上/下班业务流程图
3)页面流程图
模块1:打卡

打卡流程
模块2:统计

统计流程
模块3:申请

申请流程
五、交互原型详解
具体内容应包括页面功能介绍、页面所处位置及页面交互明细。
模块1:打卡

打卡交互说明
模块2:统计

统计交互说明
模块3:申请

申请交互说明
六、页面交互流程

网友评论