首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

前端如何提高用户体验:增强可点击区域的大小

作者:Ahmad Shadded 译者:前端小智 来源:css-tricks 你是否曾经试着点击或点击一个元素(例如:按钮、链接),并且注意到只有单击该元素的特定区域,它才会响应?...费兹法则 费兹法则(Fitts law)是一个人机互动以及人体工程学中人类活动的模型;它预测了快速移动到目标区域所需的时间是目标区域的距离和目标区域大小的函数。...在下面的图中,我模拟了两个按钮的不同情况。在左侧,按钮更小,更远,用户需要更多的时间与它互动。在右侧,按钮大小更大,更接近于它的同级输入元素,这将使交互更容易、更快。 ?...这样,问题得以解决,整个复选框或单选按钮都是可单击的,如下图所 ? 侧边栏 对于带有类别的页面,有时我会注意到列表链接没有扩展到其父页面的整个宽度。 也就是说,可点击区域仅在文本上,如下图所示: ?...真实案例 在最近的Twitter更新中,导航设计在可点击区域大小方面存在问题。 最初,它仅与文本相关,如下面的屏幕截图所示,但他们在收到反馈后将其修复。 ?

4.8K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    win10 uwp 简单MasterDetail UWP 导航List点击后退按钮页面更改大小修改显示修改我代码源码左右的列表和内容的相互操作

    开始的窗口是很大,可以两栏,其中左边显示列表,右边因为开始没有点击列表就显示图片,点击列表显示内容,就是下面的图。 ? ?...Frame,在ViewModel,把Frame叫Detail 因为点击所以我们的Frame有内容 HasFrame=true; 后退按钮 在App写 Windows.UI.Core.SystemNavigationManager.GetForCurrentView...,可以去下我源代码https://github.com/lindexi/UWP 然后在按后退按钮,就把我们的hasFrame=false; 大概我们就把一个页面做好,Detail就显示我们点击传的str...我们需要手机按后退也是 Windows.Phone.UI.Input.HardwareButtons.BackPressed 页面更改大小 我们获得页面大小修改,可以简单 <VisualStateManager.VisualStateGroups...: Window.Current.Bounds.Width放在函数,就可以得到我们的窗口大小。

    1.9K00

    iOS OC swift 自定义 popover 泡泡

    popover.gif 灰色区域 底层视图 棕色 popover 泡泡不能超出的区域,popover 是不能超出屏幕或者离屏幕太近,否则效果不好。...棕色区域是可以设置的 红色 底层箭头视图的边框 白色 底层箭头视图的背景颜色 蓝色 自定义内容区域,在此区域(contentView)可以添加希望展示的内容 加号按钮 模拟了 sourceView...可以看到当 sourceView(加号按钮) 在不同地方的时候,popover 自动更改方向、调整箭头方向、位置以适应不同的 sourceView 类说明 open class KKPopover: UIView...Bool /// 是否点击空白地方自动消失 /// 设置为 true 的时候,空白地方可以处理触摸事件 /// 当 touchThrough 为 true 的时候,此字段不起作用 arrowDirection...防止内容覆盖圆角 targetSize: CGSize /// 需要展示内容的大小,此字段一定需要重新设置 /// 并且宽高大小加上 minScreenEdg contentInset 不能大于屏幕宽高

    2.7K70

    数据透视表双击出的明细表很难用?

    2、复制数据到生成的明细表后面时,怎么筛选按钮不起作用?...一是像普通表那样把筛选按钮点掉,如下图所示(如果你发现筛选按钮不起作用,那可能是你目前选中的单元格或区域不在明细表的范围内): 还有一个方法是,在表格菜单里直接取消勾选“筛选”项。...如下图所示: 二、关于复制其他数据到该表 一般情况下,如果你是直接复制数据然后粘贴到紧接着该表的右侧(不隔空列)或下方(不隔空行),超级表的范围会自动扩展,筛选按钮也可正常使用。...,非常简单,在表格菜单中单击“转换为区域”按钮即可,如下图所示: 在线M函数快查及系列文章链接(建议复制到浏览器中打开后收藏使用): https://app.powerbi.com/view?...eyJrIjoiZDVhZDBlMTYtNDkzNC00YWFjLWFhMmMtMmI3NTk2Y2ZhMzc3IiwidCI6ImUxMTAyMjkxLTNkYzUtNDA1OC1iMDc3LWQ0YzU4YWJkMWRkOCIsImMiOjEwfQ%3D%3D (注意,因为公众号文章是不能直接通过点击的方式跳转到外部链接的

    2.4K30

    Matlab系列之GUI设计基础

    在使用控件时,只需要直接把对应的控件拖到工作区,然后调整控件大小;或者直接点击对应控件,然后出现十字光标,在工作区手动划出一个大小的该控件。...Enable 属性的值和按钮点击的类型共同确定响应。 启用值 响应左键点击 响应右键点击 'on' 控件的 Callback 函数执行。 执行图形的 WindowButtonDownFcn 回调。...'togglebutton' 可具有两种状态(未按下和按下)的按钮。每次点击切换按钮时,它的状态都会发生变化。 'checkbox' 可具有两种状态(选中或取消选中)的复选框。...当用户在其上点击并释放鼠标按钮时,状态发生变化。 'radiobutton' 可具有两种状态(选择和取消选择)的按钮。单选按钮在一组相关的单选按钮中有意安排为互斥。 'edit' 可编辑的文本字段。...•附注: 如果控件的父级是图形,则 Position 值是相对于图形的可绘制区域的值。图形的可绘制区域是窗口边框内部的区域,不包括菜单栏和工具栏。

    5.9K10

    Android画中画(PIP)模式使用

    ——《微卡智享》 本文长度为1679字,预计阅读6分钟 前言 现在手机端各大视频APP基本都有悬浮窗视频模式,我以前文章《Android制作带悬浮窗控制的录屏程序Demo》《Android实现可移动的悬浮窗...正常模式 画中画模式 按钮启动画中画 onCreate事件中加入按钮事件,点击按钮启动画中画模式,这样一个简单的画中画就实现了,确实要比原来做悬浮窗简单多了。...进入画中画模式中加入了actions的按钮,点击后返回到正常模式,然后显示的比例我们由默认的横屏改为竖屏了。 setActions设置控件,基本就是按钮的操作控制。...对于视频内容,请将其设置保留为 true;对于非视频内容,请将其更改为 false。...所以上图中加入了判断SDK版本设置的参数。 修改参数后的效果 下面两张图是修改了参数后的效果,可以看到原来的横屏改为竖屏了,并且点击后下方还加入了一个按钮。

    2.5K10

    Lagom WHMCS 客户端主题的电子邮件模板1.1.2

    附加版本 下面的安装步骤已为已经使用Lagom WHMCS 客户端主题的客户准备 (打开新窗口)在他们的 WHMCS 服务器上。如果您没有安装此产品,则此操作将不起作用。 上传文件 提取下载的文件。...选择您想要管理的扩展并单击“管理”按钮。 激活扩展 登录到您服务器上的 WHMCS 管理区域。 转到“附加组件”,然后单击 WHMCS 管理区域导航菜单中的“RS 主题”。 点击特定主题的“管理”。...单击“Lagom WHMCS 客户端主题的电子邮件模板”扩展旁边的“管理”按钮。 然后按“激活” 。 配置 标题 进入“设置”页面,点击“常规”来配置电子邮件模板标题文本。...替换文件后,转到Addons -> RSThemes -> Extensions -> Email Template (Manage)WHMCS 管理面板并单击“保存更改”按钮。...打开footer.tpl要修改的样式文件夹中的文件。 编辑代码: 找到并删除包含链接代码的以下部分。保存更改。

    14710

    如何修复iPhone绿屏问题?尝试这些解决方案

    方法二、更改iPhone显示设置 iPhone绿屏问题通常是由错误的屏幕选项和显示设置引起的。因此你可以尝试更改iPhone显示设置。...此外,你还可以通过关闭色彩滤镜功能来修复iPhone绿屏问题:进入设置 - 辅助功能 - 显示与文字大小 - 下拉屏幕找到色彩滤镜选项并将其关闭。...choose-repair-mode.jpg 第2步:将你的iPhone连接到电脑并等待程序识别设备,点击“下载”获取与设备匹配的固件包。...download-firmware.jpg 第3步:固件下载完成后,点击“立即修复”开始修复iPhone绿屏问题。...fix-now.jpg 如果以上方法都不起作用,那么极有可能是硬件出现问题,建议你联系苹果技术支持或前往苹果售后服务中心进行维修。

    3.2K00

    Human Interface Guidelines —— Popovers

    Popover Popover是一个短暂的视图,当您点击某个控件或某个区域时,它会出现在屏幕上的其他内容上方。 通常,Popover包含指向其出现位置的箭头。...Popover分为非模态或模态的: ·通过点击屏幕的另一部分或 popover上的按钮,可以解除非模态popover 。  ·点击弹出窗口上的取消或其他按钮即可解除模态popover。...·只能使用关闭按钮进行确认和指导 “退出”与“完成”均为关闭按钮,如果能够清晰的进行指示(如离开时是否保存保存更改),那就使用关闭按钮。一般来说,popover在不被需要时会自动关闭。...在大多数情况下,当有人在popover之外区域点击或选择popover中的项目后,popover应该关闭。...·在更改popover的大小时采用平滑过渡 一些popover提供了相同信息的简明和扩展视图。如果您要调整popover的大小,请用动画过渡,以免让用户误以为产生了新的popover。

    1.3K110

    Chrome 浏览器必知必会的小技巧

    这其中的一些小技巧在低版本中是没有的,所以建议大家用最新版的,目前最新版是62,版本很重要,如果发现有些技巧不起作用,请先查看浏览器的版本。...+EnterCtrl+Return 区域截屏 选取页面中的一部分,保存为图片 1、打开开发者工具 使用 快捷键 F12 (Windows) 或 Cmd+Opt+I (Mac) ?...2、选择左上角的元素选择按钮,图标颜色变为蓝色即表示选中了 ?...3、Windows 下按住 Ctrl,Mac 就按住 Command,然后点击鼠标左键在页面选择区域即可,松开鼠标后,截图自动下载。 4、图片自动下载好后,点击图片后面的箭头,可以在文件夹中显示 ?...1、颜色选择区域。 2、吸管。 3、复制到剪贴板。将显示值复制到剪贴板。 4、显示值。颜色的RGBA,HSLA或十六进制表示。 5、调色板。单击其中一个方块将颜色更改为该方块。 6、色相。

    1.5K80

    chrome浏览器 必知必会的小技巧

    这其中的一些小技巧在低版本中是没有的,所以建议大家用最新版的,目前最新版是62,版本很重要,如果发现有些技巧不起作用,请先查看浏览器的版本。...控制台 window Mac 聚焦到控制台 Ctrl+` Ctrl+` 清除控制台 Ctrl+L Cmd+K、Opt+L 多行输入 Shift+Enter Ctrl+Return 区域截屏 选取页面中的一部分...2、选择左上角的元素选择按钮,图标颜色变为蓝色即表示选中了 ?...3、Windows 下按住 Ctrl,Mac 就按住 Command,然后点击鼠标左键在页面选择区域即可,松开鼠标后,截图自动下载。...1、颜色选择区域。 2、吸管。 3、复制到剪贴板。将显示值复制到剪贴板。 4、显示值。颜色的RGBA,HSLA或十六进制表示。 5、调色板。单击其中一个方块将颜色更改为该方块。

    91830

    最新iOS设计规范四|3大界面要素:视图(Views)

    七、浮层/弹出视图(Popovers) 浮层通常是当用户点击屏幕上某个内容的控制点或区域时,在其上方出现的瞬态视图。通常浮层上会有个指向其出现位置的箭头。浮层分为非模态的和模态的。...当用户点击浮层之外的区域或浮层中的关闭/取消按钮时,浮层应该关闭。如果可以进行多次选择,则浮层还是要保持打开状态,直到用户有意识地对它进行关闭。 自动关闭非模式弹出窗口时,请务必保存当前任务。...通过点击屏幕非浮层区域部分,很容易误点而关闭非模态弹出窗口。仅当用户点击取消按钮时才取消当前的任务。 在屏幕适当的位置显示浮层。浮层的箭头应尽可能直接指向触发它的元素。...当需要改变浮层的大小时,提供一个平滑过渡的方案。一些浮层对于相同信息提供了精简视图和扩展视图两种展示方式。如果你调整浮层的大小,请为更改设置一些动画,以避免用户产生新浮层替换旧浮层的意识。...尽管辅助窗格的内容可以更改,但它应始终与其他列中可清楚识别的选择相对应。这种选择有助于人们理解列之间的关系并保持自己的方向。 如果合适,允许人们在列之间拖放内容。

    8.5K31

    微信小程序那点事儿(必看&踩坑&实用&解决BUG)------持续更新(2)

    点击按钮 获取 手机地理位置的系统开关 来判断是否提示用户打开GPS 如果在真机调试的情况下 手动打开关闭手机中的位置开关 点击按钮得到的结果并不会根据手机的状态进行更新 则不能达到你想要的效果,此时可以直接预览...打开调试 进行测试即可 onShareAppMessage 分享 小程序中可以借用这个原生方法实现将内容分享到微信群或者个人的功能 该方法监听了用户点击页面内转发按钮(button 组件 open-type...=“share”)或右上角菜单“转发”按钮的行为,并自定义转发内容 字段 说明 默认值 title 转发标题 当前小程序名称 path 转发路径 当前页面 path ,必须是以 / 开头的完整路径 imageUrl...把当前画布指定区域的内容导出生成指定大小的图片。...,敬请期待,现在有问题的小伙伴请在此评论哈~ setNavigationBarColor 不起作用?

    32910

    PS上的开源Stable Diffusion插件来了:一键AI脑补,即装即用

    加载插件后,不要选择或更改任何内容。只需点击「生成」按钮。 3. 如果看到一只猫的图像被加载到画布上,那么一切都已正确设置。 txt2Img 1....只需确保选择的比例等于生成的图像的大小。 2. 编写 prompt 并单击「生成」。 3. 结果将调整大小以适合所选区域。但别担心,图像将作为智能对象加载到 PhotoShop 中。...在插件 UI 中将模式更改为「img2img」。 3. 单击「设置初始映像」按钮。如果图像没有更改为所选图层。点击多次(作者正在解决这个问题)。 4. 点击生成。 inpaint 1....创建一个新图层,并在选定区域内绘制白色。请注意,任何白色区域都将通过 Stable Diffusion 重新生成。 4. 单击「Init Inpaint Mask」按钮。     a....点击后插件会生成一个合适的黑白遮罩,将其设置为 Stable Diffusion 要使用的遮罩。     c. 它还会在所选区域下创建画布快照,并将此快照用作初始图像。 5. 单击「生成」按钮。

    3.3K60

    Stable Diffusion WebUI详细使用指南

    例如,将宽度设置为512,高度设置为768,以获得一个2:3的纵向图像。 批处理大小:每次生成的图像数量。在测试提示时,您至少想生成几个图像,因为每个图像都会有所不同。最后,点击生成按钮。...批次计数:运行图像生成管道的次数。 批次大小:每次运行管道生成的图像数量。生成的图像总数等于批次计数乘以批次大小。通常您会更改批次大小,因为这样更快。只有在遇到内存问题时才会更改批次计数。...在下面的实验中,变化强度允许你在两个种子之间产生图像内容的过渡。当变化强度从0增加到1时,女孩的姿势和背景逐渐改变。 即使使用相同的种子,如果更改图像大小,图像也会发生显著变化。...步骤4:将批处理大小设置为4。一次多生成几张图可以挑选出你更满意的图片。 步骤5:为新图像编写提示。我将使用以下提示: a girl, sea。 步骤6:点击生成按钮生成图像。调整去噪强度并重复。...点击从URL安装选项卡。 在扩展git仓库的URL字段中输入扩展的URL。 等待安装完成的确认消息。 重新启动AUTOMATIC1111。(提示:不要使用“应用并重启”按钮。有时不起作用。

    1.8K20

    Stable Diffusion WebUI详细使用指南

    例如,将宽度设置为512,高度设置为768,以获得一个2:3的纵向图像。 批处理大小:每次生成的图像数量。在测试提示时,您至少想生成几个图像,因为每个图像都会有所不同。最后,点击生成按钮。...批次计数:运行图像生成管道的次数。 批次大小:每次运行管道生成的图像数量。生成的图像总数等于批次计数乘以批次大小。通常您会更改批次大小,因为这样更快。只有在遇到内存问题时才会更改批次计数。...image-20240411004045660 即使使用相同的种子,如果更改图像大小,图像也会发生显著变化。 还是这个seed:1721867153。...步骤4:将批处理大小设置为4。一次多生成几张图可以挑选出你更满意的图片。 步骤5:为新图像编写提示。我将使用以下提示: a girl, sea。 步骤6:点击生成按钮生成图像。调整去噪强度并重复。...点击从URL安装选项卡。 在扩展git仓库的URL字段中输入扩展的URL。 等待安装完成的确认消息。 重新启动AUTOMATIC1111。(提示:不要使用“应用并重启”按钮。有时不起作用。

    53910

    【现代 CSS】标准滚动条控制规范

    滑道是拇指可以移动的区域。轨迹表示整个滚动距离。滑块表示可滚动区域内的当前位置。滚动时,它会在轨道内移动。拇指通常也是可拖动的。 不过,滚动条可以有多个部分,而不仅仅是滑块和滑道。...例如,滚动条可以包含一个或多个用于递增或递减滚动偏移的按钮。滚动条的组成部分由底层操作系统决定。...默认情况下,这些按钮不会显示,只有当您主动滚动时才会显示。为了让内容保持可见状态,它们通常采用半透明形式,但这由操作系统来决定。在与它们互动时,它们的大小也可能有所变化。.../zh-CN/docs/Web/CSS/scrollbar-color 借助 scrollbar-color 属性,您可以更改滚动条的配色方案。...initial; scrollbar-width: revert; scrollbar-width: revert-layer; scrollbar-width: unset; 使用叠加滚动条时,仅当你主动滚动可滚动区域时

    34310

    CSS 解决z-index上层元素遮挡下层元素点击事件问题

    模态对话框,希望在对话框上执行点击操作时,不会点击到被对话框遮挡的页面的按钮,同时,也希望可以点击对话框区域外的其它页面元素 ?...解决方案 为被遮挡元素上层使用z-index属性的元素添加以下样式: pointer-events: none; 这样点击事件就能穿透上层元素,可点击到被遮挡元素,但是此时,上层元素无法响应点击事件 然后为被遮挡元素添加以下样式...el-dialog> // 修改dialog body样式//该样式不能放置.case-dialog-div下,否则 全屏 功能不起作用....case-dialog-class { position: fixed; pointer-events: auto; // dialog本身区域不让“穿透点击” display...dialog区域外的html元素 } ...略 }

    3.7K10
    领券