個(gè)人主頁(yè)界面設(shè)計(jì)

《個(gè)人主頁(yè)界面設(shè)計(jì)》由會(huì)員分享，可在線閱讀，更多相關(guān)《個(gè)人主頁(yè)界面設(shè)計(jì)（5頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

1、 個(gè)性化個(gè)人主頁(yè)界面設(shè)計(jì) 教學(xué)內(nèi)容： 1、規(guī)劃個(gè)人主頁(yè)設(shè)計(jì)方向 2、確定個(gè)人主頁(yè)設(shè)計(jì)風(fēng)格，繪制草圖 3、草圖修改、改進(jìn) 4、完成個(gè)人主頁(yè)設(shè)計(jì) 教學(xué)目的：設(shè)計(jì)風(fēng)格突出的圖標(biāo) 教學(xué)重點(diǎn)：規(guī)劃個(gè)人主頁(yè)設(shè)計(jì)方向 教學(xué)難點(diǎn)：確定個(gè)人主頁(yè)設(shè)計(jì)風(fēng)格 課時(shí)：3課時(shí) 教學(xué)過(guò)程： 一、 清點(diǎn)人數(shù)，整頓教學(xué)秩序 二、導(dǎo)入新課 門(mén)戶網(wǎng)站，是指通向某類(lèi)綜合性互聯(lián)網(wǎng)信息資源并提供有關(guān)信息服務(wù)的應(yīng)用系統(tǒng)。門(mén)戶網(wǎng)站最初提供搜索服務(wù)、目錄服務(wù)，后來(lái)由于市場(chǎng)競(jìng)爭(zhēng)日益激烈，門(mén)戶網(wǎng)站不得不快速地拓展各種新的業(yè)務(wù)類(lèi)型，希望通過(guò)門(mén)類(lèi)眾多的業(yè)務(wù)來(lái)吸引和留住互聯(lián)網(wǎng)用戶，以至于目前門(mén)戶網(wǎng)站的業(yè)務(wù)包羅萬(wàn)象，成為網(wǎng)絡(luò)

2、世界的“百貨商場(chǎng)”或“網(wǎng)絡(luò)超市”。 商務(wù)網(wǎng)站就是指有關(guān)商業(yè)內(nèi)容的網(wǎng)站可以使用網(wǎng)站進(jìn)行經(jīng)營(yíng)，商務(wù)網(wǎng)站是指一個(gè)企業(yè)、機(jī)構(gòu)或公司在互聯(lián)網(wǎng)上建立的站點(diǎn)，該站點(diǎn)主要是宣傳企業(yè)形象，發(fā)布產(chǎn)品信息、宣傳經(jīng)濟(jì)法規(guī)、提供商業(yè)服務(wù)。 商務(wù)網(wǎng)站不同于個(gè)人站點(diǎn)，個(gè)人站點(diǎn)是基于個(gè)人的目的而建設(shè)的。一般來(lái)說(shuō)，個(gè)人網(wǎng)站沒(méi)有贏利性質(zhì)，僅僅是出于設(shè)計(jì)者的個(gè)人愛(ài)好去設(shè)計(jì)和組織網(wǎng)站的內(nèi)容。在電子商務(wù)中，網(wǎng)站是其擁有者和用戶交流及溝通的窗口是買(mǎi)賣(mài)雙方信息交匯和傳遞的渠道，是企業(yè)展示其產(chǎn)品和服務(wù)的舞臺(tái)，是企業(yè)體現(xiàn)其企業(yè)形象和經(jīng)營(yíng)戰(zhàn)略的載體。商務(wù)網(wǎng)站是企業(yè)展開(kāi)電子商務(wù)的基礎(chǔ)設(shè)施和信息平臺(tái)，是實(shí)施電子商務(wù)的公司或商家與服務(wù)對(duì)象之間

3、的交互界面，是電子商務(wù)系統(tǒng)運(yùn)轉(zhuǎn)的承擔(dān)者和表現(xiàn)者。 網(wǎng)站界面設(shè)計(jì)尺寸要求 頁(yè)面標(biāo)準(zhǔn)按800*600分辨率制作，實(shí)際尺寸為778*434px，一般也可以為770*434px，最大寬度不要超過(guò)780px； 頁(yè)面長(zhǎng)度原則上不超過(guò)3屏，寬度不超過(guò)1屏。但實(shí)際上大多網(wǎng)站為了增大信息量，至少都有5屏~8屏。還要具體情況具體對(duì)待； 每個(gè)標(biāo)準(zhǔn)頁(yè)面為A4幅面大小，即8.5X11英寸； 全尺寸banner為468*60px，半尺寸banner為234*60px，LOGO為88*31px，另外120*90，120*60也是小圖標(biāo)的標(biāo)準(zhǔn)尺寸； 每個(gè)非首頁(yè)靜態(tài)頁(yè)面含圖片字節(jié)不超過(guò)60K，全尺寸ban

