【交互反馈】设置界面鼠标状态应根据按钮和操作的不同给出不一样的反馈

本贴最后更新于 514 天前,其中的信息可能已经事过境迁

如题,当前设置页面里的选项不需要点到按钮,在很远的地方就会导致按钮的开或者关,很容易导致误触而用户不知情,如视频所示。我个人是建议交互要直观,鼠标放到按钮处点击了再反馈,而不是现在外面蹭蹭就生效了。

经过与 V 姐的沟通及大量对比友商、edge、chrome 浏览器后,得出我想要的方案如下:

  1. 设置界面,对于单个选项是开关按钮的,鼠标移动在这条选项时就应该变成按钮手势提示用户。如设置-编辑器-自适应宽度这类的按钮。image.png

  2. 设置界面,对于单个选项是文字按钮,鼠标移动在这条选项时也是变成按钮手势提示用户。如设置-外观-添加自定义表情-刷新这类的按钮。image.png

    1 和 2 和现有的区别就是变成了按钮提示,能清晰告诉客户这是个按钮,你点了就会有反应的!现在的版本没有这个变化,导致很多人误操作了。

  3. 设置界面,对于单个选项是下拉框或者文字输入框的,鼠标移动到下拉框或者输入框时对应变成按钮或输入状态提示用户。如设置- 外观-语言这样的下拉框;设置-编辑器-虚拟引用关键字包含列表这样的输入框image.pngimage.png

    这里和现有的逻辑没有变化,就是怕 V 姐一起改错了,放出来强调一下!维持原样。

  4. 设置界面,单个选项的触发范围缩小,上下留点间隙。

    image.png

    image.png

新版方案没有改变现有的操作,投票不建议了。

设置选项生效的触发范围(含插件)

单选 公开 已于 2023-12-11 12:00:00 结束 16 票
保持原样,我不想鼠标移动太远
6% 1 票
鼠标放到按钮位置才能触发生效
68% 11 票
吃瓜群众
25% 4 票

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    25400 引用 • 104984 回帖
6 操作
mozhu 在 2023-12-11 00:17:46 更新了该帖
mozhu 在 2023-12-10 23:48:45 更新了该帖
mozhu 在 2023-12-10 23:42:39 更新了该帖
mozhu 在 2023-12-10 23:41:34 更新了该帖 mozhu 在 2023-12-10 23:39:44 更新了该帖 mozhu 在 2023-12-10 23:36:18 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...

推荐标签 标签

  • V2EX

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    16 引用 • 236 回帖 • 264 关注
  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖
  • OneNote
    1 引用 • 3 回帖
  • 招聘

    哪里都缺人,哪里都不缺人。

    188 引用 • 1057 回帖
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 734 关注
  • 反馈

    Communication channel for makers and users.

    121 引用 • 907 回帖 • 272 关注
  • Sym

    Sym 是一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)系统平台。

    下一代的社区系统,为未来而构建

    524 引用 • 4601 回帖 • 708 关注
  • Word
    13 引用 • 41 回帖
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 646 关注
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用
  • Access
    1 引用 • 3 回帖 • 1 关注
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件,打造你得心应手的工具集合。

    7 引用 • 27 回帖
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”,在线用户由 1999 年的 2 人(马化腾和张志东)到现在已经发展到上亿用户了,在线人数超过一亿,是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 1 关注
  • Flutter

    Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作,它正在被越来越多的开发者和组织使用,并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖 • 3 关注
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大,比用其他编程程序编辑的程序效率更高,因为它使用了 Linux/Unix 下的命令。

    125 引用 • 74 回帖
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    315 引用 • 547 回帖 • 1 关注
  • sts
    2 引用 • 2 回帖 • 227 关注
  • API

    应用程序编程接口(Application Programming Interface)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

    79 引用 • 431 回帖 • 2 关注
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    267 引用 • 666 回帖
  • MySQL

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    693 引用 • 537 回帖
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议,它实现了浏览器与服务器之间的全双工通信(full-duplex)。

    48 引用 • 206 回帖 • 291 关注
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划,本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE,直到 1999 年 Sun 买下此公司。Sun 于次年(2000 年)六月将 NetBeans IDE 开源,直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 705 关注
  • Follow
    4 引用 • 12 回帖 • 12 关注
  • RIP

    愿逝者安息!

    8 引用 • 92 回帖 • 400 关注
  • Swagger

    Swagger 是一款非常流行的 API 开发工具,它遵循 OpenAPI Specification(这是一种通用的、和编程语言无关的 API 描述规范)。Swagger 贯穿整个 API 生命周期,如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 1 关注
  • 域名

    域名(Domain Name),简称域名、网域,是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称,用于在数据传输时标识计算机的电子方位(有时也指地理位置)。

    43 引用 • 208 回帖
  • Vim

    Vim 是类 UNIX 系统文本编辑器 Vi 的加强版本,加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较(vimdiff)、语法高亮、全面的帮助系统、本地脚本(Vimscript)和便于选择的可视化模式。

    29 引用 • 66 回帖 • 1 关注