原型設(shè)計(jì)是交互設(shè)計(jì)師與PD、PM、網(wǎng)站開發(fā)工程師溝通的最好工具。而該塊的設(shè)計(jì)在原則上必須是交互設(shè)計(jì)師的產(chǎn)物，交互設(shè)計(jì)以用戶為中心的理念會貫穿整個產(chǎn)品。利用交互設(shè)計(jì)師專業(yè)的眼光與經(jīng)驗(yàn)直接導(dǎo)至該產(chǎn)品的可用性。
簡單說，“原型”是在項(xiàng)目前期階段的重要設(shè)計(jì)步驟，主要以發(fā)現(xiàn)新想法和檢驗(yàn)設(shè)計(jì)為目的，重點(diǎn)在于直觀體現(xiàn)產(chǎn)品主要界面風(fēng)格以及結(jié)構(gòu)、并展示主要功能模塊以及之間相互關(guān)系，不斷確認(rèn)模糊部分，為后期的視覺設(shè)計(jì)和代碼編寫提供準(zhǔn)確的產(chǎn)品信息。
目的：
下列角色使用用戶界面原型：
用例闡釋者，用來了解用例的用戶界面；
系統(tǒng)分析員，用來了解用戶界面如何影響系統(tǒng)分析；
設(shè)計(jì)員，用來了解用戶界面如何施加影響及它對系統(tǒng)“內(nèi)部”的要求；
類測試人員，用來制定測試計(jì)劃活動。
如何高效完成優(yōu)秀原型設(shè)計(jì)，工具自然非常重要。下面我們介紹一些常用的原型設(shè)計(jì)工具，供大家參考。
Axure Rp
Axure RP是美國Axure Software Solution 公司的旗艦產(chǎn)品，該原型設(shè)計(jì)工具可以專業(yè)快速地幫助完成定義需求規(guī)格負(fù)責(zé)設(shè)計(jì)功能和界面的原型設(shè)計(jì)者快速創(chuàng)建應(yīng)用軟件或Web網(wǎng)站線框圖、原型、規(guī)格說明書等。Axure所針對的用戶包括用戶體驗(yàn)設(shè)計(jì)師（UX）、交互設(shè)計(jì)師（UI）、業(yè)務(wù)分析師（BA）、信息架構(gòu)師（IA）、可用性專家（UE）和產(chǎn)品經(jīng)理（PM）等等。
Axure RP 能讓操作它的人快速準(zhǔn)確的創(chuàng)建基于Web的網(wǎng)站流程圖、原型頁面、交互體驗(yàn)設(shè)計(jì)、標(biāo)注詳細(xì)開發(fā)說明，并導(dǎo)出Html原型或規(guī)格的Word開發(fā)文檔。（通過擴(kuò)展還會支持更多的輸出格式）
• 網(wǎng)站架構(gòu)圖 (Site Structure)
• 示意圖 (Wireframe)
• 流程圖 (Flowchart)
• 交互設(shè)計(jì) (Interaction Design)
• 原型設(shè)計(jì) (HTML Prototype)
• 規(guī)格文檔 (Specification)
用Axure RP設(shè)計(jì)線框圖和原型會有效提高工作效率，同時方便團(tuán)隊(duì)成員一起完成協(xié)同設(shè)計(jì)，可以向用戶演示和交流以確認(rèn)用戶需求以及自動產(chǎn)生規(guī)格說明書，極大地優(yōu)化工作方式：設(shè)計(jì)更加高效、可快速體驗(yàn)動態(tài)原型，幫助清晰有效的溝通。Axure RP的可視化工作界面以讓用戶輕松快速的簡單用鼠標(biāo)拖拽的方式創(chuàng)建帶有注釋的各種線框圖。無需編程，就可以在線框圖上定義簡單鏈接和高級交互。同時該工具支持在線框圖的基礎(chǔ)上自動生成HTML原型和Word格式的規(guī)格說明書。
Balsamiq Mockup
Balsamiq Mockups是一款快速原型的設(shè)計(jì)軟件，由美國加利福利亞的Balsamiq工作室推出，它真正抓住了原型設(shè)計(jì)的核心與平衡點(diǎn)——既能快速設(shè)計(jì)草圖，又能較好地進(jìn)入到平時團(tuán)隊(duì)工作的流程和工具。它基于Adobe Air，能夠流暢的在不同瀏覽器，不同操作系統(tǒng)平臺下完美運(yùn)行，可以在線使用，亦可以離線使用，能夠很順利地將其安裝在Windows 7、FreeBSD、Ubuntu等平臺中，高效率地完成每個原型設(shè)計(jì)任務(wù)。
Balsamiq Mockups具有極其豐富的表現(xiàn)形式，設(shè)計(jì)效果非常美觀。它支持幾乎所有的HTML控件原型圖，比如按鈕（基本按鈕、單選按鈕等）、文本框、下拉菜單、樹形菜單、進(jìn)度條、多選項(xiàng)卡、日歷控件、顏色控件、表格、Windows窗體等。除此以外，它還支持Phone手機(jī)元素原型圖，極大地方便了開發(fā)iPhone應(yīng)用程序的軟件工程師。
Pencil Project
Pencil Project最初只是firefox的小插件，曾經(jīng)得過Firefox插件Grand Prize大獎第一名，后來發(fā)布了獨(dú)立軟件。這款手繪風(fēng)格的開源原型設(shè)計(jì)工具可以用來繪制各種架構(gòu)圖和流程圖。Pencil Project內(nèi)置豐富模板，可創(chuàng)建具有背景的多頁面文檔，支持文檔內(nèi)超鏈接跳轉(zhuǎn)，支持富文本功能的文字處理，支持安裝自制畫筆和模版，具備所有標(biāo)準(zhǔn)繪圖功能如對齊、堆疊層級、縮放、旋轉(zhuǎn)等，支持添加外部對象，跨平臺……可以創(chuàng)建可鏈接的文檔并輸出成為HTML、PNG、OpenOffice、Word、PDF等格式的文件。
Prototype Composer
Prototype Composer是一款Serena出品的能夠讓非技術(shù)型的用戶進(jìn)行原型設(shè)計(jì)的免費(fèi)軟件，同時它還包括商業(yè)過程、活動、用戶界面、需求和數(shù)據(jù)，不但可以制作界面原型，方便用戶在代碼編寫之前直觀預(yù)覽到網(wǎng)站的運(yùn)行流程，同時還可以用來做項(xiàng)目管理，包括需求管理，數(shù)據(jù)管理。
Prototype Composer提供了完整的集成環(huán)境，可輕松進(jìn)行設(shè)計(jì)、建模，在進(jìn)行開發(fā)之前使得商業(yè)應(yīng)用軟件合理化。該軟件能夠以可視化的形式描述軟件的工作模型，提供可定制的Word格式說明書模板庫，可自動組裝上從模型中產(chǎn)生的數(shù)據(jù)，一鍵創(chuàng)建需求、功能、技術(shù)規(guī)格說明。
Omni Graffle
Omni Graffle軟件由Omni Group公司出品，可以在OS X平臺上輕松繪制漂亮的圖表、樹狀結(jié)構(gòu)圖、流程圖、頁面等，可以用來規(guī)劃電影或劇本的情節(jié)走向、繪制公司組織圖、專案進(jìn)度等等。該軟件界面非常漂亮，模板豐富精致，容易激發(fā)靈感，輔助對齊和尺寸調(diào)整功能強(qiáng)大。目前還推出了iPad版本的應(yīng)用（328元）。
GUI Design Studio（GDS）
GUI Design Studio是面向應(yīng)用軟件設(shè)計(jì)圖形用戶界面的專業(yè)工具，特別適合客戶端軟件設(shè)計(jì)。該軟件能夠快速將設(shè)計(jì)思路以可視化的方式來表現(xiàn)出來，并實(shí)現(xiàn)基本的交互，便于演示以及與客戶完成有效溝通交流。GUI Design Studio是不需要軟件開發(fā)和編碼的完整的設(shè)計(jì)工具，它支持所有基于微軟Windows 平臺的軟件，提供的了大部分C/S、B/S組件的示意圖，可組合使用，是一款非�？钸m合界面原型設(shè)計(jì)者和界面原型開發(fā)員的軟件，能夠滿足一般軟件界面模型設(shè)計(jì)需要。
Office組件
大家熟悉的Office套件中有不少組件都可以用在原型設(shè)計(jì)中：如Visio、PPT、Word、甚至Excel等，但是操作過程相對比較繁瑣。
Visio：功能相對豐富，操作復(fù)雜。適合畫流程圖，框架圖。不利于批注與交互的表達(dá)與演示。
Word：可以畫線框圖、流程圖，添加批注與文字說明。對交互表達(dá)不好，不利于演示。
PPT：易于畫框架圖、做批注，也可以表達(dá)部分交互流程，擅長演示。
Adobe設(shè)計(jì)組件
一些視覺設(shè)計(jì)出身的原型設(shè)計(jì)人員因?yàn)檐浖褂昧?xí)慣的原因，會選用Adobe的一些平面和網(wǎng)頁設(shè)計(jì)工具來做原型設(shè)計(jì)工具。
Photoshop/Illustrator：操作難度相對較大，易于畫框架圖、流程圖。不利于表達(dá)交互設(shè)計(jì)，不擅長文字說明與批注。
Dreamweaver：操作難度大，需要基礎(chǔ)html知識。易于畫框架圖、流程圖、表達(dá)交互設(shè)計(jì)。不擅長文字說明與批注。
紙筆
當(dāng)然，我們最傳統(tǒng)的紙筆也是非常重要的原型設(shè)計(jì)工具，幫助我們在設(shè)計(jì)初期記錄和整理思路，繪制最初的草稿。
除了上面我們提到的這些，現(xiàn)在還有很多很多相關(guān)的原型設(shè)計(jì)工具他們各有特點(diǎn)，大家可以選擇自己習(xí)慣地使用，也歡迎在文章末尾分享您的意見。無論是桌面軟件、Web網(wǎng)站還是移動APP界面，原型設(shè)計(jì)都是產(chǎn)品設(shè)計(jì)流程中非常重要的一環(huán)，原型設(shè)計(jì)在一定程度上是為了說明用戶將如何與產(chǎn)品進(jìn)行交互，用來展現(xiàn)最初的產(chǎn)品設(shè)想，起到直觀展示和有效溝通的作用。原型設(shè)計(jì)需要體現(xiàn)出用戶在每個頁面上期望看到的內(nèi)容，以及這些內(nèi)容在頁面上的相對優(yōu)先級，展示內(nèi)容和結(jié)構(gòu)及粗線條的布局，而不是視覺設(shè)計(jì)。原型是一個概念到實(shí)現(xiàn)的過渡，是不同部門對話的交流介質(zhì)，重點(diǎn)在于溝通和幫助項(xiàng)目成員（比如團(tuán)隊(duì)中的工程師與設(shè)計(jì)師等）理解產(chǎn)品需求。 從整個項(xiàng)目的角度講，在原型的設(shè)計(jì)與溝通過程中發(fā)現(xiàn)問題并加以調(diào)整，將更有效地避免將問題留到視覺設(shè)計(jì)和開發(fā)流程中，有效提高開發(fā)效率。
喜歡 
頂
難過
囧
圍觀
無聊
