界面原型設(shè)計準(zhǔn)則課件

產(chǎn)品管理系列之

界面設(shè)計準(zhǔn)則產(chǎn)品管理部2011懊惱。。。。。。由于界面設(shè)計的時間往往都比較緊張，我沒有足夠的時間去太多考慮控件的細(xì)節(jié)問題。。。為什么每次我已經(jīng)絞盡腦汁地考慮了每個控件的屬性，但最后到了開發(fā)那里還是會有很多遺漏的問題呢？對于每個控件我要確定的信息都不一樣，那么怎么做才能盡量多地考慮到不同控件的不同屬性呢？培訓(xùn)內(nèi)容介紹各種控件的設(shè)計方法介紹各種交互方式的設(shè)計原型設(shè)計案例分享怎樣開始考慮一個界面的設(shè)計？界面設(shè)計基本準(zhǔn)則從用戶的角度出發(fā)，深入了解用戶的習(xí)慣與需求保持一致性運用視覺等級降低界面和操作復(fù)雜性，引導(dǎo)用戶操作及時的提示，使用戶明確目前的狀態(tài)或者操作，防止用戶出錯允許用戶犯錯提供快捷菜單，支持快捷鍵使用用戶的語言，而不是技術(shù)術(shù)語保持簡潔，實用易用才是王道重視可用性測試，不斷改進設(shè)計布局確定分辨率：頁面長度原則上不超過3屏，寬度不超過1屏。每個標(biāo)準(zhǔn)頁面為A4幅面大小，即8.5X11英寸；分辨率為800*600px，網(wǎng)頁寬度保持在778px以內(nèi)，就不會出現(xiàn)水平滾動條，高度則視版面和內(nèi)容決定；分辨率為1024*768px，網(wǎng)頁寬度保持在1002px以內(nèi)，如果滿框顯示的話,高度是612-615px之間，就不會出現(xiàn)水平滾動條和垂直滾動條；應(yīng)考慮寬屏下頁面顯示，視覺上注意瀏覽器背景的處理。布局設(shè)計：

布局確定：兩欄、三欄菜單、導(dǎo)航、內(nèi)容區(qū)域的擺放文字文字設(shè)計準(zhǔn)則需要選取在不同的分辨率和不同類型的顯示器上都能容易閱讀的字體。一個系統(tǒng)一種字體。字體的大小要與界面的大小比例協(xié)調(diào)。建議規(guī)范：中文統(tǒng)一采用宋體，英文采用標(biāo)準(zhǔn)

Microsoft

Sans

Serif

統(tǒng)一采用宋體五號（10.5磅，即10.5pt/12px）。一般字體顏色：#000000/#666666；超鏈接字體顏色：#0066CC，鼠標(biāo)移動上去以后顏色為#CC0000。頁面名稱、一級導(dǎo)航、未讀信息、表單標(biāo)題和已選擇的文字顯示粗體?？丶丶褂脺?zhǔn)則：放置完控件后界面不應(yīng)有很大的空缺位置。

控件風(fēng)格統(tǒng)一，如果是使用現(xiàn)成的控件，則盡量使用標(biāo)準(zhǔn)控件。不要錯誤使用控件，例如：

使用Button樣式做TTable的功能，拿主菜單條顯示版權(quán)信息。統(tǒng)一類型的控件操作方式相同，例如一個控件雙擊可以執(zhí)行某些動作，而同樣控件，雙擊卻沒有任何反映

。控件布局上，窗口不擁擠，擁擠的屏幕讓人難以理解，因而難以使用。當(dāng)然，也要避免太松散。

整個項目，采用統(tǒng)一的控件間距，通過調(diào)整窗體大小達(dá)到一致，即使在窗體大小不變的情況下，寧可留空部分區(qū)域，也不要破壞控件間的行間距。

當(dāng)屏幕有多個編輯區(qū)域，要以視覺效果和效率來組織這些區(qū)域。

菜單、導(dǎo)航設(shè)計準(zhǔn)則：一組菜單的使用有先后要求或有向?qū)ё饔脮r，應(yīng)該按先后次序排列。沒有順序要求的菜單項按使用頻率和重要性排列，常用的放在開頭，不常用的靠后放置；重要的放在開頭，次要的放在后邊。

