藍藍設(shè)計( www.alimai.net )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù).

每一個扁平化界面設(shè)計，都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計

來源：http://zwkufo.blog.163.com/blog/static/2588251201211311143818/?suggestedreading&wumii

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

Metro在微軟的內(nèi)部開發(fā)名稱為“ typography-based design language”（基于排版的設(shè)計語言）。它最早出現(xiàn)在微軟電子百科全書95，此后微軟又有許多知名產(chǎn)品使用了Metro UI，這包括：Windows媒體中心、Zune播放器等等。該技術(shù)已于2010年初（美國）獲得Metro UI專利批準(zhǔn)（USPTO）。Metro UI的應(yīng)用是windows phone 7智能手機系統(tǒng)，并將應(yīng)用于未來的windows 8、office 和 Xbox 360產(chǎn)品中。

Metro UI是微軟的一種設(shè)計方案。該設(shè)計方案已用于移動操作系統(tǒng)Windows Phone 7和多款微軟產(chǎn)品。微軟Segoe WP字體，屬于Segoe字體家族的一員，細膩堅韌給人一種優(yōu)雅的美感，同時它也是WP7手機系統(tǒng)的默認字體。

源自瑞士的設(shè)計風(fēng)格：Metro UI

求本溯源，Metro UI是基于瑞士平面設(shè)計原則，其最初在Windows XP的Windows Media Center就中有體現(xiàn)，這有利于以文字為主的界面導(dǎo)航。2006年著名的Zune播放器開始使用類似Metro的設(shè)計風(fēng)格。微軟的設(shè)計師計劃重新設(shè)計現(xiàn) 有用戶界面、更清爽的排版和較少的重點以便于用戶使用。Zune的桌面客戶端程序也使用了不同于以往Portable Media Center用戶界面，其清爽排版和設(shè)計給用戶耳目一新的沖擊。

圖：Segoe WP字體

機場和地鐵的指示牌給了微軟設(shè)計團隊靈感，其設(shè)計團隊指出：Metro UI是來源于美國華盛頓州金縣都會交通局（King County Metro）的標(biāo)識設(shè)計，這種風(fēng)格大量采用碩大突兀的字體，能吸引讀者的注意力。微軟認為Metro設(shè)計主題應(yīng)該是：“光滑、快、現(xiàn)代”。Metro UI中圖標(biāo)設(shè)計也會不同于Android和iOS界面。

Metro UI設(shè)計具備以下五點原則：

1. 干凈、輕量、開放、快速

2. 要內(nèi)容，而不是質(zhì)感

3. 整合軟硬件

4. 世界級的動畫

5. 生動，有靈魂

Metro之父：瑞士平面設(shè)計風(fēng)格概述

20世紀(jì)50年代期間，一種嶄新的平面設(shè)計風(fēng)格終于在聯(lián)邦德國與瑞士形成，被稱為“瑞士平面設(shè)計風(fēng)格”，由于這種風(fēng)格簡單明確，傳達功能準(zhǔn)確，因此很流行與全世界，成為二戰(zhàn)后影響最大，國際最流行的設(shè)計風(fēng)格，因此被稱為“國際主義平面設(shè)計風(fēng)格”。

圖：瑞士平面設(shè)計

瑞士平面設(shè)計風(fēng)格穩(wěn)健，四平八穩(wěn)的傳達設(shè)計，給人印象深刻。不少人認為瑞士風(fēng)格是一個統(tǒng)一的、單一的風(fēng)格，瑞士設(shè)計家大部分不同意這種看法，他們往往強調(diào)瑞士國家雖然小，但是設(shè)計風(fēng)格變化多端，極為豐富。

圖：瑞士平面設(shè)計

