04 · 设计 · 同一块工位屏
办公室里层次清楚,车间顶灯下只剩标题
UI 设计师按现场光线、距离和设备决定字号与层级,交给前端的是组件和状态,不是一张切不开的长图。新组件能复用就进设计系统,不私自开第三种红。
第一版:细线、灰色辅助数字、不良原因用下拉。显示器上很好看。工人走不近就读不完,手套也打不开下拉。
拿到车间之后:不良数用最大字号和深色底。原因改成大色块。首屏只留完工和不良。三个工位共用这一套组件。
UI 设计师把已经走通的路径落成能在现场读完的界面
交互规定状态和反馈,UI 设计师决定这些反馈在特定光线、距离和设备上是否成立。岗位特点不是风格统一那么简单,而是对使用环境敏感。办公室显示器、车间工位屏、手持终端、车里的手机,密度不能相同。把管理后台的细线表格直接放到三米外的车间屏上,标题还在,数字已经消失。工人会走回纸质工票,系统变成事后补录。
他交给前端的是组件、字号、间距、状态色和不可做的事,不是一张长图。长图无法对应加载中、无权限、数字为零这几种状态。实现和标注不一致,UI 设计师判未完成,不接受「差不多」的走查。差不多在车间意味着看错不良数。
组件要能复用到下一个工位,而不是每张单重新发明
达希的界面最终要进设计系统。UI 设计师如果为一张新单做了第三种红、第二种表格行高,后面的前端会分叉。他的工作包括约束自己:能用已有组件就不用新组件;新组件必须说清它和旧组件的差别是环境需要,不是审美偏好。例如车间屏的数字组件和后台的数字组件可以不同,因为视距不同,但同一种屏上的完工和不良必须用同一个组件,避免三个工位三种读法。
他也参加现场走查,不只在自己的显示器上比对。走查记录写实测:在工位正常站位能否读完首屏、色块在顶灯下是否还分得清、误触面积是否盖住相邻按钮。读不完就改层级,而不是请工人走近一点。
三个工位的屏,从装饰改成同一套
机加工项目的第一版在会议室被夸层次分明。放到车间,铝屑和顶灯让灰色辅助信息消失,不良原因的下拉需要精确点击。工人宁可喊质检过来写纸。UI 设计师在现场站了两个工位的距离,把首屏收成两个数:完工、不良。不良用深底白字,原因改成不超过六个的大色块,其余原因收进「其他」并强制备注。三个工位用同一组件,禁止按班组长口味换主题。
前端实现后,他再次站到同一位置看。有一个工位把不良数又放回了灰色,因为开发复用了后台的统计样式。这被退回。视觉偏好让位于读得清。品牌色如果在这个环境下对比不够,就只留在启动页,不留在关键数字上。
走查记录要留下站位。UI 设计师写明自己离屏多远、顶灯开没开、当时屏幕亮度是不是工人平时的亮度。不写站位的「对比度合格」只在设计软件里成立。下一班如果把屏挂高了二十厘米,字号结论就要重测,不能沿用会议室里的截图。他把重测当成交付的一部分,而不是上线后的美化迭代。
同一组件在后台可以密、在车间必须疏。疏不是把后台页面放大,而是减掉辅助信息。减掉什么,由这一屏要完成的动作决定。动作如果超过两个,他就拆屏,不在一块工位屏上做导航。工人不会在报工中途去找菜单。