什么是原型設計

• 軟件開發(fā)需求階段的效果圖
• 便于產(chǎn)品經(jīng)理和開發(fā)者溝通交流的設計圖
• 前端頁面顯而易見

有哪些原型設計工具

• 鼻祖是Axure
• APP原型制作瀏覽方便——墨刀
• 美觀高保真國產(chǎn)新秀——mockplus
• 其他Marvel、Flinto、Balsamiq等等

如何使用工具設計原型

1. 確定需求
2. 下載原型設計工具，這里使用mockplus講解。

• 官網(wǎng)下載軟件

  
  
  下載軟件

• 注冊賬號

  
  
  注冊賬號

• 賬號登陸

  
  
  賬號登陸

• 新建項目

  
  
  新建項目

• 選擇項目類型，以web為例

  
  
  選擇項目類型

• 控制面板介紹：第1部分是頁面文件欄，你的產(chǎn)品有幾個頁面都在這里展示。第2部分是工具欄，里面有許多封裝好的組件，拖動可使用，也可以自己在組裝需要的組件 。第3部分是工作區(qū)，將需要的組件拖到此處構(gòu)成我們需要的web頁面，上面三角符號可以生成預覽。第4部分是組件狀態(tài)和屬性區(qū)，可以設置組件的不同屬性，也可以給組件添加點擊事件、設置頁面跳轉(zhuǎn)鏈接等。Axure面板類似，看起來也很整潔美觀。

  
  
  Mockplus面板
  
  
  Axure面板.PNG

3. 牛刀小試（模仿APPLE中國官方網(wǎng)站）
   上面是菜單欄，下面是商品圖片展示iPhone X、iPhone8等等。

   
   
   APPLE中國官方網(wǎng)站.PNG

• 第一步：選擇形狀，然后在面板右邊設置長寬顏色等屬性

  
  
  t6.PNG

• 第二步：選擇‘鏈接’，放到合適的位置，設置相關(guān)屬性。ps:一些logo（如被咬了一口的蘋果和搜索）需要升級軟件為專業(yè)版才能使用。

  
  
  t7.PNG

• 第三步：選擇圖片，上傳，設置圖片大小，放到合適的位置。一個完整的頁面就建好了

  
  
  t13.PNG

• 第四步：新建一個Mac界面。

  
  
  t16.PNG

• 第五步：設置頁面鏈接

  
  
  t17.PNG

• 第六步：點擊工作區(qū)上放三角符號預覽,點擊Mac頁面也會進行跳轉(zhuǎn)，仿真模擬web頁面。

  
  
  t18.png
  
  

  PS:手機應用APP也類似設置，更多強大的好看好玩的例子請參考mockplus官網(wǎng)。
  工具只是我們用來更好工作的，我們關(guān)注的更應改是創(chuàng)造和設計，希望大家能夠利用好的工具高效率地做出更好的產(chǎn)品。