界面原型設計準則

1、產(chǎn)品管理系列之產(chǎn)品管理系列之界面設計準則界面設計準則產(chǎn)品管理部2011年十月懊惱。l 由于界面設計的時間往往都比較緊張，我沒有足夠的時間去太多考慮控件的細節(jié)問題。l 為什么每次我已經(jīng)絞盡腦汁地考慮了每個控件的屬性，但最后到了開發(fā)那里還是會有很多遺漏的問題呢？l 對于每個控件我要確定的信息都不一樣，那么怎么做才能盡量多地考慮到不同控件的不同屬性呢？培訓內(nèi)容一介紹各種控件的設計方法二介紹各種交互方式的設計三原型設計案例分享界面設計基本準則1. 1.從用戶的角度出發(fā)，深入了解用戶的習慣與從用戶的角度出發(fā)，深入了解用戶的習慣與需求需求2. 2.保持保持一致性一致性3. 3.運用視覺等級降低界面和操作復

2、雜性，引導用戶操作運用視覺等級降低界面和操作復雜性，引導用戶操作4. 4.及時的提示，使用戶明確目前的狀態(tài)或者操作，防止用戶及時的提示，使用戶明確目前的狀態(tài)或者操作，防止用戶出錯出錯5. 5.允許用戶犯錯允許用戶犯錯6. 6.提供快捷菜單，支持快捷鍵提供快捷菜單，支持快捷鍵7. 7.使用用戶的語言，而不是技術(shù)術(shù)語使用用戶的語言，而不是技術(shù)術(shù)語8. 8.保持簡潔，實用易用才是王道保持簡潔，實用易用才是王道9. 9.重視可用性測試，不斷改進設計重視可用性測試，不斷改進設計布局l確定分辨率：p 頁面長度原則上不超過3屏，寬度不超過1屏。每個標準頁面為A4幅面大小，即8.5X11英寸；p 分辨率為80

3、0*600px，網(wǎng)頁寬度保持在778px以內(nèi)，就不會出現(xiàn)水平滾動條，高度則視版面和內(nèi)容決定； p 分辨率為1024*768px，網(wǎng)頁寬度保持在1002px以內(nèi)，如果滿框顯示的話,高度是612-615px之間，就不會出現(xiàn)水平滾動條和垂直滾動條；p 應考慮寬屏下頁面顯示，視覺上注意瀏覽器背景的處理。l布局設計：p 布局確定：兩欄、三欄p 菜單、導航、內(nèi)容區(qū)域的擺放布局基本布局準則布局圖例配色基本配色準則配色圖例文字文字設計準則建議規(guī)范控件菜單樹按鈕文本框。交互響應提示鼠標操作。文字l文字設計準則p 需要選取在不同的分辨率和不同類型的顯示器上都能容易閱讀的字體。p 一個系統(tǒng)一種字體。p 字體的大小要

4、與界面的大小比例協(xié)調(diào)。l建議規(guī)范：p 中文統(tǒng)一采用宋體，英文采用標準 Microsoft Sans Serif p 統(tǒng)一采用宋體五號（10.5磅，即10.5pt/12px）。p 一般字體顏色：#000000/#666666；p 超鏈接字體顏色：#0066CC，鼠標移動上去以后顏色為#CC0000。p 頁面名稱、一級導航、未讀信息、表單標題和已選擇的文字顯示粗體?？丶控件使用準則：p 放置完控件后界面不應有很大的空缺位置。 p 控件風格統(tǒng)一，如果是使用現(xiàn)成的控件，則盡量使用標準控件。p 不要錯誤使用控件，例如： 使用Button樣式做TTable的功能，拿主菜單條顯示版權(quán)信息。p 統(tǒng)一類型的控

5、件操作方式相同，例如一個控件雙擊可以執(zhí)行某些動作，而同樣控件，雙擊卻沒有任何反映 。p 控件布局上，窗口不擁擠，擁擠的屏幕讓人難以理解，因而難以使用。當然，也要避免太松散。 p 整個項目，采用統(tǒng)一的控件間距，通過調(diào)整窗體大小達到一致，即使在窗體大小不變的情況下，寧可留空部分區(qū)域，也不要破壞控件間的行間距。 p 當屏幕有多個編輯區(qū)域，要以視覺效果和效率來組織這些區(qū)域。 菜單、導航l設計準則：p 一組菜單的使用有先后要求或有向?qū)ё饔脮r，應該按先后次序排列。 沒有順序要求的菜單項按使用頻率和重要性排列，常用的放在開頭， 不常用的靠后放置；重要的放在開頭，次要的放在后邊。 p 如果菜單選項較多，應該采

