第五章做事.ppt

第五章 做事 動作與命令 按鈕與選單 之前我們都在談論「名詞」。 本章將致力於「動詞」。 動詞的實作一般都使用按鈕和選單。 大多數的使用者都已經習慣和選單以及按鈕打交道，所以你有必要依循慣例。 使用者面前常見的方式有： 按鈕 按鈕與選單（續） 選單列 躍出式選單 下拉式選單 工具列 連結 動作面板 非視覺的動作 利用滑鼠或鍵盤，其動作有： 按鈕與選單（續） 雙擊 鍵盤動作 拖放 有型態的命令 擴展邊界 某些應用風格讓你可以自由地設計非標準的按鈕和控件。 動作應該是： 可點按的小圖示。 可點按的文字，且看起來不像按鈕。 當滑鼠游標滾過時，會有反應的東西。 看起來像是可以被操控的物件。 被放在螢幕上幾乎任何地方的東西。 特定的設計建議 盡量依循慣例。 使用假3DD明暗與下方陰影，讓東西看起來更「浮起」。 當滑鼠游標停留在項目上面，且該項目可以被點按或拖曳時，將滑鼠轉成不同的圖。如手指。 使用工具提示，或者描述性的文字，以告訴使用者，滑鼠游標所指到的物見識什麼。 模式─按鈕分群 按鈕分群 將相關的動作按鈕群聚在一起，以水平或垂直的方式對齊。 何時使用 將二到五個動作呈現出來，這些動作彼此有關連，可能是對同一個事物做動作，或類似的效果。 為何使用 按鈕分群可以提升介面自我描述的效果。 模式─按鈕分群（續） 原理作法 讓討論中的按鈕集結成一起，為他們標上簡短而清楚的動詞或動詞片語。 不要使用專業術語，除非你確定使用者一定懂這術語。 模式─動作面板 動作面板 不使用選單。 將一大群相關的動作呈現在一個UI面板上，此面板豐富的方式組織，且出現在畫面上。 何時使用 你需要呈現許多動作。 應該放進選單中，但沒有選單列。 可能動作組合太複雜，不適合用選單來呈現。 模式─動作面板（續） 為何使用 能見度與表現的自由度。 原理作法 在UI上放置動作面板 設計動作的結構 簡單的清單 多直欄清單 分類清單 表格或格子 樹 可閉式面板 用上面的方法進行組合 為動作加上標籤 模式─突出的完成按鈕 突出的完成按鈕 在視覺流得末端，放置一個按鈕，用來結束此交易。 何時使用 當你需要放置「完成」、「送出」、「確定」按鈕的時候，使用此模式。 為何使用 清楚的最後步驟，可以讓使用者有完成的感覺。 模式─突出的完成按鈕（續） 原理作法 建立一個按鈕，必須看起來像一個按鈕。 當按鈕標示標籤時，盡量用文字。 將按鈕放在使用者最希望看到的地方，追蹤頁面的工作流程，並將按鈕放在最後一個步驟的地方。 模式─聰明選單項目 聰明選單項目 動態地改變選單標籤，以精確地顯示當被調用時會做的事為何。 何時使用 你的UI具有選單項目，用來對特定的物件進行操作。 為何使用 選單項目所呈現的內容，可以用來解釋UI。 模式─聰明選單項目（續） 原理作法 使用者改變所選取的物件，就跟著改變選單項目，成為適合該物件的選單項目。 此模式也可以用在按鈕標籤上、連結、或者UI環境背景中任何「動作」概念的東西上。 模式─預覽 預覽 對於進行某項動作會發生的一切事情，顯示其預覽。 何時使用 當使用者準備做一件「成本很高」的動作，使用者想要先確定沒有任何錯誤之後，才進行這樣的動作。 模式─預覽（續） 為何使用 預覽可以預防錯誤。 原理作法 在使用者進行某動作之前，提供展示的資訊，讓使用者可已有更清楚的認知。 讓使用者能夠從預覽的畫面直接進行該動作，這樣對使用者比較方便。 要讓使用者有機會退出，且讓使用者可以更用交易內容。 模式─進度指示器 進度指示器 讓使用者知道，某件耗費時間的工作已經進行了多少。 何時使用 一件很花費時間的工作，可能會中斷UI，或者是在背景執行，其花費的時間在兩秒以上。 為何使用 當UI被凍結，以等待某件事情完成時，使用者是沒有耐心等待UI的。 模式─進度指示器（續） 原理作法 利用動畫指示器表達出進度。 用水平或垂直的指示器來告訴使用者： 目前在進行什麼 操作完成的百分比為何 剩下多少時間 如何停止 盡量讓時間估計值正確，但有時候出錯也沒有，只要估計值迅速修正即可。 模式─可取消性 可取消性 提供一個方法，可以立即取消一個很花費時間的操作，且沒有副作用。 何時使用 一個很花時間的操作會中斷UI，使用者會被禁止和系統的其他部分進行互動。 為何使用 使用者改變主意了，一旦很耗費時間的開始，使用者可能會想要中途停下來。 模式─可取消性（續） 原理作法 直接在介面上放置取消按鈕，放在靠近進度指示器的地方。 當使用者點按或按下「取消」按鈕的時候，要立刻取消操作。 模式─多層復原 多層復原 提供一個方法，可以輕易地復原使用者剛才進行的一連串動作。 何時使用 當你需要設計一個具有高度互動性的UI，且UI比簡單的導引或表單的填寫複雜許多的時候。 為何使用 軟體讓使用者可以在做出許多動作之後，復原