Metro UI是一種界面展示技術(shù)，和蘋果的iOS、谷歌的Android界面最大的區(qū)別在于：后兩種都是以應(yīng)用為主要呈現(xiàn)對象，而Metro界面強調(diào)的是信息本身，而不是冗余的界面元素。顯示下一個界面的部分元素的功能上的作用主要是提示用戶”這兒有更多信息”。同時在視覺效果方面，這有助于形成一種身臨其境的感覺。

科普一下：神馬是Metro？Metro是由微軟公司開發(fā)的內(nèi)部名稱為” typography-based design language”（基于排版的設(shè)計語言）。最早出現(xiàn)在微軟電子百科全書95，后來的產(chǎn)品如：windows媒體中心、Zune播放器都有用到這項技術(shù)。該技術(shù)已于2010年初（美國）獲得Metro UI專利批準(zhǔn)（USPTO）如今該技術(shù)被引入到微軟開發(fā)的Windows Phone操作系統(tǒng)和已經(jīng)發(fā)布的Windows 8預(yù)覽版以及Office 15中。

藍藍設(shè)計 ：2012年7月，在大連中軟實訓(xùn)基地學(xué)習(xí)時，老師要求我們分小組開發(fā)項目，理所當(dāng)然地，我擔(dān)任前端設(shè)計和開發(fā)的工作。
當(dāng)我略微得意地把設(shè)計好的頁面拿給老師顯擺時，他給了一個字的評價：”俗！”然后講，”中國風(fēng)看起來的確美，但這種美很容易趨于小氣和庸俗，遠不如簡單用色塊搭配出的效果。”

也是從那時候起，我開始注意色彩的搭配，也開始用這種觀點來把玩一些網(wǎng)頁和海報等的設(shè)計。
《甄嬛傳》再經(jīng)典，老外們也不會明白隱藏在后宮中的彎彎繞…

吃貨們有福啦！今天的話題與美食有關(guān)，而且是非常實在的經(jīng)驗分享，掌握這些技巧要素。你將會學(xué)做一個餐館及飲食類網(wǎng)站。而且這類網(wǎng)站能給自由設(shè)計師提供不錯的報酬。如果你打算進行此類設(shè)計，那么不妨花上幾分鐘，看看這篇文章，保證您有所收獲。
實踐方能得真知，本文通過大量生動的案例來進行深入觀察，剖析出那些餐飲類網(wǎng)頁設(shè)計的亮點所在。

1、圖像意味著一切

Site: The Claw Bar

圖像意味著一切，雖然略有夸張，但是是句實在話。質(zhì)量垃圾的、丑陋的圖像雖然能在常規(guī)網(wǎng)站上將就著看，但是在餐飲類網(wǎng)頁中行不通。如果你在設(shè)計中使用了一些低劣的圖片，那么你的薪水和酬勞可能就不那么容易拿到咯。
作為餐館網(wǎng)頁的瀏覽者，用戶的主要興趣在于食物。網(wǎng)頁必須的描述菜品的外觀，因此必須要使用圖像。槽糕的食物圖片對消費者的”殺傷力”巨大，用戶會因為圖像效果不佳而拒絕買單。

本周我們向您推薦這21個時尚新潮的網(wǎng)站設(shè)計，它們都有非常好看的聯(lián)系頁面。
或許很多人覺得聯(lián)系頁面并不重要，但是在國外，設(shè)計師和企業(yè)團隊是非常注重這個頁面的設(shè)計和信息展現(xiàn)的，有一個明確的方式讓人們獲得與你聯(lián)系的信息是非常重要的。
設(shè)計一個好的聯(lián)系頁能讓你與客戶更好的溝通。從咖啡館及餐館的頁面到設(shè)計工作室的頁面，我們將展示幾種不同的聯(lián)系頁。
這些設(shè)計簡潔、輕便、圖文并茂并豐富多彩。現(xiàn)在就來感受這些優(yōu)雅的頁面吧：）

相關(guān)文章推薦：
一組漂亮的婚禮相關(guān)網(wǎng)站設(shè)計欣賞
35個超贊的iOS App網(wǎng)站欣賞
70個全球最華麗的互動型單頁網(wǎng)站欣賞

Supereight Studio

藍藍設(shè)計精選25個與食物相關(guān)的網(wǎng)站設(shè)計，這些網(wǎng)站的設(shè)計主體突出，大部分以暖色調(diào)為主，比如披薩、曲奇餅之類的；當(dāng)然也有一些是走清涼風(fēng)的，比如冰淇淋之類；還有與愛情相關(guān)的象征著甜蜜的粉色系糖果類，更有單頁面食物制作流程的酷酷黑色系。

這些網(wǎng)站的主體內(nèi)容有主食類的，有餅干零食類，有咖啡飲料類，也有甜點類，更有公益性質(zhì)的。網(wǎng)站的背后有餐廳、有小賣部、有流動外賣、更有食品商。每個網(wǎng)站的所營造的氣場需要您點擊進去細細品喲：）

Milano

Culinary Culture

按鈕是網(wǎng)頁設(shè)計最重要的組成元素之一，是用戶和網(wǎng)站進行交互的重要橋梁。要設(shè)計出優(yōu)秀的按鈕設(shè)計是一件非常困難的事情，因為設(shè)計師們需要從整體設(shè)計的角度考慮按鈕設(shè)計成什么樣的風(fēng)格才能和頁面的其它部分很好的融合，同時按鈕的設(shè)計要操持風(fēng)格的一致性。下面和大家分享網(wǎng)頁設(shè)計中15個迷人的按鈕設(shè)計案例，一起欣賞。

