在設(shè)計(jì)一個(gè)web界面時(shí)，我們應(yīng)當(dāng)遵循各種規(guī)范與原則，只有在這樣的框架下，設(shè)計(jì)出足夠吸引人的作品，我們的產(chǎn)品才會(huì)久盛不衰。那么下面faceui就為大家?guī)?lái)webui設(shè)計(jì)規(guī)范及設(shè)計(jì)應(yīng)遵循的基本原則介紹，希望能夠?qū)δ阌兴鶈l(fā)。

　　webui規(guī)范介紹

　　網(wǎng)頁(yè)視覺(jué)規(guī)范目的

　　適用于WEB產(chǎn)品線的人機(jī)交互界面的設(shè)計(jì)，貫穿于以用戶為中心的設(shè)計(jì)指導(dǎo)方向。根據(jù)WEB產(chǎn)品的特點(diǎn)制定出的一套規(guī)范，以達(dá)到提升用戶體驗(yàn)，控制產(chǎn)品設(shè)計(jì)質(zhì)量，提高設(shè)計(jì)效率的目的。

　　視覺(jué)規(guī)范的對(duì)象

　　適合界面設(shè)計(jì)師、用戶體驗(yàn)設(shè)計(jì)師、前臺(tái)設(shè)計(jì)工程師、發(fā)布支持人員、運(yùn)營(yíng)編輯人員等

　　規(guī)范的含義

　　1．【統(tǒng)一識(shí)別】規(guī)范能使頁(yè)面相同屬性單元統(tǒng)一識(shí)別，防止混亂，甚至出現(xiàn)嚴(yán)重錯(cuò)誤，避免用戶在瀏覽時(shí)理解困難。

　　2．【節(jié)約資源】除了門戶網(wǎng)站、活動(dòng)推廣等個(gè)性頁(yè)面外，相對(duì)于后臺(tái)系統(tǒng)、物聯(lián)網(wǎng)系統(tǒng)、數(shù)據(jù)統(tǒng)計(jì)系統(tǒng)、等界面設(shè)計(jì)，使用規(guī)范標(biāo)準(zhǔn)能極大的減少設(shè)計(jì)時(shí)間。

　　3.【重復(fù)利用】相同單元屬性，頁(yè)面新建時(shí)可以執(zhí)行此標(biāo)準(zhǔn)重復(fù)使用，減少無(wú)關(guān)信息，就是減少對(duì)主題信息傳達(dá)干擾，利用閱讀與信息傳遞。

　　UI基本設(shè)計(jì)標(biāo)準(zhǔn)

　　一、尺寸

　　畫(huà)布建立尺寸寬度：1920px

　　分辨率：72像素/尺寸

　　顏色模式：RGB

　　網(wǎng)頁(yè)內(nèi)容安全寬度：≤1200px（只適用于門戶網(wǎng)站）

　　首屏內(nèi)容建議高度：800px（只適用于門戶網(wǎng)站）

　　二、字體（web）

　　中文字體：微軟雅、英文字體：Aerial Tacoma

　　消除鋸齒的方式為：Windows LCD

　　建議大小：建議使用16號(hào)+14號(hào)+12號(hào)字體的混合搭配（具體項(xiàng)目可根據(jù)實(shí)際情況靈活調(diào)整）

　　字體間距：間距一般根據(jù)字體大小選1-1.5倍最為行距，段落間距一般選擇1.5-2倍字體大小。如選用12px像素字體，則行間距為12點(diǎn)-18點(diǎn)，段落間距為18-24點(diǎn)。

webui設(shè)計(jì)規(guī)范（圖片來(lái)自網(wǎng)絡(luò)）

　　應(yīng)該遵循的基本原則

　?、亠@示信息一致性的原則

　　無(wú)論是控件使用，提示信息措辭，還是顏色、窗口布局風(fēng)格，遵循統(tǒng)一的標(biāo)準(zhǔn)，做到真正的一致。界面直觀、對(duì)用戶透明：用戶接觸軟件后對(duì)界面上對(duì)應(yīng)的功能一目了然、不需要多少培訓(xùn)就可以方便使用應(yīng)用系統(tǒng)。

　　這樣得到的好處：

　　用戶使用起來(lái)能夠建立起精確的心里模型，使用熟練了一個(gè)系統(tǒng)界面后，切換到另外一個(gè)系統(tǒng)界面能夠很輕松的推測(cè)出各種功能。

