Back to Details

i-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——它包含设计原则、反模式和上下文收集协议。在继续操作前遵循该协议——如果还没有任何设计上下文，你必须先运行
/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. 识别适配挑战：
    • 哪些内容放不下？（内容、导航、功能）
    • 哪些功能无法运行？（触摸设备上的hover状态、过小的触摸目标）
    • 哪些设计不合适？（移动端使用桌面端交互模式、桌面端使用移动端交互模式）
关键提示：适配不只是缩放——而是要为新场景重新思考体验设计。

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（不依赖hover效果）
  • 合适场景下使用滑动手势（列表、轮播图）
  • 底部弹窗替代下拉菜单
  • 拇指优先设计（控件放在拇指可触及范围内）
  • 更大的点击区域和更多间距
内容策略：
  • 渐进式披露（不要一次性展示所有内容）
  • 优先展示核心内容（次要内容放在标签页/折叠面板中）
  • 更简短的文本（更简洁）
  • 更大的字号（最小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屏全宽）
交互策略：
  • hover状态展示额外信息
  • 键盘快捷键
  • 右键上下文菜单
  • 合适场景下支持拖拽
  • 配合Shift/Cmd键实现多选
内容策略：
  • upfront展示更多信息（减少渐进式披露）
  • 支持多列的数据表格
  • 更丰富的可视化效果
  • 更详细的描述信息

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（使用按钮而非文字链接）
  • 不使用hover状态（兼容性差）
  • 复杂交互跳转至网页端实现

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

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)
  • 移动端将复杂导航转换为汉堡菜单/抽屉
  • 移动端应用使用底部导航栏
  • 桌面端使用常驻侧边导航
  • 小屏幕使用面包屑保留上下文
重要提示：在真实设备上测试，不要仅依赖浏览器DevTools。设备模拟有帮助但并不完美。
禁止操作：
  • 在移动端隐藏核心功能（如果功能重要就要做好适配）
  • 假设桌面端就是高性能设备（要考虑无障碍、旧设备）
  • 不同场景使用不同的信息架构（会造成用户困惑）
  • 打破平台用户预期（移动端用户习惯移动端交互模式）
  • 忽略手机/平板的横屏场景
  • 盲目使用通用断点（优先使用内容驱动断点）
  • 忽略桌面端的触摸功能（很多桌面设备也支持触摸）

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