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

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

03 系统背景色 根据准则,iOS的背景始终具有#000000的纯黑色。Google 则更喜欢深灰色,值为#121212。 ? 苹果将此背景称为“ 系统背景”。...如果要在暗模式下为元素显示自定义颜色怎么办? 当然,你可以轻松地做到这一点。为每种模式分配自定义颜色即可。 例如,如果您不希望基准色是纯黑色,而是深灰色,则可以轻松地在代码中分配自定义颜色。瞧!...但是,这9种颜色在亮模式和暗模式下略有不同。如果您选择使用这些系统强调颜色,则该应用程序将自动将亮模式色调颜色更改为暗模式色调颜色。 ? 你会发现亮模式和暗模式下的颜色是稍有差异的,请务必注意。...后者比前者要亮一点。 但是,是否我们必须只能用这9种颜色,还是说我们也可以使用其它颜色呢?是的,当然你可以使用其它颜色。但是如果你要自定义颜色,你必须把黑暗模式和亮色模式的颜色都定义出来才行。...这里有一些需要注意的事项: 尝试选择一种在亮模式和暗模式下均能正常工作的颜色(相同的RGB值)。 或者您可以选择2种不同的颜色,一种用于亮模式,另一种用于暗模式。

3.4K10

肘子的 Swift 周报 #051| Xcode 并不孤单

