轉：Windows Phone 7 設計簡介

英文原文：smashingmagazine 

　　導讀：Windows Phone 7 引進了一個全新的內容管理和使用者介面，命名為Metro的設計語言和理論。微軟這次所看準的市場和使用者群也與之前的老一代 Windows 不同(終於轉變了):從針對商業和技術使用者到普通使用者，線上，線下的生活緊密連結的新興使用者。

　　對話設計人員

　　我們就不強調設計在手機應用上有多重要了。WP7是個非常不同於其他手機平台的作業系統，雖然現在還在起步階段，業內對它還是很看好的。設計人員應該走在開發之前對它的平台和使用者介面進行瞭解。其二，微軟最終將會把 Metro 引入 Windows 8，打造一致性的手機、電腦介面。Windows 7.5，AKA 芒果，在九月發布了，緊接著，Nokia 發行了他們第一部 WP7 作業系統的手機。我們有理由相信，WP7在這個智能手機市場會扮演一個越來越重要的角色。

　　另闢蹊徑的設計

　　Windows 小組的靈感來自於路牌設計。在這些指路標識設計中，很重要的一點是，他們去除了所有不必要的元素，並且把內容作為設計核心；他們把這一點引入了 WP7 的設計，讓內容說話。介面消失了，內容是新的介面。現在的介面不是一個擷取內容的途徑，而就是內容本身。減少視覺設計強調了使用者與內容的直接互動(direct interaction with the content)。

　　方格系統設計（Grid Systems in Graphic Design, by Josef Müller-Brockman）

　　WP7的映像設計秉承了印刷字型的風格，吸取了映像設計師 Josef Müller-Brockman 的設計理念:在畫布上的純粹的印刷字型，簡潔的顏色和正方格子。表徵圖完全融入背景，甚至包括了內容本身，成為了導航的一部分。

 

　　簡潔設計和印刷字型， 應用 Cocktail Flow 和 Fuse.

　　所有這些設計讓人們聯想到專業製圖. 地圖式的鋪陳方式提供了指向性；文本簡單明了，讓使用者可以輕鬆導航；除此之外，沒有多餘的視覺元素。

　　全新的內容方格

　　Metro 設計強調剛性的內容組織.聯想一下一張地下鐵的地圖，它的資訊架構邏輯性極強。沒有多餘的映像元素，這個板塊的內容只運用了資訊本身 （題外話：電路設計圖是基於這個邏輯的）當使用者在瀏覽頁面的時候，就只有資訊和內容和他們之間的邏輯聯絡。對於設計師來說，這裡內容運用的視覺較輕，而如何聯絡內容、導航整個應用的設計採用濃墨重筆。

 

　　米蘭地鐵 (Image: Wikipedia)

　　根據內容的重要性，或者基於應用希望如何向使用者呈現資訊，他們應該被歸類在一個層次系統，環環相扣. 正如其他很多手機應用一樣，找准對話的使用者群是至關重要的。

 

　　Flipboard ：內容作為承接介面.

　　正如 Flipboard 的設計理念，Metro 的 UI 設計把重要的內容直接放在板塊中。在 Windows Phone 的首頁，他們運用了一個 8 大板塊的首頁導航，覆蓋手機通訊，連絡人，簡訊，email，xbox 等，使用者可以通過需求更新這 8 大板塊（這個跟其他手機是一樣的）。不同的是，它每個板塊都顯示了最新內容。譬如：email 表徵圖上會顯示最近收到的郵件。這種 UI 的目的是給了使用者一個選擇：基於資訊，選擇是否繼續瀏覽。 設計師們應該要充分利用這個特性。

　　組織內容

　　微軟為此引進了一個 Hub 概念（樞紐），作為內容管理中心.它由三個重要的設計概念來實現: “panorama”（全景） 、“pivot”（樞軸轉動）和live tile （即時更新板塊）。

　　Panorama（取景模式）

　　當使用者啟動應用，他們登陸到了一個取景模式，應用中所有的資訊都放在了一個螢幕上 （通過水平滑動，使用者可以預覽所有內容）。這個在 WP 設計裡面要特別注意，設定，目錄等應該盡量放在整個螢幕上，而不是獨立視窗。

 

　　應用 FeedTso，取景模式

　　正如所示，取景模式給了使用者一個直觀的內容之間的聯絡。

　　Pivot（樞軸轉動）

　　樞軸轉動邏輯編排內容，把資訊劃分歸類，顯示了同樣內容的不同方面

 

　　4th & Mayor

　　如所示，這個導航控制就像選項卡。

　　Live Tiles （即時更新板塊）

　　正如前文所介紹的，這個即時更新板塊是 WP7 另外一大特色。如所示，天氣板塊顯示了當前的天氣狀況。使用者不用開啟應用就可以查看最新資訊。

 

　　AccuWeather 和 AppFlow

　　設計

　　可點擊文本

　　WP7的文本是可以點擊的，沒有所謂的點擊安全區域。所以在設計上要注意使用合適的視覺導向。

　　動畫

　　WP7強調頁面切換或者內容轉換的動畫效果，這樣可以抓住使用者的注意力。

　　表徵圖

　　WP7 對於表徵圖設計有嚴格的規定，我們建議設計師仔細閱讀他們提供的設計指導。表徵圖只能出現在application bar （應用底部）。

 

　　 Pictures Lab

　　色系

　　WP7 在設定頁面有個深色、淡色（dark/light）色系選擇項。在設計上要考慮到使用者會在兩種色系間切換，為此，你需要兩套方案。除非你的產品色系是品牌標誌，我們強烈建議使用兩套色系。考慮到 wp7 的應用是要審核的，色系是很多應用被拒的主要原因。

　　設計工具

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