網(wǎng)頁設(shè)計的細(xì)節(jié)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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