當(dāng)前位置: 首頁(yè) > 設(shè)計(jì)資訊 > 理論文摘 > 正文

幫你設(shè)計(jì)加速的7款頂尖原型工具

2017-12-04 1684 0

對(duì)于許多剛剛開(kāi)始接觸原型設(shè)計(jì)的設(shè)計(jì)師而言,很容易混淆線框圖(Wireframe)、視覺(jué)稿(Mockup)和原型(Prototyping)這三個(gè)基本概念。

文章封面.jpg

對(duì)于許多剛剛開(kāi)始接觸原型設(shè)計(jì)的設(shè)計(jì)師而言,很容易混淆線框圖(Wireframe)、視覺(jué)稿(Mockup)和原型(Prototyping)這三個(gè)基本概念。

在許多項(xiàng)目和相關(guān)文章中,這些概念經(jīng)常被混用。雖然在功用上,三者有許多相似點(diǎn),然而差異也非常明顯。

  • 線框圖是一種低保真的靜態(tài)設(shè)計(jì)稿,它勾勒出布局輪廓,但是缺少細(xì)節(jié)。

  • 視覺(jué)稿則是算得上是接近于高保真的設(shè)計(jì)稿,其中擁有大量的視覺(jué)信息和細(xì)節(jié)呈現(xiàn),但是它依然是靜態(tài)的。

  • 原型和視覺(jué)稿接近,是接近于高保真的設(shè)計(jì)稿,但是原型是動(dòng)態(tài)可交互的,一些后期的、完成度極高的原型設(shè)計(jì)甚至和最終的產(chǎn)品看起來(lái)相差無(wú)幾,因?yàn)樗鼈儾粌H擁有細(xì)致到位的視覺(jué)設(shè)計(jì),同時(shí)還模擬出了理想中的用戶體驗(yàn)。

不過(guò),許多原型并不一定得做的非常的好看,它最主要的的功能是還原并呈現(xiàn)設(shè)計(jì)思路,它需要是可運(yùn)行、可交互的,這是核心。

一個(gè)典型的原型設(shè)計(jì)工作流大概是這個(gè)樣子的:

  1. 繪制頁(yè)面流程。呈現(xiàn)出用戶可能會(huì)如何瀏覽頁(yè)面或者APP。

  2. 創(chuàng)建低保真原型,為每個(gè)頁(yè)面創(chuàng)建多個(gè)不同的版本,進(jìn)行可用性測(cè)試,搜集相關(guān)的數(shù)據(jù)和用戶反饋。

  3. 完善原型的細(xì)節(jié)和真實(shí)度,向著最終產(chǎn)品的外觀靠攏。在增加細(xì)節(jié)之前,請(qǐng)確保原型的功能已經(jīng)得到完善,并足以滿足需求。

InVision

1.jpg

InVision有多優(yōu)秀?Twitter和 Uber在用它,福布斯推薦它,而財(cái)富榜百?gòu)?qiáng)企業(yè)都在用它來(lái)設(shè)計(jì)產(chǎn)品。InVision 將產(chǎn)品設(shè)計(jì)流程中的每一個(gè)環(huán)節(jié)都進(jìn)行了細(xì)化,讓協(xié)作成為了流程的核心,讓團(tuán)隊(duì)中每個(gè)人都能?chē)@著項(xiàng)目推進(jìn)緊密地合作。

InVision 讓團(tuán)隊(duì)可以在瀏覽器中實(shí)現(xiàn)實(shí)時(shí)協(xié)作。如果你想讓你的高保真原型能夠像真實(shí)產(chǎn)品一樣運(yùn)作,如果你想讓你的原型自由無(wú)限制地進(jìn)行測(cè)試,如果你希望你的原型能夠像素完美,那么InVision 應(yīng)該是最適合你的原型工具,哪怕你沒(méi)有一點(diǎn)編程和代碼知識(shí)。

Pidoco

2.jpg

如果你不想在產(chǎn)品開(kāi)發(fā)流程中放棄線框圖,那么Pidoco 可能是更好的選擇。和InVision 不同,Pidoco 真正的核心優(yōu)勢(shì)在于設(shè)計(jì)出強(qiáng)交互性的UX原型。在Pidoco 的協(xié)助下,你能創(chuàng)造出可用來(lái)展示、完全可操作的原型,支持手勢(shì)操作、過(guò)渡動(dòng)效、鍵盤(pán)錄入等多種復(fù)雜交互,它可以為你帶來(lái)理想的移動(dòng)端演示原型。

你可以在瀏覽器、iOS和Android 設(shè)備上實(shí)時(shí)演示你的原型,Pidoco 的智能模板使得原型的設(shè)計(jì)和搭建極其快速而便捷,這也使得它簡(jiǎn)單易學(xué),將它介紹給團(tuán)隊(duì)成員并作為主要的工具之一絕不會(huì)是麻煩的事情。

由于Pidoco 主要是在云端運(yùn)行,所以你不需要安裝程序,只需要登錄、同步、演示就好了。同樣的,Pidoco 不需要你具備代碼知識(shí),上手很快的哦。

Proto.io

3.jpg

