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

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

有时,导航的右侧也会有一个控件,如“编辑”或“完成”按钮,用于管理活动视图中的内容拆分视图中,导航可能会显示拆分视图的单个窗格中。...无边框样式大标题导航中效果很好,因为它增强了标题内容之间的联系感。但是,无边框样式标准标题导航中可能无法很好地起作用,因为该的标题按钮可能难以区分。...iPad上的拆分视图一个例外,更多的是通过在这两种视图中使用无边框样式来保持主视图辅助视图之间的一致性。 导航控件 避免导航上挤满太多控件。...如果导航包含多个文本按钮,需要通过在按钮之间插入固定的空格项目来增加分隔。以此来避免按钮文本同时显示造成按钮无法区分的问题。 考虑导航中使用分段控件,使APP的层次结构更加扁平。...搜索可以单独显示,也可以显示导航内容视图中。当显示导航中时,可以将搜索固定在导航中,以便始终可以调用。也可以将其折叠,当用户向上滑动时展开显示

9.8K10

Cocoa编程中视图控制器与视图类详解

使用pushViewController: animated:可推入一个新的控制器,从而增加新的项到导航栈。(记住:导航控制器不添加一个视图进去,这个导航是没有意义的!)...其描述了导航显示内容,而正好UIViewController另有一导航项属性navigationItem包括左按钮(leftBarButtonItem)、右按钮(rightBarButtonItem...)标题(title)、用于显示标题的视图(titleView),以及用于从当前视图向后导航的Back按钮(backBarButtonItem)隐藏后退按钮(hidesBackButton)。...1.作用: •创建和管理视图。 •管理视图显示的数据。 •设备方向变化,调整视图大小以适应屏幕。 •负责视图模型之间的数据及请示的传递。 2....设计模式     传统的mvc设计模式 image.png 添加描述    iOS mvc设计模式 image.png 添加描述 主要区别在于viewmodel之间的数据交换都要通过控制器来协调

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

Visual Studio Code 1.73正式发布

微软于今天正式发布了 1.73 版本,更新内容如下: 从搜索中包括排除文件夹 当在搜索视图的结果树状视图中右键单击一个文件夹时,现在在上下文菜单中有两个新的选项。...Command Center 模式快捷方式 Command Center(命令中心)增加一个新的顶部部分,使其容易发现如何导航到文件、运行命令等。...命令中心的用户界面默认不显示标题中,但你可以通过 Window.CommandCenter( window.commandCenter)启用它,或右键点击标题并勾选命令中心来启用。...Diff 优化 当基础视图被打开时,会显示当前聚焦的一边基础之间的差异。这个差异视图可以用来更好地理解 Incoming Current 的变化。...这个版本的亮点包括: 开发容器模板 - 现有模板的基础上快速创建一个开发容器。 开发容器功能 -- 通过包括预包装的功能来为开发容器增加功能。 没有起始文件夹的情况下创建新的开发容器。

1.2K30

最新iOS设计规范十|5大拓展程序(Extensions)

加载文件提供程序扩展时,其界面将显示包含导航模式视图中。 ? 用户打开或导入文件时,仅显示特定于上下文的文档信息。当用户打开或导入文档时,仅显示适合当前上下文的文档。...您的扩展程序将加载到已经包含导航模式视图中。提供第二个导航会造成混乱,并占用您内容的空间。...尽管它们屏幕上不可见,但是图像名称其他文本标签使VoiceOver可以听得见地描述贴纸,从而使视力障碍者的导航更加轻松。 通过动画增加活力。...要访问照片编辑扩展名,照片必须处于编辑模式。在编辑模式下,点击工具中的扩展名图标将显示可用编辑扩展名的操作菜单。选择一个将在包含导航模式视图显示扩展的界面。...如果尚未进行任何编辑,则无需显示此确认。 不要提供自定义导航。您的扩展程序将加载到已经包含导航模式视图中。提供第二个导航会造成混乱,并占用正在编辑内容的空间。 让人们预览编辑。

3.1K10

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

