文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

最新iOS设计规范五｜3大界面要素：控件（Controls）

栏（Bars） 栏，可以告诉用户在APP中当前在所在的位置、能提供导航，还可能包含用于触发操作和传递信息的按钮或其他元素。包括6种：导航栏、搜索栏、侧边栏、状态栏、标签栏、工具栏。...系统按钮 系统按钮通常出现在导航栏和工具栏中，也可以在任何地方使用。 ? 在标题中使用动词。特定于操作的标题显示按钮是交互式的，并说明单击该按钮时会发生什么。 使用标题格式命名标题。...虽然子菜单可以缩短情境菜单并说明用户可以执行的命令，但是如果子菜单分还几个层级的话会使得体验变得复杂，并且让用户难以导航。 将最常用的项放在情境菜单的顶部。...在导航栏和工具栏中隐藏轨道的未填充部分。默认情况下，进度条的轨道包含已填充和未填充的部分。当在导航栏或工具栏中使用时，进度栏应配置为隐藏轨道的未填充部分。 进度条的外观可以自定义。...菜单可以快速生成动画，并且在菜单出现时不会使屏幕变暗，从而使过渡效果和总体体验更加轻盈。 ? 不要将所有操作都放在菜单中。

8.6K30

在 jQuery Mobile 中使用 UI 组件