對于瑞士設(shè)計學(xué)校的師生來說，瑞士國際主義風(fēng)格已經(jīng)是過去的事情了，但是，瑞士的設(shè)計教育卻深深地受到這種50 、60 年代發(fā)展起來的風(fēng)格的影響。直到現(xiàn)在，瑞士的平面設(shè)計依然具有強烈的整潔、嚴(yán)謹、工整、理性化的特征，一絲不茍，傳達準(zhǔn)確，形式單調(diào)乏味，不少年輕人感到 瑞士設(shè)計，特別是平面設(shè)計已經(jīng)太深地陷人瑞士國際主義風(fēng)格中，瑞士設(shè)計界需要一次真正的革命、造反，來蕩滌過往風(fēng)格的陰影。

圖：瑞士平面設(shè)計

獨特風(fēng)格：Metro UI強調(diào)信息本身

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

圖：Metro UI強調(diào)信息本身

Metro UI強調(diào)利用時間碎片

在時間碎片中找尋到更多的信息。這就是MetroUI為Windows Phone所訂制的設(shè)計理念。現(xiàn)在社會連呼吸都要趕時間，很多用戶沒有過多的時間來用復(fù)雜的手勢操控手機。在公交車上，我們可能利用從座位起身到在后門排 隊等著下車的這個狹窄的時間間隔中，還想著要看一條微博。也許趁著在超市排隊結(jié)賬的時候，都要用微信搖一下周圍的新朋友。著重提高用戶的單手操作準(zhǔn)確性， 就能讓用戶死死的黏在你的應(yīng)用上。

40年用戶界面設(shè)計歷史簡單回溯

界面設(shè)計是軟件的人機交互、操作邏輯、界面美觀的整體設(shè)計。好的UI設(shè)計不僅是讓軟件變得有個性有品味，還要讓軟件的操作變得舒適、簡單、自由、充分體現(xiàn)軟件的定位和特點。

在漫長的軟件發(fā)展中，界面設(shè)計工作一直沒有被重視起來。做界面設(shè)計的人也被貶義的稱為“美工”。其實軟件界面設(shè)計就像工業(yè)產(chǎn)品中的工業(yè)造型設(shè)計一 樣，是產(chǎn)品的重要買點。一個友好美觀的界面會給人帶來舒適的視覺享受，拉近人與電腦的距離，為商家創(chuàng)造賣點。界面設(shè)計不是單純的美術(shù)繪畫，他需要定位使用 者、使用環(huán)境、使用方式并且為最終用戶而設(shè)計，是純粹的科學(xué)性的藝術(shù)設(shè)計。檢驗一個界面的標(biāo)準(zhǔn)即不是某個項目開發(fā)組領(lǐng)導(dǎo)的意見也不是項目成員投票的結(jié)果， 而是最終用戶的感受。所以界面設(shè)計要和用戶研究緊密結(jié)合，是一個不斷為最終用戶設(shè)計滿意視覺效果的過程。在漫長的人機交互史中，UI設(shè)計的理念也在不停迭 代。

1984年1月1日，Apple MacOS 1.1

1995年，微軟 Windows 95

2005年，Apple OS X Tiger

今天，Metro UI設(shè)計語言誕生

Metro的設(shè)計靈感來自交通系統(tǒng)：它需要幫助人們能夠在短時間內(nèi)，快速找到自己所需的信息。Metro一詞在英文中譯為地鐵的意思，這充分體現(xiàn)了它的淵源和其藝術(shù)風(fēng)格。

圖：地鐵中的Metro信息版

干貨好料：Metro UI中的設(shè)計元素

你覺得Metro UI界面非常的簡單？它的設(shè)計理念就是要突出簡潔與視覺焦點的引導(dǎo)。如果你是一名Windows Phone移動應(yīng)用開發(fā)者，或是應(yīng)用UI的設(shè)計者，那么下面提到的Metro UI中設(shè)計元素，你都必須應(yīng)該知道。

開始界面：下面我們來看一下Windows Phone中Metro UI的開始界面。它具備一些用戶經(jīng)常使用的必要信息。人脈、圖片、游戲、音樂和視頻、辦公、電子市場等。這個界面，其內(nèi)容可以縱向滾動，方便單手拇指操作。同時在狹小的手機屏幕中，可以顯示更多內(nèi)容。

圖：Windows Phone中的“開始菜單”

