U6.07.1Fisheye achieves focus plus context by local magnification and peripheral compression设计
鱼眼通过局部放大与周边压缩实现焦点加上下文
别名: 鱼眼视图 · fisheye view
概念解释
鱼眼(fisheye)视图把有限画布的放大预算做了再分配:兴趣点附近放大、远离兴趣点的区域渐进压缩,全部内容仍留在视野内。它是焦点加上下文的一族几何实现——用变形而不是分栏换取"局部细看 + 全局在场"的同时成立。
机制
鱼眼的工作原理是连续变化的放大率函数:焦点处放大率最大,随距离衰减到小于一(压缩),整个画面像被"吹起一个泡"。与分块式的焦点加上下文相比,它的优势是无缝:没有边界、没有断崖,对应关系由连续函数保证。代价也从同一个函数里来——压缩区的元素被挤到远小于正常阅读的尺寸,位置关系被非线性扭曲。鱼眼的效果由两个参数主导:放大率(焦点区能多大)与影响范围(变形波及多远),两者相互牵制——焦点越大越清楚,周边牺牲越多。调参就是在"局部可读"与"全局可辨"之间分配预算。
边界
鱼眼的前提是内容的一维或二维有序结构:列表、菜单、地图上有意义的鱼眼变形要求用户能解读变形规律;无结构的高维数据投影成散点后,鱼眼只制造混乱。鱼眼也不适合静态呈现——没有焦点指示的静态鱼眼图是一张变形图而非工具;它的价值绑定在"焦点可动"上。内容元素尺寸差异大时(既有大图元又有小标签),压缩区的小元素会先于结构消失,变形参数需要按最脆弱元素校准。
怎么落地
- 把鱼眼用在"频繁浏览 + 偶尔细看"的一维结构上(长列表、时间线、菜单),这是它最成熟的用武之地。
- 暴露两个可调参数(焦点放大率、影响半径),按内容密度调到"焦点可读、全局可辨"。
- 验证:让用户在鱼眼列表里找指定条目并读出其相邻项;两者都能完成即参数合适;相邻项读不出则压缩过度。