界面原型設(shè)計(jì)準(zhǔn)則

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

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

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

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

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

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

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

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

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

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

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

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

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