About circles around the icon in Windows Phone

In the Q&a link during Stockholm's Windows Phone design day, Stockholm, the local interactive designer Petter Sifver, raised a question about the icon on Windows Phone app bar, Want to know why there is a circle around the icon. Petter on his blog to share his ideas around the design.

We see a button, not an icon. --literally. There are small icon inside these button. The Out-of-the-box (out-of-the-box) Metro design language offered by Microsoft has a consistent approach to "button like" (a button that can be sensed). Whether it's a push button, Toggle button, Command button or media Player buttons or icon Button--button has a border in Windows Phone's Metro language to define the boundaries. So icon buttons is simply following the same language in app Bar--I understand why they can be confusing. I noticed that when we talk about icon, we often describe what is in the circle and call them icons. When we talk about icon we will say they are like icon (no circle)--even so, 99% of them are used as icon buttons.

The saliency concept is correct, and there are exceptional designs in our Metro button design language.

This is done in a consistent way. Calling them button or icon literally looks very close, but there is a very big difference. We use the button to interact, using the icon to convey a single item of information. For example, when a phone is applied to the Call History list interface next to calls using the button--with the phone icon they are button, not icon.

Another example using icon buttons is in text messaging applications--when you want to add a new contact and send a text message, you get a little button with a plus icon, and again, it's a button--not just an icon. You will find that we do not use icon as button. It has attracted people to use the plus icon-I know I've been suggested. Back to the beginning, the correct approach to Windows Phone's metro design is to use the icon button.

Now let's take a look at how we use icon. For example, in the status bar, they are really real notification icon and do not use a circle (they are not buttons).

We use icon as graphics, which provide information to user items (they are not interactive and therefore not buttons). For example, in email applications we use the small icon (not button) to communicate with the user. When attachments are in an e-mail message, they become high-priority messages (tags).

All of these, I want to be clear, we talked about in Windows Phone Design Day turn to--metro doing two things: Metro and Metro design language. The Metro rule is design support. The Metro design language is based on the law, and is a way of proving the physical UI elements, animations, typography, composition, and other interactive directions.

The Metro design language is defined by three things: Windows Phone's native applications (mailbox applications, text messaging applications, people hub, local search, and so on); second, Windows Phone UX guidelines; The available resources for the control library and other Windows Phone SDK & Silverlight Toolkit (all three will remain consistent with each other). Developers and designers can use the Metro design language. This will successfully create an elegant, compelling, and consistent experience for Windows Phone.

The Metro rule is a priority, it overrides any language, so designers can use the free search law and be proved by you in non-mainstream ways. And we're happy to see that happen. The metro principle allows for unlimited exploration and evolution. Here we give some ideas ... Read some articles from the Swiss design style course. This describes many of the ideas behind Swiss design (Metro's roots in it, also known as International Typographic Style)--read the poster and print media design. However, many of these posters and designs are not similar to the Metro design language, but this does not mean that a designer cannot explore other ways of expressing the law.

This article is compiled from @langmuir, the original address.

Translation Source: mdong.org, reprint please indicate the source link.