UI Design Styles
- 29 May 2024
- 2 Minutes to read
- Contributors
- Print
- DarkLight
UI Design Styles
- Updated on 29 May 2024
- 2 Minutes to read
- Contributors
- Print
- DarkLight
Article summary
Did you find this summary helpful?
Thank you for your feedback
With the unique design and display that the Vuzix Blade 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.
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
"Action Menu" is a type of navigational menu that provides clear, concise information or actions for user. The "Action Menus" are just custom actions that are highly visible, simple to understand and simple to select with the available Blade interaction methods.
If you want more information or how to implement those, you can go to "Action Menu" section.
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.
If you want to learn how to use the Pop-Up Action menu feature, read more in our Sample Project UI Layout section.
Blade Template - Center Content
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 BladeOS 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
/>Was this article helpful?
