第 5 章
原型設計

If a picture is worth 1000 words, a prototype is worth 1000 meetings.

- @IDEO

你應該聽過許多次某人說：「我有個 App 好點子 ！」

或許你目前就有一個點子，那麼下一步驟呢？

你現在對 iOS 程式開發與 SwiftUI 已經有了基本的觀念了，那麼你應該開啟 Xcode 並開始寫 App 了嗎？

如同我常說的，寫程式只是 App 開發過程的一部分而已。在你開始寫 App 之前，你必須要有其他的準備程序，這不是一本關於軟體工程的書籍，因此我不準備介紹有關軟體開發生命週期的每一個階段，我想要將重點放在「原型」（Prototype ），這是行動開發程序中不可或缺的一部分。

每次我和初學者提到原型，他們都會問兩個問題：

• 什麼是原型？
• 為什麼需要原型？

原型就是初期的產品模型，可以作為概念的測試或者想法的視覺呈現，許多產業都會用到原型設計。在建造一棟建築物之前，建築師需要先設計建築圖並且做建築模型；航空公司在打造一架飛機之前，會建立一個飛機原型，以測試是否有設計上的缺陷；軟體公司也會在實際開發應用程式之前，建立軟體原型來檢視設計上的概念。在 App 開發上，一個原型可以是 App 早期的樣本，雖然不具備完整功能，但是包含基本的UI 或是草圖。

原型設計是開發原型的一個程序，提供許多的好處。首先，它可以協助將你的想法具體化，可以更輕鬆和你的團隊成員及使用者溝通，雖然你現在是正在學習自己開發 App， 但是真實世界的開發環境會有所不同。

你可能需要和團隊中的程式設計師與 UI / UX 設計師合作，來為客戶打造 App。即使你是一位獨立開發者，你所開發的 App 的目標可能會是特定的使用族群或是要面對一個利基市場；或者你聘雇一位設計師來為你設計 UI，你必須要找到一些方式來和你的設計師溝通；或者和你的潛在使用者一起測試你的想法。當然，你可以使用文字來做概念的表達，告訴你的使用者關於這個 App 的開發理念，不過這樣的方式缺乏效率，使用具完整功能的樣本 App 展示你的 App 點子是最佳的方式。

透過建立原型，你可以在專案初期讓每一個人（開發者、設計師與使用者）參與，所有參與者將會更了解 App 的運作方式，並在開發階段查明缺失，以及最終建立產品的可行方式。

原型設計也能讓你測試想法，而不需要建立一個真正的 App。你可展示原型給你的潛在使用者，以在 App 建立前取得前期的回饋，這可以幫你省下不少的時間與費用，圖 5.1 列出了原型設計的好處。

在紙上繪出你的 App 點子

現在你有個 App 點子，該如何為你的 App 建立原型呢？

有許多種形式可呈現原型，例如：紙上作業或數位顯示。我通常是採取手繪方式來表達概念，我也強烈建議你使用紙張來描繪出你的 App 設計，這是建立 App 原型的最簡單方式。對我而言，紙張依然是快速將腦中想法迅速記錄下來的最佳方式。當然，或許你會認為用 iPad 對你比較適合，只要使用任何對你而言最好用的方式即可。

Tips: 你可以在 http://sneakpeekit.com  找到一些可列印的表格模板。

舉例而言，我有個建立美食 App 的想法，這個App 可以儲存我最喜愛的餐廳，雖然 Yelp 這個 App 很好用，但是我想建立屬於自己的個人餐廳指南，這個 App 有幾項特色：

• 在主畫面列出最喜愛的餐廳。
• 建立餐廳紀錄，並且從相簿中匯入相片作為餐廳圖片。
• 儲存餐廳相片在裝置端，並將它分享給世界其他美食愛好者。
• 在地圖上顯示餐廳位置。
• 瀏覽其他美食愛好者所提供的美食餐廳分享。

我認為人們可能會喜歡這個點子，為了測試我的想法，我先在紙上畫出設計概念。可能有些人會認為自己不善於繪畫，但你不需要成為一位藝術家才能畫出 App 設計，我的繪圖技巧也不好，如圖 5.2 所示，重點在於將你的想法視覺化，並理解你的 App 的基本架構。

繪出 App 線框圖

你應該聽過「線框圖」（Wireframe ），我所示範的便是畫出 App 線框圖的一種方式。線框圖的重點不在於細節，而是能看出 App 的架構與組成，不需要加入顏色、圖形與視覺設計，你可以把線框圖想成是一個 App 的基礎，它可讓你更了解所想要建立的功能與 App 的導覽流程。

好的，如果你不想要用手繪畫，那麼有其他工具可以畫出你的行動 App 的線框圖嗎？

