微距探秘5分钟内轻松创作完美交互稿
在创作合适的交互输出稿之前,我们需要考虑这份稿子将会呈现给谁,包含哪些关键内容,以及在缺少这些内容时可能出现的问题。不同的企业规模和工作流程可能会导致不同的对接人员和职位,因此重要的是要探索并根据自身企业的情况来制作合适的交互输出稿。这意味着我们需要了解潜在的受众包括产品经理、产品运营、UI设计师、后台开发者、重构设计师以及前端开发者,并确保我们的交互输出能够满足他们的需求。
通常,交互可能会涉及到与3-4个主要职业进行沟通:产品经理和产品运营负责功能实现和页面跳转;UI设计师负责原型布局和视觉效果;后台开发者关注逻辑关系和信息架构;而重构设计师则专注于H5页面或网页等操作说明。前端开发者则负责APP中的操作反馈,他们可能参与数据交接或APP前端还原工作。
为了提高工作效率,根据产品阶段和需求,我们可以选择图片展示型或者网页文档型的表达形式。图片展示型适用于迭代过程中简单且集中图像内修改,而网页文档型更适合初版发布或大改版,以便复制文案并提供清晰页面跳转。
首先,我们需要确定是使用图片展示还是网页文档类型。在图片展示中,我们应该包含以下细节:
信息架构:分为功能性信息架构(突出每个页面入口)以及层级式信息架构(明确显示层级结构)。
操作流程:描述用户点击后的反馈,如弹窗、跳转或其他动态效果。
原型布局:采用灰度层次,尺寸应为UI设计的一半,以确保一致性。
业务流程:描述主业务流程及其逻辑判断。
优化要点:记录每次更新迭代的优化措施,便于对接人快速理解改动点。
交互说明:解释规则、动作描述及状态变化等非文字难以表达的事项,用图示或GIF图替代文字说明特殊操作部分,有时候用静态图有时用动态GIF都可以传递清楚含义。
对接人员: 明确上下游对接的人员,让对方知道责任分配,这样当问题发生时能迅速找到相应的人员处理。
特殊操作: 对于复杂无法用文字准确表述的情形,可以单独制作示意图以供参考
最后,对于网页文档形式,其整体框架类似,但位置不同,一侧是导航栏,便于快速查看各个模块内容。无论是图片展示还是网页文档,每种类型都应该包含但不限于以下8条细则:
1., 原型布局, 使用高质量灰度层次还原内容, 尺寸为UI设计稿的一半;
2., 交互说明, 解释一些特定的交互效果或者规则;
3., 操作流程, 描述点击后的反馈是什么去哪还有什么提示;
4., 业务流程, 描述主业务流程及逻辑判断;
5., 优化要点, 提供本次迭代所有优化点让多方即时查看;
6., 对接人员, 确定本次上下游对接人的名称;
7., 特殊操作, 复杂操作需单独制作示意图;
8., 信息架构(对于初期版本), 增加一个全面的信息架构图;
通过这样的详尽准备,不仅能提升团队成员之间沟通效率,还能帮助项目顺利推进至最终完成阶段。