有時候一個紋理，一個文字，一張背景圖，一個顏色體系，甚至一個小圖標(biāo)，都能讓頁面有復(fù)古的感覺。在這篇文章中，我們收集了許多這種風(fēng)格的頁面。如果你的下一個項目是需要設(shè)計出復(fù)古的感覺的話，那這篇文章可以啟發(fā)你很多的設(shè)計靈感。

相關(guān)閱讀：

復(fù)古背景下載 →漂亮的復(fù)古紋理背景素材下載
復(fù)古字體下載 → 25套復(fù)古懷舊字體打包下載
復(fù)古網(wǎng)頁欣賞 → 44個絕贊的復(fù)古風(fēng)格網(wǎng)頁設(shè)計

Cyclemon

Ready to Inspire

本文作者M(jìn)ark Praschan是一位具有將近十年經(jīng)驗的網(wǎng)頁設(shè)計師，Web開發(fā)師，Web項目經(jīng)理人。 文中強(qiáng)調(diào)復(fù)雜的高級效果能為設(shè)計增色不少，但如果用得不對，只會影響用戶對重點(diǎn)內(nèi)容的關(guān)注。高級效果可能正好是一項好的設(shè)計的沖擊力所在，但即便如此，也還是需要一些更簡單的效果與其配合。

　　簡單的效果和技巧是建造當(dāng)今設(shè)計的基石。比方說，如果你都不知道如何正確選擇顏色和文字效果，燦爛的 星光效果又能有什么用?

　　本著“少就是多”的理念，通過十個簡單好用的設(shè)計技巧 ，就足以大大提升你設(shè)計的專業(yè)性和感染力?；A(chǔ)先行。 學(xué)會走之前要先學(xué)會爬，讓我們從最基礎(chǔ)的簡單有效設(shè)計的概念開始。

基礎(chǔ)先行。 學(xué)會走之前要先學(xué)會爬，讓我們從最基礎(chǔ)的簡單有效設(shè)計的概念開始。

1. 增加對比

很可惜，添加額外的對比是最被忽視和棄用的技巧之一。

Joost de Valk 采用了細(xì)的高對比度邊線，讓訪客能更容易區(qū)分頁面的不同區(qū)域。在上圖中放大了的部分，你可以看到，大多數(shù)時候這種對比只是一條1像素的高亮線挨著1像素的暗線。

話說回來，這個頁面上的“More”和“Go”按鈕與周圍的對比度太小，即使你刻意在找也很容易被忽略掉。

大家應(yīng)該都發(fā)現(xiàn)現(xiàn)在很多網(wǎng)站的首屏都越來越有”感覺“了，用我們經(jīng)常調(diào)侃的一句話就是高端大氣國際化，那么如何做到這一點(diǎn)呢？

大家不妨打開支付寶、財付通等網(wǎng)站瞧瞧，不難發(fā)現(xiàn)規(guī)律：1、在首屏一條大橫紋上下功夫，區(qū)分下方的輔助信息；2、看上去更有人性（有人物素材出現(xiàn)在首屏），配合產(chǎn)品的精彩實物截圖。3、溫暖的色調(diào)、能烘托出產(chǎn)品氣質(zhì)的色彩。4、簡要的產(chǎn)品描述文案。5、點(diǎn)擊欲望更強(qiáng)的（橙、綠）大按鈕。6、盡可能多的高斯模糊。

今天我們要在這篇文章向您展示30個偉大漂亮的網(wǎng)頁例子，看看他們是如何利用首屏的橫條紋的吧，瞧瞧是不是利用此布局更有助于分解頁面引導(dǎo)用戶更好了解產(chǎn)品、愛上產(chǎn)品。

Janko At Warp Speed

Theme Trust

我們灰常樂意每周在網(wǎng)頁設(shè)計佳作列表中展現(xiàn)設(shè)計精美的網(wǎng)站，不斷為你提供靈感。而今天我們打算另辟蹊徑，為網(wǎng)頁設(shè)計師收集了既能提供設(shè)計靈感又實用的優(yōu)秀案例，與過往選擇單一”主題”的例子有所不同。我們將為你呈現(xiàn)不同的工具和技術(shù)分享網(wǎng)站，可讓你在得到靈感的同時還能發(fā)現(xiàn)不錯的工具或服務(wù)。在這篇文章中你將看到22個美觀又實用的網(wǎng)站，全部都不容錯過哦親！