6、用加長菜單的長度而減少深度的原則排列。p 菜單深度一般要求最多控制在三層以內(nèi)。p 對常用的菜單可以使用快捷命令方式。p 菜單前的圖標不宜太大，與字高保持一致最好。p 主菜單的寬度要接近，字數(shù)不應多于四個，每個菜單的字數(shù)能相同最好。 p 主菜單數(shù)目不應太多，最好為單排布置。p 有明顯區(qū)別，用戶很容易就能看出目前所在操作?？丶?樹1.樹展示的數(shù)據(jù)說明。2.定義樹的層級。3.定義樹的操作。初始進入該頁面默認展開哪個節(jié)點？節(jié)點是否可以拖動排序？允許添加的最多節(jié)點級別？分類下是否可以添加分類？病歷文件是否為葉子節(jié)點？刪除某個節(jié)點后該節(jié)點下的所有子節(jié)點是否全部刪除？樹的層次結(jié)構(gòu)如何展現(xiàn)？控件-按鈕 使用基

7、本準則：p 定義按鈕名稱p 定義按鈕動作p 按鈕大小基本相近，忌用太長的名稱，免得占用過多的界面位置。p 按鈕的大小要與界面的大小和空間要協(xié)調(diào)。p 點擊后是否變灰p 是否有tooltipp Tab鍵的順序與控件排列順序一致，目前流行總體從上到下，同時行間從左到右的方式。l點擊后狀態(tài)是否改變？l點擊后頁面是否跳轉(zhuǎn)？l點擊后本頁面是否刷新？l點擊操作成功后是否對其他頁面的數(shù)據(jù)產(chǎn)生相關(guān)的影響？控件-文本框l設計準則：p 定義文本框名稱。p 定義文本框數(shù)據(jù)。p 高度應該統(tǒng)一，寬度統(tǒng)一或根據(jù)填寫內(nèi)容設計。p 可寫控件檢測到非法輸入后應給出說明并能自動獲得焦點。p 對可能引起致命錯誤或系統(tǒng)出錯的輸入字符或

8、動作要加限制或屏蔽。p 對一些特殊符號的輸入、與系統(tǒng)使用的符號相沖突的字符等進行判斷并阻止用戶輸入該字符。p 在輸入有效性字符之前應該阻止用戶進行只有輸入之后才可進行的操作。p 在讀入用戶所輸入的信息時，根據(jù)需要選擇是否去掉前后空格。p 有些讀入數(shù)據(jù)庫的字段不支持中間有空格，但用戶切實需要輸入中間空格，這時要在程序中加以處理。l是否有輸入長度限制？l是否有水印文字提示？l是否為必填項？l光標離開后是否有驗證？控件-列表 使用基本準則：p定義列表的行數(shù)、列數(shù)。p定義列表每列的字段?？丶?列表 排序標識統(tǒng)一 鏈接標識統(tǒng)一 字段名稱字體 加粗、列寬和行寬 對齊方式、分頁、標題過長時的顯示方式l列表中

9、顯示的數(shù)據(jù)來源說明？l列表數(shù)據(jù)的默認排序方式？l列表字段是否需要排序？l列表中的字段是否是用戶最關(guān)心的？字段的排序是不是按照重要程度排序？l列表中的數(shù)據(jù)是否發(fā)生變化？歷史數(shù)據(jù)是否需要查看？控件-下拉框 使用基本準則：p 定義下拉框的名稱。p 定義下拉框的數(shù)據(jù)源?？丶?下拉框l設計準則：p 長度自適應、選擇項超過一個、按照選擇頻率排序。p 界面空間較小時使用下拉框而不用選項框。p 要有默認選項或選擇提示，并支持Tab或翻頁鍵選擇。p 下拉菜單要根據(jù)菜單選項的含義進行分組，并切按照一定的規(guī)則進行排列，用橫線隔開。l是否為必選項？l列表中的選項排列是否按重要程度排列？l選中某項數(shù)據(jù)后本頁面是否刷新？