Radio fm buttons

Iphone Camera App Ui

BT UI Facelift

隨著PC端、平板、智能手機等終端的發(fā)展，設(shè)備環(huán)境（系統(tǒng)平臺、屏幕尺寸、屏幕分辨率等）更加復(fù)雜，網(wǎng)頁展示需要考慮到各個終端的具體差異。

因此，響應(yīng)式網(wǎng)頁設(shè)計受到了大家的推崇。通過文中的9個免費的響應(yīng)式網(wǎng)頁設(shè)計模板，希望能幫大家了解這種技術(shù)以及提高工作效率。

1、TXT

這個模板有一個主頁頁面以及一個博客頁面。可分為一列或兩列，你可以根據(jù)自己的意愿進行設(shè)定。側(cè)邊欄的個數(shù)也可以自己自由設(shè)定。（演示 | 下載）

2、VERTI

一個基于HTML5和CSS3的模板。可以分列，同時提供博客和主頁的模板。（演示 | 下載）

如果我說要給你看一個3D flash網(wǎng)站，那么你腦海中想到的第一個關(guān)鍵字會是神馬呢？酷！炫！亮瞎？是的，這些似乎已經(jīng)約定俗成成了flash網(wǎng)站的夸獎詞。Flash可以用于web頁面組件的設(shè)計，同時也能開發(fā)互聯(lián)網(wǎng)應(yīng)用。Flash設(shè)計可以看作一種藝術(shù)形式，由于它具有其驚人的設(shè)計及動畫表現(xiàn)。除了坑爹的網(wǎng)速會詬病外，但它本身絕對是讓人無法抗拒的。那么今天就讓我們來欣賞20個引人注目的3D Flash網(wǎng)頁設(shè)計。

1. 2Brand:

2. Coca Cola:

如何選擇一種最恰當(dāng)?shù)木W(wǎng)頁背景是網(wǎng)站設(shè)計中最常見的問題之一。 通常網(wǎng)站設(shè)計者都已準(zhǔn)備好網(wǎng)站內(nèi)容，而且版面布局大多也基本敲定。但背景要么是令人厭煩，要么是讓人眼花繚亂，讓設(shè)計者遲遲不能確定。

今天，我們將介紹幾個實際網(wǎng)站來啟發(fā)你的靈感，看看如何設(shè)計趣味而又令人感興趣的網(wǎng)頁背景。收藏本文，當(dāng)你再次閱讀時，你定會被某一個背景設(shè)計所迷戀。

1. 素描設(shè)計

這種設(shè)計在幾年前就變得比較流行，而且一直持續(xù)到現(xiàn)在。這靈感來源于在筆記本上的涂鴉亂畫，就像你十幾歲時在英文課上所作的那樣。每一部分都是些粗糙的素描表現(xiàn)，頁面看似是非常隨意的創(chuàng)意集合，而它們都以不同的旋轉(zhuǎn)方式散布在頁面各處。NotchStudio就是很好地應(yīng)用了這種創(chuàng)意，并且以非常柔緩的方式表現(xiàn)出來。

即使你本人不善長繪畫，這種創(chuàng)意也是相當(dāng)容易實現(xiàn)的，是因為這些涂鴉通常都是些非?；镜脑O(shè)計。如果擁有一部Wacom或iPad平板電腦，你就可以相當(dāng)容易地描繪出你自己的圖片或者某種意義上能夠反映此類風(fēng)格的書寫文本。還有很多免費字體如Pointy，可以幫你不費吹灰之力就可實現(xiàn)讓人贊不絕口的素描。

2. 精細文稿設(shè)計風(fēng)格

紙張的質(zhì)地紋理總能激起設(shè)計者的激情，而且為所有年齡所適用。目前這種創(chuàng)意已不像幾年前那樣風(fēng)靡，但是它還是會帶給你一種非常微妙的效果：如果你沒有看到它，那會讓你非常地想念。

你注意到Beautiful Type所用的紋理設(shè)計，它既沒有偏離主題也沒有過分夸張，而是將一個原本看起來就很好的網(wǎng)站更是錦上添花。

合理運用素材，利用紋理繪制精美絕倫的網(wǎng)頁背景。

盡管極簡設(shè)計和扁平化不提倡使用紋理。但是設(shè)計無絕對，很多情況下，紋理的質(zhì)感，能讓整個網(wǎng)頁提升好幾個層次。

紋理能夠營造一種復(fù)古氛圍。本文收錄了20個網(wǎng)站，全部在紋理運用上頗有心得，可以看看他們的設(shè)計細節(jié)。

趕緊整理整理你所下載的資源包，動手實驗一個吧！

相關(guān)推薦：
《9月優(yōu)設(shè)筆刷+紋理+字體+界面組件干貨大集合》
《超贊！上千套華麗麗的點、線、面紋理大集合》
《10大創(chuàng)意教你玩轉(zhuǎn)網(wǎng)站背景設(shè)計》

Orchard Keepers

Postable

扁平化設(shè)計是指舍棄漸變、陰影、高光等擬物化的視覺效果，從而打造出一種看上去更加平面的界面設(shè)計風(fēng)格。扁平化的網(wǎng)頁設(shè)計更適合用于需要同時支持多種屏幕尺寸的響應(yīng)式設(shè)計技術(shù)中。今天，我給大家?guī)?5套用于扁平化設(shè)計的圖標(biāo)設(shè)計和網(wǎng)頁設(shè)計元素，記得分享和推薦?。?/p>

Flat Free UI Kit

我要下載

Apple devices – Flat icons (PSD)

我要下載

Mobile Flagships with PSD