1、網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：現(xiàn)在這篇文章有點(diǎn)像是上一篇文章的延續(xù)。在上一篇文章里面我們重點(diǎn)討論了對(duì) 比、重復(fù)、對(duì)齊、分割在網(wǎng)頁(yè)中的應(yīng)用。以下內(nèi)容我以幾個(gè)優(yōu)秀的網(wǎng)頁(yè)作品作為實(shí)例，來(lái)說(shuō)明卓越設(shè)計(jì)一直遵循的原則！優(yōu)秀設(shè)計(jì)和卓越設(shè)計(jì)之間的區(qū)別是比較小的。一般人可能無(wú)法解釋說(shuō)明卓越的設(shè)計(jì)的具體差別，但他們可以找到自己喜歡的網(wǎng)頁(yè)設(shè)計(jì)作品。通過(guò)對(duì)照一下幾個(gè) 優(yōu)秀作品，我總結(jié)了一下作為卓越設(shè)計(jì)的幾個(gè)細(xì)節(jié)差別。現(xiàn)在這篇文章有點(diǎn)像是上一篇文章的延續(xù)。在上一篇文章里面我們重點(diǎn)討論了對(duì) 比、重復(fù)、對(duì)齊、分割在網(wǎng)頁(yè)中的應(yīng)用。以下內(nèi)容我以幾個(gè)優(yōu)秀的網(wǎng)頁(yè)作品作為實(shí)例，來(lái)說(shuō)明卓越設(shè)計(jì)一直遵循的原則！一、合理使用漸變漸變不要濫

2、用，更不要把漸變弄的跟彩虹似的，否則你的網(wǎng)頁(yè)作品看起來(lái)比較外行。總而言之，合理的使用漸變對(duì)于優(yōu)秀網(wǎng)站設(shè)計(jì)是有幫助的。漸變、散景結(jié)合使用Newism網(wǎng)站色彩豐富，但微妙的漸變與背景在視覺上結(jié)合的很到位。如果你也有興趣在photoshop里面做這個(gè)散景效果，可以去Abduzeedos tutorial網(wǎng)站上面學(xué)習(xí)一下。漸變、投影、紋理結(jié)合使用。OnWired網(wǎng)站應(yīng)用了這些設(shè)計(jì)技巧，顯而易見，他的設(shè)計(jì)作品效果是很棒的！自始自終OnWired網(wǎng)站設(shè)計(jì)在應(yīng)用漸變、投影、質(zhì)感這方面是恰到好處 的。我也特別喜歡設(shè)計(jì)師設(shè)計(jì)的這些。二、留白留白一詞往往容易被誤解從字面解釋 的空白。網(wǎng)頁(yè)設(shè)計(jì)較 為準(zhǔn)確的描述則是網(wǎng)

3、頁(yè)各個(gè)板塊元素之間的空間范圍。進(jìn)一步分析看看A List Apart是如何定義它 的。“留白”對(duì)于網(wǎng)頁(yè)設(shè)計(jì)是很重要的，留白不至于讓你頁(yè)面元素都堆積在一起。對(duì)于年輕設(shè)計(jì)師來(lái)說(shuō)留白可能是一個(gè)大問(wèn)題，他們?cè)谧鲈O(shè)計(jì)的時(shí)候?qū)⒄麄€(gè)頁(yè)面放的滿滿 的，沒有給頁(yè)面足夠的“呼吸空間”。這對(duì)于他們來(lái)說(shuō)可能不是什么問(wèn)題，如果內(nèi)容放不下的話，他們可以借助瀏覽器的滾條來(lái)擴(kuò)大頁(yè)面的空間。優(yōu)秀的留白與巧妙的分割線Snook網(wǎng)站布局方面設(shè) 計(jì)的是比較合理、舒服的。同時(shí)注意一下，網(wǎng)站里面的虛線將各個(gè)板塊區(qū)分開了，這樣我們?cè)跒g覽網(wǎng)站的時(shí)候就一目了然了。抽象圖形沙發(fā)采用抽象、美觀、簡(jiǎn)約的方法。通過(guò)使用無(wú)背景或雜亂的圖像，給瀏覽者的空