你只要使用框、圓以及線就可以畫出線框圖，因此你可以使用任何你喜愛的工具來建立線框圖。我個人偏好使用 Sketch，在稍後的章節中我將會做進一步的介紹，圖 5.3 展示了由軟體所製作的一個行動 App 的線框圖範例。

使你的草圖 / 線框圖可互動

你已經在紙上繪出 App 點子的草圖，甚至已經繪出線框圖，有什麼更佳的方式能夠示範它的運作方式，以使你的潛在使用者了解它的操作流程？有許多工具可以讓開發者建立互動式原型，在下一節中我會進一步介紹。此時，我要展示如何使用一個來自 Marvel 公司、名為「POP」的便利工具來建立原型 （https://marvelapp.com/pop/ ）。

POP 一開始是由台灣 Woomoo 新創公司所開發的，這個原型 App 非常聰明，曾經成為 Apple 上的推薦商品。之後 Woomoo 的團隊被 Priceline 所併購，而它的旗艦商品—原型 POP App，最後在一家英國新創公司 Marvel 找到它的新家。

POP App 可以將你的手繪作品或是線框圖轉成可以運作的原型，它可以利用相機拍攝你的草圖，或者你也可以從相片庫中匯入。這個 App 提供各種轉場方式來將不同畫面做連結，以使你可以和圖片做互動，待會你便會了解我所表達的意思。 .

首先，安裝 POP App 到你的 iPhone，並下載我們為本章所準備的線框圖圖片 （http://www.appcoda.com/resources/swift4/FoodPinWireframe.zip ），將檔案解壓縮，然後透過 AirDrop 將圖片匯入至你的 iPhone 中。

POP App 非常容易使用，首次啟動時，你會看到一個專案清單，點選「+」圖示來新增一個專案。為你的專案命名（例如：Food Pin ），當專案建立之後，點選「+」圖示並選擇「Phone」選項，來匯入你的線框圖圖片。你也可以使用內建相機功能來拍攝你的草圖， 圖 5.4 為 POP 專案範例。

從 App 的主畫面開始，定義 App 畫面轉場。POP 可以讓你標示圖片上特定的區域，並指定當點擊這些區域後所要切換的目標頁面，接著定義轉場的形式，如淡出（Fade ）、下一步（Next ）、返回（Back ）、上升（Rise ）以及取消（Dismiss ）。例如：在主畫面時， 當使用者點擊某一筆資料時，要從主畫面導覽到細節畫面。欲設定畫面的轉場，你可以點選「Add Link」按鈕來突出顯示這些資料，然後點選「Link to image」，選取目標圖片（即餐廳細節的圖片），如圖 5.5 所示。另外，你可以設定畫面轉場動畫。

當完成變更之後，回到專案的主畫面，點擊「Play」按鈕來與原型互動，這個 App 在任何一筆資料被點擊時，會轉場至細節畫面。

你只需要重複這些程序，定義剩下畫面的轉場流程。當原型設計完成後，你可以使用「Share」選項來分享給你的團隊成員以及潛在使用者，你的使用者可透過下列的網路連結來使用它： https://marvelapp.com/10c52gg6 。

常用的原型設計工具

這是如何視覺化你的 App 點子的方式，透過一個簡單的原型設計，可讓你儘早取得使用者的回饋。線框圖看起來不是那麼容易明暸，你可以進一步在線框圖上加入視覺元件， 將其轉換成一個很逼真的原型。在本節中，我將介紹一些受歡迎的 App 原型工具，可以協助你建立完整功能的原型，讓原型看起來幾乎和最終產品幾乎一模一樣。

Sketch

我是 Sketch（https://www.sketchapp.com）的愛好者，雖然我不是 App 的設計師， 但是這套工具可以讓我輕鬆將手繪的草圖／線框圖變成專業的 App 設計。Sketch App 內建 了iOS App 模板，可以讓你佈局 UI。更重要的是，你可以找到大量免費／付費的Sketch 線上資源（ http://www.sketchappsources.com），有助於提升你的 App 設計水準。Sketch 也搭配了 iPhone App，讓你可以輕鬆在實體裝置上預覽設計結果，如圖 5.6 所示。

最新版的 Sketch 有內建原型功能，你可以輕鬆連結多個畫面（或稱為「畫板」），以建立可互動的工作流程，並使用檢視模式來了解 App 的運作方式。如果你有Sketch App， 並且想了解這個原型的功能是如何運作，你可以參考這個網址： https://sketchapp.com/docs/prototyping 。

Note: 若你想要學習更多有關Sketch 的內容，我強烈建議你看一下Meng To 的《Design+Code》一書（ https://designcode.io）。

Figma

