移动端设计

从一块小屏幕开始：试试常见交互，找到合适的开源组件，再把设计要求带进你的项目。

选择开源组件

让内容成为第一眼。

适合杂志、知识社区和阅读工具。用一个重点故事建立节奏，把收藏和分类放在拇指容易触达的位置。

一个重点故事 + 有节奏的单列内容流
持久的底部导航 + 明确的当前页面
收藏即时反馈，空收藏页说明下一步

搭配风格：移动编辑风

手机预览为 StyleKit 自编的 Web 交互示例，所有操作使用本地数据。它不是下方组件库的官方演示。

城市观察6 分钟

把一场雨读完

沿着一条安静的街，看看天气如何改变我们看见的东西。

林知夏 · 10 月 4 日

雨把街道的边界放慢了。骑车的人停在屋檐下，玻璃上的倒影替熟悉的路添了一层新的颜色。

有时，慢下来就是抵达。

沿着水痕继续向前，平常匆忙经过的店门口，多了一张写着今日汤品的小纸条。

选对组件，再开始写。

Web、React Native 和 SwiftUI 分开选型。这里列出可借鉴的组件、适用场景和接入限制，不用热度代替判断。

资料核验 2026-10-04

12 个推荐项目

ChunUI

MIT

SwiftUI / iOS

从已上线 iOS 应用提炼的 SwiftUI 设计系统，以灰阶层次、单一品牌色、原生 Sheet 和细腻反馈为核心。

主题令牌与字体、间距规范按钮、表单与原生 SheetToast、骨架屏与 Metal 动效

什么时候选: 希望快速建立统一原生 iOS 视觉，并复用按钮、表单、弹层和动效规范的 SwiftUI 项目。
接入前确认: 新兴项目；要求 iOS 18.6+ 与 Swift tools 6.2。README 以 main 分支接入，正式项目应先固定版本并验证兼容性。

官方文档 GitHub

ShipSwift

MIT

SwiftUI / iOS

面向 SwiftUI 的组件与页面配方库，覆盖动画、图表、表单反馈和常见应用流程。

SwiftUI 动画与 Metal 背景折线、柱状与环形图表Sheet、搜索、提醒与 Tab

什么时候选: 需要可检查源码、快速搭建图表、引导页、搜索、提醒和支付页面的 iOS 项目。
接入前确认: MIT 仓库包含可本地复制的组件；README 同时提到需在线服务的 Pro 配方。使用前逐项检查源码、依赖和服务要求。

官方文档 GitHub

Blossom Carousel

Apache-2.0

Web / H5 / React Web / Vue Web

围绕浏览器原生滚动构建的轮播，触屏保留原生手势，并为鼠标和触控笔补上拖拽。

原生滚动与 CSS Scroll Snap鼠标、触控笔拖拽增强前后翻页与圆点导航

什么时候选: 阅读内容画廊、商品图片和横向卡片列表，尤其适合优先保留浏览器滚动体验的页面。
接入前确认: 这是 Web 轮播，不是 iOS 或 Android 原生组件；循环滚动仍标为实验功能。

官方文档 GitHub

Ant Design Mobile

MIT

React Web

专为移动 Web 设计的 React 组件库，提供表单、选择器、列表与反馈等完整积木。

按钮、表单与输入控件选择器、日期与动作面板列表、标签页与提示

什么时候选: React H5 页面需要现成的移动控件、表单状态和一致的触屏细节。
接入前确认: 面向浏览器中的 React，不是 React Native；整套默认视觉较强，适合参考或挑选组件；采用时应保持产品自身的品牌样式。

官方文档 GitHub

Vant

MIT

Vue Web

轻量、可定制的 Vue 移动 Web 组件库，提供适合手机表单和商城流程的基础控件。

表单、单元格与选择器日历、日期与动作面板列表、标签与轻提示

什么时候选: Vue 3 H5、移动商城、报名与资料填写流程。
接入前确认: Vant 是 Vue 组件，不能直接用于 React 项目；当前主线面向 Vue 3，旧 Vue 2 项目需选对应版本。

