Recreating iOS app designs in Windows 8

Article
10/14/2015

[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]

Here's a look at common iOS app designs, and how they can be re-imagined in Windows 8.

If you are considering bringing an existing app from iOS or another platform to Windows 8, you have to ask yourself a fundamental question: are you going to port it, or are you going to rewrite it?

If your app is created with a middleware solution, which is also supported by Windows 8, then your decision may well be obvious. However, if your app was written from scratch in Objective-C, you will have a little more work to do.

Does your app make use of libraries written in C or C++? Then there is a good chance you can re-use the code without many changes. For example, if you use a C++ library to perform some image processing or complicated calculations, you can either write your Windows app completely in C++ and use the same source code, or else use the C++ library in the form of a Windows Runtime Component (similar to a DLL, if you know Win32 Windows programming). You could then write the rest of the app in C# or JavaScript, and call the methods in your C++ component.

How you would translate other apps to run on Windows 8 will depend a factors such as their fundamental design, and their use of native controls. Let’s take a look at some fundamental app types, and discuss how we could re-imagine them as Windows Store apps.

A game or other app written using OpenGL

Assuming your app doesn’t use a middleware solution, such as Unity, but instead consists of Objective-C and OpenGL (with or without the use of GLKit), then you will need to recreate it using DirectX with C++.

The Windows Dev Center contains many topics to help your move from OpenGL to DirectX, including:

A 2D game or app with no native controls

An app which renders its own buttons and other controls – such as an educational app, magazine reader or a more casual game – is probably the easiest kind of app to convert to Windows 8.

If the graphics in your app use simple 2D animation, the Windows 8 version may be a good candidate for adaptation using a JavaScript/HTML5 project, as the HTML5 Canvas control provides 2D rendering support similar to an UIImage control. Or you might decide to use C# and XAML, using XAML objects such as Image, Rectangle and Ellipse: see Develop Reversi, a Windows Store game in C# and XAML.

If there is a lot of advanced animation in your app, a middleware solution and/or DirectX might be required to get the animation frame rates you need.

Whichever approach you use, remember that not taking advantage of the unique Windows 8 controls and features may make your app feel a little alien and generic to your users.

An app with some native controls

An app which models a coffee table book will probably look similar on both platforms. The iOS version would typically display the image in a UIImageView control, and then use UIToolbar or UINavigationView controls for navigation, probably customized using the UIAppearance protocol.

The Windows Store app could display images in a FlipView or provide navigation using an App bar control. The App bar provides a location to place buttons for navigation and other functionality, but it can also remain hidden until the user swipes the screen upwards (or right clicks the mouse, or presses the Windows key and X). This gives your content a little more screen space.

Charms are another new Windows 8 control, and they appear when invoked with a swipe from the right (or when the mouse is moved to the bottom right corner, or the user presses the Windows key and C). Charms are a system-wide menu which your app can utilize to access Search, Settings, Sharing and Printing features.

Here are some related topics covering the Windows 8 controls:

An app with a list of items

In this design, a list of items is displayed – usually using a UITableView in an iOS app – often within a split-screen controller. The larger panel is used to display the details of one specific item.

You can create a similar view to a UITableView in a Windows Store app using the ListView control, with styling that can be adjusted in much the same was as cells in the UITableView - see Table Views (iOS to Windows).

However, Windows 8 also provides the GridView control, which is especially useful when displaying lists of data and visual previews in a sideways scrolling format. The GridView takes advantage of the wider screen on Windows devices, and additionally, using the Semantic Zoom control allows the user to quickly gain a “bird’s eye” view of the collection, and jump to a particular selection. The Hub control introduced in Windows 8.1 is ideal for apps with multiple pages of information (see Hub control JavaScript sample code or Hub control C# sample code).

Some topics which describe the various Windows 8 controls used:

Many iOS applications use multiple UITableView controls to navigate deeper and deeper into an app, using a UINavigationController to manage stacking up the views and returning to the home view when required.

You can create a similar a hierarchical navigation system using header menus, as described inNavigation design for Windows Store apps. When you start navigating between pages, you need to start thinking about preserving the state of the pages both between views and between app launches. See Part 2: Manage app lifecycle and state (Windows Store apps using C#/VB and XAML) for information on how to go about this.

Useful related topics:

Designing great entertainment apps for Windows

An app with discrete views or panels of information

Perhaps your app has several discrete pages of information, but unlike the panels that make up, say, a weather app, the panels do not share much in common and so swiping sideways through a panorama-style view would not be appropriate. An iOS app may use a toolbar or a segmented control at the bottom of the screen for the user to tap and change views.

A Windows Store app could use an App bar to provide links to each view, and if required make the App bar "sticky" so that it remains visible. However, a more appropriate approach might be to use a Nav Bar (also known as a navigation bar) at the top of the screen, ready to appear with a swipe from the top or bottom of the screen (or a right mouse click or press of the Windows key and Z).

Another Windows 8 UI feature is Semantic Zoom – performing the pinch gesture zooms out the view, making all items visible in a list and providing an overview – the user can then select the view they require with a single tap or click.

An app with a vertical scrolling history

Many iOS present a view that scrolls vertically, displaying information at the top which is fresher than information at the bottom. For example, a social media app or messaging client.

Windows Store apps also support vertical scrolling views (see Guidelines for panning (Windows Store apps)), so there’s nothing to stop you recreating this style in your app.

That said, there are plenty of good reasons to explore other ways to present this information: perhaps using a horizontally scrolling GridView which uses Semantic Zoom to provide a way for the user to jump to different sections (for example pictures, news, people, and messaging.)

Conclusion

It’s often quite easy to re-create your app for Windows 8, especially if the controls your app uses are nothing more than customized versions of native controls. For more advanced controls which you have designed specifically for your app (rotating dials, skeuomorphic knobs and buttons) you can change the appearance of XAML controls in Blend for Microsoft Visual Studio 2013, or create your own with images on an HTML5 Canvas control. For really complicated controls, you may need to resort to the high-speed rendering options provided by DirectX or a middleware solution.

Likewise, typical iOS navigation models can be replicated in Windows 8, however the new App bar, Nav bar, GridView and Semantic Zoom controls can provide new and interesting ways to reimagine your app and provide a better “feel” for your users.

Partager via