UI (User Interface) Design - PV1100 Demo Design

Use this configuration to generate ideas on how to design a User Interface (UI) that has great eye appeal and functionality.

This example runs in simulation mode and allows you to interface with the touch screen buttons and icons to view the various colors used for each state and UI response. Load this example on a display to take to your next sales demo.

Download File Here

 

 

 

 

Assets Used

• Colors
• 

 

• Fonts
• 

 

• Menu Components
• 

 

Styling Techniques

 

Depth Perception - Background image and bar gauges are tapered and or slanted to give a perception of depth. This technique helps fit a normally vertical rectangular bar gauge around the curved outline of the tach and speedometer providing a visually appealing look.

                                                         

 

Nested Gauges - To maximize use of display area several gauges can be nested together. In this example the tach shares its space with a volt meter and the speedometer a DEF gauge.

                                               

 

Representing States with Bright or Faded Color - The state of the engine icons is represented by a faded color in the off state and a full brilliant color in the on state. This allows the user to see all the icons that are available when they are off while at the same time remaining subdued in the background and not drawing eye attention. A very easy way to do this is to use single icon then use the colorize feature in the library to import the image into the page view with a new color. 

 

Representing States by changing Font Size - The gear selector not only uses a bright color for the selected gear, the font size is also increased. This provides additional animation as the the gear selector runs through each of the gears which catches the eye. Subdued colors are used for the unselected gears. In this example two different string widgets for each character position are used with different font size and colors then the visibility property is toggled using a calculation event.

                                                                 

 

Boot Logo and Boot Animation - This configuration uses a static logo image for the first part of the boot process then once system.systemready event fires a series of images drawing the outline of the gauges and bezel is displayed on the Overlay Layer using Smart Image Widgets. This allows you to add a custom company logo at the beginning without disturbing the animation sequence.

 

 

Menu Animation - When you have a large screen to work with rather than switch to a new page view that covers the entire screen to display a menu you can use just a smaller graphic and slide it into view to add interest. In this example the menu is hidden behind the lower part of the bezel which is on the menu layer. The menu is located on the settings layer and only its selector button is visible when it is slid out of view, sitting on top of the main layer and under the menu layer. Once pressed an animation action is called to move its position into view. For a better idea on how layers work go to the 10 minute mark in this tutorial.

Background Fading - One technique to bring focus to a desired part of the screen is to mask off the other areas using a background color with its alpha channel set somewhere in the middle. This will "fade the screen images below while keeping the new image on top full color. This is the technique used when the menu is selected.

User Input Styles - Depending on the type of data input you need from the user, there are a variety of user input styles to chose from. Pull up the menu and test each one out.

• Radio Button - A radio button is the simplest form of input to allow a user to select/deselect an option. Use two image widgets to represent the selected/deselected state and the visibility property to select which image to display.
• Check Boxes -  Use checked/unchecked images to create a series of user options. The widgets visibility property is used to show the checked or unchecked options.
• Toggle Switch - A toggle switch style of input can be used to represent a on/off condition. The widgets visibility property is used to determine which image to display.
• Inc/Dec -   A text gauge combined with inc/dec buttons can be used to increase or decrease the value of a variable using calculation events.
• Slider - A slider style input device is used to provide a quick way to change a variables value. Use a bar gauge to represent the actual value of the variable and a image widget to represent the slider position. Calculation events are used to calculate the gauge value based on touch position and animation is used to move the position of the slider. CE Brightness.day is called first by the touch action which in turn fires on change UpdateSlider. 
• Sub Menu - Use a prompt symbol to open a sub menu with further settings.