英文原文：smashingmagazine?

　　導(dǎo)讀：Windows Phone 7 引進(jìn)了一個(gè)全新的內(nèi)容管理和用戶界面，命名為Metro的設(shè)計(jì)語言和理論。微軟這次所看準(zhǔn)的市場和用戶群也與之前的老一代 Windows 不同(終于轉(zhuǎn)變了):從針對商業(yè)和技術(shù)用戶到普通用戶，線上，線下的生活緊密鏈接的新興用戶。

　　對話設(shè)計(jì)人員

　　我們就不強(qiáng)調(diào)設(shè)計(jì)在手機(jī)應(yīng)用上有多重要了。WP7是個(gè)非常不同于其他手機(jī)平臺的操作系統(tǒng)，雖然現(xiàn)在還在起步階段，業(yè)內(nèi)對它還是很看好的。設(shè)計(jì)人員應(yīng)該走在開發(fā)之前對它的平臺和用戶界面進(jìn)行了解。其二，微軟最終將會把 Metro 引入 Windows 8，打造一致性的手機(jī)、電腦界面。Windows 7.5，AKA 芒果，在九月發(fā)布了，緊接著，Nokia 發(fā)行了他們第一部 WP7 操作系統(tǒng)的手機(jī)。我們有理由相信，WP7在這個(gè)智能手機(jī)市場會扮演一個(gè)越來越重要的角色。

　　另辟蹊徑的設(shè)計(jì)

　　Windows 小組的靈感來自于路牌設(shè)計(jì)。在這些指路標(biāo)識設(shè)計(jì)中，很重要的一點(diǎn)是，他們?nèi)コ怂胁槐匾脑?#xff0c;并且把內(nèi)容作為設(shè)計(jì)核心；他們把這一點(diǎn)引入了 WP7 的設(shè)計(jì)，讓內(nèi)容說話。界面消失了，內(nèi)容是新的界面。現(xiàn)在的界面不是一個(gè)獲取內(nèi)容的途徑，而就是內(nèi)容本身。減少視覺設(shè)計(jì)強(qiáng)調(diào)了用戶與內(nèi)容的直接互動(direct interaction with the content)。

　　方格系統(tǒng)設(shè)計(jì)（Grid Systems in Graphic Design, by Josef Müller-Brockman）

　　WP7的圖像設(shè)計(jì)秉承了印刷字體的風(fēng)格，吸取了圖像設(shè)計(jì)師?Josef Müller-Brockman?的設(shè)計(jì)理念:在畫布上的純粹的印刷字體，簡潔的顏色和正方格子。圖標(biāo)完全融入背景，甚至包括了內(nèi)容本身，成為了導(dǎo)航的一部分。

?

　　簡潔設(shè)計(jì)和印刷字體， 應(yīng)用?Cocktail Flow?和?Fuse.

　　所有這些設(shè)計(jì)讓人們聯(lián)想到專業(yè)制圖. 地圖式的鋪陳方式提供了指向性；文本簡單明了，讓用戶可以輕松導(dǎo)航；除此之外，沒有多余的視覺元素。

　　全新的內(nèi)容方格

　　Metro 設(shè)計(jì)強(qiáng)調(diào)剛性的內(nèi)容組織.聯(lián)想一下一張地下鐵的地圖，它的信息架構(gòu)邏輯性極強(qiáng)。沒有多余的圖像元素，這個(gè)板塊的內(nèi)容只運(yùn)用了信息本身 （題外話：電路設(shè)計(jì)圖是基于這個(gè)邏輯的）當(dāng)用戶在瀏覽頁面的時(shí)候，就只有信息和內(nèi)容和他們之間的邏輯聯(lián)系。對于設(shè)計(jì)師來說，這里內(nèi)容運(yùn)用的視覺較輕，而如何聯(lián)系內(nèi)容、導(dǎo)航整個(gè)應(yīng)用的設(shè)計(jì)采用濃墨重筆。

?

　　米蘭地鐵 (Image:?Wikipedia)

　　根據(jù)內(nèi)容的重要性，或者基于應(yīng)用希望如何向用戶呈現(xiàn)信息，他們應(yīng)該被歸類在一個(gè)層次系統(tǒng)，環(huán)環(huán)相扣. 正如其他很多手機(jī)應(yīng)用一樣，找準(zhǔn)對話的用戶群是至關(guān)重要的。

?

