操作介面設計模式

每天，越來越多人依賴互動式的軟體—桌面應用、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 按鈕分群 將相關的動作按鈕群聚