個人主頁界面設(shè)計

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

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

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

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

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

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

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

7、1英寸 全尺寸banner為468*60px，半尺寸banner為234*60px，小banner為88*31px 另外120*90，120*60也是小圖標(biāo)的標(biāo)準(zhǔn)尺寸 每個非首頁靜態(tài)頁面含圖片字節(jié)不超過60K，全尺寸banner不超過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ī)格適用于框架或左右形式主頁的

8、廣告鏈接。 六、392*72，主要用于有較多圖片展示的廣告條，用于頁眉或頁腳。 七、468*60，應(yīng)用最為廣泛的廣告條尺寸，用于頁眉或頁腳。 八、88*31，主要用于界面鏈接，或網(wǎng)站小型LOGO。 廣告形式 像素大小 最大尺寸 備注 BUTTON 120*60（必須用gif） 7K 15*50（必須用gif） 7K 通欄 760*100 25K 靜態(tài)圖片或減少運動效果 430*50 15K 超級通欄 760*100 to 760*20 共40K 靜態(tài)圖片或減少運動效果 巨幅廣告 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 播放時間小于5秒60幀（1秒/12幀） 界面中的廣告尺寸： 1、首頁右上，尺寸120*60 2、首頁頂部通欄，尺寸468*60 3、首頁頂部通欄，尺寸760*60 4、首頁中部通欄，尺寸580*60 5、內(nèi)

10、頁頂部通欄，尺寸468*60 6、內(nèi)頁頂部通欄，尺寸760*60 7、內(nèi)頁左上，尺寸150*60或300*300 8、下載地址頁面，尺寸560*60或468*60 9、內(nèi)頁底部通欄，尺寸760*60 10、左漂浮，尺寸80*80或100*100 11、右漂浮，尺寸80*80或100*100以上幾種說法可能有點小的出入，大家可以探討一下。 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)色，紅色和黃色就互為鄰近色。 鄰近色之間往往是你中有我，我中有你。比如：朱紅與桔黃，朱紅以紅為主，里面略有少量黃色；桔黃以黃為主，里面有少許紅色，雖然它們在色相上有很大差別，但在視覺上卻比較接近。在色輪中，凡在60度范圍之內(nèi)的顏色都屬鄰近色的范圍。 互補(bǔ)色 三原色中，任何一種顏色即是其他兩種原色等量混合的補(bǔ)色。在色相環(huán)中，處于直徑位置的兩色互為補(bǔ)色。原色有三種，即紅、黃、藍(lán)，它們是不能再分解的色彩單位。三原色中每兩組相配而產(chǎn)生的色彩稱之為間

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