旗下產(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ī)范總結(jié)

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

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

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

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

  網(wǎng)頁UI設(shè)計(jì)規(guī)范
 

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

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

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

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

  2.字體規(guī)范:
 

  中文常用字體:宋體-字體樣式(無)、微軟雅黑-字體樣式(Windows LCD)、蘋方(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)段落字體格式:

 

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

 

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

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

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

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

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

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

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

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

  (2)主視覺區(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)頁的顏色
 

  (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)符號(hào)不能在一行的第一個(gè),不要一個(gè)文字為獨(dú)立的一行
 

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

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

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

  (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)圖片距離文字不要過近
 

  常見的網(wǎng)頁布局形式
 

  布局的原則
 

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

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

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

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

  (4)均衡:網(wǎng)頁的布局設(shè)計(jì)要有序的進(jìn)行排列,并且保持頁面的穩(wěn)定性,適當(dāng)?shù)丶訌?qiáng)頁面的使用性。
 

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

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

  1.一欄式
 

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

 

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

 

  2.兩欄式
 

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

  (1)左窄右寬
 

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

 

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

 

  (2)左寬右窄
 

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

 

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

 

  (3)左右均等
 

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

 

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

 

  3.三欄式
 

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

 

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

 

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



 

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

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

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

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

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

網(wǎng)站地圖