UI Design Guide

Overview

The Quick Circle framework consists of UI components: menu screen, lock screen, settings and apps.

Lock Screen

The lock screen is the starting point of the UI flow and it shows the Quick Circle clock. When users presses the power key or Knock On the Quick Circle window of the closed cover, the lock screen is shown. Quick Circle UI provides various lock screens as default and users can select their preferred lock screen.

mobile_qcircle_UI_1.png

Menu Screen

The menu screen provides access to Quick Circle apps and it appears when users slide the screen in any direction. The menu screen displays up to six Quick Circle apps.

Users can select apps from Settings and selected app icons will be displayed on the menu screen. Users can tap an app icon to launch the corresponding app without opening the cover.

 

mobile_qcircle_UI_2.png

 

Application UI

Quick Circle apps have layouts to be shown in the circular window. Quick Circle apps typically use a back button, title area and functional buttons in circular shapes.

mobile_qcircle_UI.png

  • Content Area: Main area that shows content
  • Back Button: Button area to close or exit the app
  • Title Area: Title area that explains the app or activity

The diameter value is given in pixels. Since Quick Circle feature is used in some models with different screen densities and physical display sizes, the pixel value of the diameter is stored natively in the device software.

Content Area

The circular background is an outline for the cover view. The diameter of the circular background different depending on the device model. The typical diameter value is based on the LG G3 model.

 

Device Model

Circle Diameter (pixel)

LG G3

1046

The diameter value is given in pixels. Since Quick Circle feature is used in some models with different screen densities and physical display sizes, the pixel value of the diameter is stored natively in the device software.

 

Title

The title of the app or the page is placed at the top of the cover view.

 

Back Button

The back button exits the app and takes users back to the menu screen. QCircle apps need to provide a software back button allow users to exit the app without opening the cover.

The back button is placed on the cover view. The back button can be designed in either basic or borderless styles. Please give users proper touch feedback to indicate that the button is pressed.
 

  • Basic Style

mobile_qcircle_UI_back1.png

mobile_qcircle_UI_back2.png

 

  • Borderless Style

mobile_qcircle_UI_back3.png

 

Iconography

QCircle app needs an app icon to be shown in the menu screen. Having a circular app icon is strongly recommended for achieving a unified look and feel with other QCircle apps. The format and the size of the icon are described as below.
 

mobile_qcircle_UI_4.png

  • Format: PNG
  • Size: 260 x 260 pixels

 

To support multiple screens, the QCircle framework provides auto-scailing for the circular icon for different densities. Therefore, the QCircle app does not need to provide multiple icons for different densities. To display it correctly, please refer to the explanation below.

1. In the project, create a drawable folder under the res folder.
2. Create a circular icon following the guide above.
3. Place the circular icon in the res/drawable folder.
 

mobile_qcircle_UI_5.jpg

Navigation