Sketch 已經主導行動裝置設計領域已經一段時間了，不過目前引人注意的是一個基於雲端應用的原型設計工具替代方案，稱為「Figma」 （https://www.figma.com）。與 Sketch 不同的是，Sketch 只適用於 Mac 電腦的 App，Figma 則是網頁型應用程式，可在任何瀏覽器使用，特點在於共同協作的功能，所有設計都可以儲存在雲端，讓你可以在任何地方輕鬆存取你的專案，也可以與多位設計師一起協作同一份文件，如圖 5.7 所示。

雖然 Sketch 沒有任何的免費方案，但是 Figma 提供免費的入門方案，可讓使用者可以建立三個原型設計專案，如果想建立更多的專案，則可以升級為高級使用者方案。

如果你之前使用過 Sketch，要切換為使用Figma 並不困難。Sketch 與 Figma 有各自的強項，但如果你需要和遠端團隊一起設計的話，Figma 絕對是首選。

Adobe Experience Design

在 2016 年3 月，Adobe 推出了一個和 Sketch 競爭的UI 設計產品，名為「Adobe XD」（ Experience Design 的簡稱），Adobe 公司宣稱這是一套將網頁與行動App 設計專案結合在一起的工具，在撰寫本書之際，這個 App 可以免費下載 （http://www.adobe.com/products/experience-design.html）。

若是你習慣使用 Photoshop，你會發現 Adobe XD 較容易使用許多，這套工具有兩種模式：「設計」（Design ）與「原型」（Prototype ）。在「設計」模式，你可以使用佈局工具來設計 App UI，當設計到了某種程度後，你可以將其切換至「原型」模式，以剛才設計的 App畫面建立出互動式原型。要連結不同的畫面非常容易，只要透過「點選」與「拖曳」的功能，就可以使用簡單動畫來製作出App 的原型，以展示 App 的整個運作流程，如圖 5.8 所示。

你可以下載專案檔，並參考我使用Adobe XD來建立本書所提供的App 原型範例 http://www.appcoda.com/resources/swift3/FoodPinEn.zip。

Invision

「Invision」 （https://www.invisionapp.com/ ） ）是市面上原型與協作工具的領導品牌之一，它可以讓你快速建立互動式模型，而不需要撰寫一行程式碼。Invision 支援 Sketch 檔，這表示你可以輕易將 Sketch 畫面匯出至Invision，並將它轉換成可互動的原型。「協作」也是 Invision 中我最喜愛的功能之一，例如：你和一個 UI 設計師一起建立原型， Invision 可以讓你分享回饋與加入評論至設計畫面中，「協作」功能對於你在一個設計團隊中或者與外面的 UI 設計師一起工作時特別有用，如圖 5.9 所示。

Flinto

「Flint」 （https://www.flinto.com） 是另一個容易使用的原型工具，可以讓你建立很真實的 App，這個 App 讓你直觀且易於使用、學習，你可以輕鬆串連畫面及建立動畫轉場，如圖 5.10 所示。

Keynote

Keynote ！你在開玩笑嗎？是的，你沒聽錯，Apple 的 Keynote 也可以用來快速建立原型。事實上，App 的工程師在 WWDC 中曾提到他們使用這個簡報軟體來製作 App 專案的原型。

若你曾使用它來製作簡報的話，Keynote 對你而言應該並不陌生，內建在 Keynote 的繪圖工具可以讓你設計簡單的 App UI。Keynotpia Keynotpia 提供原型的樣板，可以節省在 Keynote 中繪圖的工夫，圖 5.11 是使用 Keynote 建立的範例畫面。

不只是 App UI 的設計，有趣的是，Keynote 還可以輕鬆讓靜態模型具有動畫效果，神奇的移動轉場特效可以讓你的畫面模仿原生 App 動態轉場的感覺。我不再繼續說明如何以 Keynote 製作原型的細節，如果你想要學習更多如何使用 Keynote 設計原型的內容，則可參考這篇文章： （http://webdesign.tutsplus.com/tutorials/how-to-demo-an-ios-prototype-in-keynote--cms-22279），你也可以參考 Apple 的 60 秒原型設計影片： （https://developer.apple.com/videos/play/wwdc2017/818/）。

本章小結

「原型設計」在 App 開發過程中有著至關重要的作用，它使你能夠快速建立功能來向使用者展示。原型設計的目的是測試想法，並在早期階段收集回饋，如果你正在為客戶開發 App，那麼建立原型可讓客戶在最終產品發布之前，清楚了解 App 的設計及功能。

因此，無論你是一個獨立開發者還是開發團隊的成員，我十分鼓勵你從今天就開始進行原型設計。不要立即貿然建立 App，而是先在紙上概述你的想法，然後使用 POP 或其他原型軟體等工具建立簡單的樣本，這種方法將為你節省大量的時間及資源，以確保你不會投入於建立一個缺乏吸引力的產品。