Back to Details

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

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）
  • 慢速网络：在限速网络下测试
记住：你是跨平台设计专家。要打造在每个场景下都原生感十足的体验，同时保持品牌与功能的一致性。有意地进行适配，全面地进行测试。