4、ner不超過(guò)14K； 文字大小一般為12px或者14px。 關(guān)于第一屏 所謂第一屏，是指我們到達(dá)一個(gè)網(wǎng)站在不拖動(dòng)滾動(dòng)條時(shí)能夠看到的部分。那么第一屏有多“大”呢？其實(shí)這是未知的。一般來(lái)講，在800*600的屏幕顯示 模式(這也是最常用的)下，在IE安裝后默認(rèn)的狀態(tài)(即工具欄地址欄等沒(méi)有改變)下，IE窗口內(nèi)能看到的部分為778px*435px，一般來(lái)講，我們以 這個(gè)大小為標(biāo)準(zhǔn)就行了，畢竟，在無(wú)法適合所有人的情況下，我們只能為大多數(shù)考慮了。 　　 5、標(biāo)準(zhǔn)化要求 ?logo 及中英文標(biāo)準(zhǔn)字體 ?網(wǎng)頁(yè)中不提倡制作大于100k的flash ?網(wǎng)站標(biāo)準(zhǔn)色 背景色使用白色或淺色

5、 ?鏈接圖標(biāo)(尺寸pixels: 88x318x60 ) 6、網(wǎng)站尺寸規(guī)范 ?頁(yè)面標(biāo)準(zhǔn)按800*600分辨率制作，實(shí)際尺寸為778*434px,要求在1024*768分辨率時(shí)居中表示, 頁(yè)面邊框過(guò)渡要柔和 很多站長(zhǎng)都有這樣迷惑，在進(jìn)行網(wǎng)站建設(shè)中界面布局設(shè)計(jì)時(shí)，界面界面的寬度尺寸都比較迷茫，800*600尺寸及1024*768尺寸的分辨率下，界面應(yīng)該設(shè)計(jì)為多少像素才合適呢？太寬就會(huì)出現(xiàn)水平滾動(dòng)條了，下面我們就界面設(shè)計(jì)的標(biāo)準(zhǔn)尺寸進(jìn)行講解。 界面設(shè)計(jì)標(biāo)準(zhǔn)尺寸： 1、800*600下，界面寬度保持在778以內(nèi)，就不會(huì)出現(xiàn)水平滾動(dòng)條，高度則視版面和內(nèi)容決定。 2、102

6、4*768下，界面寬度保持在1002以內(nèi)，如果滿框顯示的話，高度是612-615之間。就不會(huì)出現(xiàn)水平滾動(dòng)條和垂直滾動(dòng)條。 3、在ps里面做界面可以在800*600狀態(tài)下顯示全屏，頁(yè)面的下方又不會(huì)出現(xiàn)滑動(dòng)條，尺寸為740*560左右 4、在PS里做的圖到了網(wǎng)上就不一樣了，顏色等等方面，因?yàn)閃EB上面只用到256WEB安全色，而PS中的RGB或者CMYK以及LAB或者HSB的色域很寬顏色范圍很廣，所以自然會(huì)有失色的現(xiàn)象。 頁(yè)面標(biāo)準(zhǔn)按800*600分辨率制作，實(shí)際尺寸為778*434px 頁(yè)面長(zhǎng)度原則上不超過(guò)3屏，寬度不超過(guò)1屏 每個(gè)標(biāo)準(zhǔn)頁(yè)面為A4幅面大小，即8。5X1

7、1英寸 全尺寸banner為468*60px，半尺寸banner為234*60px，小banner為88*31px 另外120*90，120*60也是小圖標(biāo)的標(biāo)準(zhǔn)尺寸 每個(gè)非首頁(yè)靜態(tài)頁(yè)面含圖片字節(jié)不超過(guò)60K，全尺寸banner不超過(guò)14K 標(biāo)準(zhǔn)界面廣告尺寸規(guī)格： 一、120*120，這種廣告規(guī)格適用于產(chǎn)品或新聞?wù)掌故尽? 二、120*60，這種廣告規(guī)格主要用于做LOGO使用。 三、120*90，主要應(yīng)用于產(chǎn)品演示或大型LOGO。 四、125*125，這種規(guī)格適于表現(xiàn)照片效果的圖像廣告。 五、234*60，這種規(guī)格適用于框架或左右形式主頁(yè)的

8、廣告鏈接。 六、392*72，主要用于有較多圖片展示的廣告條，用于頁(yè)眉或頁(yè)腳。 七、468*60，應(yīng)用最為廣泛的廣告條尺寸，用于頁(yè)眉或頁(yè)腳。 八、88*31，主要用于界面鏈接，或網(wǎng)站小型LOGO。 廣告形式 像素大小 最大尺寸 備注 BUTTON 120*60（必須用gif） 7K 15*50（必須用gif） 7K 通欄 760*100 25K 靜態(tài)圖片或減少運(yùn)動(dòng)效果 430*50 15K 超級(jí)通欄 760*100 to 760*20 共40K 靜態(tài)圖片或減少運(yùn)動(dòng)效果 巨幅廣告 336*280 35K 585*120 豎邊

