大學生的 UI 設計選修課(10)Prototype 類型與使用時機

上週六在GDG Taichung 演講,主題是:「為什麼要加新功能」,有不少內容和 Prototype 有關,就合併整理成一篇文分享在這裡囉。

為什麼要加新功能

「為了取悅我們的顧客。」

「我們知道顧客是誰?有哪些類型嗎?」

「我們知道顧客會如何使用自家產品?」

「我們知道顧客對自家產品的印象?」

「我們知道該如何取悅不同類型的顧客?」

「顧客會如何使用這項新功能?」

「新功能會帶給顧客什麼樣的體驗?」

這一連串的問題轟炸完就會被罵「你這人怎麼這麼難相處」。好孩子不要拿去問 PM。(喂)

為什麼需要 Prototype ?

一個問題可能會有很多種解決方法,如果有好幾個很棒的點子,用什麼方式驗證點子是可行的?哪個點子最好?

薪水最高的那個人說了算。

不是吧!?

Prototype 測試能幫助團隊產出以現實為基礎的設計,而不是根據(薪水最高的那個人)的假設和意見。而且能建立一套能在公司內部執行的系統化開發流程,強化跨領域合作、增加利害關系人參與度。

Prototype 擬真度

很久以前受邀寫過一篇文Prototype 大觀園:Prototype 優劣分析步步來 ,對於低擬真、高擬真的 Prototype 有簡單的介紹。擬真可以想成是「接不接近最後產品上線的樣貌」,當然越擬真的越需要花費更多成本與時間。

低擬真的 Prototype 雖然比較粗糙,離最終產品樣貌甚遠,但可以激發更多「開放性的討論」,不會糾結在視覺設計上。

高擬真的 Prototype 要花費人力時間製作,卻可以引導眾人討論概念細節。

低擬真和高擬真的 Prototype 的用途不同,各有優缺點,配合測試「目的」製作。

製作 Prototype 的目的

依照目的不同,原型測試又可分成 3 種:探索型原型測試、評估型原型測試、溝通展示原型測試

探索型原型測試

想點子的時候應該大量發想再來收斂,探索型原型測試會建立數種不同原型,快速比較不同選項或觀點。

因為這類 Prototype 是做來丟掉用的,主要用來建立新選項、思考新的解法,所以不需要太精緻費時,適合低擬真 Prototype。

評估型原型測試

大量發想點子後要進行收斂,評估型原型測試能幫助減少選項。評估型原型測試能了解人們如何體驗我們原型的未來樣貌,有待測試的問題/假設,為了測試的精準度,需要高擬真的原型,而且受測環境也要盡可能模擬產品真正被使用的情境。

溝通展示原型測試

這種原型是說故事簡報的道具,向特定人士溝通(說服)專案用的,往往會拿以前的測試原型修飾到完善為止。

最棒的原型

以最簡單、最有效率的方式,讓設計想法的可能性和限制變得可見、可測量。

當然可以花很多時間精力把 Prototype 外觀刻得很漂亮精緻,但如果這個 Prototype 不是建立在研究或測試目的上,這些行為非常可能只是在燒錢

設計師常常有這種完美主義心態,但在原型測試裡有個很重要的概念:不是選一個超完美的點子,然後馬上投入大量資源開工,而是找到幾個有趣、符合專案目標、差不多夠好的點子進行實驗。

Prototype 工具

我也很常被問這個問題,請我推薦 Prototype 工具…「按照目的和需求用不同的工具」,然後就被抱怨「為什麼世面上沒有一個工具可以全包的?」

今天有一顆藥可以治感冒、治愛滋病、治香港腳、治禿頭,你敢吃嗎?那為什麼想要一種治百病的萬用工具?


https://blog.prototypr.io/14-prototyping-tools-how-each-can-be-used-1c804fab33a6

這張圖流傳很久很廣,可以看到適合製作不同擬真度的各種 Prototype 工具。

Keynote

以「非本科」的初學者來說,我最推的是 Keynote,笑。

上手非常快,不用花太多時間精力學習軟體操作,設定好連結就可以有模有樣的展示。

Invision

如果是新手設計師要做 Prototype ,我會推薦 invision。業界使用廣泛、教學資源豐富、第一個專案免費。對新手上路很友好,MAC 和 Win 系統通用。

https://www.invisionapp.com/

HTML/CSS

製做較高擬真度的 Prototype 時適用。雖然 UI 設計師不需要會寫 HTML/CSS ,但想成為資深設計師還是去學一下對於開發會非常有幫助。

還不會寫的我會推薦 Tumult Hype 4.0,可以讓設計師用「所見即所得」的方式快速兜出 HTML5 的畫面,可以做動畫、掛 GA、串伺服器等等,但程式碼乾不乾淨就不能太要求了。

https://tumult.com/hype/

其它更多工具

如果想知道更多工具的評價,有位設計師做了影片可以參考。

再次強調,沒有一項工具可以包山包海,真的包山包海了軟體會非常肥大難用!請根據目的、需求、資源挑選適合自己的工具。

系列文章:大學生的 UI 選修課

之前我在實踐大學開了一門 UI 設計課,簡單大略地從 UX 研究開始介紹、怎麼察覺使用者的痛點、到 UI Flow、Wireframe、Prototype。在 Blog 寫點除了課堂教學外的延伸思考。

Akane Lee

Akane Lee

如果設計師能和工程師順利合作,那麼老公也就能準時下班了吧!因此努力分享 UI 和 UX 方面的知識、技術、各種踩過的坑與心得。

Comments

wave
comments powered by Disqus

Press ESC to close