在設計一個web界面時，我們應當遵循各種規范與原則，只有在這樣的框架下，設計出足夠吸引人的作品，我們的產品才會久盛不衰。那么下面faceui就為大家帶來webui設計規范及設計應遵循的基本原則介紹，希望能夠對你有所啟發。

　　webui規范介紹

　　網頁視覺規范目的

　　適用于WEB產品線的人機交互界面的設計，貫穿于以用戶為中心的設計指導方向。根據WEB產品的特點制定出的一套規范，以達到提升用戶體驗，控制產品設計質量，提高設計效率的目的。

　　視覺規范的對象

　　適合界面設計師、用戶體驗設計師、前臺設計工程師、發布支持人員、運營編輯人員等

　　規范的含義

　　1．【統一識別】規范能使頁面相同屬性單元統一識別，防止混亂，甚至出現嚴重錯誤，避免用戶在瀏覽時理解困難。

　　2．【節約資源】除了門戶網站、活動推廣等個性頁面外，相對于后臺系統、物聯網系統、數據統計系統、等界面設計，使用規范標準能極大的減少設計時間。

　　3.【重復利用】相同單元屬性，頁面新建時可以執行此標準重復使用，減少無關信息，就是減少對主題信息傳達干擾，利用閱讀與信息傳遞。

　　UI基本設計標準

　　一、尺寸

　　畫布建立尺寸寬度：1920px

　　分辨率：72像素/尺寸

　　顏色模式：RGB

　　網頁內容安全寬度：≤1200px（只適用于門戶網站）

　　首屏內容建議高度：800px（只適用于門戶網站）

　　二、字體（web）

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

　　消除鋸齒的方式為：Windows LCD

　　建議大小：建議使用16號+14號+12號字體的混合搭配（具體項目可根據實際情況靈活調整）

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

webui設計規范（圖片來自網絡）

　　應該遵循的基本原則

　　①顯示信息一致性的原則

　　無論是控件使用，提示信息措辭，還是顏色、窗口布局風格，遵循統一的標準，做到真正的一致。界面直觀、對用戶透明：用戶接觸軟件后對界面上對應的功能一目了然、不需要多少培訓就可以方便使用應用系統。

　　這樣得到的好處：

　　用戶使用起來能夠建立起精確的心里模型，使用熟練了一個系統界面后，切換到另外一個系統界面能夠很輕松的推測出各種功能。

　　降低培訓、支持成本，支持人員不用費力逐個指導。

　　給用戶統一感覺，不覺得混亂，心情愉快，支持度增加。

　　②以用戶為主導原則

　　明確用戶是所有系統處理的核心，不應該有應用程序來決定處理過程，所以用戶界面應當由用戶來控制應如何工作、如何響應，而不是由開發者按自己的意愿把操作流程強加給用戶。

　　③易用性原則

　　用戶不用查閱幫助就能知道該界面的功能并進行相關正確的操作。

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

　　完成同一功能或任務的元素放在集中位置，減少鼠標移動的距離。

　　按功能將界面劃分局域塊，用Frame框括起來,并要有功能說明或標題。

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

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

　　同一界面上的控件數最好不要超過10個，多于10個時可以考慮使用分頁界面顯示。

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

　　默認按鈕要支持Enter操作，即按Enter后自動執行默認按鈕對應操作。

　　可寫控件檢測到非法輸入后應給出說明并能自動獲得焦點。

　　復選框和選項框按選擇幾率的高底而先后排列。

　　復選框和選項框要有默認選項，并支持Tab選擇。

　　專業性強的軟件要使用相關的專業術語，通用性界面則提倡使用通用性詞眼。

　　④鼠標與鍵盤一致性原則

　　盡量遵循可不用鼠標的原則：應用中的功能只用鍵盤也應當可以完成。但是，許多鼠標的操作，如雙擊、拖動對象等，并不能簡單地用鍵盤來模擬即可實現，此類操作可適當增加操作按鈕。

　　⑤系統響應時間原則

　　系統響應時間應該適中，響應時間過長，用戶就會感到不安和沮喪，而響應時間過快也會影響到用戶的操作節奏，并可能導致錯誤。因此在系統響應時間上堅持如下原則：

　　0-5秒鼠標顯示成為沙漏；

　　5秒以上顯示處理窗口，或顯示進度條；

　　一個長時間的處理完成時應給予完成警告信息。

　　⑥出錯信息和警告原則

　　出錯信息和警告是指出現問題時系統給出的壞消息，對于出錯信息和警告應該遵循以下原則：

　　信息以用戶可以理解的術語描述；

　　信息簡明扼要，指出出錯原因并提供解決辦法提示。

webui設計規范（圖片來自網絡）

　　⑦信息顯示原則

　　信息顯示遵循以下原則：

　　只顯示與當前用戶語境環境有關的信息；

　　不要用數據將用戶包圍，使用便于用戶迅速吸取信息的方式表現信息；

　　使用一致的標記、標準縮寫和顏色，顯示信息的含義應該非常明確，用戶

　　不必再參考其它信息源；

　　產生有意義的出錯信息；

　　使用縮進和文本來輔助理解；

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

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

　　⑧數據輸入原則

　　數據輸入遵循以下原則：

　　盡量減少用戶輸入動作的數量；

　　維護信息顯示和數據輸入的一致性；

　　交互應該是靈活的，對鍵盤和鼠標輸入的靈活性提供支持；

　　在當前動作的語境中使不合適的命令不起作用；

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

　　（如果允許的話）以及在不退出系統的情況下從錯誤狀態中恢復；

　　為所有輸入的動作提供幫助；

　　消除冗余輸入。可能的話提供默認值、絕不要讓用戶提供程序中可以自

　　動獲取或計算出來的信息。

　　⑨合理性原則

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

　　用戶注意力的位置，在放置窗體時要注意利用這兩個位置。

　　⑩美觀與協調性原則

　　界面應該大小適合美學觀點，感覺協調舒適，能在有效的范圍內吸引用戶的注意力。

　　長寬接近黃金點比例，切忌長寬比例失調、或寬度超過長度。

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

　　按鈕大小基本相近，忌用太長的名稱，免得占用過多的界面位置。

　　按鈕的大小要與界面的大小和空間要協調。

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

　　放置完控件后界面不應有很大的空缺位置。

　　字體的大小要與界面的大小比例協調, 通常使用的字體中宋體9-12較為美觀，很少使用超過12號的字體。

　　前景與背景色搭配合理協調，反差不宜太大。常用色考慮使用Windows界面色調。

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

　　大型系統常用的主色有“#E1E1E1”、“#EFEFEF”、“#C0C0C0”等。

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

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

　　通常父窗體支持縮放時，子窗體沒有必要縮放。

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

　　關于webui設計規范的內容暫且就為大家介紹到這里，在學習到新的知識之后，我們一定要善于實踐，這樣才能更快進步。如果各位對相關內容感興趣，可以長期關注faceui。