2013-3-31 藍(lán)藍(lán)設(shè)計(jì)的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( www.ocunn.cn )是一家專(zhuān)注而深入的設(shè)計(jì)機(jī)構(gòu) ，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
來(lái)源：http://tid.tenpay.com/?p=4250
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
Metro 設(shè)計(jì)是一個(gè)不容忽視的市場(chǎng)大趨勢(shì)。這是全新的用戶(hù)體驗(yàn)，將成為微軟未來(lái)的操作系統(tǒng)——Windows 8和Windows phone 的一部分。隨著移動(dòng)時(shí)代的到來(lái)，metro UI 風(fēng)格被推向新的高度，“METRO STYLE”的浪潮下，你被打濕了嗎？
Metro是由微軟公司開(kāi)發(fā)的內(nèi)部名稱(chēng)為“ typography-based design language”（基于排版的設(shè)計(jì)語(yǔ)言）。Metro UI是一種界面展示技術(shù)，和蘋(píng)果的iOS、谷歌的Android界面最大的區(qū)別在于：后兩種都是以應(yīng)用為主要呈現(xiàn)對(duì)象，而Metro界面強(qiáng)調(diào)的是信息本身，而不是冗余的界面元素。
metro這是一個(gè)全新的界面，你有足夠的空間去創(chuàng)造去發(fā)揮你的創(chuàng)意。我們?nèi)蕴幱谒某砷L(zhǎng)曲線的起步階段，所以面臨的挑戰(zhàn)新鮮而有趣。當(dāng)我第一次看到 WP7 的展示時(shí)，我在想，“我一定要為它設(shè)計(jì)些什么?！碧剿魇亲詈玫膶W(xué)習(xí)方式，學(xué)著為用戶(hù)創(chuàng)建一個(gè)激動(dòng)人心的用戶(hù)體驗(yàn)吧。
早期Metro風(fēng)格應(yīng)用
2006年著名的Zune播放器開(kāi)始使用類(lèi)似Metro的設(shè)計(jì)風(fēng)格。微軟的設(shè)計(jì)師計(jì)劃重新設(shè)計(jì)現(xiàn) 有用戶(hù)界面、更清爽的排版和較少的重點(diǎn)以便于用戶(hù)使用。Zune的桌面客戶(hù)端程序也使用了不同于以往Portable Media Center用戶(hù)界面，其清爽排版和設(shè)計(jì)給用戶(hù)耳目一新的沖擊。
源自瑞士的設(shè)計(jì)風(fēng)格：Metro UI Segoe WP字體
求本溯源，Metro UI是基于瑞士平面設(shè)計(jì)原則，其最初在Windows XP的Windows Media Center就中有體現(xiàn)，這有利于以文字為主的界面導(dǎo)航。我們的設(shè)計(jì)靈感來(lái)自字體, 漂亮的字體, 我們要讓界面變得像這些字體一樣美。文字體現(xiàn)了信息, 文字的美感是無(wú)法取代的。
Windows8
win8發(fā)布以來(lái)，受到很大的追捧，特別是設(shè)計(jì)領(lǐng)域，掀起的平面化設(shè)計(jì)浪潮，下面是Windows8開(kāi)始界面
win8使用的是多寶閣的設(shè)計(jì)理念。多寶格又稱(chēng)“百寶格”或“博古格”，是專(zhuān)為陳設(shè)古玩器物的。它是進(jìn)入清代才興起，并十分流行的家具品種。多寶格的獨(dú)特之處在于，它將格內(nèi)做出橫豎不等、高低不齊、錯(cuò)落參差的一個(gè)個(gè)空間。人們可以根據(jù)每格的面積大小和高度，擺放大小不同的陳設(shè)品。在視覺(jué)效果上，它打破了橫豎連貫等極富規(guī)律 性的格調(diào)，因而開(kāi)辟出新奇的意境來(lái)。
多寶閣設(shè)計(jì)具有強(qiáng)大的內(nèi)容分層結(jié)構(gòu)，始于內(nèi)容簡(jiǎn)述，層層遞進(jìn)，深入細(xì)節(jié)，就在實(shí)時(shí)圖塊中， Mango 的新功能。在 WP7 首發(fā)時(shí)，圖塊充其量是一個(gè)靜態(tài)疊加的程序圖標(biāo)，何在 IOS 和 Android 里的一樣?，F(xiàn)在，一個(gè)新的模式被引進(jìn)過(guò)來(lái)。主屏幕只顯示簡(jiǎn)潔的通知，即應(yīng)用程序中最重要的那部分信息，就像雜志的文摘部分一樣。想想看，這塊空間能夠提供有意義的內(nèi)容，并且是實(shí)時(shí)更新可用的。
用戶(hù)們?nèi)绻幌霋咭谎厶鞖馇闆r，他們不需要打開(kāi)應(yīng)用就可以辦到，因?yàn)樽罨镜男畔⒍荚谀巧厦媪恕５侨绻麄兿肟次磥?lái)五天的天氣或是其他細(xì)節(jié)，他們還是要打開(kāi)應(yīng)用的。實(shí)時(shí)圖塊被設(shè)計(jì)成可以任意變換的，你可以創(chuàng)造性地組合不同的實(shí)時(shí)圖塊。
windows phone
用戶(hù)手中的這臺(tái)WP7手機(jī)的可視區(qū)域是十分有限的。例如諾基亞Lumia 800的屏幕僅為3.7寸，為了能讓用戶(hù)透過(guò)窄小的手機(jī)屏幕，看到更為宏大的場(chǎng)景，在Metro UI中就采用了這種Panorama設(shè)計(jì)的概念。它最大的益處是可以在一個(gè)二維平面內(nèi)，集中顯示多種類(lèi)型、多種來(lái)源的信息內(nèi)容。
Panorama環(huán)景界面概念：環(huán)景一詞源自于“panorama”，又稱(chēng)全景圖，它是一種廣角圖，可以以畫(huà)作、照片、視頻、三維模型的形式存在。 全景圖這個(gè)詞最早由愛(ài)爾蘭畫(huà)家羅伯特?巴克提出，用以描述他創(chuàng)作的愛(ài)丁堡全景畫(huà)?，F(xiàn)代的全景圖多指通過(guò)相機(jī)拍攝并在電腦上加工而成的圖片。19世紀(jì)中葉， 全景圖成為最常用的景觀和歷史事件的表現(xiàn)手法。
開(kāi)始界面：下面我們來(lái)看一下Windows Phone中Metro UI的開(kāi)始界面。它具備一些用戶(hù)經(jīng)常使用的必要信息。圖片、游戲、音樂(lè)和視頻、辦公、電子市場(chǎng)等。這個(gè)界面，其內(nèi)容可以豎向滾動(dòng)，方便單手拇指操作。同時(shí)在狹小的手機(jī)屏幕中，可以顯示更多內(nèi)容。
windows phone另一個(gè)最大的特性就是活動(dòng)方格翻轉(zhuǎn)動(dòng)畫(huà)的設(shè)計(jì)；
在Metro界面中，應(yīng)用都以可以翻轉(zhuǎn)的方形圖標(biāo)的形式呈現(xiàn)在主界面中。他們就好似是多寶格中的 “收藏品”一樣，每一個(gè)應(yīng)用都會(huì)給用戶(hù)愛(ài)不釋手的感覺(jué)?？煞D(zhuǎn)的圖標(biāo)，同時(shí)又印證了多寶格精致的機(jī)關(guān)設(shè)計(jì)，給人以一種不斷幻化的新奇感。讓人忍不住去探索 Metro UI中的各種內(nèi)容。
可以翻轉(zhuǎn)的圖標(biāo)通過(guò)刷新活動(dòng)方格的內(nèi)容，可以讓一片狹小的區(qū)域顯示更多背后的內(nèi)容。這種設(shè)計(jì)，要比單純的圖標(biāo)式界面能呈現(xiàn)更多豐富的內(nèi)容。WP7動(dòng)畫(huà)模塊和轉(zhuǎn)場(chǎng)效果深深植入獨(dú)創(chuàng)的 UI 概念中，成為了最基本的元素。你不僅能及時(shí)給與反饋（正如一個(gè)實(shí)時(shí)通知功能一樣），還能把用戶(hù)的注意力集中到當(dāng)下正發(fā)生的事情上，并為他們提供與眾不同的體驗(yàn)
圖標(biāo)
Live & rich tiles對(duì)決靜態(tài)圖標(biāo)。在Windows Phone中，圖標(biāo)按鈕可以呈現(xiàn)出更加豐富的信息。
Metro、iOS、Android之三大UI風(fēng)格對(duì)比
三種移動(dòng)平臺(tái)，三種風(fēng)格迥異的UI界面。先有iOS，后有Android，但是Metro UI的風(fēng)格，早在許久之前就深入現(xiàn)代設(shè)計(jì)殿堂。
三大智能手機(jī)UI誰(shuí)看上去更藝術(shù)？
你可能會(huì)偶爾看到，某個(gè)餐廳的菜單，用的是iOS的界面風(fēng)格。也許你能聽(tīng)說(shuō)某人，設(shè)計(jì)了一個(gè)隨身記事本，其外觀與三星的note手機(jī)極為相似。你可 能會(huì)哇的贊嘆，其UI設(shè)計(jì)的影響力，已經(jīng)從移動(dòng)領(lǐng)域延伸到了日常生活中。但Metro UI則完全相反，它是先被廣泛應(yīng)用在日常的生活中，然后再經(jīng)過(guò)各種優(yōu)化，才植入智能手機(jī)中的。源于生活而高于生活，這才能稱(chēng)之為藝術(shù)。我國(guó)某位著名的根雕藝術(shù)大師曾經(jīng)說(shuō)過(guò)這樣一句話：工藝品和藝術(shù)品的價(jià)值至少差著五個(gè)檔次。
metro 風(fēng)格軟件設(shè)計(jì)
同樣有國(guó)外的設(shè)計(jì)師進(jìn)行了各種嘗試，比如對(duì)windows8的文件系統(tǒng)設(shè)計(jì)的更有metro風(fēng)。Metro風(fēng)格采取了一種“大刀闊斧”的方式來(lái)刪除用戶(hù)界面中哪些非必須的元素, 無(wú)論是裝飾性的視覺(jué)元素還是多余的動(dòng)作。這使得我們能夠?qū)Ｗ⒂谟脩?hù)界面中最主要的元素, 并讓這些元素變得更加智能化、更加開(kāi)放, 整個(gè)用戶(hù)界面也更加輕盈。
真正的內(nèi)容，而不是質(zhì)感
我們相信設(shè)計(jì)中的真實(shí)感。一套用戶(hù)界面是由無(wú)數(shù)個(gè)像素組成的, 在Metro中, 去掉了所有的漸變和陰影, 為用戶(hù)呈現(xiàn)了真正數(shù)字化的界面。
當(dāng)然，對(duì)win8軟件的概念設(shè)計(jì)也會(huì)有很多的嘗試，
干凈，簡(jiǎn)約
window phone APP設(shè)計(jì)以色塊、大而纖細(xì)的字體為主，留白更多，便于閱讀，手的觸點(diǎn)更大，更容易操作，動(dòng)畫(huà)更出色。
metro風(fēng)格網(wǎng)頁(yè)設(shè)計(jì)
越來(lái)越多的設(shè)計(jì)師喜歡使用metro風(fēng)格，輕薄化已經(jīng)成為設(shè)計(jì)的趨勢(shì)，網(wǎng)頁(yè)設(shè)計(jì)也受到了metro風(fēng)格的影響。他引領(lǐng)了未來(lái)設(shè)計(jì)的方向。
工具型網(wǎng)站也會(huì)有metro的風(fēng)格。你會(huì)發(fā)現(xiàn)，用metro風(fēng)格來(lái)做數(shù)據(jù)型網(wǎng)站是在合適不過(guò)了，因?yàn)閙etro的精髓就在于信息的表達(dá)。他可以清晰的表達(dá)各種信息層次，圖形更加直觀。
有了 Metro， Windows Phone 7 對(duì)設(shè)計(jì)師來(lái)說(shuō)打開(kāi)了一扇設(shè)備和操作系統(tǒng)領(lǐng)域的新的大門(mén)。它代表了與蘋(píng)果和 Google的設(shè)備界面完全不同的新方向。這也給我們提供了工作的基準(zhǔn)以及未來(lái)拓展的方向。
本文只是拋磚引玉，如有不妥之處，還請(qǐng)斧正！
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.ocunn.cn