首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

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

这有利于提高我们的工作效率,保证用户良好的体验。 本文是iOS设计规范系列第3篇,介绍3大界面要素(、视图、控件)中的(Bars)。首先让我们了解一下iOS的3大界面要素。...在iOS 13及更高版本中,默认情况下,大标题导航包含背景材质或阴影。另外,随着页面滑动,大标题要转换为标准标题。 ? 隐藏大标题导航的边框。...在iOS 13及更高版本中,可以通过删除导航的阴影来隐藏导航的底部边框(当滑动内容区域时,边框会自动重新出现)。无边框样式在大标题导航中效果很好,因为它增强了标题和内容之间的联系感。...将正确的外观应用于边。要创建侧,请使用集合视图列表布局的侧栏外观。 使用边在应用程序级别组织信息。补充工具是拉平信息层次结构并同时提供对多个对等信息类别或模式的访问的一种好方法。...确保标签标志符号在视觉上保持一致和平衡。在iOS 13及更高版本中,您可以使用SF符号来表示选项卡项目。在所有版本的iOS中,系统API提供了一系列预设图标。当然你也可以自定义图标。

9.8K10

双管齐下:同时设计 iOS 和 Anroid

不管你是在家,在公司,还是在设计师工作工作,互联网企业都会找你去给他们设计 App。为了满足所有顾客的需要,这些企业通常需要同时开发运行在 Android 和 iOS 设备上的 App。...通用元素 两种平台之间的确存在着一些通用的元素,比如说状态和标题,它们会出现在每一屏的顶部。你不应当改变导航的高度,如果你想让 App 看起来更加原生的话。...不同平台上的导航有一定的差别。在 Android 上文本是左对齐的,然而 iOS 上是居中对齐的。...状态(显示你的网络、电量和时间信息)是系统组件,你不需要考虑设计它,只要确保它们不会对他人造成误解就好了。 ? 4. 导航 或许iOS 和 Android 平台之间最大的区别就在于他们的导航样式了。...这里是两个平台上的 icon 对比,你也可以点击这里的链接查看 iOS 和 Android 下的 icon 设计规范。 ? 13. 面包菜单、载入图片 不幸的数字 13(注:最后的晚餐的在场人数)。

1.3K50

iOS应用黑暗模式设计终极指南(附套件下载)

在本指南中,我将逐步解释为iOS应用设计暗模式的过程。本文将重新设计WhatsApp,基于Apple的人机界面指南。 ? 在WWDC 2019大会上,苹果公布了iOS 13的所有新功能。...使用iOS 13后,人们可以选择采用深色系统外观。这意味着打开黑暗模式时,iPhone上的所有应用程序都将具有黑暗外观。 因此,作为设计师和开发人员,为您的应用程序设计和实现黑暗模式非常重要。...对于搜索,我使用了填充色。 那么,是否必须以这种方式使用这些颜色?。如前所述,你可以随意使用所有10种颜色(4种填充+ 6种灰色)。 06 分隔线颜色 iOS规范为我们提供了分隔线的2种变体。...观察顶部导航和底部标签。尽管准则不将其视为材质,但它们显然可以称之为“材质”。 由于透明度值非常高(94%),您可能看不到条形内容的模糊。但这会产生非常微妙的效果。 那么,这些元素必须是材质吗?...两个导航都应用了背景模糊。左边的那个不是完全不透明的。但是正如您所看到的,它们几乎没有任何区别。另外,下面的内容也不会模糊。 请注意下图,不同的材质所产生的视觉效果是不一样的: ?

3.2K10

iOS Human Interface Guidelines》——Progress View进度视图

进度视图 进度视图显示一个任务的进度或者一个知道持续时间的进程(如下所示是邮件中的工具)。...一个进度视图: 由一个随着任务或进程的进度从左向右填充的轨迹构成 不允许用户交互 iOS定义了两种风格的进度视图: 默认风格。默认风格包含了一个未填充的轨迹外观,这样它就可以独立于内容区域。...风格。风格包含未填充的轨迹外观,因为它意在和一起显示,比如导航或工具。 使用进度视图来给有着明确定义持续时间的任务一个反馈,尤其是当要显示任务大约还要耗费多长时间时很重要。...合适的话,协调进度视图的外观和你app的风格保持一致。通过自定义一个进度视图,你可以特定比如进度视图的轨迹和填充的自定义的色调或图片。 本文翻译自苹果官方开发文档

34420

最新iOS设计规范八|3大图标和图像规范(Icons and Images)