工具栏 jQuery Mobile 框架包括页眉和页脚作为其标准工具栏；然而，由于有 navbar，工具栏也可以用来显示导航。...当用户与 Web 页面交互时，工具栏出现，使用户能够与它们进行交互，然后，当用户停止与页面进行交互时，工具栏消失（清单 2）。在显示一个视频播放器、照片集或类似的内容时，该选项十分有用。 清单 2....该列表被动态转换成悬停、静态和活动状态的水平导航栏，全都可以使用 jQuery Mobile 主题框架进行定制。 清单 3....除了所支持的 HTML5 输入类型之外，您还可以创建一个滑块。滑块包括一个图柄和一个供图柄在上面滑动的槽 。随着图柄的移动，滑块的值被存储起来，然后，在表单被提交时，该值也被提交。...然后，添加 min、max 和 value 属性，并为 value 属性定义一个默认值，该值确定图柄在滑块上的位置。

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

    前端学习自学笔记：day10

    container固定宽度并支持响应式布局的容器 进行bootstrap进行12栏栅格布局 盒子占屏幕的4栏范围 London London is the capital city of England...盒子占屏幕的4栏范围 Paris Paris is the capital and most populous city of France....盒子占屏幕的4栏范围 Tokyo Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous...HTML框架: -复习:垂直框架:例: cols:垂直方向切割屏幕 水平框架:例: rows:水平方向切割屏幕 框架结构标签:定义如何将窗口分割为框架,rows/cols属性规定了每行或者每列占据屏幕的面积...混合框架:一个页面同时含有行和列都分割的框架,下面的例子是先将把行分割,然后再其中一个已经分割行的再进行列分割 例: 导航框架:导航框架包含一个将第二个框架作为目标的链接列表.例子假设有三个页面, 例:

    1.7K70

    iPhone 检测 iPhone X 设备的几种方式和分辨率终极指南

    文章目录 iPhone 屏幕分辨率终极指南 适配新的 iPhone X 设备 检测 iPhone X/XS/XR 设备的几种方式 方式一：通过获取设备的 device model 来判断 方式二：通过获取屏幕的宽高来判断...iPhone X/XS 的屏幕宽度（开发尺寸）与 4.7 英寸的 iPhone 8 相同，都为 375pt，只是在高度上增加了 145pt； iPhone XR 和 iPhone XS Max 的屏幕宽度...5.8 寸的 iPhone X 屏幕为基准等比例放大），此时在代码中获取到的屏幕宽高都为 375pt * 812pt。...在 UIDevice 中提供了一个 orientation 属性用于获取设备的方向（横向、竖向、或者水平），一开始我们想着先通过这个属性判断设备处于横屏或者竖屏，然后分别取其对应的屏幕宽度（横屏下）或者高度...44.0 来检测设备是否为 iPhone X，代码如下： 不足：该方法只适用于竖屏且显示状态栏的情况下才能正确检测，而在横屏模式下，或者 App 隐藏导航栏时，获取到的状态栏高度都为 0（statusBarFrame

    1.5K20

    DOM 和 BOM 中的各种宽高属性

    包括开发者工具、顶部栏、侧边栏、滚动条、边框等不由 HTML 控制的部分 image.png 1.2 与屏幕相关 window.screen.width/window.screen.height： 返回表示屏幕的宽度...window.screen.availHeight/window.screen.availWidth： 返回表示屏幕的可用宽度/可用高度的数字。不包括可能位于任意一侧的任务栏。...这两个属性不受浏览器窗口位置的影响 image.png window.screenLeft/window.screenTop: 返回表示窗口到屏幕距离的数字。无视任务栏。...注意：IE 和 Opera 下表示的是窗口文档区到屏幕的距离，这意味着窗口最大化时，screenTop 返回的是窗口顶部栏的高度而不是 0。...scrollLeft()/scrollTop()： 水平方向上或者垂直方向上，滑块相对于整个滚动条的位置。对于某个元素，滑块处于初始位置或者无滚动条时，该方法返回 0。

    1.9K10

    iOS 9人机界面指南(四)：UI元素（下）- 腾讯ISUX

    4.3.7 网络活动指示器 网络活动指示器在状态栏中出现，表示网络活动正在进行。 ?...如果用户可以在你的应用程序打开超过20个视图，请考虑给视图一个不同的展示方式，以提供关于视图的详细信息，使其支持不连续的导航。 在打开视图的底部边缘和屏幕的底部边缘里垂直居中页面控件。...如果这个按钮会造成损害性后果，又是用户最有可能会选择的操作，那么它应该被放在左边，取消按钮应该放在右边。...关于这一点，你可以指定以下任意一种过渡动画： 垂直出现(Vertical).模态视图从底部边缘滑入屏幕，也同样从屏幕底部滑出（默认模式）。 弹出(Flip).当前视图从右往左水平滑动，露出模态视图。...从视觉上看，模态视图好像原来就处于当前视图的下面，当前视图移开时，它便出现了。离开模态视图时，原先的父视图从左边滑回屏幕右边。

    13.2K30

    Flutte部件目录-Material Components 顶

    应用程序结构和导航 Scaffold Appbar 上面两个在基本部件中已经讲过。 BottomNavigationBar ? 底部导航栏可轻松浏览并在单次点击之间在顶层视图之间切换。...底部导航栏由文本标签，图标或两者的多个项目组成，并放置在一块材料的顶部。 它提供了应用程序顶级视图之间的快速导航。 对于更大的屏幕，侧面导航可能更适合。...底部导航栏通常与Scaffold结合使用，在Scaffold.bottomNavigationBar参数中提供它。 底部导航栏的type会更改其条目的显示方式。...Slider 通过移动滑块，滑块可让用户从一系列值中进行选择。 ? Date & Time Pickers 日期选择器使用对话窗口在移动设备上选择一个日期。...它们通常出现在桌面企业产品中。 DataTable小部件实现了这个组件。 ? Card 材料设计卡片。 卡片有稍微圆角和阴影。 ?

    9.5K40

    处理视觉冲突 | 手势导航 (二)

    更具体一点来说，本文主要处理与系统 UI 出现视觉重叠的问题。系统 UI 包括屏幕上由系统提供的所有 UI，例如导航栏和状态栏，另外它还包括诸如通知面板之类的内容。...Insets 区域负责描述屏幕的哪些部分会与系统 UI 相交 (intersect)，例如导航或状态栏。如果您的控件出现在了这些区域内，就可能被系统 UI 遮盖。...常见的例子是下拉状态栏和导航栏，或者弹出屏幕软键盘 (IME)。 我们来看一个使用系统窗口区域的例子。...在系统使用手势导航模式时 (即导航栏变成屏幕底部的一条粗线，也就是导航条)，由于导航条有动态色彩调整功能，这个冲突可能不会那么明显。...在 Android 10 上，系统手势区域如下: △ 左/右侧的后退操作区域宽 40dp，下方的主屏操作区域高 60dp 如果您有需要滑动操作的控件出现在了系统手势区域内，就可以使用对应的数值来将这些控件挪开

    2.8K30

    【软件开发规范七】《Android UI设计规范》

    线条、空隙尽量保持2dp宽，圆角半径2dp。特殊情况相应调整。 ​...以下是一些常见的尺寸与距离： 顶部状态栏高度：24dp Appbar最小高度：56dp 底部导航栏高度：48dp 悬浮按钮尺寸：56x56dp/40x40dp 用户头像尺寸：64x64dp/40x40dp...编辑 滑块控件（Sliders） ​编辑 ​编辑 滑块左右两边可以放置图标 ​编辑 或是可编辑文本框 ​编辑 非连续的滑块，需要标出具体数值 Snackbars & toasts ​...不能出现一个以上的Snackbars。 Snackbars在移动设备上，出现在底部。在PC上，应该悬浮在屏幕左下角。 ​编辑 不一定要用户响应的提示，可以使用Snackbars。...如果某项独立一组，考虑把它放在顶部（重要）或放在底部的“其他”一栏中（不重要）。设置项较多时尝试合并，比如把两个相关的勾选项合并成一个多选项。设置项非常多时，使用子界面。 ​

    5.1K20

    BetterDisplay Pro for Mac(虚拟显示器软件)

    BetterDisplay for Mac是一款功能强大的显示器管理工具，可用于在 Mac 创建虚拟高分辨率显示器然后以屏幕镜像形式输出到物理低分辨率显示器。...可以将你的显示器转换为完全可伸缩的屏幕，允许亮度控制，提供XDR/HDR升频。帮助您为 Mac 创建和管理虚拟显示器。...• 通过滑块和本机或自定义键盘快捷键通过软件和硬件 (DDC) 控制更改显示器的亮度、音量和颜色！    • 手动为实际显示器创建自定义HiDPI 分辨率并重新定义某些系统显示参数！   ...• 通过流将您的显示内容（真实或虚拟）重定向到另一个屏幕。    • 如果您近距离使用大电视，请将电视的下半部分用作宽屏显示器（偏心流式传输）。    • 缩放 Sidecar 分辨率。   ...• 更好的缩放质量（系统偏好»辅助功能»缩放）或即使在 1080p 显示器上也能获得高质量的屏幕截图    • 通过菜单栏中的滑块（或子菜单）轻松更改真实和虚拟显示器的分辨率。

    1.9K20

    BetterDisplay Pro for Mac(虚拟显示器软件)

    BetterDisplay for Mac是一款功能强大的显示器管理工具，可用于在 Mac 创建虚拟高分辨率显示器然后以屏幕镜像形式输出到物理低分辨率显示器。...可以将你的显示器转换为完全可伸缩的屏幕，允许亮度控制，提供XDR/HDR升频。帮助您为 Mac 创建和管理虚拟显示器。...• 通过滑块和本机或自定义键盘快捷键通过软件和硬件 (DDC) 控制更改显示器的亮度、音量和颜色！    • 手动为实际显示器创建自定义HiDPI 分辨率并重新定义某些系统显示参数！   ...• 通过流将您的显示内容（真实或虚拟）重定向到另一个屏幕。    • 如果您近距离使用大电视，请将电视的下半部分用作宽屏显示器（偏心流式传输）。    • 缩放 Sidecar 分辨率。   ...• 更好的缩放质量（系统偏好»辅助功能»缩放）或即使在 1080p 显示器上也能获得高质量的屏幕截图    • 通过菜单栏中的滑块（或子菜单）轻松更改真实和虚拟显示器的分辨率。

    1.5K10

    【译】W3C WAI-ARIA最佳实践 -- 表单

    示例 Navigation Menubar Example：演示提供站点导航的菜单栏。...尽管建议开发者不要这样做，但还是有一些导航菜单栏的实现，其menuitem 元素既能执行功能又能打开子菜单。...NOTE 如果在菜单容器上设置aria-owns ，来包含不是该容器DOM子元素的元素，那么这些元素将按照它们被引用的顺序出现在读取顺序中，并且在所有DOM子元素之后。...Page Down (可选地): 大幅度减小滑块的值（比 Down Arrow 减小的值大）。 NOTE 焦点放在滑块上(鼠标用户可以移动的视觉对象，也称为thumb组件)。...在此示例中，当按下状态为 true 时，其标签仍为“静音”，这样屏幕阅读器就会像这样朗读：“静音” 切换按钮“已按下”。

    8.3K30

    BetterDisplay Pro for Mac(虚拟显示器软件)

    BetterDisplay for Mac是一款功能强大的显示器管理工具，可用于在 Mac 创建虚拟高分辨率显示器然后以屏幕镜像形式输出到物理低分辨率显示器。...可以将你的显示器转换为完全可伸缩的屏幕，允许亮度控制，提供XDR/HDR升频。...• 通过滑块和本机或自定义键盘快捷键通过软件和硬件 (DDC) 控制更改显示器的亮度、音量和颜色！     • 手动为实际显示器创建自定义HiDPI 分辨率并重新定义某些系统显示参数！    ...• 通过流将您的显示内容（真实或虚拟）重定向到另一个屏幕。     • 如果您近距离使用大电视，请将电视的下半部分用作宽屏显示器（偏心流式传输）。     • 缩放 Sidecar 分辨率。    ...• 更好的缩放质量（系统偏好»辅助功能»缩放）或即使在 1080p 显示器上也能获得高质量的屏幕截图     • 通过菜单栏中的滑块（或子菜单）轻松更改真实和虚拟显示器的分辨率。

    2.5K20

    折叠屏上应用设计规范，了解一下？

    深入理解布局 深入理解布局指南 介绍了布局容器的相关概念，它提供了一个整体框架，可帮助开发者思考如何在屏幕上排列导航栏、工具栏和内容等界面元素。...这一做法在小屏上或许行得通，当屏幕尺寸较大时就会出现明显的问题。网格系统则将您的布局划分为一系列栏，从而帮助您在规范网格中设计更具表现力的布局。...最重要的一点是，栏式网格提供了一种合理的方式来思考当屏幕尺寸变大或变小时如何将内容进行重排，从而帮助您对不同的屏幕尺寸作出一致响应。...如下图所示，我们考虑一件事，当过渡到小屏幕尺寸时，面板上的内容应该放在哪里。...我们有许多可选方案，比如使用屏幕尾侧的侧边抽屉式导航栏，或者使用上滑式底部动作条，或者使用选项菜单，甚至可以将内容完全隐藏起来。

    4.5K20

    提供更好的前端开发提示词（AI导航网站生成）

    我们给到的截图是这个： 第一步：通过你给的屏幕截图生成组件实现的详细要求提示词。...，就是那些顶部导航和左侧栏导航： 继续的话就是一些 "控制" 和 项目结构。...- 页脚 - 侧边栏（如适用） - 面包屑导航 - 响应式行为： - 移动端折叠导航 - 弹性内容宽度 - 动态侧边栏显示 文档布局： - 适用路由: /documentation...- 新闻简报注册 - 响应式行为： - 移动端单列布局 - 固定分类导航 - 无限滚动 他首先是在路由结构中给了要构建的所有路由，然后在页面实现中详细的描述了这个路由的目的是什么，以及要包括哪些组件...先发送第一个提示词能确保AI在开发时遵循一致的标准和结构，而第二个提示词则进一步指引AI如何将这些标准应用到具体页面和功能上。

    1.8K10

    Flutter实现电影院选座效果！

    由于左边的导航条是固定在最左侧的，而座位表可以全屏拖动，所以这座位表和导航条不能放在一个缩放组件里， 不然座位表放大的时候，直接将导航条放大出屏幕了。...笔者在这试了很多方法： 方法一： 左侧导航栏和中间座位表均使用InteractiveViewer 然后通过InteractiveViewer的回调事件和变换控器来实现效果同步 结果： 失败，transformationController...所以让左侧导航栏使用ListView,中间座位表使用InteractiveViewer嵌套GridView, 然后将ListView和GridView的ScrollController绑定在一起实现同步滚动...这里必须特别注意：座位表和导航条组件的单个item的高度必须完全相同，包括margin,padding，不然还是会出现错位现象 至此，最大的难点同步缩放和滑动就解决了。...屏幕宽-异形屏左右padding-横屏时右侧悬浮框width（竖屏时悬浮框如不在右侧，则为0）- 导航条宽度（这个导航栏宽度也需要根据放大缩小倍数动态计算）-其他自己加的布局宽。

    1.6K30

    Flutter实现电影院选座效果！

    由于左边的导航条是固定在最左侧的，而座位表可以全屏拖动，所以这座位表和导航条不能放在一个缩放组件里， 不然座位表放大的时候，直接将导航条放大出屏幕了。...所以我们的思路就是将导航条和座位表作为Stack的子组件，然后座位表实现放大缩小效果，并且让导航条能跟随座位表进行放大缩小。...笔者在这试了很多方法： 方法一： 左侧导航栏和中间座位表均使用InteractiveViewer 然后通过InteractiveViewer的回调事件和变换控器来实现效果同步 结果： 失败，transformationController...所以让左侧导航栏使用ListView,中间座位表使用InteractiveViewer嵌套GridView, 然后将ListView和GridView的ScrollController绑定在一起实现同步滚动...屏幕宽-异形屏左右padding-横屏时右侧悬浮框width（竖屏时悬浮框如不在右侧，则为0）- 导航条宽度（这个导航栏宽度也需要根据放大缩小倍数动态计算）-其他自己加的布局宽。

    1.6K10

    【Android 应用开发】Android中使用ViewPager制作广告栏效果 - 解决ViewPager占满全屏页面适配问题

    fill_parent 还是 wrap_content, 都会出现ViewPager占满全屏的问题; 不使用固定值定义宽高: 为了使ViewPager能适配各种类型的手机, 如果给ViewPager定义了高度和宽度..., 与各种手机的界面兼容性肯定要大大的降低, 因此出现了下面的解决方案; 2....解决方案  代码中添加组件 : 不在XML界面定义该组件, 可以在布局文件中,定义一个LinearLayout容器, 然后在代码中动态添加ViewPager; 好处 : 这样的好处是可以在代码中获取屏幕的宽高...ViewPager广告栏基本解决方案 1....小圆点导航策略 圆点存放策略 : 所有的小圆点都放在一个ViewGroup中, 有两种圆点, 一种是当前显示的, 一种是没激活的, 这里我们将一组圆点分别放入ImageView中, 并且将这些ImageView

    1.1K20

    Android 9 Pie新版本入门

    更新新版本最明显的标志是新的系统导航条，它取代了过去几次迭代中为Android用户提供良好服务的标准三图标导航条。...新的导航栏用一个更有适应性的系统和home按钮取代了几乎总是在屏幕上的三个图标(back, home, overview)， home按钮现在可以让你在应用之间切换(而不是点击overview按钮)。...也许我只是不喜欢改变，但整个触摸滑动的过程并没有让我觉得很有效率，如果你把手指放在home键上的时间比谷歌预期的要长，它会启动助手，而不是让你在应用之间滑动。...现在音量滑块在音量按钮旁边弹出也很不错。 关于声音：当你插入充电器时，你的手机会发出一种悦耳的小声音。毕竟，重要的是小事。...在夜间灯光模式下，有一种“Wind Down”功能，它可以打开，不打扰，在睡觉前把屏幕颜色变成灰度屏幕。

    1.1K30

    【Android 屏幕适配】屏幕适配通用解决方案 ③ ( 自定义组件解决方案 | 获取设备状态栏高度 | 获取设备屏幕数据 )

    文章目录 一、获取设备状态栏高度 二、获取设备屏幕数据 参考文档 : 设备兼容性概览 屏幕兼容性概览 支持不同的像素密度 声明受限屏幕支持 上一篇博客 【Android 屏幕适配】屏幕适配通用解决方案...② ( 自定义组件解决方案 | 需要解决的问题 : 设计稿坐标数据转为屏幕真实坐标数据 | 实现步骤 ) 中 , 提出 如果要实现将 宽高为 720 x 1232 的设计稿 , 对应 手机屏幕中除 状态栏之外的...布局 , 需要完成如下操作 : 首先 , 要 获取到实际的设备屏幕数据 , 如 手机屏幕实际宽高 , 屏幕像素密度 DPI 等数据 ; 然后 , 计算实际设备的宽高 , 扣掉状态栏的高度 , 不同手机设备状态栏高度不同..., 如果是竖屏 , 在高度上减去状态栏高度 ; 这里通过对比屏幕的宽高来判定当前是横屏还是竖屏 ; // 在屏幕真实宽高上减去状态栏高度 if(displayMetrics.widthPixels...//获取状态框信息 int statusBarHeight = getDimenValue(context,48); // 在屏幕真实宽高上减去状态栏高度

    97810
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券