Porting iOS Apps to Windows 8 (2) : User Interface

Article
11/15/2012

Author :Rafe Wu

Channel 9 https://channel9.msdn.com/Blogs/OneCode/How-to-Port-iOS-apps-to-Windows-Store-apps

Windows 8 uses a novel user interface called Windows Store. It sets itself apart with its clean and simple design and emphasizes color and typography.

In contrast to the application-focused design of iOS, Windows 8 uses an information-centric design. Instead of a guid of app icons, the start screen of a Windows 8 consists of dynamic tiles that display critical information at a glance to the user. The tiles are dynamic and they continuously display the up-to-date status of the applications. For example, they show you the next appointment on your calendar or the number of new emails waiting for your attention. Users can personalize their start screen by pinning the tiles that they care most about.

Design Principles for Windows Store Apps

Windows Store design has a set of five guiding principles to help you make the best choices when designing your app. These principles are the foundation for building great Windows Store applications. Consider these principles as youplan your app , and always ensure your design and development choices live up to these principles.

· Show pride in craftsmanship

· Be fast and fluid

· Be authentically digital

· Do more with less

· Win as one

These five Windows Store design principles will help you make the best choices when designing your app.

Application User Interface Design

The application UI looks different for these two platforms. Windows 8 encourages showing the content first with the entire screen. It uses bold, vibrant and crisp colors and images as well as abstract symbols to represent the real objects.

Some iOS apps use multiple art styles to make the UI looks more beautiful. Unlike iOS, Windows Store applications should use very consistent UI controls, design guidelines and manipulations. You can have your special design for your application. But it must be approved by Microsoft for adherence to the design guidelines of Windows Store UI.

XML and XAML

As you know, in the iOS, developers use storyboard or nib file to describe the app’s UI and animation. In fact storyboard is an XML based file. In Windows 8, we use XAML to describe the UI. XAML is an XML based markup language as well. So both UI language files have similar concept and syntax.

You can treat the XAML structure as an Element/Attribute tree. Each control is a XAML element and each property of the control is an XAML attribute. XAML can also define resources and styles which can be referenced in the same scope.

But XAML language is more flexible. For example, the control’s content property in XAML can accept any type of objects. So you can show an text, image or even a video on a button control without writing a new type of button. That’s what we say containment-friendly.

Another key difference between XML and XAML is that XAML can have templates. Template can be used to replace the view completely. That’s why we said controls are look-less. We can define a template with totally different view, then use this template to replace the controls’ default view.

Controls and the Application Interface

Windows Runtime includes a rich collection of controls that are designed specifically for usability and aesthetics. While you can create your own controls, it is best to use the standard controls wherever possible. These standard controls respond to theme changes and provide a consistent user interface.

The following table shows the mapping between major iOS controls and corresponding Windows Store controls.

iOS control	Windows Store control
Rounded Rectangle Button	Button
	HyperlinkButton
ImageView	Image
ListView	ListView
MediaController	MediaElement
	SemanticZoom
	PasswordBox
Label	TextBlock (No edit function, with simple text) RichTextBlock (No edit function, with simple text)
Text Field	TextBox (with edit function)
ProgressView	ProgressBar
Segmented Control	RadioButton
Slider	Slider
WebView	WebView
Date & Time Picker	Timepicker(WinJS only)
Date & Time Picker	Datepicker(WinJS control)
Picker
Page Flip	FlipView
Switch	ToggleSwitch

As you can see, Windows 8 offers controls that correspond to most of iOS controls. While the look and feel is different, they provide similar functionality.

Notifications

iOS	Windows 8
UIAlertView	MessageDialog
Badge Icon	Tile Notification
Alert/Banner	Toast Notification

The UIAlertView is the modal alerts that the user must respond to. In Windows 8, you can use Message Dialog to do the same thing.

In Windows 8, tile notification is used to update the text, picture or badge for a tile.

Toast notification is the time sensitive non-persistent message. In windows 8, Toast notifications are shown for about 7 seconds , for standard toast, or 25 seconds, for long-duration toast, and the user may choose to ignore them. This behavior is similar as iOS alert/banner. Additionally, the toast notification in Windows Store applications can also be scheduled or recurring, which makes it possible to show more critical information.

Summary

In this chapter, we looked at the similarities between the application design goals of the iOS and Windows Store UI. When you plan your Windows Store application, you will be able to leverage your existing work on iOS applications.

Revisit the application interface design to make sure you are taking advantage of the Windows 8 design guidelines. You will find that the Windows 8 offers a large library of controls and gestures that have close counterparts on the iOS.

Share via