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

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