《ui界面設(shè)計》課件項目4 網(wǎng)頁UI界面設(shè)計

UI界面設(shè)計USERINTERFACE項目4網(wǎng)頁UI界面設(shè)計什么是視覺流程？引導(dǎo)使用者的眼睛,首先看到其次看到再其次看到......————————————————————————視覺中心次重點再其次信息點......實訓(xùn)任務(wù)4.1網(wǎng)頁設(shè)計流程和規(guī)范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.市場調(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)容安排實訓(xùn)任務(wù)4.2網(wǎng)頁設(shè)計策劃企業(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。

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

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

聯(lián)和合理配置,引導(dǎo)人們獲得最佳視覺效果，從而完成網(wǎng)站信息的快速有效地傳遞。實訓(xùn)任務(wù)4.3網(wǎng)頁版式設(shè)計網(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)生互動其余紙片彈開網(wǎng)頁版面編排的獨特性常見頁面分欄方式：2欄：常用于內(nèi)容頁面3欄：常用于傳統(tǒng)的首頁4欄：常用于信息內(nèi)容較多的首頁四川美院首頁——3欄內(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網(wǎng)頁色彩和分辨率

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

定寬：網(wǎng)頁尺寸等規(guī)范實訓(xùn)任務(wù)4.4網(wǎng)頁設(shè)計規(guī)范定寬模式像素客戶端顯示器局限性字體規(guī)范網(wǎng)頁色彩和分辨率色彩模式分辨率的設(shè)置WEB設(shè)計師要不要懂技術(shù)？廢話，當(dāng)然要?。〔蝗辉趺窗鸦孟胱兂涩F(xiàn)實？在實際產(chǎn)出之前設(shè)計師做的都是“美美的幻想