Basic tutorial on uidesign for MeeGo Mobile Terminal Device Development (1)

Source: Internet
Author: User

BKJIA once introduced "two key elements of mobile development interface design", in which the UI design uses the UI design rules as our core creed, he drives each of our discussions to be based on design steps. The MeeGo interface can be adjusted based on different screen sizes, resolutions, and proportions. It also supports portrait and landscape modes. This tutorial helps you solve problems encountered in designing and developing MeeGo applications. Their content is "active, therefore, their content will increase and change as the project develops.

BKJIA recommended topic: MeeGo: ubiquitous mobile operating system

MeeGo Development

How to use this information


You can use these guides as a wizard to design the MeeGo program. Currently, their content mainly covers interaction and visual design. A new version or manual will be available in the future.

This is not a real manual

These guidelines are not used to replace instructions with detailed technical content. Instead, it is a rough description of the MeeGo interaction mode. We hope that the real manual will be available soon for you to download. It will provide a detailed description of each development tool and provide relevant suggestions.

1. MeeGo Basics

UI Model overview)

 Overview of the uidesign of MeeGo

Lock Screen)

When a user wakes up a mobile device for the first time

Home Page)

Press the button to enter the opened application. Display the favorite applications and enter the START key.


Go to any available applications on the mobile device

A Brief Introduction to gestures and touch operations

Introduction to gesture and touch operations

Lock Screen

When you press the power button to wake up a mobile device from idle status, the screen of the device is locked.

Lock Screen

On the screen of a mobile device, you can change the wallpaper by yourself.), the date and time, and the unlock button are displayed. You can drag the unlock button on the screen to the wallpaper area to unlock the screen. When the screen is locked, mobile devices can still receive messages and notifications, which are stacked in a notification bar in a similar way.


The START column is a plane that displays the link icons of all applications installed on mobile devices. In the start column, you can browse each application and add up to four application link icons to the Quick Start bar at the bottom of the screen ). In editing mode, you can also change the link icons of these applications.

 Start bar

All applications are displayed in the startup bar in a 4x4 mesh. If there are more than 16 applications, the system will automatically create an identical page on the right of the original page to place redundant link icons ). You can switch between pages by placing the current page on the screen. When a user installs a new application, the link icon of the new application will be placed at the end.

Switch Switcher)

In many cases, users run multiple applications at the same time, such as text messages when listening to songs. This is a multi-task process. A switch is an area for managing multitasking. The basic functions of the switch are as follows:


When a user starts an application for the first time, a new task is started. In this application, this task is displayed as a dynamic thumbnail of the current content in the switch. You can click home in the upper left corner of the screen to select a switch.

When the second application is opened, the new task is added to the switch. In this case, MeeGo allows you to switch between applications by pressing the home button on the home page. You can open an application from the startup bar, or another application from an application, such as opening a map or image from an email.

When you click an application that has been enabled in the startup column, the system displays the application and does not restart the application.

Program order, conversion between browsing methods and different modes

Tasks in MeeGo are displayed from left to right in the order they are opened. Whenever a new task is opened, it moves the panel of the previous task to the left and adds a thumbnail to the right of the previous task. The default display mode of the switch is to focus on recently used tasks, and arrange other tasks in the right direction. The thumbnails are arranged according to the length of time the task is opened.

You can drag and drop the thumbnail, or quickly pan the thumbnail from one side of the list to the other side to view the opened task. During the quick switch, you can tap the screen to stop it at the clicked position, but the application will not be opened. To open the application, you need to click the corresponding thumbnail. You can use multi-touch operations to bring the switch into the general contracting mode. Using the gesture of moving Two Fingers inward at the same time, you can bring the thumbnail into the mesh display interface. The mesh can reach a maximum of 3x3. After the mesh reaches the maximum specification, the switch starts to create a new page to display the thumbnail not displayed on the previous page.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.