原型发出去被追着问?4个维度标注清单一次过

用户头像
成都/设计爱好者/1天前/312浏览
原型发出去被追着问?4个维度标注清单一次过
原型交付给设计师和开发后,往往才是很多产品经理最费劲的时候。
"这个按钮点击之后跳哪个页面?""这个弹窗什么时候触发?""搜索没有结果的时候界面是什么样的?""这个字段的数据从哪里来?"……
这种来回确认消耗的不只是时间,还有设计师和开发的注意力。更关键的是,很多问题是在开发到一半才被发现的,这时候改动的成本已经不只是修改原型了。
如何做才能减少摩擦,让团队协作更高效呢?本文整理了一份详细的标注清单,相信能帮助到有此困惑的小伙伴~
原型发出去被追着问?4个维度标注清单一次过(图ZMTU4OTA3MTY=) - 资讯 - 站酷设计师摹客设计云原创素材 - 站酷ZCOOL
收藏
一、为什么原型发出去后,还要来回确认?
1、产品经理、设计师、开发看同一张原型,找的是完全不同的信息
产品经理画原型时,脑子里装的是完整的产品逻辑,知道每个按钮背后的业务规则,知道这个弹窗在什么条件下出现,知道哪些页面还没画是因为复用了现有设计。但这些信息存在产品经理的脑子里,不在原型文件里。
设计师拿到原型,找的是:这里有几种状态需要设计?这个组件复用现有的还是新做一个?这个页面的视觉层级是怎么排的?如果原型里没有说明,设计师只能自己琢磨。
开发拿到原型,找的是:这个交互的触发条件是什么?数据从哪个接口来?这个字段有没有长度限制?报错了界面是什么样的?这些问题如果原型里没有回答,开发要么跟产品拉扯,要么自己做判断,两种结果都不理想。
2、信息分散在不同的工具和文件里
产品经理用一个工具画原型,设计师用另一个工具做 UI 稿,项目信息没有一个统一的地方存放,每次沟通都要先花时间对齐"我们在看同一个版本吗"。
不过,这个问题在工具层面有更好的解决方式,现在有一些一体化的产品设计平台,比如摹客3,为产品经理和设计师中提供了专属的原型和UI模式,保证产品经理和设计师在协同时,可以保持各自原有的偏好和习惯。
更重要的是,摹客3原生实现了原型设计和UI设计的底层数据互通,产品经理和设计师之间的设计资源可相互复用,同时它还内置了开发模式,开发可以直接在平台里取标注、查切图、看交互逻辑。
免费使用地址:
https://www.mockplus.cn/m3
也就是说,所有项目信息,从原型稿、UI 稿到开发交付,都在同一个地方查看,极大地提升了团队的设计效率!
原型发出去被追着问?4个维度标注清单一次过(图ZMTU4OTA3MjA=) - 资讯 - 站酷设计师摹客设计云原创素材 - 站酷ZCOOL
收藏
二、交付原型稿前,按这个顺序检查
1、交互逻辑(设计师和开发都需要)
这是原型里最基础、也最容易漏掉的部分。
  • 每个可点击元素的跳转目标
    :不只是"点击跳转到下一页",要说清楚跳转到哪个具体页面、是当前页跳转还是新开页面、有没有过渡动效。
  • 弹窗和抽屉的触发条件
    :什么操作触发、触发的前置条件是什么(比如"只有管理员角色才能看到这个入口")、触发后背景是否需要遮罩。
  • 弹窗和抽屉的关闭方式
    :点击遮罩关闭还是只能点关闭按钮?关闭时有没有二次确认?关闭后页面状态是否刷新?
  • 页面内的状态切换逻辑
    :Tab 切换、筛选器变化、展开收起,每一种状态切换的触发方式和对应的视觉变化都需要说明。
  • 需要动效的地方
    :如果某个交互需要特定的动效(比如列表项删除时的消失动画),这里是唯一能说清楚的地方,不要等到开发问了再说。
2、边界场景(主要给开发)
边界场景是原型里最容易被忽略、但开发最需要的信息。主流程画完了,边界场景没交代,开发只能自己做判断。
  • 空状态如何展示
    :这个列表没有数据时显示什么?是插图加文案,还是提示用户去创建第一条记录?文案是什么?有没有行动按钮?
  • 加载中状态:
    是骨架屏还是 loading 动画?加载超时之后怎么处理?
  • 报错状态:
    接口报错时界面是什么样的?文案是什么?用户可以做什么操作来恢复?
  • 数据超长或超短时的显示处理
    :用户名超过 20 个字怎么截断?金额为 0 的时候显示"0"还是"——"?列表只有一条数据时布局有没有变化?
