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

簡(jiǎn)單說(shuō)，“原型”是在項(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)模糊部分，為后期的視覺(jué)設(shè)計(jì)和代碼編寫(xiě)提供準(zhǔn)確的產(chǎn)品信息。

目的：

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

用例闡釋者，用來(lái)了解用例的用戶界面；

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

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

類測(cè)試人員，用來(lái)制定測(cè)試計(jì)劃活動(dòng)。

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

Axure Rp

Axure RP是美國(guó)Axure Software Solution 公司的旗艦產(chǎn)品，該原型設(shè)計(jì)工具可以專業(yè)快速地幫助完成定義需求規(guī)格負(fù)責(zé)設(shè)計(jì)功能和界面的原型設(shè)計(jì)者快速創(chuàng)建應(yīng)用軟件或Web網(wǎng)站線框圖、原型、規(guī)格說(shuō)明書(shū)等。Axure所針對(duì)的用戶包括用戶體驗(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è)面、交互體驗(yàn)設(shè)計(jì)、標(biāo)注詳細(xì)開(kāi)發(fā)說(shuō)明，并導(dǎo)出Html原型或規(guī)格的Word開(kāi)發(fā)文檔。（通過(guò)擴(kuò)展還會(huì)支持更多的輸出格式）

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

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

Balsamiq Mockup

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

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

Pencil Project

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

Prototype Composer

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

Prototype Composer提供了完整的集成環(huán)境，可輕松進(jìn)行設(shè)計(jì)、建模，在進(jìn)行開(kāi)發(fā)之前使得商業(yè)應(yīng)用軟件合理化。該軟件能夠以可視化的形式描述軟件的工作模型，提供可定制的Word格式說(shuō)明書(shū)模板庫(kù)，可自動(dòng)組裝上從模型中產(chǎn)生的數(shù)據(jù)，一鍵創(chuàng)建需求、功能、技術(shù)規(guī)格說(shuō)明。

Omni Graffle

Omni Graffle軟件由Omni Group公司出品，可以在OS X平臺(tái)上輕松繪制漂亮的圖表、樹(shù)狀結(jié)構(gòu)圖、流程圖、頁(yè)面等，可以用來(lái)規(guī)劃電影或劇本的情節(jié)走向、繪制公司組織圖、專案進(jìn)度等等。該軟件界面非常漂亮，模板豐富精致，容易激發(fā)靈感，輔助對(duì)齊和尺寸調(diào)整功能強(qiáng)大。目前還推出了iPad版本的應(yīng)用（328元）。

GUI Design Studio（GDS）

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

Office組件

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

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

Adobe設(shè)計(jì)組件

一些視覺(jué)設(shè)計(jì)出身的原型設(shè)計(jì)人員因?yàn)檐浖褂昧?xí)慣的原因，會(huì)選用Adobe的一些平面和網(wǎng)頁(yè)設(shè)計(jì)工具來(lái)做原型設(shè)計(jì)工具。

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

紙筆

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

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

最新評(píng)論