文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

APP设计实例解析，深色模式为什么突然就火了？

如果设置了聊天背景，聊天背景图片也会自动调暗，便于阅读。 虽然整体色彩加深，但微信在设计时仍保持着清晰的层次。...豆 瓣 普通模式下的豆瓣APP背景色为纯白色，白天看偶尔都觉得有些刺眼，更不用说睡前必刷豆瓣的用户有多煎熬。在被用户骂了一轮又一轮之后，豆瓣APP终于也推出了夜间模式。...同时，豆瓣在设计时始终保证内容有良好的对比度和清晰的视觉层级，保证了信息结构的准确传达。 在配色方面，为了避免“死黑”让整个界面太过死板，豆瓣在黑色中还混入了蓝紫色，让背景色看上去更加通透。...除此之外，深色模式对背景色、文字以及系统图标的颜色都进行了优化处理，可以提升阅读舒适度。对于喜欢深色或黑色系的朋友来说，深色模式更是一种不同于普通模式的全新体验。...以摹客为例，用户在进行设计时，深色界面不仅仅能降低眼睛疲劳度，还能突出你的设计内容，打造沉浸式的设计体验。 随着苹果“黑色模式”的推出，深色模式逐渐成为APP设计的流行趋势。

1.5K30

APP设计实例解析，深色模式为什么突然就火了？

