国产一区二区日韩精品,欧美日韩免费在线观看,亚洲精品国产无天堂网2021

Cezary O?owski ：如今各大公司在產(chǎn)品功能競(jìng)爭(zhēng)上，比起之前口若懸河的宣傳，現(xiàn)在更多的是將功能直接展示出來(lái)。相信你也有過(guò)這種經(jīng)歷，有時(shí)用言詞解釋某些 idea，倒不如在白板或者紙上寫(xiě)下來(lái)更省時(shí)、易懂。而這張紙上的說(shuō)明就是原型。

再來(lái)想象另一種情況。你對(duì)陶器很著迷，打算打造一種新型的噴水壺。此時(shí)明智的方法是和朋友快速制作一個(gè)簡(jiǎn)易模型。因?yàn)槟悴幌胍簧蟻?lái)就開(kāi)始建立龐大的生產(chǎn)線，而只是希望先檢驗(yàn)?zāi)愕南敕ㄊ欠裼新┒础６@個(gè)模型正是原型。

無(wú)論你是要開(kāi)發(fā)一個(gè)新的 App 還是要制作個(gè)噴水壺，原型設(shè)計(jì)作為設(shè)計(jì)流程中的一步，可以幫助你驗(yàn)證自己的想法、向他人說(shuō)明自己的設(shè)計(jì)、還能在用研中幫助檢驗(yàn)用戶體驗(yàn)。如果把設(shè)計(jì)看作是一種溝通手段，那么經(jīng)過(guò)原型打磨過(guò)的設(shè)計(jì)可以讓用戶每次和你的產(chǎn)品溝通時(shí)，都會(huì)有一段愉快的對(duì)話。用戶會(huì)喜歡什么樣的「話題」，也可以通過(guò)原型先測(cè)試一下，把那些讓人不知所措的冷笑話排除掉。這個(gè)打磨溝通的過(guò)程，就是原型設(shè)計(jì)。

那么，應(yīng)該使用什么樣的工具制作原型？這很大程度上取決于你想要實(shí)現(xiàn)的效果以及制作原型的目的。選擇合適的工具對(duì)于開(kāi)發(fā)和客戶的溝通至關(guān)重要。同時(shí)，選擇符合呈現(xiàn)效果復(fù)雜度的工具也很重要，如果只是想制作按鈕的簡(jiǎn)單懸停狀態(tài)，則無(wú)需構(gòu)建整個(gè)屏幕。切忌不要用大炮打麻雀。

挑選工具前，我們需要制定一個(gè)挑選標(biāo)準(zhǔn)。我關(guān)注的幾個(gè)因素是：

1. 易用性

學(xué)習(xí)一款工具有多難？可以不費(fèi)勁的快速自學(xué)還是需要專門(mén)費(fèi)力研究？

2. 協(xié)作效率

這點(diǎn)是原型設(shè)計(jì)的核心價(jià)值。原型是否容易分享并留言評(píng)論？如何與你的團(tuán)隊(duì)以及客戶溝通？留言管理、鏈接分享、云端文件管理，是否可以快速下載并離線預(yù)覽，不同的使用情景需要不同的功能支持。

3. 保真度

原型看起來(lái)是否夠逼真？還是像一個(gè)線框圖大致展現(xiàn)一下思路？高保真原型更適合做用戶測(cè)試，這樣用戶可以更加關(guān)注產(chǎn)品的流程或者功能，而不會(huì)因?yàn)樵偷牡土颖Ｕ娑确中摹５捅Ｕ嬖透m合設(shè)計(jì)的初期想法，此時(shí)你不需要在意具體細(xì)節(jié)。

4. 流程銜接

該工具是否適合現(xiàn)在的工作流程？它是否可以很自然地同現(xiàn)在的工作方式銜接？這一點(diǎn)非常重要，沒(méi)有什么比穿著不合腳的鞋子更糟心了。

一、Framer X

官網(wǎng)鏈接：https://framer.com/

超詳細(xì)評(píng)測(cè)！2019年值得關(guān)注的四個(gè)原型制作工具

Framer 已經(jīng)上線有一段時(shí)間了。它的前身——Framer Studio 是用來(lái)制作高階且復(fù)雜的交互原型，比如可以鍵入信息、調(diào)用設(shè)備傳感。不過(guò)它也有一個(gè)缺點(diǎn)，就是需要 CoffeeScript編程基礎(chǔ)。

