返回

零基础学UI设计

#C端UI设计
95%
进度
0/14
知识点
0
笔记
概述
移动端UI设计的基本认识
移动端UI设计的基本认识
UI 界面设计所需的技能解析
UI 设计的软件介绍
移动端的基础规范认识
移动端的规范认识
屏幕和分辨率的规范
设计的单位和格式
UI 中的字体与显示
UI 文字的属性设置
基本色彩模式的认识
UI 设计中的原子理论
iOS 的基本规范认识
iOS 的控件和组件认识
标准规范下的APP 设计演示
苹果音乐主页的设计
资料库页面的设计
专辑页面的设计
播放页面的设计
界面的合并和输出
移动端的基本控件和组件设计
UI 中的尺寸定义逻辑
按钮的设计逻辑
输入框的设计逻辑
列表行的设计逻辑
图标的尺寸定义
分页器控件的设计
轮播广告组件设计
快速入口的设计
瓷片区的设计
动态卡片的设计
商品卡片的设计
模态弹窗的设计
移动端页面设计的解析
登录页面的设计
综合型主页设计
动态列表页面设计
商品列表页面设计
电商详情页面设计
影音详情页设计
用户设置页面设计
表单页面设计
UI 中的视觉风格
夜间模式的设计
UI 中的投影应用
UI视频课程和素材
首页知识库C端UI设计零基础学UI设计

夜间模式的设计

酸梅干超人 编辑于 2024-01-0465人正在学
30

苹果在 iOS13 中,正式推出了深色模式 Dark Mode,允许系统进行浅色和深色的模式的切换。

深色模式的应用,不仅仅是控制iOS的官方应用,也建议第三方 APP做出适配,随系统的模式做出改变。所以,APP的设计中往往会增加对深色模式的设计。

虽然深色模式也允许设计师自由发挥,但要尽量在搞明白官方的深色设计规范以后再动手,可以得到更理想的结果。

首先就是色彩方面,在官方的色彩面板中,为所有色彩都适配了一个深色的模式,所以有一半的颜色是在深色背景内。

仔细看就会发现两侧的颜色是有差异的,原因是人在感知色彩时是会受到背景颜色影响的,想要在深色模式下获得相同的色彩体验就需要做一定的调整。比如下面就是两种模式下颜色的应用效果,看起来似乎没有什么区别,但用的颜色并不一致。

这就意味着如果设计师要针对自己项目适配深色模式,那么主色、辅助色就都需要在深色模式下做微调,以获得近似的色彩体验,调整时将两个画布靠近做对比即可。

除了这些带有色相的色彩,在中性色的应用上官方也有指定,如背景色、文字色、分隔线等,下面分别解释。

首先是背景色,使用了三个嵌套的层级,当卡片进行叠加时使用。在浅色模式下的表现为白-浅灰-白,而深色模式则是由深到浅的三个灰度。

文字色除了一级色彩使用的全黑和全白之外,其余三个层级均为同一色彩的不同透明度。

另外,苹果还提供了一组带透明度的「填充色」(Fill Color) ,这组填充色能够在 RGB 色值保持一致的情况下,仅仅通过微调不透明度就能在浅色和深色背景中达到相似的对比度,设计中如有需要,可以直接调用。

而分割线,苹果也给出了深浅模式下各一组带透明和不透明的色彩,正常情况下使用带透明度的即可,只有当出现交叉分割线时才需要用到第一列实色。

点赞
收藏
学会
40743065
下一篇: UI 中的投影应用
掌握好投影的使用,是必备的 UI 视觉设计基础。投影远没有大家想象的那么简单,即使软件中可以设置的参数并不多,很设计师始终没办法很好的应用投影来提升自己的设计质感。 投影的基本认识 有了光,才有影。光影是美术和摄影最核心的基础。在光学原理中,不透明体遮挡光源,会产生的影子有两部分,本影和半影。本影是...
笔记 (3)
只看自己
logo
UX小学生 记录于 2024-06-24
背景色的层级关系: 浅色模式下的表现为白-浅灰-白,而深色模式则是由深到浅的三个灰度。
原文: 首先是背景色,使用了三个嵌套的层级,当卡片进行叠加时使用。在浅色模式下的表现为白-浅灰-白,而深色模式则是由深到浅的三个灰度。
凯尔队长 记录于 2024-03-06
把两张页面挨在一起对比颜色的差异(也可直接把亮色模式下的颜色 全部提取出来,统一调整色调)
原文: 设计师要针对自己项目适配深色模式,那么主色、辅助色就都需要在深色模式下做微调,以获得近似的色彩体验,调整时将两个画布靠近做对比即可。
© 2023 uxbaike.com All rights reserved
版权声明意见反馈联系我们
weixinlogo
mx-auto
TOP
mx-auto
笔记
mx-auto
点赞