4、間 是流暢、舒服的。三、網(wǎng)格布局網(wǎng)頁(yè)設(shè)計(jì)的網(wǎng)格布局最初的靈感是借鑒了報(bào)紙的排版。但是如果你仔細(xì)觀察周圍的事物都可以找到網(wǎng)格現(xiàn)象，從好的設(shè)計(jì)到生活中的交通網(wǎng)。960和藍(lán)圖可能是兩個(gè)最流行的網(wǎng)格布局。我個(gè)人比較喜歡960網(wǎng)格布局，它簡(jiǎn)單、重點(diǎn) 突出。你可以用任意對(duì)齊方式來(lái)安排你網(wǎng)站的元素，對(duì)齊在設(shè)計(jì)一個(gè)復(fù)雜的頁(yè)面時(shí)，能使你的網(wǎng)站看起來(lái)比較精致、井然有序，并且你在網(wǎng)頁(yè)布局里 面添加任何模塊內(nèi)容時(shí)候都不用考慮其他的模塊內(nèi)容。綜合使用網(wǎng)格布局Poccuo網(wǎng)站綜合使用了網(wǎng)格布局，它 采用3列和5列相結(jié)合的布局方式。給人以視覺吸引力和視覺空間。博客采用列布局我比較喜歡Web Design Ledger首頁(yè)最

5、上面的展現(xiàn)方式，他把最新的公告內(nèi)容放大同時(shí)放到頁(yè)面最頂部，其他的以3列的方式排列。大量使用相等的列布局Ecoki漂亮的網(wǎng)頁(yè)布局顯而易見采用的是4列、2行布局，同時(shí)幻燈片、縮略圖、最新的審 查也是采用相同的方式。四、改善字體應(yīng)用字體應(yīng)用困擾著大多數(shù)的設(shè)計(jì)師。如果要想提高你的設(shè)計(jì)水平，字體在其中扮演著重要的角色。不但在可讀性方面也扮演著重要的角色，同時(shí)還可以增加設(shè)計(jì)作品的 氛圍。用對(duì)比字體引起關(guān)注SimpleBits網(wǎng)站在應(yīng)用各種對(duì)比 字體引導(dǎo)瀏覽者的注意力方面做的很棒。字體對(duì)比可以采取不同字體對(duì)比、各種顏色對(duì)比、字體大小對(duì)比等形式。不要認(rèn)為字體就像標(biāo)志這個(gè)網(wǎng)站看齊來(lái)就非常的漂亮、舒服，但你可以說(shuō)

6、出你的想法和感受來(lái)描述這個(gè)感覺。尤其在間距、字體選擇等字體應(yīng)用這方面做的挺完美的，我就被他的logo 字體應(yīng)用迷住了。五、明確而有效的導(dǎo)航良好的導(dǎo)航對(duì)于網(wǎng)頁(yè)設(shè)計(jì)來(lái)說(shuō)很重要，如果瀏覽者不能快速、便捷的找到它，他們就很有可能去別的網(wǎng)站了。這是我們所不愿意看到的，同時(shí)我知道 MyInkBlog進(jìn)行了一些改進(jìn)，并將在以后重新設(shè)計(jì)中進(jìn)行徹底的改進(jìn)。博客導(dǎo)航下面顯示分類導(dǎo)航在大多數(shù)情況下，博客導(dǎo)航放在頁(yè)面的同時(shí)將分類作為第二導(dǎo)航放在頁(yè)面的邊欄。Tutorial9做 了一件了不起的事情，他把瀏覽者關(guān)心的photoshop資源以生動(dòng)的方式展現(xiàn)出來(lái)了，并且在鼠標(biāo)經(jīng)過(guò)二級(jí)導(dǎo)航的時(shí)候有一個(gè)高亮效果。切換不同的圖標(biāo)效

