Transcript 人性化介面設計
8 人性化介面設計 8.1 Copyright 2006 Prentice-Hall, Inc. 學習目標 詮釋設計表單（Form）與報告（Report） 的程序，以及它們所產生的成果. 應用編排表格、報表的一般指導原則 更有效率地編排文字、表格和表單. 解釋設計介面與交談的程序，以及它們 所產生的成果. 8.2 Copyright 2006 Prentice-Hall, Inc. 學習目標 描述介面設計的一般性原則: 8.3 畫面設計 架構資料輸入欄位 提供回饋 系統輔助 Copyright 2006 Prentice-Hall, Inc. 學習目標 設計人機之間的交談，其中包括交談畫 面的設計 詳述網際網路電子商務系統所特有的介 面設計原則 8.4 Copyright 2006 Prentice-Hall, Inc. 設計表單和報表 參照書籍p.8-2 系統輸入輸出是在分析階段的末期所製作出 來的 在此階段沒有介定精確的外觀 表單及報表及結構化需求時所發展的DFD和 E-R中圖有密切關係 8.5 Copyright 2006 Prentice-Hall, Inc. 設計表單和報表關鍵慨念 參照書籍p.8-2 表單（輸入資料的畫面） 包含一些事先既定義好的資料，有時還包括一些 用來填入資料的區域之事務文件 表單的實體通常是建立在一筆資料庫的紀錄上 報表（輸出資料的畫面或紙張） 8.6 一個只包含預先定義之資料的文件 一個唯讀文件用來閱讀或觀看 一個報表通常包含著許多資料紀錄或交易 Copyright 2006 Prentice-Hall, Inc. 表單與報表的設計程序 使用者為導向的活動 伴隨雛型法 需求決策 8.7 參照書籍p.8-3 誰使用表單和報表? 表單和報表的目的為何? 表單和報表何時需要被使用? 表單和報表在何處傳遞與使用? 有多少人需要使用或觀看表單和報表? Copyright 2006 Prentice-Hall, Inc. 表單與報表的設計程序 參照書籍p.8-4 雛型法 8.8 原型設計最初的要求 使用者要審查原型設計和接受其他設計或需 求的改變 如果需求進行更改，需要重覆 建立-評估-改 進的循環，直到設計被接受 Copyright 2006 Prentice-Hall, Inc. 演進與結果 參照書籍p.8-5 設計規格明細說明包含三個部分 1. 概要的敘述 概要的敘述提供了目標使用者、工作、環境因素. 2. 樣品的設計 3. 測試和適用性的評估 8.9 Copyright 2006 Prentice-Hall, Inc. 參照書籍p.8-6 Copyright 2006 Prentice-Hall, Inc. 有意義的標題 有意義的資訊 平衡的畫面編排 易於瀏覽 Copyright 2006 Prentice-Hall, Inc. 8.12 Copyright 2006 Prentice-Hall, Inc. 參照書籍p.8-10 8.13 Copyright 2006 Prentice-Hall, Inc. 一般表單與報表的格式 參照書籍p.8-11 文字模式顯示 8.14 摻雜大小寫字體來呈現文字，並使用一般的標點 如果空間許可，使用兩倍的間隔，如果沒有在段落 之間空白一行以示區隔 左邊齊行的格式，把不平的段落邊緣留給右邊 不要在兩行之間連接文字 Narrative is the description of a series of events, usually in a novel. 使用縮寫或首字縮寫，只能用在當它們用在被使用 者廣泛的認知，以及全名很冗長的時候 Copyright 2006 Prentice-Hall, Inc. 一般表單與報表的格式 參照書籍p.8-12 顯示表格（Table）和清單（List） 標示（Label） 所有的欄和列都應該使用有意義的標示 標示應該從其他的資訊中區分出來，並將其凸顯 出來 當資料延伸超越了螢幕區域或頁面時，要重覆的 使用標記 8.15 Copyright 2006 Prentice-Hall, Inc. 一般表單與報表的格式 參照書籍p.8-13 顯示表格和清單 版面欄‧列和格式 8.16 用有意義的次序來排序（即由小到大、由大到小或是按 照筆劃或字母的次序） 在長欄的每五行之間註記明顯的標線 類似的資料在複合的欄位顯示時，應該做垂直的排序 （即閱讀時要從上到下，不要從左到右） 在每個欄位之間，至少應該留有兩格的間隔 為了讓使用者書寫筆記，在報表列印時要留有空白的空 間 除了強調的重點之外，其餘則使用單一的字體 使用同一系列的字體和跨越顯示的報告 在畫面和報表內，使用同類型的字型 Copyright 2006 Prentice-Hall, Inc. 一般表單與報表的格式 參照書籍p.8-13 顯示表格和清單 數字文字和數值資料 數字資料要右邊齊行，而欄內的排列要對齊小數點或他的 符號 文字資料要左邊齊行，使用短行排列，通常每行是３０到 ４０字元的長度 分割長串的數值資料，變成三到四個小的資料組合 8.17 Copyright 2006 Prentice-Hall, Inc. 參照書籍p.8-13 8.18 Copyright 2006 Prentice-Hall, Inc. Copyright 2006 Prentice-Hall, Inc. 參照書籍p.8-14 8.20 Copyright 2006 Prentice-Hall, Inc. 介面和對話框的設計 參照書籍p.8-16 如何提供和獲得使用者的資訊 對話框的功能是類似兩個人之間的對談 一個好的人性化介面，在搜尋、視覺、 和行使不同的系統組件上，都提供了一 致化的組織架構 8.21 Copyright 2006 Prentice-Hall, Inc. 設計介面和對話框的程序 參照書籍p.8-16 以使用者為出發點的活動 設計表單和報表的程序是一致的 採用基本的分法 8.22 收集資料 構建原型 評估可用性 提出改進 Copyright 2006 Prentice-Hall, Inc. 設計介面和對話框的程序 參照書籍p.8-16 成果 設計規格 概要的敘述 樣品設計 測試和適用性評估 8.23 Copyright 2006 Prentice-Hall, Inc. 介面設計 參照書籍p.8-17 版面設計 8.24 使用者類似紙張格式的表單和報表來記錄或 報導資訊 瀏覽螢幕上的資料輸入屏幕應從左到右，從 上到下對文件形式 Copyright 2006 Prentice-Hall, Inc. 版面設計 參照書籍p.8-17 彈性和一致性是主要的設計目標 8.25 使用者應該可以自由的移動欄位之間 資料不應被永久保存，直到使用者明確要求 每一個按鍵和指令應分配給一個功能 Copyright 2006 Prentice-Hall, Inc. 8.26 Copyright 2006 Prentice-Hall, Inc. 參照書籍p.8-20 Copyright 2006 Prentice-Hall, Inc. 建構資料的登錄 第一個原則：簡單 不要輸入系統已經有的內容 8.28 Copyright 2006 Prentice-Hall, Inc. 參照書籍p.8-21 Copyright 2006 Prentice-Hall, Inc. 資料輸入的控制 參照書籍p.8-22 介面設計的目標之一，是減少資料登錄的失誤 作為一個系統分析師，必須要能預測使用者可 能犯的錯誤，納入介面設計的考量，以避免、 偵測、進而更正資料登入的錯誤 表8-9 描述資料輸入錯誤的類型 表8-10 列出在系統設計者察覺資料錯誤的技術 8.30 Copyright 2006 Prentice-Hall, Inc. 參照書籍p.8-22 8.31 Copyright 2006 Prentice-Hall, Inc. Copyright 2006 Prentice-Hall, Inc. 參照書籍p.8-23 8.33 Copyright 2006 Prentice-Hall, Inc. 提供回應 參照書籍p.8-25 1. 狀態資料 讓使用者隨時了解系統狀況的簡單的技術 如果操作需要花費較長的時間超過兩秒，鐘顯示狀態信息就 特別重要 2. 提示 盡可能保持具體 3. 錯誤和警告的信息 8.34 使信息明確，免於錯誤的編碼和亂碼 信息不應該去斥責使用者，是要試圖引導使用者去解決問題 使用使用者明白的詞彙 一致的格式和信息的位置 Copyright 2006 Prentice-Hall, Inc. 參照書籍p.8-26 Copyright 2006 Prentice-Hall, Inc. 提供支援 參照書籍p.8-26 發生在使用者自己設計幫助的位置 原則 簡潔 指支援信息應該是簡短，扼要的 整理 是說支援信息的資訊應該讓使用者很容易地吸收 展示 將如何執行操作步驟以及程序步驟的成果，明確 的展示給使用者，這是很有用的 8.36 Copyright 2006 Prentice-Hall, Inc. 提供支援 參照書籍p.8-27 依內容而變的資源（Context Sensitive） 使用者得到的具體支援 使用者應該要返回他們之前請求支援的 地方 8.37 Copyright 2006 Prentice-Hall, Inc. 人機對話的設計 參照書籍p.8-28 對話（Dialog） 將資訊呈現給使用者，並從使用者取得資訊 主要的設計原則要有一致的動作、按鍵、 和專門用語 三個步驟: 1. 設計一連串的對話 2. 建構一個雛型 3. 評估適用性對話 8.38 Copyright 2006 Prentice-Hall, Inc. 對話次序的設計 參照書籍p.8-30 定出次序 清楚的了解使用者、任務、技術、作業環境等等的特 性 對話框 方框和線條圖示來設計與呈現人機對話的一種正 式方式 這個方框由三個部分： 1. 頂部：包含一個獨特的顯示參考號碼，作為其他顯示的 參考 2. 中部：包含該顯示的名稱或是說明 3. 底部：包含能夠從目前的顯示畫面中進入的顯示參考號 碼 8.39 Copyright 2006 Prentice-Hall, Inc. Copyright 2006 Prentice-Hall, Inc. 8.41 Copyright 2006 Prentice-Hall, Inc. 參照書籍p.8-31 8.42 Copyright 2006 Prentice-Hall, Inc. 設計對話: 建構模型和評估適用性 參照書籍p.8-32 往往是可有可無的活動 任務是簡化使用的圖形化設計環境 8.43 Copyright 2006 Prentice-Hall, Inc. 松谷傢俱網路商店: 人性化介面的設計 參照書籍p.8-33 設計指南 cookie crumbs的導覽模式 他們已在該網站使用了一系列的標籤在網頁上 向用戶展示他們的技術 標籤是超文字連結，可以讓使用者在網站中快 速倒回 兩個重要目的: 8.44 允許用戶瀏覽到先前的一個訪問 從他們點入網站時，顯示使用者在網路上的位置 Copyright 2006 Prentice-Hall, Inc. 電子商務應用：設計指南 參照書籍p.8-37 小巧的圖像 使用小圖片，讓網頁顯示更快 表單和資料完整的規則 8.45 所有要求資訊的表單都應該有清楚的標記，並提供 適當的的空間來輸入 應該提供清楚的範例來輸入以降低資料上的錯誤 網站必須清楚的標明哪些欄位是不一定要填的，哪 些是要填的，而哪些數據是有範圍的 Copyright 2006 Prentice-Hall, Inc. 電子商務應用：設計指南 參照書籍p.8-38 具有樣板樣式的HTML 8.46 具備樣板的畫面，並能處理較高層而抽象項 目的共通屬性 創造一個介面是很容易維持住的 Copyright 2006 Prentice-Hall, Inc. 總結 參照書籍p.8-39 設計表單和報表 一般設計表單和報表的原則 格式文本，表單和名冊 介面的設計指導 8.47 版面設計 建構資料登入欄位 提供回應 設計輔助 Copyright 2006 Prentice-Hall, Inc. 總結 參照書籍p.8-40 人機對話設計 介面設計指導獨有的互聯網 8.48 Copyright 2006 Prentice-Hall, Inc.