这四条里,空状态和报错状态是最常被遗漏的。原型里往往只画了数据正常的样子,边界场景一句话没有,开发完全靠猜。
原型发出去被追着问?4个维度标注清单一次过(图ZMTU4OTA3MjQ=) - 资讯 - 站酷设计师摹客设计云原创素材 - 站酷ZCOOL
收藏
3、视觉说明(主要给设计师)
这个维度的标注是减少设计师返工的关键,也是 产品经理 和设计师协作中最容易产生摩擦的地方。
  • 哪些元素需要新设计,哪些复用现有组件
    :如果你知道这个按钮应该用现有组件库里的某个组件,直接说清楚,省得设计师重新做一个。如果你不确定,也要标注出来,让设计师做判断,而不是让对方猜你的意思。
  • 特殊的视觉要求或参考
    :如果对某个模块有具体的视觉期望,比如参考了某个竞品的某个页面,或者有特定的情绪基调要求,这里是放参考图或说明的地方。
  • 页面信息层级和视觉权重说明
    :一级信息、二级信息、需要突出的操作按钮是哪些,说清楚,让设计师知道视觉重心在哪里。
  • 响应式适配要求
    :这个页面需要适配移动端吗?平板端的布局是否需要单独设计?还是只做桌面端一个尺寸?
4、业务逻辑与数据说明(主要给开发)
这个维度的内容最容易被 产品经理 默认"开发自己知道",但开发不知道。这里的每一条缺失,都可能在联调阶段变成一个单独的问题。
  • 字段来源和数据类型
    :这个列表的数据从哪个接口来?用户名是字符串还是有长度限制?时间字段的格式是什么?
  • 权限控制逻辑
    :哪些操作只有特定角色才能做?没有权限时入口是隐藏还是置灰?置灰时有没有 tooltip 说明?
  • 涉及计算的字段,计算规则是什么
    :这个"总金额"是所有订单金额相加,还是只算某种状态下的订单?这个百分比是怎么算出来的?
  • 接口依赖或第三方服务依赖
    :这个功能依赖某个第三方服务吗?如果第三方服务不可用,界面有没有降级方案?
原型发出去被追着问?4个维度标注清单一次过(图ZMTU4OTA3Mjg=) - 资讯 - 站酷设计师摹客设计云原创素材 - 站酷ZCOOL
收藏
最后,再给大家提供一个可复用的交付 SOP,建议在发出原型之前,切换到"设计师视角"和"开发视角"各走查一遍。
1)设计师视角走查
从第一个页面开始逐页过,重点看有没有遗漏状态说明、视觉要求有没有交代清楚、组件复用和新做的分界线在哪里。
2)开发视角走查
按主流程点一遍,每遇到一个交互就问自己三个问题:触发条件说清楚了吗?边界场景说清楚了吗?数据来源说清楚了吗?
走查不需要花太多时间,基本很快就能发现几个之前没意识到的信息缺口。这些缺口如果交付前没补上,就会变成交付后的来回问题,每一个都需要打断对方的工作节奏,等你回复,再继续。
走查做完,把整个交付流程串起来就是这样:
  • 画完原型,先不急着发
  • 对照标注清单四个维度逐条过,把缺失的信息补进去
  • 切换视角走查一遍,重点看跳转是否完整、边界场景是否覆盖
  • 发出前问自己一个问题:对方收到这份原型,最可能问的第一个问题是什么?如果还能想到,把答案补进去
  • 交付原型稿
这个流程第一次用会花点时间,熟练之后补标注和走查会成为画原型过程中自然发生的习惯,不需要单独留出时间。
减少原型交付后的来回沟通,本质只有一件事:在发出去之前,把对方会问的问题提前回答掉。
你不需要每个项目都做到满分,但在每次交付前过一遍,基本上就能系统性地堵上大部分信息缺口,让原型真正发挥沟通工具的作用。
0
举报
|
收藏
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
我要奋斗
炫光
船坞民宿概方案
彩灯_花灯_春节彩灯_春节花灯_马年彩灯_马年花灯
二十四节气图片之霜降
法治景观雕塑小品
玫瑰
木纹贴图设计师常用
国画水墨江南山水画装饰画电视背景墙装饰画
宠物纪念相册H5模板系列 · 温馨治愈系 · 三款主题
汉堡插画
 ps常用偷懒笔刷
上古神兽犼大战三龙
中秋节 团圆 月亮 矢量
黑白荧光色实验性风格|个人作品集排版简历模板
古典中国风线香礼盒包装设计矢量素材
24款ps常用植物笔刷
乐陶创意体验工坊标志设计
法治景观雕塑小品
苏门答腊虎母子插画
女生半身插画
快递购物电商矢量插画
红黑色简约现代风格|个人作品集排版简历模板
love玫瑰花
卡通兔子插画
你可能喜欢
相关收藏夹
地产VI
地产VI
地产VI
地产VI
大家都在看
登录注册