ui網(wǎng)頁設(shè)計規(guī)范有哪些？網(wǎng)頁ui設(shè)計注意事項有哪些？

　　現(xiàn)在互聯(lián)網(wǎng)行業(yè)是非常發(fā)達的，互聯(lián)網(wǎng)行業(yè)帶動了很多企業(yè)的發(fā)展，讓很多人找到了工作，如果你設(shè)計比較優(yōu)秀可以參加ui網(wǎng)頁設(shè)計的工作，下面faceui的小編就給大家說說ui網(wǎng)頁設(shè)計規(guī)范，希望對你有幫助。

　　ui網(wǎng)頁設(shè)計規(guī)范有哪些？

　　1.網(wǎng)頁規(guī)范：

　　網(wǎng)頁寬度為1920 高度不限，有效可視區(qū)：950px~1200px寬度，具體尺寸根據(jù)項目，客戶要求以及用戶群決定。

　　首屏高約為700-750PX 主體內(nèi)容區(qū)域1200。

　　文檔建立：文件寬度為1920PX 高度不限，RGB顏色模式， 分辨率72。

　　2.字體規(guī)范：

　　中文常用字體：宋體-字體樣式(無)、微軟雅黑-字體樣式(Windows LCD)、蘋方(MAC)。

　　英文常用字體：Times NewRoman、Arial、sans。

　　(1)中文字常用字號：

　　導航文字大小：14px、16px、18px、20px;。

　　正文內(nèi)容：12px、14px;。

　　標題：22px、24px、26px、28px、30px;。

　　輔助信息：12px、14px。

　　(2)英文字常用字號：

　　標題和內(nèi)容文字10-16px;中英文結(jié)合最小12px;全英文網(wǎng)站最小10px(比如底部信息)。

　　3.網(wǎng)頁頁面等級