这有利于提高我们的工作效率,保证用户良好的体验。 iOS设计规范系列共10篇。本文是第8篇,介绍图标和图像(Icons and Images)。...三、系统图标(System Icons)iOS12及更早版本 在iOS 13或更高版本中,更习惯使用SF符号来表示APP中的任务和模式。...导航和工具图标 标签图标 主屏幕快速操作图标 在运行iOS12及更早版本的APP中,尽可能使用这些内置图标是个好办法,因为它们对用户来说已经很熟悉了。 按预期使用系统图标。...导航和工具图标 在导航和工具中使用以下图标。 注:可以使用文本代替图标来表示导航或工具中的项目。例如:日历在工具中使用“今日”、“日历”和“收件箱”。...还可以使用固定空间元素在导航图标和工具图标之间提供填充。 ? ? 标签图标 在标签中使用以下图标。 ? 主屏幕快速行动图标 在主屏幕快速操作菜单中使用以下图标。 ? ? ?

2.9K20

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

确保你自定义的导航在你的应用的每个视图中都拥有一致的外观与体验。举个例子,不要在同一个应用中使用不透明导航和半透明工具。...在屏幕处于同一方向时,最好不要改变不同屏上导航的背景图片、颜色和透明度。 确保你自定义的返回按钮的外观与操作仍然像一个返回按钮。...(想要了解更多关于这个常数的内容,请参考 UIBarButtonItem Class Reference.) 4.1.4 工具导航标准按钮 iOS提供了一系列工具导航上的内置标准按钮。...重要 跟所有标准按钮和图标相同,应当根据文档中说明的图标含义,而不是只凭图标外观来使用这些工具图标和导航图标。...在iOS 8以及之后的版本里,你可以通过UISearchDisplayController简单快捷地把搜索放在导航中。

10.1K51

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

这有利于提高我们的工作效率,保证用户良好的体验。 本文是iOS设计规范系列第二篇:7大应用架构。...为了在你的应用中呈现自定义的模态内容,iOS 13和更高版本支持以下两种表现风格: (一) 工作表(卡片弹窗) 工作表演示样式显示为一张卡片,并覆盖在页面上。未被覆盖的区域变暗显示,无法进行交互。...模态视图外观应与APP风格统一。例如,当模态视图包含导航时,它应该采用与APP导航相同的外观。 为模态视图的展示提供合适的过渡动画。使用与APP风格统一的过渡动画,增强用户对内容转变的认知。...使用标准导航组件。尽可能使用标准导航控件,例如页面控件,标签,分段控件,表视图,集合视图和拆分视图。用户已经很熟悉这些控件了,这样能够让用户更轻松地使用你的APP。 使用导航贯穿层级结构。...导航的标题可以显示层级结构中的当前位置,返回按钮可以轻松返回到上一位置。 使用 Tab Bar(标签)展示对应类别的内容或功能。使用标签显示对应类别的内容或功能。

2.5K20

iOS15适配

适配以iOS15 beta6和xcode13 beta5为环境基础 UINavigationBar 用新xcode13编译工程后,导航的问题比较明显,调试之后发现是UINavigationBar部分属性的设置在...iOS15上是无效的 旧代码 navigationBar.setBackgroundImage(UIColor.clear.image, for: .default) // 导航背景,主题色是绿色 navigationBar.barTintColor...,呈现是白色,字体颜色也没有生效,呈现黑色,查看导航特性API:UINavigationBarAppearance后发现,iOS15navigationBar的相关属性设置要通过实例UINavigationBarAppearance...来实现,UINavigationBarAppearance是iOS13更新的API,应该有人已经在用,我们的应用兼容iOS10以上,对于导航的设置还没有使用UINavigationBarAppearance...结尾 目前看iOS15适配工作量较小,后续发现新的适配内容我也会同步更新。

2.3K30

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

这有利于提高我们的工作效率,保证用户良好的体验。 本文是iOS设计规范系列第5篇,介绍3大界面要素(、视图、控件)中的控件(Controls)。首先让我们回顾一下iOS的3大界面要素。...(Bars) ,可以告诉用户在APP中当前在所在的位置、能提供导航,还可能包含用于触发操作和传递信息的按钮或其他元素。包括6种:导航、搜索、侧边、状态、标签、工具。...三、情境菜单(Context Menus) 在iOS 13及更高版本中,你可以使用情境菜单让用户访问与APP相关的其他功能,而不会使界面混乱。 ?...在导航和工具中隐藏轨道的未填充部分。默认情况下,进度条的轨道包含已填充和未填充的部分。当在导航或工具中使用时,进度应配置为隐藏轨道的未填充部分。 进度条的外观可以自定义。...网络加载指示(Network Activity Indicators) 网络加载指示在iOS 13和全面屏显示的设备上已被弃用。

8.5K30

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

