2014-4-22 藍藍設(shè)計的小編
轉(zhuǎn)載藍藍設(shè)計( m.ssll180.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供有效的 BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務
來源:http://www.uisdc.com/100-things-you-should-know-about-design
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里
UI設(shè)計師為了讓網(wǎng)站設(shè)計脫穎而出,不僅需要有豐富的高質(zhì)量內(nèi)容,同時也要兼顧網(wǎng)站的創(chuàng)新性和功能性。從用戶的角度出發(fā)好好想一下,怎樣讓你的網(wǎng)站用戶體驗更友好?簡單的搜索功能是需要的,或者你也可以精心設(shè)計一下網(wǎng)站的導航。同時,要注意保持整個網(wǎng)站設(shè)計語言的一致性。在這個html5狂潮涌進的時代,誕生了很多優(yōu)秀的網(wǎng)頁設(shè)計作品,他們都有卓越的導航設(shè)計,接下來藍藍設(shè)計整理的這些網(wǎng)站將喚起你關(guān)于導航的極限創(chuà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)站。當前的天氣情況被直接展示出來,當用戶鼠標懸停的時候橫向展開顯示這一周的天氣預報。”FULL REPORT”按鈕的hover效果則是大圓角變小圓角,這種按鈕狀態(tài)的變化很微妙有效,可以直接用css3圓角屬性實現(xiàn),在扁平化時代可以考慮采用。廣告圖片是三角形的,隱喻雪鳥的翅膀,當鼠標懸停的時候,廣告圖片的另一部分展開形成完整的圖片。(譯者注:值得一提的是,頁面加載中時網(wǎng)站的logo會像翅膀一樣折疊展開扇動著,和網(wǎng)頁里的交互動畫有很好的一致性)
整個界面由方塊磁貼緊密排列構(gòu)成,但卻不顯得擁擠。頂部的導航欄占據(jù)了一點空間,但這些圖標都是用于細致的分類。當然,你點擊菜單欄也可以隱藏這些圖標。另外,這個網(wǎng)站也是響應式設(shè)計的,不同的分辨率不能影響它的顯示和功能,響應式V55!
藍藍設(shè)計的小編 http://m.ssll180.com