SpreadJS V19.2 新特性揭秘:触屏上的选区控制柄
触屏设备上选中一片区域,区域的两个角上会出现圆形的控制柄,按住它拖动,就能把选区拉大或缩小。这套交互在平板上录入数据、在触屏一体机上圈定一段范围时几乎天天在用。可操作它的,偏偏是一根手指——默认只有十几个像素的控制柄,被指腹一盖便只剩一团模糊的色块。按得准不准,全凭运气;想精确地把选区边界停在某一行,常常要反复试探。手套、贴膜、小屏,都会让这枚小小的圆点更难被一次命中。
``控制柄太小,不是观感问题,是实打实的操作门槛。它需要被点中、被按住、再被拖动,每一次都要求手指先准确落在它上面。可它的尺寸过去是固定的,产品内没有调节的入口,也无从为不同设备、不同使用人群做适配。V19.2 为这枚控制柄开了一个可调的口子:它的尺寸,现在可以由页面样式来指定。
手指与像素之间的那点分寸
控制柄的默认大小是十六个像素。这在鼠标世界里绰绰有余——光标可以精确到像素级,点中一个十六像素的小圆易如反掌。换成手指,情况就不同了:成年人指腹的接触直径通常远超十六像素,目标的视觉尺寸与实际可点中的区域存在差距。要让控制柄"好用",往往得让它大到足够被手指明确按到;而在某些需要看清内容的场合,又希望它小些、少遮挡选区。
表格跟一般应用还不一样:一屏里挤着几十上百个差不多大小的格子,触控目标天生细碎,控制柄只是混在其间的一枚。它既要在画面上能被认出,又要在相邻内容之间留下足够容错——手指落偏一点,还落在它上面。格子挨得近时,尺寸略放大一档,命中率的差别立刻能感觉到。
拖选这件事,成败往往落在最后一两下上。想把选区放大到恰好盖住若干行,手指在屏幕上稍有滑动误差,边界就可能多吞一行或少收一行;想修正,又得重新点中那枚圆点。一来一回之间,控制柄的尺寸成了拖选流畅度里最实在的变量,每一次边界微调都要先同它周旋。
产品给出的可调范围由此划定:八到三十二个像素。放大到二十四像素左右,控制柄明显更容易被手指抓住,适合平板盘点、现场录入这类高频拖选的场景;收小到八像素,则让它在精细排版时少占画面,把更多的表内容露出来。尺度开在这两端之间,使用者按自己的设备与人群取一个合适值,而不是被默认值绑死。
对多数平板来说,二十像素上下的控制柄已经相当顺手:比默认值大出一截,手指更容易落点,又不至于在选区内占去太多画面。真正需要更大的场合,往往是屏幕小、操作频率高或者使用环境不稳的设备——收银台、盘点机这类机身晃动、单手操作的场景,三十二像素的上限给了足够冗余。范围顶到多大、留到多小,产品把决定权交了出来,适配的责任也随之落到使用它的人身上。

调法只有一种,也够用
调节的入口只有一处:给控制柄对应的样式类指定一个宽度值,以像素为单位。页面样式表里写上一行,控制柄便按新尺寸绘制。这套设计刻意保持了极简——不提供颜色、形状之类的其他开关,只开放尺寸这一个维度。控制柄的视觉要融入产品皮肤,颜色形状跟着主题走,不该由使用者单独掰扯;它被改动的唯一理由,是"够不够好按",而决定好不好按的只有尺寸。把入口收敛成一行,也避免了样式接口的膨胀。
样式本身也与其他部分的皮肤同源。控制柄、选区框线本就是触屏主题里的一组元素,给控制柄加宽,与整体换肤用的是同一套样式入口,不存在一条只属于它的、绕开主题的设置路径。想全局放大,在统一样式表里写一次即可;想某个嵌入实例单独适配,就在那一片的作用域里覆写。接口少,规则清,维护者拿到就能用,不至于在各种样式来源之间排查。
约定同样直白:未设置该样式、或样式里没有定义宽度时,回落到默认的十六像素。也就是说,没有任何定制的产品行为与过往完全一致,改动过的页面才生效;哪天样式表里的那行被删掉,控制柄也不会停留在某个残留状态,而是干净地回到出厂大小。改动想要生效,改的是宿主页面,不动产品自身;产品升级、主题更换,都不影响这一行定制的存续。
谁最需要它
这枚控制柄的尺寸,对不同场景意义悬殊。移动优先的录入界面是最大的受益者:仓库盘点、门店巡场、设备巡检,操作者持平板站着录入,屏幕时常晃动,控制柄大一点,误触就少一点。长期由特定人群使用的触屏一体机同样适用——若使用者以中老年为主或戴着手套作业,把控制柄调大是近乎免费的可用性提升。
反过来,以浏览与排版为主、触摸操作偶发的界面,可能更希望控制柄退居幕后:调小一些,让选区边界更清楚地露出来,只在真正需要拖选时它才显得重要。同一个产品,部署在不同终端上,需要的控制柄尺寸本来就不该一样。样式定制的意义正在于此——把"用多大的控制柄"这一决定,从产品内部交还到部署它的那些人手里。
对自助查询、展厅演示这类无人值守的设备,这层决定权又添了一层用处。操作它的人与配置它的人常常不是同一拨:来往的人第一次碰到屏幕,不会先想着去调设置,控制柄若小到难以命中,体验就止于这一次接触。由部署方在样式里预先定好一个稳妥的尺寸,设备立起来即可用,也不必担心访客误入设置把界面改乱。控制柄多大,成了设备交付时就能定下的一桩小事。
触屏上不少体验不顺,都能一路追到"目标太小"这一处。选区控制柄从一枚固定的小圆,变成一档可以按需调整的大小,改的只是一个像素级参数,碰到的却是触屏操作里最频繁的那一下点按。控制柄再不起眼,它也是表格与手指每天交接的地方——把这一处调合适,触屏表格才谈得上真正顺手。
葡萄城是专业的软件开发技术和低代码平台提供商,聚焦软件开发技术,以“赋能开发者”为使命,致力于通过表格控件、低代码和BI等各类软件开发工具和服务,一站式满足开发者需求,帮助企业提升开发效率并创新开发模式。
更多推荐




所有评论(0)