原型設計是每個交互設計師和產品經理的最基本技能，也是理解思路的好方法。

關于什么是原型

為了便于討論，首先需要做出簡單的定義。

這里的原型是指最終產品每頁上的內容的簡單表示，通常沒有設置顏色和字體，也沒有圖像。這里的原型通常也稱為線框，原理圖和藍圖。在某些極端情況下，原型圖通常可以抽象為單獨的模塊組合，然后細化每個模塊中的內容。

原型的主要作用是傳達原始產品愿景。原型顯示內容和結構的布局和粗線，而不是視覺設計。

在某種程度上，原型是為了說明用戶如何與產品進行交互，主要受眾是團隊中的工程師和設計師。原型圖必須反映用戶期望在每個頁面上看到的內容以及這些內容在頁面上的相對優先級。通常，原型在紙上呈現，可以使用某些特定的軟件進行制作，包括Axure，Visio等。

所以，基于這個定義和解釋。我們接下來討論的問題主要圍繞Web 網站和APP的原型設計。

關于原型的精細程度

業界普遍認為原型可以相對保真。保真原則是，對于原型，團隊的設計師和工程師可以理解我們將要做什么以及這個問題的重點是什么。

當然，還有另一種觀點，原型必須是高保真的。個人對這一觀點持保留態度。高保真原型需要更多的努力并且不那么靈活。

關于原型繪制工具

在程序員的世界里，最終的問題是，什么是最好的語言？在前端工程師的世界里，最終的問題是，什么是最好的瀏覽器？在產品經理和交互設計師的世界中，最終的問題是，什么是最好的原型設計工具？

基本上，根據您的愛好和用途是否容易，沒有絕對有用的工具。關于原型制作工具，網絡上有很多人總結了許多不同的工具供您選擇。我個人使用的是Axure。

哦，是的，實際上使用了最好的原型制作工具。最后，我發現它是紙和筆。在Express Hotel Butler的實際項目操作中，我們使用白板繪制原型，然后采用已討論的原型并使用它來記錄它。

關于 Axure 的使用

1、千萬不要去學習復雜的交互動作！

首先，在Axure中使用復雜的交互是令人上癮的，這將浪費你的時間。其次，設計師和工程師不會看你復雜的互動。他們只是認為這是一個圖形。第三，如果你真的想學習，為什么不學習DIV + CSS？

2、如果你確實需要表達一個復雜的交互，可以考慮將這個交互拆解了表述

典型值，例如輸入框的不同狀態。可以反匯編以獲得焦點激活輸入框 - 在輸入中 - 輸入完成激活提交按鈕 - 單擊提交按鈕以完成提交。

這種拆解方式雖然似乎占用空間，但實際上最容易理解，甚至可以省略流程圖。

3、可以考慮將需求文檔與Axure原型結合起來

只是說是的，我沒有說我必須這樣做。這是我一直在使用的方式，我認為效果并不差，詳情請參考“基于Axure的PRD協作”，不再重復。

4、一定要有一套屬于自己的控件庫

控制庫，簡單的理解是將產品拆解成許多小零件，并在需要時組裝它們。這可以大大提高您的原型制作效率。

關于原型控件，每個原型工具都有它，您可以在線搜索。在實際的應用程序中，您可以根據需要修改這些控件，然后再次使用它們。

5、原型的版本存檔同樣重要

與實際產品一樣，原型是迭代的并且經常被修改，所以一定要記住存檔。即使您對同一原型進行更改，也必須進行記錄，這對后續檢查很重要。

（Express Hotel Butler主頁的早期原型）

最后，原型設計是每個交互設計師和產品經理的最基本技能，也是理解思路的好方法。