移动端设计模板

本文介绍了 UI 模板包含的内容及其用途。

目的

本应用旨在帮助应用开发者创建用户友好、风格统一且流程简化的移动应用。通过以移动端体验为核心进行应用开发，这些应用在移动设备上的实用性将得到显著提升。

该应用展示了 Tulip 应用程序的外观示例，并演示了可在应用程序中使用的常见步骤布局。它概述了基础布局、页眉和页脚应包含的元素，使应用开发者能够轻松入门 Tulip 应用程序开发。 该模板允许开发者将步骤布局复制并粘贴到自己的应用程序中，从而显著简化了应用开发流程。这不仅节省了时间，还确保了所有使用本指南构建的应用程序在视觉上保持统一。

设置

由于不同设备的屏幕尺寸差异较大，分辨率对移动应用至关重要。该应用目前提供两种移动设置选项：“移动横屏”和“移动竖屏”。对于较新的移动设备，我们建议使用 19.5:9 竖屏和 19.5:9 横屏分辨率。

功能概述

前 6 个步骤作为设计指南，展示了应用程序中使用的颜色、按钮、按钮图标和排版样式。通过定义这些元素，可以更轻松地在整个公司或实例中保持界面的一致性。

在“颜色”步骤中，用户可以查看应用程序构建中使用的所有颜色及其对应的十六进制代码。如果需要在多个步骤中应用颜色更改，可以将任何颜色保存为变量，以确保整个应用程序的一致性。

“按钮”和“按钮图标”步骤定义了浅色模式和深色模式应用中常用的按钮及其关联图标。当图标的含义一目了然时，可将其与文本结合使用，以提高可读性并节省空间。每个图标在所有应用步骤中应具有一致的含义，理想情况下在工作区内的所有应用中也应保持一致。

本节的最后一个步骤是“排版”步骤，用于定义标题和段落文本的字号及样式。对于移动应用，建议将字号保持在 20px 以上，并确保与背景形成高对比度，以提高可读性。

下一部分将帮助应用开发者设计最适合其应用的基础布局。该部分提供了多种页眉和页脚样式，可直接复制并粘贴到基础布局中。在基础布局中添加导航栏可优化用户工作流程，使用户能够跳转至不同步骤、刷新页面或查看设备状态。 应用开发者可在浅色或深色主题的基础布局之间进行选择。

该应用还包含一组“步骤模板”和一组“步骤布局”。其中包括菜单、模态窗口、工作说明、图片拍摄等。

进一步阅读

如需了解应用设计的最佳实践，请参阅此处的文章。

如需进一步了解移动设备应用程序的设计，请查阅社区讨论中关于移动端 UI/UX 最佳实践的内容。