原型設(shè)計是每個交互設(shè)計師和產(chǎn)品經(jīng)理的最基本技能，也是理解思路的好方法。

關(guān)于什么是原型

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

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

原型的主要作用是傳達(dá)原始產(chǎn)品愿景。原型顯示內(nèi)容和結(jié)構(gòu)的布局和粗線，而不是視覺設(shè)計。

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

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

關(guān)于原型的精細(xì)程度

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

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

關(guān)于原型繪制工具

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

基本上，根據(jù)您的愛好和用途是否容易，沒有絕對有用的工具。關(guān)于原型制作工具，網(wǎng)絡(luò)上有很多人總結(jié)了許多不同的工具供您選擇。我個人使用的是Axure。

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

關(guān)于 Axure 的使用

1、千萬不要去學(xué)習(xí)復(fù)雜的交互動作！

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

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

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

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

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

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

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

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

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

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

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

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

最后，原型設(shè)計是每個交互設(shè)計師和產(chǎn)品經(jīng)理的最基本技能，也是理解思路的好方法。