UI界面設(shè)計(jì)規(guī)范.doc

《UI界面設(shè)計(jì)規(guī)范.doc》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫(kù)。

1、.word可編輯.WI-PSMIS-DJ-B00802.01.000（內(nèi)部保密資料）ECE項(xiàng)目圖形用戶(hù)界面設(shè)計(jì)規(guī)范自2012年8月日起正式生效廣州從興電子開(kāi)發(fā)有限公司.專(zhuān)業(yè).專(zhuān)注..word可編輯.編制：審批：.專(zhuān)業(yè).專(zhuān)注..word可編輯.日期修訂版本描述作者2012-8-101.00.000初始版本蘇寒.專(zhuān)業(yè).專(zhuān)注..word可編輯.目錄1引言41.1目的41.2范圍41.3參考資料42概述43原則53.1易用性53.2規(guī)范性53.3合理性63.4美觀與協(xié)調(diào)性63.5獨(dú)特性74設(shè)計(jì)規(guī)范74.1登錄界面74.2首頁(yè)74.3框架設(shè)

2、計(jì)74.4按鈕設(shè)計(jì)84.5對(duì)話框84.5.1一般對(duì)話框84.5.2有模式對(duì)話框9.專(zhuān)業(yè).專(zhuān)注..word可編輯.4.5.3無(wú)模式對(duì)話框94.6面板設(shè)計(jì)94.7菜單設(shè)計(jì)94.8圖標(biāo)設(shè)計(jì)104.9滾動(dòng)條104.10換膚功能105保留字105.1常用保留字10.專(zhuān)業(yè).專(zhuān)注..word可編輯.電力營(yíng)銷(xiāo)圖形用戶(hù)界面設(shè)計(jì)規(guī)范1引言1.1目的統(tǒng)一和規(guī)范軟件界面。1.2范圍電力營(yíng)銷(xiāo)改造。1.3參考資料2概述界面是軟件與用戶(hù)交互的最直接的層，界面的好壞決定用戶(hù)對(duì)軟件的第一印象。而且設(shè)計(jì)良好的界面能夠引導(dǎo)用戶(hù)自己完成相應(yīng)的操作，起到向?qū)У淖饔?。同時(shí)界

3、面如同人的面孔，具有吸引用戶(hù)的直接優(yōu)勢(shì)。設(shè)計(jì)合理的界面能給用戶(hù)帶來(lái)輕松愉悅的感受和成功的感覺(jué)，相反由于界面設(shè)計(jì)的失敗，讓用戶(hù)有挫敗感，再實(shí)用強(qiáng)大的功能都可能在用戶(hù)的畏懼與放棄中付諸東流。目前界面的設(shè)計(jì)引起軟件設(shè)計(jì)人員的重視的程度還遠(yuǎn)遠(yuǎn)不夠，直到最近網(wǎng)頁(yè)制作的興起，才受到專(zhuān)家的青睞。而且設(shè)計(jì)良好的界面由于需要具有藝術(shù)美的天賦而遭拒絕。微軟公司和蘋(píng)果公司是這方面的典范。微軟公司的所有產(chǎn)品包括Office、Windows、MSNMessenger和其所有的網(wǎng)站都是我們追隨的對(duì)象。而且微軟公司所有的文檔和產(chǎn)品介紹也是我們模仿和學(xué)習(xí)的對(duì)象。

4、.專(zhuān)業(yè).專(zhuān)注..word可編輯.蘋(píng)果公司更是這方面的鼻祖，它的所有產(chǎn)品無(wú)不表露著它在這方面是無(wú)人能及的。我們考慮GUI設(shè)計(jì)時(shí)應(yīng)該遵循基本的規(guī)則然后參考成熟的設(shè)計(jì)，并能夠添加自己的獨(dú)特性。在一個(gè)時(shí)期很流行的界面風(fēng)格在另外的時(shí)期可能已經(jīng)落后，所以我們要有創(chuàng)新和超前的意識(shí)。1原則1.1易用性1.完成同一功能或任務(wù)的元素放在集中位置，減少鼠標(biāo)移動(dòng)的距離。2.可寫(xiě)控件檢測(cè)到非法輸入后應(yīng)給出說(shuō)明并能自動(dòng)獲得焦點(diǎn)。3.復(fù)選框和單選框按著選擇幾率的高底而先后排列。4.復(fù)選框和選項(xiàng)框要有默認(rèn)選項(xiàng)，并支持Tab選擇。5.選項(xiàng)數(shù)相同時(shí)多用選項(xiàng)框而不用下