这样做不仅让我能够充分利用每个编辑器的独特优势,还通过视觉上的变化(例如不同的布局和主题颜色)帮助提升我的工作心情,有效突破开发中的难点。...在本文中,Majid Jabrayilov 为我们详细解析了这些新工具的使用和优势。这篇文章是关于自定义容器的系列文章的开篇,建议开发者继续关注后续内容,以充分利用这些强大的新功能。...文章涵盖了暗化、亮化、增加对比度和颜色混合等常见效果,并通过实用示例为开发者提供了详尽的操作指南。...in Core Data)[13] Khoa[14] Core Data 提供了丰富的 API,使开发者能够在性能和内存使用之间达到精细的平衡。...iOS 18 网格渐变入门 (Getting started with Mesh Gradients on iOS 18)[17] Donny Wals[18] 网格渐变是一种允许在一个网格中展示动态颜色范围的技术

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

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

    熟悉、流畅的体验会让用户更投入。他们习惯于iOS中使用的微妙动画,例如平滑过渡、设备方向的流畅转换和基于物理的滚动。除非你是创建沉浸式体验,例如游戏,否则你的自定义动画应与系统的内置动画差不多的。...色盲人可能无法区分某些颜色组合;而对比度不足会导致图标和文本与背景混合,使内容难以阅读。 系统颜色 iOS提供了一系列的系统颜色,可自动适应活动和可访问性设置的变化,如增加对比度和降低透明度。...宽色显示器支持P3颜色空间,可以产生比sRGB更丰富、更饱和的色彩。因此,使用宽颜色的照片和视频更逼真,使用宽颜色的视觉数据和状态指示器更具影响力。...使用自定义的背景色会使人们更难于感知这些系统提供的视觉区别。 使用适合当前外观模式的颜色。语义颜色(如分隔符)会自动适应当前外观。...从iOS 14开始,系统以可变字体格式提供San Francisco和New York字体。这种格式将不同的字体样式组合到一个文件中,并支持在样式之间进行插值以创建中间的样式。

    8.1K30

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

    1.可变样式 可变的颜色样式分别适用于亮和暗模式,并且它们都可以进一步细分为两个主要类别-颜色样式和效果样式。出于本文的目的,我们将主要讨论“亮”模式,并且在将这些步骤应用于“暗”模式时也稍作介绍。...例如,在此设计系统中,原色是分别应用于这两种模式的蓝色,绿色,橙色和红色。每个原色由两种不同的颜色对比组成,第一个由较浅版本的原色组成,第二个类别由较暗版本的原色组成。...您可以在暗色模式下使用相同的效果,但是由于阴影颜色已经很暗,除非更改背景颜色,否则用户可能很难看到该效果。 内阴影效果与外部投影效果非常相似,但是这次阴影效果在元素内部给出。这使您的块元素看起来更厚。...为了使此功能起作用,应该区别对待可以“自适应”的状态栏和“非自适应”的状态栏。 3.总结 让我们总结一下,系统样式的总体结构如上图所示。...如何在亮色模式和暗色模式之间切换 设置好设计系统后,就可以轻松地将组件和模块切换为暗色模式了。为此,您将需要一个名为Appearance的插件,该插件可以在Figma社区找到。

    19.5K11

    PS图层混合模式实例详解

    如果你对Core Graphics中的混合模式不太理解,阅读本篇文章能让你对Core Graphics中混合模式概念有一个更理性的理解与认识。 本文不包含iOS中混合模式的内容。...5,颜色加深混合模式 颜色加深模式用于查看每个通道的颜色信息,使基色变暗,从而显示当前图层的混合色。在与黑色和白色混合 时,图像不会发生变化。...比50%暗的区域将采用正片叠底模式变暗, 比50%亮的区域则采用滤色模式变亮。 14,柔光混合模式 柔光混合模式的效果与发散的聚光灯照在图像上相似。...该模式根据混合色的明暗来决定图像的最终效果是变亮 还是变暗。如果混合色比基色更亮一些,那么结果色将更亮;如果混合色比基色更暗一些,那么结果色将更暗, 使图像的亮度反差增大。...如果混合色比基色的像素更亮一些,那么结果色更亮;如果混合色比基色的 像素更暗一些,那么结果色更暗。这种模式实质上同柔光模式相似,区别在于它的效果要比柔光模式更强烈 一些。

    1.7K30

    「Adobe国际认证」关于Adobe Photoshop,创建和修改画笔教程?

    注意:对称绘画和图案预览不支持实时笔尖画笔。请为对称和图案绘画选择一个普通画笔。 “画笔设置”面板概述 “画笔设置”面板允许您修改现有画笔并设计新的自定义画笔。...结果色总是较暗的颜色。任何颜色与黑色正片叠底产生黑色。任何颜色与白色正片叠底保持不变。当您用黑色或白色以外的颜色绘画时,绘画工具绘制的连续描边产生逐渐变暗的颜色。...比混合色暗的像素被替换,比混合色亮的像素保持不变。 滤色查看每个通道的颜色信息,并将混合色的互补色与基色进行正片叠底。结果色总是较亮的颜色。用黑色过滤时颜色保持不变。用白色过滤将产生白色。...点光根据混合色替换颜色。如果混合色(光源)比 50% 灰色亮,则替换比混合色暗的像素,而不改变比混合色亮的像素。如果混合色比 50% 灰色暗,则替换比混合色亮的像素,而比混合色暗的像素保持不变。...因此,所有混合像素的红色、绿色和蓝色通道值要么是 0,要么是 255。此模式会将所有像素更改为主要的加色(红色、绿色或蓝色)、白色或黑色。 未完待续......

    2K20

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

    然后,如果暗模式可以真正改善对焦,可读性,眼睛疲劳度和电池寿命,那么我们可以想象到暗模式可能会对我们的技术使用和健康产生巨大影响。好的,既然场景设置为黑暗模式,那么让我们深入探讨一下。...它使用户有机会自定义其设备的环境颜色,让它具有更技术性和设计感的外观,外观新颖,无需完全重新设计,并且可以解决我们的不少问题(例如眼疲劳,在弱光环境下使用屏幕,或减少屏幕诱发的头痛)。...· 考虑更改你的主色 应该避免在黑暗模式下使用过于饱和的颜色:它们可能太亮和/或降低了可读性。Google Material Design建议在浅色模式下使用500色度,在深色模式下使用200。...黑暗模式的未来 从黑暗模式的使用率来看,我们可以肯定iOS14和Android 11会有新的功能出现。比如主屏幕变成这样的: ?...对于开发人员来说,能够为两种模式提供两个不同的应用程序图标,以及允许用户为亮模式和暗模式设置不同的墙纸,将是一个很好的选择。 作者:Olivier Berni 翻译:静电

    1.4K50

    iOS开发常用之网络

    LTNavigationBar - LTNavigationBar为导航栏添加动态着色效果,可自定义其背景色.Demo包含:1。变换背景色; 2。滚动视图,导航栏和状态栏重叠。...基于轻扫的方向,你可以决定执行什么样的行为,并且你可以自定义文本颜色和图片。该项目适用于教学用的抽认卡,图片查看器以及其他等。...* WZLBadge - Badge,支持横屏支持iOS5〜iOS8允许高度定制化,包括“红点”的背景颜色,文字(字体大小,颜色),位置等。说明。...SubtleVolume.swift - 更隐蔽的系统音量替代指示器。 InkKit.swift - 该类库帮助开发者绘制简单图形更容易。...更赞的是额外附了详细开发教程如何在Swift中制作Tinder-Like Koloda动画网页链接 .Yalantis出品动画程序款款精品。

    23.7K10

    10分钟辨清色彩模型|多媒体系统导论笔记

    YIQ模型下的I和Q通道 YUV模型下的U和V通道 5.CMY/CMYK 这种模型与RGB密切相关,两者可实现互相转换。...RGB为加法模型,两两叠加能得到对应的Cyan青,Magenta品红和Yellow绿,三色叠加为白,如光的叠加。而CMY为减法模型,三色叠加为黑,如颜料或墨水的叠加。...在光学中指两种色光以适当的比例混合而能产生白光时,则这两种颜色就称为“互为补色”。补色并列时,会引起强烈对比的色觉,会感到红的更红、绿的更绿。...该图为Camera Raw中的色调曲线,背景图为直方图,因此从左往右像素由暗至亮,从下至上像素由少至多。...原图: 点向下拖动,使曲线整体向下,图像整体变暗: 点向上拖动,使曲线整体向上,图像整体变亮: 暗部向下,亮部向上,使得暗部更暗,亮部更亮,图像对比度增强: 暗部向上,亮部向下,使得暗部更亮,亮部更暗

    1.6K30

    PS|基础原理之‘图层混合模式’

    图3.4 颜色加深混合后 4.线性加深模式(Linear Burn):同样类似于颜色加深模式,但由于是线性,暗部与亮部的颜色过渡会更柔和。 ?...3.颜色减淡模式(Color Dodge):与颜色加深模式相反,图层亮部将更亮,暗部几乎不变。 4.线性减淡模式(Linear Dodge):类似于颜色减淡模式。...仍是由于为线性,暗部与亮部的颜色过渡会更柔和。 5.浅色模式(Lighter Color):类似变亮模式。...即50%亮的地方会更亮,50%暗的地方会更暗 2.强光模式(Hard Light):类似叠加模式,但是以上方图层的亮度为准 3.柔光模式(Soft Light):类似强光模式,但是暗部与亮部的过渡更柔和...5.线性光模式(Linear Light):类似亮光模式,但通过减小或增加亮度来提亮或变暗,且暗部与亮部的过渡更柔和。 6.点光模式(Pin Light):是变暗模式与变亮模式的结合,以上方图层为准。

    1.8K20

    这些Android系统样式中的颜色属性你知道吗?

    为了在不同版本的系统中统一 UI 样式,设置自定义的 Theme 继承自 Theme.AppCompat 系列就可以了。...也就是在这个版本你直接可以通过修改这个属性来修改状态栏的颜色。...md 的主题有: @android:style/Theme.Material(暗主题) @android:style/Theme.Material.Light(亮主题) @android:style/Theme.Material.Light.DarkActionBar...这两种样式也有不同的使用方法 Theme.AppCompat 一般用于设置整个应用程序的全局主题 ThemeOverlay.AppCompat 用于覆盖特定视图的主题,覆盖相关的属性使他们成为亮或者暗...这里使用了一个 Titlbar 这样效果和整体很不搭配,我们需要的是 Titlbar 的背景使用我们的 colorPrimary 字体的颜色使用 浅色文本样式 的颜色,那么这样我们就可以自己定义一个样式

    1.9K10

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

    二十五、Swift Packages 根包和基于分支的包依赖项现在可以在其目标设置中使用 unsafeFlags; Swift 包现在可以声明 Mac Catalyst 的部署目标,并且现在可以在构建条件中将...二十八、App Store StoreKit 2 引入了一个现代的基于 Swift 的 API,它利用了新的语言功能,如 Swift 并发性。...自定义视图支持通过 tintColor 属性设置视图的色调颜色。这可用于将视图的颜色设置为每个轨道的不同颜色或匹配应用程序的外观。...JSONSerialization 和 JSONDecoder 现在支持从 JSON5 解码。...在 iOS 14 和 iPadOS 14 及更早版本中,当 autocorrectionType 设置为 UITextAutocorrectionTypeNo 时,QuickType 栏将被禁用。

    8.8K40

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

    为你的应用选择配色协调的状态栏颜色。默认的状态栏内容是黑色的,在浅色应用中效果出色,而相应的浅色状态栏则更适用于颜色较深的应用。...举个例子,不要在同一个应用中使用不透明导航栏和半透明工具栏。在屏幕处于同一方向时,最好不要改变不同屏上导航栏的背景图片、颜色和透明度。 确保你自定义的返回按钮的外观与操作仍然像一个返回按钮。...标签栏: 是半透明的 始终出现在屏幕的底部 一个标签栏一次最多可承载5个标签(多于5个标签的时候,可以展示前4个标签和一个“更多”,并将其他的标签以列表形式收纳到“更多”里面) 在横屏与竖屏情况下,高度均保持一致...请注意,iOS本身提供了若干内置的服务,如打印,转发到Twitter,发送信息和Airplay等等,你不需要再额外为这些内置任务创建活动。...有时候用户会觉得以列表呈现的信息更容易阅读和理解,例如将文本信息放在滚动列表中的时候,用户阅读和处理起来会更为简单和高效。 让视图中的项更容易选中。

    10.1K51

    UGL之颜色处理

    计算机里通常使用RGB色彩模式,例如RGB565,就是用两个字节表示一个像素的颜色,其中红绿蓝分别用5、6、5个bit。还有一些RGB555、RGB666、ARGB4444之类的。...Lightness 目标与周边物体的明亮对比,即主观上明度的强弱 Luminance 客观测量发光体的亮度 既然有了RGB到ESL的转换,那很容易就可以实现调整饱和度和亮度的函数了...例如下面的右图是将左图的ESL中的饱和度调整为最大,颜色显得更鲜艳 饱和度调到最小,就是灰度图了 而如果改为调整左图中ESL的亮度呢?...提高亮度就是所有颜色都明亮一些。最大值,就是纯白色了 降低亮度,就是所有颜色暗一些。最暗,就是纯黑色了 另外还有一个对比度。这个概念,貌似还没有什么标准。...基本规则是: 提高对比度,就是让亮的更亮,暗的更暗 降低对比度,就是所有颜色的RGB值向中间靠拢 有点意思 我是泰山,专注VX 17年! 一起学习,共同进步!

    1K30

    iOS 优化 - 瘦身

    目前就有这样一个工具 R.swift[4]一定意义上将资源变成强类型, 类似于 Android 开发中的 R 文件。 可利用fdupes[5]查找项目中的重复文件。...png 为有效图像定义的文件扩展名以及内部文件结构,但符合 PNG 的查看和编辑软件不再能够处理它们; 增加了一个 iDot 数据块,是 Apple 自定义的数据块,暂时不知其作用; 其本质是使正常的...pngcrsuh测试效果对比图 结论:Compress PNG Files 虽然是压缩 PNG,但其最主要的目的并不是为了压缩图片大小, 而是将 PNG 转换成 iOS 更容易处理、更快速度的去识别的格式...颜色数组每个成员用 RGBA 四个分量维护一个颜色。图像中的每个像素点则存储颜色数组的下标代表该点的颜色。...并且这种形式可以将每个 pod 的资源放在自己的 Bundle 中,更方便管理。 结论:自定义 Pod 如果含有资源,尽量使用 resource_bundle 的方式引用资源。

    2.6K20

    Flutter 3.7更新详解

    我们希望能够在之后的稳定版本中将 Impeller 作为 iOS 平台的默认渲染引擎,如果你在体验时有任何问题,请继续 在 GitHub 上提交 Impeller 的相关反馈。...图片 图片 插件代码迁移至 Swift Apple 整将它们的代码迁移至 Swift,我们也希望能为开发者构建 Swift 插件的示例和指导。...给 iOS 开发者准备的资源 我们新发布了一系列为 iOS 开发者准备的资源,包括: 给 SwiftUI 开发者的 Flutter 指南 给 Swift 开发者的 Dart 指南 给 Swift 开发者的...Flutter 并发开发指南 将 Flutter 添加到现有的 SwiftUI 应用中 为 Flutter 创建多渠道 (针对 Android 和 iOS) 废弃 Bitcode 从 Xcode 14...由于新加入了这些变化,用户可以在 120Hz 的 iOS 设备上感受到更一致和流畅的动画效果。

    3.2K00

    影视后期:Pr 调色处理之风格调色

    ,会凸显画面的亮暗对比 橙色可以用凸显人物 蓝色可以增强画面纵深使画面更加真实 突出人物肤色 (橙色),其余中性色处理成能让人物更加突出的颜色(青蓝色)在可以增加画面对比的同时,还可以把整个亮度范围分布均匀...调色流程 电影感调色整体流程: 添加还原lut RGB曲线亮部适当提亮,暗部适当压暗 保留红-绿颜色区间的饱和度,其余颜色降低(青橙色调调整) 将橙-绿颜色区间的色相向橙色继续偏移 将阴影、中间调向青色偏移...二级调色(风格化调色) 「提高画面对比与颜色偏移」 观察亮度波形较平坦,增加对比度,调整RGB 曲线中的亮度曲线 在曲线中调整亮度曲线让亮部更亮暗部更暗 色调调整,分析矢量示波器,当前为黄蓝色调,由黄到蓝...在色相与饱和度和色相与色相曲线中适当调整调出青橙色调 色相与饱和度 中降低 青橙色 之外的颜色的饱和度,通过吸管工具定位 橙色调整,色相与色相曲线 中提高橙色的色相,手动打点 青色调整,色轮和匹配调整整个色调偏青色...,阴影和中间调 想青色移动,高光向橙色移动 氛围感调色 提高氛围感,添加晕影:暗角 光感调整,生成嵌套,向上复制一层混合模式改为滤色,增加整体亮度,调整不透明度 用钢笔蒙版工具画出画面中高光部分 添加高斯模糊效果

    49110

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

    清晰的信息层级 4.辅助功能 5.保持简单 ?...在iOS 13.0及更高版本中,人们可以选择采用称为黑暗模式外观。在暗模式下,系统为所有屏幕,视图,菜单和控件使用较暗的配色,使前景内容在较暗的背景下突出。黑暗模式支持所有辅助功能。...暗模式中的调色板包括较暗的背景颜色和较浅的前景色,经过精心挑选以确保对比度,同时保持模式之间的一致感。 使用适应当前外观的颜色:语义颜色(如分隔符)会自动适应当前外观。...当您需要自定义颜色时,将颜色集资源添加到应用程序的资产目录中,并指定颜色的浅色和深色变体,以便它可以适应当前的外观模式。 避免使用硬编码的颜色值或不适应的颜色。 ?...在下图中,我们可以体会下黑色模式和浅色模式下,同一种颜色对于用户视觉的影响,是不一样的,要保证在两种模式下都有更好的对比度和可读性,需要设计师更严谨的配色。 ? 柔化白色背景的颜色。

    4.6K40

    Swift 周报 第三十期

    以上调整生效后,App Store Connect 中“我的 App”的“价格与销售范围”部分会随即更新。一如既往,你可以随时更改你的 App 和 App 内购买项目的价格 (包括自动续期订阅)。...,则需要改为使用 notarytool 命令行工具,或者升级到 Xcode 14 或更高版本。...SE-0392[4] 自定义 Actor 执行器 提案通过审查。该提案已在 二十五期周报 正在审查的提案模块做了详细介绍。 SE-0390[5] 引入 @noncopyable 提案通过审查。...SwiftUI 中 LinearGradient的用法[14] 摘要: 这篇博文探讨了在 SwiftUI 中使用 LinearGradient 为对象创建渐变颜色效果。...它展示了如何定义颜色数组、使用标准和自定义起点和终点,以及设置坐标以改进铅笔对象上的颜色笔尖。本文还包括用于创建具有各种起点终点组合的不同线性渐变的示例代码。

    24520
    领券