　　降低培訓(xùn)、支持成本，支持人員不用費(fèi)力逐個(gè)指導(dǎo)。

　　給用戶統(tǒng)一感覺(jué)，不覺(jué)得混亂，心情愉快，支持度增加。

　?、谝杂脩魹橹鲗?dǎo)原則

　　明確用戶是所有系統(tǒng)處理的核心，不應(yīng)該有應(yīng)用程序來(lái)決定處理過(guò)程，所以用戶界面應(yīng)當(dāng)由用戶來(lái)控制應(yīng)如何工作、如何響應(yīng)，而不是由開(kāi)發(fā)者按自己的意愿把操作流程強(qiáng)加給用戶。

　　③易用性原則

　　用戶不用查閱幫助就能知道該界面的功能并進(jìn)行相關(guān)正確的操作。

　　完成相同或相近功能的按鈕用Frame框起來(lái)，常用按鈕要支持快捷方式。

　　完成同一功能或任務(wù)的元素放在集中位置，減少鼠標(biāo)移動(dòng)的距離。

　　按功能將界面劃分局域塊，用Frame框括起來(lái),并要有功能說(shuō)明或標(biāo)題。

　　界面要支持鍵盤自動(dòng)瀏覽按鈕功能，即按Tab鍵的自動(dòng)切換功能。

　　界面上首先應(yīng)輸入的和重要信息的控件在Tab順序中應(yīng)當(dāng)靠前,位置也應(yīng)放在窗口上較醒目的位置。

　　同一界面上的控件數(shù)最好不要超過(guò)10個(gè)，多于10個(gè)時(shí)可以考慮使用分頁(yè)界面顯示。

　　分頁(yè)界面要支持在頁(yè)面間的快捷切換，常用組合快捷鍵Ctrl+Tab

　　默認(rèn)按鈕要支持Enter操作，即按Enter后自動(dòng)執(zhí)行默認(rèn)按鈕對(duì)應(yīng)操作。

　　可寫(xiě)控件檢測(cè)到非法輸入后應(yīng)給出說(shuō)明并能自動(dòng)獲得焦點(diǎn)。

　　復(fù)選框和選項(xiàng)框按選擇幾率的高底而先后排列。

　　復(fù)選框和選項(xiàng)框要有默認(rèn)選項(xiàng)，并支持Tab選擇。

　　專業(yè)性強(qiáng)的軟件要使用相關(guān)的專業(yè)術(shù)語(yǔ)，通用性界面則提倡使用通用性詞眼。

　?、苁髽?biāo)與鍵盤一致性原則

　　盡量遵循可不用鼠標(biāo)的原則：應(yīng)用中的功能只用鍵盤也應(yīng)當(dāng)可以完成。但是，許多鼠標(biāo)的操作，如雙擊、拖動(dòng)對(duì)象等，并不能簡(jiǎn)單地用鍵盤來(lái)模擬即可實(shí)現(xiàn)，此類操作可適當(dāng)增加操作按鈕。

　　⑤系統(tǒng)響應(yīng)時(shí)間原則

　　系統(tǒng)響應(yīng)時(shí)間應(yīng)該適中，響應(yīng)時(shí)間過(guò)長(zhǎng)，用戶就會(huì)感到不安和沮喪，而響應(yīng)時(shí)間過(guò)快也會(huì)影響到用戶的操作節(jié)奏，并可能導(dǎo)致錯(cuò)誤。因此在系統(tǒng)響應(yīng)時(shí)間上堅(jiān)持如下原則：

　　0-5秒鼠標(biāo)顯示成為沙漏；

　　5秒以上顯示處理窗口，或顯示進(jìn)度條；

　　一個(gè)長(zhǎng)時(shí)間的處理完成時(shí)應(yīng)給予完成警告信息。

　　⑥出錯(cuò)信息和警告原則

　　出錯(cuò)信息和警告是指出現(xiàn)問(wèn)題時(shí)系統(tǒng)給出的壞消息，對(duì)于出錯(cuò)信息和警告應(yīng)該遵循以下原則：

　　信息以用戶可以理解的術(shù)語(yǔ)描述；

　　信息簡(jiǎn)明扼要，指出出錯(cuò)原因并提供解決辦法提示。

webui設(shè)計(jì)規(guī)范（圖片來(lái)自網(wǎng)絡(luò)）