如果菜單選項較多，應(yīng)該采用加長菜單的長度而減少深度的原則排列。菜單深度一般要求最多控制在三層以內(nèi)。對常用的菜單可以使用快捷命令方式。菜單前的圖標(biāo)不宜太大，與字高保持一致最好。主菜單的寬度要接近，字?jǐn)?shù)不應(yīng)多于四個，每個菜單的字?jǐn)?shù)能相同最好。

主菜單數(shù)目不應(yīng)太多，最好為單排布置。有明顯區(qū)別，用戶很容易就能看出目前所在操作?？丶?樹樹展示的數(shù)據(jù)說明。定義樹的層級。定義樹的操作。初始進入該頁面默認(rèn)展開哪個節(jié)點？節(jié)點是否可以拖動排序？允許添加的最多節(jié)點級別？分類下是否可以添加分類？病歷文件是否為葉子節(jié)點？刪除某個節(jié)點后該節(jié)點下的所有子節(jié)點是否全部刪除？樹的層次結(jié)構(gòu)如何展現(xiàn)？控件-按鈕使用基本準(zhǔn)則：定義按鈕名稱定義按鈕動作按鈕大小基本相近，忌用太長的名稱，免得占用過多的界面位置。按鈕的大小要與界面的大小和空間要協(xié)調(diào)。點擊后是否變灰是否有tooltipTab鍵的順序與控件排列順序一致，目前流行總體從上到下，同時行間從左到右的方式。點擊后狀態(tài)是否改變？點擊后頁面是否跳轉(zhuǎn)？點擊后本頁面是否刷新？點擊操作成功后是否對其他頁面的數(shù)據(jù)產(chǎn)生相關(guān)的影響？控件-文本框設(shè)計準(zhǔn)則：定義文本框名稱。定義文本框數(shù)據(jù)。高度應(yīng)該統(tǒng)一，寬度統(tǒng)一或根據(jù)填寫內(nèi)容設(shè)計?？蓪懣丶z測到非法輸入后應(yīng)給出說明并能自動獲得焦點。對可能引起致命錯誤或系統(tǒng)出錯的輸入字符或動作要加限制或屏蔽。對一些特殊符號的輸入、與系統(tǒng)使用的符號相沖突的字符等進行判斷并阻止用戶輸入該字符。在輸入有效性字符之前應(yīng)該阻止用戶進行只有輸入之后才可進行的操作。在讀入用戶所輸入的信息時，根據(jù)需要選擇是否去掉前后空格。有些讀入數(shù)據(jù)庫的字段不支持中間有空格，但用戶切實需要輸入中間空格，這時要在程序中加以處理。是否有輸入長度限制？是否有水印文字提示？是否為必填項？光標(biāo)離開后是否有驗證？控件-列表使用基本準(zhǔn)則：定義列表的行數(shù)、列數(shù)。定義列表每列的字段?？丶?列表排序標(biāo)識統(tǒng)一鏈接標(biāo)識統(tǒng)一字段名稱字體加粗、列寬和行寬對齊方式、分頁、標(biāo)題過長時的顯示方式列表中顯示的數(shù)據(jù)來源說明？列表數(shù)據(jù)的默認(rèn)排序方式？列表字段是否需要排序？列表中的字段是否是用戶最關(guān)心的？字段的排序是不是按照重要程度排序？列表中的數(shù)據(jù)是否發(fā)生變化？歷史數(shù)據(jù)是否需要查看？控件-下拉框使用基本準(zhǔn)則：定義下拉框的名稱。定義下拉框的數(shù)據(jù)源?？丶?下拉框設(shè)計準(zhǔn)則：長度自適應(yīng)、選擇項超過一個、按照選擇頻率排序。界面空間較小時使用下拉框而不用選項框。要有默認(rèn)選項或選擇提示，并支持Tab或翻頁鍵選擇。下拉菜單要根據(jù)菜單選項的含義進行分組，并切按照一定的規(guī)則進行排列，用橫線隔開。是否為必選項？列表中的選項排列是否按重要程度排列？選中某項數(shù)據(jù)后本頁面是否刷新？是否對其他數(shù)據(jù)產(chǎn)生影響？下拉框中的數(shù)據(jù)項較多時是否應(yīng)該分組顯示？控件-單選框使用基本準(zhǔn)則：定義單選框的名稱。定義單選框的數(shù)據(jù)類別。是否有默認(rèn)選項？是否必須選擇一項？選中某項后該頁面是否有數(shù)據(jù)更新？選中后某項后對數(shù)據(jù)狀態(tài)有何影響？控件-復(fù)選框設(shè)計準(zhǔn)則：定義復(fù)選框的數(shù)據(jù)名稱。定義每個選項的數(shù)據(jù)。按選擇幾率的高底而先后排列。要有默認(rèn)選項，并支持Tab選擇。

