什么是原型设计
- 软件开发需求阶段的效果图
- 便于产品经理和开发者沟通交流的设计图
- 前端页面显而易见
有哪些原型设计工具
- 鼻祖是Axure
- APP原型制作浏览方便——墨刀
- 美观高保真国产新秀——mockplus
- 其他Marvel、Flinto、Balsamiq等等
如何使用工具设计原型
- 确定需求
- 下载原型设计工具，这里使用mockplus讲解。
-
官网下载软件
下载软件 -
注册账号
注册账号 -
账号登陆
账号登陆 -
新建项目
新建项目 -
选择项目类型，以web为例
选择项目类型 -
控制面板介绍：第1部分是页面文件栏，你的产品有几个页面都在这里展示。第2部分是工具栏，里面有许多封装好的组件，拖动可使用，也可以自己在组装需要的组件 。第3部分是工作区，将需要的组件拖到此处构成我们需要的web页面，上面三角符号可以生成预览。第4部分是组件状态和属性区，可以设置组件的不同属性，也可以给组件添加点击事件、设置页面跳转链接等。Axure面板类似，看起来也很整洁美观。
Mockplus面板
Axure面板.PNG
-
牛刀小试（模仿APPLE中国官方网站）
上面是菜单栏，下面是商品图片展示iPhone X、iPhone8等等。
APPLE中国官方网站.PNG
-
第一步：选择形状，然后在面板右边设置长宽颜色等属性
t6.PNG -
第二步：选择‘链接’，放到合适的位置，设置相关属性。ps:一些logo（如被咬了一口的苹果和搜索）需要升级软件为专业版才能使用。
t7.PNG -
第三步：选择图片，上传，设置图片大小，放到合适的位置。一个完整的页面就建好了
t13.PNG -
第四步：新建一个Mac界面。
t16.PNG -
第五步：设置页面链接
t17.PNG -
第六步：点击工作区上放三角符号预览,点击Mac页面也会进行跳转，仿真模拟web页面。
t18.png
PS:手机应用APP也类似设置，更多强大的好看好玩的例子请参考mockplus官网。
工具只是我们用来更好工作的，我们关注的更应改是创造和设计，希望大家能够利用好的工具高效率地做出更好的产品。
