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

UI界面設(shè)計(jì)USERINTERFACE項(xiàng)目4網(wǎng)頁(yè)UI界面設(shè)計(jì)什么是視覺(jué)流程？引導(dǎo)使用者的眼睛,首先看到其次看到再其次看到......————————————————————————視覺(jué)中心次重點(diǎn)再其次信息點(diǎn)......實(shí)訓(xùn)任務(wù)4.1網(wǎng)頁(yè)設(shè)計(jì)流程和規(guī)范AB網(wǎng)頁(yè)色彩和分辨率

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

定寬：網(wǎng)頁(yè)尺寸等規(guī)范定寬模式像素客戶端顯示器局限性字體規(guī)范網(wǎng)頁(yè)色彩和分辨率色彩模式分辨率的設(shè)置WEB設(shè)計(jì)師要不要懂技術(shù)？廢話，當(dāng)然要??！不然怎么把幻想變成現(xiàn)實(shí)？在實(shí)際產(chǎn)出之前設(shè)計(jì)師做的都是“美美的幻想”，還有可能不那么美，或者根本無(wú)法實(shí)現(xiàn)！舉例：建筑師除了畫(huà)圖外，需要知道蓋房子每個(gè)階段的建造方式。要理解各種材料特性和規(guī)格。需要熟悉當(dāng)?shù)丨h(huán)境的限制。設(shè)計(jì)——實(shí)現(xiàn)HTML+CSS如何策劃一個(gè)網(wǎng)站1.市場(chǎng)調(diào)研企業(yè)的市場(chǎng)調(diào)查、分析定位同行業(yè)網(wǎng)站調(diào)查調(diào)查同一行業(yè)/類型網(wǎng)站，其他網(wǎng)站優(yōu)點(diǎn)與缺點(diǎn)，我怎樣獨(dú)樹(shù)一幟

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

1）網(wǎng)站語(yǔ)言

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

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

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

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

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

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

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

頁(yè)面分欄網(wǎng)頁(yè)版面編排的獨(dú)特性常見(jiàn)菜單布局方式：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)其余紙片彈開(kāi)網(wǎng)頁(yè)版面編排的獨(dú)特性常見(jiàn)頁(yè)面分欄方式：2欄：常用于內(nèi)容頁(yè)面3欄：常用于傳統(tǒng)的首頁(yè)4欄：常用于信息內(nèi)容較多的首頁(yè)四川美院首頁(yè)——3欄內(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網(wǎng)頁(yè)色彩和分辨率

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

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