2013-11-15 藍藍設(shè)計的小編
轉(zhuǎn)載藍藍設(shè)計( www.wnxcall.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供有效的 BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
來源：http://www.uisdc.com/100-things-you-should-know-about-design
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
每個網(wǎng)站有屬于自己的個性——它能反射出背后的個人或者團隊。如何做到讓自己的網(wǎng)站顯得與眾不同、卓爾不群，讓用戶流連忘返或者立馬下單？
為了讓你的網(wǎng)站脫穎而出，不僅需要有豐富的高質(zhì)量內(nèi)容，同時也要兼顧網(wǎng)站的創(chuàng)新性和功能性。從用戶的角度出發(fā)好好想一下，怎樣讓你的網(wǎng)站用戶體驗更友好？簡單的搜索功能是需要的，或者你也可以精心設(shè)計一下網(wǎng)站的導航。同時，要注意保持整個網(wǎng)站設(shè)計語言的一致性。在這個html5狂潮涌進的時代，誕生了很多優(yōu)秀的網(wǎng)頁設(shè)計作品，他們都有卓越的導航設(shè)計，接下來整理的這些網(wǎng)站將喚起你關(guān)于導航的極限創(chuàng)意，快來親自體驗下吧！
在需要的時候?qū)Ш綑趹撘恢痹谀抢?，而當用戶想要專注于某個特定的任務(wù)時，導航欄則應該優(yōu)雅的隱藏起來。比如說，在設(shè)計一個網(wǎng)上商店的出納頁面時，網(wǎng)站的導航應該可以隨時都易于使用，但同時也要注意突出像出納表單和按鈕控件之類的鮮明功能。Toybox的導航設(shè)計就恰好滿足了這些。
如下圖示，這個側(cè)邊導航給人的感覺就像是你在窺視頁面背后或者是掀開了一個玩具盒的蓋子看看里面到底有些什么。這個側(cè)邊導航非常方便使用，鼠標懸停在瀏覽器左側(cè)即可出現(xiàn)，主體部分即時出現(xiàn)的旋轉(zhuǎn)效果也很帶感，可以很好的引導用戶的注意力。將導航隱藏起來同時也實現(xiàn)了界面的簡潔，使網(wǎng)站的瀏覽體驗非常的愉悅，因為網(wǎng)站并沒有留下太多無用的信息去分散用戶的注意力。
至于其他你想知道的信息，比如說Toybox公司的主營業(yè)務(wù)和地址，可以在頂部的一個直接呈現(xiàn)的導航欄里找到。首頁的磁貼鼠標hover效果也非常的有趣，當鼠標懸停于某個項目的縮略圖時，其余的項目縮略圖都后退變暗并且產(chǎn)生景深的效果。
交互設(shè)計師Olivier Bossel的個人作品博客非常有趣。該網(wǎng)站的導航元素在鼠標hover狀態(tài)下會產(chǎn)生像素爆炸式的效果（譯者注：火狐瀏覽器測試通過，chrome測試無效果）。這個效果相對于網(wǎng)站其余的簡潔設(shè)計來說非常有動感，由此產(chǎn)生強烈的對比效果。作為一個視覺元素它非常有效的促進了用戶繼續(xù)閱讀該網(wǎng)站，統(tǒng)一的視覺語言也彰顯了品牌的特點。
Tsto是一家有著簡單而創(chuàng)新的設(shè)計方法的設(shè)計機構(gòu)，它的導航設(shè)計出乎我們的意料。屏幕的四個角都固定著一個導航元素，以框架的形式讓作品展示出來。視覺識別元素是由大粗的品紅色字體來體現(xiàn)。網(wǎng)站的層級結(jié)構(gòu)非常清晰，”Work”標簽在左上角，”Contact”和”About”標簽則分布在底部。為了保持風格的一致性，作品的標題也同樣采用了大粗的品紅色字體。
當用戶瀏覽案例作品的時候，這些作品以幻燈片的形式展示出來，當鼠標懸停在箭頭上的時候會出現(xiàn)下一個作品的預覽圖。案例展示圖很大，占據(jù)了頁面的大部分空間。當用戶瀏覽這些大圖的時候，就能對Tsto的公司形象和作品有深入的了解。
Derek Boateng的作品集網(wǎng)站在頁面加載完成后用一個禮貌的”Hi”來問候訪客，并且有一個向下的箭頭指引訪客鼠標向下滾動。頁面的總體設(shè)計非常低調(diào)，它并沒有對用戶吼叫，而是優(yōu)雅的引導用戶去查看作品。當頁面滾動到歡迎界面以下時，網(wǎng)站的頭部和導航欄開始收縮，讓用戶能有更大的空間去查看作品。這個網(wǎng)站是導航清晰易用，主要內(nèi)容得到充分體現(xiàn)的好例子。
擦，流碧的橫向滾動！Second Story的網(wǎng)站工作起來像一個平板上的雜志app。它的革新之處在于它給人的感覺并不是一個典型的網(wǎng)站頁面，它是水平滾動的。內(nèi)容以分欄的形式布局，每一欄內(nèi)容則垂直滾動。導航欄固定在左側(cè)，這有利于控制網(wǎng)站的結(jié)構(gòu)。在你查看作品詳情的的時候，左側(cè)的導航欄最小化，鼠標懸停再次放大。對于作品集的瀏覽用戶可以選擇列表形式和幻燈形式。
正如它的名字所暗示的那樣，Mostly Serious有它好玩的地方。打開網(wǎng)站迎接你的是搖擺飄浮的氣球，而這些氣球正是該網(wǎng)站導航。友好細膩的動畫配上豐富的色彩建立了網(wǎng)站品牌的基調(diào)。進入子頁面以后，通過右上角的圖標你可以隨時回到主頁 ，頁面底部同時出現(xiàn)一個次級導航。這個網(wǎng)站功能性很強，符合頁面交互靈動的特征。事實上，這個網(wǎng)站讓我想起了過去美好的日子里絢麗的flash動畫（EYE4U，還有嗎？）。
在如此簡約大方的頁面中滾動瀏覽文章標題列表，讓我感覺自己在使用一個書架（不信你試試看）。每一本的鼠標懸停效果都將一本書籍獨立出來使用戶可以更加專注。網(wǎng)站對于”About”和”Contact”部分的設(shè)計也匠心獨運：當你點擊其中一個標簽的時候，會出現(xiàn)一個下拉的頁面來顯示信息。這是一個減少頁面跳轉(zhuǎn)的簡單方法。
然而，要查看往期的文章并不簡單，因為網(wǎng)站沒有搜索功能。當用戶要找特定的一篇文章時，他必須要一直滾動下去才能找到。這時候搜索功能在不破壞總體設(shè)計的前提下顯得非常有用。
通過這個網(wǎng)站我們可以看到，一個簡單干凈的布局，加上好玩的色彩以及有趣的動畫，能帶來如此驚人的效果！LayerVault這個網(wǎng)站平衡了留白和微妙的動畫來吸引它的用戶。動畫可以用來闡明一個觀點，引導用戶瀏覽整個網(wǎng)站，甚至給出使用指南。雖然動畫并不總是起到這些作用，然而LayerVault恰如其分的使用了它，只有當用戶瀏覽到頁面的一個特定區(qū)域的時候才會出現(xiàn)這些動畫。結(jié)果怎樣呢？一個布局優(yōu)雅的頁面配上優(yōu)美的注解！
Escape Flight設(shè)計得非常精妙！新頁面的loading動畫中，logo中火箭的火焰尾氣動態(tài)效果非常好，顯得新穎時尚。導航欄固定在頂部，就像一個即將啟程的港口或者甲板，就好像你已經(jīng)來到了飛機場。下拉菜單看起來就像是一張旅行清單，和主題很搭。當你選擇了一個地點后，鼠標往下滾，所有重要的信息都會固定在頂部，對于旅行者來說這樣使用起來會更簡便舒適。
網(wǎng)站充分的利用了漂亮的攝影圖片，Escape Flight使圖片全屏顯示，或許這正是你從一個旅行類網(wǎng)站想要得到的。它讓你略微感受到即將到來的旅程，并且優(yōu)雅的展示出目的地的美景。當你鼠標懸停在某個地點的縮略圖上方時，你將發(fā)現(xiàn)所有你想要知道的：票價、天氣狀況、航班時間以及旅行時長。你還想知道更多嗎？
這個網(wǎng)站無需多言，黑客專屬。的導航，內(nèi)容區(qū)域任你怎么堆砌。只要你有一顆黑客的新，你會發(fā)現(xiàn)它的美。
照片是這個網(wǎng)站的中心，整個網(wǎng)站的設(shè)計顯得很自然。更重要的是，網(wǎng)站照片的hover效果做得非常之優(yōu)雅，每張照片的標題隨著光標從邊上滑入滑出，美觀流暢。
SilkTricky 網(wǎng)站背后的工作人員在現(xiàn)實生活中都很牛X，他們的網(wǎng)站也沒有讓我們失望。當鼠標移到圖片上的時候會產(chǎn)生一個有趣的效果，磁貼會改變顏色并且圖片發(fā)生位移。在這個只有一個頁面的網(wǎng)站上，用戶不需要在多個頁面之間點來點去的跳轉(zhuǎn)，只需要點擊”View”，然后被選中的磁貼就會展開，同時其余的磁貼移動空出適當?shù)膮^(qū)域。這樣的布局同樣適用于圖片作品集的展示。
SumAll的布局簡潔，沒有任何不必要的信息去轉(zhuǎn)移用戶的注意力。鼠標hover效果以一個簡單的動畫效果展示更多的信息，頁面過度效果則是hover效果的一個擴展。當你點擊一個按鈕的時候，簡介和選項將出現(xiàn)在下面。我非常喜歡這樣的體驗，就是當我點擊一個選項后沒有被帶到一個新的頁面，而是讓信息整潔的出現(xiàn)在按鈕下方。但這個網(wǎng)站也有一個缺點：導航磁貼不是響應式的，在更小的分辨率下磁貼會有錯位。
如果你是對這個網(wǎng)站的新穎界面充滿期待的話那么我要說聲抱歉了，它的界面乍看上去很普通，但是Potluck的用戶體驗做得非常的好。大膽的留白讓用戶在需要的時候立即找到自己需要的東西。表單和按鈕有非常清新的設(shè)計，讓用戶很方便的發(fā)現(xiàn)和使用。所有的文本和圖形都是按照引導用戶瀏覽網(wǎng)站的原則來布局的。按鈕和圖標配合得非常好，所有的按鈕和輸入表單看起來有很強的視覺一致性，并且很吸引人。對于簡潔頁面的排版布局以及配色，這是一個很好的例子！
這個簡單的響應式布局顯得相當漂亮。Lowdi用線條和形狀來劃分頁面的區(qū)域，這是一個很好的方式來打破傳統(tǒng)四四方方的布局。我喜歡”O(jiān)rder Now”按鈕融入到這個滿是線條和形狀的設(shè)計中的方式。這些元素能很好的適應你的屏幕分辨率，整個設(shè)計也保持了高度的流暢性，使閱讀體驗非常好。
Barcamp Omaha是一個在線邀請別人加入某次活動的網(wǎng)站。這個單頁非常的用統(tǒng)一的視覺風格來引導用戶瀏覽網(wǎng)站內(nèi)容。活動最重要的信息，時間、地點、事件都放在了頁面的頭部，但網(wǎng)站的設(shè)計讓用戶有強烈欲望的往下滾，看看還能發(fā)現(xiàn)什么。我非常喜歡twitter和facebook在這個頁面中的變體圖標。
當用戶往下滾的時候，通過大膽的標題設(shè)計，更多的信息被系統(tǒng)的呈現(xiàn)出來，網(wǎng)頁布局依然很簡潔整齊。會議內(nèi)容的目錄則是以簡單的動畫來吸引用戶的眼球。當用戶滾動到頁面底部的時候，聯(lián)系信息出現(xiàn)了，唾手可得。
當網(wǎng)站家在完成的一瞬間，這個網(wǎng)站給人的感受就是非常的穩(wěn)定、安靜，這是嚴謹設(shè)計的結(jié)果。雖然沒有態(tài)度的留白，但網(wǎng)站卻不讓人感覺壓抑。標簽在鼠標hover的時候展開，展示了更多的信息并且提升了可用性。和其他元素一起，這個效果傳達了一種通透的、平靜的感覺。這個設(shè)計也映射瀏覽網(wǎng)站的詞匯，其余元素也組合起來傳達了連貫和統(tǒng)一的設(shè)計風格。
一個完美的Hover效果不應該只是簡單的呈現(xiàn)更多的信息，也應該為網(wǎng)站的視覺體驗做出貢獻。在這個網(wǎng)站中，當用戶鼠標懸停在圖片上時，圖片擴張，并且由灰度照片恢復飽和度成全彩圖片，同時呈現(xiàn)標題。這個效果讓我和我的小伙伴們都著迷了。
在網(wǎng)站中對產(chǎn)品和信息進行列表布局的時候，我們經(jīng)常會做出一個靜止的傳統(tǒng)列表頁。Lift網(wǎng)站的書本列表則給書本的hover效果添加了一個簡單的3維旋轉(zhuǎn)動畫。這個簡單的視覺效果讓網(wǎng)站增色不少。給用戶一種感覺就是他在和網(wǎng)站交流。你可以從這里獲取這個3維效果。
Snowbird是一個用戶交互較多的動態(tài)網(wǎng)站。當前的天氣情況被直接展示出來，當用戶鼠標懸停的時候橫向展開顯示這一周的天氣預報?！盕ULL REPORT”按鈕的hover效果則是大圓角變小圓角，這種按鈕狀態(tài)的變化很微妙有效，可以直接用css3圓角屬性實現(xiàn)，在扁平化時代可以考慮采用。廣告圖片是三角形的，隱喻雪鳥的翅膀，當鼠標懸停的時候，廣告圖片的另一部分展開形成完整的圖片。（譯者注：值得一提的是，頁面加載中時網(wǎng)站的logo會像翅膀一樣折疊展開扇動著，和網(wǎng)頁里的交互動畫有很好的一致性）
整個界面由方塊磁貼緊密排列構(gòu)成，但卻不顯得擁擠。頂部的導航欄占據(jù)了一點空間，但這些圖標都是用于細致的分類。當然，你點擊菜單欄也可以隱藏這些圖標。另外，這個網(wǎng)站也是響應式設(shè)計的，不同的分辨率不能影響它的顯示和功能，響應式V55！
藍藍設(shè)計的小編 http://www.wnxcall.com