淺談ByMargaret網(wǎng)頁設計根本元素根本標準參考指南案例欣賞目錄根本元素根本標準1.網(wǎng)頁根本寬度有效可視區(qū)域（單位：Px）屏幕一二三800600102476812801024IE6.0779（+21）432（+168）1003（+21）600（+168）1259（+21）856（+168）IE7.0779（+21）452（+148）1003（+21）620（+148）1259（+21）876（+148）Firefox2.0783(+17)417(+183)1007(+17)585(+183)1263(+17)841(+183)Opera9.0781(+19)461(+139)1005(+19)629(+139)1261(+19)885(+139)保守設置〔1024x768臺式電腦&平板電腦〕：960px一般設置〔1280x800、1366x768筆記本〕：1000px大屏設置〔分辨率大于1280x800〕：1200px案例：淘寶〔1000px〕，京東〔1210px〕，花瓣〔1407px〕根本標準2.文字&文本標準總體原那么：提高文字的辨識性和頁面的易讀性文字大?。航ㄗh使用12號+14號字體的混合搭配，13號也可酌情考慮，因為13號字體的不對稱性，目前非主流。需突出的內(nèi)容局部、新聞標題、欄目標題等多使用14號字體廣告內(nèi)容、輔助信息或介紹性文字等多使用12號字體防止大面積使用加粗字體特別注意：菜單盡量不使用12號加粗，這樣會導致復雜的文字難以識別。多采用14號加粗根本標準2.文字&文本標準總體原那么：提高文字的辨識性和頁面的易讀性2．文字顏色：同一網(wǎng)站需要定出主文字顏色，特殊情況下可以有2種左右的輔助文字顏色一般情況下字體變化不要超過三種，假設有需要，可以盡量采用統(tǒng)一字體的不同字族。正文的文字顏色多采用深藍色或深灰色。當使用其他顏色作為正文主色調時，平安起見可采用明度數(shù)值〔B〕不大于30%的顏色建議使用：根本標準2.文字&文本標準總體原那么：提高文字的辨識性和頁面的易讀性4.字體的選擇中文字體：宋體，微軟雅黑，幼圓英文字體：Arial(比例及字重〔weight〕和Helvetica極之相近;沒有下劃線貼邊的問題；Q字沒尾巴；字高整齊)根本標準2.文字&文本標準總體原那么：提高文字的辨識性和頁面的易讀性5．文字鏈接：文字鏈接形式不得超過3種顏色〔規(guī)定其中一種為主鏈接色〕。顯性鏈接：大面積鏈接的網(wǎng)站，比方門戶首頁、內(nèi)容列表頁。多采取灰黑色、藍色做全篇的鏈接色，默認時不顯示下劃線，光標經(jīng)過時才顯示下劃線。隱性鏈接：對于混雜在頁面文字中零散出現(xiàn)的文字鏈接，為了便于識別，默認時候可以出現(xiàn)下劃線或使用輔助鏈接色，光標經(jīng)過的時候，樣式不變。根本標準2.文字&文本標準總體原那么：提高文字的辨識性和頁面的易讀性6．對齊網(wǎng)頁設計中的〞對齊〞同傳統(tǒng)的印刷排版中的對齊概念是一樣的，并且同等重要。并不是說一切都應該在一條直線上，而是盡可能的保持一貫的整齊，不僅左對齊，也要盡量右對齊。首頁上摘要無須空格。內(nèi)容正文應該空兩格?！岸垢瘔K〞四周應該空留均勻適當?shù)拈g隔根本標準3.模塊化表現(xiàn)總體原那么：同一個網(wǎng)站采用的模塊化表現(xiàn)應該是全部統(tǒng)一的。模塊化的幾類參考表現(xiàn)：單線

3-5個像素的圓角內(nèi)邊修飾根本標準4.頁腳信息頁腳信息按照從上到下的排列次序為:1、內(nèi)部導航2、外部導航3、各類許可證、授權聲明4、英文版權信息“Copyright?〞5、中文版權信息6、各類網(wǎng)絡平安/工商證明/技術支持LOGO各鏈接間隔統(tǒng)一使用〞|〞建議采用12號字，禁止使用加粗字體根本標準5.搜索框設計標準文本框a.搜索框文本框的長度應適中，至少應提供顯示10個中文字符的寬度b.搜索組件中使用的文本框必須為單行文本框c.高度不得低于18個像素幫助信息限定標簽提示、標示性文字、熱門關鍵詞提示搜索按鈕a.搜索按鈕一般包含圖標形式和文字形式兩種b.使用圖標形式時只能使用放大鏡的圖標，而不能采用其他元素。文字形式：搭配使用：圖形形式：

