正文

網(wǎng)頁(yè)原型圖怎么畫(huà)（網(wǎng)頁(yè)原型圖怎么畫(huà)出來(lái)）

發(fā)布時(shí)間：2023-07-03 06:47:39 稿源：創(chuàng)意嶺閱讀： 836

大家好！今天讓創(chuàng)意嶺的小編來(lái)大家介紹下關(guān)于網(wǎng)頁(yè)原型圖怎么畫(huà)的問(wèn)題，以下是小編對(duì)此問(wèn)題的歸納整理，讓我們一起來(lái)看看吧。

本文目錄:

1、小程序開(kāi)發(fā)如何做原型設(shè)計(jì)
2、如何利用Edraw Max設(shè)計(jì)軟件的Windows7 UI原型圖
3、淘寶購(gòu)物車(chē)下單頁(yè)面流程圖與原型圖繪制
4、有哪些好用的在線界面原型工具，且支持IE

一、小程序開(kāi)發(fā)如何做原型設(shè)計(jì)

1.原型設(shè)計(jì)工具

根據(jù)設(shè)計(jì)者的專(zhuān)業(yè)程度，可以將原型設(shè)計(jì)工具分為兩大類(lèi)，一是專(zhuān)業(yè)原型設(shè)計(jì)工具，二是非專(zhuān)業(yè)原型設(shè)計(jì)工具。專(zhuān)業(yè)的原型設(shè)計(jì)工具常用的就是墨刀和Axure，墨刀是一款在線原型設(shè)計(jì)工具，其優(yōu)點(diǎn)是云辦公模式，支持協(xié)同設(shè)計(jì)，即時(shí)保存，不用擔(dān)心因電腦斷電或故障而導(dǎo)致設(shè)計(jì)內(nèi)容丟失，其缺點(diǎn)是組件豐富程度不高。

Axure是電腦端的原型設(shè)計(jì)工具，其優(yōu)點(diǎn)是組件豐富，功能比較強(qiáng)大，使用用戶(hù)群體較大，其缺點(diǎn)是設(shè)計(jì)內(nèi)容要及時(shí)保存，否則會(huì)因電腦斷電或故障而導(dǎo)致設(shè)計(jì)內(nèi)容丟失，給用戶(hù)帶來(lái)一定的困擾。非專(zhuān)業(yè)的原型設(shè)計(jì)工具有PPT和紙，PPT也是一個(gè)簡(jiǎn)單的制圖軟件，能讓用戶(hù)實(shí)現(xiàn)簡(jiǎn)單的原型設(shè)計(jì)，其優(yōu)點(diǎn)是簡(jiǎn)單易學(xué)，缺點(diǎn)是頁(yè)面交互功能不強(qiáng)；紙是大部分用戶(hù)都可以用的原型設(shè)計(jì)工具，其優(yōu)點(diǎn)是簡(jiǎn)單方便，專(zhuān)業(yè)和非專(zhuān)業(yè)的人士都可以通過(guò)紙將原型想法表示出來(lái)，缺點(diǎn)是保存和后期使用不方便。

2.原型設(shè)計(jì)的內(nèi)容

原型設(shè)計(jì)主要包括三個(gè)方面的內(nèi)容：一是頁(yè)面設(shè)計(jì)，二是交互設(shè)計(jì)，三是備注設(shè)計(jì)。頁(yè)面設(shè)計(jì)是原型設(shè)計(jì)的主要內(nèi)容，包括對(duì)產(chǎn)品所有頁(yè)面的原型設(shè)計(jì)；交互設(shè)計(jì)是指頁(yè)面與頁(yè)面之間的鏈接和跳轉(zhuǎn)；備注設(shè)計(jì)是指對(duì)頁(yè)面設(shè)計(jì)，交互設(shè)計(jì)，程序功能，跳轉(zhuǎn)結(jié)果，出錯(cuò)提示等的設(shè)計(jì)。

原型設(shè)計(jì)是產(chǎn)品需求設(shè)計(jì)與UI設(shè)計(jì)之間的橋梁，是產(chǎn)品開(kāi)發(fā)的一項(xiàng)重要基礎(chǔ)工作，直接決定了產(chǎn)品界面的布局，影響產(chǎn)品的使用效果。

