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

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

如果你的应用需要显示超过20个页面，请考虑使用其他的排列方式 - 例如网格 - 启用非顺序导航。 页面控件显示在屏幕底部的中心。页面控件应始终位于内容底部和屏幕底部之间的区域，并保持居中。...进度条非常适合显示任务的状态，尤其是当它帮助传达任务需要完成多长时间时。 在导航栏和工具栏中隐藏轨道的未填充部分。默认情况下，进度条的轨道包含已填充和未填充的部分。...菜单可让您提供一系列项目，而不会弄乱您的界面，但是将所有操作置于菜单中意味着用户必须至少点击两次才能执行任何操作。将最重要的操作放在主界面中，使用菜单提供补充项目。 使用菜单显示与操作直接相关的选项。...通过菜单，您可以在无需向主界面添加按钮的情况下为用户提供澄清动作目标或自定义动作行为的方法。例如： · 当用户点击应用中的“添加”按钮时，您可以显示一个菜单，让用户指定要添加的项目。...由于操作表出现在与菜单不同的位置并且需要有意地撤消，因此它可以帮助人们避免误操作。 考虑在菜单项中包含标志符号。如果需要澄清项目的含义，可以在其标题后显示标志符号或图像。

8.6K30

Flutte部件目录-Material Components 顶

