UI界面設(shè)計(jì) 課件 重大 4.4網(wǎng)頁(yè)導(dǎo)航、4.5網(wǎng)頁(yè)版式

UI界面設(shè)計(jì)USERINTERFACE網(wǎng)頁(yè)導(dǎo)航WEBDESIGN第一部分網(wǎng)頁(yè)界面設(shè)計(jì)7

網(wǎng)頁(yè)的版式設(shè)計(jì)

在有限的屏幕空間上將多媒體元素進(jìn)行有機(jī)組合，進(jìn)行一種視覺的關(guān)

聯(lián)和合理配置,引導(dǎo)人們獲得最佳視覺效果，從而完成網(wǎng)站信息的快速有效地傳遞。網(wǎng)頁(yè)版式網(wǎng)頁(yè)版式AB傳統(tǒng)平面形式美法則網(wǎng)頁(yè)版面編排有自身的獨(dú)特性菜單的形式

頁(yè)面分欄網(wǎng)頁(yè)版面編排的獨(dú)特性常見菜單布局方式：A、橫向菜單B、縱向菜單C、創(chuàng)意型1.橫向菜單網(wǎng)頁(yè)形象欄主體部分版權(quán)信息2.縱向菜單網(wǎng)頁(yè)3.創(chuàng)意型菜單網(wǎng)頁(yè)創(chuàng)意型菜單通常在用在和藝術(shù)、個(gè)人等具有獨(dú)特設(shè)計(jì)需求的網(wǎng)站界面設(shè)計(jì)上產(chǎn)生互動(dòng)其余紙片彈開標(biāo)志與形象欄形象欄：是指?jìng)鹘y(tǒng)網(wǎng)頁(yè)頁(yè)面上方設(shè)置的展示網(wǎng)站主題形象的區(qū)域標(biāo)志與形象欄形象欄目和背景聯(lián)結(jié)為一體，給人輕松開闊的感覺標(biāo)志與形象欄形象欄是信息層級(jí)關(guān)系中的第一信息，所以所處位置也是視覺上重要位置，并且形象欄所占面積較大。標(biāo)志與形象欄形象欄做通欄設(shè)計(jì)標(biāo)志與形象欄形象欄和頁(yè)面融為一體標(biāo)志與形象欄形象欄做異形設(shè)計(jì)標(biāo)志與形象欄標(biāo)志與形象欄標(biāo)志與形象欄標(biāo)志位置：一般將標(biāo)志放置于頁(yè)面左上角標(biāo)志與形象欄標(biāo)志是VI系統(tǒng)中重要核心部分標(biāo)志與形象欄標(biāo)志的風(fēng)格和色彩規(guī)定了整個(gè)品牌形象和網(wǎng)頁(yè)形象的具體狀態(tài)標(biāo)志與形象欄整個(gè)網(wǎng)站的風(fēng)格和標(biāo)志風(fēng)格保持統(tǒng)一，同時(shí)標(biāo)志色彩組要分主色和輔助色彩二者保持一致。標(biāo)志與形象欄標(biāo)志與形象欄THANK

YOU!謝謝UI界面設(shè)計(jì)USERINTERFACE網(wǎng)頁(yè)版式WEBDESIGN第一部分網(wǎng)頁(yè)界面設(shè)計(jì)7網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)1.創(chuàng)意2.視覺流程3.網(wǎng)頁(yè)版式4.標(biāo)志與形象欄5.色彩6.文字7.網(wǎng)頁(yè)圖標(biāo)

網(wǎng)頁(yè)的版式設(shè)計(jì)

在有限的屏幕空間上將多媒體元素進(jìn)行有機(jī)組合，進(jìn)行一種視覺的關(guān)

聯(lián)和合理配置,引導(dǎo)人們獲得最佳視覺效果，從而完成網(wǎng)站信息的快速有效地傳遞。網(wǎng)頁(yè)版式網(wǎng)頁(yè)版式AB傳統(tǒng)平面形式美法則網(wǎng)頁(yè)版面編排有自身的獨(dú)特性菜單的形式

頁(yè)面分欄網(wǎng)頁(yè)版面編排的獨(dú)特性常見頁(yè)面分欄方式：2欄：常用于內(nèi)容頁(yè)面3欄：常用于傳統(tǒng)的首頁(yè)4欄：常用于信息內(nèi)容較多的首頁(yè)四川美院首頁(yè)——3欄紐約時(shí)報(bào)首頁(yè)——4欄具體運(yùn)用那種結(jié)構(gòu)分欄，根據(jù)頁(yè)面信息和主題風(fēng)格而定。然而，都要注意結(jié)構(gòu)清晰，讓瀏覽者進(jìn)入頁(yè)面后可以在最短的時(shí)間明白頁(yè)面?zhèn)鬟_(dá)的信息。內(nèi)容頁(yè)——2欄網(wǎng)頁(yè)左邊的信息導(dǎo)航不變，點(diǎn)擊不同的內(nèi)容頁(yè)，右邊的內(nèi)容展示欄會(huì)產(chǎn)生變化。網(wǎng)頁(yè)版式根據(jù)表格————排版根據(jù)需求————排版根據(jù)尺寸————排版電腦顯示：1280px等

網(wǎng)頁(yè)尺寸990px~單屏630px頁(yè)面的寬度和高度都以像素為單位21級(jí)同學(xué)大廣賽官網(wǎng)改版作品AB文字的藝術(shù)化處理：

一般指文字的字體、字號(hào)、粗細(xì)、顏色等規(guī)范化、格式化的處理方式；

則是指在符合網(wǎng)站風(fēng)格設(shè)置的基礎(chǔ)上，將文字進(jìn)行圖形/圖像化、風(fēng)格化的設(shè)計(jì)，使文字更加具有個(gè)性特征。大于16px用圖片文字的格式化處理：文字的格式化處理字體：宋體、黑體A字號(hào)：12PXB行距C正文文字顏色DMenu導(dǎo)航文字14—18px;正文文字12px(或9pt)或14px注意視覺上的橫成行，并且保持行距的一致。和頁(yè)面風(fēng)格一致，多為黑色或深灰色，要注意區(qū)別于背景色。正文使用了宋體，欄目標(biāo)題使用了黑體。網(wǎng)頁(yè)文字正文大小12px，也就是12像素，約9pt。漢字的基本字體字體是文字的風(fēng)格款式，不同的字體傳達(dá)出不同的性格特征。字體選用的原則:字體風(fēng)格與版式的整體風(fēng)格及主題內(nèi)容相一致。

宋體、黑體筆畫分述字號(hào)7px8px9px10px12px18px20px24px28px32px66px字號(hào)、行距、字距、段落距；文字的格式化處理正文使用了宋體，欄目標(biāo)題使用了黑體。網(wǎng)頁(yè)文字正文大小12px，也就是12像素，約9pt。藝術(shù)類網(wǎng)站首屏排版設(shè)計(jì)粗體文本利用超大粗體設(shè)計(jì)突出頁(yè)面內(nèi)容，直觀時(shí)尚。其獨(dú)特的文本字體，也極具吸引力。恰到好處的網(wǎng)頁(yè)配色，也