另外,本文还将提供原生应用设计示例,以帮助你更好的理解本文所写的内容导航模式的差异 界面之间切换是移动应用中的常见操作。...Android应用中被大家熟知的导航模式是抽屉标签形式的组合。 抽屉导航其实是一个菜单,通过点击汉堡图标,然后从左侧或右侧滑出。...标签一般位于标题的下方,使得内容能够很好地被管理,通过标签,用户可以对应用的视图,数据集功能进行切换。...iOS的两种常见导航形式,分段控制底部标签 虽然两个操作系统中都有类似的功能(切换标签分段控制,底部导航标签),但导航形式仍然是iOSAndroid之间的主要区别之一。...模态视图又有两种不同类型:具有不同操作内容的模态列表用户点击“共享”图标后显示的应用列表。iOS上也能找到类似的组件,但是设计风格布局上差异比较大。

3.2K10

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

以下有一些方法可以让滚动的内容能正常显示状态 后面: 使用导航控制器(navigation controller)来展示内容导航控制器自动展示状态背景,同时能确保内容视图不会出现在状态后面。...而当你导航中使用了分段控件,就不要再放标题以及其它多余控件了。 确保文字按钮之间拥有足够的空间。如果导航左边或右边的文字按钮之间的间距太小,那些文字看起来会像挤在一起一样,让用户难以区分。...可以工具里放置分段控件以方便用户快速切换当前内容的不同视图模式工具中提供应用全局的任务或者模式分段控件是不恰当的,因为工具中的所有操作都应当是针对当前屏幕视图的。...如果按钮之间间距过小,会让蚊子看起来挤在一起,让用户觉得它们难以区分。如果按钮导航中显得太过拥挤,可以用UIBarButtonSystemItemFixedSpace常数来增加他们之间的间距。...可以应用在页模式(paging mode)中,在此模式下用户可以通过拖拽轻击等手势来浏览一页的内容 使用滚动视图来允许用户固定的空间内浏览大尺寸或大量的视图。 适当地支持缩放操作。

10.1K51

《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(3)-再识Charles

2.Charles主界面概览 Charles的主界面分为:①主导航、②请求视图导航【树状视图列表视图】、③捕获请求列表、④过滤器、⑤请求内容详情、⑥请求内容导航、⑦响应内容详情⑧响应内容导航八部分组成...此功能是领抓取的数据显示或者不显示的设置。 这个本人认为是charles工具很方便的一个,一般都使其为不显示抓取状态,只有当自己测试的时候的前后,令其为抓取并显示状态。...显示模式 Charles有两种显示模式,stucture sequence。支持来回切换。...,有木有… 3.3捕获请求列表 Charles 抓取接口后会展示视图导航下,默认是选择的:Structure 视图,当数据多时可采用过滤器过滤。...(TLS) 的扩展, ALPN 使得应用层可以协商安全连接层之上使用什么协议, 避免了额外的往返通讯, 并且独立于应用层协议。

2.2K41

iOS 9人机界面指南(一)上篇:UI设计基础 - 腾讯ISUX

它能协调视图内容显示,实现与用户交互的功能并能在不同屏幕内容之间切换。比如,“设置”使用了一个导航控制器来展示其视图层级。...iOS能随着尺寸类别显示环境变化而自动生成不同布局。举个例子,当垂直尺寸从压缩变为常规时,导航工具会自动变高。 当你靠尺寸类别来驱动布局变化时,你的应用在任何显示环境时都能显示得很好。...例如,如果你水平的常规模式下使用了网格来显示图像,那么无需压缩模式下使用列表来展示同样的内容,虽然你可能调整了网格的尺寸。 如果你的应用只一个方向上运行,那么请直接一点。...使用标签(Tab Bar)显示同类型的内容或功能。标签很适合于扁平信息结构,可以让用户分类之间随意切换,而不用在意当前所处的位置。想要了解更多内容,请查看Tab Bar....分段控件让用户一屏内就可以查到不同分类的内容,而不需要切换到其他屏幕。 工具(Toolbar)。尽管工具导航或标签相似,但是工具不具导航作用。

