UI Design Styles

With the unique design and display that the Vuzix Blade 2 provides, there are some User Interface designs that work better than others.

In our experience, we have found some styles and UI Designs fit better and are more useful for users.

In the previous sections we talked about some of the ways you can create a great UI for the Blade 2.

In this section we will explain the two main UI styles and some HUD libraries you can use. The Main navigation UI styles that we recommend are:

• Content Center - Action Menu below

• Action Menu Center - Content Around

Content Center

The most used and more common style is the Content Center style. This provides most of the UI real estate for your Application.

This style can also be used with the Pop-Up Action Menu. When used, it provides all the device screens, and the Action Menu will cover your UI when it Pops Up for actions.

To use this style you just have to use the normal Layout elements and configure them as desired. Here is an example of this style from our Template App.

Action Menu Center

Action Menu Center - Content around style means that the View or real-state available is around the center of the screen. The Action menu is moved and located in the center of the main UI area.

This UI style is mainly used when there are many options or you have to navigate many possible actions for the user. A good example of this is the Blade 2 OS Settings Application.

Since this style can be tricky to design, we provided a useful dimension resource with the HUD Resources, which can be used in the Android Studio designer to provide a "space" where the Action Menu will be centered. To use this resource you can use the element dimension of:

• @dimen/action_menu_heigh in your Layout designs.

Here is an example Space element for the Action Menu Center style and an Example view on our Template App.

<!--Utilize something similar to this SPACE item to understand the dimensions of the ActionMenu and your available real state.-->
<Space android:id="@+id/menu_placeholder" 
android:layout_width="match_parent"
android:layout_height="@dimen/action_menu_height"
android:layout_centerInParent="true
/>