Framer X——最新上線的版本，功能強(qiáng)大且入門(mén)門(mén)檻低了很多。現(xiàn)在你僅需點(diǎn)擊幾下就可以制作和之前一樣的高階交互效果。無(wú)需任何編程知識(shí)仍可達(dá)到編程制作的效果。可自定義頁(yè)面過(guò)渡、輕松創(chuàng)建滾動(dòng)組件以及可滑動(dòng)的 UI元素，而且元素還可以快速響應(yīng)。但是如果你需要在原型上添加一些額外的高大上效果，那你就要到一家商店，里面都是用 React編寫(xiě)的代碼組件：YouTube播放器，UI工具包，貨幣轉(zhuǎn)換器，可交互式地圖組件。如果懂 React，你也可以自己建立組件以供自己或他人使用。更棒的是，還可以直接交付代碼給開(kāi)發(fā)套用，減少溝通中的摩擦和誤解。

實(shí)際上，Sketch 是靜態(tài)設(shè)計(jì)工具中的老大，但它卻并不理想。因?yàn)樵O(shè)計(jì)師產(chǎn)出的是圖像，而開(kāi)發(fā)人員需要使用 Invision 或 Zeplin等工具將圖像再轉(zhuǎn)換為代碼。Framer X 旨在讓設(shè)計(jì)師不僅可以繪圖，還可以從多個(gè)方面考慮設(shè)計(jì)，從而讓產(chǎn)品的各個(gè)環(huán)節(jié)更加緊密地聯(lián)系在一起。

1. 易用性

如果你很熟悉 Sketch，就可以順暢無(wú)阻地轉(zhuǎn)換到 Frame X。兩者的主要不同是在創(chuàng)建布局時(shí)，F(xiàn)ramer X 使用的是框架而不是組。框架就像是一個(gè) HTML 的容器，可以將素材等放到隱形容器內(nèi)，這些框架易于操作和調(diào)整樣式。Framer X 還有更多強(qiáng)大的功能，比如 Stacks。使用 Stacks 可以輕松創(chuàng)建具有自動(dòng)分發(fā)和對(duì)齊功能的自定義列表，非常方便。但是，如果要?jiǎng)?chuàng)建更高級(jí)的組件，則需要一些 React 基礎(chǔ)知識(shí)。這可能會(huì)嚇跑一些設(shè)計(jì)師，尤其是那些主張「設(shè)計(jì)師不應(yīng)寫(xiě)代碼」的人。

綜上，在易用性方面，F(xiàn)ramer X 獲得五顆星中的三顆星。

2. 協(xié)作效率

這一點(diǎn)，F(xiàn)ramer X 做的很不好。除非把源文件發(fā)給對(duì)方，否則無(wú)法將項(xiàng)目轉(zhuǎn)交給客戶或開(kāi)發(fā)人員，這真是太不友好了。Framer Studio 有個(gè)很贊的功能，就是你可以將原型上傳到云端，這樣就可以在任何地點(diǎn)訪問(wèn)該鏈接。此外 Framer Studio 還支持下載后離線使用。而 Framer X 則沒(méi)有這些功能。雖然仍可以生成共享鏈接，但一旦關(guān)閉文件或手動(dòng)停止實(shí)時(shí)預(yù)覽，它將自動(dòng)變?yōu)闊o(wú)法訪問(wèn)。我相信 Framer 團(tuán)隊(duì)有能力解決這個(gè)問(wèn)題，但現(xiàn)在我只能給一顆星。我是認(rèn)真的，F(xiàn)ramer團(tuán)隊(duì)！

3. 保真度

這點(diǎn)可以彌補(bǔ)剛剛 Framer 失去的分?jǐn)?shù)。制作高保真原型從來(lái)不是一件容易的事情，而 Framer 絕妙地在工具內(nèi)添加了組件商店。這個(gè)功能將讓 Framer 在近一段時(shí)間內(nèi)脫穎而出。使用 Framer X 進(jìn)行原型設(shè)計(jì)，可以讓設(shè)計(jì)人員更加接近產(chǎn)品設(shè)計(jì)的高峰——UI設(shè)計(jì)體系。像 Airbnb、Shopify團(tuán)隊(duì)已經(jīng)在使用 UI體系為各個(gè)平臺(tái)產(chǎn)品提供統(tǒng)一的設(shè)計(jì)服務(wù)。所以在這里我將給出5分滿分。