7、果圖標(biāo)切換效果在web2.0網(wǎng)頁(yè)設(shè)計(jì)里面無(wú)論是否需要被大量、胡亂的應(yīng)用，并且成為一種趨勢(shì)。并不是所有的都是不好的，web2.0里用的不好的原因是過(guò) 度使用、業(yè)余使用造成的。在大多數(shù)情況下，適當(dāng)?shù)膽?yīng)用圖標(biāo)切換按鈕是相當(dāng)有效的。Carsonified網(wǎng)站在導(dǎo)航上就運(yùn)用了單色、簡(jiǎn)潔的圖標(biāo)切換效果， 并且于他的網(wǎng)站整體感覺想吻合。六、使用漂亮實(shí)用的頁(yè)腳一開始我們就將頁(yè)腳作為次要的內(nèi)容，在頁(yè)腳里面放置一些沒有多大用處的內(nèi)容。在設(shè)計(jì)的時(shí)候僅僅花費(fèi)一點(diǎn)點(diǎn)心思在它上面。現(xiàn)在頁(yè)腳對(duì)于整體設(shè)計(jì)來(lái)說(shuō)變的越來(lái) 越重要了，千萬(wàn)別錯(cuò)過(guò)好的頁(yè)腳完成你設(shè)計(jì)。展示大量的信息和證書這個(gè)頁(yè)腳主要展示了網(wǎng)站介紹和版權(quán)等必要的信息。B

8、rian Hoff網(wǎng)站更是添加了一些個(gè)性、有趣的內(nèi)容在里面。通過(guò)3列布局方式展示了作者的工作和建議性的內(nèi)容。添加搜索功能Elliot Jay Stocks網(wǎng) 站在底部添加了一個(gè)特大的搜索框細(xì)節(jié)讓網(wǎng)頁(yè)設(shè)計(jì)與眾不同細(xì)節(jié)使得這個(gè)世界從平凡變得不平凡一輛豪華汽車與傳統(tǒng)汽車擁有同樣數(shù)量的車輪、座位、門窗，但是使得它在競(jìng)爭(zhēng)中脫穎而出的卻是花費(fèi)在細(xì)節(jié)上的時(shí)間。加熱真皮座椅，一按即啟動(dòng)引擎，無(wú)鑰車門開關(guān)，自動(dòng)泊車系統(tǒng)，豐富的數(shù)字電臺(tái)等等使得它成為一輛昂貴的新型車。同樣的規(guī)則也適用于網(wǎng)頁(yè)設(shè)計(jì)。愿意花費(fèi)時(shí)間專注于細(xì)節(jié)的網(wǎng)頁(yè)設(shè)計(jì)師能夠獲得擁有更多價(jià)值的設(shè)計(jì)。這里的關(guān)鍵詞就是價(jià)值。我們無(wú)法保證建立網(wǎng)站所花費(fèi)的時(shí)間和其

9、結(jié)果所帶來(lái)的價(jià)值之間有直接的關(guān)系，總有一些細(xì)節(jié)比其他更加重要，關(guān)鍵是要能夠確定哪些細(xì)節(jié)更具有影響力。增加價(jià)值的細(xì)節(jié)這一類型的細(xì)節(jié)是我們?cè)敢庠趯徝缹用嬷饣ㄙM(fèi)額外時(shí)間以改進(jìn)我們工作的細(xì)節(jié)。我們希望專注于可以深入改變用戶體驗(yàn)的視覺調(diào)整，例如用戶對(duì)該網(wǎng)站的主題和消息的體驗(yàn)或者他們?nèi)绾螘秤尉W(wǎng)站。一般的沒有建站經(jīng)驗(yàn)的網(wǎng)站訪問(wèn)者，無(wú)法指出某些細(xì)微差別來(lái)的用戶體驗(yàn)改善，但是如果這些細(xì)節(jié)被移除，用戶將在感知和可用性方面感覺到明顯的差異。這些就是我們?cè)敢饣ㄙM(fèi)時(shí)間的細(xì)節(jié)。那么一個(gè)設(shè)計(jì)細(xì)節(jié)到底如何為網(wǎng)站帶來(lái)附加價(jià)值呢？訣竅就在于用戶體驗(yàn)。網(wǎng)站設(shè)計(jì)師應(yīng)該能夠出色的理解負(fù)空間、對(duì)比度、形狀、顏色和所有不同的視覺元素在用