1.8K41

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

(Bars) ,可以告诉用户APP中当前在所在的位置、能提供导航,还可能包含用于触发操作和传递信息的按钮或其他元素。包括6种:导航、搜索、侧边、状态、标签、工具。...系统按钮 系统按钮通常出现在导航工具中,也可以在任何地方使用。 ? 标题中使用动词。特定于操作的标题显示按钮是交互式的,并说明单击该按钮时会发生什么。 使用标题格式命名标题。...页面控件显示屏幕底部的中心。页面控件应始终位于内容底部屏幕底部之间的区域,并保持居中。这样即能让页面控件是可见,又不会遮挡其他内容。...折叠后,紧凑型样式将显示一个按钮,该按钮以应用程序的主色显示当前值。当人们点击按钮时,日期选择器将扩展为模式视图,从而提供对熟悉的日历样式编辑器时间选择器的访问。...进度条非常适合显示任务的状态,尤其是当它帮助传达任务需要完成多长时间时。 导航工具中隐藏轨道的未填充部分。默认情况下,进度条的轨道包含已填充未填充的部分。

8.5K30

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

系统 UI 包括屏幕上由系统提供的所有 UI,例如导航状态,另外它还包括诸如通知面板之类的内容。...自 API 1 以来,它们就以各种形式存在着,并且每当系统 UI 重叠显示您的应用上方时,这个方法就会被调用。常见的例子是下拉状态导航,或者弹出屏幕软键盘 (IME)。...系统使用手势导航模式时 (即导航变成屏幕底部的一条粗线,也就是导航条),由于导航条有动态色彩调整功能,这个冲突可能不会那么明显。...这里让我们仍然使用 FAB 来举例: 注意看上图,导航模式下,FAB 不会进入导航占据的高度 (48dp)。...在有些显示模式下 (比如放松模式沉浸模式),系统 UI 可能会根据情况可见与不可见之间切换 (如游戏、照片浏览、视频播放器等)。

2.8K30

SwiftUI 4.0 的全新导航系统

NavigationSplitView 如果说 NavigationStack 是在三维的空间里堆叠视图,那么 NavigationSplitView 便是二维的空间中于不同的之间动态切换视图。...无论将 List 放置 NavigationSplitView 的最左侧一( 双模式 )还是左侧两中( 三模式 ),都可以通过 List 的绑定数据进行导航。...动态控制多显示状态 另一个之前困扰多 NavigationView 的问题就是,无法通过编程的手段动态地控制多显示状态。...iPad Portrait 显示状态下,默认即为此种模式 balanced 显示左侧的时候,缩小右侧 Detail 的尺寸。...另一方面,新导航系统也向每一个开发者传递了明确的信号,苹果希望应用能够为 iPad macOS 提供更加符合各自设备特点的 UI 界面。

10.2K62

iOS好用的第三方侧边控件——MMDrawerController

,其支持左侧抽屉右侧抽屉,可以很好的支持导航控制器,并且支持开发者对手势动画进行自定义。...二、MMDrawerController的使用及相关设置         MMDrawerController的使用十分简单,只需将中心视图控制器左边视图控制器传入初始化方法即可完成MMDrawerController...= 1 << 3, //点击导航时可以关闭侧边 MMCloseDrawerGestureModeTapNavigationBar = 1 << 4, //点击中心视图控制器视图时可以关闭侧边...(nonatomic, assign) BOOL showsShadow; //设置是否显示状态的自定义视图 只有iOS7之后可用 @property (nonatomic, assign) BOOL...2.同时展示左边与又边。 3.无法设置显示一个最小的抽屉宽度。 4.不能支持UITabBarController容器。 5.不能在中心视图控制器之上呈现侧边视图

2.8K20

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