10、是否對其他數(shù)據(jù)產(chǎn)生影響？l下拉框中的數(shù)據(jù)項較多時是否應該分組顯示？控件-單選框 使用基本準則：p定義單選框的名稱。p定義單選框的數(shù)據(jù)類別。l是否有默認選項？l是否必須選擇一項？l選中某項后該頁面是否有數(shù)據(jù)更新？l選中后某項后對數(shù)據(jù)狀態(tài)有何影響？控件-復選框 設計準則：p 定義復選框的數(shù)據(jù)名稱。p 定義每個選項的數(shù)據(jù)。p 按選擇幾率的高底而先后排列。p 要有默認選項，并支持Tab選擇。 p 選項數(shù)較少時使用選項框，相反使用下拉列表框。p 選項數(shù)相同時多用選項框而不用下拉列表框。p 列表中的復選框點擊整行都可選中。p 默認為常用選項，并且最常用選項一般在前。l是否有默認選項？l是否必須選擇一項？l

11、選中某項后該頁面是否有數(shù)據(jù)更新？l選中后某項后對數(shù)據(jù)狀態(tài)有何影響？頁面1. 進入路徑。2. 初始默認加載的數(shù)據(jù)狀態(tài)。3. 按enter鍵默認執(zhí)行按鈕。4. 頁面數(shù)據(jù)加載的前置條件。培訓內(nèi)容一介紹各種控件的設計方法二介紹各種交互方式的設計三原型設計案例分享交互響應 提示彈出窗口鼠標操作鍵盤操作告警交互-響應l設計準則：p 對系統(tǒng)不同操作的響應時間的最低標準，包括刷新（如局部刷新，列表即時刷新）。p 超過1秒的操作要有動畫效果或等待圖標分散用戶注意力，超過10秒的操作有動態(tài)條塊說明進度，超過30秒的操作提供“取消”操作。p 操作進行中，該操作按鈕為灰色不可用。交互-提示 提示消息：操作成功的提示、

12、一些破壞性 操作的確認提示、在線提示、操作完成進度提示等等。1.向用戶展示一般性的系統(tǒng)消息。2.警告消息： 執(zhí)行操作后所產(chǎn)生的影響告知。 動作執(zhí)行結(jié)果的告知。 不利環(huán)境產(chǎn)生后的告知。3. 用戶操作錯誤的提醒。4. 動作執(zhí)行確認提醒。5. 操作成功的提醒。交互-鍵盤操作l常用的鍵盤操作：p TAB鍵跳轉(zhuǎn)p ENTER鍵提交或缺省、p C-新增p D-刪除l常用的組合鍵：p 面向事務的組合有：Ctrl-D 刪除 ；Ctrl-F 尋找 ；Ctrl H替換；Ctrl-I 插入 ；Ctrl-N 新記錄 ；Ctrl-S 保存 Ctrl- O 打開。p 列表： Ctrl-R ，Ctrl-G定位；Ctrl-T

13、ab下一分頁窗口或反序瀏覽同一頁面控件。p 編輯、 Ctrl-A全選；Ctrl-C 拷貝；Ctrl-V 粘貼；Ctrl-X 剪切；Ctrl-Z撤消操作；Ctrl-Y恢復操作。 p 文件操作： Ctrl-P 打??；Ctrl-W 關(guān)閉。 p 系統(tǒng)菜單： Alt-A文件；Alt-E編輯；Alt-T工具；AltW窗口；AltH幫助。 p MS Windows保留鍵： Ctrl-Esc 任務列表 ；Ctrl-F4 關(guān)閉窗口； Alt-F4 結(jié)束應用；Alt-Tab 下一應用 ；Enter 缺省按鈕/確認操作 ；Esc 取消按鈕/取消操作 ；Shift-F1 上下文相關(guān)幫助 。 交互-鼠標操作l常用鼠標交互方式：p mouseover文字應有tooltip提示。p 點擊按鈕等元素時應有顏色變化。p 操作進行中，鼠標為忙。p 可點擊處，鼠標為手型。p 鼠標放在可點擊的非按鈕元素上時，元素應有狀態(tài)變化。培訓內(nèi)容一介紹各種控件的設計方法二介紹各種交互方式的設計三原型設計案例分享練習-議題管理 省政府常務會議，召開之前由辦公廳按照領導要求先準備好議題，提交給領導審批； 經(jīng)相關(guān)領導審批通過、擬上會討論的議題由專人管理； 審批不走網(wǎng)上流程，由系統(tǒng)按