锐客网

  1. 首页 > 睿知 > it技术 > >

mockplus 原型设计工具

IT知识mockplus设计工具

亦余心之所善兮，虽九死其犹未悔。这篇文章主要讲述mockplus 原型设计工具相关的知识，希望能为你提供帮助。
国产原型工具 http://www.mockplus.cn, 该工具功能很棒.
每次打开软件都需先登陆, 好在项目文件是可以保存到本地, 可以注册为免费版/个人版/团队版/企业版. 我是免费账号, 功能自然有限制, 但不影响整体使用, 我的账号 harry@163.com, 也可以通过手机号登录, 官网博客经常有免费的激活码, 激活后可以升级为个人账号(1个月有效).
mockplus UI 做的很棒, 而且跨平台, 我特意使用 winspyex 简单分析了一下, 是用新版Delphi 的 firemonkey 技术开发的.
mockplus 教程:https://doc.mockplus.cn/?p=152https://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 原型设计工具】几个功能介绍
=========================
"数据填充"功能
在mockplus 工具条有个油漆桶按钮, 即是数据填充.
1. 页面上选中Text和Label等组件, 然后使用"数据填充"功能可以很方便地填写一些文字内容, mockplus 内置了很多文本模式, 有人名/日期/邮箱/随机文字等等.
2. 也支持图片组件的填充
3. 支持单独组件的填充, 也支持批量填充.
"转换为快速格子"功能(即Repeater)
在mockplus 工具条的"格式刷"旁边, 有一个井字形的工具, 即为"转换为快速格子", 这个功能非常好用, 可以实现批量复制的功能. 具体操作为,在页面上 选中一个或多个可视化组件, 然后点击该工具按钮, 就能形成一个小的cell, 该cell有横向和纵向复制功能. 再配合"数据填充"功能可以很快完成大量数据的录入.
"脑图"功能
脑图功能是项目树的脑图风格, 比较适合形成演示, 或者放到设计文档中.
"项目模板"功能
mockplus 安装包包含一个移动app的示例, 对于web示例, 可以在创建项目界面中, 选择下载一个在线模板, 然后在这个基础之上作业修改.









    推荐阅读


    上一篇：unbuntu apahce 2 设置 多域名

    下一篇：ubuntu 12.04 react-native 安装