優(yōu)秀網(wǎng)站設(shè)計(jì)案例分享及分析PPT課件

,網(wǎng)絡(luò)營(yíng)銷部門內(nèi)訓(xùn)-鄭華偉,優(yōu)秀網(wǎng)站設(shè)計(jì)案例分享及分析（一）,網(wǎng)頁(yè)設(shè)計(jì)中的分割法則,2,網(wǎng)頁(yè)設(shè)計(jì)又沒(méi)有規(guī)律,為什么我們的網(wǎng)頁(yè)就是差一點(diǎn)點(diǎn)感覺(jué)？為什么我們做了多年都是那樣的水準(zhǔn)，而他人在短短時(shí)間內(nèi)就能成長(zhǎng)到一定高度，其原因就是因?yàn)橐恍┰O(shè)計(jì)師在長(zhǎng)期不斷學(xué)習(xí)、思考、動(dòng)手過(guò)程中，領(lǐng)悟到了法則的存在。本文也許會(huì)幫到你，也許能夠帶你對(duì)網(wǎng)頁(yè)設(shè)計(jì)有一個(gè)更深層的認(rèn)識(shí)，也許能為你提供一個(gè)有理有據(jù)，在客戶面前裝B的不二法則。那么我們下面首先看一些案例,3,案例一,從這張圖中你看到了什么？,4,案例一分析,從上圖中，我們可以看出，作者在做這個(gè)網(wǎng)頁(yè)的時(shí)候是何等的嚴(yán)謹(jǐn)，在他的頁(yè)面中，連圖兩邊的白色部分把網(wǎng)頁(yè)分割為8個(gè)模塊，原網(wǎng)頁(yè)的寬度是1600PX，即每一塊的寬度為200PX，在這個(gè)過(guò)程中，中間部分（1200寬度中）采用了6分法則。,5,那么什么是六分法則？,讓我們重頭開始，來(lái)還原網(wǎng)頁(yè)設(shè)計(jì)中最本質(zhì)的東西，其實(shí)這個(gè)網(wǎng)頁(yè)并不復(fù)雜。我們先去除網(wǎng)頁(yè)要傳達(dá)的信息他原始的骨架就是如此了。因?yàn)?是一個(gè)很神奇的數(shù)字，他可以被3、2整除，我們網(wǎng)頁(yè)的展示區(qū)域一般是1200、960PX，在這個(gè)基礎(chǔ)上除以6，就有了多種選擇，我們可以把版塊分為200、400、600,1200PX，又可以劃分為160、320、480、960PX，分別對(duì)應(yīng)的布局是6、3、2、1,6,同時(shí)我們?cè)谶@個(gè)網(wǎng)頁(yè)中學(xué)到的還不止如此,左圖中，你會(huì)發(fā)現(xiàn)，網(wǎng)頁(yè)中元素的位置是如此居中，對(duì)稱，看圖你就可以知道為什么這個(gè)元素要在這個(gè)位置，而不是偏左或者偏右。很多童鞋，其實(shí)就是缺乏的這種嚴(yán)謹(jǐn),7,還有這個(gè),你可以感受一下這個(gè)網(wǎng)頁(yè)的banner是不是右邊格子一樣嚴(yán)謹(jǐn),8,當(dāng)我第一次看到這個(gè)網(wǎng)站就被他的規(guī)則震撼住了,他精確到每個(gè)元素間的距離正好都是10的整倍數(shù)，首屏banner高度570，logo長(zhǎng)度190，乘以3，正好就是570.底部more標(biāo)簽與底欄的距離是90,。而底欄文字高度嚴(yán)格縮小在90像素以內(nèi)，同時(shí)與上下之間的間距保持在40像素。從這里我們可以看出：要做好一個(gè)網(wǎng)頁(yè)，其網(wǎng)頁(yè)中每一個(gè)元素，他們的位置、大小，一定需要有關(guān)聯(lián)的。,9,小切糕全屏響應(yīng)式,網(wǎng)頁(yè)中的很多元素，除了可以有等比、等高、等寬之類的聯(lián)系外，其實(shí)還可以有倍數(shù)之間的關(guān)系,小切糕全屏響應(yīng)式俗稱瀑布流設(shè)計(jì)，是根據(jù)屏幕寬度進(jìn)行計(jì)算，通常在設(shè)計(jì)中會(huì)有一個(gè)基礎(chǔ)最小切糕，然后以1倍、2倍、3倍、4倍進(jìn)行拓展，并計(jì)算出最合適完整的組合,10,實(shí)際運(yùn)用,從上到下，每一個(gè)模塊，每一個(gè)版塊的網(wǎng)頁(yè)元素，他們相對(duì)稱的分割在各個(gè)版塊當(dāng)中，絕不越線。同時(shí)模特服裝圖片，在寬度不變的情況下，它的高度分別是1倍、2倍、3倍、4倍，產(chǎn)生若有似無(wú)的聯(lián)系。,這就是六分法則，它讓你的網(wǎng)頁(yè)具備普通網(wǎng)頁(yè)不具備的整體感。同樣的法則，我們看以下兩個(gè)頁(yè)面，拋棄了傳統(tǒng)的柵格法則，取而代之的是，把劃分網(wǎng)頁(yè)的分割線變成了6條。,11,12,最后的最后,那么電腦前的你懂了么？有了它，我們的設(shè)計(jì)才變得有理可據(jù)，在客戶面前也能更具備說(shuō)服力。掌握這個(gè)方法的你，一定可以做得更好!,13,網(wǎng)頁(yè)中的配色問(wèn)題,一、需要配色的是你的畫布，而不是你的圖片一個(gè)在網(wǎng)頁(yè)設(shè)計(jì)中最根本的原則是，無(wú)論你花了多少時(shí)間創(chuàng)造了一個(gè)輝煌的設(shè)計(jì)，其最終的作用是發(fā)揮出內(nèi)容的核心位置。你的配色方案永遠(yuǎn)不應(yīng)該比它呈現(xiàn)的內(nèi)容的更加“響亮”。你的設(shè)計(jì)應(yīng)該是在后臺(tái)，目的是幫助突出網(wǎng)站的內(nèi)容。,14,淺灰色的畫布突出了圖像，而明亮的畫布反而不能突出你的內(nèi)容。用Photoshop等軟件設(shè)計(jì)網(wǎng)站的時(shí)候，創(chuàng)建設(shè)計(jì)的過(guò)程往往是相互獨(dú)立的。有些設(shè)計(jì)單個(gè)看起來(lái)很不錯(cuò)，也能被你的客戶所接受，但是當(dāng)它真正被設(shè)計(jì)成網(wǎng)頁(yè)的時(shí)候不適當(dāng)?shù)呐渖鶗?huì)分散訪客的注意力。事實(shí)上，網(wǎng)頁(yè)設(shè)計(jì)的過(guò)程是和內(nèi)容緊密相連的，很多制作高品質(zhì)的網(wǎng)頁(yè)看上去空空蕩蕩，幾乎沒(méi)有內(nèi)容。,15,二、選擇簡(jiǎn)單的灰色作為你網(wǎng)站的基調(diào),你可以為你的網(wǎng)站基調(diào)選擇無(wú)數(shù)種顏色，不過(guò)我建議你采用最簡(jiǎn)單的顏色，比如白色/淺灰色與深灰色的搭配文字背景。你可以看看任何熱門的網(wǎng)站、模版、主題，白色或淺灰色與深灰色搭配成了大多數(shù)的選擇，這當(dāng)然也是有充分理由的。這樣的搭配對(duì)訪客而言提高了你內(nèi)容的可讀性，并且把你的圖片突出在最前方。,16,一般來(lái)說(shuō)，你的文字最好避免使用墨黑色，深灰色一般更容易閱讀。對(duì)于你的背景色，全白色（#FFFFFFF）是可以搭配任何文本的最安全的顏色。如果你想選用其他的背景顏色，我們建議采用#FFFFFF到#CCCCCC當(dāng)然，這些顏色的選擇都不是固定死的。,17,三、盡量不要使用顏色選擇器右上角的顏色,顏色選擇器的右上角是一塊肥沃的土地。在右上角的顏色可以執(zhí)行出驚人的效果，而且非常誘人，但通常想用好需要大量的經(jīng)驗(yàn)。如果沒(méi)有這種經(jīng)驗(yàn)，他們可能會(huì)導(dǎo)致事故的發(fā)生，所以最好以削弱你的顏色，最好都保持比較淡化的色彩。為了說(shuō)明這一點(diǎn)，看如果我只是改變了我們?cè)O(shè)計(jì)的色調(diào)，到目前為止，會(huì)發(fā)生什么。,18,看上去還是聽(tīng)舒服的對(duì)吧