多寶閣設(shè)計：多寶格又稱“百寶格”或“博古格”，是專為陳設(shè)古玩器物的。它是進入清代才興起，并十分流行的家具品種。多寶格的獨特之處在于，它將格 內(nèi)做出橫豎不等、高低不齊、錯落參差的一個個空間。人們可以根據(jù)每格的面積大小和高度，擺放大小不同的陳設(shè)品。在視覺效果上，它打破了橫豎連貫等極富規(guī)律 性的格調(diào)，因而開辟出新奇的意境來。多寶格興盛于清代，與當(dāng)時的扶手椅一起，被公認為是最富有清式風(fēng)格的家具之一。

圖：多寶閣傳統(tǒng)家具

圖：Metro UI的“多寶閣設(shè)計”

活動方格設(shè)計：在Metro界面中，應(yīng)用都以可以翻轉(zhuǎn)的方形圖標(biāo)的形式呈現(xiàn)在主界面中。他們就好似是多寶格中的 “收藏品”一樣，每一個應(yīng)用都會給用戶愛不釋手的感覺?？煞D(zhuǎn)的圖標(biāo)，同時又印證了多寶格精致的機關(guān)設(shè)計，給人以一種不斷幻化的新奇感。讓人忍不住去探索 Metro UI中的各種內(nèi)容。

圖：可以翻轉(zhuǎn)的圖標(biāo)

通過刷新活動方格的內(nèi)容，可以讓一片狹小的區(qū)域顯示更多背后的內(nèi)容。這種設(shè)計，要比單純的圖標(biāo)式界面能呈現(xiàn)更多豐富的內(nèi)容。

Metro UI活動方格設(shè)計精要：

1. 活動方格式的圖標(biāo)可以反映出更多應(yīng)用程序的信息。

2. 圖片豐富細膩，每一個小方框由173 X 173像素陣列組成，其可以顯示精致細膩的圖片。

3. 多標(biāo)題的圖片，可以容納下更多內(nèi)容，可以給設(shè)計師更多的靈感空間，每一個應(yīng)用都有機會構(gòu)建自己的獨特風(fēng)格。

Panorama環(huán)景界面概念：環(huán)景一詞源自于“panorama”，又稱全景圖，它是一種廣角圖，可以以畫作、照片、視頻、三維模型的形式存在。 全景圖這個詞最早由愛爾蘭畫家羅伯特?巴克提出，用以描述他創(chuàng)作的愛丁堡全景畫?，F(xiàn)代的全景圖多指通過相機拍攝并在電腦上加工而成的圖片。19世紀(jì)中葉， 全景圖成為最常用的景觀和歷史事件的表現(xiàn)手法。1881年，荷蘭海景畫家梅斯達格（Hendrik Willem Mesdag）等人創(chuàng)作了梅斯達格全景畫，并將畫放在一個直徑約40米的環(huán)形面內(nèi)，畫長約120米，高14余米。

圖：2011中國移動開發(fā)者大會現(xiàn)場環(huán)景圖

圖：清明上河圖畫卷

用戶手中的這臺WP7手機的可視區(qū)域是十分有限的。例如諾基亞Lumia 800的屏幕僅為3.7寸，為了能讓用戶透過窄小的手機屏幕，看到更為宏大的場景，在Metro UI中就采用了這種Panorama設(shè)計的概念。它最大的益處是可以在一個二維平面內(nèi)，集中顯示多種類型、多種來源的信息內(nèi)容。

正如這張清明上河圖所呈現(xiàn)出來的景象，寬大的卷軸不可能在手機中整體呈現(xiàn)出來。但是通過Panorama設(shè)計的概念，用戶可以橫向滾動卷軸，一點一 點地將整張清明上河圖瀏覽完。并且在花卷橫向滾動時，人腦會記住當(dāng)前屏幕所展示的內(nèi)容以外的部分，并且人腦會自動將這些順序與邏輯關(guān)系都有機的結(jié)合起來。 在人的腦海中會自然呈現(xiàn)出原畫磅礴的內(nèi)容。

