原型設(shè)計是交互設(shè)計師與PD、PM、網(wǎng)站開發(fā)工程師溝通的最好工具。而該塊的設(shè)計在原則上必須是交互設(shè)計師的產(chǎn)物，交互設(shè)計以用戶為中心的理念會貫穿整個產(chǎn)品。利用交互設(shè)計師專業(yè)的眼光與經(jīng)驗直接導(dǎo)至該產(chǎn)品的可用性。

簡單說，“原型”是在項目前期階段的重要設(shè)計步驟，主要以發(fā)現(xiàn)新想法和檢驗設(shè)計為目的，重點在于直觀體現(xiàn)產(chǎn)品主要界面風(fēng)格以及結(jié)構(gòu)、并展示主要功能模塊以及之間相互關(guān)系，不斷確認模糊部分，為后期的視覺設(shè)計和代碼編寫提供準確的產(chǎn)品信息。

目的：

下列角色使用用戶界面原型：

用例闡釋者，用來了解用例的用戶界面；

系統(tǒng)分析員，用來了解用戶界面如何影響系統(tǒng)分析；

設(shè)計員，用來了解用戶界面如何施加影響及它對系統(tǒng)“內(nèi)部”的要求；

類測試人員，用來制定測試計劃活動。

如何高效完成優(yōu)秀原型設(shè)計，工具自然非常重要。下面我們介紹一些常用的原型設(shè)計工具，供大家參考。

Axure Rp

Axure RP是美國Axure Software Solution 公司的旗艦產(chǎn)品，該原型設(shè)計工具可以專業(yè)快速地幫助完成定義需求規(guī)格負責(zé)設(shè)計功能和界面的原型設(shè)計者快速創(chuàng)建應(yīng)用軟件或Web網(wǎng)站線框圖、原型、規(guī)格說明書等。Axure所針對的用戶包括用戶體驗設(shè)計師（UX）、交互設(shè)計師（UI）、業(yè)務(wù)分析師（BA）、信息架構(gòu)師（IA）、可用性專家（UE）和產(chǎn)品經(jīng)理（PM）等等。

Axure RP 能讓操作它的人快速準確的創(chuàng)建基于Web的網(wǎng)站流程圖、原型頁面、交互體驗設(shè)計、標注詳細開發(fā)說明，并導(dǎo)出Html原型或規(guī)格的Word開發(fā)文檔。（通過擴展還會支持更多的輸出格式）

• 網(wǎng)站架構(gòu)圖   (Site Structure)
• 示意圖       (Wireframe)
• 流程圖       (Flowchart)
• 交互設(shè)計     (Interaction Design)
• 原型設(shè)計     (HTML Prototype)
• 規(guī)格文檔     (Specification)

用Axure RP設(shè)計線框圖和原型會有效提高工作效率，同時方便團隊成員一起完成協(xié)同設(shè)計，可以向用戶演示和交流以確認用戶需求以及自動產(chǎn)生規(guī)格說明書，極大地優(yōu)化工作方式：設(shè)計更加高效、可快速體驗動態(tài)原型，幫助清晰有效的溝通。Axure RP的可視化工作界面以讓用戶輕松快速的簡單用鼠標拖拽的方式創(chuàng)建帶有注釋的各種線框圖。無需編程，就可以在線框圖上定義簡單鏈接和高級交互。同時該工具支持在線框圖的基礎(chǔ)上自動生成HTML原型和Word格式的規(guī)格說明書。

Balsamiq Mockup

Balsamiq Mockups是一款快速原型的設(shè)計軟件，由美國加利福利亞的Balsamiq工作室推出，它真正抓住了原型設(shè)計的核心與平衡點——既能快速設(shè)計草圖，又能較好地進入到平時團隊工作的流程和工具。它基于Adobe Air，能夠流暢的在不同瀏覽器，不同操作系統(tǒng)平臺下完美運行，可以在線使用，亦可以離線使用，能夠很順利地將其安裝在Windows 7、FreeBSD、Ubuntu等平臺中，高效率地完成每個原型設(shè)計任務(wù)。

Balsamiq Mockups具有極其豐富的表現(xiàn)形式，設(shè)計效果非常美觀。它支持幾乎所有的HTML控件原型圖，比如按鈕（基本按鈕、單選按鈕等）、文本框、下拉菜單、樹形菜單、進度條、多選項卡、日歷控件、顏色控件、表格、Windows窗體等。除此以外，它還支持Phone手機元素原型圖，極大地方便了開發(fā)iPhone應(yīng)用程序的軟件工程師。

Pencil Project

