1、可編輯網(wǎng)頁(yè)平面設(shè)計(jì)基本步驟網(wǎng)頁(yè)平面設(shè)計(jì)基本步驟 一個(gè)不懂得欣賞優(yōu)秀網(wǎng)頁(yè)作品的設(shè)計(jì)師可能永久都無(wú)法懂得借鑒的真諦;一個(gè)無(wú)法將優(yōu)秀作品的精髓融入到現(xiàn)有需求中的設(shè)計(jì)師可能永久都無(wú)法找到真正的靈感。 即便是那些看似獨(dú)創(chuàng)的設(shè)計(jì)，其靈感也往往來(lái)自設(shè)計(jì)師在長(zhǎng)期借鑒過(guò)程中的不斷積累。 設(shè)計(jì)源于靈感，靈感源于借鑒這是每個(gè)網(wǎng)頁(yè)設(shè)計(jì)師都應(yīng)當(dāng)牢記的成功法則。詳細(xì)介紹如下，更多消息請(qǐng)關(guān)注! 一、用原型法細(xì)化網(wǎng)站設(shè)計(jì)需求 用DW在最短的時(shí)間內(nèi)搭出一個(gè)可以掃瞄、跳轉(zhuǎn)的網(wǎng)站，然后與客戶一起體驗(yàn)并評(píng)估這個(gè)網(wǎng)站原形的架構(gòu)、流程、布局、配色、文字等不同層面。 二、網(wǎng)頁(yè)鏈接的深度、廣度和耦合程度 超級(jí)鏈接是網(wǎng)頁(yè)設(shè)計(jì)中最重要的信息組織

2、方式，也是整個(gè)Web世界的精髓所在。但糟糕的鏈接設(shè)計(jì)比如過(guò)于泛濫和任憑的超級(jí)鏈接很可能會(huì)讓沖浪者迷失在充斥著信息碎片的海洋里。 假如將網(wǎng)站首頁(yè)視為鏈接層次中的第一級(jí)，那么，由首頁(yè)中的超級(jí)鏈接得到的，在信息內(nèi)容上具有從屬關(guān)系的站內(nèi)頁(yè)面就是網(wǎng)頁(yè)鏈接層次中的其次級(jí);從每個(gè)其次級(jí)頁(yè)面又可以連續(xù)得出第三級(jí)網(wǎng)頁(yè);依此類推，我們多半可以得到一個(gè)完整的樹形鏈接結(jié)構(gòu)。在這個(gè)樹形鏈接結(jié)構(gòu)中，整棵樹的層數(shù)可以被稱為(站內(nèi))網(wǎng)頁(yè)鏈接的深度，頁(yè)面最多的一層中包含的頁(yè)面總數(shù)可以被稱為(站內(nèi))網(wǎng)頁(yè)鏈接的廣度。一般說(shuō)來(lái)，一個(gè)網(wǎng)站的鏈接深度和廣度最好有一個(gè)合適的均衡關(guān)系，深度過(guò)大的網(wǎng)站不利于沖浪者快速獵取相關(guān)信息，廣度過(guò)大的網(wǎng)

3、站則簡(jiǎn)潔讓沖浪者在許多并列的超級(jí)鏈接面前不知所措。 當(dāng)網(wǎng)頁(yè)中的某個(gè)鏈接既沒(méi)有指向下一級(jí)網(wǎng)頁(yè)，也沒(méi)有指向上一級(jí)網(wǎng)頁(yè)時(shí)，它必定構(gòu)成了由當(dāng)前頁(yè)面對(duì)跨層級(jí)網(wǎng)頁(yè)或站外URL的跳轉(zhuǎn)，這種跳轉(zhuǎn)的消逝頻率可以被稱為網(wǎng)頁(yè)鏈接的泛耦合程度。泛耦合程度過(guò)低的網(wǎng)站無(wú)法有效發(fā)揮Web沖浪的價(jià)值，由此得到的網(wǎng)站過(guò)于死板;另一方面，泛耦合程度較高的網(wǎng)站又有可能造成信息內(nèi)容的支離裂開，影響沖浪者的正常閱讀。因此，網(wǎng)頁(yè)鏈接的泛耦合程度應(yīng)當(dāng)與網(wǎng)站的設(shè)計(jì)需求相適應(yīng)兒童或動(dòng)漫類的網(wǎng)站應(yīng)鼓舞那些代表跳動(dòng)式思維的泛耦合鏈接，而一個(gè)學(xué)術(shù)類的網(wǎng)站則應(yīng)當(dāng)對(duì)泛耦合鏈接持相對(duì)謹(jǐn)慎的態(tài)度。 幾乎每個(gè)網(wǎng)頁(yè)都有導(dǎo)航欄。對(duì)同一個(gè)網(wǎng)站內(nèi)的全部網(wǎng)頁(yè)來(lái)說(shuō)，導(dǎo)航

