跳到主要內容區塊

為什麼你應該把原型設計(Prototyping)放進你的 UI/UX 設計流程中?(下)

有些哪些工具可以用來做原型?

現在市面上有各式各樣的原型製作工具,每個工具都有不同的特色和優勢,其中大部分都有免費試用期,可以可以都玩玩看然後選擇一個喜歡的深入研究,當原型做得越多越熟練就可以實現更多效果,這些分享幾個大部分人最常使用的原型工具:

1. Figma / Sketch / Adob​​e XD

這些主要是UI設計工具,但也有提供基本的原型製作功能,讓設計師可以非常快速地建立頁面連結流程。

2. Invision

這個和上面的設計工具類似,Invision 是一個原型設計和協作工具,讓設計師可以製作頁面流程並能夠與整個團隊分享。它也有設計交付功能,讓工程師可以輕鬆查看元件的設計規格。

3. Axure

擁有各種功能的設計和原型工具,將整個設計過程可以一條龍用同一個工具來完成,它也提供許多先做好的功能元件,設計師可以馬上有現成的元件打灶互動原型,它也提供共享連結讓的每個人都到雲端試用你的原型。

4. Principle / Flinto / ProtoPie / Proto.io / UX Pin

這些工具其實都非常類似,儘管功能上可能有些不同,但是大致上都可以用它們來做一些需要比較多細節的互動和轉場,例如,可以點擊個元件來控制其他元素,或是呈現元件在不同頁面的變形狀態,這些功能可以讓你原型變得更加逼真。

5. FramerX

Framer X 專門做是高保真原型的工具,具有非常強大的功能,可以完美在設計和程式碼之間連結,即使對於設計師來說學習曲線有點高,但是用 FramerX 可以真的去做出功能完整的程式碼元件、串接 API 來呈現真實數據等等。

上面提到的工具各有優缺點和不同的學習曲線,我建議可以先試用之後再決定要投資學哪些工具。

💡關於原型設計,幾個可以留意的事情

  • 大多數時候我們不需要在原型中重現整個產品體驗,我們只需要專注在核心的使用流程或是我們想要驗證的部分功能即可。
  • 原型設計不是一次性的事情,它必須要是可以迭代和持續改進的。
  • 原型不需要做到完美,如果有些部分真的很難做,只需要放假圖即可,原型主要是要用來獲得反饋和迭代的,不是要完美展示每一個細節。
  • 做原型目的是個關鍵,要明智地選擇合適的原型方法去搭配你目前的流程的情況。
  • 即使是高保真原型也不應該花費太長時間去製作,因為如果花費太長時間,我們將會少掉很多改善想法的機會。
  • 如果要讓真實使用者去測試原型,請確保事先計劃好要使用者完成的任務,並確保你的原型足以讓你從使用者身上學到你想學的東西。
  • 盡量把目標專注於進化你的設計和原型,這將會幫你要解決得問題帶來許多不同的解決方案。

總結:原型只是另一種幫助溝通的方式

身為設計師,我們都希望我們的設計能夠被實現並提供最好的使用體驗。 要讓我們的設計更有說服力和強壯往往不像我們想的那麼簡單,需要和很多人一起合作才能完成。

無論在我們的設計過程中裡做什麼,其實都與同個目標綁在一起,那就是:「打造最好的產品和體驗。」而這需要花費大量的設計迭代和數不清的溝通,而原型製作只是其中一種方法幫助設計師更好地闡述設計,以及通過思考細節讓自己的想法更精煉。(完結)

 

資料來源:轉載自Lin Simon 於Medium 網站發表之『為什麼你應該把原型設計(Prototyping)放進你的 UI/UX 設計流程中,發掘原型設計的價值,讓你的設計更有說服力』

Simon 目前在東京的跨國企業擔任 UX 設計師,同時也是設計內容媒體 AAPD 的創辦人。熱愛學習、分享工作與生活的大小事。透過自學進入 UI/UX 領域,並於 2016 年開設了自己的 UI 設計線上課程,這幾年也在不同的公開設計活動上分享自己的設計方法、海外工作經歷等內容。擅長透過不同的角度與觀點傳遞設計的價值,熱衷於分享知識並持續建立社群之間的連結,目標是成為有正面影響力的設計師。

個人網站:http://simonlin.design/

個人 Medium: https://medium.com/as-a-product-designer