原型设计小工具使用介绍

什么是原型设计

• 软件开发需求阶段的效果图
• 便于产品经理和开发者沟通交流的设计图
• 前端页面显而易见

有哪些原型设计工具

• 鼻祖是Axure
• APP原型制作浏览方便——墨刀
• 美观高保真国产新秀——mockplus
• 其他Marvel、Flinto、Balsamiq等等

如何使用工具设计原型

1. 确定需求
2. 下载原型设计工具，这里使用mockplus讲解。

• 官网下载软件

  
  
  

  下载软件

• 注册账号

  
  
  

  注册账号

• 账号登陆

  
  
  

  账号登陆

• 新建项目

  
  
  

  新建项目

• 选择项目类型，以web为例

  
  
  

  选择项目类型

• 控制面板介绍：第1部分是页面文件栏，你的产品有几个页面都在这里展示。第2部分是工具栏，里面有许多封装好的组件，拖动可使用，也可以自己在组装需要的组件 。第3部分是工作区，将需要的组件拖到此处构成我们需要的web页面，上面三角符号可以生成预览。第4部分是组件状态和属性区，可以设置组件的不同属性，也可以给组件添加点击事件、设置页面跳转链接等。Axure面板类似，看起来也很整洁美观。

  
  
  

  Mockplus面板
  
  
  

  Axure面板.PNG

3. 牛刀小试（模仿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官网。
  工具只是我们用来更好工作的，我们关注的更应改是创造和设计，希望大家能够利用好的工具高效率地做出更好的产品。