[DJI Certified] How to make your MSDK application a better UI experience.
This is an original work, please do not reprint without permission!
UI design is the process of designing human-computer interaction and operation logic according to the characteristics of the application. Better UI makes the application easier to use and more good-looking.
The UI Design of DJI GO and DJI GO 4
In an Android application, Google provides Material Design (MD) UI design specifications. In an iOS application, Apple also provides a Human Interface Guideline (HIG). Both MD and HIG provide developers with a wealth of design ideas and design directions, but when using the Mobile SDK application , they also need to consider the characteristics of their DJI drones.
1. The operating characteristics of the Mobile SDK application.
The most significant difference between the Mobile SDK application and other applications is as follows: the mobile device of Mobile SDK application is always clamped on the remote control, while the mobile device of normal application is tightly held in the user's hand.
In general, we hold mobile devices in one hand
In Mobile SDK Application, the mobile device is always fixed on the remote control
According to this feature, the Mobile SDK application must follow the following basic principles:
(1) Disable the vertical screen.
In almost all application scenarios, the mobile device is clamped horizontally on the clip of the remote control, which is more in line with human visual sensory experience. Therefore, except for very special cases, it is recommended that all Mobile SDK applications be forced to use horizontal screen.
Under what circumstances can vertical screen be used? For example, when the Mavic Pro is turned on in Wi-Fi remote control mode, and enters the vertical shooting mode, it is used for self-timer, live broadcast and other scenarios. The vertical screen may bring a better user experience, but it is recommended that developers fully consider all factors such as easy-use and security.
(2) One-handed operation.
Similar to handheld mobile devices, the mobile device fixed on the remote control is also mainly one-handed. This is mainly because the other hand of the user often needs to hold the remote control, and sometimes even needs to perform operations such as turning the gimbal pitch. Unlike handheld mobile devices, users are more inclined to use their right index finger to operate a Mobile SDK application, rather than using their thumbs. Since the range of the index finger touching the screen is smaller and tends to be more flexible than the thumb, various controls such as buttons can be designed to be smaller to accommodate more controls.
use your right index finger to operate the MSDK app.
Note that for commonly used button controls (such as taking pictures, videos, etc.) and security controls (such as returning home, canceling tasks, etc.), it is necessary to occupy a large area of the screen appropriately.
(3) The controls(views) can be distributed around the screen
For general applications, whether it is the MD design concept of Android or the HIG design concept of iOS, developers are recommended to put the controls on the top and bottom of the screen, which is easier to operate and can avoid misuse . Since the Mobile SDK application "liberates" the position of the finger in the right hand, you can place the views and controls for displaying various information anywhere on the screen. However, in order to highlight the main information (such as FPV, drone map, etc.), it is recommended to place these views and controls evenly around the screen.
Look! Surrounded by controls!!
Note: Function-related controls (or views) are recommended to be placed together to facilitate the user's search and operation
2. Security features of Mobile SDK application.
Drones are expensive and the operations always have potential liability risks. Therefore, the Mobile SDK application must always pay attention to let users know the key information and safety information of the DJI drone.
(1) Display FPV at all times
Except in special circumstances, it is recommended that developers use FPV as the main part of the application, or even fill the entire UI interface. On the one hand, the FPV is the "eye" of the drone, which most intuitively show the location environment in real-time. On the other hand, in case of an emergency, the FPV can let the user understand what happened in order to corrently respond.When the user needs to view other information (for example, in application scenarios such as aerial surveys and inspections, the user wants to open the map to understand the geographic location of the drone and view the progress of the task execution, etc.), it is strongly recommended to occupy a thumbnail position on the screen for FPV to improve the user's self-confidence when operating.
It is recommended to hide the status bar at the top of the mobile device and allow the application to enter full-screen mode in Mobile SDK application.
(2) Never use a prompt box that occupies the entire screen
It is recommended that developers avoid using AlertDialog in Android and UIAlertController in iOS to occupy the entire screen. These types of prompt boxes will seriously affect the normal operation of the user: since the sudden prompt box will temporarily make the controls inoperable and any prompt is not as important as letting the user see the FPV information.
Not Good!
Good! (3) Improve screen brightness
At present, any expensive mobile phone (tablet) screen will appear eclipsed under the sun. In the Mobile SDK application, it is best to add code to control the screen brightness to keep the screen at a certain brightness, or give the user sufficient prompts to increase the screen brightness.
(4) Highlight safety tips and safety options
Always put the safety information and option configuration information of the drone in an important position. For the information of battery power, drone signal, as well as the button to terminate the mission and return home, it must be placed in an important position on the UI interface. For flight missions such as waypoint missions and timeline missions, safety information (such as whether the battery is sufficient and whether the distance is too far) should be given to the user before starting.
In addition, pay attention to the color selection of safety information: red represents a severe warning, yellow represents a warning, and green represents normal. Appropriate use of green reminder users can also give users full driving confidence, thereby reducing the incidence of safety accidents.
Use color selection for safety information 3. Cultivate consistent user habits
DJI official provides DJI GO, GS Pro and other drone applications in different scenarios. In the development process of the Mobile SDK application, we must make full use of existing resources, understand and refer to the placement of its views and controls and use it in our application development.
DJI Fmaliy
Note: For professional industry applications (such as aerial surveys, inspections, plant protection, etc.), targeted development applications on iPad and other tablet devices can display more information and controls more clearly, which may provide better user experience.
Fortunately, DJI UX SDK provides almost complete views for displaying UAV information and having control functions. Through the UX SDK, users can assemble into an another DJI GO app. However, when using the UX SDK, it is necessary to refer to the official application to arrange its position and cultivate consistent user habits in order to obtain a better user experience.
The UX SDK:
https://developer.dji.com/cn/ux-sdk/
The instruction for using UX SDK in iOS app:
https://developer.dji.com/cn/mobile-sdk/documentation/ios-tutorials/UXSDKDemo.html
The instruction for using UX SDK in Android app:
https://developer.dji.com/cn/mobile-sdk/documentation/android-tutorials/UXSDKDemo.html
|
lvl.2
