mockplus 原型设计工具

国产原型工具 http://www.mockplus.cn, 该工具功能很棒.

每次打开软件都需先登陆, 好在项目文件是可以保存到本地, 可以注册为免费版/个人版/团队版/企业版. 我是免费账号, 功能自然有限制, 但不影响整体使用, 我的账号 harry@163.com, 也可以通过手机号登录, 官网博客经常有免费的激活码, 激活后可以升级为个人账号(1个月有效).
mockplus UI 做的很棒, 而且跨平台, 我特意使用 winspyex 简单分析了一下, 是用新版Delphi 的 firemonkey 技术开发的.

mockplus 教程: https://doc.mockplus.cn/?p=152 https://doc.mockplus.cn/?cat=20
mockplus 博客: https://www.mockplus.cn/blog
免费的 Pencil Project , http://pencil.evolus.vn/

=========================
几个组件的使用
=========================

"文字表格"组件:
文字表格有点像 pencil 中的表格, 可以直接通过写内容的方式设定表头和每个cell的文字, 比pencil强大多了, pencil表格最让人抓狂的是, 没法控制每列的宽度, mockplus 可以在内容最后一行使用特殊的语法控制每列宽度和对齐方式, 比如 {2,2R,4R,4C,2C} , 可以猜出来这个表格共5列, 每列有不同的对齐方式.

"表格"组件:
"表格"组件要比"文字表格"组件更强大, 它更像是Excel的样子, 可以控制行高、列宽、合并单元格, 以及调整每个cell的边框样式.
甚至我们可以将Excel的内容直接复制进来.

"热区"组件:
"热区"是一个特殊的组件, 它是透明的(即不可见), 但是有大小. 可以看作是一个隐形的按钮, 主要是用来完成交互设计, 使用"热区"来响应点击等事件, 完成互动设计.

"导航"组件:
web 设计中常用, 用来展现"首页>软件>下载"这样的导航效果, 导航条中每个链接都可以引出交互热点.

"内容面板"组件:
这个组件有点像Delphi的Frame概念, 内容面板可以包含多个frame, 每个frame都可以关联到其他的"页面", 注意是"页面", 而不是普通组件. 也就是说"内容面板"组件是页面容器, 比如 frame1 关联了 page1, frame2 关联了 page2. 如果我们有两个按钮 button1 和 button2, 点击button1/button2分别想跳转到page1/page2上, 这时候, 我们可以将button1和frame1绑定, 就能达到点击button1跳转到 page1; 同理button2也一样.

"弹出面板"组件:
如果想在页面上弹出一个对话框, 可以加一个弹出面板, 该面板是一个不可见容器, 可以在容器中加入UI组件. 如果要想在某个组件上触发一个弹出对话框, 可以将该组件和"弹出面板"关联. 在弹出时, 弹出面板画布会覆盖在原来的画布上, 达到弹出效果.

=========================
原型设计技巧
=========================
如何设定一个组件在页面加载时隐藏?
方法1 (推荐): 加一个定时器组件, 将定时器的延时设置为 0, 再将定时器和该组件绑定即可.
方法2(不推荐): 直接将该组件设置为不可见, 这个方法的缺点是, 在设计时候该组件会变成一个淡黄色的长方形, 然后就看不出这到底是一个什么组件了.

=========================
几个功能介绍
=========================
"数据填充"功能
在mockplus 工具条有个油漆桶按钮, 即是数据填充.
1. 页面上选中Text和Label等组件, 然后使用"数据填充"功能可以很方便地填写一些文字内容, mockplus 内置了很多文本模式, 有人名/日期/邮箱/随机文字等等.
2. 也支持图片组件的填充
3. 支持单独组件的填充, 也支持批量填充.

"转换为快速格子"功能(即Repeater)
在mockplus 工具条的"格式刷"旁边, 有一个井字形的工具, 即为"转换为快速格子", 这个功能非常好用, 可以实现批量复制的功能. 具体操作为,在页面上 选中一个或多个可视化组件, 然后点击该工具按钮, 就能形成一个小的cell, 该cell有横向和纵向复制功能. 再配合"数据填充"功能可以很快完成大量数据的录入.

"脑图"功能
脑图功能是项目树的脑图风格, 比较适合形成演示, 或者放到设计文档中.

"项目模板"功能
mockplus 安装包包含一个移动app的示例, 对于web示例, 可以在创建项目界面中, 选择下载一个在线模板, 然后在这个基础之上作业修改.