個(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)入新課 門戶網(wǎng)站，是指通向某類綜合性互聯(lián)網(wǎng)信息資源并提供有關(guān)信息服務(wù)的應(yīng)用系統(tǒng)。門戶網(wǎng)站最初提供搜索服務(wù)、目錄服務(wù)，后來(lái)由于市場(chǎng)競(jìng)爭(zhēng)日益激烈，門戶網(wǎng)站不得不快速地拓展各種新的業(yè)務(wù)類型，希望通過(guò)門類眾多的業(yè)務(wù)來(lái)吸引和留住互聯(lián)網(wǎng)用戶，以至于目前門戶網(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)站是其擁有者和用戶交流及溝通的窗口是買賣雙方信息交匯和傳遞的渠道，是企業(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)容 同類色 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)生的色彩稱之為間

12、色，如紅加黃為橙色，黃加藍(lán)為綠色，藍(lán)加紅為紫色，橙、綠、紫稱為間色。紅與綠、橙與藍(lán)、黃與紫就是互為補(bǔ)色的關(guān)系。由于補(bǔ)色有強(qiáng)烈的分離性，故在色彩繪畫的表現(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ì)角)的顏色,稱為"對(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)系。 類似色 在色輪上90度角內(nèi)相鄰接的色統(tǒng)稱為類似色.例如紅－紅橙－橙.黃－黃綠－綠.青－青紫－紫等均為類似色.類似色由于色相對(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è)界面的大體布局