# Design Guidelines
## 1. Overview
Miniapps are designed with lightweight and user-friendly features and widely used on mobile apps. As one of the leading IoT enterprises, Tuya opens the development capabilities on top of Tuya MiniApp and helps you deliver optimal user experiences.
For developers, Tuya MiniApp is a new framework dedicated for simple and efficient design and development, and pushes boundaries in platform operational capabilities backed by sufficient configurations. In a combination of Tuya MiniApp and Tuya Developer Platform, you can make a significant breakthrough in network traffic acquisition, improved user retention, precision marketing, and data monitoring.
For users, Tuya MiniApps fulfill the "instant use and go" ideology. Without the need to download resources, users can enjoy more convenient smart life services brought by MiniApps, respecting home data management, device management and control, smart scenes, and value-added utilities. Miniapps can run through multiple threads and channels and make smart home spaces and scenes accessible by a few simple taps.
Based on the full respect for users' rights and benefits, these design guidelines and recommendations are intended for your reference to create friendly, efficient, and consistent user experiences within Tuya's ecosystem, and achieve an all-win situation among users, customers, and Tuya.
## 2. Basic framework and design standards
### 2.1 Basic framework
Each page of a miniapp is divided into two parts: title bar and content area. The title bar appears at a fixed position on a page. In your design of pages, reserve sufficient space for the text of each title.
### 2.2 Title bar
- Recommended styles
The following styles are recommended by Tuya. You can customize the recommended styles to meet your branding or product requirements.
- Custom configuration
For all pages of a miniapp, including embedded webpages and plug-ins, Tuya provides a unified style of the pill button in the top right corner. You cannot customize its content. If you need to add interactive elements around this pill button, check whether overlapping hotspots or conflicting interactive events will occur. The implementation is subject to the configuration on the Tuya Developer Platform.
- Tuya provides the content that appears after users tap the **More** icon.
### 2.3 Tab bar
You can add a tab bar to a miniapp page and allow users to horizontally switch between different pages.
Top tab bars and bottom tab bars are supported. Up to one tab bar can appear on a page.
- Top tab bar
A tab bar can adhere to the bottom of the title bar, or appear in the content area. In the latter case, when users swipe the content area along with the tab bar up to the top, the tab bar is fixed below the title bar. The tab bar does not disappear when the page is scrolled up.
Each top tab bar supports 2 to 10 tabs. We recommend that you design 2 to 4 tabs in each bar. You cannot customize each tab icon, but can customize the icon text, text color, and bar color. The text on an active tab icon must be highlighted.
- Bottom tab bar
A bottom tab bar is always fixed to the bottom of the homepage for a miniapp. The bottom tab bar does not disappear when users scroll the page up or down. Users can switch between different tabs in the bar.
Each bottom tab bar supports 2 to 5 tabs. You can customize the icon style, icon text, text color, and bar color. The icon and text on an active tab must be highlighted.
### 2.4 Loading status
Loading and waiting cannot be avoided in the use of MiniApps. To prevent excessive waiting times on pages and ensure optimal user experiences, you must provide prompt and definite feedback during the waiting process.
- Load splash screen
A splash screen can present a characteristic logo or display the loading progress. The following splash screen shows a logo. You can customize the splash screen.
- Swipe down to refresh and load
Tuya MiniApp provides the standard capabilities and styles that enable users to swipe down to refresh and load pages. You can keep the default styles or develop custom ones.
- In-page loading and feedback
Tuya MiniApp provides the standard capabilities and styles that enable users to swipe up to load in-page content. When users swipe up to a certain height, the current in-page content will be loaded. You can keep the default styles or develop custom ones.
- Regional loading and feedback
During the regional loading of only a part of page content, you can design more specific feedback and minimize page jumping. You can keep the default styles or develop custom ones. Design custom loading styles as plain as possible and use simple animations to inform users of the loading progress.
- Modal loading
The modal loading style covers the entire page. The specific loading location or content is not clearly indicated. Therefore, a seemingly static page during modal loading might cause uncertainties and anxieties in user experiences. In light of this reason, use modal loading with caution. You can keep the default styles or develop custom ones.
### 2.5 Feedback on operations
- Panel of extended features
Tap the More icon in the top right corner of a page to evoke Tuya's panel that displays extended features of a miniapp. You can customize the shortcut menu to these features based on the default menu on this panel.
- Pop-up notifications
Icon-style and text-style pop-up notifications are supported. They are suitable for lightweight operational prompts that do not provide important information. These notifications will automatically disappear after a short period, and do not interrupt the current process, so little impact can be imposed on users. These pop-up notifications are not suitable for error prompts that must clearly inform users of important information.
- Modal dialog boxes
If an operation result must be clearly acknowledged by users, provide a modal dialog box to display a notification and provide instructions for the next operation.
### 2.6 Exception control and solution
Users might get frustrated and need help if abnormal states and exceptions occur. Therefore, special attention must be attached to these cases. If an exception occurs, users must be given the necessary prompts and offered a solution.
In the case of an exception, a user may stay on a page without knowing what to do. The following design solutions are recommended to avoid this problem.
- Lightweight error prompt
Display the reason for an error at the top of the page, and indicate the error field or provide a link to help users make necessary modifications.
- Global error prompt
If a global error occurs, for example, a network error, a server exception, or empty content, you can display a global error prompt and provide a troubleshooting button.
- Regional error prompt
If an error occurs in a certain module of a page, you can display an error prompt in this module and provide a troubleshooting button.
## 3. Visual standards
### 3.1 Page layout
- Spacing
Unify the spacing standards to ensure consistent and captivating user experiences.
Design your visual solution based on the width of 375 pixels\×3 (dimensions of iPhone 11).
In the layout of miniapp content, reserve 16 pixels\×3 for the left and right margins respectively to limit the width of content to achieve an optimal reading experience. The horizontal and vertical spacing between page content must be consistent.
- Round corner
- Icon
### 3.2 Color
To provide visual continuity, communicate status and feedback, and help people understand the information in an optimal viewing experience, Tuya recommends the following color scheme.
### 3.3 Font
The font within a miniapp must be the same as that of the operating system that runs the miniapp.
## 4. Adaption standards and resource download
Users might run MiniApps on tablets and switch between views of different dimensions. To ensure smooth and friendly experiences of MiniApps running on devices in different scenarios, we recommend that you adapt MiniApps to varied screen dimensions. Formulate a reasonable design scheme and miniapp page layout in combination with standard technologies to deliver intuitive and consistent user experiences.
Tuya provides a series of design specifications and adaptation recommendations for your reference. Particularly, you will be inspired to satisfy users in dark mode or on tablets.
[Download Tuya MiniApp Design Specifications and Basic Control Resources](https://www.figma.com/file/ZiXyKLNvKlQ9spmDWnGuNH/%E6%B6%82%E9%B8%A6%E8%AE%BE%E8%AE%A1%E5%9F%BA%E7%A1%80%E6%A0%B7%E5%BC%8F%E5%BA%93%EF%BD%9CTuya-Design-Basic-Style-Library?node-id=1%3A10005)
**Document Password**: tuyadesign