9、廣告 130*300 25K 全屏廣告 800*600 40K 必須為靜態(tài)圖片，F(xiàn)LASH格式 圖文混合 各頻道不同 15K 彈出窗口 400*300（盡量用gif） 40K BANNER 468*60（盡量用gif） 18K 懸停按鈕 80*80（必須用gif） 7K 流媒體 300*200（可做不規(guī)則形狀） 30K 播放時(shí)間小于5秒60幀（1秒/12幀） 界面中的廣告尺寸： 1、首頁(yè)右上，尺寸120*60 2、首頁(yè)頂部通欄，尺寸468*60 3、首頁(yè)頂部通欄，尺寸760*60 4、首頁(yè)中部通欄，尺寸580*60 5、內(nèi)

10、頁(yè)頂部通欄，尺寸468*60 6、內(nèi)頁(yè)頂部通欄，尺寸760*60 7、內(nèi)頁(yè)左上，尺寸150*60或300*300 8、下載地址頁(yè)面，尺寸560*60或468*60 9、內(nèi)頁(yè)底部通欄，尺寸760*60 10、左漂浮，尺寸80*80或100*100 11、右漂浮，尺寸80*80或100*100以上幾種說(shuō)法可能有點(diǎn)小的出入，大家可以探討一下。 IAB和EIAA發(fā)布新的網(wǎng)絡(luò)廣告尺寸標(biāo)準(zhǔn) 在這6種格式中，除了去年iab發(fā)布的4種“通用廣告包”中的格式 網(wǎng)站建設(shè)中的界面尺寸。是很重要的內(nèi)容 同類(lèi)色 color of same kind 指

11、色相性質(zhì)相同，但色度有深淺之分。（是色相環(huán)中15夾角內(nèi)的顏色） 如深紅與淺紅 鄰近色 所謂鄰近色，就是在色帶上相鄰近的顏色，例如綠色和藍(lán)色，紅色和黃色就互為鄰近色。 鄰近色之間往往是你中有我，我中有你。比如：朱紅與桔黃，朱紅以紅為主，里面略有少量黃色；桔黃以黃為主，里面有少許紅色，雖然它們?cè)谏嗌嫌泻艽蟛顒e，但在視覺(jué)上卻比較接近。在色輪中，凡在60度范圍之內(nèi)的顏色都屬鄰近色的范圍。 互補(bǔ)色 三原色中，任何一種顏色即是其他兩種原色等量混合的補(bǔ)色。在色相環(huán)中，處于直徑位置的兩色互為補(bǔ)色。原色有三種，即紅、黃、藍(lán)，它們是不能再分解的色彩單位。三原色中每?jī)山M相配而產(chǎn)生的色彩稱(chēng)之為間

12、色，如紅加黃為橙色，黃加藍(lán)為綠色，藍(lán)加紅為紫色，橙、綠、紫稱(chēng)為間色。紅與綠、橙與藍(lán)、黃與紫就是互為補(bǔ)色的關(guān)系。由于補(bǔ)色有強(qiáng)烈的分離性，故在色彩繪畫(huà)的表現(xiàn)中，在適當(dāng)?shù)奈恢们‘?dāng)?shù)剡\(yùn)用補(bǔ)色，不僅能加強(qiáng)色彩的對(duì)比，拉開(kāi)距離感，而且能表現(xiàn)出特殊的視覺(jué)對(duì)比與平衡效果。 對(duì)比色 在色相環(huán)中每一個(gè)顏色對(duì)面(180度對(duì)角)的顏色,稱(chēng)為"對(duì)比色(互補(bǔ)色)".把對(duì)比色放在一起,會(huì)給人強(qiáng)烈的排斥感.若混合在一起,會(huì)調(diào)出渾濁的顏色.如:紅與綠,藍(lán)與橙,黃與紫互為對(duì)比色。 也可以這樣定義對(duì)比色：兩種可以明顯區(qū)分的色彩，叫對(duì)比色。包括色相對(duì)比、明度對(duì)比、飽和度對(duì)比、冷暖對(duì)比、補(bǔ)色對(duì)比、色彩和消色的對(duì)比等。是構(gòu)成明顯色彩效果的重要手段，也是賦予色彩以表現(xiàn)力的重要方法。其表現(xiàn)形式優(yōu)同時(shí)對(duì)比和相繼對(duì)比之分。比如黃和藍(lán)、紫和綠、紅和青，任何色彩和黑、白、灰，深色和淺色，冷色和暖色，亮色和暗色都是對(duì)比色關(guān)系。 類(lèi)似色 在色輪上90度角內(nèi)相鄰接的色統(tǒng)稱(chēng)為類(lèi)似色.例如紅－紅橙－橙.黃－黃綠－綠.青－青紫－紫等均為類(lèi)似色.類(lèi)似色由于色相對(duì)比不強(qiáng)給人有色感平靜、調(diào)和的感覺(jué)因此在配色中常應(yīng)用 。 http://ichi.hk/html/ 三、作業(yè)： 從圖形、文字、色彩、版式等方面搜集設(shè)計(jì)素材，從而確定設(shè)計(jì)風(fēng)格的方向。 要求：運(yùn)用網(wǎng)格構(gòu)成方法確定個(gè)人主頁(yè)界面的大體布局