找回密码
 立即注册
查看: 6370|回复: 13

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

[复制链接]

330

主题

510

回帖

3322

积分

管理员

积分
3322
QQ
发表于 2024-12-5 18:29:06 | 显示全部楼层 |阅读模式

( ?- n- ], w! P) [; E) U* ]/ r  r在产品开发的生命周期中,团队成员不断在 「产品 > 设计 > 研发」 的流程中进行协作。这个协作流程通常伴随着 「原型图 > 设计稿 > 产品」 的递进演变。各环节涉及的专业工具从 Axure 的原型模拟,到 Figma 的界面设计,再到 Vscode 的代码实现,每一个步骤不仅要求团队成员可以掌握上游成员的专业工具中的信息,还要求团队成员基于自己的专业技能,从 0 到 1 完成工作并交付下游。这无疑给团队带来了非常多冗余的开发成本。& |8 l- k" F7 X$ `' r: m
0 Q; v" M+ T: A7 S( ?1 \- |

  f1 x  n! ?4 e* c如果团队可以基于同一款专业工具进行无缝对接,从「原型图 > 设计稿 > 产品」,上游的交付物可以直接被下游团队所继承使用,认知差异和重复工作的问题就可以引刃而解了,实现更高效协同。
6 ]6 _; ^2 L8 l- h/ Q! O6 W) l
. d1 q# s3 b: S* f" G4 ^$ ]# Y  `今天就为大家讲解用 MyBricks 绘制专业原型图的一些基础操作。" Z% i: P/ L" _& J5 c8 |8 J% o
8 X4 J+ `: b3 Z* v6 M0 c
$ F7 E' E3 E5 H: J' Q1 x9 |# [
回复

使用道具 举报

330

主题

510

回帖

3322

积分

管理员

积分
3322
QQ
 楼主| 发表于 2024-12-5 18:29:54 | 显示全部楼层
$ j2 f; B4 K) T# T; s

! Y* b' [: p5 ^/ L/ D! F原型图 Demo: https://my.mybricks.world/mybric ... ?id=5473626130555571 B" c& w8 a. \/ M8 Y: g

2 `$ Q6 h. Q$ S' o) b5 [( T8 p通过上图可以看到,该原型图包含了高保证 UI,清晰展示产品的概貌,并且自动生成内容填充、原型交互等功能,帮助设计与开发准确拆分页面功能模块及信息展示。
回复

使用道具 举报

330

主题

510

回帖

3322

积分

管理员

积分
3322
QQ
 楼主| 发表于 2024-12-5 18:31:45 | 显示全部楼层
<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>6 M8 d( a! h, ~. x

' ~( `5 x' h- `/ c6 ?% p* c视频演示( B) ~1 t" z* }) T+ [+ {- n
% G8 l: I' E$ J% h* k
回复

使用道具 举报

330

主题

510

回帖

3322

积分

管理员

积分
3322
QQ
 楼主| 发表于 2024-12-5 18:33:10 | 显示全部楼层
基础布局
) [5 y0 I: O# {" U
' X2 U5 a1 l/ g% n3 o操作区主要分为四块:
# n$ G  P9 W3 F% H( o8 |3 k" M' w
左侧为导航。可以看到「场景目录」和「页面大纲」。# F. q" ?2 J% k: T( c
, k3 B! n3 f! b- n- v
回复

使用道具 举报

330

主题

510

回帖

3322

积分

管理员

积分
3322
QQ
 楼主| 发表于 2024-12-5 18:33:46 | 显示全部楼层
右侧为属性设置区。可以对某个元素进行具体参数的修改。, D" n0 R  f- U) W/ K

( C  y. e4 Q2 m- H+ m
回复

使用道具 举报

330

主题

510

回帖

3322

积分

管理员

积分
3322
QQ
 楼主| 发表于 2024-12-5 18:42:26 | 显示全部楼层
中间为画板区,可以进行所有的绘制工作,尤其注意,我们可以在原型绘制时,将画布状态切换到「Pt 原型模式」。7 p0 P( t$ Q& T4 V9 k# C
4 _# }$ z/ v/ P+ @( j$ O
回复

使用道具 举报

330

主题

510

回帖

3322

积分

管理员

积分
3322
QQ
 楼主| 发表于 2024-12-5 18:43:11 | 显示全部楼层
底部为交互区,可以设置动态交互内容。
. e+ ~4 N# x( e$ F- h4 d+ f, r6 _" b* E; {4 [& N
回复

使用道具 举报

330

主题

510

回帖

3322

积分

管理员

积分
3322
QQ
 楼主| 发表于 2024-12-5 18:43:54 | 显示全部楼层
开始绘制
6 x1 _+ A. I1 f" r2 F1 f0 o4 w/ v- L& ^2 R3 l- R7 N7 O
点击导航按钮 # 可以依次通过「导航 > 新建场景」路径新建画布。通过多画布可以更直观的绘制页面、对话框等场景。, z& X$ V- c8 j7 P0 N0 V

$ s+ g. W! H8 w4 w8 Z' h
回复

使用道具 举报

330

主题

510

回帖

3322

积分

管理员

积分
3322
QQ
 楼主| 发表于 2024-12-5 18:51:40 | 显示全部楼层
接下来开始绘制原型中的内容,组件库里面有各式各样现成的组件,可以直接使用。例如表单,表格、图表等等。我们找到合适的组件,拖入画布即可。
/ ^& _; i: D! w. E7 p3 {* \
' [+ q+ w4 B. ?
回复

使用道具 举报

330

主题

510

回帖

3322

积分

管理员

积分
3322
QQ
 楼主| 发表于 2024-12-5 18:52:14 | 显示全部楼层
随后可以自由拖动或者输入数字,设置组件的位置和尺寸。以及为组件设置对齐等信息。
5 W3 Z4 b& K* W7 L3 t, m
6 i, Z3 v# R4 z1 ]
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|通达产控投资 ( 粤ICP备2023021749号-1|粤公网安备 44030402006137号 )

GMT+8, 2025-10-29 16:08 , Processed in 0.105179 second(s), 3 queries , Redis On.

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

快速回复 返回顶部 返回列表