Designing Web Interfaces 網頁介面設計模式

自從AJAX技術盛行之後，使用者介面(User Interface, UI)設計越顯得重要，期望能夠提高使用者經驗(User Experience, UX)。

現在，網頁設計師可以參考「網頁介面設計模式」這本書，作者整理網頁介面的精隨成為設計原則(design principles)，也就是「設計模式(design patterns)」，相信不管你是不是設計師，藉由參考設計模式也可以做出相當品質的使用者介面。

Bill Scott & Theresa Neil著，古又羽譯，網頁介面設計模式，台北：碁峯資訊，2011。譯自：Designing Web Interfaces: Principles and Patterns for Rich Interactions, O'Reilly Media。

官方網站(英文)：http://designingwebinterfaces.com/

這本書的架構以6個設計原則為主體，共14章，包含75種介面設計模式：

• 原則1, 操作直接性(Make it Direct)
• 第一章，頁內編輯(In-Page Editing)
• 單欄直接編輯(Single Field Inline Edit)
• 多欄直接編輯(Multi-Field Inline Edit)
• 覆蓋視窗編輯(Overlay Edit)
• 表格編輯(Table Edit)
• 群組編輯(Group Edit)
• 模組組態設定(Module Configuration)
• 第二章，拖放功能(Drag and Drop)
• 拖放模組(Drag and Drop Modules)
• 拖放清單(Drag and Drop List)
• 拖放物件(Drag and Drop Object)
• 拖放動作(Drag and Drop Action)
• 拖放集合(Drag and Drop Collection)
• 第三章，直接選取(Direct Selection)
• 雙態觸變選取(Toggle Selection)
• 集合選取(Collected Selection)
• 物件選取(Object Selection)
• 混合選取(Hybrid Selection)
• 原則2, 保持輕質(Keep it Lightweight)
• 第四章，情境工具(Contextual Tools)
• 永遠顯示工具(Always-Visible Tools)
• 滑過顯示工具(Hover-Reveal Tools)
• 雙態觸變顯示工具(Toggle-Reveal Tools)
• 多層級工具(Multi-Level Tools)
• 副選單(Secondary Menu)
• 原則3, 同頁作業(Stay on the Page)
• 第五章，覆蓋視窗(Overlays)
• 對話型覆蓋視窗(Dialog Overlay)
• 詳細型覆蓋視窗(Detail Overlay)
• 輸入型覆蓋視窗(Input Overlay)
• 第六章，嵌入面板(Inlays)
• 對話型嵌入面板(Dialog Inlay)
• 清單型嵌入面板 (List Inlay)
• 詳細型嵌入面板(Detail Inlay)
• 欄標(Tabs)
• 第七章，虛擬頁面(Virtual Pages)
• 虛擬捲動(Virtual Scrolling)
• 直接分頁(Inline Paging)
• 捲動分頁(Scrolled Paging)
• 虛擬平移(Virtual Panning)
• 可縮放使用者介面(Zoomable User Interface)
• 第八章，程序流程(Process Flows)
• 互動式單頁程序(Interactive Single-Page Process)
• 直接輔助程序( Inline Assistant Process)
• 對話型覆蓋視窗程序(Dialog Overlay Process)
• 組態設定器程序(Configurator Process)
• 靜態單頁程序(Static Single-Page Process)
• 原則4, 送出邀約(Provide an Invitation)
• 第九章，靜態邀約(Static Invitations)
• 採取行動邀約(Call to Action Invitation)
• 遊覽邀約(Tour Invitation)
• 第十章，動態邀約(Dynamic Invitations)
• 滑過邀約(Hover Invitation)
• 可視線索邀約(Affordance Invitation)
• 拖放邀約(Drag and Drop Invitation)
• 推理邀約(Inference Invitation)
• 更多內容邀約(More Content Invitation)
• 原則5, 善用轉換效果(Use Transitions)
• 第十一章，轉換模式(Transitional Patterns)
• 打亮與轉暗(Brighten/Dim)
• 展開與摺疊(Expand/Collapse)
• 自我復原淡出(Self-Healing Fade)
• 動畫(Animation)
• 聚光燈效果(Spotlight)
• 第十二章，轉換效果的目的(Purpose of Transitions)
• 滑進與滑出(Slide In/Slide Out)
• 面板(Faceplate)
• 翻轉(Flip)
• 手風琴式展開(Accordion)
• 旋轉木馬跑馬燈(Carousel)
• 淡入(Fade)
• 放大(Zoom)
• 知覺效能(Perceived Performance)
• 原則6, 即時反應(React Immediately)
• 第十三章，查詢模式(Lookup Patterns)
• 自動完成(Auto Complete)
• 即時建議(Live Suggest)
• 即時搜尋(Live Search)
• 精煉搜尋(Refining Search)
• 第十四章，回饋模式(Feedback Patterns)
• 即時預覽(Live Preview)
• 漸進式揭示(Progressive Disclosure)
• 進度指示器(Progress Indicator)
• 定期重新整理(Periodic Refresh)

作者在每個設計模式中，除了說明功能和特色之外，還有「問題探討」與「重要常規」兩個部分，「問題探討」講述這個設計模式可能淺在的議題，而「重要常規」則是使用上建議必須遵守的規則。這些內容都只有在書籍中才有敘述，官方網站上沒有細部說明，因此建議購買或借閱來看，這些寶貴的經驗絕對值得。

推薦序提到一個建築觀念，以設計原則為主並以設計考量(design considerations)為輔去建構出建築物，我想這個概念同樣適用於網頁設計上，只要我們掌握住上述這些設計模式，設計時考量各種限制與衝突，則建立優異的使用者經驗將不會是一件困難的事情！

###