Events Microsoft

Design Metro Style Apps – Day 1 of Build 2011

Design Metro style apps - Day 1 of Microsoft Build 2011
Design Metro style apps - Day 1 of Microsoft Build 2011

In this post let me write about some highlights about Metro UI that I saw in the Big Picture sessions of Day 1. (Update: You can watch the entire keynote here )

Metro Grid Layout

Metro Grid Layout

The default templates shipping in Visual Studio whether it is for C++ or C# or JavaScript, they all do a great job in handling all the layout complexities and do the heavy lifting for building Metro UI.

Microsoft has done a lot of user study to see the most ideal and convenient position on the screen where user’s thumb can reach and they are on the edges. As a result, it is good practice to put frequently used interaction surfaces near the edges.

When you are porting your existing Windows Apps UI to Metro, best is to start from scratch, when you can’t even simple things make a lot of improvement (like removing the lines and borders, more spaced out, large icons and so on). See the improvements made from the first image to the fourth image below:

Step 0: A standard Windows 32 App

Step 0: A standard Windows 32 App

Step 1: Remove the border, tweak the colours

Step 1: Remove the border, tweak the colours

Step 2: Change the layout, make the layout friendly for touch

Step 2: Change the layout, make the layout friendly for touch

Step 3: Metro friendly layout

Step 3: Metro friendly layout

Touch is direct, so performance issues are felt more directly and viscerally. Animations that appear when content is changing makes it a fluid experience. Metro Apps require assets in 3 sizes (100%, 140% and 180%) and better still you can provide them in vector formats (SVG) or CSS primitives or XAML.

Your content needs to adapt to multiple screen sizes and orientations:

Metro supported screen sizes and orientations

Metro supported screen sizes and orientations

Contracts are the glue that binds Metro style apps together and to the system UI. There are many contracts, but the three of the most fundamental is Share, Search and Picker.

There are many styles of Live Tiles. You can choose the one that suits your app. Live Tiles are updated using your “Local” logic, Scheduled or Push using Windows Push Notification Service (WNS)

Live Tiles: Large or Small

Live Tiles: Large or Small

In-box controls that ship in Windows 8 for Metro style apps are shown below:

In-box controls for metro style apps

In-box controls for Metro style apps

Metro style apps when making calls to WinRT those calls go directly to Core OS or through a broker (only on select cases). All running Metro apps are suspended by the OS when the user switches away from it, this is done to preserve the battery live and give maximum performance to the foreground application. This means Apps get about 5 seconds to save their state before the OS puts them on Suspend. Apps when in Suspend are still in memory but no CPU cycles are spent and Windows kernel never schedules those threads. Apps are also terminated when there are low resources, in those cases Apps never notified at all.

Five main design principles of Metro style apps are

  1. Pride in craftsmanship
  2. Be fast and fluid
  3. Authentically digital
  4. Do more with less
  5. Win as one