10、戶使用和體驗(yàn)一個(gè)網(wǎng)站設(shè)計(jì)時(shí)所起的作用。真正令人驚訝的是設(shè)計(jì)者僅僅需要操縱幾個(gè)像素就可以發(fā)生很大的差異，使之產(chǎn)生更大的影響。這些差異到底是什么？進(jìn)一步觀察我覺得Photoshop最令人舒服的是當(dāng)我將圖片放大到500%甚至更大時(shí)，它看上去就像在家一樣舒服。我們來(lái)仔細(xì)研究一些相當(dāng)成功的用細(xì)微細(xì)節(jié)引導(dǎo)用戶體驗(yàn)方面圖片吧。以Concentrate 網(wǎng)站為例，它看起來(lái)很適合我們初次集中精力來(lái)欣賞。從一個(gè)高層次的視角開始，我們可以看到Concentrate網(wǎng)站的使用了一個(gè)富有創(chuàng)意視覺技巧。除了這罐橙汁，我們看到一個(gè)橙色為主題的調(diào)色板和背景，很好的模擬了真實(shí)的橙子的果肉口感。進(jìn)一步研究，我們發(fā)現(xiàn)它使

11、用了CSS3為文本增加一些陰影來(lái)增加與背景的對(duì)比。為了真正的欣賞細(xì)節(jié)，我們需要在進(jìn)一步的研究。像素級(jí)完善真正的細(xì)節(jié)應(yīng)用在像素級(jí)。我們?cè)賮?lái)看Concentrate的快捷按鈕周圍，靠近網(wǎng)頁(yè)布局頂端的部分。首先，按鈕背后的陰影將頁(yè)面上的這部分突出出來(lái)。該區(qū)域頂端和底部的兩個(gè)簡(jiǎn)單的單像素線是一個(gè)簡(jiǎn)潔的設(shè)計(jì)方式，它使得這個(gè)區(qū)域在視覺效果上更明顯的區(qū)別于頁(yè)面上的其他元素。其中的一個(gè)單像素線條更引人注意，這是因?yàn)樗褂昧肆脸壬Ｋ鼮閮烧咧g的陰影和背景提供了對(duì)比，但是真正起作用的卻是第二個(gè)暗橙色的線條。兩個(gè)線條相互配合起來(lái)封鎖了這個(gè)頂部區(qū)域。差異當(dāng)這個(gè)頁(yè)面不再包括這些線條的設(shè)計(jì)的時(shí)候，差異就能最好的表現(xiàn)出來(lái)

12、。下面，我將移去這些線條來(lái)向大家展示兩個(gè)像素能夠帶來(lái)怎樣的不同。微妙的陰影陰影效果對(duì)于網(wǎng)頁(yè)設(shè)計(jì)者來(lái)說(shuō)已經(jīng)不陌生了。許多網(wǎng)站很早就開始使用它們并且經(jīng)常模擬平面深度及二維介質(zhì)。陰影和高亮可以微妙但強(qiáng)有力地改善我們網(wǎng)站的用戶體驗(yàn)。我們?cè)谠O(shè)計(jì)中采用CSS3，它可以帶來(lái)的宏偉的差異讓我們很容易為之興奮不已。而對(duì)于我來(lái)說(shuō)，真正值得興奮是有多少細(xì)節(jié)工作可以從圖片處理軟件轉(zhuǎn)移到我們網(wǎng)站的代碼上去。還是來(lái)看這個(gè)Concentrate網(wǎng)站，它是一個(gè)很不錯(cuò)的例子，使用巧妙而有效地使用文字陰影效果使網(wǎng)站內(nèi)容更容易閱讀。這里以兩種方式使用了CSS3的text-shadow屬性。首先紅色的標(biāo)題在與背景顏色相近的情況下，被

13、賦予淡淡的陰影以產(chǎn)生內(nèi)嵌式的效果。基次在段落后面簡(jiǎn)單地給白色一點(diǎn)發(fā)射效果。差異比較上面的截圖以及同樣的頁(yè)面在IE8（不支持text-shadow屬性）下渲染的效果，我們就能發(fā)現(xiàn)它更難看得很多。值得指出的是這個(gè)網(wǎng)站賣的是Mac軟件，所以自然地不那么重視IE用戶的體驗(yàn)了。導(dǎo)航細(xì)微差別除了增強(qiáng)易讀性和強(qiáng)調(diào)可能的網(wǎng)站操作，細(xì)節(jié)對(duì)網(wǎng)站導(dǎo)航也有很大的幫助。任何網(wǎng)頁(yè)最重要的部分之一就是如何將用戶導(dǎo)航到另一個(gè)頁(yè)面。畢竟鏈接是起初使得網(wǎng)頁(yè)之所以稱之為網(wǎng)頁(yè)的核心，所以為什么不多花一點(diǎn)點(diǎn)時(shí)間在適航性上呢？舉個(gè)例子，我們來(lái)看 Lipperhey 站點(diǎn)。除了為導(dǎo)航的活動(dòng)狀態(tài)選擇好的顏色以外，我們發(fā)現(xiàn)

14、它的設(shè)計(jì)為網(wǎng)站的主導(dǎo)航欄添加了一些用趣的細(xì)節(jié)。Home按鈕由于一些顏色變化之外的原因而很顯眼。首先我們可以看到它從導(dǎo)航欄下沉了幾個(gè)像素。其次，按鈕背后被加上了陰影并且對(duì)透明度做了輕微的調(diào)整。這兩個(gè)細(xì)節(jié)一起為這個(gè)鏈接賦予了附加維度的感覺，指示了它的重要性及激活狀態(tài)。差異再看一下沒有上面提到的細(xì)節(jié)的導(dǎo)航，我們發(fā)現(xiàn)很多令人興奮的東西都沒了并且我們的激活鏈接會(huì)有完全不同的樣子和感覺。細(xì)節(jié)更進(jìn)一步我們研究了一種運(yùn)用CSS3的一些新功能來(lái)輔助我們?cè)O(shè)計(jì)的方法(text-shadow)。但CSS3的強(qiáng)大遠(yuǎn)不只是陰影。CSS3動(dòng)畫，表現(xiàn)為transform和transition的屬性，給我們的細(xì)節(jié)工作增加了額外

15、的工具。只要使用得當(dāng)，CSS3動(dòng)畫為我們的網(wǎng)頁(yè)元素添加高效的動(dòng)畫效果，而不需要借助Flash或JavaScript。在細(xì)節(jié)方面，動(dòng)畫允許我們?cè)诟鞣N輸入情況向用戶提供流暢的反饋。例如為鏈接的hover狀態(tài)或按鈕點(diǎn)擊添加過(guò)渡動(dòng)畫，可以告訴用戶他們鼠標(biāo)正懸停在（或觸摸，對(duì)于觸屏移動(dòng)設(shè)備）一個(gè)活動(dòng)的元素上面。與網(wǎng)站細(xì)節(jié)相伴的工作的美好在于通過(guò)進(jìn)一步努力，我們?nèi)匀豢梢詾槲覀兊挠脩籼峁┎糠謨r(jià)值，而不需要疏遠(yuǎn)那些使用過(guò)時(shí)的瀏覽器的用戶。關(guān)鍵之處在于我們要使用所有這些技術(shù)來(lái)為已經(jīng)很可靠的網(wǎng)頁(yè)設(shè)計(jì)增加價(jià)值，沒有一個(gè)基本的可靠的設(shè)計(jì)而空談學(xué)習(xí)這些技術(shù)就是本末倒置。網(wǎng)站還能在哪些細(xì)節(jié)方面改進(jìn)來(lái)增加它的價(jià)值呢？你做過(guò)

