B端项目 | 源目标OKR：交互体验与视觉的优化升级

UI、UX、3D、动效、视频 by：铃屋

2.0优化思路（视频）

源目标OKR是一款面向企业的一站式目标管理saas系统。本次则针对核心功能“OKR”进行了一次复盘及优化升级。

OKR（Objectives and Key Results），即目标与关键结果法，是一套明确和跟踪目标及其完成情况的管理工具和方法。

在1.0版本中，新用户首次进入OKR只能看到一张缺省图和“创建按钮”，且没有任何的引导提示，就连选择目标周期也没有明确的指引，“填写指南”、“推荐案例”、“制定手册”等也都被隐藏在一个二级导航的“更多”icon中，用户查找起来十分不便，更对新用户十分不友好。

在2.0优化版本中，我首先在OKR模块里新增了一个功能聚合页，这不仅能帮助第一次接触OKR的用户快速且直观地了解OKR使用流程，也能从功能入口直接进入他们想要的场景界面。

“填写指南”、“推荐案例”、“制定手册”也以小banner形式放到了聚合页上，是为了方便用户快速找到他们想要了解的信息内容，减少不必要的“搜寻”时间。

除此以外，还针对“制定目标”界面的布局和交互进行了优化重构，一是减少原本弹窗带来的中断感，二是扩大用户的创作区域，配以每个标题下的引导提示，让用户更沉浸式地思考周期目标、制定目标。

此外我还在页面右侧则固定放置了OKR示例，用户可在创作的同时点击切换查看不同职能的示例，多样性的示例为他们提供一定的专业参考，这些小细节的加入可以让用户感受到亲切的引导。

在推进目标阶段，对“KR任务”和“KR进度”两个相同层级的内容进行分类并单独拆出来放置到二级页中，这样不仅能解决信息过载，还能提供干净流畅的交互操作和视觉，让用户更专注于目标本身，完成任务计划。

和“KR任务”一样，“KR进度”也保持同样的左右布局结构，左边展示当前目标，右边则展示更新进度的记录，把1.0版中狭小的查看区域扩展为整个屏幕的三分之二，使用户能够清晰明了地查看进度内容数据。

此外在目标地图中还新增了全局宏观的“企业目标地图”和”部门目标地图”。

从“查看企业”到“查看部门”再到“查看个人”，数据内容进行了从宏观到微观的转换，无论是管理层还是普通员工，都可以在了解目标层层对齐关系的同时，还能实时查看团队整体进度数据和关键指标，帮助企业全员了解整体宏观状况，从上到下提倡共同参与，提高认同感和积极性。

在企业目标视图下，可以清晰地查看全公司成员的对齐情况，鼠标移入成员头像会浮现他的目标卡片；而右侧则展示整个企业的目标进度，分别显示“综合”“预警”和“任务”三个维度的指标数据，每个维度下细分了管理者想要关注的指标，如风险分布、未填写成员分布、进度预警等，这不仅能便于管理者快速追踪、把控整体节奏，还能及时发现问题，做出对应决策，极大地节省了时间成本。

点击地图上的某个人的头像后，即可下钻到个人目标页面。

左边展示的是个人目标卡片对齐逻辑关系。向前可以查看你的上级目标，并层层向前追溯，直至查看到最顶层的目标；向后则是查看对齐自己的目标，以及下级的所有对齐关系。

右侧则展示的是该成员个人的目标统计数据，如任务数量、进展对比、进度趋势、收到的动态内容等，指标数据与个人目标互相对应。这是为了让个人也能时刻掌控自己的目标进度，从而针对自身进度进行调整和激活自驱力，这也符合OKR所带来“主动思考”的特性。

以上便是我从业务的角度出发，通过视觉和交互来解决当前业务问题，保证产品的逻辑闭环，而进行的一次设计思考与优化。