Design Your Windows Phone 8.1 App User Interface

User Interface design in windows phone is not as fancy as other phone apps. It's very simple and straight forward. Here are some tips and guidelines to polish and arrange your UI.

There are several sections of a UI for which you should consider.

• Elements alignment and Margin
• Element spacing 
• Controls
• Backgrounds
• Texts
• Contrasts

1. Elements Alignment and Margins

• All the elements should be aligned 24px to the left. (just leave a margin to the left of your application)
• Align all your contents (text , images, controls, logos) again 12px - 24px from the margin to left.
• And align all your contents 12px - 24px to right.

  

  figure 1.1 Element alignment and margins
  
  

Check out the semi transparent grid of 25 x 25px red  squares on your app when running on the debug mode.  These squares are contained within a padding of 24 pixels around the page and are offset by 12 pixels between one another — the magic combo for Windows Phone design. The grid enables you to quickly and easily identify any alignment issues on the page.

• Align the field and value pairs in your app in two left aligned columns or in two left and right columns as in a grid (field to left and value to right).

figure 1.2 Fields aligned in two left aligned columns

figure 1.3 Fields aligned in right and left columns

2. Element Spacing

Spacing between elements is very important in a UI. It should be consistently maintained in both dimensions (Vertically and Horizontally). The recommended spacing between two elements in a windows phone app is 12px to each direction. Typically elements are aligned in a format of a grid. 

figure 1.4 Incorrect way of spacing elements

figure 1.5 Correct way of spacing elements

Always leave some space at the end of the page of your app below your elements and make sure that you maintain the same spacing through out the whole app in each page.

Await for more on windows phone development............