E6.08.3local loading scope设计
局部加载不应遮蔽整页
别名: 局部转圈 · full-page spinner · 加载遮罩
概念解释
一次加载往往只更新界面里的一块:表格的数据、侧栏的详情、一张卡片里的图。局部加载不应遮蔽整页,指指示器的遮罩和不可点范围必须跟这次更新的范围一致,而不是每次请求都盖住整个窗口。整页转圈把还活着的区域——导航、已填的表、可以取消的按钮——一起关进等待。范围错了,加载指示器就从「这块在忙」变成「整个产品停了」。
机制
人用还能动的部分来判断等待的代价:列表在刷新时若顶栏和筛选仍可改,就可以改条件或离开;整页一锁,等待变成唯一合法动作。遮罩还会抹掉上下文:用户看不见自己刚刚选的行,回来时要重新定向。局部指示器把「忙」钉在对象上,空间归属同时说明了「忙完会变的是什么」。整页指示器把归属拉到应用级,用户会以为导航、草稿、其他标签页也都停了,于是不敢动,或反过来在别的标签里重复提交。范围是加载语言的主语;主语用错,谓语再诚实也指向错误的世界。
边界
首次进入一个还没有任何壳的路由,整页指示器或骨架是合理的,因为这时没有「局部」可保留。模态里的提交若结果决定对话框是否还存在,锁住对话框不等于锁住底下的应用。多个局部同时加载,各自转圈会像圣诞树,应在共同的父级给一次指示,而不是因此升级成整页。安全操作(付款确认后等待网关)有时必须阻止一切其他动作,那是事务锁,不是默认的加载样式。屏幕阅读器若只听到「加载中」却不说哪一块,局部在视觉上成立、在听觉上仍是全局。
怎么落地
- 给每次请求标更新范围:控件、卡片、列表、页面、应用;指示器和禁用只作用在这一范围。
- 保留范围外的导航和取消;正在加载的列表仍应能看见标题和已有筛选。
- 不要用整页半透明遮罩当默认加载样式;默认是对象上的转圈或那一块的骨架。
- 验证:加载某一区块时尝试点导航、改筛选、复制已可见的文字。这些若全部失效,范围已经膨胀成整页。