根本標準6.廣告設計標準禁止模仿任何windows標準控件，windows標準控件包括但不限于：鼠標指針、按鈕以及窗口控制按鈕等。不要使用按鈕作長句廣告參考指南1.網(wǎng)頁根本版面設計類型一、骨骼型骨骼型是一種標準的理性的分割方法。常見的骨骼有豎向通欄、雙欄、三欄、四欄和橫向通欄、雙欄、三欄和四欄等。一般以豎向分欄為多。在圖片和文字的編排上那么嚴格按照骨骼比例進行編排配置，給人以嚴謹、和諧、理性的美。骨骼經(jīng)過相互混合后的版式，既理性、條理，又活潑而具彈性。參考指南1.網(wǎng)頁根本版面設計類型二、滿版型版面以圖象充滿整版，主要以圖象為訴求，視覺傳達直觀而強烈。文字的配置壓置在上下、左右或中部的圖象上。滿版型給人以大方、舒展的感覺，是商品廣告常用的形式。參考指南1.網(wǎng)頁根本版面設計類型三、上下分割型把整個版面分為上下兩個局部，在上半部或下半部配置圖片，另一局部那么配置文案。配置有圖片的局部感性而有活力，而文案局部那么理性而靜止。上下局部配置的圖片可以是一幅或多幅。參考指南1.網(wǎng)頁根本版面設計類型四、左右分割型把整個版面分割為左右兩個局部，分別在左或右配置文案。當左右兩局部形成強弱比照時，那么造成視覺心理的不平衡。這僅僅是視覺習慣上的問題，也自然不如上下分割的視覺流程自然。不過，倘假設將分割線虛化處理，或用文字進行左右重復或穿插，左右圖文那么變得自然和諧。參考指南1.網(wǎng)頁根本版面設計類型五、中軸型將圖形做水平或垂直方向的排列，文案以上下或左右配置。水平排列的版面給人穩(wěn)定、安靜、和平與含蓄之感。垂直排列的版面給人強烈的動感。參考指南1.網(wǎng)頁根本版面設計類型六、曲線型圖片或文字在版面結構上作曲線的編排構成，產(chǎn)生節(jié)奏和韻律。參考指南1.網(wǎng)頁根本版面設計類型七、傾斜型版面主體形象或多幅圖版做傾斜編排，造成版面強烈的動感和不穩(wěn)定因素，引人注目。參考指南1.網(wǎng)頁根本版面設計類型八、對稱型對稱的版式給人穩(wěn)定、莊重理性的感覺。對稱有絕對對稱和相對對稱。一般多采用相對對稱。以防止過于嚴謹。對稱一般以相對對稱居多。參考指南1.網(wǎng)頁根本版面設計類型九、中心型重心有三種概念。1、直接以獨立而輪廓清楚的形象占據(jù)版面中心。2、向心：視覺元素向版面中心聚攏的運動。3、離心：猶如將石子投入水中，產(chǎn)生一圈圈向外擴散的弧線運動。重心型版式產(chǎn)生視覺焦點，使強烈而突出。參考指南1.網(wǎng)頁根本版面設計類型十、三角形在圓形、四方形、三角形等根本形態(tài)中，正三角形〔金字塔形〕是最具平安穩(wěn)定因素的形態(tài)，而圓形和倒三角形那么給人以動感和不穩(wěn)定感。參考指南1.網(wǎng)頁根本版面設計類型十一、并置形將相同或不同的圖片作大小相同而位置不同的重復排列。并置構成的版面有比較、說解的意味，給予原本復雜喧囂的版面以次序、安靜、調和與節(jié)奏感。參考指南1.網(wǎng)頁根本版面設計類型十二、自由型自由行結構是無規(guī)律的、隨意的編排構成，有活潑、輕快之感。參考指南2.網(wǎng)頁配色色彩的三要素色相：明度：純度：參考指南2.網(wǎng)頁配色配色方法選出主色和輔助色根據(jù)網(wǎng)站功能、面向對象確定網(wǎng)站風格根據(jù)風格確定主色和輔助色改變主色和輔助色的明度和純度，豐富色彩配合不同明度純度的黑白灰作為補充色在小范圍內(nèi)選取與主色比照大的顏色作為強調色參考指南2.網(wǎng)頁配色比照原那么色相比照〔主色與輔助色、強調色比照〕明暗比照面積比照參考指南2.網(wǎng)頁配色比照調整比照恰當比照過強減弱比照增加隔膜別離元素比照過弱比照渾濁加大比照增加隔膜別離元素參考指南2.網(wǎng)頁配色

根據(jù)主題選擇藍色調，頁面整體清爽簡潔。色

單色搭配

色彩豐富協(xié)調，橙色、黃色區(qū)塊醒目不突兀色

類似色搭配參考指南2.網(wǎng)頁配色參考指南2.網(wǎng)頁配色