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

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

举个例子,WCAG准则2.3.2中规定:网页不包含任何闪光超过3次/秒的内容。 用户应该能够使用台式机/笔记本电脑的键盘以及移动设备或平板电脑的触摸屏来操作输入。...不要在移动设备屏幕上将按钮设置得太小,以免按下正确的按钮。 触摸目标的最小尺寸最好至少为44 x 44像素。...把鼠标悬停在按钮,光标仍然是一个指针,这很好。不过,也可以选择文本和悬停,有一个文本光标!如果使用了正确的元素,就不会发生这种情况。 ?...复选框和单选按钮 当存在复选框或单选按钮元素希望可以单击它或关联的标签来激活/禁用它。 ? 从用户体验的角度来看,这是难以访问和糟糕的。...这样,问题得以解决,整个复选框或单选按钮都是可单击的,如下图所 ? 侧边 对于带有类别的页面,有时我会注意到列表链接没有扩展到其父页面的整个宽度。 也就是说,可点击区域仅在文本,如下图所示: ?

4.7K20

❤️使用 HTML、CSS 和 JS 创建响应式可过滤的游戏+工具展示页面 ❤️

有一个导航,其中对所有类别进行了排序。单击这些类别中的任何一个。然后可以看到该类别中的所有作品,而隐藏其余作品。结果,用户可以轻松地找到他选择的图像。 首先在网页创建了一个导航。...导航中的分类中,你可以看到与您点击的分类相关的作品。同样,当您单击另一个类别,该类别的作品将被看到,其余的将被隐藏。让它完全响应,以便它可以在所有设备使用。...第 2 步:为类别创建导航 现在已经使用下面的 HTML 和 CSS 代码创建了一个导航。正如我之前所说,有一个导航,所有类别都在其中进行了排序。在这里,使用了 5 个主题和 15 个图片。...在这里,我们为移动设备和标签添加了单独的信息。...因为我们知道 JavaScript 中没有任何 ID 或类函数可以直接使用。

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

Windows快捷键速查

Alt + Shift + 箭头键 当组或磁贴的焦点放在“开始”菜单,可将其朝指定方向移动。...Ctrl + Shift + 箭头键 当磁贴的焦点放在“开始”菜单,将其移到另一个磁贴即可创建一个文件夹。 Ctrl + 箭头键 打开“开始”菜单后调整其大小。...任务 快捷键 说明 Shift + 单击任务按钮 打开应用或快速打开另一个应用实例。 Ctrl + Shift + 单击任务按钮 以管理员身份打开应用。...Shift + 右键单击任务按钮 显示应用的窗口菜单。 Shift + 右键单击分组任务按钮 显示组的窗口菜单。 Ctrl + 单击分组任务按钮 循环浏览组的窗口。 3....Ctrl + 向下键 输出历史记录中下移一行。 Ctrl + Home(历史记录导航) 如果命令行为空,则将视区移动到缓冲区顶部。否则,请删除命令行中光标左侧的所有字符。

4.2K20

Macbook Pro 2017 13-inch

避免仅在触控中提供功能。并非所有设备都有触控,如果他们愿意,人们可以禁用触控中的应用程序控件。始终为人们提供使用键盘或触控板执行任务的方法。 全屏环境中,考虑触控中显示相关控件。...全屏模式下,应用程序通常会隐藏屏幕控件并仅在人们通过例如将指针移动到屏幕顶部来调用它们才显示它们。如果您支持全屏,您可以使用触控让人们持续访问重要控件,而不会分散他们对全屏体验的注意力。...避免将触控用于与众所周知的键盘快捷键相关的任务。触控不应包含用于查找、全选、取消选择、复制、剪切、粘贴、撤消、重做、新建、保存、关闭、打印和退出等任务的控件。...它也不应该包含复制基于键的导航的控件,例如向上翻页和向下翻页。 准确反映出现在触控和主屏幕的控件状态。例如,如果一个按钮主屏幕不可用,则它不应该在触控中可用。...响应用户交互,避免 Touch Bar 和主屏幕中显示相同的 UI。例如,当人们邮件的新消息窗口中单击屏幕的表情符号和符号按钮,他们希望字符查看器主屏幕打开,而不是触控中打开。

1.1K40

Windows10中的键盘快捷方式

