UI界面設(shè)計(jì) 課件 重大 4.1網(wǎng)頁規(guī)范、4.2網(wǎng)頁策劃、4.3網(wǎng)頁創(chuàng)意

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

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

定寬：網(wǎng)頁尺寸等規(guī)范定寬模式像素客戶端顯示器局限性字體規(guī)范網(wǎng)頁色彩和分辨率色彩模式分辨率的設(shè)置WEB設(shè)計(jì)師要不要懂技術(shù)？廢話，當(dāng)然要??！不然怎么把幻想變成現(xiàn)實(shí)？在實(shí)際產(chǎn)出之前設(shè)計(jì)師做的都是“美美的幻想”，還有可能不那么美，或者根本無法實(shí)現(xiàn)！舉例：建筑師除了畫圖外，需要知道蓋房子每個(gè)階段的建造方式。要理解各種材料特性和規(guī)格。需要熟悉當(dāng)?shù)丨h(huán)境的限制。設(shè)計(jì)——實(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ù)，運(yùn)用loading頁面以實(shí)現(xiàn)完整的呈現(xiàn)首頁效果。中國(guó)美術(shù)學(xué)院網(wǎng)站/2.標(biāo)志和banner清華大學(xué)美術(shù)學(xué)院首頁3.導(dǎo)航菜單

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

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

YOU!謝謝謝謝UI界面設(shè)計(jì)USERINTERFACE網(wǎng)頁設(shè)計(jì)策劃WEBDESIGN第一部分網(wǎng)頁界面設(shè)計(jì)1如何策劃一個(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ú)樹一幟

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

1）網(wǎng)站語言

2）網(wǎng)頁風(fēng)格3）網(wǎng)站結(jié)構(gòu)設(shè)計(jì)4）首頁內(nèi)容安排企業(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)為首頁的菜單。任何網(wǎng)站都有一定的目錄結(jié)構(gòu)，大型網(wǎng)站的目錄數(shù)量多、層次深、關(guān)系復(fù)雜。網(wǎng)站的目錄結(jié)構(gòu)需要經(jīng)過周密規(guī)劃，根據(jù)企業(yè)和瀏覽者的需要來設(shè)置各級(jí)目錄。

各頁面之間的相互鏈接的拓?fù)浣Y(jié)構(gòu)，它是建立在目錄結(jié)構(gòu)基礎(chǔ)之上。形象的說，每個(gè)頁面都可以看作是一個(gè)節(jié)點(diǎn)，鏈接則是兩個(gè)節(jié)點(diǎn)之間的連線。一個(gè)點(diǎn)可以和一個(gè)點(diǎn)鏈接，也可以和多個(gè)點(diǎn)鏈接。鏈接結(jié)構(gòu)有兩種基本方式樹狀鏈接結(jié)構(gòu)網(wǎng)狀鏈接結(jié)構(gòu)站點(diǎn)地圖學(xué)習(xí)實(shí)踐一、手繪臨摹優(yōu)秀網(wǎng)頁界面：收集優(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è)資料收集），撰寫網(wǎng)站策劃案World。THANK

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

運(yùn)用了一個(gè)展開的包裝盒作為頁面創(chuàng)意源點(diǎn)。各部分設(shè)計(jì)元素巧妙地放置于包