1

操作介面設計模式第八章操作介面設計模式第八章

編輯器設計基礎編輯器設計基礎• WYSIWYG• 直接處理某個物件• 操作法• 選取某個物件

2

慣例一 慣例一 :: 就地編輯就地編輯• 目標– 為了讓 user 很快找到編輯器在哪– 為了降低 user 的介面感知複雜度

• 範例– 如右圖

• 使用技巧– 若就地編輯不敷使用，可利用

• 屬性表• 對話框• 工作列

– User 如何知道可以編輯• Mouse over 出現的提示• 提示 icon ( 如右圖 ) 3

觸控界面的就地編輯觸控界面的就地編輯• 差異處– 觸控沒有所謂的 mouse over– 手指太胖，不容易瞄準

• 觸控的就地編輯– 點擊後出現 popup menu (keynotes)– 雙擊可進入編輯 (numbers)

4

慣例二 慣例二 : : 聰明選取聰明選取• 目標– 效率提升，自動幫你選擇相關的物件

• 範例– Photoshop 的魔杖– 用滑鼠拉出個區域，區域內物件全選

• 使用技巧– 不要一會讓人覺得討厭、一會又覺得有幫助• Word 双點擊某單字，會自動把空格納入選擇

5

觸控界面的聰明選擇觸控界面的聰明選擇• 差異處– 無法用滑鼠拖曳選取多個物件– 沒有 shit 或 ctrl 可以使用

• 觸控的聰明選擇– 雙擊選取某個單字 ( 與滑鼠相同 )– Numbers 裡面可以拖曳邊界來選取多個儲存

格

6

慣例三 慣例三 : : 複合選取複合選取• 目標– 效率提升，不用解除 group 就可進行子物件的

選取• 範例– Powerpoint 群組多個物件後，還是可以點選

子物件改變大小• 使用技巧– 如何選擇複合物件和子物件– 如何標示現在選到的是複合物件還是子物件

7

觸控界面的複合選擇觸控界面的複合選擇• 差異處– 還沒看過什麼複合選擇的 case ，甚至也沒看

過 group 的功能

8

慣例四 慣例四 : one-off mode: one-off mode

• 目標– 建立一個物件

• 範例– Powerpoint 建立矩形

• 使用技巧– 可配合 spring loaded mode 來一次建立多個

新物件

9

觸控界面的觸控界面的 one offone off

• 無差異處

10

慣例五 慣例五 : spring-loaded mode: spring-loaded mode

• 目標– 利用快速鍵增加效率

• 範例– photoshop

11

觸控界面的觸控界面的 sprng loadedsprng loaded

• 用手勢作快速鍵– 畫勾– 畫圈

12

慣例六 慣例六 : : 限制調整大小限制調整大小• 目標– 讓拖拉物件改變大小時，可以維持長寬比例

• 範例– Lllustrator 按住 shift 拖拉會進入維持長寬比

例的狀態

13

觸控界面的限制調整大小觸控界面的限制調整大小• 無差異，有些內建圖庫就只能保持長寬放

大

14

慣例七 慣例七 : : 磁性吸附磁性吸附• 目標– 方便排列整齊，節省滑鼠精密操作的功夫

• 範例– Powerpoint 當你在兩個物件中拉箭頭，箭頭

會被自動吸到另一個物件邊線的中心點

15

觸控界面的磁性吸附觸控界面的磁性吸附• 無差異

16

慣例八 慣例八 : : 指引指引• 目標– 在使用者動作的時候，即時提供使用者參考資

訊，讓動作可以更精準• 範例– 拖拉物件的時候會出現參考線，方便對齊– 拖拉物件的時候會出現座標值與大小

17

觸控界面的指引觸控界面的指引• 無差異

18

慣例九 慣例九 : paste variations: paste variations

• 目標– 特殊化的黏貼功能，讓 user 更快速的 paste

物件• 範例– Excel 可以只貼值，也可以連公式一起 copy

paste

19

觸控界面的觸控界面的 pastepaste

• 無差異

20

觸控的編輯器特色觸控的編輯器特色• 無法點選精準• 用輔助工具列的方法來取代滑鼠右鍵功能– Ex: numbers 裡面的插入欄與列

• 沒有滑鼠拉一個區塊選擇多樣物件的功能• 繪圖便利

21