S1.02.2Reading-order-relative icon mirroring设计

表达时间与进度的图标需镜像

别名: 时间图标镜像 · 前后图标 RTL · temporal directionality

概念解释

阅读顺序相关图标镜像(reading-order-relative icon mirroring)指箭头、尖括号或步骤图形把水平空间用作“上一项/下一项”或界面步骤先后时,其朝向应与从右至左界面的阅读和导航序列一致。需要反转的是依附阅读顺序的相对关系,而不是所有涉及时间、历史或进度的符号。

机制

用户通过图标朝向预测状态变化的去向。在采用水平阅读序列组织 previous/next 的界面中,箭头需要指向“下一项”实际出现的一侧。若项目序列与步骤排列已经切换为从右至左,而箭头仍保留另一套映射,视觉提示会与目标位置冲突。标签可以消除部分歧义,但仅图标控件仍依赖这条方向线索;图标、项目顺序与转场应从同一个逻辑 start/end 映射产生。

边界

时间表达并非天然随书写方向改变。步骤尖括号和分页前后关系通常依附界面顺序;播放三角、音视频时间线、钟面以及 undo/redo 则可能受媒体、物理或目标平台惯例支配。面向全球专业用户的软件还可能固定某种操作方向。因此应以目标平台 RTL 指南和本地用户验证为准,不能用“与时间有关”作为镜像规则。

怎么落地

  • 标注每个方向图标的语义:上一项、下一项、展开、返回或物理方向;只自动镜像相对导航类资产。
  • 让上一/下一图标、文字标签、分页顺序和页面转场共同切换,不留下互相矛盾的线索。
  • 对媒体、时钟与专业工具采用目标平台和市场惯例,并在不确定时保留文字标签。
  • 在 RTL 环境中测试连续翻页、步骤推进和历史返回;记录首次点击错误及用户对“下一项在哪里”的寻找时间。

延伸

  • 同组S1.02.1 镜像的对象是布局与方向,不是全部图形 · S1.02.3 具有物理指向的图标不镜像 · S1.02.4 数字与拉丁文片段在行内保持从左至右 · S1.02.5 动效方向与手势方向需同步镜像
  • 相邻I3.02 进度与步骤状态 · G2.04 分页与连续浏览
  • 站内检索temporal icon direction · RTL navigation icons · previous next mirroring

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/S1.02.2