UI界面設(shè)計 課件 重大 第四部分 網(wǎng)頁界面設(shè)計

UI界面設(shè)計USERINTERFACE網(wǎng)頁規(guī)范WEBDESIGN第一部分網(wǎng)頁界面設(shè)計11網(wǎng)頁設(shè)計基礎(chǔ)1.創(chuàng)意2.視覺流程清晰3.網(wǎng)頁版式4.標(biāo)志與形象欄5.色彩6.文字7.網(wǎng)頁圖標(biāo)畫畫網(wǎng)頁的特點交互性時效性多媒體功能性網(wǎng)頁的特點交互性時效性多媒體功能性網(wǎng)絡(luò)媒介的最大的獨特性就是在于其交互性。用戶可以選擇自己所需要的信息，并通過網(wǎng)頁參加討論組、聊天或者進(jìn)行電子商務(wù)活動等等。時效性是信息社會對信息傳達(dá)的最基本的要求。網(wǎng)頁最大的資源優(yōu)勢之一就是它的多媒體功能。AB網(wǎng)頁色彩和分辨率

一般指網(wǎng)頁的內(nèi)容區(qū)域的寬度固定；RGB72/每英寸像素1200PX

定寬：網(wǎng)頁尺寸等規(guī)范定寬模式像素客戶端顯示器局限性字體規(guī)范網(wǎng)頁色彩和分辨率色彩模式分辨率的設(shè)置WEB設(shè)計師要不要懂技術(shù)？廢話，當(dāng)然要?。〔蝗辉趺窗鸦孟胱兂涩F(xiàn)實？在實際產(chǎn)出之前設(shè)計師做的都是“美美的幻想”，還有可能不那么美，或者根本無法實現(xiàn)！舉例：建筑師除了畫圖外，需要知道蓋房子每個階段的建造方式。要理解各種材料特性和規(guī)格。需要熟悉當(dāng)?shù)丨h(huán)境的限制。設(shè)計——實現(xiàn)HTML+CSS網(wǎng)頁的組成部分1.頁面跳轉(zhuǎn)畫面（loading頁面）2.標(biāo)志和banner3.導(dǎo)航菜單

4.面包屑5.圖標(biāo)6.版權(quán)信息7.友情鏈接1.頁面跳轉(zhuǎn)畫面（loading頁面）

頁面跳轉(zhuǎn)畫面也叫做loading頁面、加載頁面，是在主頁面之前進(jìn)入的頁面。部分網(wǎng)站首頁數(shù)據(jù)量大，為了避免斷斷續(xù)續(xù)的加載首頁數(shù)據(jù)，運用loading頁面以實現(xiàn)完整的呈現(xiàn)首頁效果。中國美術(shù)學(xué)院網(wǎng)站/2.標(biāo)志和banner清華大學(xué)美術(shù)學(xué)院首頁3.導(dǎo)航菜單

導(dǎo)航菜單也稱為導(dǎo)航條，導(dǎo)航條是網(wǎng)頁設(shè)計中不可缺少的部分，導(dǎo)航條是一種超連接按紐，點擊后會鏈接到下一級頁面。3.導(dǎo)航菜單4、面包屑：你現(xiàn)在在哪里？

面包屑導(dǎo)航(BreadcrumbNavigation)這個概念來自童話故事"漢賽爾和格萊特"，當(dāng)漢賽爾和格萊特穿過森林時，不小心迷路了，但是他們發(fā)現(xiàn)在沿途走過的地方都撒下了面包屑，讓這些面包屑來幫助他們找到回家的路。所以，面包屑導(dǎo)航的作用是告訴訪問者他們目前在網(wǎng)站中的位置以及如何返回。主頁>欄目頁>文章頁面5、圖標(biāo)具有明確指代含義的圖形符號，具有高度濃縮并快捷傳達(dá)信息、便于記憶的特性。6、版權(quán)信息網(wǎng)站的版權(quán)信息一般處于網(wǎng)頁的正下方頁腳的位置。7、友情鏈接友情鏈接是在自己的網(wǎng)站上放置對方網(wǎng)站的LOGO圖片或文字的網(wǎng)站名稱，并設(shè)置對方網(wǎng)站的超鏈接。點擊后，切換或彈出另一個新的頁面，方便用戶發(fā)現(xiàn)相關(guān)重要網(wǎng)站。THANK

YOU!謝謝謝謝UI界面設(shè)計USERINTERFACE網(wǎng)頁設(shè)計策劃WEBDESIGN第一部分網(wǎng)頁界面設(shè)計1如何策劃一個網(wǎng)站1.市場調(diào)研企業(yè)的市場調(diào)查、分析定位同行業(yè)網(wǎng)站調(diào)查調(diào)查同一行業(yè)/類型網(wǎng)站，其他網(wǎng)站優(yōu)點與缺點，我怎樣獨樹一幟

