網(wǎng)頁設(shè)計的技巧：細(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)站所花費的時間和其結(jié)果所帶來的價值之間有直接的關(guān)系，總有一些細(xì)節(jié)比其他更加重要，關(guān)鍵是要能夠確定哪些細(xì)節(jié)更具有影響力。

　　增加價值的細(xì)節(jié)

　　這一類型的細(xì)節(jié)是我們愿意在審美層面之外花費額外時間以改進我們工作的細(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ù)空間、對比度、形狀、顏色和所有不同的視覺元素在用戶使用和體驗一個網(wǎng)站設(shè)計時所起的作用。真正令人驚訝的是設(shè)計者僅僅需要操縱幾個像素就可以發(fā)生很大的差異，使之產(chǎn)生更大的影響。

　這些差異到底是什么?

　　進一步觀察

　　我覺得Photoshop最令人舒服的是當(dāng)我將圖片放大到500%甚至更大時，它看上去就像在家一樣舒服。我們來仔細(xì)研究一些相當(dāng)成功的用細(xì)微細(xì)節(jié)引導(dǎo)用戶體驗方面圖片吧。

　　以Concentrate 網(wǎng)站為例，它看起來很適合我們初次集中精力來欣賞。從一個高層次的視角開始，我們可以看到Concentrate網(wǎng)站的使用了一個富有創(chuàng)意視覺技巧。

　　除了這罐橙汁，我們看到一個橙色為主題的調(diào)色板和背景，很好的模擬了真實的橙子的果肉口感。進一步研究，我們發(fā)現(xiàn)它使用了CSS3為文本增加一些陰影來增加與背景的對比。為了真正的欣賞細(xì)節(jié)，我們需要在進一步的研究。

像素級完善

　　真正的細(xì)節(jié)應(yīng)用在像素級。我們再來看Concentrate的快捷按鈕周圍，靠近網(wǎng)頁布局頂端的部分。首先，按鈕背后的陰影將頁面上的這部分突出出來。該區(qū)域頂端和底部的兩個簡單的單像素線是一個簡潔的設(shè)計方式，它使得這個區(qū)域在視覺效果上更明顯的區(qū)別于頁面上的其他元素。

　　其中的一個單像素線條更引人注意，這是因為它使用了亮橙色。它為兩者之間的陰影和背景提供了對比，但是真正起作用的卻是第二個暗橙色的線條。兩個線條相互配合起來封鎖了這個頂部區(qū)域。

差異

　　當(dāng)這個頁面不再包括這些線條的設(shè)計的時候，差異就能最好的表現(xiàn)出來。下面，我將移去這些線條來向大家展示兩個像素能夠帶來怎樣的不同。

微妙的陰影

　　陰影效果對于網(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)題在與背景顏色相近的情況下，被賦予淡淡的陰影以產(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)它的設(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é)更進一步

　　我們研究了一種運用CSS3的一些新功能來輔助我們設(shè)計的方法(text-shadow)。但CSS3的強大遠(yuǎn)不只是陰影。CSS3動畫，表現(xiàn)為transform和transition的屬性，給我們的細(xì)節(jié)工作增加了額外的工具。

　　只要使用得當(dāng)，CSS3動畫為我們的網(wǎng)頁元素添加高效的動畫效果，而不需要借助Flash或JavaScript。在細(xì)節(jié)方面，動畫允許我們在各種輸入情況向用戶提供流暢的反饋。例如為鏈接的hover狀態(tài)或按鈕點擊添加過渡動畫，可以告訴用戶他們鼠標(biāo)正懸停在(或觸摸，對于觸屏移動設(shè)備)一個活動的元素上面。

　　與網(wǎng)站細(xì)節(jié)相伴的工作的美好在于通過進一步努力，我們?nèi)匀豢梢詾槲覀兊挠脩籼峁┎糠謨r值，而不需要疏遠(yuǎn)那些使用過時的瀏覽器的用戶。關(guān)鍵之處在于我們要使用所有這些技術(shù)來為已經(jīng)很可靠的網(wǎng)頁設(shè)計增加價值，沒有一個基本的可靠的設(shè)計而空談學(xué)習(xí)這些技術(shù)就是本末倒置。

分享文章：網(wǎng)頁設(shè)計的技巧：細(xì)節(jié)讓網(wǎng)頁設(shè)計與眾不同
當(dāng)前地址：http://muchs.cn/news/167463.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、全網(wǎng)營銷推廣、定制網(wǎng)站、App開發(fā)、網(wǎng)站策劃、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)