首頁(yè)

超贊!25例交互體驗(yàn)極佳的網(wǎng)頁(yè)設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)的小編

25 Modern Web / Interactive Websites Design Examples

本文介紹的案例均使用了的HTML/CSS 以及 JS 技術(shù),從視差滾動(dòng)到響應(yīng)式設(shè)計(jì),實(shí)現(xiàn)了良好的交互性,為用戶提供更好的瀏覽體驗(yàn)。我們來(lái)快速閱覽一下吧。

推薦閱讀:
《網(wǎng)頁(yè)設(shè)計(jì)新趨勢(shì)!25例出眾的響應(yīng)式導(dǎo)航設(shè)計(jì)》
《讓網(wǎng)站更生動(dòng)!那些在網(wǎng)頁(yè)中完美運(yùn)用視頻元素的案例》
《不要落伍!來(lái)和小伙伴一起學(xué)習(xí)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)》

 

Melbourne Remote Control Tourist

的遠(yuǎn)程旅游體驗(yàn),這個(gè)概念不錯(cuò)吧!

Melbourne Remote Control Tourist

Melbourne Remote Control Tourist

20個(gè)優(yōu)秀的國(guó)外扁平化網(wǎng)頁(yè)設(shè)計(jì)作品

藍(lán)藍(lán)設(shè)計(jì)的小編

扁平化設(shè)計(jì)為印刷品、網(wǎng)頁(yè)和移動(dòng)操作系統(tǒng)的設(shè)計(jì)帶來(lái)了新的變化。扁平化設(shè)計(jì)最核心的地方就是放棄一切裝飾效果,諸如陰影,透視,紋理,漸變等能做出3D效果的元素一概不用。所有元素的邊界都干凈利落,沒(méi)有任何羽化,漸變,或者陰影。

更少的按鈕和選項(xiàng)使得界面干凈整齊,使用起來(lái)格外方便??梢詫⑿畔⒑褪挛锏墓ぷ鞣绞礁雍?jiǎn)單直接的展示出來(lái),減少認(rèn)知障礙的產(chǎn)生。越來(lái)越多的公司正在效仿,比如下面這些:

 

Who Wanna

10.flat websites

Very-Make


18.flat websites

23個(gè)最具影響力的網(wǎng)頁(yè)設(shè)計(jì)博客

藍(lán)藍(lán)設(shè)計(jì)的小編

花了大量時(shí)間在網(wǎng)上搜集行業(yè)里高質(zhì)量網(wǎng)頁(yè)設(shè)計(jì)的博客,不過(guò)話說(shuō)回來(lái),高質(zhì)量可信的資源確實(shí)挺稀缺的。

 

CSS-Tricks

CSS-Tricks是Chris Coyier公眾博客,專門講一些有關(guān)CSS的話題。不過(guò)近幾年來(lái),CSS-Tricks有了下面一些擴(kuò)展:

Chris和Dave Rupert一起創(chuàng)造了ShopTalk 播客,在里面可以討論所以有關(guān)網(wǎng)頁(yè)設(shè)計(jì)和開發(fā)的事情。
Chris 出過(guò)幾本書,做了一個(gè) Lynda.com的Wordpress主題課程,并且他還創(chuàng)建了一個(gè)The Lodge的課程教人們學(xué)習(xí)如何制作一個(gè)頗具現(xiàn)代感的網(wǎng)站。
超多很酷的項(xiàng)目,像 CodePen,HTML-Ipsum, Quotes on Design 。Chris真是個(gè)超有想法的人。

csstricks-web-design-blog-top-blogs-follow

CSS-Tricks 是 Chris Coyier 2007年建立的,總部在美國(guó)懷俄明州的密爾沃基,至今網(wǎng)站月頁(yè)面訪問(wèn)量達(dá)270萬(wàn)。

網(wǎng)站亮點(diǎn)(這個(gè)網(wǎng)站的獨(dú)特之處是什么?):

名人效應(yīng)——Chris Coyier 是這么網(wǎng)站的精神領(lǐng)袖,他的個(gè)人風(fēng)格貫穿于項(xiàng)目始終,是眾多設(shè)計(jì)師的楷模。向他學(xué)習(xí),同他一同去冒險(xiǎn)吧!

關(guān)注App設(shè)計(jì)!20個(gè)漂亮的扁平風(fēng)格移動(dòng)端界面

藍(lán)藍(lán)設(shè)計(jì)的小編

現(xiàn)在扁平化風(fēng)格在網(wǎng)頁(yè)設(shè)計(jì)方面已經(jīng)有許多優(yōu)秀的范例了,比如這22個(gè)超贊的扁平化設(shè)計(jì)經(jīng)典案例就有很多我們可以借鑒學(xué)習(xí)的地方。但是移動(dòng)端的界面設(shè)計(jì)扁平化風(fēng)格較少,所以今天從BehanceDribbble收集的這一組移動(dòng)端的扁平化設(shè)計(jì)就該好好看看咯,學(xué)習(xí)一下它們優(yōu)秀的細(xì)節(jié)和配色吧 : )

如果你對(duì)扁平化風(fēng)格的網(wǎng)站更有興趣,那么推薦閱讀:
一組賦予你扁平化配色靈感的網(wǎng)頁(yè)設(shè)計(jì)
怒贊!2013扁平化設(shè)計(jì)終極指南
專屬扁平化設(shè)計(jì)的PS色板(配色庫(kù))

 

uiGo Colors – iOS Flat UI Bundle

 

怒贊!50套萬(wàn)里挑一的設(shè)計(jì)師專屬精華資源包

藍(lán)藍(lán)設(shè)計(jì)的小編

我們一起來(lái)看一下吧,本文收集了50款專屬設(shè)計(jì)師的精華資源包,分別有圖標(biāo)、主題、UI套件、插件、網(wǎng)頁(yè)模版、字體等等,一網(wǎng)打盡、一應(yīng)俱全,萬(wàn)里挑一!實(shí)屬優(yōu)設(shè)哥獻(xiàn)給您的千金難換的干貨喲!

10月收尾,11月馬上來(lái)臨,到了該總結(jié)經(jīng)驗(yàn)整理思路的時(shí)候了。各位設(shè)計(jì)師對(duì)本月工作滿意嗎?嗯,沒(méi)關(guān)系,不管好還是壞,11月份,我們重整旗鼓,繼續(xù)前進(jìn)。

大家都知道,如果有素材和工具的支持,工作起來(lái)得心應(yīng)手,趕緊來(lái)挑選適合你的神兵利器吧:)

Flatic

大型UI套件,涵蓋百余種UI元素。

Flatic User Interface

Gamecenter Pack

12月典藏!50個(gè)超贊的免費(fèi)設(shè)計(jì)師工具資源下載

藍(lán)藍(lán)設(shè)計(jì)的小編

互聯(lián)網(wǎng)最偉大的精神在于分享,我們喜歡探索、喜歡發(fā)現(xiàn),務(wù)求將最好的資源呈遞給所有設(shè)計(jì)愛(ài)好者。
相信這里面你大多數(shù)都還沒(méi)見過(guò)呢!
50個(gè)免費(fèi)資源:包括了圖標(biāo)、字體、PSD、矢量圖、圖案、UI套件、調(diào)試工具等等。
琳瑯滿目!亂花漸欲迷人眼,請(qǐng)您精挑細(xì)選,選擇最合適自己的素材,讓你的設(shè)計(jì)項(xiàng)目變得更漂亮、更專業(yè)。

OOcharts

remarkable-freebies-and-tools-01

日歷

鏈接

個(gè)人資料

存檔