16、的項(xiàng)目還成功地使用過(guò)哪些類型的細(xì)節(jié)技術(shù)？網(wǎng)頁(yè)設(shè)計(jì)中最常用到的設(shè)計(jì)細(xì)節(jié)前一段時(shí)間在企業(yè)管理界流行一句格言叫”細(xì)節(jié)決定成敗”。企業(yè)管理當(dāng)然不是我們這里要討論的主題，但是，把這句話放在網(wǎng)頁(yè)設(shè)計(jì)當(dāng)中的確是顛撲不破的真理。我們的眼睛和感覺總是非常敏銳的，即使是完全不了解網(wǎng)頁(yè)設(shè)計(jì)技術(shù)的人也能夠從一堆拙劣的設(shè)計(jì)作品當(dāng)中挑選出那一個(gè)優(yōu)秀的設(shè)計(jì)作品。雖然他說(shuō)不出來(lái)為什么這件東西比那些都好，但是直覺會(huì)告訴他他自己喜歡哪一個(gè)。如果別人向我們問(wèn)起為什么這件作品要優(yōu)于其它呢?我們的回答是”很大一部分原因是因?yàn)閮?yōu)秀的設(shè)計(jì)作品總是充滿了豐富的細(xì)節(jié)。”在這篇文章里，我們就從技術(shù)的角度出發(fā)，以PremiumPixels上的Re

17、dux WordPress主題設(shè)計(jì)作品為例，來(lái)總結(jié)一下在網(wǎng)頁(yè)設(shè)計(jì)中到底是哪些細(xì)節(jié)讓優(yōu)秀的作品脫穎而出。 互聯(lián)網(wǎng)的一些事一、1像素的襯線 yixieshi在頁(yè)面的頂端，你能看到一條1個(gè)像素比背景顏色略淺的水平線將純色的背景和帶有材質(zhì)的背景分隔開，如下圖： yixieshi而如果沒有這條襯線會(huì)是怎樣的一個(gè)效果，我們也來(lái)看看。 yixieshi實(shí)際上，網(wǎng)頁(yè)設(shè)計(jì)中，使用到襯線的例子非常普遍。例如下面的這個(gè)例子中，你會(huì)在包圍著”The Dorchester Hotel”文字的黑色邊框的頂部向下1個(gè)像素發(fā)現(xiàn)一條灰色的襯線。 yixieshi 而在下面這個(gè)設(shè)計(jì)好的按鈕中，綠色和黃色邊框頂部向下1個(gè)像素也能看

18、到一條顏色更淺的線條，而這條襯線制作的更為精細(xì)，因?yàn)樗鼞?yīng)用了蒙版，從頂部向下你會(huì)發(fā)現(xiàn)這條襯線漸漸隱去了。另外，在”Add To Cart”和”$9.99兩個(gè)文字之間的分隔線實(shí)際上是兩條線，左邊顏色深一些，右邊顏色淺一些，這樣就能產(chǎn)生線條的凹陷效果。 yixieshi 之所以要使用襯線，是為了體現(xiàn)物體在2D效果上的立體感，而立體感的體現(xiàn)必須要有陰影和高光。陰影我們通常使用圖層樣式來(lái)實(shí)現(xiàn)，而高光效果的實(shí)現(xiàn)，最常用的技巧之一就是使用襯線了。上面的三個(gè)例子的襯線都在物體的頂部，說(shuō)明光線是從上向下照射的，高光處于物體的頂部。而如果光下從下向上照射的話，高光就應(yīng)該在底部了，那我們就應(yīng)該將襯線放置于物體的下方。所以在襯線的使用上，我們始終要問(wèn)自己這幾個(gè)問(wèn)題，”我在這里使用了襯線，那么光源在哪里?”"如果光源在這里的話，陰影應(yīng)該出現(xiàn)在什么位置?”完成了這兩個(gè)回答，設(shè)計(jì)出來(lái)的物體的立體感才能更加真實(shí)。 互聯(lián)網(wǎng)的一些事二、細(xì)微的材質(zhì) 互聯(lián)網(wǎng)的一些事Redux主題真是解釋背景材質(zhì)的絕佳案例。因?yàn)樵谡麄€(gè)頁(yè)面中，從上至下使用了三種不同的材質(zhì)作為頁(yè)面的背景。上面的深藍(lán)色部分應(yīng)用的是坑坑洼洼凹凸不平的材質(zhì)，中間黑色部分應(yīng)用的是紡織布的材質(zhì)，而底部應(yīng)用的是雜色的材質(zhì)。當(dāng)然，這三種材質(zhì)都是非常