屏幕转场风格 默认情况下,createStackNavigator提供了转场过渡效果,AndroidiOS上过渡效果是不同的,这也是React Native重平台性的一个体现,Android上从屏幕底部淡入...RouteConfigs RouteConfigs支持三个参数screen、path以及navigationOptions; screen(必选):指定一个 React 组件作为屏幕的主要显示内容,当这个组件被...headerMode: 导航显示模式: screen: 有渐变透明效果, float: 无透明效果, none: 隐藏导航。 float: 无透明效果, 默认。...:React 元素或组件标题的后退按钮中显示自定义图片。...headerRight: 定义导航右边视图; headerLeft: 定义导航左边视图; headerStyle: 定义导航的样式,比如背景色等; headerTitleStyle: 定义标题的样式

4.9K10

最新iOS设计规范二|7大应用架构

如果使用当前上下文模式视图样式拆分视图窗格,弹出窗口或其他非全屏视图显示模式内容,则在紧凑环境中显示模式内容时,应切换为使用工作表。 模态设计规范如下: 模态要在合适的时机使用。...为你的APP设计一个信息架构,在这个架构中,只需要最少的点击、最少的滑动最少的页面数量便可以访问相应内容。 使用手势操作让页面切换更流畅。让用户以最小的阻力页面之间跳转。...例如,你可以让人们从页面侧面滑动以返回上一个页面。 使用标准导航组件。尽可能使用标准导航控件,例如页面控件,标签,分段控件,表视图,集合视图拆分视图。...使用导航贯穿层级结构。导航的标题可以显示层级结构中的当前位置,返回按钮可以轻松返回到上一位置。 使用 Tab Bar(标签)展示对应类别的内容或功能。使用标签显示对应类别的内容或功能。...标签可让人们快速轻松地不同类别之间切换。 iPad上,使用拆分视图而不是标签。拆分视图提供与选项卡相同的快速导航,同时更好地利用了大屏幕。 当您具有内容类型相同的多个页面时,请使用页面控件。

2.5K20

Human Interface Guidelines —— Tab Bars

·通常,使用tab bar来组织app级别的信息 选项卡是一种平滑信息层次结构的方式,也能够同时对多个同等信息类别或模式进行访问。...例如,选择左侧分割视图(split view)的tab不应导致分割视图的右侧突然更改。popover中选择一个tab不应该导致弹出窗口后面的视图发生变化。...·使用badging低调沟通 您可以选项卡上显示badge(包含白色文字、数字或感叹号的红色椭圆),以表明与该视图模式相关的新信息。...tab bar 可让用户app的不同部分之间快速切换,例如时钟应用中的闹钟,秒表计时器tab。Toolbar 包含用于执行与当前上下文相关的操作的按钮,如创建项目,删除项目,添加注释或拍摄照片。...标签工具永远不会同时出现在同一个视图中。

1.3K150

好用、强大的大纲编辑器综合评测:Workflowy、 Dynalist 、 幕布、 Cloud Outliner 、 坚果云大纲笔记、 双链笔记、 大纲模式软件

基于大纲的结构树功能,文本的标题、段落等内容显示一个区域内,因此称为one pane.优点:文本本身就是结构化的,并且因为文本的多个节点同时可见,所以很容易跨区域进行编辑。...缺点:因为结构并不总是可见的,所以没有像两窗格大纲那样强大的整体概览或在部分之间快速导航的能力。解决办法:使用快捷键或者手势操作实现大纲结构的折叠与展开,以此实现整体部分之间的快速导航。...带有节点标题的树结构显示一个窗格中,文本显示一个窗格中。优点:由于结构始终与内容分开显示,因此这种格式允许快速浏览结构并轻松导航。...缺点:由于一次只显示一个节点的文本,并且导航具有跨窗格的附加步骤,因此结构更加僵化,使得跨节点编辑更加困难。解决办法:双链大纲笔记的 Sidebar & MOC 功能,即在侧边面板中显示大纲结构。...节点设计|强化了文本编辑能力:用户可以很方便地建立文本之间的树状关系【缩进】、结构内容|整体部分之间快速导航【折叠展开】、跨区域的编辑组织|内容重组【拖拽】、基于节点的精准筛选【Search/Filter

2.2K00

Visual Studio Code 1.73 正式发布!