+ 箭头键 当组或磁贴的焦点放在“开始”菜单,可将其朝指定方向移动 Ctrl + Shift + 箭头键 当磁贴的焦点放在“开始”菜单,将其移到另一个磁贴即可创建一个文件夹 Ctrl + 箭头键...) 将光标移动到缓冲区结尾处 Ctrl + 向上键 输出历史记录中上移一行 Ctrl + 向下键 输出历史记录中下移一行 Ctrl + Home(历史记录导航) 如果命令行为空,则将视区移动到缓冲区顶部...Ctrl + End(历史记录导航) 如果命令行为空,则将视区移动到命令行。否则,请删除命令行中光标右侧的所有字符。...任务键盘快捷方式 按键 操作 Shift + 单击任务按钮 打开应用或快速打开另一个应用实例 Ctrl + Shift + 单击任务按钮 以管理员身份打开应用 Shift + 右键单击任务按钮...显示应用的窗口菜单 Shift + 右键单击分组任务按钮 显示组窗口菜单 Ctrl + 单击分组任务按钮 循环浏览组窗口 本文删改自豆末的WINDOWS中的键盘快捷方式 相关

4.5K20

武汉移动网站优化的五大要点

减少广告,桌面设备,过多的广告会直接导致负面的用户体验,它在移动设备更糟糕,并且会让用户感到沮丧。   ...移动设备的广告点击率远远高于桌面设备的原因不是因为移动用户喜欢广告,而是因为他们经常错误点击广告。   ...相关代码还需要编程以指示该URL适合桌面和移动设备的不同搜索引擎,因此搜索引擎将能够抓取并索引移动设备的内容。   独立和响应式站点都可以移动设备实现特殊的用户体验要求,但是它们都有利有弊。...3.修剪不重要的内容和功能   顶部的两个或三个导航对于桌面中文网站设计非常普遍,但在手机上显然是不合适的。通常的做法是移动版本减少导航系统,包括顶部导航,面包屑和侧。...如果完全保留主导航,则在用户单击必须折叠并展开。如果它们出现,最多五个或六个顶部导航。汉堡菜单是一种流行且令人愉悦的移动浏览体验。

1.5K00

Adobe国际认证教程指南|Adobe Premiere Pro 新建项目

3.左侧中,导航到您的媒体存储位置。(您的媒体会显示导入桌面上。)4.选择要添加到项目中的视频剪辑和其他媒体资源。选择的媒体会汇集到窗口底部的选择托盘中。...必要,您可以通过右键单击托盘中的资源来移除资源或者清空整个托盘。您可以单个剪辑悬停划动以进行查看。切换到列表视图即可查看有关媒体的更多信息。...导入选项如果要从临时位置(例如相机存储卡或可移动驱动器)复制媒体文件,请将复制媒体切换为打开状态。Premiere Pro 在后台复制媒体,您可以开始编辑。...如果已关闭新建序列,则新媒体将会添加到项目面板中。其他导入选项对于特殊的导入工作流程,Premiere Pro 设有几个其他导入选项:从菜单中选择文件 > 导入。...“编辑”模式下,您可以使用媒体浏览器导航到系统的位置并添加新媒体。项目面板双击以打开 Windows 或 macOS Finder 窗口。

65530

移动端页面设计,常见的9个策略有哪些?

导航,按钮以及您网站上的任何链接都应该可以轻松单击,链接太小可能会使访问者感到沮丧,如果多个链接太小或距离太近,访问者可能会点击他们不想要的链接。...3、保持简单 进行移动Web设计时,务必将重点放在简单性,太多的设计师试图对移动网站做太多事情,使其在此过程中无法使用。 首先,将大量高级功能添加到您的移动网站之前,先关注可用性。...确保您的访问者必要可以轻松进行切换,方法是您的站点找到一个易于查找的按钮,使他们可以两者之间进行切换。...8、加快速度 增加移动网站的加载时间,尽管台式机也是如此,但重要的是要确保您的网站在移动设备快速加载。您网站上的每个元素都应在几秒钟内加载,以便访问者能够快速您的网站上找到所需内容。...移动设备用户访问您的网站时经常出门在外,因此他们对于需要较长时间加载的网站的耐心甚至更低。 9、信息配置 制作一个出色的移动网站,您应该记住的最后一个提示是,您应该始终优先考虑最重要的信息。

66120

windows10切换快捷键_Word快捷键大全

大家好,又见面了,是你们的朋友全栈君。...任务快捷键 快捷键 功能 Shift + 单击某个任务按钮 打开某个应用,或快速打开应用的另一个实例 Ctrl + Shift + 单击某个任务按钮 以管理员身份打开应用 Shift + 右键单击某个任务按钮...) Caps Lock + Ctrl + 向右键 转到下一个同级(仅当应用提供结构导航) Caps Lock + Ctrl + 向左键 转到上一个同级(仅当应用提供结构导航) Caps Lock +...Ctrl + 向下键 转到第一个子项(仅当应用提供结构导航) Caps Lock + N 移动到主陆标 扫描模式键盘命令 快捷键 功能 向上键和向下键 移动到应用或网页中的下一行或一行文本 向右键和向左键...“消息”窗格 Win + 4 打开或关闭中的“内容”窗格 Win + F6 、顶和底之间移动键盘焦点 Win + Shift + F6 以相反方向、顶和底之间移动键盘焦点 Win

