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.
调整现有设计，使其能在不同场景下有效运行——包括不同屏幕尺寸、设备、平台或使用场景。

MANDATORY PREPARATION

必备准备工作

Invoke /impeccable — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: target platforms/devices and usage contexts.
调用/impeccable指令——它包含设计原则、反模式以及Context Gathering Protocol（场景收集规范）。在开始操作前请遵循该规范——如果目前还没有设计场景，你必须先执行/impeccable teach指令。此外还需收集：目标平台/设备和使用场景信息。

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. 识别适配挑战:
    • 哪些内容无法适配？（内容、导航、功能）
    • 哪些功能无法正常工作？（触摸设备上的悬停状态、过小的touch targets）
    • 哪些设计模式不合适？（移动端使用桌面端设计模式、桌面端使用移动端设计模式）
重要提示：适配不仅仅是缩放——而是为新场景重新设计用户体验。

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
布局策略:
  • 采用单列布局而非多列布局
  • 垂直堆叠而非并排排列
  • 组件宽度占满屏幕而非固定宽度
  • 底部导航而非顶部/侧边导航
交互策略:
  • Touch targets最小尺寸为44x44像素（不依赖悬停状态）
  • 在合适的场景使用滑动手势（列表、轮播组件）
  • 使用底部弹窗而非下拉菜单
  • 以拇指操作为核心的设计（控制区域在拇指可触及范围内）
  • 更大的点击区域及更充足的间距
内容策略:
  • 渐进式内容展示（不要一次性显示所有内容）
  • 优先展示核心内容（次要内容放在标签页/折叠面板中）
  • 更简短的文本（更精炼）
  • 更大的字体（最小16像素）
导航策略:
  • 汉堡菜单或底部导航
  • 降低导航复杂度
  • 粘性标题栏以保持场景连贯性
  • 导航流程中加入返回按钮

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 横屏）
交互策略:
  • 同时支持触摸和指针操作
  • Touch targets尺寸为44x44像素，但布局密度可高于手机端
  • 侧边导航抽屉
  • 在合适的场景使用多列表单

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
布局策略:
  • 窄宽度（最大600像素）
  • 仅使用单列布局
  • 使用内联CSS（不使用外部样式表）
  • 基于表格的布局（以兼容邮件客户端）
交互策略:
  • 大而醒目的CTA（使用按钮而非文本链接）
  • 不使用悬停状态（不可靠）
  • 复杂交互使用跳转至网页应用的深度链接

Implement Adaptations

实施适配

Apply changes systematically:
系统化地应用修改：

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)
  • 增大Touch Targets尺寸（最小44x44像素）
  • 增加交互元素之间的间距
  • 移除依赖悬停的交互
  • 添加触摸反馈（涟漪效果、高亮）
  • 考虑拇指操作区域（底部比顶部更容易触及）

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