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

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

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

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

Microsoft

Sans

Serif

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

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

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

?？丶季稚?，窗口不擁擠，擁擠的屏幕讓人難以理解，因而難以使用。當(dāng)然，也要避免太松散。

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

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

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

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

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

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

執(zhí)行操作后所產(chǎn)生的影響告知。動(dòng)作執(zhí)行結(jié)果的告知。不利環(huán)境產(chǎn)生后的告知。用戶操作錯(cuò)誤的提醒。4.動(dòng)作執(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打開(kāi)。列表：Ctrl-R，Ctrl-G定位；Ctrl-Tab下一分頁(yè)窗口或反序?yàn)g覽同一頁(yè)面控件。編輯、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提示。點(diǎn)擊按鈕等元素時(shí)應(yīng)有顏色變化。操作進(jìn)行中，鼠標(biāo)為忙?？牲c(diǎn)擊處，鼠標(biāo)為手型。鼠標(biāo)放在可點(diǎn)擊的非按鈕元素上時(shí)，元素應(yīng)有狀態(tài)變化。培訓(xùn)內(nèi)容介紹各種控件的設(shè)計(jì)方法介紹各種交互方式的設(shè)計(jì)原型設(shè)計(jì)案例分享練習(xí)-議題管理省政府常務(wù)會(huì)議，召開(kāi)之前由辦公廳按照領(lǐng)導(dǎo)要求先準(zhǔn)備好議題，提交給領(lǐng)導(dǎo)審批；經(jīng)相關(guān)領(lǐng)導(dǎo)審批通過(guò)、擬上會(huì)討論的議題由專人管理；審批不走網(wǎng)上流程，由系統(tǒng)按照標(biāo)準(zhǔn)格式生成送審表，打印后由專人一級(jí)一級(jí)報(bào)