官方文档 GitHub

Ionic Framework

MIT

Web / H5 / React Web / Vue Web

基于 Web Components 的移动 UI 工具包，可通过 React 或 Vue 适配器构建移动 Web、PWA 和混合应用。

导航栏、标签栏与列表动作面板、弹窗与提示触控手势与平台主题

什么时候选: 需要完整移动应用外壳、跨平台主题、导航与设备能力接入的团队。
接入前确认: 它是一套应用工具链，不只是几个控件；部署原生能力通常还要配合 Capacitor。如果只为现有应用增加单个控件，可以借鉴其模式，无需引入整套框架。

官方文档 GitHub

Framework7

MIT

Web / H5 / React Web / Vue Web

移动 Web 与混合应用框架，提供 iOS 和 Material 风格的控件、路由及应用结构。

导航栏、底部工具栏与标签页弹窗、动作面板与搜索栏iOS / Material 自适应主题

什么时候选: 想做接近原生应用结构的独立移动 SPA，并需要整套页面与导航控件。
接入前确认: 它会接管较多应用结构和路由；在已有 Next.js 应用中，更适合作为交互参考或独立原型。

官方文档 GitHub

Swiper

MIT

Web / H5 / React Web / Vue Web

成熟的触屏滑块与轮播库，支持 React、Vue 和多种导航、分页模块。

滑块与幻灯片分页点与前后导航触屏与鼠标拖动

什么时候选: 商品图集、横向内容卡片、需要分页或复杂滑动行为的移动 Web。
接入前确认: 功能范围比单纯轮播更大；普通内容条优先用原生横向滚动，只有需要其手势与模块时再引入。

官方文档 GitHub

Radix UI Dialog

MIT

React Web

无样式的 React 对话框基础原语，处理模态层、焦点管理、键盘关闭和屏幕阅读器语义。

Root、Trigger、Portal 与 OverlayContent、Title 与 Description焦点捕获、Esc 关闭与读屏语义

什么时候选: 需要自己设计视觉的 React Web 弹层、筛选面板和移动端底部面板。
接入前确认: 它提供访问性良好的 Dialog 结构，但不自带抽屉拖拽或吸附点；要做 Bottom Sheet 手势仍需由应用补充。

官方文档 GitHub

React Native Paper

MIT

React Native

遵循 Material Design 3 的 React Native 跨平台组件库，支持 iOS、Android 和主题定制。

按钮、卡片与列表输入框、选择器与菜单导航栏、弹窗与主题

什么时候选: 要快速搭建 Material 风格原生应用，并保持按钮、表单、导航一致的 RN 项目。
接入前确认: 组件运行在 React Native，不能直接用于普通浏览器 DOM；使用时需设置 PaperProvider 和主题。

官方文档 GitHub

React Native Bottom Sheet

MIT

React Native

带吸附点、手势和键盘处理的原生底部面板，适合 iOS 与 Android 的筛选和详情流程。

多吸附点 Bottom SheetModal Sheet 与动态高度列表、键盘与滚动协调

什么时候选: React Native 原生应用里的筛选、购物选项、任务操作和可滚动详情面板。
接入前确认: 需要配套 Reanimated 和 Gesture Handler，并按各自文档完成原生配置；这不是浏览器 DOM 抽屉。

官方文档 GitHub

Tamagui

MIT

Web / H5 / React Native

面向 Web 与 React Native 的通用 React 设计系统，可共享组件、主题和响应式样式。

通用 Box、Stack 与文本主题、令牌与响应式变体表单、菜单与弹层控件

什么时候选: 同时维护 Next.js 网站和 Expo 原生应用，并希望复用设计令牌与界面组件的团队。
接入前确认: 跨端复用需要配置与理解其主题系统；原生端要求 React Native 0.81+ 新架构。仅给当前 Web 页面补移动样式时，引入整套系统成本偏高。

官方文档 GitHub

好看之后，还要好用。

触控目标

这些 Web 示例以至少 44 × 44 CSS px 的主操作区域为目标。WCAG 2.2 AA 的最小目标标准为 24 × 24 CSS px，并有间距等例外；原生 App 需另核对 pt / dp 规范。