responsify

Responsify是個用于創(chuàng)建響應(yīng)式模板的瀏覽器工具。

iconmonstr

你下一個項目就可以用的免費(fèi)簡約icon。

網(wǎng)頁設(shè)計中往往需要大量部署圖片。網(wǎng)站的品質(zhì)取決于圖像，如果一個網(wǎng)站的圖像品質(zhì)精良，那么體驗將非常的棒。

可以去看看那些優(yōu)秀設(shè)計師和開發(fā)者的作品，他們往往非常注意圖像的優(yōu)化。既保證了圖片的質(zhì)量，又適度壓縮圖像，以提高加載速度。

本文將介紹多種極佳的圖像優(yōu)化工具，可以在日常應(yīng)用中幫助你。

Online Image Optimizer（在線）

The Online Image Optimizer是一款在線壓縮圖像工具。支持本地上傳圖像進(jìn)行壓縮（最大不超過2.86MB）。可以選擇圖像輸出類型。默認(rèn)輸出格式設(shè)置為和輸入圖像格式相同。

瞧吧！現(xiàn)在到處都是明亮的設(shè)計照亮我們的屏幕，有時甚至亮瞎到我們的眼睛！大伙應(yīng)該都感同身受，接近節(jié)日或者年底的時候，以紅色為主色調(diào)的設(shè)計稿常?？梢宰屛覀兛吹交柝?，還有那些色彩斑斕的促銷專題。

那么今天，我們要好好和大家來推薦一些低調(diào)內(nèi)涵的網(wǎng)站，而這些設(shè)計者們也正采取了與熱鬧相反的路線：但他們依然創(chuàng)造了強(qiáng)大的網(wǎng)站，通過黑暗柔和的色彩！這些設(shè)計有一種誘人的存在，它們用黑白捕捉人的記憶情感。

這篇文章我們傾力推薦了20多個美麗的黑色系網(wǎng)站，微妙的色調(diào)和戲劇性的黑白圖像一定會讓你陷入這一場低調(diào)奢華的視覺盛宴里，來嘗嘗吧：）

另外也希望大家?guī)е鴨栴}去欣賞這些網(wǎng)站，這些設(shè)計師是如何把黑色設(shè)計的更有國際范？如果是你來，布局、素材、輔助色又會怎么選用呢？

我們也為您準(zhǔn)備了其他色系的優(yōu)秀文章，推薦您也有空一起來看看喲。
《配色秘要：奢華低調(diào)有內(nèi)涵的米黃色》
《超贊！網(wǎng)頁設(shè)計色彩剖析之矚目紅（附百枚網(wǎng)頁案例）》
《淺談色彩學(xué)：以紅色為主的色彩配色》

MoreSleep

Apple Mac Pro

Rook

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

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

Melbourne Remote Control Tourist

的遠(yuǎn)程旅游體驗，這個概念不錯吧！

Melbourne Remote Control Tourist

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

更少的按鈕和選項使得界面干凈整齊，使用起來格外方便?？梢詫⑿畔⒑褪挛锏墓ぷ鞣绞礁雍唵沃苯拥恼故境鰜?，減少認(rèn)知障礙的產(chǎn)生。越來越多的公司正在效仿，比如下面這些：

Who Wanna

Very-Make

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

CSS-Tricks

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

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

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

網(wǎng)站亮點(diǎn)（這個網(wǎng)站的獨(dú)特之處是什么？）：

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

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

如果你對扁平化風(fēng)格的網(wǎng)站更有興趣，那么推薦閱讀：
一組賦予你扁平化配色靈感的網(wǎng)頁設(shè)計
怒贊！2013扁平化設(shè)計終極指南
專屬扁平化設(shè)計的PS色板（配色庫）

uiGo Colors – iOS Flat UI Bundle