微软于今天正式发布了 1.73 版本,更新内容如下: 从搜索中包括排除文件夹 当在搜索视图的结果树状视图中右键单击一个文件夹时,现在在上下文菜单中有两个新的选项。...Command Center 模式快捷方式 Command Center(命令中心)增加一个新的顶部部分,使其容易发现如何导航到文件、运行命令等。...命令中心的用户界面默认不显示标题中,但你可以通过 Window.CommandCenter( window.commandCenter)启用它,或右键点击标题并勾选命令中心来启用。...Diff 优化 当基础视图被打开时,会显示当前聚焦的一边基础之间的差异。这个差异视图可以用来更好地理解 Incoming  Current 的变化。...这个版本的亮点包括: 开发容器模板 - 现有模板的基础上快速创建一个开发容器。 开发容器功能 -- 通过包括预包装的功能来为开发容器增加功能。 没有起始文件夹的情况下创建新的开发容器。

67430

iOS 图标图像 (官方翻译版)

例如,日历工具中使用“今天”,“日历”“收件箱”。您还可以使用固定的空格元素来提供导航工具图标之间的填充。 ?...显示包含在当前上下文中有用的共享扩展,操作扩展任务(如“复制”,“收藏夹”或“查找”)的模态视图。行动 ? 添加导航标签图标 加 ? 书签导航标签图标 显示应用专用书签。书签 ?...相机导航标签图标 拍摄照片或视频,或显示照片库。相机取消 ? 取消 关闭当前视图或结束编辑模式,而不保存更改。取消 ? 撰写导航标签图标 在编辑模式下打开新视图。撰写 ?...完成 保存状态并关闭当前视图,或退出编辑模式。DONE ? 编辑 在当前上下文中进入编辑模式。编辑 ? 快进导航标签图标 通过媒体播放或幻灯片快进。快进 ?...播放导航标签图标 开始或恢复媒体播放或幻灯片。开始 ? 重做 重做已撤销的最后一个操作。重做 ? 刷新导航标签图标 刷新内容 请谨慎使用此图标,因为您的应用程式应尽可能自动刷新内容

3.6K40

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

如果系统必须执行缩放,那么所有图像具有相同的大小形状时,最容易实现。 六、页面视图(Pages) 页面视图控制器提供了一种在内容页面之间实现线性导航的方式,例如在文档、书籍、记事本或日历中。...在这种类型的界面中,主要列显示侧边,可选补充列显示列表视图,辅助内容窗格显示有关所选内容的详细信息。 iPad上,使用拆分视图而不是标签。...拆分视图提供与选项卡相同的快速导航,同时更好地利用了大屏幕。 为每种类型的列选择适当的样式。对于显示的主列,请使用侧栏外观。此外观适用于应用程序级导航集合列表,例如Mail中的邮箱。...由于拆分视图提供了对多个层次结构的访问权限,因此人们可以通过之间拖放项目来将内容从应用程序的一个部分快速移动到另一部分。...十二、网页视图(Web Views) 网页视图可以APP中加载显示丰富的网页内容。例如:嵌入式HTML网站;邮箱APP使用网页视图消息中显示HTML内容。 ? 适当地使用前进后退导航

8.3K31

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

: 开启全面屏体验|手势导航 (一) 处理视觉冲突|手势导航 (二) 在上一篇文章中,我们讨论完了从边到边绘制应用内容。...我们准备了一张流程图帮助大家快速做出决策: △ 请点击图片放大查看 注解: 非粘性沉浸模式: 用户可以通过系统上滑动来退出沉浸模式。...粘性沉浸模式: 用户可以通过系统上滑动来暂时退出沉浸模式 这里我们向您进一步解释一下流程图里的内容。 问题 1: 应用需要隐藏导航或状态吗?...流程图里的第一个问题,询问您应用的主要使用场景是否需要隐藏导航/或状态。所谓 "隐藏",是指让它们根本不可见。这并不意味着让您的应用实现从边到边的全屏状态。...问题 6: 该视图/控件是否强制系统手势交互区域重叠? 最后一个问题询问该控件是否位于系统强制手势导航交互区域内。

4.8K30
领券