UI&UX设计 · 多端类型矩阵
多端学习对照表
按平台维度对比核心输入设备、屏幕特点、核心交互特征与代表平台。
序号
端 (Platform)
核心输入设备
屏幕特点
核心交互特征 (Component Focus)
代表平台
常用设计规范推荐
常用组件介绍
1
移动端
Mobile
手指
小竖屏
底部导航、触控面积大、手势滑动
iOS
Android
通用手机端
小程序
Material Design
微信小程序设计
iOS HIG
iOS HIG
Material Design
通用手机端常用组件
微信小程序设计
2
平板端
Tablet
手指 / 触控笔
中大竖屏 / 横屏
分栏布局、多指手势、拖拽、内容创作
iPadOS
Android 平板
鸿蒙平板
iPadOS HIG
Material Design
HarmonyOS 设计
iPadOS HIG
Material Design
通用平板端常用组件
HarmonyOS 设计
3
Web端
Web
鼠标 + 键盘
大横屏
Hover 悬停、下拉菜单、多列布局
Chrome
Safari
Edge
Firefox
Ant Design
ArcoDesign
Element+
TDesign
Material Design
Ant Design
ArcoDesign
Element+
TDesign
Material Design
通用Web端常用组件
4
桌面端
Desktop
鼠标 + 快捷键
窗口化
右键菜单、工具栏、数据表格
Windows
macOS
Linux
Fluent 2
macOS HIG
Ant Design
Fluent 2
macOS HIG
Ant Design
通用桌面端常用组件
5
电视端
TV
遥控器
极大远屏
焦点态、大卡片、方向键导航
Android TV
tvOS
webOS
Tizen
Android TV 设计
tvOS HIG
Android TV 设计
tvOS HIG
通用电视端常用组件
6
手表端
Watch
手指 + 表冠
极小方 / 圆屏
卡片流、极简、语音输入
watchOS
Wear OS
鸿蒙手表
watchOS HIG
Wear OS 设计
鸿蒙穿戴
watchOS HIG
Wear OS 设计
鸿蒙穿戴
通用手表端常用组件
7
车载端
HMI
物理按键 / 语音
横向大屏
超大热区、盲操、层级极浅
Android Automotive
QNX
鸿蒙车机
CarPlay HIG
Android Auto 设计
鸿蒙车机
CarPlay HIG
Android Auto 设计
鸿蒙车机
通用车载端常用组件
8
XR空间端
XR Spatial
眼睛 + 手势
无限空间
空间悬浮面板、3D、无边界
visionOS
Quest OS
PICO OS
visionOS HIG
Meta Horizon 设计
visionOS HIG
Meta Horizon 设计
通用XR空间端常用组件
9
自助终端 / 工业屏幕端
Kiosk / POS
手指 / 触控 / 扫码
固定中屏
大按钮、防误触、常驻界面
Android
Windows
嵌入式系统
Material Design
ArcoDesign
Ant Design
Material Design
ArcoDesign
Ant Design
通用自助终端常用组件