K5.01.3persistent visible focus设计

焦点必须始终清晰可见

别名: 焦点可见 · 焦点指示 · focus indicator · 10-foot focus highlight

概念解释

焦点如果看不出来,方向键就没有参照。人必须在任意时刻、从沙发上的距离,一眼分出哪一张卡片、哪一个按钮、哪一行菜单是当前焦点,而且这个指示不能在动画、转场、自动播放或广告插入时消失。电视上的焦点可见不是无障碍的附加环,而是唯一的「我在哪」通道:没有指针帮忙指着,焦点指示关掉就等于导航关掉。

机制

方向键是相对位移。下一次按键从「现在这个」出发,所以「现在这个」必须在视觉上独占一个可命名的位置。指示弱于内容本身——细描边、略提亮、只改 2% 缩放——在播放中的视频、高饱和海报墙、以及客厅的环境光下,会和未选中项融在一起。人按了键却不知道有没有动,于是连按,焦点被送去别处,再花一轮找回。

可见性还要求时间上连续。页面切换时焦点指示晚于内容出现、列表重排时旧高亮停一帧、加载骨架没有焦点槽,都会造成「空窗」。空窗哪怕几百毫秒,下一次按键已经按在未知对象上。全屏播放时把界面藏掉可以,但只要遥控器被按醒,焦点必须立刻回到一个看得见的控件,不能假定人还记得藏起来之前在哪。

焦点指示必须和选中、播放中、推荐角标分开编码。同一套描边既表示「在这」又表示「已加入片单」,人无法判断确认键会播放还是会取消。

边界

纯语音操作、或遥控器上的触控板已经把光标画在屏幕上时,页面级焦点指示可以减弱,但确认键仍要作用在某个对象上,那个对象仍需可辨。极暗的电影模式会压低界面亮度,焦点如果只靠亮度差就会先于内容一起消失,需要改用形状或运动,而不是再加一层更亮的白边把画面冲掉。屏幕阅读器用户不依赖这层视觉指示,但同房间里看着屏幕的人仍然依赖。焦点在屏幕外的溢出项上(焦点跟随滚出了视口)等于不可见——项还在焦点序列里,人已经看不见它。

怎么落地

  • 用与内容解耦的指示:明显放大、独立色的外框、或稳定的位移动画,不要只靠 1px 描边或微弱亮度差。
  • 让焦点指示在转场、列表刷新和从播放态被唤醒时零延迟出现;内容可以后到,焦点槽不能空。
  • 把「当前焦点」「已选中」「正在播放」分成三套视觉,确认键的后果才能被预读。
  • 验证:坐在实际观看距离,让另一个人随机按方向键。观察者必须能在每一次按键后不靠猜说出焦点在哪;说不出的每一帧都是指示失败。再开一版高饱和海报墙和一版全屏视频上的控件条,两版都要过。

延伸

  • 同组K5.01.1 没有指针,只有当前焦点 · K5.01.2 焦点移动路径需符合空间直觉
  • 相邻D1.04 焦点指示环 · J2.06 焦点可见性 · K5.03 十英尺可读性
  • 站内检索focus indicator · visible focus · 10-foot UI

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/K5.01.3