UI設(shè)計中網(wǎng)頁的設(shè)計規(guī)范總結(jié)

　　很多剛?cè)胄械腢I設(shè)計師開始接觸網(wǎng)頁端UI設(shè)計的時候，對于基礎(chǔ)的界面尺寸規(guī)范可能會有一定的模糊認知，導致做出來的頁面往往會感覺不是那么和諧，卻也不知道怎么去完善和改進。
 

　　對于大多數(shù)的剛?cè)胄姓邅碚f，如果不是有天賦的那種設(shè)計師，了解常用的一些尺寸規(guī)范和方法，才能更好的形成自己的專業(yè)概念。今天AAA教育就帶大家了解一下UI設(shè)計中網(wǎng)頁的設(shè)計規(guī)范總結(jié)。
 

　　網(wǎng)頁UI設(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)中文字常用字號：
 

　　導航文字大?。?4px、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)段落字體格式：

 

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

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

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

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

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

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

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

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

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

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

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

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

　　(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)頁布局形式
 

　　布局的原則
 

　　網(wǎng)頁布局的原則包括：協(xié)調(diào)、一致、流動、均衡、強調(diào)等，另外在進行網(wǎng)頁布局設(shè)計的時候，需要考慮到網(wǎng)站頁面的醒目性、創(chuàng)造性、造型性、可讀性、和明快性等因素;
 

　　(1)協(xié)調(diào)：將網(wǎng)站中的每一個構(gòu)成要素有效的結(jié)合或者聯(lián)系起來，給瀏覽著一個既美觀又實用的網(wǎng)頁界面。
 

　　(2)一致：網(wǎng)站整個頁面的構(gòu)成部分要保持統(tǒng)一的風格，使其在視覺上整齊、一致。
 

　　(3)流動：網(wǎng)頁布局的設(shè)計能夠讓瀏覽者憑著自己的感覺走，并且頁面的功能能夠根據(jù)瀏覽著的興趣連接到其感興趣的內(nèi)容上。
 

　　(4)均衡：網(wǎng)頁的布局設(shè)計要有序的進行排列，并且保持頁面的穩(wěn)定性，適當?shù)丶訌婍撁娴氖褂眯浴?br />  

　　(5)強調(diào)：把頁面中想要突出展示的內(nèi)容在不影響整體設(shè)計的情況下，用色彩搭配或者留白的方式將其最大限度地展示出來。
 

　　不同類型的網(wǎng)站、不同類型的頁面往往有不同布局，常見的布局模式為：一欄式、兩欄式、三欄式;
 

　　1.一欄式
 

　　布局頁面結(jié)果簡單、視覺流程清晰，便于用戶快速定位，但是由于排版方式的限制，只適用于信息量小，相對比較獨立的網(wǎng)站。通常會通過大幅精美圖片或者交互的動畫效果來實現(xiàn)強烈的視覺沖擊效果，從而給用戶留下深刻的印象，提升品牌效果，吸引用戶進一步瀏覽。由于首頁信息展示量有限，一般需要在首頁中添加導航或者重要入口的鏈接等。

 

　　2.兩欄式
 

　　兩欄式是最常見的布局方式之一，相對于一欄式可以容納更多的內(nèi)容，但是兩欄式不具備一欄式布局的視覺沖擊，一般可以將其細分為左窄右寬、左寬右窄、左右均等，通過不同的布局比例和位置會影響到用戶瀏覽的視線流和頁面的整體重點。
 

　　(1)左窄右寬
 

　　左窄右寬的布局，通常左邊是導航，右側(cè)是網(wǎng)頁的內(nèi)容。用戶的瀏覽習慣通常是從左到右、從上至下，因此這類布局的頁面更符合操作流程，能夠引導用戶通過導航查找內(nèi)容，使操作更加具有可控性、適用于內(nèi)容豐富、導航分離清晰的網(wǎng)站。

 

　　(2)左寬右窄
 

　　內(nèi)容在左側(cè)，導航在右側(cè)，這種結(jié)構(gòu)是突出內(nèi)容的主導位置，引導用戶把視覺焦點放在內(nèi)容上，然后才是去引導關(guān)注更多的信息。比如搜索網(wǎng)站，采用左寬右窄，重點突出搜索的信息，在右側(cè)放次要信息和廣告，體現(xiàn)出信息的主次。

 

　　(3)左右均等
 

　　這種一般網(wǎng)頁左右兩側(cè)的比例相差比較小或者完全一致，適用于兩邊的信息重要成都均等的情況，不體現(xiàn)內(nèi)容的主次。

 

　　3.三欄式
 

　　三欄式的布局方式對于內(nèi)容的排版更加緊湊，可以更加充分的運用網(wǎng)站空間，盡可能多的展示信息內(nèi)容，通常用于信息量非常豐富的網(wǎng)站，比如：門戶網(wǎng)站、電商網(wǎng)頁，學習類網(wǎng)站首頁。

 

　　因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計師的工作相關(guān)的主要技能。如果您想了解更多信息，請訪問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。