旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實(shí)習(xí)/?A計(jì)劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 熱門文章 > UI設(shè)計(jì) > 月薪過萬的UI設(shè)計(jì)都知道的網(wǎng)頁設(shè)計(jì)規(guī)范

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

時(shí)間:2020-12-02來源:m.lb577.com點(diǎn)擊量:作者:Gella
時(shí)間:2020-12-02點(diǎn)擊量:作者:Gella

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

 

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

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

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

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

  2. 字體規(guī)范:
 

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

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

  (1)中文字常用字號:
 

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

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

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

  輔助信息:12px、14px;
 

  (2)英文字常用字號:
 

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

  (3)段落字體格式:
 

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

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

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

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

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

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

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

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

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

  (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)公式:隨意選擇四個(gè)顏色,調(diào)整四個(gè)顏色的明度和直線色相;
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

預(yù)約申請免費(fèi)試聽課

填寫下面表單即可預(yù)約申請免費(fèi)試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費(fèi)! 怕學(xué)不會?助教全程陪讀,隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

?2007-2021/北京漫動者教育科技有限公司版權(quán)所有
備案號:京ICP備12034770號

?2007-2022/ m.lb577.com 北京漫動者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號

網(wǎng)站地圖