4、欄必需在設(shè)計(jì)風(fēng)格上力求統(tǒng)一。否則，沖浪者就需要分別適應(yīng)每個(gè)頁(yè)面的導(dǎo)航界面風(fēng)格，這不但會(huì)鋪張不少時(shí)間，也會(huì)嚴(yán)峻影響整個(gè)網(wǎng)站的使用美感。 但這里所說(shuō)的統(tǒng)一并不是要求我們?yōu)槊總€(gè)網(wǎng)頁(yè)設(shè)計(jì)出一模一樣的導(dǎo)航欄。完全相同的導(dǎo)航欄會(huì)讓沖浪者在掃瞄過(guò)程中由疲乏而麻木、由麻木而丟失對(duì)網(wǎng)站的掃瞄愛好。也就是說(shuō)，我們應(yīng)當(dāng)在統(tǒng)一的整體風(fēng)格下，在每一個(gè)或每一組網(wǎng)頁(yè)的導(dǎo)航欄中尋求細(xì)節(jié)上的變化。 比方說(shuō)，我們可以在確保全部導(dǎo)航欄形狀、布局、字體全都性的基礎(chǔ)上，變換不同導(dǎo)航欄的背景顏色;或者，我們可以在統(tǒng)一了顏色、形狀、字體的狀況下，變換不同導(dǎo)航欄的相對(duì)位置;再或者，我們還可以變換不同頁(yè)面中導(dǎo)航欄的背景圖片當(dāng)然，全部背景圖片應(yīng)

5、當(dāng)從屬于某種統(tǒng)一的風(fēng)格同時(shí)保持其他設(shè)計(jì)元素不變。 在統(tǒng)一的基礎(chǔ)上尋求變化除了導(dǎo)航欄以外，網(wǎng)頁(yè)設(shè)計(jì)師在處理同一頁(yè)面或同一網(wǎng)站內(nèi)的其他設(shè)計(jì)問(wèn)題時(shí)，這句話也同樣有效。 三、網(wǎng)頁(yè)基本布局 要查找網(wǎng)頁(yè)布局方面的靈感并不難。我建議大家沒(méi)事兒時(shí)多做些折紙練習(xí)：順手拿起一張A4復(fù)印紙，然后依據(jù)自己的心情好壞，或平行、或斜向、或選擇任意角度將紙片折疊幾次，再把紙平攤在面前，紙上呈現(xiàn)出來(lái)的折痕沒(méi)準(zhǔn)兒就是一種相當(dāng)不錯(cuò)的網(wǎng)頁(yè)布局呢! 當(dāng)然，網(wǎng)頁(yè)設(shè)計(jì)師還是要盡量生疏那些典型網(wǎng)頁(yè)的基本布局方式，以依據(jù)客戶的需要選擇使用。比如，門戶類網(wǎng)頁(yè)為了盡可能多地呈現(xiàn)信息內(nèi)容，通常都會(huì)設(shè)計(jì)成三欄甚至四欄的縱向布局;公司首頁(yè)為了呈現(xiàn)強(qiáng)大