5、拉列表框。6.界面空間較小時(shí)使用下拉框而不用選項(xiàng)框。7.選項(xiàng)數(shù)較少時(shí)使用選項(xiàng)框，相反使用下拉列表框。8.專(zhuān)業(yè)性強(qiáng)的軟件要使用相關(guān)的專(zhuān)業(yè)術(shù)語(yǔ)，通用性界面則提倡使用通用性詞眼。1.2規(guī)范性1.完成相同或相近功能的菜單用橫線隔開(kāi)放在同一位置。2.菜單前的圖標(biāo)能直觀的代表要完成的操作。3.菜單深度一般要求最多控制在三層以?xún)?nèi)。.專(zhuān)業(yè).專(zhuān)注..word可編輯.1.工具欄要求可以根據(jù)用戶(hù)的要求自己選擇定制。2.相同或相近功能的工具欄放在一起。3.工具欄中的每一個(gè)按鈕要有及時(shí)提示信息。4.一條工具欄的長(zhǎng)度最長(zhǎng)不能超出屏幕寬度。5.工具欄的圖標(biāo)能直

6、觀的代表要完成的操作。6.系統(tǒng)常用的工具欄設(shè)置默認(rèn)放置位置。7.滾動(dòng)條的長(zhǎng)度要根據(jù)顯示信息的長(zhǎng)度或?qū)挾饶芗皶r(shí)變換，以利于用戶(hù)了解顯示信息的位置和百分比。8.狀態(tài)條的高度以放置五好字為宜，滾動(dòng)條的寬度比狀態(tài)條的略窄。9.菜單和工具條要有清楚的界限;菜單要求凸出顯示，這樣在移走工具條時(shí)仍有立體感。1.1合理性1.重要的命令按鈕與使用較頻繁的按鈕要放在界面上注目的位置。2.錯(cuò)誤使用容易引起界面退出或關(guān)閉的按鈕不應(yīng)該放在易點(diǎn)位置。橫排開(kāi)頭或最后與豎排最后為易點(diǎn)位置。3.與正在進(jìn)行的操作無(wú)關(guān)的按鈕應(yīng)該加以屏蔽。4.對(duì)可能造成數(shù)據(jù)無(wú)法恢復(fù)的操

7、作必須提供確認(rèn)信息,給用戶(hù)放棄選擇的機(jī)會(huì)。5.非法的輸入或操作應(yīng)有足夠的提示說(shuō)明。6.對(duì)運(yùn)行過(guò)程中出現(xiàn)問(wèn)題而引起錯(cuò)誤的地方要有提示，讓用戶(hù)明白錯(cuò)誤出處，避免形成無(wú)限期的等待。7.提示、警告、或錯(cuò)誤說(shuō)明應(yīng)該清楚、明了、恰當(dāng)。.專(zhuān)業(yè).專(zhuān)注..word可編輯.1.1美觀與協(xié)調(diào)性1.長(zhǎng)寬接近黃金點(diǎn)比例，切忌長(zhǎng)寬比例失調(diào)、或?qū)挾瘸^(guò)長(zhǎng)度。2.布局要合理,不宜過(guò)于密集，也不能過(guò)于空曠，合理的利用空間。3.按鈕大小基本相近，忌用太長(zhǎng)的名稱(chēng)，免得占用過(guò)多的界面位置。4.按鈕的大小要與界面的大小和空間要協(xié)調(diào)。5.避免空曠的界面上放置很大的按鈕。6.

8、放置完控件后界面不應(yīng)有很大的空缺位置。7.前景與背景色搭配合理協(xié)調(diào)，反差不宜太大，最好少用深色，如大紅、大綠等。常用色考慮如果使用其他顏色，主色要柔和，具有親和力與磁力，堅(jiān)決杜絕刺目的顏色。8.大型系統(tǒng)常用的主色有"#E1E1E1"、"#EFEFE