為了讓你的網站脫穎而出，不僅需要有豐富的高品質的内容，同時也要兼顧網站的創新性和功能性。從使用者的角度出發好好想一下，怎樣讓你的網站使用者體驗更友好？簡單的搜尋功能是需要的，或者你也可以精心設計一下網站的導航。同時，要注意保持整個網站設計語言的一緻性。
您可能感興趣的相關文章
<a href="http://www.cnblogs.com/lhb25/p/seamless-transition-in-responsive-design.html" target="_blank">經典網頁設計：無縫過渡的響應式設計</a>
<a href="http://www.cnblogs.com/lhb25/p/20-gorgeous-websites-user-experience-in-mind.html" target="_blank">經典網頁設計：關注使用者體驗的華麗網站</a>
<a href="http://www.cnblogs.com/lhb25/archive/2012/05/16/parallax-scrolling-effect-web-design.html" target="_blank">35個立體動感的視差滾動效果網站作品</a>
<a href="http://www.cnblogs.com/lhb25/archive/2012/10/29/stunning-big-backgrounds.html" target="_blank">25個以全屏照片為背景的精美網頁作品</a>
<a href="http://www.cnblogs.com/lhb25/archive/2012/10/19/10-free-html-admin-templates.html">10套精美的免費網站背景管理系統模闆</a>
在需要的時候導航欄應該一直在那裡，而當使用者想要專注于某個特定的任務時，導航欄則應該優雅的隐藏起來。比如說，在設計一個網上商店的出納頁面時，網站的導航應該可以随時都易于使用，但同時也要注意突出像出納表單和按鈕控件之類的鮮明功能。Toybox的導航設計就恰好滿足了這些。
如下圖示，這個側邊導航給人的感覺就像是你在窺視頁面背後或者是掀開了一個玩具盒的蓋子看看裡面到底有些什麼。這個側邊導航非常友善使用，滑鼠懸停在浏覽器左側即可出現，主體部分即時出現的旋轉效果也很帶感，可以很好的引導使用者的注意力。将導航隐藏起來同時也實作了界面的簡潔，使網站的浏覽體驗非常的愉悅，因為網站并沒有留下太多無用的資訊去分散使用者的注意力。
至于其他你想知道的資訊，比如說Toybox公司的主營業務和位址，可以在頂部的一個直接呈現的導航欄裡找到。首頁的磁貼滑鼠hover效果也非常的有趣，當滑鼠懸停于某個項目的縮略圖時，其餘的項目縮略圖都後退變暗并且産生景深的效果。
互動設計師Olivier Bossel的個人作品部落格非常有趣。該網站的導航元素在滑鼠hover狀态下會産生像素爆炸式的效果（譯者注：火狐浏覽器測試通過，chrome測試無效果）。這個效果相對于網站其餘的簡潔設計來說非常有動感，由此産生強烈的對比效果。作為一個視覺元素它非常有效的促進了使用者繼續閱讀該網站，統一的視覺語言也彰顯了品牌的特點。
Tsto是一家有着簡單而創新的設計方法的設計機構，它的導航設計出乎我們的意料。螢幕的四個角都固定着一個導航元素，以架構的形式讓作品展示出來。視覺識别元素是由大粗的品紅色字型來展現。網站的層級結構非常清晰，”Work”标簽在左上角，”Contact”和”About”标簽則分布在底部。為了保持風格的一緻性，作品的标題也同樣采用了大粗的品紅色字型。
當使用者浏覽案例作品的時候，這些作品以幻燈片的形式展示出來，當滑鼠懸停在箭頭上的時候會出現下一個作品的預覽圖。案例展示圖很大，占據了頁面的大部分空間。當使用者浏覽這些大圖的時候，就能對Tsto的公司形象和作品有深入的了解。
Derek Boateng的作品集網站在頁面加載完成後用一個禮貌的”Hi”來問候訪客，并且有一個向下的箭頭指引訪客滑鼠向下滾動。頁面的總體設計非常低調，它并沒有對使用者吼叫，而是優雅的引導使用者去檢視作品。當頁面滾動到歡迎界面以下時，網站的頭部和導航欄開始收縮，讓使用者能有更大的空間去檢視作品。這個網站是導航清晰易用，主要内容得到充分展現的好例子。
擦，流碧的橫向滾動！Second Story的網站工作起來像一個平闆上的雜志app。它的革新之處在于它給人的感覺并不是一個典型的網站頁面，它是水準滾動的。内容以分欄的形式布局，每一欄内容則垂直滾動。導航欄固定在左側，這有利于控制網站的結構。在你檢視作品詳情的的時候，左側的導航欄最小化，滑鼠懸停再次放大。對于作品集的浏覽使用者可以選擇清單形式和幻燈形式。
在如此簡約大方的頁面中滾動浏覽文章标題清單，讓我感覺自己在使用一個書架（不信你試試看）。每一本的滑鼠懸停效果都将一本書籍獨立出來使使用者可以更加專注。網站對于”About”和”Contact”部分的設計也匠心獨運：當你點選其中一個标簽的時候，會出現一個下拉的頁面來顯示資訊。這是一個減少頁面跳轉的簡單方法。
然而，要檢視往期的文章并不簡單，因為網站沒有搜尋功能。當使用者要找特定的一篇文章時，他必須要一直滾動下去才能找到。這時候搜尋功能在不破壞總體設計的前提下顯得非常有用。
通過這個網站我們可以看到，一個簡單幹淨的布局，加上好玩的色彩以及有趣的動畫，能帶來如此驚人的效果！LayerVault這個網站平衡了留白和微妙的動畫來吸引它的使用者。動畫可以用來闡明一個觀點，引導使用者浏覽整個網站，甚至給出使用指南。雖然動畫并不總是起到這些作用，然而LayerVault恰如其分的使用了它，隻有當使用者浏覽到頁面的一個特定區域的時候才會出現這些動畫。結果怎樣呢？一個布局優雅的頁面配上優美的注解！
Escape Flight設計得非常精妙！新頁面的loading動畫中，logo中火箭的火焰尾氣動态效果非常好，顯得新穎時尚。導航欄固定在頂部，就像一個即将啟程的港口或者甲闆，就好像你已經來到了飛機場。下拉菜單看起來就像是一張旅行清單，和主題很搭。當你選擇了一個地點後，滑鼠往下滾，所有重要的資訊都會固定在頂部，對于旅行者來說這樣使用起來會更簡便舒适。
網站充分的利用了漂亮的攝影圖檔，Escape Flight使圖檔全屏顯示，或許這正是你從一個旅行類網站想要得到的。它讓你略微感受到即将到來的旅程，并且優雅的展示出目的地的美景。當你滑鼠懸停在某個地點的縮略圖上方時，你将發現所有你想要知道的：票價、天氣狀況、航班時間以及旅行時長。你還想知道更多嗎？
這個網站無需多言，黑客專屬。極緻的導航，内容區域任你怎麼堆砌。隻要你有一顆黑客的新，你會發現它的美。
照片是這個網站的中心，整個網站的設計顯得很自然。更重要的是，網站照片的hover效果做得非常之優雅，每張照片的标題随着光标從邊上滑入滑出，美觀流暢。
SilkTricky 網站背後的從業人員在現實生活中都很牛X，他們的網站也沒有讓我們失望。當滑鼠移到圖檔上的時候會産生一個有趣的效果，磁貼會改變顔色并且圖檔發生位移。在這個隻有一個頁面的網站上，使用者不需要在多個頁面之間點來點去的跳轉，隻需要點選”View”，然後被選中的磁貼就會展開，同時其餘的磁貼移動空出适當的區域。這樣的布局同樣适用于圖檔作品集的展示。
SumAll的布局簡潔，沒有任何不必要的資訊去轉移使用者的注意力。滑鼠hover效果以一個簡單的動畫效果展示更多的資訊，頁面過度效果則是hover效果的一個擴充。當你點選一個按鈕的時候，簡介和選項将出現在下面。我非常喜歡這樣的體驗，就是當我點選一個選項後沒有被帶到一個新的頁面，而是讓資訊整潔的出現在按鈕下方。但這個網站也有一個缺點：導航磁貼不是響應式的，在更小的分辨率下磁貼會有錯位。
如果你是對這個網站的新穎界面充滿期待的話那麼我要說聲抱歉了，它的界面乍看上去很普通，但是Potluck的使用者體驗做得非常的好。大膽的留白讓使用者在需要的時候立即找到自己需要的東西。表單和按鈕有非常清新的設計，讓使用者很友善的發現和使用。所有的文本和圖形都是按照引導使用者浏覽網站的原則來布局的。按鈕和圖示配合得非常好，所有的按鈕和輸入表單看起來有很強的視覺一緻性，并且很吸引人。對于簡潔頁面的排版布局以及配色，這是一個很好的例子！
這個簡單的響應式布局顯得相當漂亮。Lowdi用線條和形狀來劃分頁面的區域，這是一個很好的方式來打破傳統四四方方的布局。我喜歡”Order Now”按鈕融入到這個滿是線條和形狀的設計中的方式。這些元素能很好的适應你的螢幕分辨率，整個設計也保持了高度的流暢性，使閱讀體驗非常好。
Barcamp Omaha是一個線上邀請别人加入某次活動的網站。這個單頁非常高效的用統一的視覺風格來引導使用者浏覽網站内容。活動最重要的資訊，時間、地點、事件都放在了頁面的頭部，但網站的設計讓使用者有強烈欲望的往下滾，看看還能發現什麼。我非常喜歡twitter和facebook在這個頁面中的變體圖示。
當使用者往下滾的時候，通過大膽的标題設計，更多的資訊被系統的呈現出來，網頁布局依然很簡潔整齊。會議内容的目錄則是以簡單的動畫來吸引使用者的眼球。當使用者滾動到頁面底部的時候，聯系資訊出現了，唾手可得。
當網站家在完成的一瞬間，這個網站給人的感受就是非常的穩定、安靜，這是嚴謹設計的結果。雖然沒有态度的留白，但網站卻不讓人感覺壓抑。标簽在滑鼠hover的時候展開，展示了更多的資訊并且提升了可用性。和其他元素一起，這個效果傳達了一種通透的、平靜的感覺。這個設計也映射浏覽網站的詞彙，其餘元素也組合起來傳達了連貫和統一的設計風格。
一個完美的Hover效果不應該隻是簡單的呈現更多的資訊，也應該為網站的視覺體驗做出貢獻。在這個網站中，當使用者滑鼠懸停在圖檔上時，圖檔擴張，并且由灰階照片恢複飽和度成全彩圖檔，同時呈現标題。這個效果讓我和我的小夥伴們都着迷了。
在網站中對産品和資訊進行清單布局的時候，我們經常會做出一個靜止的傳統清單頁。Lift網站的書本清單則給書本的hover效果添加了一個簡單的3維旋轉動畫。這個簡單的視覺效果讓網站增色不少。給使用者一種感覺就是他在和網站交流。你可以從這裡擷取這個3維效果。
Snowbird是一個使用者互動較多的動态網站。目前的天氣情況被直接展示出來，當使用者滑鼠懸停的時候橫向展開顯示這一周的天氣預報。”FULL REPORT”按鈕的hover效果則是大圓角變小圓角，這種按鈕狀态的變化很微妙有效，可以直接用css3圓角屬性實作，在扁平化時代可以考慮采用。廣告圖檔是三角形的，隐喻雪鳥的翅膀，當滑鼠懸停的時候，廣告圖檔的另一部分展開形成完整的圖檔。（譯者注：值得一提的是，頁面加載中時網站的logo會像翅膀一樣折疊展開扇動着，和網頁裡的互動動畫有很好的一緻性）
整個界面由方塊磁貼緊密排列構成，但卻不顯得擁擠。頂部的導航欄占據了一點空間，但這些圖示都是用于細緻的分類。當然，你點選菜單欄也可以隐藏這些圖示。另外，這個網站也是響應式設計的，不同的分辨率不能影響它的顯示和功能，響應式V55！
<a href="http://www.cnblogs.com/lhb25/p/20-gorgeous-websites-user-experience-in-mind.html" target="_blank">經典設計：關注使用者體驗的20個網站</a>
<a href="http://www.cnblogs.com/lhb25/archive/2012/01/13/25-outstanding-single-page-website-designs.html" target="_blank">25個優秀的國外單頁網站設計作品欣賞</a>
<a href="http://www.cnblogs.com/lhb25/archive/2012/08/04/really-cool-and-creative-404-error-pages.html" target="_blank">讓人驚歎的國外創意404錯誤頁面設計</a>
<a href="http://www.cnblogs.com/lhb25/archive/2011/10/30/html5-portfolio-great-examples.html" target="_blank">16個精美的HTML5作品集網站設計案例</a>
<a href="http://www.cnblogs.com/lhb25/archive/2013/06/13/winning-examples-of-css-based-websites.html" target="_blank">經典網頁設計：25個華麗的CSS網站作品</a>
歡迎任何形式的轉載，但請務必注明出處。