拎着激光测距仪跨进电梯那会儿,我顺手拨了下楼道新换的金刚网纱窗。指头往网眼上一戳就摇头——密,太密了。厂家整天吹这玩意儿防割,网孔挤得连风都透不过来,夏天屋里不开空调直接变蒸笼。这跟我们手里那些750×1334的设计稿一个德行,图层堆得花团锦簇,乍看挺唬人,真机上跑一遍,可视区域早被系统UI啃掉一截。
到楼层先别听汇报,领先件事永远是摸真机。会议室桌上那份750×1334源文件,图层码得整整齐齐。我没坐,掏出iPhone 8把亮度拉满,把稿子叠在点亮屏幕的区域上比对。软尺沿屏幕边角走了一圈:顶部状态栏吃掉44pt,底部标签栏咬走49pt,中间那块看似完整的竖屏,留给内容的逻辑像素高度其实只有1241pt。换算到750×1334像素稿里,可视区域就缩成1241×750这块矩形。顶上那44pt,你在稿子里画得再精细,消费者眼里永远是时间、信号、电量盖在上面,改都改不掉。
好多人以为把设计稿撑满1334高度就叫适配,那是没拿真机量过。跟做APP设计的同行聊起app设计尺寸750*1334的可视区域是多少,不少人脱口而出“不就是全屏嘛”——这种自信在实测面前撑不过三秒。
安全框不标清楚,后期测试一准崩
转场检查时我截了手机快照,扔进Sketch,拉了个半透明红色安全框。参照iOS人机指南,y=88到y=1284才是核心内容安全区。设计师凑过来,我指着刘海屏真机上一个被切掉半截的“返回”按钮,又戳了戳底部快压到Home指示条的CALL TO ACTION键,跟他说:“这俩控件,一个被状态栏啃了,一个粘在手势区上,受众拇指戳下去,大概率直接回桌面。”
他还没来得及辩解,边上盯安装进度的师傅叼着烟接了句:“就跟金刚网似的,纱绷得太紧不通风,反过来蚊虫钻得进,你们这按钮贴边太死,手指头根本点不实。”话糙理不糙。
现场改约束,把可点触元素锁死在安全线内
界面安装环节不等人,这种硬伤得当场改。我架起Sketch Mirror投屏,一边说一边调:顶部起始坐标抬到88pt,底部预留34pt系统手势热区,再往外扩16pt不可交互缓冲,等于把所有可点触元素的底线死死锁在y=1284。按钮上移后重出标注稿,横屏状态下也跑了一遍,内容始终缩在安全框内,左右边缘留足Safe Area。
这块很多人会忽略——750×1334分辨率下搞设计尺寸,不把顶部88pt和底部34pt+16pt的禁区标清楚,后期测试一准崩。就像装金刚网纱窗,网孔密度跟开启扇怎么配,得照着铝合金门窗GB/T 8478-2020那套规矩来,太密挡风,太疏防不了蚊虫。界面控件和安全区的配合一个道理,既要防误触,又不能把操作空间堵死。
底部手势区是个硬妥协,早认比晚认强
交付前我抽检了两台全面屏原型机,专摸底部手势区。拇指从屏幕下沿往上滑的时候,能明显感觉到有些界面为了视觉饱满,硬把“立即购买”这类按钮贴在底边上。我把这种界面录了屏,截帧标出34pt热区,在质检笔记里拿红框圈死,旁边手写一行:“此区域只作装饰,禁止承载可点触元素。”
这是行业里不太愿意明说的妥协——设计稿总想把控件推到最边缘好看,但全面屏底部那条手势条就是个物理事实,你必须主动让步。发给客户的交付邮件里,我单列了一条硬条款:底部34pt到50pt为非交互区,只能放底纹、品牌色延伸这类视觉内容。认下这几十像素不是设计自由地,恰恰是防后期投诉的底线。别小看这个让步,早写进标注规范,比上线后使用者骂“按钮点不动”省太多力气。
项目群里我最后敲了一句话:“下回750×1334稿子过来,领先件事不是看配色,先给我把安全框拉出来。”后来我们干脆在需求沟通会当天,带一块贴好安全框透明膜的iPhone样机,让甲方亲手比划一下那些“看得见却点不到”的边缘,把app设计尺寸750*1334的可视区域变成物理共识。维护交付包里从此多塞一张小单子:《设计稿安全区域自查清单》——顶部44pt系统预留,底部非交互缓区50pt,核心可视高度1241pt,对应设计稿像素1241×750。清单往桌上一摊,比事后改十版省事得多,也少挨不少骂。