6、的企業(yè)實(shí)力，往往會(huì)選擇視野更寬敞的橫向布局;個(gè)人主頁(yè)為了呈現(xiàn)網(wǎng)站仆人的共性，其網(wǎng)頁(yè)布局方式也會(huì)千差萬(wàn)別，像軸向布局、網(wǎng)格布局、斜角布局、放射布局、多中心布局、離散布局、對(duì)比布局等等都是常見的個(gè)人主頁(yè)布局方式。 四、網(wǎng)頁(yè)空間中的視覺(jué)導(dǎo)向 每個(gè)網(wǎng)頁(yè)都是一個(gè)奇異的視覺(jué)空間。像我們生疏的四維時(shí)空一樣，網(wǎng)頁(yè)空間也有深度、廣度和時(shí)間消逝的感覺(jué)，甚至還會(huì)在設(shè)計(jì)元素引發(fā)的力的作用下產(chǎn)生運(yùn)動(dòng)或扭曲。 每當(dāng)我們打開一個(gè)新的網(wǎng)頁(yè)后，我們的視線首先會(huì)聚焦在網(wǎng)頁(yè)中最引人留意的那一點(diǎn)上我們通常稱其為視覺(jué)焦點(diǎn)。隨后，我們的思路會(huì)受到視覺(jué)焦點(diǎn)周邊設(shè)計(jì)元素的形狀和分布方式的影響，并在不知不覺(jué)中把視線轉(zhuǎn)移到另一個(gè)值得停留的地方(

7、例如，一段醒目的線條，一種顏色到其近似色的漸變，它們都會(huì)讓我們的視線依據(jù)設(shè)計(jì)師預(yù)先支配的軌跡移動(dòng))。如此連續(xù)下去，視線經(jīng)過(guò)的全部關(guān)注點(diǎn)可以連接成一條完整的視覺(jué)路徑。 使用視覺(jué)路徑引導(dǎo)沖浪者按某種內(nèi)在的規(guī)律挨次掃瞄網(wǎng)頁(yè)信息的過(guò)程可以被稱為網(wǎng)頁(yè)空間中的視覺(jué)導(dǎo)向。是否能自發(fā)、自覺(jué)地使用視覺(jué)導(dǎo)向的設(shè)計(jì)方法并依據(jù)視覺(jué)路徑的走向排列關(guān)鍵信息，這是區(qū)分專業(yè)網(wǎng)頁(yè)設(shè)計(jì)師和業(yè)余網(wǎng)頁(yè)設(shè)計(jì)師的一個(gè)重要依據(jù)。 五、網(wǎng)頁(yè)空間的秩序及運(yùn)動(dòng)趨勢(shì) 網(wǎng)頁(yè)空間的秩序是網(wǎng)頁(yè)中全部視覺(jué)元素相互作用的結(jié)果。分析某個(gè)特定網(wǎng)頁(yè)空間的秩序時(shí)，最好把視覺(jué)元素抽象為點(diǎn)、線、面三大類，然后分別考察每一類元素之間以及不同類型元素之間的相互作用。 在設(shè)

8、計(jì)師眼中，每一個(gè)視覺(jué)元素都可以被看成是力的源泉。不同視覺(jué)元素釋放出來(lái)的力的方向和大小不同。一個(gè)向右傾斜的三角形可以同時(shí)釋放出類似重力的垂直作用力和向右的水平作用力。視覺(jué)元素和視覺(jué)元素通過(guò)力相互作用，共同影響著整個(gè)網(wǎng)頁(yè)的空間秩序。 當(dāng)網(wǎng)頁(yè)空間中全部作用力處于平衡狀態(tài)時(shí)，空間秩序最為穩(wěn)定，整個(gè)網(wǎng)頁(yè)看起來(lái)比較和諧、均衡;反之，當(dāng)全部作用力可以在某個(gè)方向上形成合力時(shí)，空間秩序就會(huì)處于不穩(wěn)定的狀態(tài)，整個(gè)網(wǎng)頁(yè)看起來(lái)則會(huì)布滿動(dòng)感和活力。 六、網(wǎng)頁(yè)中的留白 網(wǎng)頁(yè)中的留白就像情感小說(shuō)中的心理描寫或是動(dòng)作電影中的抒情段落一樣，可以讓網(wǎng)頁(yè)的視覺(jué)效果更加自由、流暢。很圓滿，許多網(wǎng)頁(yè)設(shè)計(jì)師都不懂得這個(gè)淺顯的道理，他們或

