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

最新iOS设计规范三|3大界面要素:栏(Bars)

在iOS 13及更高版本中,可以通过删除导航栏的阴影来隐藏导航栏的底部边框(当滑动内容区域时,边框会自动重新出现)。无边框样式在大标题导航栏中效果很好,因为它增强了标题和内容之间的联系感。...搜索栏可以单独显示,也可以显示在导航栏或内容视图中。当显示在导航栏中时,可以将搜索栏固定在导航栏中,以便始终可以调用。也可以将其折叠,当用户向上滑动时展开显示。...如果没有状态栏,人们必须离开您的应用程序才能检查时间或查看他们是否具有Wi-Fi连接。人们可以使用简单的可发现手势重新显示隐藏的状态栏。...例如:在Safari中,当你开始滚动页面时,工具栏会自动隐藏,因为你可能正在阅读。你还可以点击屏幕底部让它再次出现。当弹出键盘时,工具栏也会被隐藏。 ?...工具栏包含用于执行与当前上下文有关的动作的按钮,例如创建项目,删除项目,添加注释或拍照。标签栏和工具栏永远不会在同一视图中同时出现。 提供相应的工具栏按钮。

9.9K10

【最新】iPhone X 交互设计官方指南

大多数使用系统提供的标准 UI 元素(如导航栏、表格和集合)的应用程序能够自适应设备的新外形。背景材料可以延伸到屏幕的边缘,而且 UI 元件也能够被适当地插入和定位。 ? ?...所有的应用程序都应遵循 UIKit 中定义的安全区域和布局边距,这些区域可以根据设备和上下文进行适当的填充。安全区域还能够防止内容把状态栏、导航栏、工具栏和标签栏覆盖掉。 注意状态栏的高度。...但是请注意,当背景任务(例如录音和位置跟踪)处于活动状态时,iPhoneX 上的状态栏并不会改变高度。 如果你的应用程序对隐藏状态栏进行了隐藏,那么请重新考虑在 iPhone X 上的设计。...人们可以使用显示屏底部的滑动手势来访问主屏幕和对应用程序进行切换,这些手势可能会覆盖掉你在此区域中设定的自定义手势。另外屏幕的两个角落令人很难进行有效操作。 不要遮挡或突出显示关键显示特性。...为了使用户能够轻松的访问主屏幕,可以自动隐藏虚拟 Home 键。当启用自动隐藏时,如果几秒钟内用户没有触摸屏幕,那么Home 键将会被自动隐藏。如果用户再次触摸屏幕,虚拟 Home 键会重新出现。

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

    最新iOS设计规范九|10大系统能力(System Capabilities)

    您还可以使用教练视图来帮助人们重新初始化AR(此过程称为重新定位),例如,当人们短暂地切换到其他应用程序而中断了AR体验之后。 ? 当人们使用教练视图时,隐藏不必要的应用程序用户界面。...设计适合您的应用程序体验的可视指示器,以向人们展示他们可以点击以获取更多信息。 ? ? 处理中断 在中断期间,例如人们短暂切换到另一个应用程序或接听电话时,ARKit无法跟踪设备的位置和方向。...例如,如果您的应用是游戏或媒体查看应用,请确保人们在切换到其他应用时不会错过任何内容。当他们切换回去时,让他们像从未离开过一样继续前进。 适当响应外部音频。...五、屏幕截图(Screenshots) 用户可以通过截屏来捕获屏幕上显示的内容。从iOS 11开始,截屏后,屏幕截图会以预览形式短暂地出现在屏幕底部。...拍摄本地屏幕截图时,请勿更改应用的界面。截屏时,系统提供的截屏功能可提供足够的上下文和功能。自定义屏幕截图启动的界面更改和功能是重复的,不必要的,并且可能造成混淆。

    4.3K20

    iPhone X 适配指南 (官方翻译版)

    所有应用程序都应遵循UIKit定义的安全区域和布局边距,这些区域可以根据设备和上下文进行适当的填充。安全区域还可以防止内容覆盖状态栏,导航栏,工具栏和标签栏。 注意状态栏的高度。...请注意,当背景任务(如录音和位置跟踪)处于活动状态时,iPhone X上的状态栏不会改变高度。 如果您的应用程序目前隐藏状态栏,请重新考虑iPhone X上的决定。...iPhone上的显示高度为4.7 寸iPhone的显示屏提供了更多的内容垂直空间,状态栏占据您应用程序可能赢得的屏幕区域状态栏还显示人们发现有用的信息,只能隐藏以交换附加值。...当启用自动隐藏时,如果用户没有触摸屏幕几秒钟,指示灯将熄灭。当用户再次触摸屏幕时,它会重新出现。这种行为应该只能用于被动观看体验,如播放视频或照片幻灯片。 请参阅适应性和布局。...手势 iPhone X上的显示屏使用屏幕边缘手势来访问主屏幕,应用程序切换器,通知中心和控制中心。 避免干扰系统范围的屏幕边缘手势。人们依靠这些手势在每个应用程序中工作。

    2.5K50

    Win11快捷键

    F6 在右/左窗格之间切换。 Alt + D 选择文件资源管理器的地址栏。 Ctrl + Shift + N 新建一个文件夹。 Alt + P 在文件资源管理器中显示/隐藏预览面板。...因为Windows 11结合了日历和通知面板,所以它的另一个功能是打开日历。 14.Win+P修改投影模式。 当电脑成功连接到外接显示器或投影仪时,可以按Win+P修改投影模式。...特别是当Windows 11取消任务栏右键菜单后,这项功能正好可以弥补这一短板。...和前者不同,Win+Ctrl+D并不会显示总览页面,而是直接跳转到新添加的虚拟桌面中。因此我们也经常用它,作为保护个人隐私的一个手段。...26、Win+Prtscn 一键截屏 Win+PrtScn是Windows 11里的一键截屏键,按下快捷键后,屏幕会首先闪一下,接下来在“此电脑-图片-屏幕截图”文件夹,就会出现一张刚刚截好的图片文件。

    1.8K20

    从 Windows 切换到 Mac,不能错过这9条Tips

    2 终端 在 Windows 上,我首推的终端工具就是 ConEmu,所以当发现 Mac 不支持该工具时,我感到万分沮丧。...在 Windows 上,我使用了一个名为 Snap Assist 的功能。你只需将窗口拖到屏幕边缘,然后选择要在其旁边显示的另一个窗口。 同样,当发现 Mac 上没有这个功能时,我非常失望。...截屏时(command + shift + 3),屏幕右下角会出现一个缩略图。点击缩略图,Mac 就会打开原生的 Preview 应用。...7 截屏和录制视频 上述我也提到过这一点,作为前端开发人员,我经常需要截屏和录制视频,然后附加到 JIRA 任务票、Slack 消息或电子邮件中。...录屏 按下快捷键 command + shift + 5,就会看到一个工具栏,你可以利用这个工具录制整个屏幕,或者其中一部分。

    1.2K20

    七个用户体验设计小秘诀,打造最舒服的互动流程

    信息超载的总定义如下: 当系统的输入量超过其处理能力时,会发生信息过载的现象。决策者的认知处理能力相当有限。因此,当信息发生超载的情况时,决策的质量也会降低。...让我们看看一些例子 切换菜单 依靠菜单控件来简化移动界面(特别是在小屏幕上)是很诱人的。但是,隐藏这些菜单背后的应用程序的关键部分可能会损害使用。隐藏的导航降低了参与度,减缓探索和迷惑人。 ?...标签栏 标签栏和导航栏非常适合具有相对较少导航选项的应用程序。该模式在iOS和Android上都采用。...标签是伟大的,因为它们在前面通过一个简单的点击,显示所有主要的导航选项,用户可以立即从一个视图到另一个视图。对于这种类型的导航,我强烈建议使用标签进行导航选项。不要让导航像猜测游戏。 ?...在iOS的Pocket应用程序中,所有导航控件都在页脚中。当手机保持正常时,可以方便地到达。

    2.5K60

    个人使用mac OS和win OS的差异

    Shift-Command-5:在 macOS Mojave 或更高版本中,拍摄截屏或录制屏幕。也可以使用 Shift-Command-3 或 Shift-Command-4 来拍摄截屏。...进一步了解截屏。 Shift-Command-N:在“访达”中创建一个新文件夹。 Command-逗号 (,):打开最前面的 App 的偏好设置。...Control-Command-电源按钮*:强制 Mac 重新启动,系统不会提示你存储任何已打开且未存储的文稿。...Command-调低亮度:当 Mac 连接到多台显示器时,打开或关闭视频镜像功能。 Option-调高亮度:打开“显示器”偏好设置。这个快捷键可与任一亮度键搭配使用。...按住 Command 键拖移到另一个宗卷:将拖移的项目移到另一个宗卷,而不是拷贝它。 按住 Option 键拖移:拷贝托移的项目。拖移项目时指针会发生变化。

    2.6K20

    浅谈 Android 自定义锁屏页的发车姿势

    而第二个标记的问题在于,Google 认为导航栏对于用户来说是十分重要的,所以只会短暂隐藏导航栏。一旦用户做其他操作,例如点击一次屏幕,导航栏就会马上被重新调出。...Android 4.4 之后加入的Immersive Full-Screen Mode 允许用户在应用全屏的情况下,通过在原有的状态栏/导航栏区域内做向内滑动的手势来实现短暂调出状态栏和导航栏的操作,且不会影响应用的正常全屏...,通过其他标签设定状态栏和导航栏显示或隐藏,以及显示或隐藏的样子。...HIDE_NAVIGATION所迷惑,其实这个Flag没有隐藏导航栏的功能,只是控制导航栏浮在屏幕上层,不占据屏幕布局空间;SYSTEM_UI_FLAG_HIDE_NAVIGATION,才是能够隐藏导航栏的...Status Bar也按照我们预期的那样,悬浮在上方,没有隐藏。 2. 透明栏   什么是透明栏?

    3.9K91

    如何规范移动应用交互设计?UIUX设计师须知的11个小技巧

    不要隐藏密码 在移动设备中不需要显示和隐藏密码选项。由于移动设备的屏幕较小,用户使用起来也比较安全。因此,删除显示和隐藏选项将有效减少不好的用户体验。...除此之外,设计师在设计搜索栏交互时,为了提供良好的用户体验,一定要根据用户的使用习惯显示他们最近搜索和最喜欢的搜索时间。...不要使用闪屏 优先向用户展示应用程序的价值主张,直接把它们放在主屏幕上。当用户打开应用程序时一眼就能看到。 不需要制作花哨的闪屏,这样你也不用为漂亮的插图而苦恼。...如果用户30%的时间都在使用横屏模式,则设计必须考虑横向模式。 例如用户在驾驶时,或使用金融,书籍和游戏等应用程序时,手机的主要模式为横屏模式。...90%的时间里用户都试图使用他们已经习惯的系统模式的导航,用户使用这种导航可以使你的应用程序更加智能,但前提必须是你导航足够直观,用户不会因为搜索导航太久而卸载你的应用程序。

    1.3K90

    『React Navigation 3x系列教程』之createStackNavigator开发指南

    modal: 上下切换。 headerMode: 导航栏的显示模式: screen: 有渐变透明效果, float: 无透明效果, none: 隐藏导航栏。...none: 隐藏导航栏。 headerBackTitleVisible : 提供合理的默认值以确定后退按钮标题是否可见,但如果要覆盖它,则可以使用true或` false 在此选项中。...cardStyle: 样式(iOS上页面切换会有白色渐变蒙层,想去掉则可以这样设置,cardStyle: { opacity: null },切换页面时的页面边框也在这里可以设置)。...onTransitionStart: 页面切换开始时的回调函数 (我们可以在这里注册一些通知,告知我们切面切换的状态,方便后面处理页面切换事件)。...onTransitionEnd: 页面切换结束时的回调函数。

    5K10

    mac 终极教程,最全,最实用的教程

    当Safari发现结构优良的网页文档时,就会在地址栏右侧显示“阅读器”,点击就可以进入简洁的阅读模式,通过shift+command+r也可以进入。...locate是Unix/Linux下的命令工具,基本原理就是通过定期更新系统的文件和文件名并把索引信息放入系统的数据库中,当通过locate查找文件时直接从数据库里取数据。...75.恢复截屏损坏图片 截屏图片存哪了? OS X自带截屏不好使了,截屏之后有“咔嚓”的程序运行声,但图片不知道去哪里了,如何修复?...,再次截屏看看文件是否保存在桌面上了。...106.复制截屏图片到剪贴板 以前介绍过如何通过苹果自带的快捷键截屏并存储图片文件,例如shift+command+3和shift+command+4,现在发现如果在以上两个截屏动作中加入ctrl键,可以实现直接把图片保存在剪贴板而不是实体文件

    3.9K32

    PPIICC:简洁易用的长截图工具

    另外,拼接长截图时,最好不要将界面切换到别的应用程序,也最好不要使PPIICC后台运行,否则可能出现应用程序崩溃的情况。   ...已Root实现方法:   如果你的手机已经取得了Root权限,你可以在PPIICC的"其他设置"中打开"滚动截屏"功能,为了节省时间和提高效率,小苏推荐将"滚动距离"设为"80%",将"滚动时间"设为"...开启滚动截屏"后,屏幕左下角将出现两个悬浮按钮,通知栏中会常驻一条通知,悬浮按钮在截图时会自动隐藏,不会出现在截图中,但通知图标在截图时可能会被截入图片中,所以我们最好关闭PPIICC的"通知权限"。...按下Home键返回主页,切换到你想截图的界面,点按屏幕左下角的"倒三角形"图标即可开始截图,截完第一张图后,再次点按"倒三角形"图标,屏幕将自动滚动并开始截第二张图。以此类推。...当截到倒数第二张图时,为了保证效果,你可能需要手动滚动屏幕到合适位置来确定长截图的末尾位置。确定好长截图末尾位置时,点击"正方形"按钮来结束滚动截屏。

    1.7K20

    浅谈Android自定义锁屏页的发车姿势

    一旦用户做其他操作,例如点击一次屏幕,导航栏就会马上被重新调出。...Android 4.4 之后加入的Immersive Full-Screen Mode 允许用户在应用全屏的情况下,通过在原有的状态栏/导航栏区域内做向内滑动的手势来实现短暂调出状态栏和导航栏的操作,且不会影响应用的正常全屏...,通过其他标签设定状态栏和导航栏显示或隐藏,以及显示或隐藏的样子。...,不占据屏幕布局空间;SYSTEM_UI_FLAG_HIDE_NAVIGATION,才是能够隐藏导航栏的Flag;SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN,由上面可知,也不能隐藏状态栏...所以,透明栏只是能够改变状态栏和导航栏的颜色,并不像沉浸模式那样隐藏状态栏和导航栏,两者是有本质区别的。

    2.3K80

    最新iOS设计规范五|3大界面要素:控件(Controls)

    你也可以设计自定义按钮。 系统按钮 系统按钮通常出现在导航栏和工具栏中,也可以在任何地方使用。 ? 在标题中使用动词。特定于操作的标题显示按钮是交互式的,并说明单击该按钮时会发生什么。...信息按钮 翻转视图后,“信息”按钮可显示有关应用程序的配置详细信息,有时会显示在当前视图的背面。信息按钮有两种样式:浅色和深色。选择与您的应用程序设计最匹配且不会在屏幕上看不清楚的样式。 ?...打开时,情境菜单将显示该项的预览并列出对其起作用的命令。用户可以选择命令或将项目拖动到另一个区域、窗口或应用程序。 采用一致的上下文菜单。...进度条非常适合显示任务的状态,尤其是当它帮助传达任务需要完成多长时间时。 在导航栏和工具栏中隐藏轨道的未填充部分。默认情况下,进度条的轨道包含已填充和未填充的部分。...当在导航栏或工具栏中使用时,进度栏应配置为隐藏轨道的未填充部分。 进度条的外观可以自定义。可以调整进度条的外观以匹配APP的设计。例如,您可以为轨道填充指定自定义色调或图像。

    8.6K30

    iOS开发UINavigation系列四——导航控制器UINavigationController

    iOS开发UINavigation系列四——导航控制器UINavigationController 一、引言         在前面的博客中,我么你介绍了UINavigationBar,UINavigationItem...和UIToolBar,UINavigationController是将这些控件和UIViewController紧密的结合了起来,使用导航,我们的应用程序层次会更加分明,对controller的管理也更加方便...controller的管理         导航控制器是一个堆栈结构,只是其中管理的对象是controller,通过push与pop进行controller的切换,我们有两种方式可以创建导航控制器: /...; //屏幕滑动的时候隐藏导航栏,常用于tableView,上滑隐藏导航栏,下滑显示,带动画效果 @property (nonatomic, readwrite, assign) BOOL hidesBarsOnSwipe...; //横屏的时候隐藏导航栏 @property (nonatomic, readwrite, assign) BOOL hidesBarsWhenVerticallyCompact; //敲击屏幕可以隐藏与显示导航栏

    1.8K20

    AndroidMainifest标签说明2——<activity>

    activity时它会是不可兼得,此时activity是否可以从堆栈中移除和finishi()。...系统读取这个属性,以确定哪些活动时应開始使用按下button在操作栏。该系统还能够使用此信息来综合与TaskStackBuilder回堆栈的活动。...在动作条显示操作项,当约束的水平空间。而不是少数出如今屏幕上方操作栏中的行动项目。操作栏被分成顶部导航部分和操作项的底部栏。这保证了空间的合理量可供不仅为行动项目,同一时候也为在顶部导航和标题元素。...菜单项不会在两个栏分裂;他们总是一起出现。 android:windowSoftInputMode 窗体软键盘模式。...“stateUnchanged” 软键盘上一次保存在不论什么状态,是否可见或隐藏,当活动走到前台。 “stateHidden” 软键盘是隐藏的,当用户选择activity时。

    1.5K00

    PowerBI中的书签和导航页,如何选择呢?

    不过,要在两个页面中进行来回切换,由于目前有了页导航,我们就需要来分析一下这两种方式在不同的场景中的优缺点了: 1.严格地在多个页面之间切换 当我们要做地仅仅从一个页面切换到另一个页面,比如有一个导航栏...,我们通过点击导航栏的不同位置,进入不同的页面: ?...缺点是: 页导航只限于按钮,不能使用图片/形状来跳转,如果一定要使用图片或形状,那么需要在图片/形状上再放一个按钮,很麻烦 2.多个可视化对象与多个隐藏显示组合 很多时候我不得不去处理这样一些报告。...隐藏一个可视化对象时,它是不会被加载的,这很合理,所以我就应该使用书签吗? 严格来说,对你来讲,哪些是重要的,哪些是次要的,这决定了你该如何选择。...在很长一段时间里,我喜欢用书签,但是当我发现在做一些数据量比较小的项目时,页导航做起来的确更加便利。不过,书签给用户的如丝般顺滑的体验,是页导航无论如何也不能给的。

    7K31

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

    2工具栏 工具栏详细如下图: ? 工具栏的工具都是从菜单栏中提取出来的一些常用的功能,为的是能够快速操作。...从左至右依次为打开项目、保存、同步、撤销、重做、剪切、复制、粘贴、查找、替换、已打开的文件标签向前切换、已打开的文件标签向后切换、编译、配置运行和调试应用、运行、应用更改、调试、运行覆盖范围的应用程序、...3导航条 导航条用来辅助查看打开的项目和文件,也可以自己打开或关闭导航条功能。...左下角的图标为工具栏窗口显示和隐藏开关,可单击完成工具栏的显示和隐藏。...区域7为设备操作按钮,从上到下分别为:截屏、录像、系统信息、停止应用、布局查看、Android Monitor帮助信息。

    3.3K60
    领券