每天，越來越多人依賴互動式的軟體—桌面應用、Web 應用、行動裝置、其他數位裝置。如果這些設計得好，人們就會用得很快樂、安全、更有生產力。好的介面設計可以提高使用者的忠誠度、降低支援的成本、讓產品在競爭力領先對手。

你想設計具有吸引力、容易使用的介面，但是你不知道該如何下手嗎？這本書可以幫助你。本書萃取各種設計上的智慧，包括了：前 Web 應用時代的設計、最佳互動網站、手機和 iPod 之類的行動裝置。有許多很好的構想可以供你使用，你不需要重新發明輪子。

這些想法在這裡以模式的姿態呈現出來–解決共同的設計問題，修改以符合你的需求。每個模式都包含務實的設計建言，你可以馬上採用，加上全彩印刷的各種範例可供參考。每一章都會解釋互動設計以及視覺設計的關鍵概念。主題包括了：

應用的資訊架構
導覽
頁面配置
地圖、圖、表
表單
圖形編輯器
顏色、印刷、觀感
對於軟體開發者、互動設計者、圖形設計者、以及任何建立使用者介面的人來說，《操作介面設計模式》是相當有價值的資源。你可以用這本書來尋找解決方案、學習特定技巧、取得一點創意上的協助。

《作者》Jenifer Tidwell 是 MathWorks（靠近麻州波士頓的一家技術運算軟體製造商）的介面設計師與軟體工程師，她從 1997 年就開始研究使用者介面模式，從 1991 年就開始設計並建立複雜的應用與 Web 介面。

《譯者》蔡學鏞是清華大學資訊工程碩士，曾任大學資訊系講師、軟體公司技術經理、IT 顧問、IT 專欄作家。

前言

01 使用者做什麼

達到某個目標的手段

使用者研究的基礎

使用者研究的基礎

模式

1 安全模式
2 即刻喜悅
3 足夠滿意
4 中途改變
5 延滯選擇
6 漸進建構
7 積習難改
8 空間記憶
9 預期記憶
10 流暢重複
11 只用鍵盤
12 他人建言

02 組織內容：

資訊架構與應用架構

資訊架構的基礎：

將東西分割開

實體結構

模式

13 雙面版選擇器
在一個介面上並排兩個面板。第一個面板上，顯示一群使用者可以自由選擇的項目；第二個面板上，顯示出第一個面板所選取項目的內容。
14 畫布加上工具盤
將圖示的工具盤放在黑色區域中，使用者按下工具盤的按鈕，就可以在畫布上建立物件。
15 單視窗深入
看看此應用的頁面，有著一個單一視窗，使用者透過一個選單，或透過一個物件的細節，進入更深處，新的內容會完全取代舊的內容。
16 可選擇的外觀
讓使用者選擇外觀，結構上和預定的外觀相當不同，而不只是表面上的不同。
17 精靈
帶領使用者，依據之前定義的次序，一步一步地完成一件工作。
18 有需要才出現
顯示出最重要的內容，將其他的隱藏。讓使用者可以透過一個單一、簡單的手勢而看到完整的內容。
19 好奇的旁支
將連結放在內容中想不到的地方，將它們標示得可以吸引好奇的使用者。
20 多層幫助
使用輕量級和重量級幫助的混合，來因應使用者各式各樣的需求。

03 到處走走：

導覽、路標、以及找路

不要迷路

導覽的成本

模式

21 清楚的進入點
介面上只有放幾個進入點，這些進入點是工作導向的，且描述清楚。
22 全域導覽
每一頁面都用一個小區域，顯示數個一致的連結或按鈕，這些連結或按鈕可以將使用者帶到應用或網站的關鍵區域。
23 軸與輻
將一個應用的數個區域，獨立成為較小的應用，每個小應用都有一個方法可以進去（從主頁），一個方法可以出來（到主頁）。
24 金字塔
透過「上一頁 / 下一頁」的連結，將一連串的頁面串接起來成為一個序列。再加上一個主頁面，可以連接到序列中的任何一個頁面。
25 情境面板
只顯示一個頁面，在使用者解決此立即的問題之前，不會有其它的導覽選項。
26 序列地圖
在序列的每一個頁面，依序顯示每頁的地圖，也顯示「你在這裡」的指示。
27 麵包屑
在階層中的每一頁，顯示其所有的父頁面，直到主頁為止。
28 註解式捲軸
讓捲軸具有雙重的任務，不但可以作為內容的地圖，也可以指示「你在這裡」。
29 色彩編碼的區域
使用顏色來識別某個頁面屬於網站或應用的那個區域。
30 動畫轉變
將一個讓人吃驚或位置移動的轉變，運用動畫讓人覺得自然。
31 逃生門
對於限制導覽選項的每一個頁面來說，必須放置一個按鈕或連結，好讓使用者脫身，回到已知的頁面。

