巨群資訊

網站設計 製作不難，太多太多人都會。但如果在進行 網頁設計 時能稍微注意一下細節的設計，就會讓網頁與眾不同，進而達到提高用戶體驗，提高SEO效果。

一輛豪華汽車與傳統汽車擁有同樣數量的車輪、座位、門窗，但是使得它在競爭中脫穎而出的卻是花費在細節上的時間。加熱真皮座椅，一按即啟動引擎，無鑰車門開關，自動泊車系統，豐富的數位電臺等等使得它成為一輛昂貴的新型車。

同樣的規則也適用於網頁設計。願意花費時間專注於細節的網頁設計師能夠獲得擁有更多價值的設計。這裡的關鍵字就是價值。我們無法保證建立網站所花費的時間和其結果所帶來的價值之間有直接的關係，總有一些細節比其他更加重要，關鍵是要能夠確定哪些細節更具有影響力。

增加價值的網頁設計細節

這一類型的細節是我們願意在審美層面之外花費額外時間以改進我們工作的細節。我們希望專注於可以深入改變使用者體驗的視覺調整，例如使用者對該網站的主題和消息的體驗或者他們如何暢遊網站。

一般的沒有建站經驗的網站訪問者，無法指出某些細微差別來的用戶體驗改善，但是如果這些細節被移除，用戶將在感知和可用性方面感覺到明顯的差異。這些就是我們願意花費時間的細節。

那麼一個設計細節到底如何為網站帶來附加價值呢？訣竅就在於用戶體驗。網站設計師應該能夠出色的理解負空間、對比度、形狀、顏色和所有不同的視覺元素在使用者使用和體驗一個網站設計時所起的作用。真正令人驚訝的是設計者僅僅需要操縱幾個圖元就可以發生很大的差異，使之產生更大的影響。

這些差異到底是什麼？

進一步觀察

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

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

例如橙汁來說，我們看到一個橙色為主題的調色板和背景，很好的模擬了真實的柳丁的果肉口感。進一步研究，我們發現它使用了CSS3為文本增加一些陰影來增加與背景的對比。為了真正的欣賞細節，我們需要在進一步的研究。

像素級完善

真正的細節應用在像素級。我們再來看Concentrate的快捷按鈕周圍，靠近網頁佈局頂端的部分。首先，按鈕背後的陰影將頁面上的這部分突出出來。該區域頂端和底部的兩個簡單的單圖元線是一個簡潔的設計方式，它使得這個區域在視覺效果上更明顯的區別於頁面上的其他元素。

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

像素級完善的差異

當這個頁面不再包括這些線條的設計的時候，差異就能最好的表現出來。將移去這些線條來向大家展示兩個圖元能夠帶來怎樣的不同。

微妙的陰影

陰影效果對於網頁設計者來說已經不陌生了。許多網站很早就開始使用它們並且經常模擬平面深度及二維介質。陰影和高亮可以微妙但強有力地改善我們網站的用戶體驗。

我們在設計中採用CSS3，它可以帶來的宏偉的差異讓我們很容易為之興奮不已。而對於我來說，真正值得興奮是有多少細節工作可以從圖片處理軟體轉移到我們網站的代碼上去。

還是來看這個Concentrate網站，它是一個很不錯的例子，使用巧妙而有效地使用文字陰影效果使網站內容更容易閱讀。這裡以兩種方式使用了CSS3的text-shadow屬性。首先紅色的標題在與背景顏色相近的情況下，被賦予淡淡的陰影以產生內嵌式的效果。基次在段落後面簡單地給白色一點發射效果。

微妙陰影的差異

比較截圖以及同樣的頁面在IE8（不支援text-shadow屬性）下渲染的效果，我們就能發現它更難看得很多。

值得指出的是這個網站賣的是Mac軟體，所以自然地不那麼重視IE用戶的體驗了。

導航細微差別

除了增強易讀性和強調可能的網站操作，細節對網站導航也有很大的幫助。任何網頁最重要的部分之一就是如何將使用者導航到另一個頁面。畢竟連結是起初使得網頁之所以稱之為網頁的核心，所以為什麼不多花一點點時間在適航性上呢？舉個例子，我們來看 Lipperhey 網站。

除了為導航的活動狀態選擇好的顏色以外，我們發現它的設計為網站的主巡覽列添加了一些用趣的細節。

Home按鈕由於一些顏色變化之外的原因而很顯眼。首先我們可以看到它從巡覽列下沉了幾個圖元。其次，按鈕背後被加上了陰影並且對透明度做了輕微的調整。這兩個細節一起為這個連結賦予了附加維度的感覺，指示了它的重要性及啟動狀態。

導航細微差別的差異

再看一下沒有上面提到的細節的導航，我們發現很多令人興奮的東西都沒了並且我們的啟動連結會有完全不同的樣子和感覺。

細節更進一步

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

只要使用得當，CSS3動畫為我們的網頁元素添加高效的動畫效果，而不需要借助Flash或JavaScript。在細節方面，動畫允許我們在各種輸入情況向使用者提供流暢的回饋。例如為連結的hover狀態或按鈕點擊添加過渡動畫，可以告訴使用者他們滑鼠正懸停在（或觸摸，對於觸屏移動設備）一個活動的元素上面。

與網站細節相伴的工作的美好在於通過進一步努力，我們仍然可以為我們的使用者提供部分價值，而不需要疏遠那些使用過時的流覽器的用戶。關鍵之處在於我們要使用所有這些技術來為已經很可靠的網頁設計增加價值，沒有一個基本的可靠的設計而空談學習這些技術就是本末倒置。

轉貼來源：SEOHOUSE

參考文獻：

1.賴逸婷（2007）。網站體驗品質評估之研究。國立雲林科技大學視覺傳達設計研究所碩士論文，未出版。

2.張婷玥（2006）。顧客體驗與體驗品質之概念性研究。國立政治大學企業管理研究所碩士論文，未出版。

3.黃佳惠（2005）。體驗品質、滿意度及行為意向關係之研究－以華陶窯為例。朝陽科技大學休閒事業管理系碩士論文，未出版。

關聯關鍵字：

網頁設計、網路行銷、關鍵字行銷、網站設計、網站代管、程式設計、SEO關鍵字、廣告設計、網路開店、關鍵字排名、網頁設計公司、台南網頁設計、台南網頁設計公司、台北網頁設計、台北網頁設計公司、台中網頁設計、台中網頁設計公司、關鍵字排序、關鍵字廣告、關鍵字搜尋、搜尋排序、自然排序、seo、包裝設計、平面設計、網頁製作、CIS設計、商標設計、視覺設計、logo設計、網路廣告、動畫設計、搜尋引擎優化、搜尋引擎最佳化、網路行銷活動