　?、咝畔@示原則

　　信息顯示遵循以下原則：

　　只顯示與當(dāng)前用戶語(yǔ)境環(huán)境有關(guān)的信息；

　　不要用數(shù)據(jù)將用戶包圍，使用便于用戶迅速吸取信息的方式表現(xiàn)信息；

　　使用一致的標(biāo)記、標(biāo)準(zhǔn)縮寫(xiě)和顏色，顯示信息的含義應(yīng)該非常明確，用戶

　　不必再參考其它信息源；

　　產(chǎn)生有意義的出錯(cuò)信息；

　　使用縮進(jìn)和文本來(lái)輔助理解；

　　使用窗口分隔控件分隔不同類型的信息；

　　高效地使用顯示器的顯示空間，但要避免空間過(guò)于擁擠。

　?、鄶?shù)據(jù)輸入原則

　　數(shù)據(jù)輸入遵循以下原則：

　　盡量減少用戶輸入動(dòng)作的數(shù)量；

　　維護(hù)信息顯示和數(shù)據(jù)輸入的一致性；

　　交互應(yīng)該是靈活的，對(duì)鍵盤和鼠標(biāo)輸入的靈活性提供支持；

　　在當(dāng)前動(dòng)作的語(yǔ)境中使不合適的命令不起作用；

　　讓用戶控制交互流，用戶可以跳過(guò)不必要的動(dòng)作、改變所需動(dòng)作的順序

　?。ㄈ绻试S的話）以及在不退出系統(tǒng)的情況下從錯(cuò)誤狀態(tài)中恢復(fù)；

　　為所有輸入的動(dòng)作提供幫助；

　　消除冗余輸入?？赡艿脑捥峁┠J(rèn)值、絕不要讓用戶提供程序中可以自

　　動(dòng)獲取或計(jì)算出來(lái)的信息。

　　⑨合理性原則

　　屏幕對(duì)角線相交的位置是用戶直視的地方，正上方四分之一處為易吸引

　　用戶注意力的位置，在放置窗體時(shí)要注意利用這兩個(gè)位置。

　?、饷烙^與協(xié)調(diào)性原則

　　界面應(yīng)該大小適合美學(xué)觀點(diǎn)，感覺(jué)協(xié)調(diào)舒適，能在有效的范圍內(nèi)吸引用戶的注意力。

　　長(zhǎng)寬接近黃金點(diǎn)比例，切忌長(zhǎng)寬比例失調(diào)、或?qū)挾瘸^(guò)長(zhǎng)度。

　　布局要合理,不宜過(guò)于密集，也不能過(guò)于空曠，合理的利用空間。

　　按鈕大小基本相近，忌用太長(zhǎng)的名稱，免得占用過(guò)多的界面位置。

　　按鈕的大小要與界面的大小和空間要協(xié)調(diào)。

　　避免空曠的界面上放置很大的按鈕。

　　放置完控件后界面不應(yīng)有很大的空缺位置。

　　字體的大小要與界面的大小比例協(xié)調(diào), 通常使用的字體中宋體9-12較為美觀，很少使用超過(guò)12號(hào)的字體。

　　前景與背景色搭配合理協(xié)調(diào)，反差不宜太大。常用色考慮使用Windows界面色調(diào)。

　　如果使用其他顏色，主色要柔和，具有親和力，堅(jiān)決杜絕刺目的顏色。

　　大型系統(tǒng)常用的主色有“#E1E1E1”、“#EFEFEF”、“#C0C0C0”等。

　　界面風(fēng)格要保持一致，字的大小、顏色、字體要相同，除非是需要藝術(shù)處理或有特殊要求的地方。

　　如果窗體支持最小化和最大化或放大時(shí)，窗體上的控件也要隨著窗體而縮放；切忌只放大窗體而忽略控件的縮放。

　　通常父窗體支持縮放時(shí)，子窗體沒(méi)有必要縮放。

　　如果能給用戶提供自定義界面風(fēng)格則更好，由用戶自己選擇顏色、字體等。

　　關(guān)于webui設(shè)計(jì)規(guī)范的內(nèi)容暫且就為大家介紹到這里，在學(xué)習(xí)到新的知識(shí)之后，我們一定要善于實(shí)踐，這樣才能更快進(jìn)步。如果各位對(duì)相關(guān)內(nèi)容感興趣，可以長(zhǎng)期關(guān)注faceui。