交互原型工具:好的工具是利器,壞的工具是鈍器

6 評論 18282 瀏覽 82 收藏 10 分鐘

好的工具是利器,壞的工具是鈍器。每個人都可以找得到最適合他的利器,我希望你也一樣。

如果你是 UX/UI 設計師,你一定會聽說過無數個交互原型工具。設計資訊網站總是不厭其煩地介紹新的交互原型工具,標題通常是:

  • 《這款最新的設計工具,也許你該上手試試》
  • 《動效設計神器!Sketch 絕佳搭配》
  • 《30 秒制作交互原型的新晉神器》
  • 《這才是適合設計師的動效制作工具》
  • 《2016 年十佳原型制作工具》

所以現狀很尷尬:在決定該學習哪個工具這件事上,很多人花費的時間比學習工具的時間還要多。

如果你恰好就在猶豫,我希望這篇文章對你有幫助。

你可能還不需要

其實很多設計團隊還沒有在實際項目中真正使用到交互原型。這跟設計流程有很大的關系。使用交互原型,意味著在設計流程中需要增加一個“制作交互原型”階段,甚至還需要在設計早期增加“用戶測試”。而大多數時候囿于“敏捷”,我們的流程僅僅是“需求評審-畫圖-設計評審-跟進開發-觀察用戶反饋”。

所以,盡管全世界都在吆喝著交互原型工具非常重要,你也要知道:你學了,不一定能用得上。也就是說,如果你還有很多工具要學習,那么交互原型工具可能適合放在“重要而不緊急”的象限里。從 2015 年,也就是交互原型工具開始井噴的那一年,到現在,我在工作中從沒有遇到過不得不親自做交互原型的情況。

當然,如果你所在的團隊,或者你即將要加入的團隊,他們的設計流程已經包含了“制作交互原型”,那自然是非常緊急了。你肯定不愿意成為團隊里唯一一個只會畫靜態原型的同學。

又或者,你發現工作中經常需要用到的工具自己都掌握得差不多了,那也不妨開始著手學習。相信我,這是一個提升設計技能的好方式。

我們在什么時候使用交互原型?

這兩年來我做過的交互原型不多,但是每一個都發揮了應有的作用。在設計流程的不同階段,交互原型的作用會有所不同:

  1. 探索方案的時候,給自己體驗。當你要嘗試一個市場上還沒有出現過的設計方案時,你一定會非常糾結,因為你不知道實際用起來會怎樣。
  2. 展示設計方案的時候,說服同事。對于設計方案的傳達,語言是蒼白的,畫圖要有用的多;線框圖是蒼白的,高保真的效果圖要有用的多;而有些時候,效果圖也是蒼白的,只有真正動起來的界面,才能最真實地傳達你的想法。
  3. 早期用戶測試的時候,驗證方案。在設計早期開發通常不會介入。這時候如果需要做用戶測試的話,你希望用戶拿著幾張截圖去想象自己會怎么用嗎?
  4. 輸出設計方案的時候,保證還原度。工程師恍然大悟地說“哦我知道是怎樣的效果了”的時候,你們倆腦海里的畫面可能根本不一樣。別問我是怎么知道的……

把交互原型帶入日常工作中之后,我發現自己的思維方式發生了改變。以前想到一個新方案,可能會擔心開發出來并沒有想象中好用,于是擱置;現在不管想到什么奇怪的方案,如果真心喜歡,總會先把交互原型做出來,然后找同事一起討論。以前提出一個方案如果被否定了,會糾結幾天,覺得一個偉大的創意被埋沒了;現在一言不合就去把原型做出來給大家看,然后大家發現原來還真的不錯——哪怕大家還是覺得不好,我也不會再糾結了,因為如果他們體驗到了最真實的效果卻仍然不為所動,說明這個方案確實沒那么好。

如何選擇

如開頭所說,現在的交互原型工具已經多到需要評出個“十佳”。幸好,時間不僅是個庸醫,還是個篩子。兩年過去了,孰好孰壞我們至少能略知一二。

選擇交互原型工具首先要看團隊。如果你的團隊都在用 Principle,并且使用得非常愉快,那么你也很適合選擇 Principle。因為當你在學習的道路上遇到困難,尋求你旁邊的同事幫忙顯然會比跪求論壇上的“大神”幫忙更加有效。而且,源文件共享也可以提高團隊的協作效率。

然后是看需求。有些設計師想做的原型包含著非常復雜的頁面跳轉,而有些設計師想做的原型只是兩三個頁面間的細膩動效。這兩種需求分別對應著基于頁面基于圖層的交互原型工具。對于后者,我推薦 Principle、Origami 和 Framer。而對于前者,我沒有相關需求,所以并沒有深入了解,如果真要選的話,Adobe XD、InVision 和 Flinto 可能不錯。需要強調的是,基于頁面的原型工具做不了復雜的微交互。

最后是看個人偏好。上面提到的每個工具都有自己獨特的優勢(以及劣勢):

  • Principle 易上手,卻能做到非常好的效果??赡苁蔷C合得分最高的一款。
  • Origami 是可視化編程的思路,功能強大,由 Facebook 團隊維護。學習成本較高。
  • Framer 則是基于 JavaScript,理論上現代瀏覽器中所能實現的效果它都沒問題。需要手寫代碼,學習成本較高。
  • Adobe XD 有品牌保證,而且支持 Windows 平臺。
  • InVision 來自一個非常有想法的團隊,順便推薦他們的博客。
  • Flinto 操作簡單,基于頁面,同時也可以做一些微交互。

你最關心的問題可能是這個工具是不是足夠強大,以及會不會很難學。事實上,學習成本與工具能力始終反相關,所以當你決定去學習一款功能強大的原型工具時,迎接你的可能是充滿挑戰(和樂趣)的旅程;而如果你只想投入有限的時間和精力,那不妨選擇一款容易上手、功能夠用的。

我個人最喜歡的是 Framer,盡管它的學習曲線非常陡峭。

其他建議:

  • 你可能還聽說過 Pixate 和 Form,但自從 Google 把它們收購之后就再也沒有消息了,所以不建議你去學
  • 警惕新出的工具,除非你真的有時間去嘗鮮或試錯
  • 在實際項目中找機會去使用交互原型,這能讓你學得更快

我從來不認同“工具沒有優劣之分,主要看使用工具的人”的說法。好的工具是利器,壞的工具是鈍器。每個人都可以找得到最適合他的利器,我希望你也一樣。

 

作者:張土福,交互設計師@魅族科技

來源:https://zhuanlan.zhihu.com/p/26658087

本文由 @張土福 授權發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來自StockSnap.io,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 真佩服你們,100字的內容硬是寫成了一篇長篇小說

    回復
  2. Axure 摩客呢,不經常用嗎,還是我理解的不同

    回復
    1. AXURE和mockup是做原型的。這里到了原型的下一步UI了

      來自天津 回復
  3. Ominigraflle這個工具也不錯。雖然教程比較少,不過自己摸索著時間久了也就熟練了。

    來自北京 回復
  4. ??

    來自廣東 回復