5.3K10

Win10 快捷键大全(史上最全)「建议收藏」

那么今天为大家讲解他推出的常用快捷键。希望能够帮到大家。...将光标移动到缓冲区的末尾 Ctrl + 向上键 输出历史记录中向上移动一行 Ctrl + 向下键 输出历史记录中向下移动一行 Ctrl + Home(历史记录导航) 如果命令行为空,则将视口移动到缓冲区顶部...9) 移动到第 n 个选项卡 Tab 选项向前移动 Shift + Tab 选项向后移动 Alt + 带下划线的字母 执行与该字母一起使用的命令(或选择相应的选项) 空格键 如果活动选项是复选框...+ 右键单击某个任务按钮 显示该应用的窗口菜单 Shift + 右键单击某个已分组的任务按钮 显示该组的窗口菜单 Ctrl + 单击某个已分组的任务按钮 循环切换该组的窗口 设置键盘快捷方式 按此键...和地图)中,当你将鼠标指针悬停在某个按钮,工具提示中就会显示快捷方式。

15.8K30

操作系统:提升电脑开机速度的15个小技巧

今天小编给大家分享提升电脑开机速度的15个小技巧,希望对大家能有所帮助!...2、优化视觉效果,关闭“视觉效果”中不需要的效果 右键单击的电脑”,点击“属性”,点击“高级”,“性能”一中,点击“设置”,点击“视觉效果”,在这里把所有特殊的外观设置都关闭掉,我们就可以省下“...5、关闭系统还原 右键单击的电脑”,点击“属性”,会弹出来系统属性对话框,点击“系统还原”,“在所有驱动器上关闭系统还原”选项打勾。...6、关闭系统自动更新 右键单击的电脑”--“属性”--“自动更新”,“通知设置”一选择“关闭自动更新。选出“将手动更新计算机”一项。...14、的文档搬家 将“的文档”移动到系统盘以外的其他分区。先在系统盘以外的其他分区建立一个“的文档”文件夹,然后桌面右击“的文档”,点击属性、移动移动到刚才新建的目录。

1K40

如何制作自己的原生 JavaScript 路由

ID,第二个是“标签标题”文本,第三个参数是你希望地址中要现实的路径。...结果:现在,每次我们单击按钮,URL 实际都会在浏览器的地址中更改。内容框也会更新。 ? 我们的原生 JS 路由开始运行了。请注意,每次单击按钮,history.pushState 被触发。...(第一次是我们单击按钮。) 但是由于该事件带有单击id,因此单击 Back 或 Forward 很容易刷新视图并重新加载内容。...当你第一次 PWA 中加载此路由,必须确保如果直接在地址中输入/page/home,它可以工作。 到目前为止,我们仅从前端更改了路由器地址。...假定每次你导航到出现在路由按钮的 URL ,实际都会从服务器单独加载该 URL。 因此你有责任确保/page/about 将路由器和页面的加载到应用程序的根视图中。

3.8K20

ug4入门教程

1.新建文件 主菜单依序选择【文件】→【新建】命令,或者单击工具的“新建”按钮 ,系统会出现“新建部件文件”对话框,如图1-3所示。...图1-3  “新建部件文件”对话框 2.打开文件 主菜单依序选择【文件】→【打开】命令,或者单击工具的“打开”按钮 ,系统将弹出对话框。...保存文件可以通过单击工具中的保存按钮 ;或者菜单中选择【文件】→【保存】/【另存为】命令。 2.退出UG NX4 退出UG NX的方法也与退出其他软件相似,一般都通过单击标题关闭图标。...UG退出将提示“是否真的要退出”,如图1-7所示,单击“是”按钮退出UG NX,并关闭窗口。 1.3  UG NX的操作界面 图1-8所示是UG NX的常见工作界面。...(6)导航按钮与导航器:当单击导航按钮导航器会显示出来。导航器是让用户管理当前零件的一个树形界面。

3.4K30

混合云如何实现IP-Sec-VPN云联网专线实现主备内网互通?

VPN 连接(备):本地 IDC 与云 VPC 通过建立 VPN 安全隧道来实现云云下业务通信,当专线链路出现异常,可将流量切换至该链路,确保业务可用性: 前提条件 用户本地 IDC 网关设备具有...单击左侧导航的【专线网关】创建专线网关,本例选择接入云联网 单击云联网型专线网关 ID 进入详情页,【IDC 网关】中输入用户 IDC 网段,例如10.0.1.0/24。...单击左侧导航的【对端网关】,配置对端网关(即 IDC 侧 VPN 网关的逻辑对象),填写 IDC 侧 VPN 网关的公网 IP 地址,例如202.xx.xx.5。...单击左侧导航的【VPN 通道】,请配置 SPD 策略、IKE、IPsec 等配置。... IDC 本地网关设备配置 VPN 通道信息,此处配置需要和 步骤3 中的 VPN 通道信息一致,否则 VPN 隧道无法正常连通。

