原型即产品，使用 MyBricks 绘制专业原型图

wellknow

在产品开发的生命周期中，团队成员不断在 「产品 > 设计 > 研发」 的流程中进行协作。这个协作流程通常伴随着 「原型图 > 设计稿 > 产品」 的递进演变。各环节涉及的专业工具从 Axure 的原型模拟，到 Figma 的界面设计，再到 Vscode 的代码实现，每一个步骤不仅要求团队成员可以掌握上游成员的专业工具中的信息，还要求团队成员基于自己的专业技能，从 0 到 1 完成工作并交付下游。这无疑给团队带来了非常多冗余的开发成本。
% ^" {1 ?" O7 @* P7 ~: O
# H& Q; ?9 W1 T1 s. T0 X
4 g! S% d. o: ]% P  l如果团队可以基于同一款专业工具进行无缝对接，从「原型图 > 设计稿 > 产品」，上游的交付物可以直接被下游团队所继承使用，认知差异和重复工作的问题就可以引刃而解了，实现更高效协同。

' M; @, P6 t+ w+ q1 s, O: r& i6 ~今天就为大家讲解用 MyBricks 绘制专业原型图的一些基础操作。

- x0 o3 B& |* d5 ^. ?

wellknow

" \0 f1 d$ r( g2 |/ o0 D/ A" _; A
原型图 Demo： https://my.mybricks.world/mybric ... ?id=547362613055557

通过上图可以看到，该原型图包含了高保证 UI，清晰展示产品的概貌，并且自动生成内容填充、原型交互等功能，帮助设计与开发准确拆分页面功能模块及信息展示。

wellknow

<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=1252250019&bvid=BV1XJ4m177tp&cid=1483289494&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>

视频演示
* A7 [" r7 c" s
% J) ^5 k( V5 z

wellknow

基础布局
, T9 E, }. ^; P1 O. a
3 ^/ T" `: r; X8 I5 E6 z操作区主要分为四块：
% `, c2 J2 @3 G$ c% P+ a9 D* r* S
左侧为导航。可以看到「场景目录」和「页面大纲」。

! r  K/ T' J* A$ R+ H1 {2 s

wellknow

右侧为属性设置区。可以对某个元素进行具体参数的修改。

7 \' O; d5 z. d$ l8 m

wellknow

中间为画板区，可以进行所有的绘制工作，尤其注意，我们可以在原型绘制时，将画布状态切换到「Pt 原型模式」。
5 P' }" E3 W7 H2 B1 n7 @) k( B! a

wellknow

底部为交互区，可以设置动态交互内容。

0 S* c5 i" Z! l3 q8 q8 g3 t

wellknow

开始绘制

, Z  |& E8 ?# A; M3 Z. E3 ~点击导航按钮 # 可以依次通过「导航 > 新建场景」路径新建画布。通过多画布可以更直观的绘制页面、对话框等场景。
9 Q: {1 S& r% r+ a% W( s

wellknow

接下来开始绘制原型中的内容，组件库里面有各式各样现成的组件，可以直接使用。例如表单，表格、图表等等。我们找到合适的组件，拖入画布即可。

, H7 M/ e) G) Y5 d' s$ ^6 p4 Q7 [/ J

wellknow

随后可以自由拖动或者输入数字，设置组件的位置和尺寸。以及为组件设置对齐等信息。
# L1 P) J9 e/ U7 y; L6 R, Q
8 h' s. G4 _7 F