Proto.io 是一款專(zhuān)門(mén)的移動(dòng)端原型設(shè)計(jì)平臺(tái),它不僅能幫你搭建可交互的原型,可以能用來(lái)測(cè)試和模擬移動(dòng)端APP。Proto.io 能運(yùn)行于絕大多數(shù)的網(wǎng)頁(yè)瀏覽器,它擁有一個(gè)用來(lái)管理整個(gè)項(xiàng)目的控制面板,一個(gè)專(zhuān)用的編輯器,以及專(zhuān)門(mén)運(yùn)行原型的播放器。這些工具使得你可以在iOS和Android 設(shè)備上測(cè)試你所設(shè)計(jì)的原型。

在使用編輯器搭建原型的過(guò)程中,用戶可以查看并參與進(jìn)來(lái),通過(guò)交互和體驗(yàn)之后,給予設(shè)計(jì)者以反饋。來(lái)自IDEO、迪士尼、PayPal 的設(shè)計(jì)師目前都在使用Proto.io 設(shè)計(jì)原型。Proto.io 不僅加快了他們的設(shè)計(jì)工作,而且避免了開(kāi)發(fā)過(guò)程中犯錯(cuò)的可能帶來(lái)的高昂代價(jià)。

如果你想更快地將產(chǎn)品推向市場(chǎng),Proto.io 所提供的解決方案應(yīng)當(dāng)能夠讓你事半功倍。

Webflow

4.jpg

如果你的產(chǎn)品從研發(fā)到發(fā)布都是采用標(biāo)準(zhǔn)的HTML、CSS和JS的代碼,那么Webflow 能夠?yàn)槟闾峁脑驮O(shè)計(jì)到最終交付一條龍的服務(wù)。借助Webflow 設(shè)計(jì)的頁(yè)面都是響應(yīng)式的,當(dāng)你打算將它展示給團(tuán)隊(duì)成員、客戶和其他利益相關(guān)者的時(shí)候,發(fā)送一個(gè)鏈接就可以了。

Webflow 是一款針對(duì)網(wǎng)頁(yè)端的高素質(zhì)原型設(shè)計(jì)工具,版本控制和迭代升級(jí)永遠(yuǎn)不是問(wèn)題。從原型、設(shè)計(jì)到開(kāi)發(fā),逐步推進(jìn),步步為營(yíng)。

PowerMockup

5.jpg

如果你是PowerPoint 用戶,那么這款原型工具會(huì)是你的菜。PowerMockup 是一款PowerPoint中運(yùn)行的原型工具包,有了它,你可以借助PPT直接設(shè)計(jì)制作出可運(yùn)行、能交互的原型,絕對(duì)有說(shuō)服力。

借助PowerMockup 來(lái)設(shè)計(jì)原型并不復(fù)雜,你所需要做的就是從PowerMockup 的庫(kù)當(dāng)中選取合適的形狀和控件,托拽到PPT背景上,制作成合理的布局。結(jié)合PPT當(dāng)中的動(dòng)效和交互功能,一個(gè)可靠的原型就能搞定了。

HotGloo

6.jpg

如果你一直在尋找一款簡(jiǎn)單易用、擁有全部正確功能的原型工具,那么不妨試試HotGloo。作為一款屢獲殊榮的原型設(shè)計(jì)工具,HotGloo 能為你提供舒適的設(shè)計(jì)環(huán)境,幫你在瀏覽器中設(shè)計(jì)出交互生動(dòng)而有趣的原型。

當(dāng)你開(kāi)始使用HotGloo的之后,你同時(shí)擁有了其中內(nèi)置的2000+ UI控件,多賬戶授權(quán)能夠方便你與同事進(jìn)行協(xié)同,同事能夠針對(duì)移動(dòng)端優(yōu)化,測(cè)試你的設(shè)計(jì)效果,并且能夠動(dòng)態(tài)地添加注釋。除此之外,HotGloo還擁有完整的文檔說(shuō)明,詳細(xì)的視頻教程,還有在線論壇供大家討論。

Lucidchart

7.jpg

Lucidchart 可能是目前市場(chǎng)上最好的圖表和線框圖設(shè)計(jì)解決方案。它不僅僅能幫你完成工作流程圖和思維導(dǎo)圖,還能將你設(shè)計(jì)的圖表和線框圖快速地轉(zhuǎn)化為可交互的原型,并且能用作展示和測(cè)試之用。

有了Lucidchart ,創(chuàng)建大型、復(fù)雜的線框圖就再也不是問(wèn)題了,內(nèi)置的協(xié)同服務(wù)讓你可以更加便捷地同團(tuán)隊(duì)成員和客戶進(jìn)行合作。Lucidchart 本身是一個(gè)基于云服務(wù)的APP,能夠和 Google Apps 、Google Drive、Confluence、Jive以及 JIRA 進(jìn)行聯(lián)動(dòng)和協(xié)同。

總結(jié)

其實(shí)就原型設(shè)計(jì)工具都只是手段,選擇合適的工具即可,更重要的是原型設(shè)計(jì)的思路。

了解更多原型設(shè)計(jì)的知識(shí),參與更多的項(xiàng)目,一邊實(shí)踐一邊學(xué)習(xí)知識(shí),在實(shí)戰(zhàn)中了解不同工具的優(yōu)劣好壞,再作出符合你需求的選擇就好了。



15
評(píng)論區(qū)(0)
正在加載評(píng)論...