石墨表单 · 产品体验设计

从主流程,到每一道题。

从发布者与填写者的两种视角出发,让表单的路径、状态与操作变得清晰。

阅读设计过程
表单编辑器 · 主流程、内容编辑与题型选择

产品理解与设计方法

先看清路径,再看清问题项。

表单的使用步骤相对明确。我先区分发布者与填写者,再把主链路与围绕问题项的操作连接起来,建立这个产品的交互设计框架。

两种角色,共同构成主链路。

发布者创建、设计、发布并回收数据;填写者获取、填写并提交表单。发布与提交把两条路径连接在一起。

发布者与填写者的主链路

主链路中的每一步,落到问题项。

问题项构成表单的具体内容,添加、编辑、逻辑与设置等子链路围绕它展开。设计时,同时检查流程和问题项,才能覆盖整体与细节。

主链路与问题项的关系

从方法到方案

把目标放进用户旅程,找到设计的切入点。

与产品共同明确目标后,我按发布侧和填写侧拆解操作、用户需求、交互与视觉问题,再将分析收敛为具体设计任务。

01

改善使用效率与体验

检查创建、编辑、发布与填写过程中的阻碍。

02

连接表单与表格数据

把数据回收放回后续分析的链路中思考。

03

支持获新与套件衔接

考虑填写者提交后的反馈与后续入口。

用户旅程分析 · 发布侧与填写侧的完整分析

设计优化 A

让主流程可见,让修改有路径。

原有流程通过多个功能按钮推进,用户难以感知整体路径。我将主链路显化为可跳转的阶段,并用标签明确当前状态。

01

当前处于哪个阶段

阶段导航持续可见。从搭建、设计,到收集与分析,分散的入口组织为可以自由跳转的连续路径。

主流程导航
02

当前是否正在收集

右上角状态标签独立表达表单的收集状态,与正在编辑的内容区分。

收集状态
03

修改是否已经发布

编辑区域提示未发布修改,发布动作就在操作区。让用户知道当前编辑是否已经对填写者生效。

发布动作与未发布修改提示 · 编辑器局部

设计优化 B

不同的设置,遵循同一种结构。

将设置面板统一为“左侧目录、右侧内容”。填写限制、答案与分值、收集对象共享同一套组织方式,帮助用户定位和理解设置。

填写限制 · 目录与内容分区
01

目录提供稳定的位置

把设置项的分类与当前位置展示出来。

02

内容围绕当前任务展开

在同一结构中承接不同参数与操作。

答案与分值 · 同样的目录结构承接题目设置
收集对象 · 目录组织分组,内容呈现成员

设计优化 C

让每一道题,都属于同一套体验。

从问题卡片到输入、选择与辅助面板,统一视觉层次和交互表达。组件的差异来自任务,组织方式保持一致。

问题卡片

标题、描述与回答区域形成稳定结构。

选择题 · 问题卡片
评分 · 问题卡片
文本输入 · 问题卡片
手写签名 · 问题卡片
富文本 · 内容编辑

控件与辅助面板

把同一套规则延伸到选择、日期与菜单操作。

答案校验与评分反馈
级联选择
日期选择
题型菜单
选项菜单

设计回看

用清楚的路径,组织完整的体验。

这个项目从表单的线性结构出发,把两种角色、主链路和问题项联系起来,再将分析落实到流程、设置和控件三层设计。完整的交互框架,也成为后续迭代可以沿用的基础。

表单与表格的数据贯通、获新与套件导流是项目的产品目标;本页具体展示的是主流程、设置面板和控件的设计方案。

继续探索

应用表格

从独立的回答,走向相互关联的任务。

流程图