应用程序结构和导航 Scaffold Appbar 上面两个在基本部件中已经讲过。 BottomNavigationBar ? 底部导航栏可轻松浏览并在单次点击之间在顶层视图之间切换。...一个显示在应用底部的材质小部件，用于在少量视图中进行选择，通常介于3到5之间。 底部导航栏由文本标签，图标或两者的多个项目组成，并放置在一块材料的顶部。 它提供了应用程序顶级视图之间的快速导航。...对于更大的屏幕，侧面导航可能更适合。 底部导航栏通常与Scaffold结合使用，在Scaffold.bottomNavigationBar参数中提供它。 底部导航栏的type会更改其条目的显示方式。...Drawer Material Design面板，从展示台的边缘水平滑动，以在应用程序中显示导航链接。 ? 按钮 RaisedButton 材质设计凸起按钮。...PopupMenuButton 按下时显示菜单并且当菜单因选择项目而被解除时调用onSelected。 ? ButtonBar 按钮的水平排列。 ?

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

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

    这可以提醒用户显示长时间的网络接入状态。更多详情请参考本章第三节控件部分的网络活动指示器部分(Network Activity Indicator)。...可以填充颜色(使用tintColor来定义导航栏中的图标与文字颜色；使用 barTintColor来填充导航栏背景色) API注释 导航栏包含于导航控制器（一个管理显示自定义视图层级结构的程序对象）中。...API注释 想要了解如何在代码中定义活动视图控制器，请参考UIActivityView Class Reference.想要了解如何设计一个提供自定义服务的活动菜单，请参阅上文中关于活动彩蛋的内容。...活动视图控制器通常用作让用户把他们选中的内容复制到他们的社交媒体账户上。 不要创建一个自定义按钮来触发活动视图控制器。用户更习惯点击动作按钮后使用系统提供的服务。...在点击后，用户期望出现新的视图，或者出现一个复选标记以表明先前点击的项已经被选中或激活。 如果表格的内容庞大而且复杂，不要在所有数据都加载完之后才一起显示出来。

    10.1K51

    Material Design — Navigation drawerStandard drawer Modal drawer Bottom drawer

    Navigation drawer ---- 用法 Navigation drawer 提供对目的地和 app 功能的访问，如切换帐户。 它们可以永久在屏幕上显示，也可以通过导航菜单图标进行控制。...Standard drawers 可以永久可见或通过点击导航菜单图标打开和关闭。 它们只能用于平板电脑和台式机。 在手机上，使用 modal drawers 代替。 ?...为了点击 bottom app bar 的菜单图标后提高可达性，它们从屏幕底部打开而不是从侧面打开。 ---- 分解 Navigation drawers 包含嵌入在 sheet 内的 list。...调整 bottom navigation drawer 的打开位置，以便在屏幕底部剪切最后一个视图中的列表项。 这可以通知用户有更多项目要查看。...当最初打开到屏幕高度的50％时，在显示其他项目之前，必须将 drawer 拖到屏幕高度。 在滚动时，drawer 的标题变成了一个高的 top app bar，并具有很好的可供性。 ?

    3.8K40

    Eplan 3D 布局步骤

    选择你要转换的 STEP 文件，导入 导入完成后显示 3D 模型 将布局空间属性中的宏名称进行更改，因为在后续自动生成3D宏时，这个名称将显示为文件名.ema。...生成的 3D 宏关联到部件后，就可以使用部件创建 3D 布局图，打开布局空间导航器，在项目上点右键新建，创建 3D 电气安装板空间布局。 然后在菜单中插入安装板。...导轨和线槽插入完成后，打开3D安装板布局导航器选中里面的部件，选择继电器座拖动放置到导轨上面。选择菜单栏”项目数据”---设备/部件---3D安装部件导航器。...捕捉上去后，双击选择我们命名的安装点，放置完成后，3D安装板布局导航器上对应的部件前面出现勾，表示放置完成。同时布局空间导航器上，导轨上也会显示安装的逻辑组件。...接下来，在图纸中显示 3D 安装板。在页导航器中新建 2D 安装板布局图，然后在里面插入模型视图，选择菜单栏”插入”---图形---模型视图。 弹出菜单，选择布局空间，视角和风格，以及图纸比例等。

    13.1K30

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

    自然，我们可以使用 insets 区域来尝试解决视觉冲突，如把视图从屏幕边缘向内移动到一个合适的位置。...注意，使用可点击区域里的数值进行布局时，依然可能导致自己的控件与系统 UI 在视觉上重叠，这一点与系统窗口区域 insets 不同，使用后者的值对自己的控件进行位移后能确保不会与系统/导航栏发生视觉重叠...在手势操作 (导航条) 模式，且开启了导航条色彩适应后，虽然导航条依然有高度 (即红色区域 16dp)，但它被认为是 "透明" 的，系统在这 16 dp 的高度内依然允许用户点击应用里的控件，所以在可点击区域...常见的例子包括底部导航菜单 (Bottom Sheets)、游戏里的滑动交互、多图展示 (ViewPager) 等。...在有些显示模式下 (比如放松模式和沉浸模式)，系统 UI 可能会根据情况在可见与不可见之间切换 (如游戏、照片浏览、视频播放器等)。

    2.8K30

    干货！iOS 与 Android 的APP 设计差异

    在Android应用中被大家熟知的导航模式是抽屉和标签形式的组合。 抽屉导航其实是一个菜单，通过点击汉堡图标，然后从左侧或右侧滑出。...左侧就是抽屉导航；右侧是标签栏 在Material Design中还有一个组件叫做底部导航。这个组件对于安卓原生应用来说也非常重要。底部的菜单项很容易点击和操作。...但是安卓规范其实不建议同时使用底部导航和标签，因为它可能会在导航时引起混乱。 底部导航(Material Design) 在Apple的人机交互规范中，没有类似抽屉菜单的标准导航控件。...而在iOS中与之类似的按钮则叫做活动按钮，通常会放在底部导航的中间 左边是标准的iOS活动按钮；右侧是标准的Android浮动按钮 IOS与Android底部操作视图的差异 在Android中有两种不同类型的底部操作视图...模态视图又有两种不同类型：具有不同操作内容的模态列表和用户点击“共享”图标后显示的应用列表。在iOS上也能找到类似的组件，但是在设计风格和布局上差异比较大。

    3.5K10

    Android Studio 4.0+ 中新的 UI 层次结构调试工具

    首先点击窗口的 View 菜单，找到 Tool Window 子菜单，然后选择 Layout Inspector，这样就打开了布局检查器窗口。 布局检查器仅显示正在运行的进程的 UI 层次结构。...您也可以选中一个视图，然后右键点击它后，窗口仅显示它的子视图。 同样，您可以仅显示一个所选视图的父视图。 右侧的窗格会显示所选视图的所有已声明的属性和继承的属性。...打开 Android Studio 4.0，然后在 File 菜单里选择 New Project； 选择 Bottom Navigation Activity，点击 Next 然后点击 Finish；...当您运行应用的时候，您会看到一个可爱的 android，但是里面少了一些东西: 底部的导航标签。看一下布局文件，我们可以看到底部的导航视图是存在的，但是屏幕却没有显示它。...在它下面，您可以看到导航栏位于最下方——看来底部的导航栏被挤出了屏幕。 有可能是 navigation host 的尺寸设置错了，我们尝试把它的高度设置为 'wrap_content': <!

    2.5K10

    使用Visual Studio Code开发.NET Core看这篇就够了

    安装后插件后，VS Code Explorer左侧栏中将多了一个显示名为“SOLUTION EXPLORER”的新窗格。 ? 接下来我们使用它来创建解决方案，并在解决方案中添加项目吧。...导航到MathOperationTests目录。输入dotnet test命令。我们将获得以下输出。 ? 如您所见，输出信息量较少。...单击该图标，您将看到测试的侧栏面板，其中列出了项目中发现的单元测试。测试项目将显示在按命名空间和类分组的树视图中。您还可以看到每个测试的“运行”按钮和顶部的“全部运行”按钮。...VS代码的底部面板（终端所在的面板）的“ 问题”选项卡中显示相同的信息。这可以在下图中看到。 ? 修复错误并再次运行测试，以便所有测试都通过，我们可以再次看到绿色标记。...我们可以看到VS Code的Debug视图在编辑器的左侧打开。Debug视图显示与调试相关的所有信息。我们还可以注意到编辑器顶部出现了一个调试工具栏。调试时，调试工具栏可用于代码导航选项。

    5.7K00

    【UI 设计 - Adobe Illustrator】基本设置 (图像显示 | 图像缩放 | 置入导出 | 标尺 | 网格 | 参考线 | 画板)

    设置图像显示效果 (1) 轮廓模式 切换到轮廓模式 :  -- 加载视图 : "文件" -> "打开" 指定 .ai 文件; -- 轮廓模式 : 选择 "视图" -> 轮廓, 快捷键 Ctrl + Y;...-- 轮廓模式样式 :  -- 切换回预览模式 : "视图" -> "预览"; (2) 屏幕显示模式设置 屏幕显示模式设置 : 按 F 键自动切换; -- 正常屏幕模式 : 正常, 上面有菜单栏..., 底部有任务栏; -- 带菜单栏全屏模式 : 界面全屏, 上面有菜单栏, 底部没有任务栏; -- 全屏模式 : 全屏, 即没有任务栏, 也没有菜单栏; (3) 隐藏工具栏 和 浮动面板 隐藏工具栏 和...: 多文件显示切换方式, 菜单栏 "窗口" -> "排列"; -- 多标签模式 : 默认; -- 平铺 : 多个文件都显示在界面中; -- 浮动 : 图片在窗口中浮动; 2....; -- 缩小 : 按下 Z 键, alt + 鼠标左键点击; (3) 抓手工具缩放 抓手工具缩放 :  -- 放大 : Alt + 鼠标滚轮上; -- 缩小 : Alt + 鼠标滚轮下; (4) 导航器缩放

    1.6K30

    Material Design — 底部导航（Bottom Navigation）

    点击底部导航的图标可以：1、直接将你带到相关页面；2、刷新当前页面。 底部导航主要用于移动端，为了在pc端实现类似效果，可以使用侧边导航。...更大的显示器，如pc端，可以通过使用侧边导航实现类似的效果。例如，紧凑的“rail”处理处理方式默认展示导航图标。 ? 左：移动端    右：pc端 什么时候用？...底部导航栏不应用于： ·专注于单一任务的观点，如电子邮件“撰写”页面。 ·包含用户首选项或设置的页面 在Android上，后退按钮不在底部导航栏视图之间导航。...底部导航icon 点击底部导航icon将直接带你到相关页面，或刷新当前页面。每个icon必须指向目的地，并且不能打开菜单或对话框。...点击icon进行切换时也该避免横向切换在页面之间转换（如左右推进）。

    4.1K90

    熟悉Android Studio界面，开始装逼卖萌

    其中区域1为菜单栏，区域2为工具栏，区域3为导航条，区域5为代码编辑区，区域4、6为工具窗口，底部的区域7为状态栏，左侧、右侧和状态栏上部区域为工具条，接下来就一一拆解进行了解。...1菜单栏 菜单栏详细如下图： ? 菜单栏提供了文件管理、编辑、视图、导航、代码检查、分析、重构、构建、运行、工具、版本控制系统等功能。...1）显示导航条的操作步骤:： ➤ 菜单栏 —>View —> 勾选Navigation Bar 2）关闭导航条的操作步骤: ➤ 菜单栏 —>View —> 去掉勾选Navigation Bar...5工具条 工具条是用来放置工具的，点击后可以展开工具窗口。Android Studio中的工具条分布在主界面的左右两边和底部（状态栏上面）。...7.1项目工具窗口：Project 项目工具窗口提供了多种视图模式来查看项目结构，在项目工具窗口中我们可以对项目中的文件和目录进行各种操作。 ?

    3.3K60

    【iOS 开发】Objective－C 入门 Xcode 环境详解

    : 用符号显示工程中的 类, 项目 和 属性; -- 表示方式 : C 表示类, M 表示方法, P 表示属性; -- 快速定位 : 点击对应的方法或者属性, 能快速定位到这个类中; (3) 搜索导航...搜索导航简介 : 在搜索框中输入要搜索的字符串, 按回车就可以搜索出包含该字符串的类; (4) 问题导航面板 问题导航面板简介 : 显示项目中存在的警告或者错误; (5) 测试导航 测试导航简介...: 点击 testExample 后面的执行按钮, 就会运行该单元测试; (6) 调试导航 调试导航简介 : 调试导航面板中显示了各线程的详细信息; 添加断点 : 在 OCTViewController.m...中添加一个断点; 开始调试(自动判断) : 点击顶部面板中的调试按钮, 如果代码中有断点, 就会自动进入调试状态, 执行到断点时会自动停止, 详细调试信息显示在底部的调试输出面板; 调试面板介绍..., 不会进入方法中; -- Strp in : 步入调试, 点击该按钮, 会进入方法中; -- Step out : 步出调试, 在方法中, 点击该按钮, 会退出方法, 执行方法外的单步调试; (7)

    1.9K20

    Android Studio 4.0+ 中新的 UI 层次结构调试工具

    首先点击窗口的 View 菜单，找到 Tool Window 子菜单，然后选择 Layout Inspector，这样就打开了布局检查器窗口。 布局检查器仅显示正在运行的进程的 UI 层次结构。...您也可以选中一个视图，然后右键点击它后，窗口仅显示它的子视图。 同样，您可以仅显示一个所选视图的父视图。 右侧的窗格会显示所选视图的所有已声明的属性和继承的属性。...打开 Android Studio 4.0，然后在 File 菜单里选择 New Project； 选择 Bottom Navigation Activity，点击 Next 然后点击 Finish；...看一下布局文件，我们可以看到底部的导航视图是存在的，但是屏幕却没有显示它。...在它下面，您可以看到导航栏位于最下方——看来底部的导航栏被挤出了屏幕。 有可能是 navigation host 的尺寸设置错了，我们尝试把它的高度设置为 'wrap_content': <!

    2.5K20

    鸿蒙应用开发从入门到入行 - 篇8：Tabs选项卡页签视图切换

    Tabs介绍你是否经常在移动端应用里见到如下菜单分类，例如下面两图像这样的不管是在上，还是在下的菜单分栏功能，在HarmonyOS应用开发中都是可以使用Tabs组件实现每当某个Tabs里的菜单切换后，页面内容也会跟着改变...TabContent配合tabBar属性，即可设置导航栏标题，tabBar传入字符串，字符串是什么，标题即为什么修改导航栏位置到底部默认情况下，导航栏在页面上方，如果想把导航栏设置到页面底部显示，可以通过给...这是因为使用自定义导航栏后，需要自行在Builder里根据当前选中下标来判断显示不同的图标和颜色综上所述，我们应该先声明一个状态变量，记录当前选中的索引@State currentIndex: number...否则用默认的图片与颜色效果如下切换指定页签此时我们发现，之前在不使用自定义导航栏时，默认的Tabs会实现切换逻辑，也即点谁谁高亮。但使用自定义导航栏后，发现点击导航栏没有切换高亮效果。...进行封装并传入tabBar课后练习判断题当设置vertical为true时，导航栏在右侧显示当Tabs的barPosition为End，vertical为false时，导航栏在右侧显示简单题请回答，直接设置

    15710

    如何处理手势冲突 | 手势导航连载 (三)

    在问题 3 中回答 "是" 的视图，是否需要用户在其上滑动或拖拽？...如果您的视图放置在一个可滚动操作的容器 (如 RecyclerView) 中，那么请这么理解这个问题: 该视图是否完全或大部分位于手势交互区域中？...如果用户可以将视图滚动到手势交互区域之外，则应该视为没有交互冲突。 您也许已经注意到，在流程图中多图显示控件 (ViewPager) 在此处回答 "否"。...出现这种重叠的常见的例子: 非模态的底部弹出菜单，因为这种菜单常常会在屏幕底部折叠为一个较小的视图，而且还需要滑动操作。 屏幕底部的水平页面切换，例如软键盘里选择不同表情包的 UI。...我们可以用来解决手势冲突的一种方法是，将出现冲突的视图移出手势导航交互区域。这对于屏幕底部附近的视图尤其重要，因为该区域是系统强制手势交互区域，并且应用无法在该区域使用热区切出 API。

    5K30

    Material Design — 底部动作条（Bottom Sheets）

    模态底部动作条可以显示长名称的菜单项，带说明的菜单项，带icon的菜单项。 当显示菜单项时，完全扩展的模态底部动作条与app 导航栏的最底端要保持最小8dp的距离。 ?...但是，这些深层链接可能不允许用户在打开的app中导航：它们可能只停留在初始层级，更深入，或者返回到初始层级。 或者，深层链接可以将用户从底部动作条导航到另一个视图。...为了使底部动作条中的的深层链接向上导航，通过溢出菜单提供一个明确的链接来打开app。底部动作条中的动作可能会导致打开父级app，比如使用“添加联系人”操作。...由于桌面空间的约束更少，它可以支持多种方式来替换模态底部动作条。 ? 比如用Menu，点击后就在视觉焦点部分出现 大屏幕中的模态底部动作条可使用适当的样式来增加额外的空间。 ?...左：网格底部动作条    右：长列表底部动作条 ---- 行为 1、底部动作条可以通过向下滑动底部动作条来关闭； 2、通过点击一个明显的控制按钮，例如在app导航栏中的“X”，或者触摸Android系统的后退按钮

    1.9K71

    MIT协议分布式文件系统，一个简单、方便的文件存储方案

    网盘主页 1.1 页面布局 左侧分类栏区域：展示文件类型，分为我的文件、回收站和我的分享三大类，切换分类可以查看文件，底部显示已占用存储空间。...点击左侧分类栏中的回收站，右侧文件列表显示回收站中的文件。点击左侧分类栏中的我的分享，右侧文件列表显示个人分享过的文件。...点击层级，可以回到任意一层目录；点击面包屑导航栏后面的空白处，可以手动输入路径以便快速进入指定目录。 右侧文件展示区域：展示形式会随文件查看模式而改变；底部分页组件。...路径导航 点击目录跳转到该文件夹内部，在面包屑导航栏后面空白处点击，可以输入路径，快速到达指定路径（此功能仅支持在 我的文件 - 全部 分类下使用） 3....5.3 截图粘贴上传 直接使用任何截图工具截图后，在拖拽区域使用 Ctrl + V 粘贴图片，点击上传图片即可上传。 6. 文件回收站 提供文件回收站功能，支持彻底删除和还原文件。 7.

    2.5K10
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券