【PM】画原型图

¶写在前面 / 链接存档

• 原型图怎么画？新手学习只需要这几步

¶制作原型图的步骤（部分可选）

• 第一步：用墨刀创建一个原型项目

  • 可以选择新建一个空白原型稿，适配于手机、网页、iPad，或者自定义大小
  • 也可以选择墨刀提供的精品模版，这样就无需从头搭建，减轻工作量，提高工作效率

• 第二步：拖动组件到画布进行创作

  • 在墨刀画布右侧浮动着工具栏，用于添加素材
  • 素材库包含许多内置的基础组件、高级组件及页面
  • 双击或拖拽组件，即可添加组件至画布
  • 需要改变某个组件的默认外观时，点击选中组件，在右侧的“外观”编辑面板会展示该组件的所有属性，可以按需改变颜色、边框、阴影等

• 第三步：给原型做交互
  • 原型交互：把静态的画面变成动态可交互，更好地向团队成员传达自己的设计理念，减少沟通上的歧义，交互包括页面的跳转和状态的变更
  • 页面交互：
    • 点击按钮，跳转下一页面
    • 点击返回，返回至上一页面
  • 点击“按钮”，按钮旁边的灰色闪电图标用于拖拽交互
  • 把闪电图标拖动到画布左侧页面列表中的其他界面，松开鼠标，建立按钮与页面之间的链接
  • 同时右侧“事件”面板将展示这个交互事件的属性，包括行为和动效

• 移除事件，点击链接线上的“剪刀”图标

• 第四步：状态设置

  • 墨刀的状态与Axure的动态面板类似，都是指：同一个页面或组件，在不同情况下的不同样式
  • 可以使用状态变化来展现组件的位置、颜色、形状变化等

• 【例子】：使用墨刀创建图片放大缩小的效果

  1. 从组件库添加一个“图片上传”的组件
  2. 点击画布右侧工具栏中“状态”图标，可以看到页面含有一个默认状态。可以新建或复制状态

3. 点击新建按钮，新建一个页面状态。

4. 双击状态名称，可以修改状态名。将状态名称修改为“图片”和“图片放大”。

5. 建立链接：点击需要交互的图片，将会出现一个“闪电”图标。将“闪电”图标拖拽至页面状态列表中“图片放大”状态，就在两者间建立了一个链接。
6. 可以看到事件属性面板中，动效默认设置为“神奇移动”。神奇移动是墨刀的内置动效，可以使元素的状态变化平滑过渡，而不是生硬的切换，演示效果出众。

7. 同样地将“图片放大”状态中的大图链接至默认的页面状态，动效也为“神奇移动”。这样图片放大缩小的动效就完成了。

• 第五步：预览原型效果

  • 点击工具栏右上角“预览”图标，可以进入预览界面。
  • 预览区可以选择预览方式，如真机、长页面、PRD方式等。

• 第六步：分享

  • 墨刀提供一键分享方式，与团队成员共享原型。
  • 点击预览界面右上角“分享”图标，将会出现分享设置对话框。
  • 可以设置密码、评论权限、PRD查看权限等，也可以设置预览模式、批注显示。
  • 将自动生成的二维码或链接发送给同事，就完成了分享。
  • 点击“可见界面”，设置是否自动分享所有界面
  • 点击“嵌入第三方”，可以复制嵌入的iframe代码

• 第七步：标注

  • 开发同事接到原型分享后，需要查看一些开发细节。
  • 我们可以点击预览页面的“标注”按钮，页面将会显示每一个元素的间距，右侧面板也将展示字体和css代码，便于开发。

• 第八步：评论
  • 原型设计完成后，需要收集团队意见。
  • 墨刀支持直接在预览页面添加评论。将顶部工具栏切换到“评论”页面，双击预览区，在输入框输入评论内容，即可完成评论。
  • 添加后的评论将会出现在右侧面板，以供随时查看。

¶原型图制作的注意事项

1. 画原型之前要做调研，首先要明确原型图是画给谁看的，你的目标群体是谁。

→不同的职能角色关注点不同。角色分为：

• 客户/领导→功能整体流程、原型易读性、价值体现等
• 团队成员→
  • UI 设计→元素之间的关系，排版，布局
  • 开发→功能本身，功能复杂度，边界条件，异常情况等
  • 测试→原型是否穷尽考虑到各个场景，以辅助他们写测试用例

2. 明确自己画原型的目的，可以问自己几个问题，整体流程是怎样的？分为几个功能模块？会有哪些用户场景？

• 通常需要画一个流程图或者思维导图来梳理思路

• 墨刀自带的思维导图功能十分强大，界面布局极简，但常用功能又尽在手边，让用户更加聚焦于思维本身，降低思维噪点

  感觉这个表达可以学一下hhhh

• 通过清晰结构化的信息展示方式，助力将一闪而过的灵感梳理成具象脉络。

3. 画原型的时候要根据用户体验注意每个地方的逻辑，点这里到哪里，点那里到哪里，也就是页面之间的流转关系。

• 用户通过什么操作进了什么页面，后续又有什么操作及页面，要注意设计考虑好页面之间的跳转链接和顺序。
• 可以先列一个大纲，帮助更清晰地梳理考虑每个页面重点、每项功能的前置与后置，提高原型效率，可以更好地帮助产品跟其他岗位人员沟通，减轻之后一些不必要的修改工作量。

4. 画完原型一定要预览，把每个地方的逻辑重新捋一遍。

• 首先换位思考，把自己带入对应岗位角色中去，把角色所关注的地方都复现检查一遍；
• 结合思维导图，各个功能模块是否设计考虑完整；
• 跑通整体流程，检查每一个闭环、页面跳转流程顺序。
• 各方面预览自查一遍后，再进行下一步演示分享，降低错误率，进一步提高工作效率。

5. 最后，把画好的原型共享给其他岗位人员，可以召开会议演示说明，收集建议，然后根据各方建议再进一步优化。

产品Showcase