2014-2-25 藍(lán)藍(lán)設(shè)計(jì)的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( www.gerard.com.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
來源：http://www.uisdc.com/100-things-you-should-know-about-design
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
當(dāng)下的網(wǎng)站設(shè)計(jì)趨勢(shì)已經(jīng)徹底改變了過去幾年對(duì)于網(wǎng)頁(yè)設(shè)計(jì)的概念，而且至少在接下來的這一年里會(huì)發(fā)展得如火如荼。我們已經(jīng)接觸到了垂直滾動(dòng)、扁平化設(shè)計(jì)、復(fù)古的配色、極簡(jiǎn)的配色，以及幻燈動(dòng)畫展示，當(dāng)然，響應(yīng)式設(shè)計(jì)才是最頭等的趨勢(shì)。
最近我們看到了透明的幻燈展示以及長(zhǎng)投影設(shè)計(jì)，在藍(lán)藍(lán)設(shè)計(jì)收集的案例中，我們將會(huì)看到這些趨勢(shì)帶來了巨大的影響，它們顛覆了以往的擬物界面設(shè)計(jì)成為新一輪的潮流。隨著移動(dòng)設(shè)備的擴(kuò)大使用，設(shè)計(jì)師的責(zé)任愈加重大，如何把創(chuàng)意注入到新的設(shè)計(jì)趨勢(shì)中是一個(gè)關(guān)鍵點(diǎn)。
獲獎(jiǎng)?wù)军c(diǎn)
CSS 設(shè)計(jì)獎(jiǎng)， 2013年1月5日
這個(gè)組合包含了當(dāng)下的很多設(shè)計(jì)趨勢(shì)，而且無縫地展示了出來。它擁有一個(gè)網(wǎng)格布局的著陸頁(yè)，當(dāng)你點(diǎn)擊鏈接的時(shí)候會(huì)跳轉(zhuǎn)到相應(yīng)的內(nèi)容塊。頁(yè)面非常的干凈。
獲獎(jiǎng)于2013年1月1日
網(wǎng)站首頁(yè)的文字是兩行式排版。紅色部分是變化著的。第一行是由白色靜態(tài)的”Paper Tiger”和粉色的字體組成，粉色的字體會(huì)翻轉(zhuǎn)變化，字體包括”Develops/Consults/Designs”。第二行的靜態(tài)白色字體是”for the”，動(dòng)態(tài)紅色字體是”Brand Message/Business Goal/User Experience”。所以整個(gè)句子包含了很多組合。背景是一個(gè)黑膠唱片播放動(dòng)畫形象，這是一個(gè)經(jīng)過深思熟慮而設(shè)計(jì)成的網(wǎng)站首頁(yè)，配色方案采取了黑色、白色和紅色，經(jīng)典。
獲獎(jiǎng)于2013年12月31日
這是一個(gè)單頁(yè)的垂直滾動(dòng)設(shè)計(jì)網(wǎng)站。著陸頁(yè)上的設(shè)計(jì)師眨動(dòng)著自己的眼鏡。當(dāng)你把頁(yè)面往下滾動(dòng)時(shí)，會(huì)看見一組黑白網(wǎng)格布局的內(nèi)容，頁(yè)面的底部是設(shè)計(jì)師站立的雙腳。這個(gè)網(wǎng)站給人的信息就是設(shè)計(jì)師舉起自己的單頁(yè)網(wǎng)站！非常有價(jià)值。
Css設(shè)計(jì)獎(jiǎng)，2013年12月26日
這個(gè)網(wǎng)站有一個(gè)非常漂亮的垂直滾動(dòng)效果。中間還有一個(gè)基于三角形的網(wǎng)格布局。整個(gè)網(wǎng)站非常的簡(jiǎn)約、大方和美觀。
Css設(shè)計(jì)獎(jiǎng)。2013年12月12日
網(wǎng)站的著陸頁(yè)是Etec Minds的辦公室工作動(dòng)畫場(chǎng)景。主頁(yè)有一個(gè)不錯(cuò)的垂直滾動(dòng)效果，以及一些很愉快地扁平設(shè)計(jì)。它不是一個(gè)響應(yīng)式的網(wǎng)站，但是針對(duì)移動(dòng)端它有專門的移動(dòng)版本。
Css設(shè)計(jì)獎(jiǎng)，2013年12月9日
該網(wǎng)站的主頁(yè)非常有亮點(diǎn)！所有元素都按照線畫稿的形式來，但是居然一點(diǎn)也不亂，反而非常美觀。
獲獎(jiǎng)于2013年12月8日
無限滾動(dòng)的、響應(yīng)式網(wǎng)站。扁平化設(shè)計(jì)。網(wǎng)格布局。一個(gè)字：酷！
獲獎(jiǎng)于2013年11月27日
該網(wǎng)站的著陸頁(yè)有一個(gè)幾何形狀飄飛的動(dòng)畫。往下滾動(dòng)時(shí)你會(huì)發(fā)現(xiàn)一切元素的設(shè)計(jì)都顯得小巧精致。扁平化設(shè)計(jì)。接下來有4個(gè)幻燈片，如果你點(diǎn)擊箭頭，幻燈片就會(huì)自動(dòng)擴(kuò)展到頁(yè)面大小，當(dāng)你繼續(xù)往下滾動(dòng)頁(yè)面就會(huì)自動(dòng)變回原始的大小。這是一個(gè)非常美麗而富有創(chuàng)造性的網(wǎng)站。
獲獎(jiǎng)于2013年11月20日
另一個(gè)滾動(dòng)式網(wǎng)站。響應(yīng)式、扁平化設(shè)計(jì)。盡管滾動(dòng)的過程中不見得很平滑自然，但是也不乏精彩。
獲獎(jiǎng)于2013年11月16日
Teamgeek展示了目前所有的設(shè)計(jì)趨勢(shì)：垂直滾動(dòng)、扁平化設(shè)計(jì)、復(fù)古配色、極簡(jiǎn)主義設(shè)計(jì)、基于網(wǎng)格的布局。但它不是響應(yīng)式網(wǎng)站，不過針對(duì)移動(dòng)端有另外的版本。
獲獎(jiǎng)于2013年10月13日
滾動(dòng)式網(wǎng)站簡(jiǎn)直要爆棚了，又來一個(gè)~扁平化設(shè)計(jì)，復(fù)古的配色，幻燈的展示。和上面那個(gè)一樣，不是響應(yīng)式網(wǎng)站，不過針對(duì)移動(dòng)端有另外的版本。
獲獎(jiǎng)于2013年10月12日
打開此頁(yè)面你必須仔細(xì)把握好自己鼠標(biāo)位置=。=當(dāng)你看到一個(gè)女孩在吹口香糖泡泡的時(shí)候千萬不要慌亂=。=鼠標(biāo)移到頁(yè)面四周時(shí)頁(yè)面女孩自然就不見了，映入你眼簾的是文字鏈接。在泡泡之下點(diǎn)開它們你就會(huì)進(jìn)入新的世界！這個(gè)頁(yè)面非常富有創(chuàng)意，毫不猶豫拿下大獎(jiǎng)。
獲獎(jiǎng)于2013年9月21日
這個(gè)網(wǎng)站的著陸頁(yè)有一段工作狂們的視頻剪輯。這是一個(gè)視差滾動(dòng)站點(diǎn)，往下滾動(dòng)的過程中頭部的視頻是一直都存在在那里的。這個(gè)設(shè)計(jì)讓讓你耳目一新。而且，網(wǎng)站是全響應(yīng)的。
獲獎(jiǎng)于2013年9月12日
又一個(gè)囊括了眾多設(shè)計(jì)趨勢(shì)的站點(diǎn)。例如垂直滾動(dòng)、網(wǎng)格布局、扁平化設(shè)計(jì)等。但是比較可惜的是該網(wǎng)站只有pc端沒有移動(dòng)端版本，只能在電腦上或者平板電腦上觀看。
獲獎(jiǎng)于2013年9月7日
擦！好有創(chuàng)意的網(wǎng)站！簡(jiǎn)直是一個(gè)冒險(xiǎn)的嘗試！打開首頁(yè)關(guān)掉通知欄后呈現(xiàn)在我們眼前的是一張地圖。扁平化、半透明的設(shè)計(jì)。鼠標(biāo)這個(gè)時(shí)候已經(jīng)變成一只手了，直接拖動(dòng)頁(yè)面地圖就跟著延伸！我不確定這張地圖的范圍有多大，或許是一座城市？或許是這個(gè)地球？無論如何，它是響應(yīng)式的。
獲獎(jiǎng)于2013年9月7日
Oh！網(wǎng)格，網(wǎng)格，網(wǎng)格！該網(wǎng)站沒別的，就是網(wǎng)格布局特別多。搭上黑白的色彩搭配顯得非常吸引人。
獲獎(jiǎng)于2013年8月31日
這個(gè)網(wǎng)站不為別的，就為了展示當(dāng)下設(shè)計(jì)趨勢(shì)而來的——扁平化設(shè)計(jì)、垂直滾動(dòng)、充分響應(yīng)、基于網(wǎng)格的布局、大量的純色……難道還需要加入其它元素？這個(gè)網(wǎng)站非常值得拿下大獎(jiǎng)。
獲獎(jiǎng)于2013年8月19日
不得不承認(rèn)，這個(gè)站點(diǎn)就像是在表演魔術(shù)一樣…點(diǎn)開每個(gè)連接，過渡形式非常的漂亮！而且，這個(gè)網(wǎng)站也是響應(yīng)式的。
獲獎(jiǎng)于2013年7月29日
該站點(diǎn)的導(dǎo)航方式非常不一般。直接拖動(dòng)頁(yè)面可以水平和垂直變換頁(yè)面。右上角有一個(gè)小小的導(dǎo)航告訴你你所在的頁(yè)面?？赡芤婚_始你無法適應(yīng)這么高端的設(shè)計(jì)，不過實(shí)在是太完美了。
獲獎(jiǎng)于2013年7月28日
設(shè)計(jì)師個(gè)人視差滾動(dòng)網(wǎng)站。隨著頁(yè)面的往下滾動(dòng)，圓圈里面展示設(shè)計(jì)師個(gè)人的項(xiàng)目。采用扁平化設(shè)計(jì)，充分響應(yīng)。
獲獎(jiǎng)于2013年7月21日
該網(wǎng)站基于網(wǎng)格布局，扁平化設(shè)計(jì)和大字體設(shè)計(jì)。充分響應(yīng)。
獲獎(jiǎng)于2013年6月7日
嗯，又是一個(gè)包含設(shè)計(jì)趨勢(shì)相當(dāng)多的網(wǎng)站：垂直滾動(dòng),扁平化設(shè)計(jì),巨大的色塊,基于網(wǎng)格的布局。但不是響應(yīng)式的。
總結(jié)
其實(shí)我們已經(jīng)看到這些趨勢(shì)在過去的幾年里已經(jīng)流行了一段時(shí)間，有一些是新興的，可能會(huì)經(jīng)不起時(shí)間的考驗(yàn)。隨著響應(yīng)式設(shè)計(jì)和扁平化設(shè)計(jì)的普及，事實(shí)上很多創(chuàng)造力已經(jīng)無法注入到網(wǎng)站設(shè)計(jì)需求中了。從上面的例子中我們就可以發(fā)現(xiàn)響應(yīng)式設(shè)計(jì)被忽視了，取而代之的是必須展示的內(nèi)容。但是大多數(shù)網(wǎng)站依然會(huì)另外出一個(gè)移動(dòng)版本。
總的來說，如果你想讓響應(yīng)式得以發(fā)揮，那么一些很好的創(chuàng)意可能就會(huì)半途而廢。
你覺得扁平化設(shè)計(jì)和響應(yīng)式設(shè)計(jì)會(huì)隨著時(shí)間的沉淀留下來嗎？為了強(qiáng)調(diào)這兩種設(shè)計(jì)你有什么辦法?或許透明ui設(shè)計(jì)和長(zhǎng)投影會(huì)是一個(gè)趨勢(shì)呢！在評(píng)論框中留下你對(duì)網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)的看法吧！
原文地址：onextrapixel
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.gerard.com.cn