月薪過(guò)萬(wàn)的UI設(shè)計(jì)都知道的網(wǎng)頁(yè)設(shè)計(jì)規(guī)范

　　UI設(shè)計(jì)在近幾年中可謂是火的一塌糊涂，很多人學(xué)UI設(shè)計(jì)的原因是新最高，還有一部分人是因?yàn)闊釔?ài)。不過(guò)UI設(shè)計(jì)的薪資確實(shí)是設(shè)計(jì)界中最高的。但是你連設(shè)計(jì)規(guī)范都不了解怎么可以拿高薪呢?今天AAA教育周老師來(lái)和大家聊聊網(wǎng)頁(yè)設(shè)計(jì)規(guī)范。

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

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

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

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

　　2. 字體規(guī)范：
 

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

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

　　(1)中文字常用字號(hào)：
 

　　導(dǎo)航文字大?。?4px、16px、18px、20px;
 

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

　　標(biāo)題：22px、24px、26px、28px、30px;
 

　　輔助信息：12px、14px;
 

　　(2)英文字常用字號(hào)：
 

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

　　(3)段落字體格式：
 

　　3. 網(wǎng)頁(yè)頁(yè)面等級(jí)
 

　　(1)首頁(yè)：進(jìn)入網(wǎng)頁(yè)中看到的第一個(gè)頁(yè)面(LOGO、公司名稱(chēng)、導(dǎo)航、banner、新聞、相關(guān)信息、底部信息、banner一般是5個(gè)。

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

　　(2)二級(jí)頁(yè)面：從首頁(yè)點(diǎn)擊進(jìn)入之后的頁(yè)面叫做二級(jí)頁(yè)面。
 

　　(3)三級(jí)頁(yè)面：從二級(jí)頁(yè)面點(diǎn)擊進(jìn)入的頁(yè)面。
 

　　4. 網(wǎng)頁(yè)常見(jiàn)板塊劃分
 

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

　　Logo、主導(dǎo)航、搜索、注冊(cè)、登錄、版本等信息...
 

　　(2)主視覺(jué)區(qū)----banner
 

　　展示公司品牌形象、新品宣傳、主題活動(dòng)等輪播大圖
 

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

　　新聞動(dòng)態(tài)、產(chǎn)品與服務(wù)、公司介紹等
 

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

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

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

　　(1)來(lái)自于LOGO的顏色;
 

　　(2)來(lái)自于環(huán)境的顏色;
 

　　(4)來(lái)自于產(chǎn)品的顏色;
 

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

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

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

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

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

　　(3)文字排版，標(biāo)點(diǎn)符號(hào)不能在一行的第一個(gè)，不要一個(gè)文字為獨(dú)立的一行;
 

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

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

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

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

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

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

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

　　(11)在板塊中不要有純圖片的設(shè)計(jì)，一定有文字解釋?zhuān)墟溄?
 

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

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