4. 流程銜接

最后一點(diǎn)，但卻是很重要的一點(diǎn)：流程銜接。雖然 Framer 僅適用于 Mac，但我們不會(huì)因此而責(zé)怪它。在 Framer 的網(wǎng)站上，寫(xiě)著用戶可輕松導(dǎo)入 Sketch畫(huà)板，你需要做的就是復(fù)制和粘貼。但事實(shí)上并不像他們所說(shuō)的那么容易，而且還無(wú)法導(dǎo)入完整的畫(huà)板。即使可以完整導(dǎo)入，但還存在一個(gè)問(wèn)題：Sketch 導(dǎo)入選項(xiàng)設(shè)置十分有限，且不支持與除 Sketch 以外的其他工具銜接。所以在這里不得不將分?jǐn)?shù)降低到兩顆星。

最終分?jǐn)?shù)11分（滿分20）。總體看來(lái) Framer 還是不錯(cuò)的，但有些方面需要提高。它是一個(gè)值得信賴的軟件，并為其他工具提供了可遵循的方向。

更全面的評(píng)測(cè) →?《大概是東半球最詳盡的 Framer X 深度評(píng)測(cè)》

二、ProtoPie

官網(wǎng)鏈接：http://www.protopie.cn/

超詳細(xì)評(píng)測(cè)！2019年值得關(guān)注的四個(gè)原型制作工具

ProtoPie 是一款比較年輕的產(chǎn)品，不過(guò)在這個(gè)快速變化的市場(chǎng)中，一年半的上線時(shí)間感覺(jué)已經(jīng)不短了。ProtoPie 和 Framer X有一個(gè)相似之處，就是他們都意識(shí)到了設(shè)計(jì)師厭惡寫(xiě)代碼，所以都試圖縮小設(shè)計(jì)和代碼間的縫隙，而最終 ProtoPie 找到了答案。ProtoPie 將交互簡(jiǎn)化成了三個(gè)基本的要素：動(dòng)作對(duì)象、觸發(fā)動(dòng)作和反應(yīng)動(dòng)作。有一個(gè)登錄按鈕（動(dòng)作對(duì)象），用戶點(diǎn)擊它（觸發(fā)動(dòng)作）后，歡迎界面出現(xiàn)（反應(yīng)動(dòng)作）。通過(guò)這種方式，您可以使用大量的觸發(fā)動(dòng)作庫(kù)（基本動(dòng)作，條件和傳感器）拼接出保真度非常高的原型。雖然制作過(guò)程中點(diǎn)擊操作比較多，但產(chǎn)出效果都非常好。

1. 易用性

ProtoPie 并不復(fù)雜，只是頭次使用時(shí)可能會(huì)令人感到困惑。不過(guò)他們有大量的教程幫助你熟悉界面、了解功能，并教導(dǎo)如何制作交互。完全不需要學(xué)習(xí)代碼，所有用代碼可以制作的動(dòng)作，在 ProtoPie 里可以用觸發(fā)動(dòng)作和反應(yīng)動(dòng)作拼接完成。ProtoPie 支持多手指手勢(shì)，還可以調(diào)用手機(jī)內(nèi)部傳感器，從而讓你的原型和真正的 App 看起來(lái)相差無(wú)幾。用戶使用文檔的內(nèi)容非常豐富，幫助你輕松學(xué)習(xí)并制作高大上的交互原型，整個(gè)過(guò)程不涉及任何代碼。不過(guò)因?yàn)榈谝淮问褂玫臅r(shí)候，看起來(lái)并不直觀，所以我要在這點(diǎn)上減掉一分，最終易用性得分4分。

2. 協(xié)作效率

首先，你可以使用 Wi-Fi 或 USB連接手機(jī)后，在手機(jī)上預(yù)覽原型，甚至可以在本地保存并離線測(cè)試。不僅如此，還可以上傳作品到云端后分享鏈接給客戶或團(tuán)隊(duì)成員，他們可以在電腦或手機(jī)上測(cè)試交互動(dòng)作。不過(guò)很遺憾，你沒(méi)有辦法添加留言評(píng)論并導(dǎo)出開(kāi)發(fā)說(shuō)明文檔。盡管如此 ProtoPie 的協(xié)作功能還是很實(shí)用，所以這項(xiàng)至少可以獲得三顆星。

