Metro Style Design

在 Metro Style 有很多概念都跟以往的 Windows 7 不一樣了,這也是微軟自從 Windows 95 以來最重大的改變,雖然其中經歷了這麼多版本,但是基本的操作原則還是跟隨著 Windows 95 的模式。而目前也是由於行動化裝置愈來愈普及,Metro UI 就是為了在行動裝置跟 PC 之間取得一個平衡,甚至於由行動化裝置來定義 PC 的規則。

image

Content Before Chrome

在 Metro UI 內容比框架還要重要,使用在意的是內容,並不是框架的功能

image

這是 windows 7 在使用者印象中的畫面,大家想到的都是工具列、邊框、卷軸列、放大縮小功能,印象最深刻的東西卻不是使用者真正關心的內容。Metro UI 的概念就是要讓最重要的內容被獲得最大的注意

image

所以微軟為了改變這個情況引用地下鐵站的告示牌的觀念,讓重要的資訊獲得最大的版面資源。

Layout

幫主要內容適當的留白,讓主要的內容能在第一眼就被看到

image

固定定義好的大小以及寬度,讓重要的主要內容更容易被注意到

image

Interactions

在互動的設計方面,雖然把內容的重要性放大,但是還是有一些不可或缺的功能,像是以往的右鍵選單、上一頁下一頁的導覽、還有搜尋跟設定這些必要的功能,在 Metro UI 下的作法是將功能隱藏起來,但是要讓使用者可以找的到他們。

App Bar

App Bar 有區分為上方的 App Bar 以及下方的 App Bar

Bottom App bar

在下方的 App Bar 放置功能的選單,有點類似於以往的右鍵選單

image

  • 當單一物件被選擇的時候可以操作的功能

  • 全域性的功能放置於右邊,內容相關功能置於左邊

Top App Bar

而在上方的 App Bar 則放置導覽的功能

image

像是回到上一頁、上一層之類的功能鍵,還有標題的部分

Flyout

image

針對比較特別的功能,微軟也定義置於 Flyout 之中,他其實有一點像 Pop up 但是是依附著原本的按鈕而顯示。而原本常常用 Pop up 來顯示的錯誤訊息也建議改用 inline 的方式來顯示。

Navigation

利用 Hubs > Sections > Details 的方式來架構

image

用最直覺的模式來操作,如果使用者對某個內容項目有興趣,只要點擊就能針對這個項目了解更多。

Sematic Zoom

假如當某一階層內容很多的時候,也可以利用手指收合的動作來將內容群組化,讓使用者容易找到想要的內容。

image

image

 

Design for Touch First

在  Metro UI 很重視觸控裝置的使用體驗,所以微軟也定義的多種手勢的功能,讓使用者體驗能夠更一致化,也讓已經習慣 Windows 8 的使用者能就更快上手使用這支 App

image

Design for Multiple Views

image

  • Minimum (1024*768)

  • WideScreen (1366*768+)

  • Snap View (Required)

  • Portrait

Snap

在 Metro UI 中也支援兩種程式一同在同一個畫面中,這樣就可以同時看到兩個關心的畫面,有可能一邊是股市畫面,而另一邊是 MSN 聊天的畫面。

image

image

  • 窄側的寬度是 320px 正好就是 windows Phone 7 的手機寬度

  • 在畫面寬度變動時候頁面狀態應該是被保留住的

  • 建議在必須全螢幕執行的程式(例如遊戲),或許可以顯示排行榜,或是乾脆就只顯示 Logo

Windows 8 Contract

Windows 8 也有內建了一些功能,在每個 App 執行狀態下都可以被使用

CharmsBarClock

Share

ShareFlyout

利用 Share 分享 App 的內容到其他地方,讓訊息更方便容易地被擴散。

Search

Search

Setting

SettingsFlyout

在每個 App 下去設定特定的設定選項,由於固定的位置,使用者會很容易找到這些重要的功能。

Tiles

image

Tile 就是一開始在 Metro 畫面中看到的程式圖示,等於是程式的門面。也可以設計能夠自行更新 Tiles 內容的稱為 Live Tile ,例如說項 mail 會在收到信件的時候更改顯示的收件夾數量,或是氣象。

image

Notifications

這個就是大家熟知的推播功能了

ToastTemplates

只顯示最重要的資訊,這樣使用者才不會因為太多不必要的訊息進而關掉 App 的推播功能。

Summary

這邊都是微軟建議的設計概念,一致化的模式可以讓使用者在各個 App 之間都能很快的上手,而且當你的 App 愈符合的時候,更能讓使用者容易去使用,因為 Windows 8 本身就是根據這套規則去開發的。而當開發者都照著這個規則走,使用者也會愈來愈喜歡使用 Windows 8,這看起來是 win-win 的局面。


Resource

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *