超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

革命性的創(chuàng)新網(wǎng)頁(yè)導(dǎo)航設(shè)計(jì)

2014-4-22    藍(lán)藍(lán)設(shè)計(jì)的小編

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   m.miumiuwan.com  )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來(lái)源:http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中,   請(qǐng)點(diǎn)這里

UI設(shè)計(jì)師為了讓網(wǎng)站設(shè)計(jì)脫穎而出,不僅需要有豐富的高質(zhì)量?jī)?nèi)容,同時(shí)也要兼顧網(wǎng)站的創(chuàng)新性和功能性。從用戶(hù)的角度出發(fā)好好想一下,怎樣讓你的網(wǎng)站用戶(hù)體驗(yàn)更友好?簡(jiǎn)單的搜索功能是需要的,或者你也可以精心設(shè)計(jì)一下網(wǎng)站的導(dǎo)航。同時(shí),要注意保持整個(gè)網(wǎng)站設(shè)計(jì)語(yǔ)言的一致性。在這個(gè)html5狂潮涌進(jìn)的時(shí)代,誕生了很多優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)作品,他們都有卓越的導(dǎo)航設(shè)計(jì),接下來(lái)藍(lán)藍(lán)設(shè)計(jì)整理的這些網(wǎng)站將喚起你關(guān)于導(dǎo)航的極限創(chuàng)意,快來(lái)親自體驗(yàn)下吧!

Lowdi

這個(gè)簡(jiǎn)單的響應(yīng)式布局顯得相當(dāng)漂亮。Lowdi用線條和形狀來(lái)劃分頁(yè)面的區(qū)域,這是一個(gè)很好的方式來(lái)打破傳統(tǒng)四四方方的布局。我喜歡”O(jiān)rder Now”按鈕融入到這個(gè)滿是線條和形狀的設(shè)計(jì)中的方式。這些元素能很好的適應(yīng)你的屏幕分辨率,整個(gè)設(shè)計(jì)也保持了高度的流暢性,使閱讀體驗(yàn)非常好。

Lowdi
 

Barcamp Omaha

Barcamp Omaha是一個(gè)在線邀請(qǐng)別人加入某次活動(dòng)的網(wǎng)站。這個(gè)單頁(yè)非常的用統(tǒng)一的視覺(jué)風(fēng)格來(lái)引導(dǎo)用戶(hù)瀏覽網(wǎng)站內(nèi)容?;顒?dòng)最重要的信息,時(shí)間、地點(diǎn)、事件都放在了頁(yè)面的頭部,但網(wǎng)站的設(shè)計(jì)讓用戶(hù)有強(qiáng)烈欲望的往下滾,看看還能發(fā)現(xiàn)什么。我非常喜歡twitter和facebook在這個(gè)頁(yè)面中的變體圖標(biāo)。

Barcamp Omaha

當(dāng)用戶(hù)往下滾的時(shí)候,通過(guò)大膽的標(biāo)題設(shè)計(jì),更多的信息被系統(tǒng)的呈現(xiàn)出來(lái),網(wǎng)頁(yè)布局依然很簡(jiǎn)潔整齊。會(huì)議內(nèi)容的目錄則是以簡(jiǎn)單的動(dòng)畫(huà)來(lái)吸引用戶(hù)的眼球。當(dāng)用戶(hù)滾動(dòng)到頁(yè)面底部的時(shí)候,聯(lián)系信息出現(xiàn)了,唾手可得。

Combadi

當(dāng)網(wǎng)站家在完成的一瞬間,這個(gè)網(wǎng)站給人的感受就是非常的穩(wěn)定、安靜,這是嚴(yán)謹(jǐn)設(shè)計(jì)的結(jié)果。雖然沒(méi)有態(tài)度的留白,但網(wǎng)站卻不讓人感覺(jué)壓抑。標(biāo)簽在鼠標(biāo)hover的時(shí)候展開(kāi),展示了更多的信息并且提升了可用性。和其他元素一起,這個(gè)效果傳達(dá)了一種通透的、平靜的感覺(jué)。這個(gè)設(shè)計(jì)也映射瀏覽網(wǎng)站的詞匯,其余元素也組合起來(lái)傳達(dá)了連貫和統(tǒng)一的設(shè)計(jì)風(fēng)格。

Combadi
 

Waller Creek Conservancy: The Final Four

一個(gè)完美的Hover效果不應(yīng)該只是簡(jiǎn)單的呈現(xiàn)更多的信息,也應(yīng)該為網(wǎng)站的視覺(jué)體驗(yàn)做出貢獻(xiàn)。在這個(gè)網(wǎng)站中,當(dāng)用戶(hù)鼠標(biāo)懸停在圖片上時(shí),圖片擴(kuò)張,并且由灰度照片恢復(fù)飽和度成全彩圖片,同時(shí)呈現(xiàn)標(biāo)題。這個(gè)效果讓我和我的小伙伴們都著迷了。

The Waller Creek Conversy Design Comepetition
 

Lift

在網(wǎng)站中對(duì)產(chǎn)品和信息進(jìn)行列表布局的時(shí)候,我們經(jīng)常會(huì)做出一個(gè)靜止的傳統(tǒng)列表頁(yè)。Lift網(wǎng)站的書(shū)本列表則給書(shū)本的hover效果添加了一個(gè)簡(jiǎn)單的3維旋轉(zhuǎn)動(dòng)畫(huà)。這個(gè)簡(jiǎn)單的視覺(jué)效果讓網(wǎng)站增色不少。給用戶(hù)一種感覺(jué)就是他在和網(wǎng)站交流。你可以從這里獲取這個(gè)3維效果。

Lift
 

Snowbird

Snowbird是一個(gè)用戶(hù)交互較多的動(dòng)態(tài)網(wǎng)站。當(dāng)前的天氣情況被直接展示出來(lái),當(dāng)用戶(hù)鼠標(biāo)懸停的時(shí)候橫向展開(kāi)顯示這一周的天氣預(yù)報(bào)?!盕ULL REPORT”按鈕的hover效果則是大圓角變小圓角,這種按鈕狀態(tài)的變化很微妙有效,可以直接用css3圓角屬性實(shí)現(xiàn),在扁平化時(shí)代可以考慮采用。廣告圖片是三角形的,隱喻雪鳥(niǎo)的翅膀,當(dāng)鼠標(biāo)懸停的時(shí)候,廣告圖片的另一部分展開(kāi)形成完整的圖片。(譯者注:值得一提的是,頁(yè)面加載中時(shí)網(wǎng)站的logo會(huì)像翅膀一樣折疊展開(kāi)扇動(dòng)著,和網(wǎng)頁(yè)里的交互動(dòng)畫(huà)有很好的一致性)

Snowbird
 

Etch

整個(gè)界面由方塊磁貼緊密排列構(gòu)成,但卻不顯得擁擠。頂部的導(dǎo)航欄占據(jù)了一點(diǎn)空間,但這些圖標(biāo)都是用于細(xì)致的分類(lèi)。當(dāng)然,你點(diǎn)擊菜單欄也可以隱藏這些圖標(biāo)。另外,這個(gè)網(wǎng)站也是響應(yīng)式設(shè)計(jì)的,不同的分辨率不能影響它的顯示和功能,響應(yīng)式V55!

Etch

分享本文至:

日歷

鏈接

個(gè)人資料

存檔