3. 保真度

ProtoPie 提供了諸多強(qiáng)大的功能，不過(guò)這并不影響它的易用性。創(chuàng)建精致的交互原型其實(shí)并不復(fù)雜，任何專業(yè)的產(chǎn)品設(shè)計(jì)師都可以快速地制作出來(lái)。從微交互到逼真的全套交互，最終效果都非常棒。只是與 Framer X 相比，ProtoPie 無(wú)法導(dǎo)入代碼組件，所以可創(chuàng)建的效果有限。最終此項(xiàng)分?jǐn)?shù)為4分。

4. 流程銜接

ProtoPie 適用于 Mac和 Windows。還可以導(dǎo)入 Sketch 和 Adobe XD（包括Windows平臺(tái)），而且導(dǎo)入效果很贊，你有多種導(dǎo)入方式：整個(gè)畫(huà)板或個(gè)別圖層。ProtoPie Player（演示端）支持安卓和 iPhone。以上這些可以說(shuō)幾乎涵蓋了所有需求。最后，我想提一下跨平臺(tái)交互功能，有了它，你可以創(chuàng)建多個(gè)設(shè)備之間的通信交互，例如聊天或匯款交易。這真是太前衛(wèi)了，當(dāng)之無(wú)愧的滿分。

最終 ProtoPie 獲得了16分（滿分20）的高分。如果你需要快速地創(chuàng)建高保真原型，并分享給客戶來(lái)做用戶測(cè)試，那么 ProtoPie 就是你的不二選擇。

更全面的評(píng)測(cè)和獨(dú)家福利 → 《誰(shuí)說(shuō)交互原型制作難？那是你還沒(méi)用過(guò)這個(gè)神器！》

三、Flinto

官網(wǎng)鏈接：https://www.flinto.com/

超詳細(xì)評(píng)測(cè)！2019年值得關(guān)注的四個(gè)原型制作工具

這是一款很有名的軟件。但是你肯定也很清楚，和其他競(jìng)爭(zhēng)對(duì)手比，F(xiàn)linto 還是存在一些問(wèn)題的。Flinto 提供了最基礎(chǔ)的功能，對(duì)初學(xué)者來(lái)說(shuō)非常直觀。你可以創(chuàng)建復(fù)雜的頁(yè)面流程，也可以創(chuàng)建簡(jiǎn)單小巧的交互。Flinto 不支持任何編碼，也沒(méi)有時(shí)間線，如果剛好你就需要這些基本功能，那么這個(gè)工具絕對(duì)適合你。

1. 易用性

Flinto 沒(méi)有任何學(xué)習(xí)成本，你需要做的就是知道你想要的效果是什么，以及 Flinto 能否實(shí)現(xiàn)。創(chuàng)建交互很容易——選擇對(duì)象或畫(huà)板并添加鏈接或手勢(shì)。此外還可以添加頁(yè)面切換效果、添加音效、調(diào)整時(shí)間，就這些，一個(gè)原型就搞定了。網(wǎng)上有很多教程，F(xiàn)linto 官網(wǎng)上還有說(shuō)明文檔來(lái)幫助你創(chuàng)建原型。無(wú)需代碼，滿分。

2. 協(xié)作效率

Flinto 允許在手機(jī)上預(yù)覽您的原型，但只支持 iOS。將 Mac和 iPhone連接到同一網(wǎng)絡(luò)后就可以直接在設(shè)備上測(cè)試原型。不過(guò)很可惜，F(xiàn)linto 共享功能十分有限，沒(méi)有鏈接分享，也沒(méi)有任何與開(kāi)發(fā)及客戶協(xié)作的功能。雖然可以錄制預(yù)覽窗口分享視頻文件，或直接將其上傳到 Dribbble，但這個(gè)分享方式很不方便，這也是該工具的一個(gè)很大缺點(diǎn)。很遺憾，一顆星。

3. 保真度

Flinto 在基本交互的制作上雖然還是不錯(cuò)的，但是如果想制作中高階交互，如：文本輸入、視頻等，很遺憾 Flinto 并沒(méi)有這些功能。不過(guò)它支持 Sketch導(dǎo)入，快速讓靜態(tài)素材動(dòng)起來(lái)，這點(diǎn)還是很贊的。因?yàn)?Flinto 會(huì)限制你的技能和想象力，所以保真度這項(xiàng)兩顆星。

4. 流程銜接