　　(1)首頁：進入網(wǎng)頁中看到的第一個頁面(LOGO、公司名稱、導航、banner、新聞、相關(guān)信息、底部信息、banner一般是5個；

　　注意：網(wǎng)站的首頁只能有一個。

ui網(wǎng)頁設(shè)計規(guī)范（圖片來自網(wǎng)絡）

　　(2)二級頁面：從首頁點擊進入之后的頁面叫做二級頁面；

　　(3)三級頁面：從二級頁面點擊進入的頁面；

　　4.網(wǎng)頁常見板塊劃分

　　(1)頭部區(qū)域-----top或header；

　　Logo、主導航、搜索、注冊、登錄、版本等信息。

　　(2)主視覺區(qū)----banner；

　　展示公司品牌形象、新品宣傳、主題活動等輪播大圖。

　　(3)主要內(nèi)容區(qū)---main；

　　新聞動態(tài)、產(chǎn)品與服務、公司介紹等。

　　(4)底部信息區(qū)---footer；

　　網(wǎng)站地圖、聯(lián)系我們、版權(quán)信息、ICP備案號等信息。

　　5.網(wǎng)頁的顏色

　　(1)來自于LOGO的顏色；

　　(2)來自于環(huán)境的顏色；

　　(4)來自于產(chǎn)品的顏色；

　　(5)公式：隨意選擇四個顏色，調(diào)整四個顏色的明度和直線色相；

　　(6)選擇一個符合你產(chǎn)品的任意顏色圖片，然后在這個圖片中提出出來四中顏色，來作為網(wǎng)頁的主色調(diào) (服裝，飾品、化妝品類居多)。

　　6.網(wǎng)頁設(shè)計需注意的問題:

　　(1)高清大圖，圖片不能有水印；

　　(2)有圖片的位置最好配有文字說明不要大篇幅的圖片擺放；

　　(3)文字排版，標點符號不能在一行的第一個，不要一個文字為獨立的一行；

　　(4)如果色塊中有文字，文字必須在色塊的中心，不能上或者下留有太多空白空間；

　　(5)如果箭頭朝下必須有下拉菜單，如果下拉菜單是合起的狀態(tài)，箭頭朝右；

　　(6)banner不能是現(xiàn)成的圖片，需要進行合成和設(shè)計，也需要有文字的極差關(guān)系和對比；

　　(7)產(chǎn)品分類中必須有不同的產(chǎn)品體現(xiàn)；

　　(8)在每一個板塊中都必須體現(xiàn)明顯的連接；

　　(9)在網(wǎng)頁設(shè)計中不要有重復圖片，每個圖片必須有一個部分是完整的；

　　(10)圖片素材不要直接用設(shè)計好的圖片；

　　(11)在板塊中不要有純圖片的設(shè)計，一定有文字解釋，有鏈接；

　　(12)一個版塊內(nèi)的圖片要選擇同一種類型；

　　(13)圖片距離文字不要過近。

　　網(wǎng)頁ui設(shè)計注意事項

　　一、布局要簡潔

　　這點和網(wǎng)頁設(shè)計的理念比較接近，無論是考慮到用戶的瀏覽體驗還是操作體驗，都應當盡量將整體的布局設(shè)計簡單化，讓用戶可以一目了然。

　　以左樹右表的結(jié)構(gòu)布局而言，左側(cè)的操作區(qū)域功能名稱要準確，層級不應太繁瑣，功能點要方便于用戶操作；右邊的信息展示區(qū)域更應當盡量將內(nèi)容充分展示，盡量避免層級過深，如果應特殊需求需要用戶做出跳進跳出的操作，那么應當考慮給予一些友情提示，別把用戶弄暈。

ui網(wǎng)頁設(shè)計規(guī)范（圖片來自網(wǎng)絡）

　　這里要強調(diào)一個地方，那就是頂部設(shè)計，盡可能的把高度縮小，不宜使用falsh動畫或其他特效，就靜態(tài)展示即可，這樣不影響系統(tǒng)的運行速度而且相對整體布局更加清爽。

　　二、色彩運用

　　網(wǎng)頁UI的色彩運用傾向于少而精，少代表了整體頁面的顏色使用，千萬不要做得花里胡哨；精代表了在配色的時候盡可能的協(xié)調(diào)，當然了，前提也是盡量用色越少越好。

　　這和網(wǎng)頁設(shè)計理念差不多，根據(jù)客戶LOGO或確定的主色調(diào)，再搭配一種、最多兩種色彩即可，一定要讓整體頁面看起來舒服。

　　三、圖片的使用

　　網(wǎng)頁UI中少用素材圖片，在某些信息展示中不得不用到實物圖那另當別論，就設(shè)計而言，不能說圖片越漂亮就用得越多，這點和網(wǎng)頁設(shè)計不同，網(wǎng)頁UI不需要大氣精美的banner。但是整體設(shè)計也不能缺少圖片，這里最好使用一些小圖標，配在功能區(qū)的文字前面，或者是一些提示性信息的前面進行點綴，可以有效的提升頁面的生動感。

　　四、注意實用性

　　系統(tǒng)畢竟更多的是給人用的、是給人看到準確信息的，所以設(shè)計師在設(shè)計的時候一定要注重設(shè)計的實用性，這里筆者不建議將頁面作個性化處理，當然了，也要根據(jù)實際需求或面向的市場而定，但是大部分的時候盡量做到中規(guī)中矩、清楚明了就行了。 比如網(wǎng)頁中涉及到的一些比較好看的JS特效，那么在UI設(shè)計中就要判斷一下是否適合使用，如果該特效與信息展示之間產(chǎn)生了矛盾，則優(yōu)先考慮信息展示，寧可舍棄那些無謂的特效。還有一點，提升頁面美觀的flash動畫就不要放了吧，因為對于系統(tǒng)來說一點用都沒有。 BS架構(gòu)的系統(tǒng)最大優(yōu)勢就是用戶可以通過網(wǎng)絡并且不需要安裝任何客戶端文件即可訪問使用，因此這對于設(shè)計師來說就要掌握不一樣的設(shè)計理念，操作性強、頁面設(shè)計簡易、信息展示清楚這是基本原則。

　　UI的概念

　　首先，UI是指人與信息交互的媒介，它是信息產(chǎn)品的功能載體和典型特征。UI作為系統(tǒng)的可用形式而存在，比如以視覺為主體的界面，強調(diào)的是視覺元素的組織和呈現(xiàn)。這是物理表現(xiàn)層的設(shè)計，每一款產(chǎn)品或者交互形式都以這種形態(tài)出現(xiàn)，包括圖形、圖標(Icon)、色彩、文字設(shè)計等，用戶通過它們使用系統(tǒng)。在這一層面，UI可以理解為User Interface，即用戶界面，這是UI作為人機交互的基礎(chǔ)層面。

　　其次，UI是指信息的采集與反饋、輸入與輸出，這是基于界面而產(chǎn)生的人與產(chǎn)品之間的交互行為。在這一層面，UlbJ以理解為User Interaction，即用戶交互，這是界面產(chǎn)生和存在的意義所在。人與非物質(zhì)產(chǎn)品的交互更多依賴于程序的無形運作來實現(xiàn)，這種與界面匹配的內(nèi)部運行機制，需要通過界面對功能的隱喻和引導來完成。因此，UI不僅要有精美的視覺表現(xiàn)，也要有方便快捷的操作，以符合用戶的認知和行為習慣。

　　最后，UI的高級形態(tài)可以理解為User Invisible。對用戶而言，在這一層面UI是“不可見的”，這并非是指視覺上的不可見，而是讓用戶在界面之下與系統(tǒng)自然地交互，沉浸在他們喜歡的內(nèi)容和操作中，忘記了界面的存在（糟糕的設(shè)計則迫使用戶注意界面，而非內(nèi)容）。這需要更多地研究用戶心理和用戶行為，從用戶的角度來進行界面結(jié)構(gòu)、行為、視覺等層面的設(shè)計。大數(shù)據(jù)的背景下，在信息空間中，交互會變得更加自由、自然并無處不在，科學技術(shù)、設(shè)計理念及多通道界面的發(fā)展，直至普適計算界面的出現(xiàn)，用戶體驗到的交互是下意識甚至是無意識的。

　　用戶研究工程師一般是心理學人文學背景比較合適。

　　綜上所述UI設(shè)計師就是：軟件圖形設(shè)計師、交互設(shè)計師、用戶研究工程師。

　　ui網(wǎng)頁設(shè)計規(guī)范有哪些？網(wǎng)頁ui設(shè)計注意事項有哪些？讀完上面相信大家對ui網(wǎng)頁設(shè)計有了一定的了解了，ui網(wǎng)頁設(shè)計的成果直接關(guān)系到了網(wǎng)頁瀏覽量的多少，大家可以讓faceui幫助你完成ui網(wǎng)頁設(shè)計。