對原型設計的看法及工具的期待

因為喜歡動畫,所以對原型工具一直感到有趣,享受他動態的過程、而且是直接跟人互動的動態。

文章會分兩部分,一是原型工具在專案裡的角色、二是我想像中美好的原型工具應該長什麼樣子。

一、原型的角色

Prototype,存在兩種 — 低保真原型、高保真原型,不過都有一項共同的意義:會動、可以操作。

之前發現國外跟國內的原型設計,在定義及使用情境上有一些差異,國外的原型比較偏向用手邊的素材,簡單而快速地驗證想法的可行性,也就是在線框圖階段就利用低保真的原型進行用戶測試 ; 但國內有時候是把產品規格都設計好、製作一個高保真、模擬完成後的樣品,兩種在專案中的成本、角色也都因此不同,沒有對錯、其實甚至是可以並存的。

以製作一個好的產品而言,其實認為低保真原型遠比高保真重要,因為產品的易用性更多時候是在wireframe階段形成、而非mockup階段,等到設計完成才來製作和測試,發現不好用時又打掉重練,難保設計師們不會心痛。

既然重要性在於要能將產品雛型給使用者試用,取得使用評價喜好、快速修正後再繼續測試,讓產品能更接近用戶的需求,這時的Prototype就有幾項特性:

  1. 一個問題一個原型

了解產品或專案中有哪些問題可能導致失敗,有多少問題、就該有多少原型,每個原型只針對一項問題做出需要的線框圖跟流程。

2. 不用太完美、不要愛上自己的原型

因為是希望以最低的成本驗證問題是否被解決,不需要做的多完美,一來花許多心思完成,似乎在宣告大勢已定、不可修改,二來太高的時間成本對專案流程容易造成延遲,同時設計師也必須確保自己不會愛上自己的任何一個protpype、避免偏離用戶為中心的意義(不過我還是常常不小心愛上XD)。

3. 原型是用來驗證、用來說服他人

對設計師而言,能夠說服別人自己的設計通常有三種方法:設計理論、同類作品、統計數據,prototype正好可以幫助擁有數據,至少當客戶說其他某某產品有某項功能為什麼我們沒有、可以拿用戶測試的結果出來說明抗衡(堅持自己也是使用者他說的才對的客戶無效XD)。

另一部分,對初階設計師來說,製作原型可以幫助自己釐清思緒、加強對用戶的認知,確保自己不會為設計而設計,例如糾結著整體設計框架、哪種佈局看起來更舒服,卻忘了用戶煩惱的其實只是找不到按鈕或不知道自己的下一步,這也是當初自己開始嘗試低保真prototype的原因。

但並不是說不應該做高保真的prototype,我認為他依舊有驗證產品的意義,只是不再是拿來驗證問題、而是確認產品最後的樣子。

高保真的原型在專案中可能是比較需要的,除了客戶看到線框會恐慌,遇到不是那麼熟悉領域的客戶,事先將”假產品”提供給客戶確認、可以減少開發完才被說”跟我想的不一樣”而大改特改的機率,內部溝通也可以更確實、讓團隊中不同角色的人都有一個製作的依據,有時工程跟設計之間也會有一種羅生門產生(笑)。

以最完整而理想的狀態來說,專案流程如果時間足夠,執行過程可以是這樣:wireframe > 低保真prototype > mock up > 高保真prototype,但實際上通常無法做的這麼紮實,高保真的原型產出尤其困難,在專案中時常因為時程太趕而省略,產品中除非默契很差、似乎也不一定需要大費周章做一個原型給內部確認,但要說高保真prototype可以省略卻也很可惜,至少目前趨勢看起來是會有所發展的,畢竟介面的互動越來越重要,如何在流程中實現,歡迎補充。

二、對原型工具的期待

大學時期學過一點表面上的介面,當時介面的發表是用After Effects做動畫展示(笑),工作後才感受到那其實也是一種原型的意義,但是少了”可以讓人操作”的元素。

雖然對AE並不陌生,另外學習新的工具反而需要時間成本,卻還是認為在一般的專案中製作原型的工具必須簡單,除非需要創造全新的互動模式、或是非手機、網頁等載具的互動,否則AE實在大材小用。