WCAG 2.2

安全区与键盘

固定操作栏为底部安全区留出空间；输入框聚焦后仍能看到输入内容和提交按钮。浏览器预览之外，还需要真机检查软键盘。

MDN

弹层与焦点

弹层打开后焦点进入内容区，有明确关闭方式；关闭后回到触发按钮。避免只支持拖拽而没有可点击的操作。

WAI-ARIA APG

把这套要求带走。

内容跟随上方场景和技术栈选择，包含结构、验收要求与候选库。可以交给开发者或 AI 编程助手。

内容阅读 / 平台待定

查看完整开发要求

# 移动端设计要求 — 内容阅读

目标平台: 先确认 Web 或原生 App，再选择组件库。
适合杂志、知识社区和阅读工具。用一个重点故事建立节奏，把收藏和分类放在拇指容易触达的位置。

## 页面结构
- 一个重点故事 + 有节奏的单列内容流
- 持久的底部导航 + 明确的当前页面
- 收藏即时反馈，空收藏页说明下一步

## 验收要求
- 标题可换行，长中文和大字号不截断主要信息。
- 切换内容与收藏时，已收藏状态保持一致。
- 底部导航只放页面目的地，收藏是独立操作。
- 验证 360px、390px 和 430px 窄屏，无横向溢出。
- 检查安全区、软键盘、键盘焦点、深色模式与减少动态效果偏好。
- 接入业务时补齐加载、空、成功和失败状态；不要把本地示例数据当作已接入服务。

## 候选组件库（择一组合，先核对兼容性）
- ChunUI (swiftui; MIT): https://github.com/liseami/ChunUI#readme
  新兴项目；要求 iOS 18.6+ 与 Swift tools 6.2。README 以 main 分支接入，正式项目应先固定版本并验证兼容性。
- ShipSwift (swiftui; MIT): https://github.com/signerlabs/ShipSwift#readme
  MIT 仓库包含可本地复制的组件；README 同时提到需在线服务的 Pro 配方。使用前逐项检查源码、依赖和服务要求。
- Blossom Carousel (web, react, vue; Apache-2.0): https://www.blossom-carousel.com
  这是 Web 轮播，不是 iOS 或 Android 原生组件；循环滚动仍标为实验功能。
- Ant Design Mobile (react; MIT): https://mobile.ant.design/
  面向浏览器中的 React，不是 React Native；整套默认视觉较强，适合参考或挑选组件；采用时应保持产品自身的品牌样式。
- Vant (vue; MIT): https://vant-ui.github.io/vant/
  Vant 是 Vue 组件，不能直接用于 React 项目；当前主线面向 Vue 3，旧 Vue 2 项目需选对应版本。
- Ionic Framework (web, react, vue; MIT): https://ionicframework.com/docs
  它是一套应用工具链，不只是几个控件；部署原生能力通常还要配合 Capacitor。如果只为现有应用增加单个控件，可以借鉴其模式，无需引入整套框架。
- Framework7 (web, react, vue; MIT): https://framework7.io/docs/
  它会接管较多应用结构和路由；在已有 Next.js 应用中，更适合作为交互参考或独立原型。
- Swiper (web, react, vue; MIT): https://swiperjs.com/react
  功能范围比单纯轮播更大；普通内容条优先用原生横向滚动，只有需要其手势与模块时再引入。
- React Native Paper (react-native; MIT): https://callstack.github.io/react-native-paper/
  组件运行在 React Native，不能直接用于普通浏览器 DOM；使用时需设置 PaperProvider 和主题。
- Tamagui (web, react-native; MIT): https://tamagui.dev/docs/intro/installation
  跨端复用需要配置与理解其主题系统；原生端要求 React Native 0.81+ 新架构。仅给当前 Web 页面补移动样式时，引入整套系统成本偏高。

视觉参考: https://www.stylekit.top/zh/styles/mobile-editorial
SwiftUI / React Native 组件不直接运行于 Next.js；网页示意不能代替原生设备验收。