4.1K52

『AndroidStudio』从新认识IDE之-整体概述

连在编辑器左边的边列可以用来单击增加一个调试断点,或者直接可视化你代码设置的一些图片资源。 编辑器连着的右边为标记,上边通过不同颜色的线条表明你代码中的相应位置行的一些信息。...Structure工具窗口中点击任何元素,光标将会立即移动到编辑器中的该元素。Structure工具窗口特别适合导航超大源文件中的元素。...在任意一个选项卡右击(Mac下按住Ctrl单击),在上下文菜单中选择Add All to Favorites。Input new favorites list name中输入main然后点击OK。...正如你第一章看到的,工具中还包含各种各样的管理器,包括SDK管理器和Android虚拟设备管理器。工具中还有设置和帮助按钮以及运行和调试应用程序按钮。工具中所有的按钮都有相应的菜单项和快捷键。...遍历最近导航操作 AndroidStudio可以可以回顾你的导航操作,导航操作指的是你光标移动记录,标签的变更记录和文件的激活记录等等。

2K20

Windows中的键盘快捷方式大全

将光标移动到缓冲区的末尾 Ctrl + 向上键 输出历史记录中向上移动一行 Ctrl + 向下键 输出历史记录中向下移动一行 Ctrl + Home(历史记录导航) 如果命令行为空,则将视口移动到缓冲区顶部...+ 右键单击某个任务按钮 显示该应用的窗口菜单 Shift + 右键单击某个已分组的任务按钮 显示该组的窗口菜单 Ctrl + 单击某个已分组的任务按钮 循环切换该组的窗口 设置键盘快捷方式...Ctrl + Shift + Tab 选项卡向后移动 Ctrl + 数字(数字 1-9) 移动到第 n 个选项卡 Tab 选项向前移动 Shift + Tab 选项向后移动 Alt + 带下划线的字母...按此键 执行此操作 Ctrl + Tab 选项卡向前移动 Ctrl + Shift + Tab 选项卡向后移动 Tab 选项向前移动 Shift + Tab 选项向后移动 Alt +...+ 单击某个任务按钮 以管理员身份打开程序 Shift + 右键单击某个任务按钮 显示程序的窗口菜单 Shift + 右键单击某个已分组的任务按钮 显示该组的窗口菜单 Ctrl + 单击某个已分组的任务按钮

5.6K20

明瞳智控最佳实践--国标设备实战接入

左侧导航中,单击项目管理,进入项目管理页面。 3. 单击创建项目。 4. 弹出的窗口中,设置如下主要信息,单击保存,创建一个 GB28181 类型的项目空间。...备注:项目是用于纳管设备的逻辑空间,各项目空间底层是互相隔离的 步骤2:创建设备 1. 左侧导航中,单击项目设备管理,进入项目设备管理页面。 2....单击下拉框,选择刚创建的 GB28181 项目空间。 3. 单击创建设备。 4. 弹出的窗口中,自定义设备名称、设备密码,选择设备组织。 5. 单击保存,完成设备添加。...步骤4:国标设备 Web 端配置 1. 登录国标 IPC 设备的 Web 端界面。 2. 进入配置页面,左侧导航单击高级配置,选择平台接入,按照如下信息配置并保存。...明瞳智控可以快速协助您实现终端设备接入,更加便捷稳定的将视频图片数据云,同时云端管理平台,您既可以对设备进行组织管理、用量统计,又可以实现设备通道的实况预览、监控回看、告警查询等功能。

46140

一个侧边导航组件实现思路

构建一个响应式导航系统是很困难的。有些用户使用键盘,有些用户使用强大的台式机,还有一些用户使用小型移动设备访问。每个访问者都应该能够打开和关闭菜单。 ?...桌面到移动设备响应式布局演示 用了哪些技术 在这次组件探索中,很高兴地结合了一些关键的网络平台特性: 伪类 CSS Grid transforms 媒体查询和用户偏好 CSS 用户增强体验 的解决方案只有一个侧边...现在,当我们的 sidenav 滑动打开和关闭,如果用户喜欢减少运动,立即移动元素进入视图,保持没有运动的状态。...为了将移动设备 Sidenav 的默认状态设置为屏幕外状态,将元素的位置设置为: transform: translateX (- 110vw); 注意,典型的屏幕外代码 -100vw 中添加了...当 Sidenav 关闭,集中打开按钮。通过 JS 中的元素上调用 focus() 来实现这一点。

3.6K40
领券