很多剛?cè)胄械腢I設(shè)計(jì)師開(kāi)始接觸網(wǎng)頁(yè)端UI設(shè)計(jì)的時(shí)候个曙，對(duì)于基礎(chǔ)的界面尺寸規(guī)范可能會(huì)有一定的模糊認(rèn)知，導(dǎo)致做出來(lái)的頁(yè)面往往會(huì)感覺(jué)不是那么和諧芹啥，卻也不知道怎么去完善和改進(jìn)臀脏。
對(duì)于大多數(shù)的剛?cè)胄姓邅?lái)說(shuō)，如果不是有天賦的那種設(shè)計(jì)師肤粱，了解常用的一些尺寸規(guī)范和方法弹囚，才能更好的形成自己的專(zhuān)業(yè)概念。今天我就帶大家了解一下UI設(shè)計(jì)中網(wǎng)頁(yè)的設(shè)計(jì)規(guī)范總結(jié)鸥鹉。
網(wǎng)頁(yè)UI設(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ū)域1200
文檔建立：文件寬度為1920PX 高度不限，RGB顏色模式， 分辨率72
2.字體規(guī)范：
中文常用字體：宋體-字體樣式(無(wú))肺樟、微軟雅黑-字體樣式(Windows LCD)檐春、蘋(píng)方(MAC)
英文常用字體：Times NewRoman么伯、Arial疟暖、sans
(1)中文字常用字號(hào)：
導(dǎo)航文字大刑锶帷：14px俐巴、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)墟溄?/p>
(12)一個(gè)版塊內(nèi)的圖片要選擇同一種類(lèi)型
(13)圖片距離文字不要過(guò)近
常見(jiàn)的網(wǎng)頁(yè)布局形式
布局的原則
網(wǎng)頁(yè)布局的原則包括：協(xié)調(diào)、一致扇雕、流動(dòng)拓售、均衡、強(qiáng)調(diào)等镶奉，另外在進(jìn)行網(wǎng)頁(yè)布局設(shè)計(jì)的時(shí)候崭放，需要考慮到網(wǎng)站頁(yè)面的醒目性鸽凶、創(chuàng)造性、造型性玻侥、可讀性、和明快性等因素;
(1)協(xié)調(diào)：將網(wǎng)站中的每一個(gè)構(gòu)成要素有效的結(jié)合或者聯(lián)系起來(lái)凑兰，給瀏覽著一個(gè)既美觀又實(shí)用的網(wǎng)頁(yè)界面。
(2)一致：網(wǎng)站整個(gè)頁(yè)面的構(gòu)成部分要保持統(tǒng)一的風(fēng)格姑食，使其在視覺(jué)上整齊波岛、一致音半。
(3)流動(dòng)：網(wǎng)頁(yè)布局的設(shè)計(jì)能夠讓瀏覽者憑著自己的感覺(jué)走，并且頁(yè)面的功能能夠根據(jù)瀏覽著的興趣連接到其感興趣的內(nèi)容上曹鸠。
(4)均衡：網(wǎng)頁(yè)的布局設(shè)計(jì)要有序的進(jìn)行排列，UI設(shè)計(jì)中網(wǎng)頁(yè)的設(shè)計(jì)規(guī)范總結(jié)https://www.aaa-cg.com.cn/ui/2771.html并且保持頁(yè)面的穩(wěn)定性宣旱，適當(dāng)?shù)丶訌?qiáng)頁(yè)面的使用性叛薯。
(5)強(qiáng)調(diào)：把頁(yè)面中想要突出展示的內(nèi)容在不影響整體設(shè)計(jì)的情況下笙纤，用色彩搭配或者留白的方式將其最大限度地展示出來(lái)。
不同類(lèi)型的網(wǎng)站省容、不同類(lèi)型的頁(yè)面往往有不同布局，常見(jiàn)的布局模式為：一欄式腥椒、兩欄式、三欄式;
1.一欄式
布局頁(yè)面結(jié)果簡(jiǎn)單洒放、視覺(jué)流程清晰，便于用戶(hù)快速定位往湿，但是由于排版方式的限制，只適用于信息量小领追，相對(duì)比較獨(dú)立的網(wǎng)站。通常會(huì)通過(guò)大幅精美圖片或者交互的動(dòng)畫(huà)效果來(lái)實(shí)現(xiàn)強(qiáng)烈的視覺(jué)沖擊效果棕孙，從而給用戶(hù)留下深刻的印象些膨，提升品牌效果蟀俊，吸引用戶(hù)進(jìn)一步瀏覽傀蓉。由于首頁(yè)信息展示量有限，一般需要在首頁(yè)中添加導(dǎo)航或者重要入口的鏈接等误甚。
2.兩欄式
兩欄式是最常見(jiàn)的布局方式之一谱净，相對(duì)于一欄式可以容納更多的內(nèi)容，但是兩欄式不具備一欄式布局的視覺(jué)沖擊壕探，一般可以將其細(xì)分為左窄右寬、左寬右窄李请、左右均等，通過(guò)不同的布局比例和位置會(huì)影響到用戶(hù)瀏覽的視線(xiàn)流和頁(yè)面的整體重點(diǎn)较幌。
(1)左窄右寬
左窄右寬的布局白翻，通常左邊是導(dǎo)航乍炉，右側(cè)是網(wǎng)頁(yè)的內(nèi)容滤馍。用戶(hù)的瀏覽習(xí)慣通常是從左到右、從上至下槐瑞，因此這類(lèi)布局的頁(yè)面更符合操作流程阁苞，能夠引導(dǎo)用戶(hù)通過(guò)導(dǎo)航查找內(nèi)容随珠，使操作更加具有可控性、適用于內(nèi)容豐富茸歧、導(dǎo)航分離清晰的網(wǎng)站显沈。
(2)左寬右窄
內(nèi)容在左側(cè)，導(dǎo)航在右側(cè)拉讯，這種結(jié)構(gòu)是突出內(nèi)容的主導(dǎo)位置，引導(dǎo)用戶(hù)把視覺(jué)焦點(diǎn)放在內(nèi)容上只锭，然后才是去引導(dǎo)關(guān)注更多的信息。比如搜索網(wǎng)站蜻展，采用左寬右窄邀摆，重點(diǎn)突出搜索的信息，在右側(cè)放次要信息和廣告栋盹，體現(xiàn)出信息的主次。
(3)左右均等
這種一般網(wǎng)頁(yè)左右兩側(cè)的比例相差比較小或者完全一致汉额，適用于兩邊的信息重要成都均等的情況榨汤，不體現(xiàn)內(nèi)容的主次闷愤。
3.三欄式
三欄式的布局方式對(duì)于內(nèi)容的排版更加緊湊，可以更加充分的運(yùn)用網(wǎng)站空間遭居，盡可能多的展示信息內(nèi)容，通常用于信息量非常豐富的網(wǎng)站俱萍，比如：門(mén)戶(hù)網(wǎng)站、電商網(wǎng)頁(yè)损谦，學(xué)習(xí)類(lèi)網(wǎng)站首頁(yè)岖免。
因此颅湘，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能栗精。如果您想了解更多信息闯参，請(qǐng)給我點(diǎn)個(gè)關(guān)注悲立，我之后還會(huì)發(fā)包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。
