• 沒有找到結果。

本研究由專家訪談中得知,行動App設計師在進行高創新性發想時,常以手繪為主要 工具,快速將概念繪製於紙面或白板,並藉由不斷繪製、修正的過程將設計概念逐步具體呈 現。但以手繪完成概念的速寫後,不可避免的仍然需要進入數位工具完成數位原型的建置,

因此本節將探討保留手繪的優點,且將其操作方式移植至數位工具的相關研究。

SILK

圖23 Landay指出SILK可支援介面設計的所有階段。

(Landay & Myers, 1995)

Landay在SILK(Landay & Myers, 1995)的研究中亦表示使用者介面設計師在構思 初期常以手繪繪製介面雛形,手繪速度極佳,但所產生的靜態畫面有不易進行調整、重複使 用以及進行使用者測試的問題。為了延續設計師在紙面原型上手繪圖形,並且保持修改的彈 性,Landay提出以Mac(Macintosh)平台為主的視窗應用程式原型設計工具「SILK」;設 計師可藉由繪圖筆繪製線稿圖形的方式產生對應的元件,而SILK也會以圖形之間的空間及 組合判斷最有可能的元件類型,如:波浪線段為文字,若在該線段左側新增一圓型,則兩者 將被視為一Radio Button。倘若該線段被一圓形圈起,則兩者將被SILK視為一個Button(圖 24)。

從研究結果得知設計師對於SILK核心概念——以手繪線稿產生元件的操作行為——

抱持正面評價。其中,以Storyboard進行頁面的連結,成功將紙面原型繪製時的習慣延續至 數位工具之中。但SILK仍然有許多可改進以及發展的部分,例如:SILK會根據線稿之間的 關聯性而改變元生成的元件類型,SILK中多數的圖形由基本的波浪線段搭配圓形、矩形組 成,因此若設計師繪製Checkbox後再於其右側繪製Textfield,線稿中會有部分的元素重複 使用,該狀況將會影響判讀。再者,當時的演算法僅支援一筆劃的辨識且對應之元件較少,

故以線稿式設計原型之概念於今日仍有許多不同面向可供後人深入探討。

圖24 SILK可辨識的線稿以及對應元件(Landay & Myers, 1995)

圖25 以SILK繪製的應用程式介面。

(Landay & Myers, 1995) 圖26 將圖25經由SILK Transformation Process所產 生的應用程式介面。

(Landay & Myers, 1995)

UISKEI

同樣地,UISKEI(Segura, Barbosa, & Simões, 2012a)認為根據使用者回饋來不斷 精練設計,是建立流暢的使用介面相當重要的方法:在原型設計的初期,以畫筆繪製的方式 有助於快速探索各種不同的可能,並使設計師專注於建立架構而繪製精細的元件。因此 UISKEI將迭代的過程分為三階段,分別為:1)介面建置、2)行為定義、3)原型評估。

圖27 UISKEI可根據長寬比的不同來產生對應元件,並可於繪製好的Button上以類似的操作模式作為線稿圖樣,

進行第二次的繪製以產生該元件。(Segura, Barbosa, & Simões, 2012a)

因此以使用觸控筆進行操作的UISKEI不僅可透過線稿繪製快速產生八種元件以及六 種主要圖形,並且藉由所繪製之線/持稿大小不同產出不同的元件,如:小矩形是

Checkbox,大矩形則是Panel。此外更可以第二階段的線稿圖樣編輯,來達到切換元件類型 的效果,以及透過邏輯判斷的陳述式自定義操作元件的行為( Event 、Condition 、 Action,,ECA )。由於UISKEI著重於快速生成元件以及建立行為邏輯,且強調在設計初期 並不需要進行細部的形式設定,因此僅能使用系統預設之元件,對於設計後期需要進行樣式 調整時的支援稍顯不足,故僅能支持高擬真原型的階段,但受測設計師們仍然對UISKEI結 合筆與線稿的應用抱持正面評價。

小結 關的子元件,二次繪製的操作方式確實能夠改善圖形誤判的狀況。UISKEI中繪製Button後 可於其上進行第二次繪製,二次繪製所產生的元件,如:DropDown、SpinBox以及TextBox

(圖23)皆與Button有形象或名稱上的相似之處,以便於設計師聯想,故此本研究將前者稱

模式(Pattern)最初的概念源自於建築師Alexander, C.(Alexander, 1978),其對 於Pattern的定義為:在一特定情境之下,對於一個問題的解決方法。此概念於1990年代由 Erich Gamma引入至計算機科學中。軟體工程中的設計模式(Design Pattern)意指:針對 軟體設計中普遍存在或反覆出現的問題所提出的解決方案。此概念也逐漸由初始的程式設計 開始擴散至介面設計、互動設計等領域,而形成各種互動設計模式(Interaction Design Pattern)。

相關文件