圖：Panorama風(fēng)格應(yīng)用

Panorama設(shè)計的準(zhǔn)則，讓用戶可以控制自己的視野，通過用手指在屏幕上滑動來獲得自己想要看的內(nèi)容。同時，這種操控方式也是可以全屏幕進行的，并且可以視作是一種應(yīng)用程序內(nèi)的導(dǎo)航模式。

1. 使用任意單一的顏色作為背景色，或者是一張圖片作為Panorama環(huán)景的背景。

2. 用戶不必使用任何額外的觸筆或者按鍵就能完成對Panorama的控制。

3. 在應(yīng)用UI的設(shè)計時，微軟對設(shè)計師有一個明確的要求：Panorama界面不能過長，要限定在4個屏幕寬度之內(nèi)。

圖：Panorama風(fēng)格應(yīng)用

Pivot樞紐：是指最重要的部分，事物相互聯(lián)系的中心環(huán)節(jié)。在構(gòu)造地質(zhì)學(xué)中，在褶皺的各個橫剖面上，同一褶皺面的各最大彎曲點的聯(lián)線叫做樞紐。Pivot樞紐通過不同的方式顯示設(shè)置，Pivot樞紐的概念類似古代的“雕花燈籠”在轉(zhuǎn)動的樣子。

Pivot是立體的，它像是一個有許多面的實體

圖：雕花燈籠

在Metro UI中的樞紐控制，提供了一種快速的獲取和管理信息的途徑，它能夠以多種窗格的形式滾動呈現(xiàn)出來。用戶能夠使用它來過濾較大的數(shù)據(jù)，通過它來查看多重數(shù)據(jù)，或者在應(yīng)用程序之間進行切換查看。

微軟官方設(shè)計建議：

1. Pivot樞紐控制僅僅能顯示一組項目，或者是類似的數(shù)據(jù)類型。

2. 絕對不要在Pivote樞紐中包含Panorama型的環(huán)景控制，或者是在Pivot樞紐中再加入Pivot類型的控制。

3.Pivot樞紐中的頁面，不應(yīng)該被應(yīng)用于任務(wù)流。

4.不要試圖使用觸筆控制或者是滾動控制來代替Pivot樞紐控制。尤其是在sllder、Toggles、Map控制中。

圖：Pivot控件結(jié)構(gòu)

Pivot VS. Panorama

Pivot和Panorama都是可以橫向拓展視野，一個是翻轉(zhuǎn)，一個是平移。但是在開發(fā)者設(shè)計UI時，往往會將他們相互混淆。

Pivot可以支持更長數(shù)字的項目，因為它每個翻轉(zhuǎn)層都是類似的數(shù)據(jù)。而Panorama主要追求的是更炫的用戶體驗，在Panorama中每一組數(shù)據(jù)要足夠在一屏的寬度內(nèi)顯示出來，這樣用戶不必來回滾動屏幕翻看內(nèi)容。

在Pivot中，支持豐富的代碼內(nèi)容，開發(fā)者可以調(diào)用許多數(shù)據(jù)內(nèi)容，并且以不同的方式呈現(xiàn)出來。而在Panorama中，需要與一些系統(tǒng)操作相匹配，因此其代碼實現(xiàn)的功能也相對簡單一些。

在Pivot中LoadingPivotltem和UnloadingPivotltem事件可以簡單的被推遲。另外Pivot還可以讓用戶更加的利用屏幕空間。

對于Panorama來說，其背景圖片可以是任意尺寸，在垂直方面，系統(tǒng)都會自動的適應(yīng)屏幕的大小，確保頂部和底部都完全吻合，而在水平方向，將圖片等分成四個屏幕視野，同時確保屏幕滑動流暢。

Pivot（下） VS. Panorama（上）

Metro、iOS、Android之三大UI風(fēng)格對比

三種移動平臺，三種風(fēng)格迥異的UI界面。先有iOS，后有Android，但是Metro UI的風(fēng)格，早在許久之前就深入現(xiàn)代設(shè)計殿堂。