Flinto 的局限性在于它僅支持 Mac，預(yù)覽端 App 也僅適用于 iOS設(shè)備。而且只能導(dǎo)入 Sketch文件，要不就在 Flinto 里面自己設(shè)計(jì)，顯然這可不是一個(gè)好主意。一顆星。

最終得分9分（滿分20）。Flinto 做到了所見(jiàn)即所得，雖然沒(méi)有什么高級(jí)功能，但如果你只是想串聯(lián)多個(gè)頁(yè)面，加一些簡(jiǎn)單的交互，然后展現(xiàn)給你的團(tuán)隊(duì)或者分享到 Dribbble，F(xiàn)linto 可以滿足你的需要。當(dāng)然 Sketch插件也能達(dá)到這些要求。

四、Atomic

官網(wǎng)鏈接：https://atomic.io/

超詳細(xì)評(píng)測(cè)！2019年值得關(guān)注的四個(gè)原型制作工具

和之前提到的工具不同，Atomic 是在網(wǎng)頁(yè)端操作的軟件。個(gè)人其實(shí)更喜歡安裝型應(yīng)用，但是我還是要感謝 Atomic 提供了強(qiáng)大協(xié)作功能，比如團(tuán)隊(duì)可以遠(yuǎn)程協(xié)作同一個(gè)項(xiàng)目。不過(guò) Atomic團(tuán)隊(duì)宣布他們正將把注意力轉(zhuǎn)移到其他項(xiàng)目上。如果你有 Atomic 的賬戶，你可以一直使用到2019年6月30日，在此之后你將無(wú)法再使用 Atomic。真是個(gè)壞消息！不過(guò)你還有一些時(shí)間試試這款工具。

1. 易用性

Atomic 有著非常不錯(cuò)的新手引導(dǎo)：無(wú)需閱讀任何說(shuō)明文檔，引導(dǎo)會(huì)帶領(lǐng)你完成幾個(gè)任務(wù)，這對(duì)工具的學(xué)習(xí)非常有幫助。了解基本原理后，你就幾乎可以制作所有的效果。Atomic 具有直觀的界面，高階動(dòng)效庫(kù)以及可嵌套的組件。此項(xiàng)得分4分。

2. 協(xié)作效率

在協(xié)作這項(xiàng)上，Atomic 無(wú)疑是最棒的。你可以邀請(qǐng)團(tuán)隊(duì)成員同時(shí)編輯同一個(gè)項(xiàng)目（就像Figma），制作完成后，可以簡(jiǎn)單快速地分享鏈接并添加留言評(píng)論。還可以創(chuàng)建類似于 Sketch 的共享庫(kù)，這樣整個(gè)團(tuán)隊(duì)可以共用同一個(gè)設(shè)計(jì)資源。該功能對(duì)于那些需要為不同平臺(tái)設(shè)計(jì)響應(yīng)式產(chǎn)品的團(tuán)隊(duì)至關(guān)重要。Atomic 此項(xiàng)得分5顆星。

3. 保真度

Atomic 在多種手勢(shì)動(dòng)作、表格交互、轉(zhuǎn)場(chǎng)效果、鍵盤(pán)交互（方向鍵等）等效果的使用上非常簡(jiǎn)單，效果也很逼真。你也可以將交互與微動(dòng)效相結(jié)合，以實(shí)現(xiàn)更真實(shí)的效果。基于線上編輯的工具里，如果將 Atomic 與其他后起之秀相比，你也會(huì)和我一樣認(rèn)定 Atomic 的表現(xiàn)更為突出。四顆星。

4. 流程銜接

你可以在瀏覽器上使用 Atomic，所以電腦系統(tǒng)變得無(wú)關(guān)緊要。不過(guò)在我撰寫(xiě)這篇文章的時(shí)候，Atomic 只支持 Sketch導(dǎo)入，所以除非你選擇在 Atomic 上自己繪圖，否則繪圖階段會(huì)受到 Mac系統(tǒng)的限制，3顆星。

最終得分16分（滿分20）。如果你不介意在網(wǎng)頁(yè)端制作原型，那么對(duì)于整個(gè)團(tuán)隊(duì)來(lái)說(shuō)，Atomic 無(wú)疑是最強(qiáng)大的工具，尤其是在大公司或者遠(yuǎn)程工作的團(tuán)隊(duì)，協(xié)作功能非常有用。