SuperAPI AI 工具集

adapt

设计与创作

查看项目

更新于 10-16 05:47

技能介绍

用途:把现有设计从原始上下文(如桌面网页)适配到新的屏幕尺寸、设备、平台或使用场景(移动、平板、桌面、电视、手表、打印、邮件等),在保持品牌与功能一致的前提下让体验贴合各平台习惯。

主要能力:提供系统化适配流程。一是评估适配挑战,梳理原设计的目标设备、输入方式、连接状况与用户预期,找出放不下、行不通、不合适之处;二是制定适配策略,分移动端(单列、底部导航、44x44px 触控目标、渐进披露、16px 最小字号)、平板(双列、主从视图、同时支持触控与指针)、桌面(多列、常驻侧边导航、悬停与键盘快捷键、拖放、多选)、打印(分页、去导航、黑白、补全 URL 与页码)与邮件(最宽 600px、单列、内联 CSS、表格布局、无悬停态、大号 CTA)等场景;三是实现适配,包括移动 320px-767px、平板 768px-1023px、桌面 1024px+ 或按内容断点,使用 CSS Grid/Flexbox、容器查询、clamp()、媒体查询、响应式图片与懒加载等;四是验证,在真机、横竖屏、多浏览器、多系统、多输入方式、小屏与 4K、弱网下测试。

使用方式:作为设计工作流指南,按评估、规划、实现、验证四步执行。文中给出的是原则与要点,未提供具体命令或代码示例,实际落地需结合项目技术栈。

适用场景:响应式改版、桌面转移动、多端设计与跨平台体验统一。

限制与注意:适配不是等比缩放,需重新思考体验;不要在移动端隐藏核心功能,不要跨上下文改变信息架构,不要盲目套用通用断点,不要忽略移动横屏与桌面触控;模拟器不能替代真机测试。文中未说明收费、价格或平台支持信息。