二、如何利用Edraw Max設(shè)計(jì)軟件的Windows7 UI原型圖

1、Axure RP（Rapid Prototyping）

Axure（讀音為Ack-Sure）無(wú)疑是目前最受關(guān)注的原型開(kāi)發(fā)工具，其能通過(guò)組件的方式幫助網(wǎng)站或軟件設(shè)計(jì)師快速建立帶有注釋的原型（流程圖、線框圖），并憑借自定義可重用的元件、動(dòng)態(tài)面板以及豐富的script能夠建立基本功能或頁(yè)面邏輯的動(dòng)態(tài)演示文件。

Axure借鑒了office的界面，能夠讓用戶(hù)快速上手，并且提供了豐富的組件樣式修改，使得通過(guò)其能夠創(chuàng)建低保真、高保真甚至接近于實(shí)際效果的界面。然而最讓人稱(chēng)道的是，Axure的豐富的腳本模式，可以通過(guò)點(diǎn)擊和選擇能夠快速完成界面元素的交互，如鏈接、state切換、動(dòng)態(tài)變化等效果，使得Axure能夠生成十分接近于真實(shí)產(chǎn)品的原型。另一方面，Axure能夠?qū)肫渌藙?chuàng)建的元件庫(kù)，使得Axure能夠滿(mǎn)足絕大多數(shù)類(lèi)型產(chǎn)品的設(shè)計(jì)。

但Axure仍然有一個(gè)讓人頭痛的問(wèn)題：對(duì)于中文的支持不太友好。在小部分元件上輸入中午的時(shí)候，經(jīng)常需要像碰運(yùn)氣似的反復(fù)切換輸入法，破壞了咱們?cè)O(shè)計(jì)師的用戶(hù)體驗(yàn)。

瑕不掩瑜，Axure仍然是交互設(shè)計(jì)師的首選原型工具。

2、Microsoft Office Visio

Visio在2000年被微軟收購(gòu)，并在2002年成為office2003套件中的一個(gè)組件，最新版本是2007。Visio能夠獲得推薦的原因是因?yàn)閂isio的適用性非常之廣，從網(wǎng)站界面、數(shù)據(jù)庫(kù)模型，到平面布置圖到工藝流程圖，Visio都提供了相應(yīng)的元件庫(kù)和模板來(lái)進(jìn)行快速創(chuàng)建。

相較Axure而言，Visio更適合于傳統(tǒng)行業(yè)的生產(chǎn)或流程設(shè)計(jì)，或者軟件及互聯(lián)網(wǎng)行業(yè)中的信息、數(shù)據(jù)和流程的說(shuō)明，而不太適用于web界面。因?yàn)槠涞幕趙eb的元件庫(kù)還是比較少，并且形式和結(jié)構(gòu)也更類(lèi)似于word中的圖形工具，因此在原型開(kāi)發(fā)效率上都有所不足。

3、Balsamiq Mockups

這個(gè)基于Adobe AIR Runtime的工具實(shí)在是有讓人眼前一亮的感覺(jué)，手繪風(fēng)格的元件樣式粗獷淋漓，能創(chuàng)建接近于紙上手繪的原型文件。其提供了豐富的手繪風(fēng)格的web常用元件，包括常用的html控件、以及一些組合控件，如多媒體控制器、標(biāo)簽頁(yè)、列表、Iphone界面元件等。

Mockups最值得贊賞之處在于其提供的多數(shù)組件都可定制外觀，對(duì)于中文的支持也不錯(cuò)（選擇View > Use System Fonts）。

4、Mockflow

Mockflow和以上工具最大的不同在于Mockflow是一項(xiàng)基于Adobe Flex技術(shù)開(kāi)發(fā)在線服務(wù)，提供了與Balsamiq Mockups基本相似的功能，甚至更豐富的組件，雖然其元件定制化不夠強(qiáng)大，但其提供的元件庫(kù)默認(rèn)樣式卻非常適合用來(lái)做商業(yè)產(chǎn)品原型的搭建。有一個(gè)讓我愛(ài)不釋手的功能是模板，可以設(shè)置基于任何頁(yè)面的模板來(lái)進(jìn)行新的頁(yè)面設(shè)計(jì)。

與其他模板工具相比，mockflow有一個(gè)非常特色的功能，基于web的存儲(chǔ)可以在任意電腦上聯(lián)機(jī)打開(kāi)，同時(shí)可以其他人進(jìn)行快速的分享，并收集在線反饋意見(jiàn)，非常適合虛擬團(tuán)隊(duì)的原型設(shè)計(jì)交流。

雖然在線服務(wù)的基本帳號(hào)只能創(chuàng)建一個(gè)文件，但單個(gè)文件卻沒(méi)有限制頁(yè)數(shù)，因此也基本上足夠使用。

5、Pencil sketch

Pencil 是一款基于Firefox的擴(kuò)展組件，安裝之后即可在Firefox的工具菜單中打開(kāi)Pencil的繪圖面板。功能比較簡(jiǎn)單，僅能用以日常簡(jiǎn)單工作的輔助說(shuō)明。提供的默認(rèn)元件都是基于軟件工程，因此更適合用于windows桌面程序的簡(jiǎn)易界面搭建，或者是基本的頁(yè)面功能說(shuō)明，并不適用于嚴(yán)肅的原型開(kāi)發(fā)，但好在體積小、又輕便，能夠方便將網(wǎng)頁(yè)中的元素直接拖到或者復(fù)制到當(dāng)前的畫(huà)布中，這也是Pencil安裝在Firefox所帶來(lái)的便利之一吧。

更多工具...

在以上列舉的原型開(kāi)發(fā)工具都是較為常用的，也是在國(guó)內(nèi)的交互設(shè)計(jì)師們比較常討論的，但其實(shí)和Axure功能相似的軟件還有很多，下面也就一些簡(jiǎn)單說(shuō)明：

6、GUI Design Studio

這是一款真的非常強(qiáng)大的原型制作工具，沒(méi)有在上面推薦的原因是因?yàn)槲疫€沒(méi)有實(shí)際體驗(yàn)過(guò)，但沖著這工程級(jí)的界面設(shè)計(jì)就沒(méi)有去嘗試的沖動(dòng)，但是從官方網(wǎng)站的截圖和視頻演示來(lái)看，這款軟件的操作模式和前面的原型工具大有不同。Axure之類(lèi)多是基于頁(yè)面的原型設(shè)計(jì)，對(duì)于web網(wǎng)站盡管很實(shí)用，但是對(duì)于軟件界面的流程設(shè)計(jì)卻略顯繁瑣。而GUI Design Studio卻另辟蹊徑，直接以建立元素與元素之間的關(guān)聯(lián)的方式來(lái)自動(dòng)化的創(chuàng)建動(dòng)作流程，而從視頻演示來(lái)看，這樣的確很大程度上提升了軟件界面原型搭建的效率。

7、Prototype Composer

Serena 公司提供的原型開(kāi)發(fā)工具，功能確實(shí)強(qiáng)大，提供了基于項(xiàng)目管理主要流程的產(chǎn)出物文檔模板、原型工具以及開(kāi)發(fā)流程控制，這個(gè)軟件的開(kāi)發(fā)理念非常好，用這一款工具來(lái)滿(mǎn)足項(xiàng)目開(kāi)發(fā)流程中各個(gè)環(huán)節(jié)的溝通和決策。但軟件的學(xué)習(xí)和使用成本比較高，要了解其中的全部功能，貌似需要花不少時(shí)間。另外軟件的效率和穩(wěn)定性還有待提高，試用的過(guò)程中多次出錯(cuò)及停止響應(yīng)。

8、Lucid Spec

由 Elegance科技推出的Lucid Spec是一款很類(lèi)似Pencil的原型工具，僅僅是提供了更多控件。不過(guò)Lucid Spec強(qiáng)調(diào)了生成干凈的說(shuō)明文檔的功能，這可能是針對(duì)于多數(shù)原型工具的自動(dòng)化生成規(guī)范的冗余而言的，不過(guò)老實(shí)說(shuō)Lucid Spec提供的原型界面太過(guò)簡(jiǎn)陋，并且生成的說(shuō)明文檔也未見(jiàn)優(yōu)化有怎樣的提升。視頻介紹

