在本篇博客中將主要介紹主流的原型設(shè)計(jì)工具。
Axure
開(kāi)發(fā)公司:Axure Software Solutions, Inc.
官網(wǎng):Axure RP - UX Prototypes, Specifications, and Diagrams in One Tool

Axure的特點(diǎn)
1.Axure擁有強(qiáng)大的交互制作功能,它能夠?qū)崿F(xiàn)復(fù)雜的條件判斷和豐富的動(dòng)態(tài)效果。這一點(diǎn)在設(shè)計(jì)具有復(fù)雜邏輯的原型時(shí)尤為重要,因?yàn)樗梢宰屧O(shè)計(jì)師創(chuàng)造出接近真實(shí)產(chǎn)品的用戶體驗(yàn)。而且由于Axure的功能豐富,所以相應(yīng)的學(xué)習(xí)成本也較高。新手可能需要花費(fèi)一定的時(shí)間來(lái)掌握其全部功能和使用方法。這邊https://www.axure.com.cn/(Axure中文學(xué)習(xí)網(wǎng)應(yīng)該有助于學(xué)習(xí))

2.Axure提供無(wú)限畫布的設(shè)計(jì)區(qū)域,方便設(shè)計(jì)師在設(shè)計(jì)稿上添加文字注解,這對(duì)于團(tuán)隊(duì)協(xié)作和設(shè)計(jì)說(shuō)明非常有幫助。

3.Axure是一款離線工具,Axure的原型預(yù)覽和分享不如在線工具方便。例如,瀏覽器預(yù)覽本地文件需要安裝插件,而上傳到Axshare分享的方式在國(guó)內(nèi)可能速度較慢。但是由于其為離線工具,可能在原型的預(yù)覽和分享方面不如在線工具便捷。
4.Axure提供了豐富的交互組件和功能,例如可交互的按鈕、鏈接、表單元素等,使用戶能夠模擬真實(shí)的應(yīng)用程序或網(wǎng)站的交互過(guò)程。此外,Axure還支持多種輸出格式,包括HTML、PDF和PNG等,方便用戶在不同平臺(tái)上展示和共享原型。
5.Axure 內(nèi)置了豐富的組件庫(kù),包括常用的 UI 元素、圖標(biāo)、按鈕等,可以幫助設(shè)計(jì)師快速搭建原型界面。
6.Axure 支持多種設(shè)備和平臺(tái)的原型設(shè)計(jì),如網(wǎng)頁(yè)、移動(dòng)應(yīng)用和桌面應(yīng)用等。
7.支持變量和邏輯:Axure 支持使用變量和邏輯表達(dá)式,可以實(shí)現(xiàn)更復(fù)雜的交互效果和數(shù)據(jù)處理。
Axure的使用方法
- 創(chuàng)建項(xiàng)目:打開(kāi) Axure 軟件,新建一個(gè)項(xiàng)目,選擇相應(yīng)的設(shè)備和平臺(tái)。
- 添加頁(yè)面:在項(xiàng)目中添加新的頁(yè)面,可以為每個(gè)頁(yè)面設(shè)置名稱和描述。
- 設(shè)計(jì)界面:使用 Axure 的組件庫(kù)和布局功能,搭建頁(yè)面的基本結(jié)構(gòu)和樣式。
- 添加交互:為頁(yè)面中的元素添加交互事件,如點(diǎn)擊、鼠標(biāo)懸停等,并設(shè)置相應(yīng)的觸發(fā)條件和動(dòng)作。
- 設(shè)置邏輯:使用 Axure 的邏輯表達(dá)式和變量功能,實(shí)現(xiàn)更復(fù)雜的交互效果和數(shù)據(jù)處理。
- 預(yù)覽和測(cè)試:使用 Axure 的預(yù)覽功能,查看原型的交互效果和邏輯是否正確。
- 導(dǎo)出和共享:將原型導(dǎo)出為 HTML 文件或其他格式,與團(tuán)隊(duì)成員或客戶進(jìn)行共享和溝通。
Axure可以建立自己的元件庫(kù)

畫完元件后,點(diǎn)擊左上角 “文件”----“另存為”,注意,另存為的格式是“.rplib”

在創(chuàng)建完元件后,點(diǎn)擊 添加-文件夾”
創(chuàng)建完后,同樣另存為“.rplib”文件
點(diǎn)擊 “元件”下的“+”號(hào),打開(kāi)選擇剛剛保存的“*.rplib”元件文件加載
這樣可以使用 Axure 快速創(chuàng)建出高質(zhì)量的軟件原型,提高設(shè)計(jì)效率和溝通效果
墨刀(重點(diǎn))
開(kāi)發(fā)公司:萬(wàn)興科技
官網(wǎng):https://modao.cc/usergrowth/prototype-b.html?jsid=SEM-BAIDU-CG-PP-32008&bd_vid=8330168541418030336

墨刀的特點(diǎn)
1.用戶可以選擇從空白原型項(xiàng)目開(kāi)始,或者利用模板和素材廣場(chǎng)中的資源快速創(chuàng)建項(xiàng)目。

2. 墨刀支持高保真原型設(shè)計(jì),使得設(shè)計(jì)成果更接近最終產(chǎn)品的外觀和感覺(jué)。
3. 除了原型設(shè)計(jì),墨刀還提供設(shè)計(jì)、流程圖、思維導(dǎo)圖等工具,實(shí)現(xiàn)了產(chǎn)品設(shè)計(jì)流程的一體化管理。
4. 墨刀支持團(tuán)隊(duì)成員之間的在線協(xié)作,便于項(xiàng)目管理和溝通,提高了工作效率。
5. *與傳統(tǒng)的原型設(shè)計(jì)相比,墨刀幾乎不需要編寫代碼,節(jié)省了設(shè)計(jì)和修改的時(shí)間,降低了成本。
6. 提供簡(jiǎn)單的教程
7.作為在線的編輯工具,預(yù)覽速度和能力較強(qiáng)于離線的原型設(shè)計(jì)工具
墨刀的使用方法
-
用戶可以選擇新建一個(gè)空白原型項(xiàng)目,或者從墨刀提供的模板庫(kù)中選擇一個(gè)模板開(kāi)始設(shè)計(jì)。
![]()
![]()
-
在工作區(qū),用戶可以使用頂部菜單欄的基礎(chǔ)工具,以及頁(yè)面與元素列表中的組件來(lái)搭建和編輯原型。自由度很高。
2.1插入圖片
![]()
2.2加入按鈕
![]()
![]()
3豐富界面,完善內(nèi)容

3.1增加界面
3.2


-
通過(guò)頂部欄右上角的其他工具,用戶可以進(jìn)行團(tuán)隊(duì)協(xié)作和項(xiàng)目共享。
![]()
-
墨刀支持版本管理,方便用戶跟蹤和管理設(shè)計(jì)的迭代過(guò)程。






浙公網(wǎng)安備 33010602011771號(hào)