2011年3月10日星期四

細節讓網頁設計與眾不同

細節讓網頁設計與眾不同
一輛豪華汽車與傳統汽車擁有同樣數量的車輪、座位、門窗,但是使得它在競爭中脫穎而出的卻是花費在細節上的時間。加熱真皮座椅,一按即啟動引擎,無鑰車門開關,自動泊車系統,豐富的數字電台等等使得它成為一輛昂貴的新型車。同樣的規則也適用於網頁設計。願意花費時間專注於細...   一輛豪華汽車與傳統汽車擁有同樣數量的車輪、座位、門窗,但是使得它在競爭中脫穎而出的卻是花費在細節上的時間。加熱真皮座椅,一按即啟動引擎,無鑰車門開關,自動泊車系統,豐富的數字電台等等使得它成為一輛昂貴的新型車。
  同樣的規則也適用於網頁設計。願意花費時間專注於細節的網頁設計師能夠獲得擁有更多價值的設計。這裡的關鍵詞就是價值。我們無法保證建立網站所花費的時間和其結果所帶來的價值之間有直接的關係,總有一些細節比其他更加重要,關鍵是要能夠確定哪些細節更具有影響力。
  增加價值的細節
這一類型的細節是我們願意在審美層面之外花費額外時間以改進我們工作的細節。我們希望專注於可以深入改變用戶體驗的視覺調整,例如用戶對該網站的主題和消息的體驗或者他們如何暢遊網站。
一般的沒有建站經驗的網站訪問者,無法指出某些細微差別來的用戶體驗改善,但是如果這些細節被移除,用戶將在感知和可用性方面感覺到明顯的差異。這些就是我們願意花費時間的細節。
那麼一個設計細節到底如何為網站帶來附加價值呢?訣竅就在於用戶體驗。網頁設計師應該能夠出色的理解負空間、對比度、形狀、顏色和所有不同的視覺元素在用戶使用和體驗一個網站設計時所起的作用。真正令人驚訝的是設計者僅僅需要操縱幾個像素就可以發生很大的差異,使之產生更大的影響。
  這些差異到底是什麼?
  進一步觀察
我覺得Photoshop最令人舒服的是當我將圖片放大到500%甚至更大時,它看上去就像在家一樣舒服。我們來仔細研究一些相當成功的用細微細節引導用戶體驗方面圖片吧。
以網站為例,它看起來很適合我們初次集中精力來欣賞。從一個高層次網頁設計的視角開始,我們可以看到網站的使用了一個富有創意視覺技巧。
  差異
當這個頁面不再包括這些線條的設計的時候,差異就能最好的表現出來。下面,我將移去這些線條來向大家展示兩個像素能夠帶來怎樣的不同。
  微妙的陰影
陰影效果對於網頁設計者來說已經不陌生了。許多網站很早就開始使用它們並且經常模擬平面深度及二維介質。陰影和高亮可以微妙但強有力地改善我們網站的用戶體驗。
我們在設計中採用CSS3,它可以帶來的宏偉的差異讓我們很容易為之興奮不已。而對於我來說,真正值得興奮是有多少細節工作可以從圖片處理軟件轉移到我們網站的代碼上去。
還是來看這個網站,它是一個很不錯的例子,使用巧妙而有效地使用文字陰影效果使網站內容更容易閱讀。這里以兩種方式使用了CSS3的text-shadow屬性。首先紅色的標題在與背景顏色相近的情況下,被賦予淡淡的陰影以產生內嵌式的效果。基次在段落後面簡單地給白色一點發射效果。

没有评论:

发表评论