Sunday, 16 September 2012

Exploring Windows 8 style guidelines

This is the second in a series of posts that accompany a series of video tutorials and demos that I am producing to do with Windows 8 development.

In this video, I briefly look at Windows 8 style apps and their design.

This first demo is taken from the course: Windows 8 Development using C# and XAML, JavaScript and HTML - First Look Clinic and Hands on Labs

I have included the transcript below.

HTML5 player


I will begin by looking at the Finance app. This has a pretty typical structure which comes from one of two key templates available in Visual Studio 2012. The Windows 8 Grid app template.

As you can see, there is no chrome. That is to say, the app uses the whole screen.

The content is king here.

When you scroll or flick to the right, you can see that it almost jumps off the screen.

If I click this information button, a fly out will appear that gives me additional information about the image in the app.

Fly outs are a part of the Windows 8 UI style.

If I click the right mouse button, you will see that it causes the App bar to appear.

App bars can appear across the top or bottom edges of the screen.

App bars are part of the Windows 8 UI style. They are a means of interaction and are used instead of menus.

If I click the News button, I am taken to a lower level (or spoke) as the app.

If you look in the top left hand corner, you will see the Back button.

The Back button is part of the Windows 8 UI style and it's purpose is to navigate to a higher level.

The location of the Back button is crucial. In apps implemented with left to right direction, it always appears in the top left.

If I flick/scroll left and right across the spoke, I can press a tile in the Watch list for example to drill down to a more detailed view.

Most Windows 8 apps support the Search contract.

If I swipe right for the Charms bar and select the Search charm, I am able to type in a search string of say "BBC" which the Finance app is able to access.

Here you can see that the Finance app is making its own suggestions which are added to the Search pane.

If I click the offered suggestion, the Finance app navigates me to the appropriate detail view.

If I press the Windows key, you will notice that the Finance app is able to update its tile.

This is another Windows 8 UI style called Live tiles.

I will explain Live tiles in a later demo.

Let me click the Finance tile again.

I want to show you another Windows 8 UI style.

If your screen resolution exceeds 1366 by 768, you can move your mouse to the top edge where the pointer will change to a hand.

If I drag the app with the left mouse button down, I can position it on the left hand side of the screen.

This is called the Snapped view and allows me to work with two apps simultaneously. Apps in Snapped view have a width of 320 pixels.

If I click the right hand side to activate the Start screen and push the Music app tile, you can see that it fills the main portion of the screen whilst the Finance app remains snapped.

Let me drag each app's top edge down off the bottom of the screen to close them.

There is another style of app that I would like to show you.

If I begin to type "Settings" whilst on the Start screen, you will see the Search pane appear from the right hand side.

I'll select the Settings option in the list of choices.

From the array of settings apps, I'll choose "Change your time zone". In fact, whichever tile I press, I launch the same app. However, it opens at the appropriate view.

The settings app uses the other key app style available as a template in Visual Studio 2012. The Split app style.

As you can see, the app is split into two halves. Each of which can be scrolled up and down. There is a master detail relationship between the two sides.

OK. That's it.

In this demo, I have shown you examples of the two key Windows 8 app style templates available in Visual Studio 2012. The Grid and Split app styles. At the same time I showed you some example of the Windows 8 UI style such as the Back button, App bar, Snapped view and Live tiles.

Flash player

Interested in Windows 8 development training?Windows 8 Development using C# and XAML, JavaScript and HTML - First Look Clinic and Hands on Labs

Essentials of Developing Windows Metro style Apps using C#

Advanced Metro style App Development using C#

Essentials of developing windows metro style apps using html5 and javascript

Advanced metro style app development using html5 and javascript

See you soon

Phil Stirpé
"I don't do average!"

No comments:

Post a Comment