影像聯結式原型設計工具

Adobe 所推出的 Adobe Illustrator、Adobe Photoshop 是在各個領域皆普遍 使用的設計工具。平面設計專用的Adobe Illustrator 對於建立標誌、圖示、印刷 稿常用的向量圖形有極佳的支援度，有許多設計師以其作為介面設計之工具。

Adobe Photoshop 為影像處理軟體，主要以像素來構成影像，進行影像的編修 如：調整色階及對比、合成影像、套用各種效果濾鏡等等。由於Adobe

Illustrator、Adobe Photoshop 在 Adobe 系列中歷史悠久且繪圖及影像處理功能強 大，但對近年逐漸產生的介面設計需求關注較少，因此雖然近期有許多設計師 開始轉移到其他工具上進行介面設計，但許多圖型設計、影像編修的工作仍然 需在以上工具進行，因此在介面設計的過程中，也是不可或缺的。

隨著行動裝置的普及，Adobe 於 2015 年推出了線稿式工具 Adobe Comp CC。在 iPad 上利用手繪的線條來產生清晰的圖形後，藉由 Adobe Creative Cloud 上傳至桌上型電腦的 Adobe Photoshop、Illustrator 以進行後續細節設計，

與Adobe Photoshop、Illustrator 相同，利用圖層堆疊以及群組化來建立物件，本 身並無「建立頁面與頁面之間的連結」及測試的概念，因此僅能視為視覺設計 工具，但由於本身具備產出影像之功能，故仍可作為介面設計工具。Inspr（圖 22）為同樣可在行動裝置上設計介面的視覺設計工具，讓設計師可直接在 iPhone 或 iPad 以拖曳元件來產生高擬真的行動裝置 app 圖像。由於直接在目標 裝置上進行設計，因此可即時呈現、快速修正設計，但正式的工作仍須交給其 他專業軟體進行向量繪圖以及圖片輸出。

圖 17 Inspr 的操作介面

（圖片來源：：https://goo.gl/in0YHt）

近期許多介面設計師選擇以Sketch 作為介面設計的主要工具。Sketch 與 Adobe Illustrator 相似，兩者皆以向量繪圖為主，但 Sketch 捨棄了 Adobe Illustrator 中為滿足印刷輸出需求的功能，轉為以介面設計師作為主要的目標族 群，並且提出了許多便捷行動介面設計的功能，如：

l 擁有眾多使設計更有效率的外掛功能。如：自動產生假文、假圖或假使 用者名稱等等。

除了以上的付費軟體，亦有許多如Google 文件及其提供的 Wireframe 樣板 等免費的網路設計工具。設計師可至Google 文件範本庫中將 Wireframe

Templates 建立副本於自己的 Google 帳號之中，但其提供的元件樣式相當有 限。

取得介面圖檔後，設計師即可將圖檔匯入影像聯結式工具中，開始建立頁 面之間的連結以及測試。

POP

POP 是一款可將紙面原型轉化為數位原型的行動 app。設計師藉由輸入圖 片或拍攝紙面原型並設定圖片上的點擊觸發區域、前往頁面以及轉場動畫，進 而形成可直接於行動裝置上進行實機模擬，當點擊錯誤時也會通知受測者該頁 面可點擊及的區域，使受測者即使沒有旁人指引也可進行測試。

圖 18 POP 的使用示意

（資料來原：https://goo.gl/X0MeR ）

Concept.ly, inVision

Concept.ly 以及 inVision 則是使用網頁在線上匯入圖片、設定觸發區域、目 標頁面以及轉場動畫的線上服務，內容須由其他工具繪製，本身無法進行版面 設計。完成原型後可邀請團隊成員以網頁或者行動裝置進行測試以及線上給予 回饋、進行討論。經過設計、測試、討論後將會進入修改設計的階段，設計師 可利用Dropbox 同步電腦、手機中的特定檔案或者照片，Concept.ly、inVision 便可直接讀取Dropbox 中指定之檔案，故此避免設計師在迭代過程中頻繁反覆 匯入之問題，而原型迭代的過程中Concept.ly 也會協助記錄迭代的版本。

圖 19 inVision 的評論模式 團隊成員或使用者可點擊畫面任一點留下評

圖 20 Concept.ly 的編輯界面

Flinto

多數的原型工具提供的轉場動畫為作業系統提供的Push、Pull 等等，而 Flinto 除了具備影像聯結式工具的匯入圖片、設定連結、轉場動畫等基本要 素，其最重要之特點在於利用狀態轉換來達成設計轉場動畫（Screen

Transitions）：設計師只需完成起始畫面（Start）以及結束畫面（End）物件的位 置，當進行轉場時系統會將起始畫面之物件移動至結束畫面之位置，藉此達成 動畫效果，而動畫的加減速則可利用「Timing」進行調整，故不需設定時間軸 或撰寫程式也能製作出與系統預設不同的效果。

圖 21 Flinto 操作介面

（資料來源：https://goo.gl/Ja8K91）

Adobe Experience Design

為了能夠對介面設計有較佳的支援性，Adobe 於 2016 年推出 Adobe Experience Design（Adobe XD），並且整合 Adobe 設計主力工具 Adobe

Illustrator、Adobe Photoshop 甚至是 Sketch，進行可互動原型的製作。因此即使

計工具。以往的Adobe 工具較少觸及行動裝置開發，Adobe XD 推出後可謂之 最後一塊拼圖，完整了以Adobe 系列軟體進行行動裝置設計的旅程。Adobe XD 與其他原型設計工具最大的差異是以重複網格（Repeat Grid）解決在製作 app 時出現比例相當高的列表資訊：設計師可以選取任意元件並且開啟Repeat Grid 後即可以拖曳控制棒的方式來以水平或垂直方向新增相同的元件（圖21）。

圖 22 Adobe XD 中的 Repeat Grid

（圖片來源：https://goo.gl/8WP1JZ）

小結

上述的案例探討可依其適用之階段進行分類（圖23），可發現影像聯結式 工具可迅速產生互動原型，但仍須由其他設計工具產生的圖像作為基礎，因此 整體時間未必較元件產生式工具快速。

圖 23 行動app 原型開發各階段支援工具

在行動app 的設計過程中皆有其階段重點以及適合的工具，Cerejo（Cerejo, 2010）認為工具的選擇重點有以下三點：1）是否容易學習以及使用、2）是否 具備可重複使用的樣板、元件、3）是否容易分享以及協同工作。多數數位設計 工具皆可滿足後兩項，因此數位工具的易學性、易用性則變成首要考量。然 而，根據上述案例探討可發現，為滿足階段的重點須使用不同的工具，在階段 轉換時設計師需要進行工具轉換，同時間也將造成介面重新建置的問題。因此 如何使設計師完成各階段的設計重點，並且順利銜接階段為本創作之目標。