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.
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.