U6.07.1Fisheye achieves focus plus context by local magnification and peripheral compression设计

鱼眼通过局部放大与周边压缩实现焦点加上下文

别名: 鱼眼视图 · fisheye view

概念解释

鱼眼(fisheye)视图把有限画布的放大预算做了再分配:兴趣点附近放大、远离兴趣点的区域渐进压缩,全部内容仍留在视野内。它是焦点加上下文的一族几何实现——用变形而不是分栏换取"局部细看 + 全局在场"的同时成立。

机制

鱼眼的工作原理是连续变化的放大率函数:焦点处放大率最大,随距离衰减到小于一(压缩),整个画面像被"吹起一个泡"。与分块式的焦点加上下文相比,它的优势是无缝:没有边界、没有断崖,对应关系由连续函数保证。代价也从同一个函数里来——压缩区的元素被挤到远小于正常阅读的尺寸,位置关系被非线性扭曲。鱼眼的效果由两个参数主导:放大率(焦点区能多大)与影响范围(变形波及多远),两者相互牵制——焦点越大越清楚,周边牺牲越多。调参就是在"局部可读"与"全局可辨"之间分配预算。

边界

鱼眼的前提是内容的一维或二维有序结构:列表、菜单、地图上有意义的鱼眼变形要求用户能解读变形规律;无结构的高维数据投影成散点后,鱼眼只制造混乱。鱼眼也不适合静态呈现——没有焦点指示的静态鱼眼图是一张变形图而非工具;它的价值绑定在"焦点可动"上。内容元素尺寸差异大时(既有大图元又有小标签),压缩区的小元素会先于结构消失,变形参数需要按最脆弱元素校准。

怎么落地

  • 把鱼眼用在"频繁浏览 + 偶尔细看"的一维结构上(长列表、时间线、菜单),这是它最成熟的用武之地。
  • 暴露两个可调参数(焦点放大率、影响半径),按内容密度调到"焦点可读、全局可辨"。
  • 验证:让用户在鱼眼列表里找指定条目并读出其相邻项;两者都能完成即参数合适;相邻项读不出则压缩过度。

延伸

  • 同组U6.07.2 几何失真破坏位置编码,量值不再可读 · U6.07.3 失真随焦点移动而变化,目标会移位而难以点中 · U6.07.4 失真视图适合导航定位,不适合读数与比较 · U6.07.5 需提供关闭失真、回到常规视图的方式
  • 相邻U6.06.1 焦点加上下文在同一视图内同时保留细节与全局 · U6.06.5 焦点位置必须可由用户移动
  • 站内检索fisheye view · degree of interest · distortion technique

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/U6.07.1