選項數(shù)較少時使用選項框，相反使用下拉列表框。選項數(shù)相同時多用選項框而不用下拉列表框。列表中的復(fù)選框點擊整行都可選中。默認(rèn)為常用選項，并且最常用選項一般在前。是否有默認(rèn)選項？是否必須選擇一項？選中某項后該頁面是否有數(shù)據(jù)更新？選中后某項后對數(shù)據(jù)狀態(tài)有何影響？頁面進入路徑。初始默認(rèn)加載的數(shù)據(jù)狀態(tài)。按enter鍵默認(rèn)執(zhí)行按鈕。頁面數(shù)據(jù)加載的前置條件。培訓(xùn)內(nèi)容介紹各種控件的設(shè)計方法介紹各種交互方式的設(shè)計原型設(shè)計案例分享交互鼠標(biāo)操作鍵盤操作告警交互-響應(yīng)設(shè)計準(zhǔn)則：對系統(tǒng)不同操作的響應(yīng)時間的最低標(biāo)準(zhǔn)，包括刷新（如局部刷新，列表即時刷新）。超過1秒的操作要有動畫效果或等待圖標(biāo)分散用戶注意力，超過10秒的操作有動態(tài)條塊說明進度，超過30秒的操作提供“取消”操作。操作進行中，該操作按鈕為灰色不可用。交互-提示提示消息：操作成功的提示、一些破壞性操作的確認(rèn)提示、在線提示、操作完成進度提示等等。向用戶展示一般性的系統(tǒng)消息。警告消息：

執(zhí)行操作后所產(chǎn)生的影響告知。動作執(zhí)行結(jié)果的告知。不利環(huán)境產(chǎn)生后的告知。用戶操作錯誤的提醒。4.動作執(zhí)行確認(rèn)提醒。5.操作成功的提醒。交互-鍵盤操作常用的鍵盤操作：TAB鍵跳轉(zhuǎn)ENTER鍵提交或缺省、C-新增D-刪除常用的組合鍵：面向事務(wù)的組合有：Ctrl-D刪除；Ctrl-F尋找；Ctrl–H替換；Ctrl-I插入；Ctrl-N新記錄；Ctrl-S保存Ctrl-O打開。列表：Ctrl-R，Ctrl-G定位；Ctrl-Tab下一分頁窗口或反序瀏覽同一頁面控件。編輯、Ctrl-A全選；Ctrl-C拷貝；Ctrl-V粘貼；Ctrl-X剪切；Ctrl-Z撤消操作；Ctrl-Y恢復(fù)操作。

文件操作：Ctrl-P打??；Ctrl-W關(guān)閉。

系統(tǒng)菜單：Alt-A文件；Alt-E編輯；Alt-T工具；Alt－W窗口；Alt－H幫助。

MSWindows保留鍵：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)操作常用鼠標(biāo)交互方式：mouseover文字應(yīng)有tooltip提示。點擊按鈕等元素時應(yīng)有顏色變化。操作進行中，鼠標(biāo)為忙?？牲c擊處，鼠標(biāo)為手型。鼠標(biāo)放在可點擊的非按鈕元素上時，元素應(yīng)有狀態(tài)變化。培訓(xùn)內(nèi)容介紹各種控件的設(shè)計方法介紹各種交互方式的設(shè)計原型設(shè)計案例分享練習(xí)-議題管理省政府常務(wù)會議，召開之前由辦公廳按照領(lǐng)導(dǎo)要求先準(zhǔn)備好議題，提交給領(lǐng)導(dǎo)審批；經(jīng)相關(guān)領(lǐng)導(dǎo)審批通過、擬上會討論的議題由專人管理；審批不走網(wǎng)上流程