这有利于提高我们的工作效率,保证用户良好的体验。 本文是iOS设计规范系列第4篇,介绍3大界面要素(、视图、控件)中的视图(Views)。首先让我们回顾一下iOS的3大界面要素。...(Bars) ,可以告诉用户在APP中当前在所在的位置、能提供导航,还可能包含用于触发操作和传递信息的按钮或其他元素。包括6种:导航、搜索、侧边、状态、标签、工具。...浮层适合大屏幕上,可以包含各种元素,包括导航、工具、标签、表格、集合、图像、地图和自定义视图。当浮层出现时,其他视图的交互行为会被禁止,直到浮层被取消/关闭。...拆分视图提供与选项卡相同的快速导航,同时更好地利用了大屏幕。 为每种类型的列选择适当的样式。对于显示侧的主列,请使用侧栏外观。此外观适用于应用程序级导航和集合列表,例如Mail中的邮箱。...使用网页视图让用户在不离开APP当前页的情况下,短暂地访问网站很好,但Safari是用户在iOS上浏览网页的主要方式。所以在你的APP中提供与Safari相似的功能没有必要的,而且也鼓励这样做。

8.3K31

iOS10-iOS15主要适配回顾

ios15适配 1、UITabar、NaBar新增scrollEdgeAppearance,来描述滚动视图滚动到bar边缘时的外观,即使没有滚动视图也需要去指定scrollEdgeAppearance,...,解决参考iOS15 ATTrackingManager请求权限弹框 4、iOS15终于迎来了UIButton的这个改动 ios14适配 1、更改了cell布局视图,之前将视图加载在cell上,将会出现...3、IDFA必须要用户用户授权处理,否则获取不到IDFA 4、 UIPageControl的变化 具体参考iOS 14 UIPageControl对比、升级与适配 ios13适配 -1、 iOS 13...13 DeviceToken有变化 5、模态弹出默认不再是全屏。...之前设置na bar和tab bar外观的方法可能会无效 ios12适配 1、C++ 标准库libstdc++相关的3个库(libstdc++、libstdc++.6、libstdc++6.0.9 )废弃

1.2K50

最新iOS设计规范七|10大视觉规范(Visual Design)

这有利于提高我们的工作效率,保证用户良好的体验。 本文是iOS设计规范系列第7篇,介绍视觉设计(Visual Design)。 10大视觉规范 (Visual Design) ?...安全区域还可以防止内容重叠在状态导航,工具和选项卡上。系统提供的标准视图将自动采用安全区域布局指南。 尺寸类型 尺寸类型是根据大小自动分配给内容区域的特征。...尤其是导航中要禁止,因为说明性的标题对用户会更有用。 遵守Apple的商标准则。Apple商标不应出现在你的APP名称或页面中。...iOS 13还引入了一系列六种不透明的灰色颜色,你可以在半透明效果不佳的极少数情况下使用它们。例如:交叉或重叠元素(例如网格中的线条或条形)在不透明基础上看起来更好。...符合人们在“设置”中选择的外观模式。如果您提供了特定于应用程序的外观模式选项,则会为人们创建更多工作,因为他们必须调整多个设置。

7.9K30

iOS 知识小集(Status Bar变换)

背景 iOS 中经常会有需要在某个界面改变状态颜色或者某个界面隐藏状态的需求。而改变状态颜色和控制状态显示和隐藏的API,在iOS 的不同版本中也发生了很多变化。...API iOS 7 ~iOS 9 从iOS 7开始系统风格大变样,图标扁平了,状态也不在闹独立了。因为状态的会受到导航或者View背景色的影响,所以状态的风格也需要实时调整了。...-%s",__func__); return NO; } 从打印结果: 2016-05-18 13:18:10.248 PractiseProject[3296:112707] 导航--[BaseNavigationController...] 2016-05-18 13:18:10.275 PractiseProject[3296:112707] 导航--[BaseNavigationController preferredStatusBarStyle...05-18 13:18:10.275 PractiseProject[3296:112707] 导航--[BaseNavigationController preferredStatusBarStyle

1.3K21

iOS之深入解析Xcode 13正式版发布的40个新特性

一、前言 Xcode 13 包括适用于 iOS 15、iPadOS 15、tvOS 15、watchOS 8 和 macOS Big Sur 11.3 的 SDK。...十二、Instruments Instruments 中的调用树视图和扩展详细信息视图现在用“[inlined]”标记指示内联函数; 通过详细视图导航更容易发现不同的视图。...,例如 Constraints; Interface Builder 有一个重新设计的画布底部,带有用于更改设备和布局的弹出窗口,以及用于更改设备外观和方向的开关; 添加了对 UIButton 和 UIBarButtonItem...从 Swift 类、协议或方法声明跳转到定义还可以轻松导航到整个工作区中的所有子类、扩展和符合协议的类型; Xcode 13 包括重新设计的 Swift 代码完成功能,可最大限度地提高可靠性和性能,尤其是在项目源代码中存在结构和逻辑不一致的情况下...对于与 iOS 15 和 iPadOS 15 或更高版本链接的应用程序,QuickType 已启用并显示拼写检查候选。

8.7K40
领券