adapt

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases.

将现有设计调整为可在不同场景下有效运行——包括不同屏幕尺寸、设备、平台或使用案例。

Assess Adaptation Challenge

评估适配挑战

Understand what needs adaptation and why:

Identify the source context:
- What was it designed for originally? (Desktop web? Mobile app?)
- What assumptions were made? (Large screen? Mouse input? Fast connection?)
- What works well in current context?
Understand target context:
- Device: Mobile, tablet, desktop, TV, watch, print?
- Input method: Touch, mouse, keyboard, voice, gamepad?
- Screen constraints: Size, resolution, orientation?
- Connection: Fast wifi, slow 3G, offline?
- Usage context: On-the-go vs desk, quick glance vs focused reading?
- User expectations: What do users expect on this platform?
Identify adaptation challenges:
- What won't fit? (Content, navigation, features)
- What won't work? (Hover states on touch, tiny touch targets)
- What's inappropriate? (Desktop patterns on mobile, mobile patterns on desktop)

CRITICAL: Adaptation is not just scaling - it's rethinking the experience for the new context.

明确需要适配的内容及原因：

识别源场景:
- 最初是为哪种场景设计的？（桌面端网页？移动端应用？）
- 设计时做出了哪些假设？（大屏幕？鼠标输入？高速网络？）
- 当前场景下哪些部分表现良好？
了解目标场景:
- 设备：手机、平板、桌面电脑、电视、手表、印刷品？
- 输入方式：触摸、鼠标、键盘、语音、游戏手柄？
- 屏幕限制：尺寸、分辨率、横竖屏？
- 网络连接：高速WiFi、慢速3G、离线？
- 使用场景：移动途中 vs 桌面办公、快速浏览 vs 专注阅读？
- 用户预期：用户在该平台上的预期是什么？
识别适配挑战:
- 哪些内容无法适配？（内容、导航、功能）
- 哪些交互无法正常工作？（触摸设备上的悬停状态、过小的触摸目标）
- 哪些设计模式不合时宜？（移动端使用桌面端模式，或桌面端使用移动端模式）

关键提示：适配不仅仅是缩放——而是针对新场景重新构思体验。

Plan Adaptation Strategy

制定适配策略

Create context-appropriate strategy:

打造符合场景需求的策略：

Mobile Adaptation (Desktop → Mobile)

移动端适配（桌面端 → 移动端）

Layout Strategy:

Single column instead of multi-column
Vertical stacking instead of side-by-side
Full-width components instead of fixed widths
Bottom navigation instead of top/side navigation

Interaction Strategy:

Touch targets 44x44px minimum (not hover-dependent)
Swipe gestures where appropriate (lists, carousels)
Bottom sheets instead of dropdowns
Thumbs-first design (controls within thumb reach)
Larger tap areas with more spacing

Content Strategy:

Progressive disclosure (don't show everything at once)
Prioritize primary content (secondary content in tabs/accordions)
Shorter text (more concise)
Larger text (16px minimum)

Navigation Strategy:

Hamburger menu or bottom navigation
Reduce navigation complexity
Sticky headers for context
Back button in navigation flow

布局策略:

采用单列布局替代多列布局
垂直堆叠替代并排排列
全宽组件替代固定宽度
底部导航替代顶部/侧边导航

交互策略:

触摸目标最小尺寸为44x44px（不依赖悬停状态）
合适的场景下使用滑动手势（列表、轮播图）
用底部弹窗替代下拉菜单
以拇指操作为中心的设计（控制元素位于拇指可触及范围）
更大的点击区域与更充裕的间距

内容策略:

渐进式展示（不一次性显示所有内容）
优先展示核心内容（次要内容放在标签页/折叠面板中）
更简洁的文本
更大的字体（最小16px）

导航策略:

汉堡菜单或底部导航
降低导航复杂度
固定头部以保持场景上下文
导航流程中加入返回按钮

Tablet Adaptation (Hybrid Approach)

平板端适配（混合方案）

Layout Strategy:

Two-column layouts (not single or three-column)
Side panels for secondary content
Master-detail views (list + detail)
Adaptive based on orientation (portrait vs landscape)

Interaction Strategy:

Support both touch and pointer
Touch targets 44x44px but allow denser layouts than phone
Side navigation drawers
Multi-column forms where appropriate

布局策略:

双列布局（而非单列或三列）
侧边面板用于展示次要内容
主详情视图（列表 + 详情）
根据横竖屏自适应（竖屏 vs 横屏）

交互策略:

同时支持触摸与指针操作
触摸目标为44x44px，但允许比手机更紧凑的布局
侧边导航抽屉
合适的场景下使用多列表单

Desktop Adaptation (Mobile → Desktop)

桌面端适配（移动端 → 桌面端）

Layout Strategy:

Multi-column layouts (use horizontal space)
Side navigation always visible
Multiple information panels simultaneously
Fixed widths with max-width constraints (don't stretch to 4K)

Interaction Strategy:

Hover states for additional information
Keyboard shortcuts
Right-click context menus
Drag and drop where helpful
Multi-select with Shift/Cmd

Content Strategy:

Show more information upfront (less progressive disclosure)
Data tables with many columns
Richer visualizations
More detailed descriptions

布局策略:

多列布局（利用横向空间）
侧边导航始终可见
同时展示多个信息面板
固定宽度并设置最大宽度限制（不拉伸至4K分辨率）

交互策略:

悬停状态显示额外信息
键盘快捷键
右键上下文菜单
合适的场景下使用拖拽功能
按住Shift/Cmd键进行多选

内容策略:

预先展示更多信息（减少渐进式展示）
包含多列的数据表格
更丰富的可视化效果
更详细的描述

Print Adaptation (Screen → Print)

印刷适配（屏幕 → 印刷品）

Layout Strategy:

Page breaks at logical points
Remove navigation, footer, interactive elements
Black and white (or limited color)
Proper margins for binding

Content Strategy:

Expand shortened content (show full URLs, hidden sections)
Add page numbers, headers, footers
Include metadata (print date, page title)
Convert charts to print-friendly versions

布局策略:

在逻辑位置设置分页符
移除导航、页脚及交互元素
黑白（或有限色彩）
设置适合装订的边距

内容策略:

展开被精简的内容（显示完整URL、隐藏的章节）
添加页码、页眉、页脚
包含元数据（打印日期、页面标题）
将图表转换为适合印刷的版本

Email Adaptation (Web → Email)

邮件适配（网页 → 邮件）

Layout Strategy:

Narrow width (600px max)
Single column only
Inline CSS (no external stylesheets)
Table-based layouts (for email client compatibility)

Interaction Strategy:

Large, obvious CTAs (buttons not text links)
No hover states (not reliable)
Deep links to web app for complex interactions

布局策略:

窄宽度（最大600px）
仅使用单列布局
内联CSS（不使用外部样式表）
基于表格的布局（确保邮件客户端兼容性）

交互策略:

大而醒目的CTA（使用按钮而非文本链接）
不使用悬停状态（不可靠）
复杂交互跳转至网页应用的深度链接

Implement Adaptations

实施适配方案

Apply changes systematically:

系统性地应用更改：

Responsive Breakpoints

响应式断点（Responsive Breakpoints）

Choose appropriate breakpoints:

Mobile: 320px-767px
Tablet: 768px-1023px
Desktop: 1024px+
Or content-driven breakpoints (where design breaks)

选择合适的断点：

移动端：320px-767px
平板端：768px-1023px
桌面端：1024px+
或基于内容的断点（设计出现问题的临界点）

Layout Adaptation Techniques

布局适配技巧

CSS Grid/Flexbox: Reflow layouts automatically
Container Queries: Adapt based on container, not viewport
clamp()
: Fluid sizing between min and max
Media queries: Different styles for different contexts
Display properties: Show/hide elements per context

CSS Grid/Flexbox：自动重排布局
Container Queries：基于容器而非视口进行适配
clamp()
：在最小与最大值之间动态调整尺寸
Media queries：针对不同场景应用不同样式
Display属性：根据场景显示/隐藏元素

Touch Adaptation

触摸适配

Increase touch target sizes (44x44px minimum)
Add more spacing between interactive elements
Remove hover-dependent interactions
Add touch feedback (ripples, highlights)
Consider thumb zones (easier to reach bottom than top)

增大触摸目标尺寸（最小44x44px）
增加交互元素之间的间距
移除依赖悬停的交互
添加触摸反馈（波纹效果、高亮）
考虑拇指区域（底部比顶部更容易触及）

Content Adaptation

内容适配

Use
```
display: none
```
sparingly (still downloads)
Progressive enhancement (core content first, enhancements on larger screens)
Lazy loading for off-screen content
Responsive images (
```
srcset
```
,
```
picture
```
element)

谨慎使用
```
display: none
```
（元素仍会被下载）
渐进式增强（先提供核心内容，大屏幕上再添加增强功能）
对屏幕外内容进行懒加载
响应式图片（
```
srcset
```
、
```
picture
```
元素）

Navigation Adaptation

导航适配

Transform complex nav to hamburger/drawer on mobile
Bottom nav bar for mobile apps
Persistent side navigation on desktop
Breadcrumbs on smaller screens for context

IMPORTANT: Test on real devices, not just browser DevTools. Device emulation is helpful but not perfect.

NEVER:

Hide core functionality on mobile (if it matters, make it work)
Assume desktop = powerful device (consider accessibility, older machines)
Use different information architecture across contexts (confusing)
Break user expectations for platform (mobile users expect mobile patterns)
Forget landscape orientation on mobile/tablet
Use generic breakpoints blindly (use content-driven breakpoints)
Ignore touch on desktop (many desktop devices have touch)

在移动端将复杂导航转换为汉堡菜单/抽屉
移动端应用使用底部导航栏
桌面端使用持久化侧边导航
小屏幕上使用面包屑导航保持上下文

重要提示：在真实设备上进行测试，而不仅仅是浏览器开发者工具。设备模拟有帮助，但并不完美。

绝对禁止:

在移动端隐藏核心功能（如果重要，就必须使其可用）
假设桌面端设备性能强劲（考虑可访问性、老旧设备）
不同场景下使用不同的信息架构（易造成混淆）
违背用户对平台的预期（移动端用户期望移动端设计模式）
忽略移动端/平板端的横屏方向
盲目使用通用断点（采用基于内容的断点）
忽略桌面端的触摸操作（许多桌面设备支持触摸）

Verify Adaptations

验证适配效果

Test thoroughly across contexts:

Real devices: Test on actual phones, tablets, desktops
Different orientations: Portrait and landscape
Different browsers: Safari, Chrome, Firefox, Edge
Different OS: iOS, Android, Windows, macOS
Different input methods: Touch, mouse, keyboard
Edge cases: Very small screens (320px), very large screens (4K)
Slow connections: Test on throttled network

Remember: You're a cross-platform design expert. Make experiences that feel native to each context while maintaining brand and functionality consistency. Adapt intentionally, test thoroughly.

跨场景全面测试：

真实设备：在实际手机、平板、桌面电脑上测试
不同方向：竖屏与横屏
不同浏览器：Safari、Chrome、Firefox、Edge
不同操作系统：iOS、Android、Windows、macOS
不同输入方式：触摸、鼠标、键盘
边缘情况：极小屏幕（320px）、极大屏幕（4K）
慢速网络：在限速网络下测试

记住：你是跨平台设计专家。要打造在每个场景下都原生感十足的体验，同时保持品牌与功能的一致性。有意地进行适配，全面地进行测试。