Pencil Project最初只是firefox的小插件，曾經(jīng)得過Firefox插件Grand Prize大獎第一名，后來發(fā)布了獨立軟件。這款手繪風(fēng)格的開源原型設(shè)計工具可以用來繪制各種架構(gòu)圖和流程圖。Pencil Project內(nèi)置豐富模板，可創(chuàng)建具有背景的多頁面文檔，支持文檔內(nèi)超鏈接跳轉(zhuǎn)，支持富文本功能的文字處理，支持安裝自制畫筆和模版，具備所有標準繪圖功能如對齊、堆疊層級、縮放、旋轉(zhuǎn)等，支持添加外部對象，跨平臺……可以創(chuàng)建可鏈接的文檔并輸出成為HTML、PNG、OpenOffice、Word、PDF等格式的文件。

Prototype Composer

Prototype Composer是一款Serena出品的能夠讓非技術(shù)型的用戶進行原型設(shè)計的免費軟件，同時它還包括商業(yè)過程、活動、用戶界面、需求和數(shù)據(jù)，不但可以制作界面原型，方便用戶在代碼編寫之前直觀預(yù)覽到網(wǎng)站的運行流程，同時還可以用來做項目管理，包括需求管理，數(shù)據(jù)管理。

Prototype Composer提供了完整的集成環(huán)境，可輕松進行設(shè)計、建模，在進行開發(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é)走向、繪制公司組織圖、專案進度等等。該軟件界面非常漂亮，模板豐富精致，容易激發(fā)靈感，輔助對齊和尺寸調(diào)整功能強大。目前還推出了iPad版本的應(yīng)用（328元）。

GUI Design Studio（GDS）

GUI Design Studio是面向應(yīng)用軟件設(shè)計圖形用戶界面的專業(yè)工具，特別適合客戶端軟件設(shè)計。該軟件能夠快速將設(shè)計思路以可視化的方式來表現(xiàn)出來，并實現(xiàn)基本的交互，便于演示以及與客戶完成有效溝通交流。GUI Design Studio是不需要軟件開發(fā)和編碼的完整的設(shè)計工具，它支持所有基于微軟Windows 平臺的軟件，提供的了大部分C/S、B/S組件的示意圖，可組合使用，是一款非常款適合界面原型設(shè)計者和界面原型開發(fā)員的軟件，能夠滿足一般軟件界面模型設(shè)計需要。

Office組件

大家熟悉的Office套件中有不少組件都可以用在原型設(shè)計中：如Visio、PPT、Word、甚至Excel等，但是操作過程相對比較繁瑣。

Visio：功能相對豐富，操作復(fù)雜。適合畫流程圖，框架圖。不利于批注與交互的表達與演示。
Word：可以畫線框圖、流程圖，添加批注與文字說明。對交互表達不好，不利于演示。
PPT：易于畫框架圖、做批注，也可以表達部分交互流程，擅長演示。

Adobe設(shè)計組件

一些視覺設(shè)計出身的原型設(shè)計人員因為軟件使用習(xí)慣的原因，會選用Adobe的一些平面和網(wǎng)頁設(shè)計工具來做原型設(shè)計工具。

Photoshop/Illustrator：操作難度相對較大，易于畫框架圖、流程圖。不利于表達交互設(shè)計，不擅長文字說明與批注。
Dreamweaver：操作難度大，需要基礎(chǔ)html知識。易于畫框架圖、流程圖、表達交互設(shè)計。不擅長文字說明與批注。

紙筆

當(dāng)然，我們最傳統(tǒng)的紙筆也是非常重要的原型設(shè)計工具，幫助我們在設(shè)計初期記錄和整理思路，繪制最初的草稿。

除了上面我們提到的這些，現(xiàn)在還有很多很多相關(guān)的原型設(shè)計工具他們各有特點，大家可以選擇自己習(xí)慣地使用，也歡迎在文章末尾分享您的意見。無論是桌面軟件、Web網(wǎng)站還是移動APP界面，原型設(shè)計都是產(chǎn)品設(shè)計流程中非常重要的一環(huán)，原型設(shè)計在一定程度上是為了說明用戶將如何與產(chǎn)品進行交互，用來展現(xiàn)最初的產(chǎn)品設(shè)想，起到直觀展示和有效溝通的作用。原型設(shè)計需要體現(xiàn)出用戶在每個頁面上期望看到的內(nèi)容，以及這些內(nèi)容在頁面上的相對優(yōu)先級，展示內(nèi)容和結(jié)構(gòu)及粗線條的布局，而不是視覺設(shè)計。原型是一個概念到實現(xiàn)的過渡，是不同部門對話的交流介質(zhì)，重點在于溝通和幫助項目成員（比如團隊中的工程師與設(shè)計師等）理解產(chǎn)品需求。 從整個項目的角度講，在原型的設(shè)計與溝通過程中發(fā)現(xiàn)問題并加以調(diào)整，將更有效地避免將問題留到視覺設(shè)計和開發(fā)流程中，有效提高開發(fā)效率。

最新評論