9、Irise Professional Edition

Irise與其他原型工具相比其中一個(gè)特色在于提供了樣本數(shù)據(jù)的功能，這是類(lèi)似于excel表的一個(gè)樣本數(shù)據(jù)庫(kù)，可以通過(guò)界面元素直接獲取樣本數(shù)據(jù)庫(kù)中的數(shù)據(jù)，這樣所生成的原型甚至可以使動(dòng)態(tài)數(shù)據(jù)更新的。

10、Adobe Reader

Adobe reader？沒(méi)錯(cuò)。其實(shí)理論上任何可以創(chuàng)建圖形和文本的工具都可以用來(lái)原型開(kāi)發(fā)，因?yàn)樵捅旧砭褪菍?duì)于業(yè)務(wù)邏輯和功能界面的模擬或仿真，因此有何理由不能使用PDF格式呢？BoxandArrow的這篇文章《PDF Prototype》提醒了我們，所有的原型工具都只是工具，而不是設(shè)計(jì)本身。

另外這里的也可參考一下

但個(gè)人推薦:

原型

• Axure 7.0

• UIDesigner

思維

• Mindmanager

• Xmind

流程

• Visio 2013

• EDraw Max

知識(shí)

• 有道云筆記

• 印象筆記

時(shí)間

• Todolist

• Worktile

圖形

• Photoshop

• Colorpix

交互

• 快現(xiàn)

• UIDesiger

三、淘寶購(gòu)物車(chē)下單頁(yè)面流程圖與原型圖繪制

以產(chǎn)品「淘寶」的購(gòu)物車(chē)下單功能為例：

購(gòu)物車(chē)下單功能的頁(yè)面流程跳轉(zhuǎn)點(diǎn)：

點(diǎn)擊購(gòu)物車(chē)→結(jié)算→提交訂單→立即付款→支付成功

以下為頁(yè)面流程圖與原型圖

四、有哪些好用的在線界面原型工具，且支持IE

常用的線框圖工具

1.Axure

Axure是一款老牌原型設(shè)計(jì)工具，我們可以直接使用Axure豐富的組件來(lái)創(chuàng)建APP或網(wǎng)站的線框圖。作為專(zhuān)業(yè)的原型設(shè)計(jì)工具，它也支持將靜態(tài)的線框圖轉(zhuǎn)換為可交互的原型。同時(shí)支持多人協(xié)作和版本管理。

2.摹客原型

在國(guó)內(nèi)的同類(lèi)型工具中，只有摹客擁有強(qiáng)大的矢量繪圖功能，在進(jìn)行頭腦風(fēng)暴時(shí)，我們可以利用摹客的矢量繪圖工具和無(wú)邊界畫(huà)布，讓靈感創(chuàng)意快速具象化。同時(shí)，摹客作為一款強(qiáng)大的高保真設(shè)計(jì)利器，產(chǎn)品經(jīng)理和設(shè)計(jì)師也可以使用摹客快速繪制高保真，輕量設(shè)計(jì)還可以直接使用摹客交付給開(kāi)發(fā)。

3.Mockplus

Mockplus是一款簡(jiǎn)潔高效的產(chǎn)品原型工具。它提供了豐富的組件和圖標(biāo)資源，通過(guò)拖曳即可快速繪制線框圖。同時(shí)Mockplus也支持一鍵導(dǎo)入項(xiàng)目頁(yè)面和模板，快速搭建基礎(chǔ)頁(yè)面。簡(jiǎn)單高效，無(wú)需學(xué)習(xí)就能快速上手。

以上就是關(guān)于網(wǎng)頁(yè)原型圖怎么畫(huà)相關(guān)問(wèn)題的回答。希望能幫到你，如有更多相關(guān)問(wèn)題，您也可以聯(lián)系我們的客服進(jìn)行咨詢(xún)，客服也會(huì)為您講解更多精彩的知識(shí)和內(nèi)容。