2014-4-22 藍藍設計的小編
轉載藍藍設計( m.wtxcl.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供有效的 BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
來源：http://www.uisdc.com/100-things-you-should-know-about-design
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
UI設計師為了讓網站設計脫穎而出，不僅需要有豐富的高質量內容，同時也要兼顧網站的創新性和功能性。從用戶的角度出發好好想一下，怎樣讓你的網站用戶體驗更友好？簡單的搜索功能是需要的，或者你也可以精心設計一下網站的導航。同時，要注意保持整個網站設計語言的一致性。在這個html5狂潮涌進的時代，誕生了很多優秀的網頁設計作品，他們都有卓越的導航設計，接下來藍藍設計整理的這些網站將喚起你關于導航的極限創意，快來親自體驗下吧！
這個簡單的響應式布局顯得相當漂亮。Lowdi用線條和形狀來劃分頁面的區域，這是一個很好的方式來打破傳統四四方方的布局。我喜歡”Order Now”按鈕融入到這個滿是線條和形狀的設計中的方式。這些元素能很好的適應你的屏幕分辨率，整個設計也保持了高度的流暢性，使閱讀體驗非常好。
Barcamp Omaha是一個在線邀請別人加入某次活動的網站。這個單頁非常的用統一的視覺風格來引導用戶瀏覽網站內容。活動最重要的信息，時間、地點、事件都放在了頁面的頭部，但網站的設計讓用戶有強烈欲望的往下滾，看看還能發現什么。我非常喜歡twitter和facebook在這個頁面中的變體圖標。
當用戶往下滾的時候，通過大膽的標題設計，更多的信息被系統的呈現出來，網頁布局依然很簡潔整齊。會議內容的目錄則是以簡單的動畫來吸引用戶的眼球。當用戶滾動到頁面底部的時候，聯系信息出現了，唾手可得。
當網站家在完成的一瞬間，這個網站給人的感受就是非常的穩定、安靜，這是嚴謹設計的結果。雖然沒有態度的留白，但網站卻不讓人感覺壓抑。標簽在鼠標hover的時候展開，展示了更多的信息并且提升了可用性。和其他元素一起，這個效果傳達了一種通透的、平靜的感覺。這個設計也映射瀏覽網站的詞匯，其余元素也組合起來傳達了連貫和統一的設計風格。
一個完美的Hover效果不應該只是簡單的呈現更多的信息，也應該為網站的視覺體驗做出貢獻。在這個網站中，當用戶鼠標懸停在圖片上時，圖片擴張，并且由灰度照片恢復飽和度成全彩圖片，同時呈現標題。這個效果讓我和我的小伙伴們都著迷了。
在網站中對產品和信息進行列表布局的時候，我們經常會做出一個靜止的傳統列表頁。Lift網站的書本列表則給書本的hover效果添加了一個簡單的3維旋轉動畫。這個簡單的視覺效果讓網站增色不少。給用戶一種感覺就是他在和網站交流。你可以從這里獲取這個3維效果。
Snowbird是一個用戶交互較多的動態網站。當前的天氣情況被直接展示出來，當用戶鼠標懸停的時候橫向展開顯示這一周的天氣預報。”FULL REPORT”按鈕的hover效果則是大圓角變小圓角，這種按鈕狀態的變化很微妙有效，可以直接用css3圓角屬性實現，在扁平化時代可以考慮采用。廣告圖片是三角形的，隱喻雪鳥的翅膀，當鼠標懸停的時候，廣告圖片的另一部分展開形成完整的圖片。（譯者注：值得一提的是，頁面加載中時網站的logo會像翅膀一樣折疊展開扇動著，和網頁里的交互動畫有很好的一致性）
整個界面由方塊磁貼緊密排列構成，但卻不顯得擁擠。頂部的導航欄占據了一點空間，但這些圖標都是用于細致的分類。當然，你點擊菜單欄也可以隱藏這些圖標。另外，這個網站也是響應式設計的，不同的分辨率不能影響它的顯示和功能，響應式V55！