9、是在客戶需求的壓力下，或是在不良設(shè)計(jì)習(xí)慣的驅(qū)使下，將整個(gè)頁(yè)面塞滿了圖片、文字、鏈接或是廣告，以至于全部視覺(jué)元素都不得不在擁擠的空間內(nèi)茍延殘喘、苦痛掙扎。 留白并不特指網(wǎng)頁(yè)中的白色區(qū)域。事實(shí)上，網(wǎng)頁(yè)中凡是沒(méi)有前景元素干擾的視覺(jué)區(qū)域都可以被稱為留白。橫向通欄的留白可以讓網(wǎng)頁(yè)擁有一種水平的流淌感;縱向的留白可以平衡文字、導(dǎo)航欄等視覺(jué)元素在水平方向的作用力;標(biāo)題區(qū)域的大面積留白可以突出公司名稱或網(wǎng)頁(yè)標(biāo)題信息;正文區(qū)域內(nèi)的大面積留白既可以豐富頁(yè)面布局的內(nèi)涵，也可以緩解沖浪者在閱讀時(shí)可能產(chǎn)生的視覺(jué)疲乏。 七、文字信息的設(shè)計(jì)和編排 編排網(wǎng)頁(yè)上的文字信息時(shí)需要考慮字體、字號(hào)、字符間距和行間距、段落版式、段間距

10、等許多要素。從美學(xué)觀點(diǎn)看，既保證網(wǎng)頁(yè)整體視覺(jué)效果的和諧、統(tǒng)一，又保證全部文字信息的醒目和易于識(shí)別，這是評(píng)價(jià)此類工作的最高標(biāo)準(zhǔn)。從技術(shù)方面來(lái)說(shuō)，今日的網(wǎng)頁(yè)設(shè)計(jì)師大多使用CSS樣式來(lái)把握和編排文字信息，但在使用某種客戶端未必安裝的特殊字體時(shí)，設(shè)計(jì)師通常會(huì)將文字信息保存為圖片或Flash對(duì)象，以確保全部設(shè)計(jì)元素在客戶端掃瞄器中的正確呈現(xiàn)。 對(duì)比是另一個(gè)設(shè)計(jì)和編排文字信息時(shí)必需考慮的問(wèn)題。不同的字體、不同的字號(hào)、不同的文字顏色、不同的字符間距在視覺(jué)效果上都可以形成猛烈的對(duì)比。細(xì)心設(shè)計(jì)的文字對(duì)比可以為網(wǎng)頁(yè)空間增加活力，而過(guò)于泛濫的對(duì)比因素也會(huì)讓整個(gè)網(wǎng)頁(yè)混亂不堪。 八、圖片和動(dòng)畫 在網(wǎng)頁(yè)中使用圖片時(shí)，同樣

11、需要考慮美學(xué)和技術(shù)兩方面的問(wèn)題。首先，圖片的顏色、形狀、風(fēng)格等確定要與網(wǎng)頁(yè)的整體風(fēng)格相適應(yīng)，圖片所要傳達(dá)的理念或信息內(nèi)容應(yīng)當(dāng)盡可能清晰、精確這是美學(xué)方面的考量。其次，網(wǎng)頁(yè)設(shè)計(jì)師必需知道二值、灰度、256色及真彩色圖片之間的差異，懂得矢量圖片和點(diǎn)陣圖片各自的優(yōu)缺點(diǎn)，并盡量?jī)?yōu)化圖片的比特大小以削減網(wǎng)頁(yè)的傳輸時(shí)間這是技術(shù)方面的考量。只有在美學(xué)和技術(shù)兩方面都讓人滿意的圖片才有資格消逝在網(wǎng)頁(yè)的整體設(shè)計(jì)中。 動(dòng)畫元素通常可以很自然地成為網(wǎng)頁(yè)上最吸引人的視覺(jué)焦點(diǎn)，由于運(yùn)動(dòng)的東西總是比靜止的東西更簡(jiǎn)潔抓住人們的眼球。也正是基于這樣的緣由，我們需要用更為慎重的態(tài)度來(lái)準(zhǔn)備在何時(shí)或何地使用動(dòng)畫元素。我見過(guò)太多被動(dòng)畫

