設計建議

為觀察設計師使用筆劃產生基礎元件以及複合元件的使用狀況，本創作以 網頁實作部分筆劃規則（概念請見https://youtu.be/tUtHtf0Oad8），並在台灣邀請 了七位相關工作經驗平均4.5 年的職業設計師使用。過程中先說明此概念版的 目的、內容及簡短教學後，進行45 個繪製任務，任務包含基礎元件、表格複合 元件以及彈出控制項複合元件三種。繪製任務結束後則填寫問卷及訪談。

圖 71 於台灣邀請設計師使用時的主要觀察筆劃

本創作亦參加了2017 年 6 月於英國愛丁堡舉行的 ACM Designing Interactive Systems Conference Demonstration。

圖 72 Xketch⁺參與DIS 2017

筆劃與元件連結性

觀察的結果顯示，線段與矩形皆易學易記。本創作提出的筆劃與元件規則 中，僅有幾少數的元件對應筆畫有一個以上，按鈕即為其一。再以線段與矩形 皆可產生按鈕的狀況下，多數設計師偏好矩形更勝於線段，除了以元件外觀連 結類似形狀筆劃的概念易懂易學外，由四點構成的矩形能夠在繪製時提供更多 可使用之資訊讓系統提前作業，可減少後續手動調整大小的時間。其中以圖層 式工具，如Adobe Illustrator, Sketch 為主的設計師，在所有的繪製任務中，對於 矩形的偏好程度較熟悉元件式工具，如Axure 的設計師來得高。本創作推測應 是矩形背景顏的視覺效果，以及圖層式工具以幾何圖形堆疊出元件外型的設計 方式，使設計師更偏好以矩形建構畫面。

而使用與真實元件外觀相差甚遠的線段為觸發圖形，「標記」在目標位置來 產生元件，則以使用元件式工具設計師接受度較高，推測其成因在於多數元件

圖 73 設計師於網頁版本的繪製情形

筆劃擴充

設計師使用Xketch⁺概念版進行繪製前的說明時間，會清楚告知僅有三種筆 劃可供使用。然而繪製過程中，設計師常直覺地使用其他熟悉的筆劃進行特定 的操作。

具備方向性的筆劃辨識

目前Xketch⁺中的線段以水平線為主，過程中有許多設計師欲繪製垂直線段 來產生元件。其概念是以垂直方向產生數個相同元件，如：選擇器的待選項目 是多行獨立文字垂直排列，因此設計師傾向直接繪製一條垂直線段以一次新 增。由此可見，在現有元件上添加的筆劃，筆畫方向與重複堆疊該元件的方向 有關。這不失為一大量複製清單格式的方法，也充分利用數位工具便於複製、

修改的特性，加速原型建置。

繪製簡易圖標

圖標所代表的意義經使用形成長期記憶後，可以大幅提升理解的速 度，如交通標誌即為一例。電腦介面經過數十年的發展，也出現許多具備共識 的圖標，在行動裝置介面空間有限的狀況下被頻繁的使用，像是播放、暫停、

電子郵件、警告圖標的驚嘆號，或者社群網站：Facebook、Google、Twitter 的 logo 等等。目前 Xketch⁺以表格呈現Font Awesome 所提供的六百個圖標供使

疊時的互動行為。

圖 74 塗銷紙面原型