簡評:每個人都在問:“哪個原型設計工具是最好的?!” 這是個錯誤的問題。正確的問法應該是:“哪個原型設計工具對我現階段的目標是最好的?”
▎在開始設計原型時首先明確這四個問題:
原型設計是設計思維過程中的一個密切部分,它讓我們有機會去證明我們的瘋狂想法。當原型完成時,我們測試並驗證我們的設想。當有新信息出現時,我們還會調整我們的設計。
但是我們如何知道我們該使用哪種工具呢?原型應該設計到哪個地步呢?無論你到原型設計的哪一個步驟,這裏的四個問題你都應該注意:
你是在爲手機、平板還是桌面做設計呢?
你的原型需要什麼程度的保真度?
你需要多少時間完成設計?
你需要多少經驗去展示?
▎六種場景和每種場景下合適的原型設計工具
我將給你舉些例子來說明我的觀點,告訴你每個場景中哪個原型設計工具是最好的。我們將使用上面概述的問題爲每個場景創建上下文。
一、快速的在線原型界面設計
在項目立項之初,可能會涉及多方同事協同,包括設計、產品、運營,以及團隊的領導,這個時候通常會採用在線工具,方便迅速地給團隊提供原型預覽。
這一階段的原型設計工具,推薦摹客:同時具備 強大的高保真原型設計能力 和 團隊協作能力。不僅保證了快速產出和精細設計兩不誤,同時滿足產品經理、設計師的需要,在線工具的協作能力更是不容小覷:多人實時編輯,便捷的團隊評審,工程師查看頁面數據、複製代碼等強大功能非常適合團隊使用。
支持平臺:Windows&Mac
特色:
自帶交互效果的預設組件、海量圖標、便捷的編輯方式,快速產出設計。
支持頁面交互、狀態交互、組件交互,以及設置多種觸發方式和交互動作,輕鬆製作精細交互效果。
鋼筆工具、鉛筆工具、布爾運算、響應式佈局等特色功能,設計創作自由隨心。
支持多人同時在線編輯同一項目,共同完成原型設計。
設計稿中支持直接繪製流程圖,清晰呈現項目邏輯。
強大的協作功能:團隊評審、工程師查看頁面數據、複製代碼、撰寫在線文檔、任務管理... ...
適用情景:中高保真原型,快速原型, 團隊協作,WEB/移動端/平板原型,線框圖,視覺稿
二、低保真、快速移動應用程序
爲移動應用構建
低保真
快速搭建
需要將屏幕鏈接在一起,並顯示它們的流程
有很多好用的工具可適用於這個場景。用於此場景的最佳工具是可以在短時間內以低保真方式展示整個應用體驗流程的工具。這些工具有:
Invision
Marvel
Craft(by Invision,Plugin for Sketch)
Adobe XD
Flinto
Principle
Origami
UX Pin
Pixate
三、低保真桌面網站或 Web 移動應用
爲桌面瀏覽器(網站)構建
允許低保真
快速搭建
需要將屏幕鏈接在一起,並顯示它們的流程
針對桌面體驗方面的工具會比較有限,因爲許多原型設計工具往往更專注於移動端。這些工具有:
Invision
Marvel
Flinto
Principle
Adobe XD
Keynote
UX Pin
四、響應體驗
構建響應式網站(手機、平板、桌面)
需要較高的保真度
時間不是特別急,但也想要有高效率
需要將屏幕鏈接在一起,顯示它們的流程,並展示響應式網站是如何崩潰的
一條簡短的免責聲明:每當客戶要求我演示「響應性」時,我傾向於嘗試重新主導對話。
爲什麼我們必須設計響應?真正的目標是什麼?我們可以分別顯示每個模塊?如果沒有前後端的編碼,那麼設計高效率的響應設計是非常困難的。
以下是達成目標所需要的工具:
Raw HTML/CSS/JS(真正的響應式設計)
Axure(static breakpoints)
UXPin(static breakpoints)
五、特定功能
在移動應用上構建特定的動畫
需要特別高的保真度
需要高效率
需要顯示運動,動畫元素和時機——我並不關心頁面之間的跳轉
做一個動畫原型可以有很多的樂趣,而且我發現就算用戶沒有注意到動畫的發生,他們也會在這些細微差別中發現很大的不同。當你在細節上花心思去做,整體體驗會更加愉悅和流暢。
Principle(最快的設計方式)
Adobe After Effects
Raw HTML/CSS/JS
Flinto
Origami
Phonegap
Xcode
Framer
六、高保真體驗(手機或者桌面)
爲手機或桌面進行構建
必須儘可能高保真
我有足夠的時間進行這項任務
需要顯示屏幕的流程,同時還能高保真顯示屏幕元素和功能的動畫
有時候你的原型不僅需特別高的保真度,與此同時還需要顯示應用程序中的整個流程。這是一項非常耗時的任務,以至於有時候任務繁重時不禁想問,爲什麼我們不能構建一個真正的?
如果你需要構建一個包含有趣而獨特動畫的高保真原型,允許用戶在頁面之間導航,創造一個真正的體驗,那麼你可以使用這些工具:
移動設備:
Principle
Flinto
Origami
PhoneGap
Framer
Xcode
桌面:
Raw HTML/CSS/JS
Principle
Flinto
Framer
Xcode
▎不要只使用一個原型設計工具
市面上有這麼多原型設計工具,然而本文並不是要詳盡地列出所有工具。相反,我們只關注幾個最流行的工具。
關鍵是,你應該專注於你的設計而不是工具。你需要溝通什麼、展示什麼、測試什麼?你需要建立怎樣的模塊?需要什麼程度的保真?
當你專注於原型所需要的目標時,你就知道你要採用何種工具了。
最後,每個人都應該有廣泛的原型工具使用經驗。當你需要它時,你馬上就可以上手。