而市面上的原型工具非常多,低保真的Prott(大推)、Invisin、UXPin,中高保真的Protopie(感覺不錯、嘗試中)、Mockplus(不錯、但無法直接Sketch匯入)、Hype、Framer等,目前常用的是Prott,通常接在wireframe之後幫助自己確認操作流程(客戶看到會動的黑白稿會以為是成品受到驚嚇、而且無法解釋XD),中高保真的原型因為道行還淺、專案速度也比較快,所以只能自己玩玩(淚)。

以低保真、只是用來討論跟確認流程的原型,其實Prott已經足夠,他擁有基本的頁面交互、也能產出flow,但高度保真的原型就比較難以滿足,自己希望的高保真原型應該有幾項特性:

  1. 有實際能操作的介面,包含過場動畫、動態特效

因為這點所以覺得AE不適合,另一部分是製作動態的難易度,有些原型工具用比較動畫時間軸的方式去設定動態,另一種像Mockplus是有許多現成的元件可以套用,個人比較希望兩種結合,以套件為主、必要時可以調整動態曲線(貪心),目前發現Protopie好像可以做到、但還沒有仔細嘗試。

2. 可以有分享連結,在網頁或App演示

第一次使用Mockplus到最後才知道免費版發佈限制很多的時候,真的除了讚嘆這種高明的搶錢手法之外只剩下眼淚。不過分享連結大部分工具都有辦法做到,除了App會需要下載自家App來用,對製作者的好處是可以一次管理多個專案,但有時要測試者或客戶先下載App再來測,不太先進的客戶也是會有小困擾。

3. 可以多人操作測試、甚至留下評價或建議

Prott、Invision這類的原型反而都有做到多人評論這點,卻還沒遇過高保真的工具有這項功能,有的話歡迎補充。

4. 不要寫Code(會寫code的設計師一半都不會繼續當設計師好嗎)

絕對同意懂一點程式對作為一個好UI有幫助,但要自己刻出來成本還是太高了,畢竟原型如果本意在測試,修修改改的機會還很多,太花時間去製作反而壞了原型講求快速驗證的意義,可能道行高深的高級UI除外,也或許這是為什麼很多人工具用一用跑去學Html5跟Swift吧…

5. 能同時展示RWD網頁,電腦版與手機版的樣子

常常遇到做了電腦版跟手機版的樣子,卻不能一個連結同時展示(囧),很希望可以設定是RWD網頁,在展示時有切換電腦跟手機版的按鈕,直接偵測解析度變化更棒XD

6. 同時擁有線上、桌面版的平台

現在很多工具都是線上版,但有時候網路或伺服器掛掉就會影響工作,因此還是希望有桌面版、再上傳雲端同步分享,Prott跟Mockplus都有做到這點。

7. 產出工程師可以用的code

只是為工程師著想一下,萬一創造了一種新動態,要工程師去看著刻還想要長得一樣應該會被討厭(笑),不過這項明顯是難度太高了,多請工程師吃飯比較實際。

以上是幻想的完美原型工具,或許不需要一個原型工具同時具備,配幾個小工具或外掛也可以,目的都只是希望利用更擬真又快速的方式、在開發之前減少各方想像中的誤差,有相近的工具也歡迎補充。

最後最後,推一個Airbnb的偉大作品Lottie,有AE外掛 Bodymovin — 可以將AE動畫匯出json給工程師,另外還有LottieFiles可以尋找到許多高品質、而且符合Lottie格式的網站,很適合用來製作微互動的小動畫,期待將來能開發出專門用於介面動畫的軟體(再次認為AE實在太沈重),相關介紹可以拜讀:

Lottie初學者教學指南 — https://www.appcoda.com.tw/lottie-beginner-guide/

如何使用Lottie 將完美動畫100%呈現在產品上 — https://medium.com/as-a-product-designer/%E5%BF%83%E5%BE%97%E5%88%86%E4%BA%AB-%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8lottie-%E5%B0%87%E5%AE%8C%E7%BE%8E%E5%8B%95%E7%95%AB100-%E5%91%88%E7%8F%BE%E5%9C%A8%E7%94%A2%E5%93%81%E4%B8%8A-7ac7107abfa5

個人粗淺的想法及分享,歡迎補充指教,謝謝大家~

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.