04 組織頁面：

頁元素的配置

頁面配置的基礎

模式

32 視覺框架
設計每一個頁面，使用相同的基本配置、顏色、以及風格元素，但是讓設計具有足夠的彈性，可以處理變化的頁面內容。
33 中央舞台
將 UI 中，最重要的部分放在頁面中最大的次區域；將次要的工具和內容放在旁邊的小面板。
34 有標題區域
將內容不同的區域，標上視覺強烈的標題，然後將它們都排列在頁面上。
35 紙牌堆疊
將內容的區域分散在不同的面板（或「紙牌」）上，並將面板疊起來，一次只能看到一個面板；利用凸標或者其他裝置，讓使用者可以切換面板。
36 可閉式面板
將內容放進各自的面板，並讓使用者從其中一個來開啟與關閉它們中的另一個。
37 可移動面板
將不同的工具或內容的區域放在個別的面板上，並讓使用者移動它們，形成客製化的配置。
38 右 / 左對齊
當設計一個兩個直欄的表單或表格時，向右對齊左邊的標籤，向左對齊右邊的項目。
39 對角平衡
用不對稱的方式安排頁面元素，但是在左上角和右下角放置視覺重量，以達到視覺平衡。
40 屬性表
使用一個雙直欄或表單形式的配置，讓使用者可以在此配置中編輯物件的屬性。
41 回應式揭露
從一個非常小的 UI 開始，一步又一步地帶領使用者進行設定，每一步都會讓 UI 越來越大。
42 回應式生效
一開始的時候，UI 幾乎都是失效的（disabled），帶領一個使用者走過一系列的步驟，每一步驟都會讓更多 UI 被生效。
43 流動配置
當一個使用者變動視窗大小，GUI 必須隨著變動，讓內容能持續「充滿」頁面。

05 做事：

動作與命令

擴展邊界

模式

44 按鈕分群
將相關的動作按鈕群聚在一起，以水平或垂直的方式對齊。如果有超過三個或四個動作，就建立數個群。
45 動作面板
不使用選單，將一大群相關的動作呈現在一個 UI 面板上，此面板用豐富的方式組織，且總是出現在畫面上。
46 突出的完成按鈕
在視覺的流末端，放置一個按鈕，用來結束此交易；讓此按鈕明顯且具有清楚的標示。
47 聰明選單項目
動態地改變選單標籤，以精確地顯示當被調用時會做的事為何。
48 預覽
對於進行某項動作會發生的一切事情，顯示其預覽。
49 進度指示器
讓使用者知道，某件耗費時間的工作已經進行了多少。
50 可取消性
提供一個方法，可以立刻取消一個很花費時間的操作，且沒有副作用（side effect）
51 多層復原
提供一個方法，可以輕易地復原使用者剛才進行的一連串動作。
52 命令歷史
當使用者進行動作的時候，用視覺的紀錄方式，讓使用者可以回顧過去何時對何物做了何事。
53 巨集
巨集是單一個動作，由許多其他較小的動作所組成。使用者可以將許多動作放在一起，組合成為一個巨集。

06 顯示複合的資料：

樹、表、以及其他資訊圖形

資訊圖學的基礎

模式

54 概觀加上細節
將一個概觀圖放置在放大的「詳細圖」旁邊。當使用者在概觀圖上拉動視野時，在詳細圖上顯示這部分的細節。
55 資料提示
當滑鼠滾動經過圖上的一個興趣點時，將該點的資料值放在工具提示或某中浮動視窗中顯示出來。
56 動態查詢
提供方法進行立即且互動的資料過濾。採用易用的標準控件，例如滑桿（slider）和核取方塊（checkbox），以定義要顯示哪一部份的資料。當使用者調整這些控件，就會立即反映在資料顯示區域。
57 資料刷色
讓使用者在一個外觀中選擇資料，在另一個外觀中同時顯示相同的資料（但用不同的方法）。
58 區域縮放
在單一個稠密的頁面，顯示所有的資料，每個資料項目都很小。當滑鼠一到任何地方，扭曲這個頁面，讓這些項目變大且容易閱讀。
59 橫列條狀化
使用兩個類似的濃淡，交互改變表格橫列的背景顏色。
60 可排序表格
顯示資料內的表格，讓使用者可以利用某個直欄的值，對表格內的橫列進行排序。
61 跳到項目
當使用者輸入一個項目的名稱，直接跳到該項目，並選取之。
62 新項目橫列
使用表格中最後一個橫列，以就地建立一個新的項目。
63 瀑布式清單
每個階層都各自將可選取的清單顯示出來。對於任何項目的選取，在下一個清單中對應地顯示出該項目的子項目。
64 樹狀表格
在直欄中放置階層式資料，像是表格，但是在第一個直欄使用內縮式的大綱結構，展現出樹狀結構。
65 多 Y 圖
將多個圖堆疊起來，在一個面板裡往上堆；讓它們共用相同的 X 軸。
66 小而多
用兩到三個資料維度（dimension），建立許多資料的小圖。根據一到兩個額外的維度，將這些圖用貼磁磚的方式放置在頁面上，用單一條「連環漫畫」的次序，或者是用二維的矩陣
67 樹狀地圖
將多維度「且 / 或」有階層的資料，表達成為多種矩形尺寸的。你可以將這些矩形安排套疊狀（nested），以表達出階層，且為它們著上顏色或標上標籤，以顯示出額外的變數。