圖：Metro UI（左）、iOS UI（中）、Android UI（右）

Live & rich tiles對決靜態(tài)圖標(biāo)。在Windows Phone中，圖標(biāo)按鈕可以呈現(xiàn)出更加豐富的信息。

圖：Metro UI能推送更多信息

集成流與獨立應(yīng)用。WP和Android在一個應(yīng)用中，四步即可對一張照片完成剪裁。而在iOS中，需要頻繁的在2個應(yīng)用中切換，至少6步才能搞定。

圖：三大平臺操作誰更簡單？

簡單的菜單 VS. 各種高級子選項。沒有選項卡，沒有古怪的按鈕，有的僅僅是簡潔明了的菜單。Metro UI回歸質(zhì)樸，所帶給用戶的是極簡式的操作體驗。

圖：三大平臺操作誰更直觀？

MetroUI的秘密：誰更適合視力有障礙的人？

圖：在你視力好的時候，可能不會覺得他們有太大差別

圖：當(dāng)你視力有些許的問題時，你依舊能準(zhǔn)確操作手機

MetroUI未來發(fā)展之勢

現(xiàn)在，微軟開始整合本設(shè)計風(fēng)格到其他產(chǎn)品中，如新版本的Windows Live Messenger和Live Mesh。而微軟也確認Windows 8將全面集成Metro UI設(shè)計。而根據(jù)Office內(nèi)部測試版的截圖，Office也會使用Metro設(shè)計。微軟美國官方網(wǎng)站亦部分使用本設(shè)計。

圖：Windows8的Metro界面

Metro UI會被廣大消費者接受嗎？

Metro UI會被消費者所接受嗎？這個情況與iPhone不同，蘋果的iPhone已經(jīng)非常有名，它的各種消息都是媒體們爭相報道的好題材。當(dāng)iPhone的用戶 在iPhone初代、iPhone 3G和iPhone 3GS時就有了深厚的積累和廣泛的認知，由此在iPhone4推出時其銷量的爆炸式增長也就是必然的事情了。對于iOS的界面來說，消費者經(jīng)歷了漫長的過 程才接受它的。同時在這個接受的過程中，iOS的界面也在各種的反饋聲中不斷的進化。

圖：CSDN微峰會 諾基亞Lumia 800品鑒交流

當(dāng)Android出現(xiàn)的時候，其界面與iPhone基本相同。Android抄襲iOS的界面設(shè)計之所以讓喬布斯非常惱火，就說明谷歌在這方面是非常成功的。雖然這二者也有著明顯的差異，但是從主界面的網(wǎng)格式圖標(biāo)布局來看，容易讓用戶找到所需內(nèi)容。

微軟需要與合作伙伴一起精心的打造Windows Phone的生態(tài)鏈，Windows Phone手機會在更多的國家上市銷售。如果人們買不到Windows Phone，那么其他人就不會買它。這與手機系統(tǒng)的設(shè)計和手機的質(zhì)量無關(guān)，可以說目前Windows Phone手機上Metro UI正缺乏被社會廣泛接受的一些必要條件。但是這一設(shè)計語言必然會慢慢流行起來。

三大智能手機UI誰看上去更藝術(shù)？

你可能會偶爾看到，某個餐廳的菜單，用的是iOS的界面風(fēng)格。也許你能聽說某人，設(shè)計了一個隨身記事本，其外觀與三星的note手機極為相似。你可 能會哇的贊嘆，其UI設(shè)計的影響力，已經(jīng)從移動領(lǐng)域延伸到了日常生活中。但Metro UI則完全相反，它是先被廣泛應(yīng)用在日常的生活中，然后再經(jīng)過各種優(yōu)化，才植入智能手機中的。源于生活而高于生活，這才能稱之為藝術(shù)。我國某位著名的根雕 藝術(shù)大師曾經(jīng)說過這樣一句話：工藝品和藝術(shù)品的價值至少差著五個檔次。

掃一掃，案例分享帶回家（藍藍設(shè)計微信公眾平臺）