　　Flipboard?：內(nèi)容作為承接界面.

　　正如 Flipboard 的設(shè)計(jì)理念，Metro 的 UI 設(shè)計(jì)把重要的內(nèi)容直接放在板塊中。在 Windows Phone 的主頁，他們運(yùn)用了一個(gè) 8 大板塊的主頁導(dǎo)航，覆蓋手機(jī)通信，聯(lián)系人，短信，email，xbox 等，用戶可以通過需求更新這 8 大板塊（這個(gè)跟其他手機(jī)是一樣的）。不同的是，它每個(gè)板塊都顯示了最新內(nèi)容。譬如：email 圖標(biāo)上會顯示最近收到的郵件。這種 UI 的目的是給了用戶一個(gè)選擇：基于信息，選擇是否繼續(xù)瀏覽。 設(shè)計(jì)師們應(yīng)該要充分利用這個(gè)特性。

　　組織內(nèi)容

　　微軟為此引進(jìn)了一個(gè) Hub 概念（樞紐），作為內(nèi)容管理中心.它由三個(gè)重要的設(shè)計(jì)概念來實(shí)現(xiàn):?“panorama”（全景） 、“pivot”（樞軸轉(zhuǎn)動）和live tile （實(shí)時(shí)更新板塊）。

　　Panorama（全景模式）

　　當(dāng)用戶啟動應(yīng)用，他們登陸到了一個(gè)全景模式，應(yīng)用中所有的信息都放在了一個(gè)屏幕上 （通過水平滑動，用戶可以預(yù)覽所有內(nèi)容）。這個(gè)在 WP 設(shè)計(jì)里面要特別注意，設(shè)置，目錄等應(yīng)該盡量放在整個(gè)屏幕上，而不是獨(dú)立窗口。

?

　　應(yīng)用?FeedTso，全景模式

　　正如上圖所示，全景模式給了用戶一個(gè)直觀的內(nèi)容之間的聯(lián)系。

　　Pivot（樞軸轉(zhuǎn)動）

　　樞軸轉(zhuǎn)動邏輯編排內(nèi)容，把信息劃分歸類，顯示了同樣內(nèi)容的不同方面

?

　　4th & Mayor

　　如上圖所示，這個(gè)導(dǎo)航控制就像選項(xiàng)卡。

　　Live Tiles （實(shí)時(shí)更新板塊）

　　正如前文所介紹的，這個(gè)實(shí)時(shí)更新板塊是 WP7 另外一大特色。如下圖所示，天氣板塊顯示了當(dāng)前的天氣狀況。用戶不用打開應(yīng)用就可以查看最新信息。

?

　　AccuWeather?和?AppFlow

　　設(shè)計(jì)

　　可點(diǎn)擊文本

　　WP7的文本是可以點(diǎn)擊的，沒有所謂的點(diǎn)擊安全區(qū)域。所以在設(shè)計(jì)上要注意使用合適的視覺導(dǎo)向。

　　動畫

　　WP7強(qiáng)調(diào)頁面切換或者內(nèi)容轉(zhuǎn)換的動畫效果，這樣可以抓住用戶的注意力。

　　圖標(biāo)

　　WP7 對于圖標(biāo)設(shè)計(jì)有嚴(yán)格的規(guī)定，我們建議設(shè)計(jì)師仔細(xì)閱讀他們提供的設(shè)計(jì)指導(dǎo)。圖標(biāo)只能出現(xiàn)在application bar （應(yīng)用底部）。

?

　　?Pictures Lab

　　色系

　　WP7 在設(shè)置頁面有個(gè)深色、淡色（dark/light）色系選擇項(xiàng)。在設(shè)計(jì)上要考慮到用戶會在兩種色系間切換，為此，你需要兩套方案。除非你的產(chǎn)品色系是品牌標(biāo)志，我們強(qiáng)烈建議使用兩套色系。考慮到 wp7 的應(yīng)用是要審核的，色系是很多應(yīng)用被拒的主要原因。

　　設(shè)計(jì)工具

　　除了常規(guī)工具：Balsamiq, Adobe Illustrator, Fireworks, Photoshop 等等，還可以使用?Expression Blend.

轉(zhuǎn)載于:https://www.cnblogs.com/songtzu/archive/2012/07/24/2607164.html

總結(jié)

以上是生活随笔為你收集整理的转：Windows Phone 7 设计简介的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。