12、元素搞砸的網(wǎng)頁(yè)，那些網(wǎng)頁(yè)的設(shè)計(jì)師無(wú)一例外地犯了濫用動(dòng)畫的錯(cuò)誤。其實(shí)，要推斷一個(gè)動(dòng)畫元素是否有存在的必要，大家可以使用下面這個(gè)簡(jiǎn)潔的法則：假如某個(gè)動(dòng)畫元素只具有裝飾網(wǎng)頁(yè)的作用，而無(wú)法讓信息的呈現(xiàn)更清晰或更生動(dòng)，那么，你應(yīng)當(dāng)毫不遲疑地刪掉它。 九、網(wǎng)頁(yè)空間中的運(yùn)動(dòng)趨勢(shì)線 許多網(wǎng)頁(yè)的視覺(jué)空間中都隱藏了一條富有活力的運(yùn)動(dòng)趨勢(shì)線。當(dāng)你觀看某個(gè)頁(yè)面時(shí)，假如你的直覺(jué)不斷告知你，頁(yè)面中的某些設(shè)計(jì)元素(比如某些連接在一起的色塊，某些相互影響的圖片，特別是某些具有猛烈示意作用的線條)構(gòu)成了一個(gè)模糊可見的、朝某個(gè)方向運(yùn)動(dòng)的元素集合，那么，你不妨直接用畫筆勾出一條能夠反映該元素集合運(yùn)動(dòng)趨勢(shì)的線條，就像畫家在做人體寫生

13、時(shí)通常要先畫出一條反映人體運(yùn)動(dòng)趨勢(shì)的線條一樣我們可以把這條線叫做網(wǎng)頁(yè)空間中的運(yùn)動(dòng)趨勢(shì)線。 從運(yùn)動(dòng)趨勢(shì)線的方向和形狀動(dòng)身，我們可以很簡(jiǎn)潔地找出每一個(gè)視覺(jué)元素與整體視覺(jué)空間的交互關(guān)系。一旦我們發(fā)覺(jué)，某個(gè)視覺(jué)元素并沒(méi)有為運(yùn)動(dòng)趨勢(shì)線做出任何貢獻(xiàn)，反而有可能阻礙運(yùn)動(dòng)趨勢(shì)線的流暢延長(zhǎng)，那么，這個(gè)視覺(jué)元素多半就沒(méi)有任何存在的必要。 此外，在開頭一個(gè)新的網(wǎng)頁(yè)設(shè)計(jì)前，假如設(shè)計(jì)師能依據(jù)靈感的示意，在紙上首先畫出一條運(yùn)動(dòng)趨勢(shì)線，然后依據(jù)運(yùn)動(dòng)趨勢(shì)線的延長(zhǎng)規(guī)律設(shè)計(jì)全部視覺(jué)元素的形狀、顏色和位置，如此得到的網(wǎng)頁(yè)設(shè)計(jì)就更有可能表現(xiàn)出非同一般的視覺(jué)效果來(lái)。 十、使用Web標(biāo)準(zhǔn)設(shè)計(jì)網(wǎng)頁(yè) 很多網(wǎng)頁(yè)設(shè)計(jì)師只考慮網(wǎng)頁(yè)的視覺(jué)效果，卻從不關(guān)懷網(wǎng)頁(yè)的具體實(shí)現(xiàn)技術(shù)。結(jié)果，現(xiàn)在的Web世界里有太多太多足夠漂亮但卻不符合技術(shù)標(biāo)準(zhǔn)的網(wǎng)頁(yè)，它們要么無(wú)法支持Firefox、Safari等非IE掃瞄器，要么不能在用戶轉(zhuǎn)變?nèi)笔∽煮w大小時(shí)保持原貌。更可怕的是，這些不符合技術(shù)標(biāo)準(zhǔn)的網(wǎng)頁(yè)內(nèi)部多半是一堆充斥著 、標(biāo)簽的意大利面條，沒(méi)有哪個(gè)掃瞄器會(huì)寵愛這些下載和顯示效率都特殊低下