2.網(wǎng)站設(shè)計方案

1）網(wǎng)站語言

2）網(wǎng)頁風(fēng)格3）網(wǎng)站結(jié)構(gòu)設(shè)計4）首頁內(nèi)容安排企業(yè)的市場調(diào)查、分析定位網(wǎng)站建設(shè)方案網(wǎng)站結(jié)構(gòu)設(shè)計AB目錄結(jié)構(gòu)鏈接結(jié)構(gòu)

網(wǎng)站組織和網(wǎng)站目錄設(shè)置情況，主要呈現(xiàn)為首頁的菜單。任何網(wǎng)站都有一定的目錄結(jié)構(gòu)，大型網(wǎng)站的目錄數(shù)量多、層次深、關(guān)系復(fù)雜。網(wǎng)站的目錄結(jié)構(gòu)需要經(jīng)過周密規(guī)劃，根據(jù)企業(yè)和瀏覽者的需要來設(shè)置各級目錄。

各頁面之間的相互鏈接的拓?fù)浣Y(jié)構(gòu)，它是建立在目錄結(jié)構(gòu)基礎(chǔ)之上。形象的說，每個頁面都可以看作是一個節(jié)點，鏈接則是兩個節(jié)點之間的連線。一個點可以和一個點鏈接，也可以和多個點鏈接。鏈接結(jié)構(gòu)有兩種基本方式樹狀鏈接結(jié)構(gòu)網(wǎng)狀鏈接結(jié)構(gòu)站點地圖學(xué)習(xí)實踐一、手繪臨摹優(yōu)秀網(wǎng)頁界面：收集優(yōu)秀網(wǎng)站8個以上手繪臨摹，評論其網(wǎng)站性質(zhì)、目錄結(jié)構(gòu)、風(fēng)格、色彩、圖標(biāo)的運用、你最贊賞的地方……二、學(xué)習(xí)計劃的擬定三、網(wǎng)站策劃案：

選擇一企業(yè)或品牌進(jìn)行網(wǎng)站建設(shè)，并進(jìn)行市場調(diào)查（企業(yè)和相關(guān)企業(yè)資料收集），撰寫網(wǎng)站策劃案World。THANK

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

運用了一個展開的包裝盒作為頁面創(chuàng)意源點。各部分設(shè)計元素巧妙地放置于包裝盒的各個部分。個人網(wǎng)站FLASH制作的網(wǎng)站/產(chǎn)生互動海下救援工作網(wǎng)站大海的形象主題相貼切形象欄標(biāo)志和導(dǎo)航菜單瀏覽者可以根據(jù)自己的需要選擇年、月、日，鏈接到下一級頁面。THANK

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

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

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

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

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

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

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

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

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

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

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

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

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

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

粗的文字>細(xì)的文字有色彩>無彩色THANK

YOU!謝謝UI界面設(shè)計USERINTERFACE界面視覺流程WEBDESIGN第一部分網(wǎng)頁界面設(shè)計6網(wǎng)頁設(shè)計基礎(chǔ)1.創(chuàng)意2.視覺流程3.網(wǎng)頁版式4.標(biāo)志與形象欄5.色彩6.文字7.網(wǎng)頁圖標(biāo)什么是視覺流程？引導(dǎo)使用者的眼睛,首先看到其次看到再其次看到......————————————————————————視覺中心次重點再其次信息點......視覺習(xí)慣:頁面上部比下部更引人注目視覺習(xí)慣:頁面往往是左邊比右邊更引人注目信息元素的位置Position視覺流程賞析/視覺流程清晰1）首先明確的信息層級關(guān)系2）然后遵循視覺規(guī)律，將信息進(jìn)行編排設(shè)計視覺流程清晰如何引導(dǎo)使用者的眼睛：信息元素的位置Position圖片文字的吸引度Colour色彩Colour對比：大小粗細(xì)…設(shè)計/非設(shè)計視覺流程清晰圖片文字的吸引度

研究發(fā)現(xiàn)人們會花極少的時間來閱讀大部分頁面，大部分情況下，用戶通過掃描來尋找注意力的吸引點。其中圖標(biāo)和圖像比文字更具有吸引力。視覺的吸引度之圖片和文字圖標(biāo)圖片>文字視覺流程清晰色彩的吸引度Colour有顏色的比無色的設(shè)計元素更具吸引力。色彩Colour視覺流程清晰強對比形成吸引力對比越強，越能吸引注意力。對比可以是色彩、大小、形狀、曲直、明暗的對比。大小Size上，大圖比小圖更具吸引力；大字比小字更吸引人的注意力；對比Contras