首页
学习
活动
专区
圈层
工具
发布

苹果iOS 13 新设计规范全面解析

原因有以下几点: 查看照片等媒体内容会更加清晰,生动 在夜晚等光线较暗的模式下可以更舒适的浏览 很多用户觉得深色模式很酷 苹果的新规范有如下五个设计目标: 1.熟悉的感知 2.平台级别保持一致性 3....关于如何设计黑暗模式,苹果也给出了几点建议。在iOS 13.0及更高版本中,人们可以选择采用称为黑暗模式外观。在暗模式下,系统为所有屏幕,视图,菜单和控件使用较暗的配色,使前景内容在较暗的背景下突出。...黑暗模式支持所有辅助功能。 人们可以选择暗模式作为其默认界面风格,并且他们可以使用设置功能,使设备在环境光线较低时自动切换到黑暗模式。...艺术品的变化有时需要改变附近的颜色,以保持视觉连续性并防止界面元素变得过于强大或不足。例如,地图在使用地图模式时会显示浅色方案,但在激活卫星模式时会切换为深色方案。...3 情境菜单(Contextual Menu) 在iOS13及以后的版本中,你可以使用情境菜单(Context Menus)让用户访问与屏幕项目关联的其它功能而不用切换界面。 ?

5K40

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

在iOS应用中,您可以配置界面元素和布局,以在iPad上执行多任务处理时,在拆分视图中,在屏幕旋转时以及在其他设备上自动更改形状和大小。设计一个适应性强的界面在任何环境下都提供出色的体验非常重要。...为了保持视觉连续性,防止界面元素变得过于醒目或缺乏吸引力,插图的变化有时需要改变附近的颜色。例如:地图在使用地图模式时显示浅色模式,但在卫星模式时切换到深色模式。...用户可以选择深色模式作为其默认界面风格,并且可以通过设置,使其设备在环境光线较低时自动切换到深色模式。由于用户在系统范围内做出这些选择,因此他们通常希望所有应用程序都能尊重他们的偏好。 ?...暗模式是动态的,这意味着当界面位于前景(例如,弹出框或模式表)中时,背景颜色会自动从基本颜色变为高色。该系统还使用增强的背景色在多任务环境中的应用程序之间以及多窗口上下文中的窗口之间提供视觉隔离。...当你做出这个选择时,请考虑: 较厚的材质,可以为具有精细特征的文本或其他元素等提供更好的对比度 半透明可以通过对后台内容的可见,来帮助用户记住其上下文 iOS13还定义了标签、填充和分隔符的活力值,这些标签

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

    iOS百度地图开发中遇到的问题

    由于项目需要地图功能,公司决定使用百度地图,但是百度地图也有很多问题,现在总结一下在百度地图中遇到的坑,希望给各位看官一点参考,避免走一些弯路.我使用的百度地图SDK2.9.1. iOS地图SDK链接,...(三)关于用户方向更新后的设置 如上面(一)所述,定位点可是设置样式参数,当你自定义了定位图标后,你会发现定位图标确实换为了自己定义的图标,而且当用户方向更新后,定位图标是回发生旋转的,但是当你点击触摸屏幕后...,定位图标马上变为初始的情况,并且用户方向更新,定位图标不在发生变化....对于这种情况,我想了一个办法,就是使用系统的定位,在地图界面添加一个方向的图标,如下图: ?...,定位点也随之发生变化.如果切换到后台,然后再切换回mapView界面,定位点还是会变化.但是会产生一个问题,当点击别的tabbar,切换到别的界面后,再切换回mapView界面,定位点就不再随着位置的变化而发生变化了

    1.1K20

    必读~苹果iOS小组件Widget设计终极完全指南

    在本指南中,我将介绍为iOS,macOS和iPadOS设计小部件所需的所有知识。Apple的人机界面指南构成了本指南的基础。我将以Twitter和Duolingo为例来讲解。...在大多数情况下,小部件会根据您应用的主要功能提供信息。 小部件样式 人机界面指南为我们提供了三种样式,填充样式,单元格样式,内容样式。 填充样式:顾名思义,用丰富的颜色和内容填充小部件。...如您所见,“填充”样式中只有一个“点击目标”,而其它的则有多个点击目标。 点击目标 点按目标是在点击时将执行特定操作的区域。小窗口小部件只有一个点击目标。...使用熟悉的颜色和字体来帮助用户进行交互操作。丰富的图像,简单的外观或淡淡的颜色是增加个性的一些方法。当小组件大小变化时,会呈现不同容量的内容,而不是单纯放大。...黑暗模式 当设备在亮色模式和黑暗模式之间切换时,您的窗口小部件必须随之调整。填充样式使用丰富的背景,因此在大多数情况下,不需要更改即可支持暗模式。其它小部件必须进行重新设计,以适应不同的风格。

    8.2K30

    如何在网页设计中实现深色模式:增强用户体验

    近年来,深色模式已成为网页设计的主要趋势,以其优雅的外观吸引访问者,并为传统的浅色主题界面带来了可喜的变化。深色模式在各种数字平台上变得越来越流行,包括操作系统、移动应用程序和网站。...许多人发现它可以缓解明亮屏幕的强烈眩光,从而减轻长时间使用屏幕时的眼睛疲劳,并提高在光线较暗的区域的可读性。...了解深色模式 用户界面视觉呈现方式的重大变化以深色模式设计趋势为代表,近年来该趋势获得了很大的关注。...'伪类在选中切换按钮时应用暗模式样式。...此外,我们使用“body”选择器将暗模式样式应用于网页上的所有元素。

    82010

    iOS应用程序生命周期(前后台切换,应用的各种状态)详解

    这也是前台的一个正常的模式 Backgroud     后台           程序在后台而且能执行代码,大多数程序进入这个状态后会在在这个状态上停留一会。...4、转到后台运行 4.1 如图所示: ? PS:只有在IOS4以上系统或者支持多任务的设备才能后台运行。不然会直接结束状态。 4.2 当应用程序进入后台时,我们应该做写什么呢?...保存用户数据或状态信息,所有没写到磁盘的文件或信息,在进入后台时,最后都写到磁盘去,因为程序可能在后台被杀死, 释放尽可能释放的内存 applicationDidEnterBackgound: 方法有大概...如果你想缓存一些对象提升程序的性能,你可以在进入后台时,把这些对象去掉强引用。...在程序返回后台或前台是,程序都要正确的处理这些通知。 6、程序的终止 程序只要符合以下情况之一,只要进入后台或挂起状态就会终止: iOS4.0以前的系统 app是基于iOS4.0之前系统开发的。

    5.6K112

    一键切换亮色模式和暗色模式,用Figma搞定!

    以一个PC端的应用界面为例。 在本文中,我们在创建样式的同时,会说明我们为什么会选择特定的颜色。因为这些差别对设计师非常重要。 0.常量样式 重要的是要注意,在为明暗模式选择颜色时,颜色会略有不同。...1.可变样式 可变的颜色样式分别适用于亮和暗模式,并且它们都可以进一步细分为两个主要类别-颜色样式和效果样式。出于本文的目的,我们将主要讨论“亮”模式,并且在将这些步骤应用于“暗”模式时也稍作介绍。...将灰度颜色从“浅”模式切换为“暗”模式时,建议您使用白色(#FFFFFF)并在灰度上应用90%,70%,40%和10%的透明度效果,这将在应用于“深色模式”时提供很好的平滑过渡效果。...1.3 背景 在主界面选择中,有两种原色:层级一和层级二(译为Primary and Secondary),他们的变化依赖于你使用浅色还是深色版本。...它们用来描述某些重要的选项卡,按钮或信息块,并用于使用户专注于页面上的某些元素。 阴影效果可以在亮色模式下轻松被看到,它使元素具有3D外观,使按钮浮在屏幕上。

    21.3K11

    暗黑模式在 Trip.com App 的实践

    在前期预研中,我们发现 66% 的 iOS 13 用户选择打开Dark Theme,可见用户对暗黑模式的喜爱和期待。 那么 Dark Theme 能带来哪些好处呢?...,让用户在暗环境中轻松使用App。...我们插画系统中的物体和人物沿用这种设计,在暗环境中,由于光线不够充足,人物的肤色会跟着变暗,衣服的颜色也会发生微妙的变化。比如白色、鲜亮的衣服,到了暗环境下,就会呈现灰色、低饱和度的暗色。 ?...3.1 iOS 我们为 iOS 13 以上用户提供了两种主题模式的选择: 自适应模式:跟随系统展示 Light/Dark 主题 强制 Light 模式:App 保持 Light 主题,不随系统主题变化...跟随系统切换主题需要考虑到 App 运行时,系统主题被切换的情况: 前往系统设置页手动切换 开启自动切换后,系统会自动更新主题 这两种情况都需 App 进入后台,所以只需要添加 App 进入前台的监听

    2.1K20

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

    StackNavigatorConfig(可选):配置导航器的路由(如:默认首屏,navigationOptions,paths等)样式(如,转场模式mode、头部模式等)。...用于导航样式配置的参数: mode: 页面切换模式: 左右是card(相当于iOS中的push效果), 上下是modal(相当于iOS中的modal效果) card: 普通app常用的左右切换...cardStyle: 样式(iOS上页面切换会有白色渐变蒙层,想去掉则可以这样设置,cardStyle: { opacity: null },切换页面时的页面边框也在这里可以设置)。...,navigationOptions也会跟着变化; 提示:除了在创建createStackNavigator时配置navigationOptions外,在StackNavigator之外也可以配置navigationOptions...当用户单击Go Back按钮时,通过: navigation.goBack(); 实现了返回上一页; 类似上述的应用场景有很多,大家可以通过与本教程配套的最新版React Native+Redux打造高质量上线

    6.3K10

    一篇文带你了解黑暗UI模式的过去,现在和未来

    相反,当我们看到负极性的东西时,更少的光进入眼睛,导致我们的瞳孔扩大:事物变得模糊。黑色背景上的白色文字会显得更大,并产生光晕…… 这是因为一个字母发出的光被其他字母反射。这导致了负极性难以阅读。...尽管黑暗模式下,用户需要花费更多的时间阅读和分析内容,但他们可能更不容易受干扰性内容的影响。 当您快速扫描屏幕以查找视觉/彩色元素时,暗模式效果也很好。...在2018年,SalesForce的设计师想知道开发仪表板功能时哪种模式最好。他们采访了许多用户,结果发现,用户使用Dark Theme中显示的图表可以更快,同样准确地帮助用户制定决策。 ?...即使深色模式概念还没有发布,某些产品(如奢侈品牌,流媒体服务)也使用了深色的用户界面……为了传达一种高贵的感觉,使内容更加凸显,并结合使用场景(您最有可能在晚上在昏暗的房间中使用流媒体服务,从而使黑暗的...开发工程师在使用Xcode,Android Studio进行程序开发时,这些开发平台可以用非常简单的方法来为应用的亮色模式提供一组设计素材,为暗模式提供另一组素材。从技术上讲,暗模式很容易实现。

    1.7K50

    FlutterUnit 已上架 iOS,暗色模式全面支持

    在界面表现上: 桌面端 MacOS 和 Windows 一致,移动端 iOS 和 Android 一致。...另外平板设备中,在拖拽过程中可以根据窗口尺寸自适应相关: ---- 桌面端部分界面展示 桌面端组件页(亮) 桌面端组件页(暗) 桌面端搜索(亮) 桌面端搜索(暗) 桌面端代码生成(亮) 桌面端代码生成...(暗) 绘制集录(亮) 组件详情页(暗) ---- 移动端部分界面展示 移动端组件页(亮) 移动端组件页(暗) 绘制详情页(亮) 绘制详情页(暗) 组件详情页 组件详情页...然后应用会处于 可供审核 状态,需要进入 [App审核] 页签,查看条目。在顶部右上角会有 [重新提交至审核] 的字样,我不知道,没点,所以傻傻等一天。 ---- 2....关于内购 如果版本暂不支持内购,就不要在界面上展示出按钮。比如我在充值按钮点击时弹出 iOS 将在后续版本支持内购 , 这样也是会被拒绝的。

    49150

    IOS学习1——IOS应用程序的生命周期及基本架构

    : - app将要从前台切换到后台时需要执行的操作 applicationDidEnterBackground: - app已经进入后台后需要执行的操作 applicationWillEnterForeground...: - app将要从后台切换到前台需要执行的操作,但app还不是active状态 applicationWillTerminate: - app将要结束时需要执行的操作 现在讲下app启动、来回切换...如果app当时运行在后台并且没有暂停,系统会在应用程序终止之前调用applicationWillTerminate:来保存用户的一些重要数据以便下次启动时恢复到app原来的状态。...了解iOS的MVC设计模式之后,我们从下图来了解在MVC模式下iOS应用程序有哪些关键对象以及它们职责主要是什么? ?...UIApplication对象在启动时就设置main run loop和使用它来处理事件和更新基于view的界面。正如它的名字显示,main run loop是运行在应用程序的主线程。

    1.6K50

    基础篇-iOS后台运行以及相关

    音频的播放:在播放音频时,即使应用退到后台,只要一直有音频在播放,那应用就可以一直在后台运行。...关于 AirPlay 的开发文档:http://nto.github.io/AirPlay.html 画中画的视频播放:画中画是 iPad 版本的 iOS 9 新增加的功能,可以在 iOS 的桌面,或者其他应用的界面的上面播放视频...Acts as a Bluetooth LE accessory 此选项是指 iOS 设备作为一个蓝牙外设连接时,对应的应用可以后台运行,但是使用此模式需要用户进行授权认证。...,不会有任何的界面提示,而当应用退出或者挂起时收到此类推送,iOS 也会启动或者唤醒对应的应用。...代码实现可参考:http://objccn.io/issue-5-5/ #需要注意的是: iOS 7 以前,应用进入后台继续运行时,如果用户锁屏了,那么 iOS 会等待应用运行完,才进入睡眠状态。

    5.3K11

    IOS15 beta 8 开发者预览版更新【附升级通道】

    :在iOS 15 beta2中,Apple对Safari浏览器标签栏的位置进行改动,调整到屏幕下方,但存在输入内容时,标签栏又会回到屏幕上方,在beta3中实现了标签栏始终在在屏幕下方。...对iPhone恢复出厂设置的改动:进入 设置-通用-,原有的还原界面更新为:Transfer or Reset iPhone(汉化问题,国行目前显示英文) 对将旧iPhone的数据迁移到新设备上的用户非常方便...在iOS15中,Apple引入了”专注“模式,在beta3中”专注状态“以及”电话“的位置,被分配到了专注模块中去,更适合不同的场景使用。...AppStore中,第一次进入会对用户展示新版系统中的新增功能。 Apple Music音乐小组件可以跟随不同的音乐显示不同的背景颜色,和传统的固定颜色红色差异明显。...,展示新功能 BUG 软件打开闪退(eg:墨xx,a游…); 第三方音乐app在切换视图时,音频断断续续; (此条非BUG,纯个人体验)键盘更新mac样式选字后,中文状态下输入英文,不太顺滑,需要切换英文

    1.3K10

    UI技巧 | 用户界面设计的10个小技巧

    在本文中,我将分享一些我在设计用户界面时学到的东西,以及我在学习过程中的新发现。...直到我了解到在色相、饱和度、亮度(HSB)上进行简单的加法和减法就能发挥魔法,在这个公式里我们将使用 HSB 的色彩模式,而不是 RGB 模式。...方法B 在方法B中,同样的原理(上面的公式)依然适用,但是色相H值发生了变化。我们之前在各种设计材料中使用的颜色模式 RGB 和 CMY 现在对我们来说很有用。 ?...现在在方法B中,如果想要在基色的基础上有一个较暗的变化,我们需要在调色板中将颜色选择器往靠近 RGB 的方向移动,反之将颜色选择器往靠近 CMY 的方向移动选择较浅的颜色。如下图: ?...当你意识到你已经制作了 5 种卡片界面,10 个按钮,5 种标题样式等等。 在开始为特定内容创建界面之前,请试着查看之前创建的设计,您可能看到可以回收利用的样式模板。

    1.7K11

    【晓头条】微信「赞赏功能」曲线回归 全球首个微信法庭开庭 公众号注册流程大幅简化

    关注「知晓程序」公众号,微信后台回复「6519」,下载微信最新版本 iOS 客户端。 用户扫码之后,微信将会直接跳转到「赞赏」界面,用户可以以自选金额或固定金额,赞赏相应用户。...除此之外,新版本微信还为 iPad 优化了界面,聊天界面以双栏显示;同时,笔记功能添加项目符号功能。有关本次更新的详细内容,可以关注「知晓程序」微信号,在后台回复「1019」查看。 2....此次企业微信注册入口进入微信公众号后台,将会大幅降低企业微信的注册难度,让企业微信被更多企业使用。 3....根据流出的模糊截屏来看,在新的订阅号界面中,不再有以往的「订阅号」为中心的展示方式,将改为以内容为中心。 在新的界面下,文章将会直接展示在列表中,用户无需再进入具体订阅号才能进入文章。...3. iOS 版微信推送通知样式变化 10 月 18 日,iOS 版微信的群聊推送通知发生了改变。

    77440

    网站如何适配暗色模式并实现手动、自动切换

    而暗色/亮色的现实主要是,当需要给用户展现网站暗色配色时,在HTML内标签内加入class="night"。...不存在暗色模式标识符 用户进入网站,若之前没有手动点击网站上切换暗色/亮色按钮(不存在暗色模式标识符),则使用媒体查询检测用户是否有开启暗色模式,同步系统配色。...同时,媒体查询存在一定的兼容性问题,浏览器版本过低(如:IE 9),在查询失败时: 则逻辑判断用户当前系统时间,根据时间显示暗色或亮色配色。...,在CSS内使用,我们就需要使用派生方法写样式,如: /\*暗色模式span标签\*/ .night span { color: #E0E0E0; } /\*暗色模式警告按钮样式\*/ .night...End 这个JS是在用户进入网站,加载到标签时,进行判断,是否需要在表情内加入class="night"。

    9.8K160

    iOS 9人机界面指南(三):iOS 技术 (中) - 腾讯ISUX

    iOS应用可以使用通知来让人们知道一些有趣的事情是什么时候发生的,例如: 收到一条消息 事件即将发生 有新的数据可下载了 某些状态发生了变化 在iOS8及之后的版本中,应用可以定义用户在通知中的操作。...例如,用户退出iCloud账户,关闭应用的iCloud或者进入飞行模式时,iCloud都是无法使用的。在这些情况下,用户都进行了某些操作来禁止iCloud服务,所以你的应用可以不用再进行提醒。...如果你的应用中有自然中断或情景转换,用模态样式来展示会更合适。当你使用模态样式来展示全屏横幅时(通过用presentFromViewController实现),用户要么进入广告,要么关闭它。...出于这个原因,当用户有做出转变的预期时 (比如完成了一个任务后) 用模态视图的形式来展示比较好。 应用的界面视图进行转场切换时不要使用模态样式展示全屏横幅。...当他们在界面视图中选择了要打印的项目后,可以接着选择打印机,设置打印属性,最后点击打印按钮开始打印。 打印中心应用是一个只有在处理打印任务时才可见的后台系统应用,用户可以用它来查看打印任务。

    3.9K50

    iOS音频播放器锁屏歌词显示与性能优化 原

    iOS音频播放器锁屏歌词显示与性能优化 一、引言     前边有博客探讨了有关iOS开发中音频播放的技术与进行后台音频播放并在后台与用户进行交互的方法,本篇将探讨一种在锁屏界面同步显示歌词歌词的方法,...二、在锁屏界面同步显示歌词    我们知道,在音频后台播放时,锁屏界面的信息是由MPNowPlayingInfoCenter来设置的,其中的歌曲信息字典可以设置类似歌曲封面,艺术家,歌曲名,歌曲时间等。...三、应用性能的优化    从功能上来说,通过一直合成刷新锁屏界面的封面图是可行的,然而在使用中我发现,不停和合成图片和刷新操作将使设备非常耗电,如果可以完成下面的优化,则可以大大提高应用的性能: 1.应用在前台时不进行后台锁屏界面的刷新操作...2.应用在后台时不进行前台歌词信息、歌曲信息的相应更新。 3.当屏幕变黑关闭时,停止所有刷新操作。 4.当屏幕从新被点亮时,进行后台信息刷新。    ...上面4点需求,前两点十分容易搞定,在AppDelegate中有如下的方法可以监听应用程序前台与后台的切换: //应用进入后台时调用 - (void)applicationWillResignActive

    1.3K20
    领券