07 從使用者取得輸入

表單與控件

表單設計基礎

控件選擇

模式

68 寬容格式
允許使用者輸入多種格式和語法的文字，應用內部會想辦法解讀。
69 結構化格式
不要使用一個文字欄位，使用一組文字欄位，以反應所需要的資料結構。
70 在空白填入
在表單中安排一個或更多個欄位，以完成一個句子或片語。欄位的內容是空白，由使用者填入。
71 輸入暗示
除了一個空白的文字欄位之外，還放上一個句子，或者一個範例，以解釋需要什麼樣的資料。
72 輸入提示
在文字欄位或下拉式清單中，預先填入提示訊息，告訴使用者要做什麼或要鍵入什麼。
73 自動完成
當使用者在文字欄位中輸入資料時，UI 猜測可能的答案，並在適當的時機自動完成資料的填寫。
74 下拉式選擇器
利用下拉式或躍出式面板，展現更複雜的選值介面，以擴充選單的概念。
75 圖示選擇
使用圖片取代文字（或者用圖片附加到文字），以顯示出可用的選擇有哪些。
76 清單建構器
在同一個頁面顯示「來源」清單與「目的地」清單；讓使用者在這兩個清單之間移動項目。
77 良好的預定
在任何適當的地方，預先將欄位填上使用者最有可能會填上的值。
78 相同頁面的錯誤訊息
在表單本身的頁面上直接放置錯誤訊息；在頁面頂端加上錯誤訊息的標記，且如果可能的話，在導致錯誤的控件旁邊放置指示器。

08 建構器與編輯器：

編輯器設計的基礎

模式

79 就地編輯
使用小、動態、文字編輯器讓使用者可以「就地」改變文字：將編輯器直接放在原始文字上面，不使用獨立的面板或對話盒進行編輯。
80 聰明選取
讓軟體夠聰明，可以自動地選擇一個具有凝聚力的項目，不需要使用者自己動手。
81 複合選取
使用不同的手勢?—?或者滑鼠選取不同的螢幕區域，像是此複合物的邊界 vs 內部 — 以決定是否你應該選取複合物本身，或允許它所包含的物件一同被選取。
82 一次結束法
當一個操作法被開啟，就可以進行該操作一次，然後自動切換回預定操作法或者之前的操作法。
83 彈簧操作法
讓使用者按下一個按鍵（或滑鼠按鍵），就進入一個操作法。當使用者鬆開按鍵，就會離開此操作法，回到之前的操作法。
84 限制調整大小
支援不同行為的改變體積操作法，例如保留長寬比（aspect ratio），以在特殊的環境下使用。
85 磁性吸附
讓物件具有「磁性」，可以被吸附到正確對齊的位置。當使用者拖曳一個物件很靠近這些對齊位置時，就會被吸附過去。
86 指引
提供水平和垂直的參考線，以幫助使用者將物件對齊。
87 黏貼變異
除了標準的黏貼（貼上）功能之外，還多提供一個特殊化的黏貼功能。

09 修整外觀：

視覺風格與美學

相同內容，不同風格

視覺設計的基礎

這對於桌面應用的意義是什麼

模式

88 深色背景
將一張影像或漸層放在頁面的背景，背景視覺上退居於前景元素之後。
89 少樣色彩，多種值
介面中使用一個、兩個、或最多三個主要的色彩。從這些色彩中選擇各式各樣不同明暗度的值建立一個調色盤。
90 角落的處置
不使用正常的直角，改用對角、曲線、或花樣，來做為介面盒狀的角落，讓這些角落在介面中能有一致的處置方式。
91 回應字型的邊框
當繪製邊框以及其他線的時候，使用和主要字型相同的顏色、厚度、以及曲線。
92 髮絲
使用一個像素寬的線做為邊框、水平尺規、以及紋理。
93 對比字型權重
使用兩種對比字型（一個薄而輕，另一個重而暗），區隔開不同層次的資訊，並加入視覺關注。
94 表皮
開放你的應用中的「外觀感覺」架構，讓使用者可以設計他們自己的圖形和風格。

參考資料

索引