如果设置了聊天背景，聊天背景图片也会自动调暗，便于阅读。 虽然整体色彩加深，但微信在设计时仍保持着清晰的层次。...豆 瓣 普通模式下的豆瓣APP背景色为纯白色，白天看偶尔都觉得有些刺眼，更不用说睡前必刷豆瓣的用户有多煎熬。在被用户骂了一轮又一轮之后，豆瓣APP终于也推出了夜间模式。...同时，豆瓣在设计时始终保证内容有良好的对比度和清晰的视觉层级，保证了信息结构的准确传达。 在配色方面，为了避免“死黑”让整个界面太过死板，豆瓣在黑色中还混入了蓝紫色，让背景色看上去更加通透。...除此之外，深色模式对背景色、文字以及系统图标的颜色都进行了优化处理，可以提升阅读舒适度。对于喜欢深色或黑色系的朋友来说，深色模式更是一种不同于普通模式的全新体验。...从上述APP设计案例中，我为大家总结了以下几点建议以作参考： 1.避免使用纯黑色； 2.避免使用高饱和度的颜色； 3.文本颜色选用高亮色，但不宜使用纯白； 4.做好情感化设计； 5.注意结构和层次感；

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

    DarkMode(1)：产品应用深色模式分析

    这样，在显示黑色时，OLED 的屏幕像素只需要关闭，就是纯正的黑色了。 在 macOS 的深色模式中，基底色并不是纯黑，而是带有一定灰度的黑色。...那么，颜色反转实际上，是把一种颜色（R，G，B），自动变换到它的对立面，成为新的颜色（255-R，255-G，255-B）。...，系统界面的背景色会自动地去对应 SystemBackground，在浅色外观下 SystemBackground=#FFFFFF（白色），在深色外观下 SystemBackground=#000000...当然，除了系统内置的这些色彩，开发者也可以根据自己的需要创建和声明新的语义色彩。...第二行的「Vibrant」则为经过了鲜活化处理的文字效果，在背景色变亮时，也能保证文字的可读性。 此外，苹果还更新了 UIKit    中的系统级控件，以适配深浅两种颜色外观。

    1.8K20

    Python控制台输出的华丽变身：色彩与风格的深度探索

    通过丰富的案例代码，本文为Python开发者提供了一套完整的终端字体颜色设置指南。 二、引言 在Python编程中，通过标准输出（如print函数）向终端显示信息时，默认情况下文本颜色和样式是单调的。...四、参数 1、文字颜色 代码 颜色 30 黑色 31 红色 32 绿色 33 黄色 34 蓝色 35 洋红色 36 青色 37 白色 2、背景颜色 代码 颜色 40 黑色 41 红色 42 绿色 43...注意，在某些终端中，加粗可能同时增加了文本的亮度。 4 \033[4m 为文本添加下划线。但请注意，并非所有终端都支持此样式。 5 \033[5m 使文本闪烁。...7 \033[7m 将前景色和背景色互换。这通常用于创建高亮效果，特别是当背景色是深色而文本色是浅色时。 8 \033[8m 在某些终端中，这会使文本“隐藏”或变得不可见。...此外，即使终端支持这些参数，其实际效果也可能因终端的不同而有所差异。

    7900

    【每日精选时刻】手把手教你用 Python 去除图片和 PDF 水印；从redis原理的角度认知Set命令的执行过程

    大家吼，我是你们的朋友煎饼狗子——喜欢在社区发掘有趣的作品和作者。【每日精选时刻】是我为大家精心打造的栏目，在这里，你可以看到煎饼为你携回的来自社区各领域的新鲜出彩作品。...*当然，你也可以在本篇文章，评论区自荐/推荐他人优秀作品（标题+链接+推荐理由），增加文章入选的概率哟~科技好文1、技术干货【愚公系列】2023年12月 GDI+绘图专题示例创建了一个窗体，并在窗体上绘制了使用不同字体风格的文本...2、动手实操手把手教你用 Python 去除图片和 PDF 水印通过仔细观察，我们发现，水印 RGB 之和与白色背景色的 RGB 之和比较接近，而与黑色字体的 RGB 之和有较大差异。...遍历图片每一个像素，提取出其 RGB 值，将 RGB 三位值之和，与一个阈值进行比较，如果大于这个阈值，说明该像素对应的区域是水印，于是将这个像素的 RGB 值设置为白色背景色，也就是 (255,255,255...显然，黑色字体的 RGB 和(1483=444)必须小于这个阈值，而白色背景色 RGB 之和(2553=765)必须大于这个阈值。所以我们可以把阈值定为 600，尝试一下效果如何。

    33341

    干货！UI界面中阴影绘制完全攻略！

    我们使用阴影来强调特定的组件，创建深度以在屏幕中来创造一个特别的世界，并给出某些组件的特定状态。但是，我们在哪里，以及如何明智地使用它们呢？...它们将在几秒钟内处于活动状态，因此您需要使它们清晰并与背景中的元素产生最佳对比。在视觉上，柔和的阴影是非常棒的选择。 ?...带有阴影的提示图形 场景04.活动项目（如开关） 当涉及到活动状态（例如切换或选定的列表项）时，一种不错的做法是为它们提供视觉层次结构，例如颜色，当然还有阴影。另外，使它们简单而柔软。 ?...小技巧：只增加Y轴去获得阴影 颜色使用 在制作阴影的时候，一定要避免使用纯黑色（#000000），使用不太深的灰色，效果会更好。 ?...如果你的背景色是明亮的颜色，那可以将Alpha值设置在15%到40%之间的某个值。但是，如果你的背景色是深色，则需要将Alpha的值设定为5%到15%之间。

    2.6K20

    iOS状态栏设置

    UIViewControllerBasedStatusBarAppearance设置为YES时 ViewController的配置优先级高于Application的配置 UIViewControllerBasedStatusBarAppearance...设置为NO时 那么只取Application的配置，ViewController的配置不生效 也可以在Info.plist添加默认的状态栏样式 Status bar style设置为UIStatusBarStyleLightContent...: false); 设置前景色为黑色 UIApplication.sharedApplication().setStatusBarStyle(UIStatusBarStyle.Default, animated...)barMetrics接口 那么上面的setBarTintColor接口就不能改变statusBar的背景色，statusBar的背景色就会变成纯黑色。...另辟蹊径 创建一个UIView 设置该UIView的frame.size 和statusBar大小一样 设置该UIView的frame.origin 为{0,-20} 设置该UIView的背景色为你希望的

    2.8K11

    分享一个算法，计算能在任何背景色上清晰显示的前景色

    也就是说，不同的颜色值总能找到一个人眼感知的灰度值，这是著名的心理学公式： 灰度 = 红×0.299 + 绿×0.587 + 蓝×0.114 在灰度背景色上决定前景色 一个图像的每一个像素经过上面的公式计算得到的新的图像...于是，当我们期望计算一个能在背景色上清晰显示的前景色时，我们可将背景颜色转换为灰度颜色，然后根据灰度程度，选取黑色或白色作为前景色。...当然，如果你喜欢，可以将一段黑色或接近于黑色的灰度色作为浅色背景的前景；将一段白色或颉俊宇白色的灰度色作为深色背景的前景。...Colors.Black : Colors.White; 于是，当我们希望计算某个背景色上一定能清晰显示的前景色时，只需要调用 GetReverseForegroundColor 即可。 ? ? ?...我封装的方便的 API 不过，总是写后台代码来计算，对于 XAML 类的程序来说还是麻烦了些，于是我写了一些用于 XAML 的标记扩展，方便让一些文字自动根据背景色改变颜色。

    1.2K10

    PS给照片换背景的小技巧

    3.完成羽化后，再次单击右键，在弹出的选项中选择“通过拷贝的图层”，复制出一个与背景下的人物一模一样的人物图层，随即自动生成“图层1”。这样就完成了背景与人物的分离过程。...8.回到“图层”面板，双击“背景图层”，将其变为普通“图层0” 9.单击“添加图层蒙版”按扭，为“图层0”添加图层蒙版。...方法意图：磁性索套会自动识别图像边界，并自动黏附在图像边界上。 方法缺陷：边界模糊处需仔细放置边界点。...3．右键“建立选区”，羽化一般填入“0”，按 CTRL+C 复制该选区； 新建一个图层或文件；在新图层中，按 CTRL+V 粘贴该选区，这样就OK了！...六．蒙板抠图法——直观且快速使用方法： 1．打开照片和背景图 2．点击移动工具把照片拖动背景图 3．添加蒙版 4．前景色设为黑色，选择画笔45 5．这样就可以在背景上擦，擦到满意为止。

    3.3K170

    终极秘诀：打破无代码状态的小方法

    • 于是，我就提起了兴趣，向 ChatGPT 提问：“在 vscode 中如何将 Git Bash 设置为默认终端，如何修改默认的 git 路径？”...打开 bash 配置路径 (若没有 .bashrc 文件该命令会自动创建) code $HOME/.bashrc 或 .bash_profile # $HOME：表示当前用户的主目录路径...，背景色变为前景色） 8：隐藏文本（通常为隐藏密码输入） # 前景色和背景色序列组合 "\033[1;31m"` 表示粗体的红色文本 "\033[42;35m"：表示紫色文本，...绿色背景 • Bash color codes: 一种用于在 Bash 终端中设置文本颜色和背景颜色的代码 # 前景色（文本颜色）： \e[30m：黑色 \e[31m：红色 \e...[32m：绿色 \e[33m：黄色 \e[34m：蓝色 \e[35m：洋红色 \e[36m：青色 \e[37m：白色 # 背景色： \e[40m：黑色

    8910

    零基础微信小程序开发——全局配置之tabBar（保姆级教程+超详细）

    背景颜色被设置为红色。它定义了tabBar的整体背景色调，是用户体验中不可或缺的一部分，可以影响整个界面的视觉效果。...在示例中，边框颜色被设置为黑色。边框可以增强tabBar的视觉边界，使其在页面上更加突出。 iconPath：这个属性指定了当tab项未被选中时，显示的图标路径。...未选中时的图标被设置为一个灰色的圆形图标。这个图标在默认情况下展示给用户，提供了关于tab功能的直观信息。 selectedColor：这个属性用于设置tab上文字在选中时的颜色。...选中时的文字颜色被设置为绿色。这有助于用户区分当前活动的tab项。 color：这个属性用于设置tab上文字的默认（未选中）颜色。未选中时的文字颜色被设置为紫色。..., "pages/message/message", "pages/individual/individual" ] } 编写完上面的代码之后保存，对应的目录会自动创建

    20110

    现代 CSS 解决方案：文字颜色自动适配背景色！

    在 23 年的 CSS 新特性中，有一个非常重要的功能更新 -- 相对颜色。 简单而言，相对颜色的功能，让我们在 CSS 中，对颜色有了更为强大的掌控能力。...实现： 在 :hover 状态下，根据背景色，将背景亮度 l 调整为原背景色的 1.2 倍 在 :avtive 状态下，根据背景色，将背景亮度 l 调整为原背景色的 0.8 倍 在实际业务中，这是一个非常有用的用法...当背景为白色时，文字应该为黑色）。...会导致在灰色背景下，前景文字不可见； 绝大部分情况虽然可以正常展示，但是并不是非常美观好看 为了解决这两个问题，CSS 颜色规范在 CSS Color Module Level 6 又推出了一个新的规范...我们只需要提供 #fff 白色和 #000 黑色两种可选颜色，将这两种颜色和提供的背景色进行比较，系统会自动选取对比度更高的颜色。

    86710

    Loading Animation

    此项为非必要修改项，主要是为了避免使用image主题时，切换夜间模式后，背景色被强制覆盖为黑色，说白了就是治疗强迫症。...其中#ca3b3e是设置为image主题时，切换为夜间模式后，自定义图片的背景色值。（切换夜间模式时，整个页面会降低色调，所以连带着自定义图片的色值也变暗，需要重新取值。）...超时自动结束 手动点击结束 可以给加载动画设置一个settimeout()的函数来达到伪·加载完毕的效果，即超时了自动关闭加载动画，即使页面还在加载。...如示例一样，如果想要保留背景拉开帷幕的效果，我们可以保留loading.pug的前三行，在第四行与.loading-right-bg保持相同缩进来添加新的页面元素。...欢迎在评论区留下你的设想。或者是托我帮忙做加载动画的样式适配（好看的话还是会帮忙的），或者是添加新的配置项构思（啊，我就客套一下，不要真的提太麻烦的需求）。

    1.6K30

    和 lvgo 一起学设计模式（十三）行为型之策略模式

    需求： 用户可以根据自己的喜欢自行选择预设的 3 个主题配色 3 个主题配色： 七彩斑斓的黑 背景色：backgroundColor 黑色 字体颜色：fontColor 灰色 五颜六色的黑 背景色：...backgroundColor 黑灰色 字体颜色：fontColor 白色 绚烂多彩的黑 背景色：backgroundColor 灰黑色 字体颜色：fontColor 黑色 代码实现： /** *...- 背景色：backgroundColor 灰黑色 - 字体颜色：fontColor 黑色 其实要说这个策略模式的实现，它本身就是这么一个非常简单的写法。...JDK 为每种不同的数据类型定义了一系列的算法，并将每个算法封装起来，使他们可以通过 Comparator 接口进行相互替换，对于客户端来讲，尽管调用比较方法就可以了，即使算法发生了改变（替换其他算法）...NullComparator(false, var0); } // 等等，如果还想了解可以自行查看 java/util/Comparator.java 注意：两个空值比较只是提供了当两个元素为空时的比较策略

    23520

    【愚公系列】《微信小程序与云开发从入门到实践》019-导航组件与页面配置节点组件

    在示例工程的 pages 文件夹下创建一个新的页面文件夹，命名为 navigatorDemo，然后在 navigatorDemo.wxml 文件中编写如下示例代码： <!...1.2 功能说明 运行上述代码后，当用户点击页面中的 跳转到首页 文案时，页面会自动跳转到 index 页面。...在设置配置项时，可以将其绑定为属性变量，这样就可以动态地修改页面的配置项。...system 时则使用微信提供的字体大小 page-orientation 字符串 设置页面的方向，可选值为： auto：自动...在代码层面，即使在 WXML 文件的最前面定义此组件。与此同时，对于页面中导航栏的样式配置，可以使用 navigation-bar 组件。

    10800

    HTML5点击全屏的方法

    sitePoint上的”How to Use the HTML5 Full-Screen API“, 较新的文章吗，跟实际应用走的也很近，有demo，更值得参考。...:full-screen{}用在CSS代码中，可以控制全屏元素（及其子元素）全屏状态时的样式。同样，不同浏览器不同前缀。...如果想要设置默认黑色背景层的样式，可以使用伪元素::backdrop。 一个页面如果有多个全屏元素，在CSS控制的时候，可以使用类似#element:full-screen{}的选择器分别控制。...背景色非强设置，通过如下CSS，我们就可以进行修改： :-moz-full-screen { background-color: #fff; } 结果，就是下图这个样子，黑色背景变成白色背景了：...background-color: black; position: fixed; top: 0; right: 0; left: 0; bottom: 0; } 于是，这样子，即使在

    4.7K30

    PS技巧方法==软件安装包Photoshop最新版本下载安装

    Photoshop是一款非常好用的图像编辑软件，很多小伙伴在遇到有图片需要进行编辑 工作 时，都会使用这款软件进行操作，但是也不妨有许多新手同学们第一次使用这款软件，软件强大的功能让他们有些不知如何操作...+D取消选区，再使用快捷键Ctrl+I对图像反相; 　　8、按照通道抠图的原理，白色为保留部分黑色为删除部分，而目前除了人物和头发是白色之外，其它区域都是灰色的。...所以，还需要将这些灰色区域调整为黑色。 　　...，给图片添加一个背景色观察是否抠图成功。...在下载之前，需要先创建一个Adobe账号，并登录到Adobe Creative Cloud。在Creative Cloud应用程序中，找到Photoshop，并单击下载按钮，等待下载完成。

    1.1K30

    ps快捷键

    在英文输入法下，在键盘上点击D键可以使前背景色默认为黑白色，按X键可以切换前景色和背景色。 如何来填充前景色和背景色？...磁性套索工具：它用点击拖动的方法，对图像进行选取，它以一种智能的方法，自动搜索图像边较清晰。 宽度：指搜寻边缘像素的宽度。 边对比度：指搜寻时灵敏度，百分比值越高就越灵敏。...例七：火焰文字 （1) 模式灰度，背景色填充黑色，设置前景色为白色。 （2) 横排文字工具，右键栅格化图层，文字放到中下位置。...文件菜单，存储为WEB 所用格式，快捷键是 Alt + Shift + Ctrl + S 。桌面自动升层为IMAGES 文件夹， 画笔工具：快捷键是B ，画笔工具编辑的是前景色。...渐变编辑器”中) 【Ctrl】+【N】 文件操作 新建图形文件 【Ctrl】+【N】 用默认设置创建新文件 【Ctrl】+【Alt】+【N】 打开已有的图像 【Ctrl】+【O】 打开为...

    4K50
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券