移动端设计怎么做适配?
UI/UX设计第 5 / 12 题答题框架
参考思路:逻辑像素与倍图→安全区(刘海/手势条)→栅格与断点策略→ iOS/Android 平台差异。展示你处理过的极端机型案例。
五个经典回答示范
回答一 · 校招应届版
适配三个基础:逻辑像素与倍图——设计用逻辑像素,切图出 2x/3x;安全区——刘海、手势条、状态栏避让,内容区用系统变量;栅格——移动端常用 4 的倍数间距系统、列栅格(如 12 列减边距)用于内容对齐。断点上 iOS/Android 平台规范差异也要处理,比如导航位置。
回答二 · 1-3年经验版
我讲踩过的坑:小屏适配只按 iPhone 标准做,安卓小板机型按钮挤成一团——之后把最小支持宽度定 320dp,用约束布局让间距弹性伸缩;倍图遗漏导致老安卓机图标模糊;深色模式只适配页面没适配图片——占位图在深色下刺眼。我的 checklist 现在包含:极端机型走查、字号缩放测试(大字号模式)、横竖屏策略。
回答三 · 资深版
资深视角把适配当系统性工程:设计侧建立间距与字阶的 token 阶梯,全组件弹性声明最小宽度;开发侧一套代码多端——断点策略与容器查询逐步替代媒体查询;流程上真机矩阵按用户分布数据裁剪——Top 机型必测加特殊比例抽样;无障碍字号适配(Dynamic Type)不是可选而是基础要求。适配的本质是承认你控制不了设备,只能控制系统。
回答四 · 追问应对
追问『设计稿只给一种宽度怎么处理』:标注弹性规则——哪些拉伸哪些固定,间距用比例或断点说明;『平板要不要单独设计』:看行为数据,若平板使用场景独立(阅读为主)做布局级适配,否则拉伸加双栏即可;『验收怎么验』:真机云走查加截图 diff 覆盖关键页面。
回答五 · 反面示范
『适配就是把设计稿等比缩放,开发自己拉一拉就行,实在不行让用户转个屏幕,小屏用户习惯就好了。』——点评:等比缩放在小屏毁掉可读性、大屏浪费空间;让用户迁就是体验失败的定义。对安全区、倍图、弹性系统无认知。
怎么练这道题
- 打开 模拟练习,选择「UI/UX设计」方向,限时 3 分钟作答本题。
- 对照上方答题框架,逐点检查:哪些要素没覆盖、哪里表达啰嗦。
- 用自己项目的真实经历替换框架中的占位内容,重讲一遍并录音回听。
这类题在真实面试中常被追问细节,
建议进入限时模式练一遍。
「UI/UX设计」方向其他高频题
▸ 设计走查怎么做?