CN113568698A - 一种暗模式色彩显示管理方法和装置 - Google Patents
一种暗模式色彩显示管理方法和装置 Download PDFInfo
- Publication number
- CN113568698A CN113568698A CN202110869180.7A CN202110869180A CN113568698A CN 113568698 A CN113568698 A CN 113568698A CN 202110869180 A CN202110869180 A CN 202110869180A CN 113568698 A CN113568698 A CN 113568698A
- Authority
- CN
- China
- Prior art keywords
- color
- mode
- dark
- foreground
- default mode
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000007726 management method Methods 0.000 title claims abstract description 66
- 238000000034 method Methods 0.000 claims abstract description 37
- 238000013461 design Methods 0.000 claims description 34
- 238000004590 computer program Methods 0.000 claims description 16
- 239000003086 colorant Substances 0.000 description 61
- 238000010586 diagram Methods 0.000 description 24
- 230000008569 process Effects 0.000 description 12
- 230000000007 visual effect Effects 0.000 description 11
- 230000000694 effects Effects 0.000 description 7
- 230000006870 function Effects 0.000 description 5
- 238000012545 processing Methods 0.000 description 5
- 235000017166 Bambusa arundinacea Nutrition 0.000 description 2
- 235000017491 Bambusa tulda Nutrition 0.000 description 2
- 241001330002 Bambuseae Species 0.000 description 2
- 235000015334 Phyllostachys viridis Nutrition 0.000 description 2
- 239000011425 bamboo Substances 0.000 description 2
- 239000000463 material Substances 0.000 description 2
- 230000016776 visual perception Effects 0.000 description 2
- 208000003464 asthenopia Diseases 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 229910052956 cinnabar Inorganic materials 0.000 description 1
- 230000001771 impaired effect Effects 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000008447 perception Effects 0.000 description 1
- 238000009877 rendering Methods 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 238000012360 testing method Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
- Telephone Function (AREA)
Abstract
本发明提供了一种暗模式色彩显示管理方法和装置,本发明涉及移动互联,该方法包括:获取移动设备的默认模式前景色;将移动设备调整至暗模式,获取暗模式深色背景;根据默认模式前景色和暗模式深色背景,确定暗模式前景色;将默认模式前景色和暗模式前景色进行语义化颜色命名,确定颜色对应关系合集;根据颜色对应关系合集,将默认模式前景色和暗模式前景色动态展示。本发明通过计算默认模式前景色和暗模式深色背景,得到唯一理性的暗模式前景色的颜色色值,通过语义化颜色命名,提高开发者颜色管理的效率。
Description
技术领域
本发明涉及移动设备数据处理技术领域,尤其涉及一种暗模式色彩显示管理方法和装置。
背景技术
本部分旨在为权利要求书中陈述的本发明的实施方式提供背景或上下文。此处的描述不因为包括在本部分中就承认是现有技术。
暗模式(深色模式)是当下设计趋势之一,要求在屏幕背景色由浅色改成深色后,依然保证背景之上的元素易识别。
实际上,在默认模式下,背景之上的文字、图标等某些颜色(即前景色)在白色背景上可阅读,但放在暗模式的深色背景上会难以辨认失去易读性。
iOS为了方便的适配暗模式内置Light/Dark Mode提供给开发者和设计师使用,但颜色有限,不能满足大多数应用的自定义颜色;其最根本的缺点是如果产品使用了自定义颜色是无法通过Light/Dark Mode获得良好的显示效果,需要开发者逐个修改。如果依据设计师的感性视觉经验,色值并不唯一,而且工作量大。
Android Q提供了Force Dark功能,系统转换颜色,需要大量代码和详细的测试确保没有颜色识别不清的情况,工作量大。对自定义颜色,谷歌的解决方案是为饱和度较高的颜色叠加一层透明度40%的白色,但不能保证每种颜色在暗模式下都有好的显示效果,而且颜色视觉差异可能会很大。
面对自定义颜色多个的情况,开发者需要跟设计师细究到底什么时候应该使用哪个颜色,颜色的管理十分麻烦。在一个产品的颜色规范中,通常有主色和多个辅色,颜色一多需要改变的数值也很多,开发者需要跟设计师细究到底什么时候应该使用哪个颜色,必定产生开发和设计颜色管理的麻烦和困扰,降低工作效率。
而现在大多数的移动应用都很注重视觉品牌形象,使用自己的颜色规范;现有的iOS和Android Q具有局限性,无法满足暗模式下自定义颜色规范以及管理。
因此,如何提供一种新的方案,其能够解决上述技术问题是本领域亟待解决的技术难题。
发明内容
本发明实施例提供一种暗模式色彩显示管理方法,本发明通过计算默认模式前景色和暗模式深色背景,得到唯一理性的暗模式前景色的颜色色值,通过语义化颜色命名,提高开发者颜色管理的效率,该方法包括:
获取移动设备的默认模式前景色;
将移动设备调整至暗模式,获取暗模式深色背景;
根据默认模式前景色和暗模式深色背景,确定暗模式前景色;
将默认模式前景色和暗模式前景色进行语义化颜色命名,确定颜色对应关系合集;
根据颜色对应关系合集,将默认模式前景色和暗模式前景色动态展示。
本发明实施例还提供一种暗模式色彩显示管理装置,包括:
默认模式前景色获取模块,用于获取移动设备的默认模式前景色;
暗模式深色背景获取模块,用于将移动设备调整至暗模式,获取暗模式深色背景;
暗模式前景色确定模块,用于根据默认模式前景色和暗模式深色背景,确定暗模式前景色;
颜色对应关系合集确定模块,用于将默认模式前景色和暗模式前景色进行语义化颜色命名,确定颜色对应关系合集;
动态展示模块,用于根据颜色对应关系合集,将默认模式前景色和暗模式前景色动态展示。
本发明实施例还提供一种计算机设备,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,所述处理器执行所述计算机程序时实现上述一种暗模式色彩显示管理方法。
本发明实施例还提供一种计算机可读存储介质,所述计算机可读存储介质存储有执行上述一种暗模式色彩显示管理方法的计算机程序。
本发明实施例提供的一种暗模式色彩显示管理方法和装置,包括:首先获取移动设备的默认模式前景色;然后将移动设备调整至暗模式,获取暗模式深色背景;接着根据默认模式前景色和暗模式深色背景,确定暗模式前景色;下一步将默认模式前景色和暗模式前景色进行语义化颜色命名,确定颜色对应关系合集;最后根据颜色对应关系合集,将默认模式前景色和暗模式前景色动态展示。本发明通过计算默认模式前景色和暗模式深色背景,得到唯一理性的暗模式前景色的颜色色值,保证每个色值清晰可辨,为暗模式下的颜色方案提供了理性的标准,保证前景色的可识别性,提高用户在暗模式下的可读性;通过语义化颜色命名,将默认模式和暗模式下的两套颜色对应,形成对应关系,将颜色动态打包展示,提高开发者颜色管理的效率。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。在附图中:
图1为本发明实施例一种暗模式色彩显示管理方法示意图。
图2为谷歌Material Design暗模式设计规范示意图。
图3为本发明实施例一种暗模式色彩显示管理方法的获取移动设备的默认模式前景色过程示意图。
图4为本发明实施例一种暗模式色彩显示管理方法的确定暗模式前景色过程示意图。
图5为本发明实施例一种暗模式色彩显示管理方法的对默认模式前景色进行调整过程示意图。
图6为本发明实施例一种暗模式色彩显示管理方法的颜色对应关系合集过程示意图。
图7为本发明实施例一种暗模式色彩显示管理方法的一个实例中主题色与辅助色在默认模式与暗模式下的对比图。
图8为运行本发明实施的一种暗模式色彩显示管理方法的计算机装置示意图。
图9为本发明实施例一种暗模式色彩显示管理装置示意图。
具体实施方式
为使本发明实施例的目的、技术方案和优点更加清楚明白,下面结合附图对本发明实施例做进一步详细说明。在此,本发明的示意性实施例及其说明用于解释本发明,但并不作为对本发明的限定。
本发明涉及移动互联。图1为本发明实施例一种暗模式色彩显示管理方法示意图,如图1所示,本发明实施例提供一种暗模式色彩显示管理方法,本发明通过计算默认模式前景色和暗模式深色背景,得到唯一理性的暗模式前景色的颜色色值,通过语义化颜色命名,提高开发者颜色管理的效率,该方法包括:
步骤101:获取移动设备的默认模式前景色;
步骤102:将移动设备调整至暗模式,获取暗模式深色背景;
步骤103:根据默认模式前景色和暗模式深色背景,确定暗模式前景色;
步骤104:将默认模式前景色和暗模式前景色进行语义化颜色命名,确定颜色对应关系合集;
步骤105:根据颜色对应关系合集,将默认模式前景色和暗模式前景色动态展示。
本发明实施例提供的一种暗模式色彩显示管理方法,包括:首先获取移动设备的默认模式前景色;然后将移动设备调整至暗模式,获取暗模式深色背景;接着根据默认模式前景色和暗模式深色背景,确定暗模式前景色;下一步将默认模式前景色和暗模式前景色进行语义化颜色命名,确定颜色对应关系合集;最后根据颜色对应关系合集,将默认模式前景色和暗模式前景色动态展示。本发明通过计算默认模式前景色和暗模式深色背景,得到唯一理性的暗模式前景色的颜色色值,保证每个色值清晰可辨,为暗模式下的颜色方案提供了理性的标准,保证前景色的可识别性,提高用户在暗模式下的可读性;通过语义化颜色命名,将默认模式和暗模式下的两套颜色对应,形成对应关系,将颜色动态打包展示,提高开发者颜色管理的效率。
在本发明实施例中:
默认模式:是指移动设备在浅色背景或白色背景上显示前景色的模式,默认模式有时也称为浅色模式。
前景色:与在背景之上包含图标、文字等元素的颜色。
暗模式:为了减轻用户眼睛疲劳,延长电池寿命,暗模式在iOS和Android的操作系统中均有显示。暗模式具有美学吸引力,特别是iOS 13和Android Q会判断当前系统为默认模式或是暗模式进行动态调整颜色。
通常,大多数产品自定的设计规范是基于默认模式上的颜色规范,如果用户切换到暗模式下,背景改为深色,原本在浅色背景上显示良好的前景色在深色背景上会难以识别。为了使前景色在深色模式上的显示清晰可见,第一,我们需要对前景色色值手动进行细微调整,如何微调,现下需要凭借设计师感性的经验,不仅工作量大而且对人员要求高;第二,一个产品的颜色规范中,通常有主色和多个辅色,颜色一多需要改变的数值也很多,开发者需要跟设计师细究到底什么时候应该使用哪个颜色,必定产生开发和设计颜色管理的麻烦和困扰,降低工作效率。
在iOS 13系统中,已经内建了Light/Dark Mode两种模式,即动态颜色,会根据当前系统默认模式或者暗模式来调整颜色,但颜色有限,不能满足大多数应用的自定义颜色,如果依据设计师的感性视觉经验,色值并不唯一,而且工作量大。手动调整颜色的明度和饱和度,缺少科学理性的指导方案。
对自定义颜色,谷歌的解决方案是为饱和度较高的颜色叠加一层透明度40%的白色,但不能保证每种颜色在暗模式下都有好的显示效果,而且颜色视觉差异可能会很大。如图2所示,在谷歌Material Design暗模式设计规范中,谷歌为饱和度较高的颜色,例如原色值为#E02D47的警示色,在叠加一层透明度40%的白色(#FFFFFF alpha40)起到降低饱和度的效果,得到对应色值#EC8190,这虽然是一种提升明度的方案,但是过于概括,不适用于所有自定义颜色。增加透明度40%的白色后,每一个色值颜色都发生改变,颜色变浅与原有颜色视觉效果差异较大。
为了获得良好的显示效果,针对上述自定义颜色在暗模式下产生的两点问题,提高用户在暗模式下的可读性与开发者颜色管理的效率,本发明引入WCAG2.0为标准,结合系统设计规范,提供了一种暗模式下的色彩显示管理方法。
具体实施本发明实施例提供的一种暗模式色彩显示管理方法时,在一个实施例中,可以包括:
获取移动设备的默认模式前景色;
将移动设备调整至暗模式,获取暗模式深色背景;
根据默认模式前景色和暗模式深色背景,确定暗模式前景色;
将默认模式前景色和暗模式前景色进行语义化颜色命名,确定颜色对应关系合集;
根据颜色对应关系合集,将默认模式前景色和暗模式前景色动态展示。
图3为本发明实施例一种暗模式色彩显示管理方法的获取移动设备的默认模式前景色过程示意图,如图3所示,具体实施本发明实施例提供的一种暗模式色彩显示管理方法时,在一个实施例中,获取移动设备的默认模式前景色,包括:
步骤301:将移动设备调整至默认模式;
步骤302:获取移动设备在默认模式下的默认模式前景色和默认模式背景色;其中,移动设备在默认模式时,默认模式背景色为浅色背景;
步骤303:提取默认模式前景色的标准色值。
实施例中,前提条件之一是需要获取移动设备的默认模式前景色,主要过程包括:
首先,将移动设备调整至默认模式;在默认模式下,背景色和前景色正常显示,且清晰可见;然后,通过服务端获取移动设备在默认模式下的默认模式前景色和默认模式背景色;其中,移动设备在默认模式时,默认模式背景色为浅色背景;最后,提取默认模式前景色的标准色值。
本申请是以默认模式的颜色规范为基础计算暗模式前景色,因此通过服务端准确获取移动设备的默认模式前景色是实现暗模式色彩清晰显示的关键基础;其中,上述服务端可以是服务器,也可以是计算机集群。默认模式前景色的标准色值,是默认模式下的颜色规范。
具体实施本发明实施例提供的一种暗模式色彩显示管理方法时,在一个实施例中,提取默认模式前景色的标准色值,包括:
提取默认模式下主色和辅助色、文字颜色以及图标颜色的标准色值,作为默认模式前景色的标准色值。
实施例中,根据设计规范记录下默认模式下前景色的标准色值,即主色和辅助色、文字颜色、图标颜色等颜色规范。
图4为本发明实施例一种暗模式色彩显示管理方法的确定暗模式前景色过程示意图,如图4所示,具体实施本发明实施例提供的一种暗模式色彩显示管理方法时,在一个实施例中,根据默认模式前景色和暗模式深色背景,确定暗模式前景色,包括:
步骤401:将默认模式前景色置于暗模式深色背景之上;
步骤402:根据色彩无障碍设计标准WCAG2.0,对默认模式前景色进行调整,输出暗模式前景色。
实施例中,为满足WCAG2.0色彩无障碍设计标准,保证前景色在背景色上易读性,本发明通过在服务端逐一将默认模式下的多种前景色放置在暗模式上,根据色彩无障碍设计标准WCAG2.0,对默认模式前景色进行调整,输出暗模式前景色;输出的暗模式前景色即为与默认模式前景色色相相同对于应的暗模式下的颜色值。
图5为本发明实施例一种暗模式色彩显示管理方法的对默认模式前景色进行调整过程示意图,如图5所示,具体实施本发明实施例提供的一种暗模式色彩显示管理方法时,在一个实施例中,根据色彩无障碍设计标准WCAG2.0,对默认模式前景色进行调整,输出暗模式前景色,包括:
步骤501:根据色彩无障碍设计标准WCAG2.0,确定调整标准为对比度满足4.5:1;
步骤502:根据颜色的HSB模式,在暗模式深色背景之上,保持默认模式前景色的色相不变,对其明度、饱和度进行调整,直至调整后的默认模式前景色与暗模式深色背景的对比度满足4.5:1,将调整后的默认模式前景色输出为暗模式前景色。
实施例中,色彩无障碍设计标准WCAG2.0,提出视觉呈现以及文本图形至少满足4.5:1对比度(AA级),在不佳使用环境下或对于有视觉障碍的用户,保持较好的用户体验。
为满足WCAG2.0色彩无障碍设计标准4.5:1对比度,保证前景色在背景色上易读性。本发明根据颜色的HSB模式,色相不变,对其明度、饱和度进行调整,只要在深色背景上满足4.5:1对比度,即得出与其色相相同对于应的暗模式下的颜色值。
手动调整颜色的明度和饱和度,缺少科学理性的指导方案。本发明通过色彩无障碍设计标准WCAG2.0,限制调整标准为对比度满足4.5:1,得到唯一理性的暗模式前景色的颜色色值,保证每个色值清晰可辨。
图6为本发明实施例一种暗模式色彩显示管理方法的颜色对应关系合集过程示意图,如图6所示,具体实施本发明实施例提供的一种暗模式色彩显示管理方法时,在一个实施例中,将默认模式前景色和暗模式前景色进行语义化颜色命名,确定颜色对应关系合集,包括:
步骤601:将默认模式前景色和暗模式前景色进行语义化颜色命名;
步骤602:将语义化颜色命名的默认模式前景色与语义化颜色命名的暗模式前景色建立对应关系;
步骤603:根据移动设备的操作系统,将建立对应关系的语义化颜色命名的默认模式前景色和语义化颜色命名的暗模式前景色构成颜色对应关系合集。
实施例中,语义化颜色命名确定颜色对应关系合集的过程,包括:
首先将默认模式前景色和暗模式前景色进行语义化颜色命名;然后将语义化颜色命名的默认模式前景色与语义化颜色命名的暗模式前景色建立对应关系;最后根据移动设备的操作系统,将建立对应关系的语义化颜色命名的默认模式前景色和语义化颜色命名的暗模式前景色构成颜色对应关系合集。移动设备的操作系统,分为iOS与Android。通过语义化颜色命名,将默认模式和暗模式下的两套颜色对应,形成对应关系,可以提高开发者颜色管理的效率。易于扩展,不仅仅适用于暗模式,在不同的背景色可以根据上述设计方法设计多套配色方案,可兼容多种视觉设计模式。
图7为本发明实施例一种暗模式色彩显示管理方法的一个实例中主题色与辅助色在默认模式与暗模式下的对比图,如图7所示,在本发明实施例的实例中,主题色与辅助色在默认模式与暗模式下对比显示。
某银行手机银行在默认模式下前景色中的主题色与辅助色如下图左边,在暗模式时,改变浅色背景色为深色背景,修改色值后使颜色满足4.5:1对比度后得到图7右边色值,由图7中可以看到,左右相互对应,形成了对应关系。由于图片不能带有颜色,因此本申请在每一项颜色变化中标注了具体的色值,例如:
在默认模式下的酒红色#E02D47,在暗模式下为#93C55;
在默认模式下的晴蓝色#2D70ED,在暗模式下为#3A7BF4;
在默认模式下的竹绿色#14A684,在暗模式下为#14A684;
在默认模式下的朱砂色#F54320,在暗模式下为#EC3E1C;
在默认模式下的落霞色#F56200,在暗模式下为#F56200;
在默认模式下的黑色#222222,在暗模式下为#DCDCDC;
在默认模式下的深灰色#666666,在暗模式下为#979797;
在默认模式下的灰色#999999,在暗模式下为#646464;
在默认模式下的浅灰色#CCCCCC,在暗模式下为#494949。
另外想说明,本发明实施例追求的是良好的显示效果,并非要改变全部颜色的色值,有些颜色(如落霞色#F56200、竹绿色#14A684)刚好满足4.5:1对比度,所以色值未发生改变。应用本发明的方法,默认模式与暗模式的视觉感受是几乎无差的。
“满足4.5:1对比度的配色方案”,需要设计师在设计软件中真实的检验产品中的自定义颜色,即前景色是否满足WCAG2.0所提出的视觉呈现以及文本图形至少满足4.5:1对比度。可以让所得出的色彩方案更加理性,保证不同机型、不同环境、不同使用者的易读性,得到较好的用户体验。
具体实施本发明实施例提供的一种暗模式色彩显示管理方法时,在一个实施例中,构成颜色对应关系合集,包括:
在移动设备的操作系统为iOS时,构成的颜色对应关系合集为一套合集,语义化颜色命名的默认模式前景色和语义化颜色命名的暗模式前景色都包含在其中;
在移动设备的操作系统为Android时,构成的颜色对应关系合集为具有对应关系的第一套合集与第二套合集,语义化颜色命名的默认模式前景色保存第一套合集,语义化颜色命名的暗模式前景色保存至第二套合集。
实施例中,为了适应不同移动设备的操作系统,首先需要区分移动设备的操作系统,在移动设备的操作系统为iOS时,构成的颜色对应关系合集为一套合集,语义化颜色命名的默认模式前景色和语义化颜色命名的暗模式前景色都包含在其中;在移动设备的操作系统为Android时,构成的颜色对应关系合集为具有对应关系的第一套合集与第二套合集,语义化颜色命名的默认模式前景色保存第一套合集,语义化颜色命名的暗模式前景色保存至第二套合集。
在本发明实施例的一个实例中,将默认模式和暗模式下的两种颜色统一一对应,例如称为colorX,语义化颜色命名。例如,在iOS 13系统中,在一个合集里分为:默认模式前景色为[color1,color2,color3,color4,color5…],暗模式前景色为[color1’,color2’,color3’,color4’,color5’…],色值不同,一套合集命名对应;
在Android系统中,利用Android Q建立两套颜色集合:默认模式下前景色A第一套合集为[color1,color2,color3,color4,color5…],暗模式下前景色B第二套合集为[color1,color2,color3,color4,color5…],色值不同,两套合集命名相同。iOS与Android均形成一一对应的关系。
浅色背景(或白色背景)与深色背景差距较大,系统可以根据Light/Dark Mode动态展示背景色颜色,因此可以根据颜色对应关系合集,将默认模式前景色和暗模式前景色利用Light/Dark Mode动态展示。
下面结合具体场景,对本发明实施例提供的一种暗模式色彩显示管理方法进行简要描述:
为了获得良好的显示效果,针对上述自定义颜色在暗模式下产生的两点问题,提高用户在暗模式下的可读性与开发者颜色管理的效率,本发明引入WCAG2.0为标准,结合系统设计规范,提供了一种暗模式下的色彩显示与管理方法。
为满足WCAG2.0色彩无障碍设计标准4.5:1对比度,保证前景色在背景色上易读性。本发明通过逐一将默认模式下的多种前景色放置在暗模式上,根据颜色的HSB模式,色相不变,对其明度、饱和度进行调整,只要在深色背景上满足4.5:1对比度,即得出与其色相相同对于应的暗模式下的颜色值。
我们将默认模式和暗模式下的两种颜色统一一对应,例如称为colorX,语义化颜色命名。例如,在iOS 13系统中,在一个合集里分为:默认模式前景色为[color1,color2,color3,color4,color5…],暗模式前景色为[color1’,color2’,color3’,color4’,color5’…],色值不同,一套合集命名对应;在Android Q中,建立两套颜色集合:默认模式下前景色A合集为[color1,color2,color3,color4,color5…],暗模式下前景色B合集为[color1,color2,color3,color4,color5…],色值不同,两套合集命名相同。iOS与Android均形成一一对应的关系。
虽然白色背景和深色背景差距较大,系统可以根据Light/Dark Mode动态展示背景色颜色。
本发明结合WCAG2.0标准,至少满足4.5:1对比度,通过逐一调整的方式得到相应配色方案;将默认模式与暗模式的颜色形成对应关系,语义化颜色命名,实现Light/DarkMode动态展示。例如中国银行手机银行的主题色与辅助色如下图左边,改变浅色背景色色值为深色,使得颜色满足4.5:1对比度后得到下图右边色值,我们可以看到,左右相互对应,形成了对应关系。另外想说明,本发明追求的是良好的显示效果,并非要改变全部颜色色值,有些颜色(如下图橙色#F56200)刚好满足4.5:1对比度,所以色值未发生改变。应用本发明的方法,默认模式与暗模式的视觉感受是几乎无差的。
本发明:对原本使用了自定义颜色的移动应用在适配暗模式上提供了一种解决方法。利用WCAG2.0标准,得到唯一理性的颜色色值,保证每个色值清晰可辨。通过语义化颜色命名,我们将默认模式和暗模式下的两套颜色对应,形成对应关系,开发者将颜色打包展示。
技术人员在根据本发明实施的一种暗模式色彩显示管理方法开发相应的软硬件时,需要根据默认模式的色彩定义产品暗模式的配色方案,进行语义化颜色命形成对应关系。最重要/最难的部分,是已知默认模式前景色色值和暗模式下背景色色值,对默认模式的前景色色值进行微调满足对比度为4.5:1,即得到暗模式下的前景色;让默认模式与暗模式的色值形成对应。
本发明满足4.5:1对比度的配色方案:以默认模式的颜色规范为基础,利用设计软件逐一在暗模式背景上调整出暗模式的配色方案。语义化颜色命名:将默认模式与暗模式的两种颜色形成对应关系集合在一起。动态展示:根据Light/Dark Mode自动展示
本发明实施还提供一种暗模式色彩显示管理方法的流程,包括:
1.确定色值,根据设计规范记录下默认模式下前景色的标准色值,即主色和辅助色、文字颜色、图标颜色等颜色规范。
2.确定配色方案,将前景色置于暗模式深色背景之上,调整对比度,符合4.5:1对比度原则,可扩展更广的色域。
3.将两者进行语义化命名,默认模式与暗模式颜色色值一一对应,得到动态色彩。
4.动态展示,系统依照Light/Dark Mode动态展示。
上述步骤均为标准步骤,但需要说明的是,存在于有些颜色在常规模式和暗模式下均符合4.5:1的对比度,即暗模式下的颜色无需调整,也就是默认模式和暗模式是一个色值的情况下,用相同色值形成对应关系。满足4.5:1对比度的配色方案,需要设计师在设计软件中真实的检验产品中的自定义颜色,即前景色是否满足WCAG2.0所提出的视觉呈现以及文本图形至少满足4.5:1对比度。此步骤的目的是让所得出的色彩方案更加理性,保证不同机型、不同环境、不同使用者的易读性,得到较好的用户体验。
本发明实施例的关键点在于:满足4.5:1对比度的配色方案:提高用户在暗模式下的可读性。语义化颜色命名:提高开发者颜色管理的效率。为暗模式下的颜色方案提供了理性的标准,保证前景色的文字图标等的可识别性。易于扩展,不仅仅适用于暗模式,在不同的背景色可以根据上述设计方法设计多套配色方案,可兼容多种视觉设计模式。
图8为运行本发明实施的一种暗模式色彩显示管理方法的计算机装置示意图,如图8所示,本发明实施例还提供一种计算机设备,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,所述处理器执行所述计算机程序时实现上述一种暗模式色彩显示管理方法。
本发明实施例还提供一种计算机可读存储介质,所述计算机可读存储介质存储有执行实现上述一种暗模式色彩显示管理方法的计算机程序。
本发明实施例中还提供了一种暗模式色彩显示管理装置,如下面的实施例所述。由于该装置解决问题的原理与一种暗模式色彩显示管理方法相似,因此该装置的实施可以参见一种暗模式色彩显示管理方法的实施,重复之处不再赘述。
图9为本发明实施例一种暗模式色彩显示管理装置示意图,如图9所示,本发明实施例还提供一种暗模式色彩显示管理装置,具体实施时可以包括:
默认模式前景色获取模块901,用于获取移动设备的默认模式前景色;
暗模式深色背景获取模块902,用于将移动设备调整至暗模式,获取暗模式深色背景;
暗模式前景色确定模块903,用于根据默认模式前景色和暗模式深色背景,确定暗模式前景色;
颜色对应关系合集确定模块904,用于将默认模式前景色和暗模式前景色进行语义化颜色命名,确定颜色对应关系合集;
动态展示模块905,用于根据颜色对应关系合集,将默认模式前景色和暗模式前景色动态展示。
具体实施本发明实施例提供的一种暗模式色彩显示管理装置时,在一个实施例中,前述的默认模式前景色获取模块,具体用于:
将移动设备调整至默认模式;
获取移动设备在默认模式下的默认模式前景色和默认模式背景色;其中,移动设备在默认模式时,默认模式背景色为浅色背景;
提取默认模式前景色的标准色值。
具体实施本发明实施例提供的一种暗模式色彩显示管理装置时,在一个实施例中,前述的默认模式前景色获取模块,还用于:
提取默认模式下主色和辅助色、文字颜色以及图标颜色的标准色值,作为默认模式前景色的标准色值。
具体实施本发明实施例提供的一种暗模式色彩显示管理装置时,在一个实施例中,前述的暗模式前景色确定模块,具体用于:
将默认模式前景色置于暗模式深色背景之上;
根据色彩无障碍设计标准WCAG2.0,对默认模式前景色进行调整,输出暗模式前景色。
具体实施本发明实施例提供的一种暗模式色彩显示管理装置时,在一个实施例中,前述的暗模式前景色确定模块,还用于:
根据色彩无障碍设计标准WCAG2.0,确定调整标准为对比度满足4.5:1;
根据颜色的HSB模式,在暗模式深色背景之上,保持默认模式前景色的色相不变,对其明度、饱和度进行调整,直至调整后的默认模式前景色与暗模式深色背景的对比度满足4.5:1,将调整后的默认模式前景色输出为暗模式前景色。
具体实施本发明实施例提供的一种暗模式色彩显示管理装置时,在一个实施例中,前述的颜色对应关系合集确定模块,具体用于:
将默认模式前景色和暗模式前景色进行语义化颜色命名;
将语义化颜色命名的默认模式前景色与语义化颜色命名的暗模式前景色建立对应关系;
根据移动设备的操作系统,将建立对应关系的语义化颜色命名的默认模式前景色和语义化颜色命名的暗模式前景色构成颜色对应关系合集。
具体实施本发明实施例提供的一种暗模式色彩显示管理装置时,在一个实施例中,前述的颜色对应关系合集确定模块,还用于:
在移动设备的操作系统为iOS时,构成的颜色对应关系合集为一套合集,语义化颜色命名的默认模式前景色和语义化颜色命名的暗模式前景色都包含在其中;
在移动设备的操作系统为Android时,构成的颜色对应关系合集为具有对应关系的第一套合集与第二套合集,语义化颜色命名的默认模式前景色保存第一套合集,语义化颜色命名的暗模式前景色保存至第二套合集。
综上,本发明实施例提供的一种暗模式色彩显示管理方法和装置,包括:首先获取移动设备的默认模式前景色;然后将移动设备调整至暗模式,获取暗模式深色背景;接着根据默认模式前景色和暗模式深色背景,确定暗模式前景色;下一步将默认模式前景色和暗模式前景色进行语义化颜色命名,确定颜色对应关系合集;最后根据颜色对应关系合集,将默认模式前景色和暗模式前景色动态展示。
本发明通过计算默认模式前景色和暗模式深色背景,得到唯一理性的暗模式前景色的颜色色值,保证每个色值清晰可辨,为暗模式下的颜色方案提供了理性的标准,保证前景色的可识别性,提高用户在暗模式下的可读性;通过语义化颜色命名,将默认模式和暗模式下的两套颜色对应,形成对应关系,将颜色动态打包展示,提高开发者颜色管理的效率。
本领域内的技术人员应明白,本发明的实施例可提供为方法、系统、或计算机程序产品。因此,本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且,本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器,使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中,使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品,该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上,使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理,从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
以上所述的具体实施例,对本发明的目的、技术方案和有益效果进行了进一步详细说明,所应理解的是,以上所述仅为本发明的具体实施例而已,并不用于限定本发明的保护范围,凡在本发明的精神和原则之内,所做的任何修改、等同替换、改进等,均应包含在本发明的保护范围之内。
Claims (16)
1.一种暗模式色彩显示管理方法,其特征在于,包括:
获取移动设备的默认模式前景色;
将移动设备调整至暗模式,获取暗模式深色背景;
根据默认模式前景色和暗模式深色背景,确定暗模式前景色;
将默认模式前景色和暗模式前景色进行语义化颜色命名,确定颜色对应关系合集;
根据颜色对应关系合集,将默认模式前景色和暗模式前景色动态展示。
2.如权利要求1所述的方法,其特征在于,获取移动设备的默认模式前景色,包括:
将移动设备调整至默认模式;
获取移动设备在默认模式下的默认模式前景色和默认模式背景色;其中,移动设备在默认模式时,默认模式背景色为浅色背景;
提取默认模式前景色的标准色值。
3.如权利要求2所述的方法,其特征在于,提取默认模式前景色的标准色值,包括:
提取默认模式下主色和辅助色、文字颜色以及图标颜色的标准色值,作为默认模式前景色的标准色值。
4.如权利要求1所述的方法,其特征在于,根据默认模式前景色和暗模式深色背景,确定暗模式前景色,包括:
将默认模式前景色置于暗模式深色背景之上;
根据色彩无障碍设计标准WCAG2.0,对默认模式前景色进行调整,输出暗模式前景色。
5.如权利要求4所述的方法,其特征在于,根据色彩无障碍设计标准WCAG2.0,对默认模式前景色进行调整,输出暗模式前景色,包括:
根据色彩无障碍设计标准WCAG2.0,确定调整标准为对比度满足4.5:1;
根据颜色的HSB模式,在暗模式深色背景之上,保持默认模式前景色的色相不变,对其明度、饱和度进行调整,直至调整后的默认模式前景色与暗模式深色背景的对比度满足4.5:1,将调整后的默认模式前景色输出为暗模式前景色。
6.如权利要求1所述的方法,其特征在于,将默认模式前景色和暗模式前景色进行语义化颜色命名,确定颜色对应关系合集,包括:
将默认模式前景色和暗模式前景色进行语义化颜色命名;
将语义化颜色命名的默认模式前景色与语义化颜色命名的暗模式前景色建立对应关系;
根据移动设备的操作系统,将建立对应关系的语义化颜色命名的默认模式前景色和语义化颜色命名的暗模式前景色构成颜色对应关系合集。
7.如权利要求6所述的方法,其特征在于,构成颜色对应关系合集,包括:
在移动设备的操作系统为iOS时,构成的颜色对应关系合集为一套合集,语义化颜色命名的默认模式前景色和语义化颜色命名的暗模式前景色都包含在其中;
在移动设备的操作系统为Android时,构成的颜色对应关系合集为具有对应关系的第一套合集与第二套合集,语义化颜色命名的默认模式前景色保存第一套合集,语义化颜色命名的暗模式前景色保存至第二套合集。
8.一种暗模式色彩显示管理装置,其特征在于,包括:
默认模式前景色获取模块,用于获取移动设备的默认模式前景色;
暗模式深色背景获取模块,用于将移动设备调整至暗模式,获取暗模式深色背景;
暗模式前景色确定模块,用于根据默认模式前景色和暗模式深色背景,确定暗模式前景色;
颜色对应关系合集确定模块,用于将默认模式前景色和暗模式前景色进行语义化颜色命名,确定颜色对应关系合集;
动态展示模块,用于根据颜色对应关系合集,将默认模式前景色和暗模式前景色动态展示。
9.如权利要求8所述的装置,其特征在于,默认模式前景色获取模块,具体用于:
将移动设备调整至默认模式;
获取移动设备在默认模式下的默认模式前景色和默认模式背景色;其中,移动设备在默认模式时,默认模式背景色为浅色背景;
提取默认模式前景色的标准色值。
10.如权利要求9所述的装置,其特征在于,默认模式前景色获取模块,还用于:
提取默认模式下主色和辅助色、文字颜色以及图标颜色的标准色值,作为默认模式前景色的标准色值。
11.如权利要求8所述的装置,其特征在于,暗模式前景色确定模块,具体用于:
将默认模式前景色置于暗模式深色背景之上;
根据色彩无障碍设计标准WCAG2.0,对默认模式前景色进行调整,输出暗模式前景色。
12.如权利要求11所述的装置,其特征在于,暗模式前景色确定模块,还用于:
根据色彩无障碍设计标准WCAG2.0,确定调整标准为对比度满足4.5:1;
根据颜色的HSB模式,在暗模式深色背景之上,保持默认模式前景色的色相不变,对其明度、饱和度进行调整,直至调整后的默认模式前景色与暗模式深色背景的对比度满足4.5:1,将调整后的默认模式前景色输出为暗模式前景色。
13.如权利要求8所述的装置,其特征在于,颜色对应关系合集确定模块,具体用于:
将默认模式前景色和暗模式前景色进行语义化颜色命名;
将语义化颜色命名的默认模式前景色与语义化颜色命名的暗模式前景色建立对应关系;
根据移动设备的操作系统,将建立对应关系的语义化颜色命名的默认模式前景色和语义化颜色命名的暗模式前景色构成颜色对应关系合集。
14.如权利要求13所述的装置,其特征在于,颜色对应关系合集确定模块,还用于:
在移动设备的操作系统为iOS时,构成的颜色对应关系合集为一套合集,语义化颜色命名的默认模式前景色和语义化颜色命名的暗模式前景色都包含在其中;
在移动设备的操作系统为Android时,构成的颜色对应关系合集为具有对应关系的第一套合集与第二套合集,语义化颜色命名的默认模式前景色保存第一套合集,语义化颜色命名的暗模式前景色保存至第二套合集。
15.一种计算机设备,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,其特征在于,所述处理器执行所述计算机程序时实现权利要求1至7任一项所述方法。
16.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质存储有执行实现权利要求1至7任一项所述方法的计算机程序。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110869180.7A CN113568698A (zh) | 2021-07-30 | 2021-07-30 | 一种暗模式色彩显示管理方法和装置 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110869180.7A CN113568698A (zh) | 2021-07-30 | 2021-07-30 | 一种暗模式色彩显示管理方法和装置 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN113568698A true CN113568698A (zh) | 2021-10-29 |
Family
ID=78169336
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202110869180.7A Pending CN113568698A (zh) | 2021-07-30 | 2021-07-30 | 一种暗模式色彩显示管理方法和装置 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN113568698A (zh) |
Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN110609722A (zh) * | 2019-08-09 | 2019-12-24 | 华为技术有限公司 | 一种暗模式显示界面处理方法、电子设备与存储介质 |
CN110908765A (zh) * | 2019-11-29 | 2020-03-24 | 五八有限公司 | 一种界面显示方法、装置、终端设备及存储介质 |
CN111813472A (zh) * | 2020-06-22 | 2020-10-23 | 五八有限公司 | 一种应用界面的转换方法和装置 |
-
2021
- 2021-07-30 CN CN202110869180.7A patent/CN113568698A/zh active Pending
Patent Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN110609722A (zh) * | 2019-08-09 | 2019-12-24 | 华为技术有限公司 | 一种暗模式显示界面处理方法、电子设备与存储介质 |
CN110908765A (zh) * | 2019-11-29 | 2020-03-24 | 五八有限公司 | 一种界面显示方法、装置、终端设备及存储介质 |
CN111813472A (zh) * | 2020-06-22 | 2020-10-23 | 五八有限公司 | 一种应用界面的转换方法和装置 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN105511873B (zh) | 用户界面控件展示方法及装置 | |
JP6483221B2 (ja) | 三次元コードの生成方法 | |
KR101481684B1 (ko) | 아이콘 생성 방법 | |
CN105955754B (zh) | 一种用户界面文字显示方法及装置 | |
CN104778047A (zh) | 一种内容显示方法及终端 | |
EP2871560A1 (en) | Image processing method and apparatus | |
EP2284736B1 (en) | System and method for automated color scheme transformation | |
KR20090092035A (ko) | 모자이크 영상을 생성하는 방법 및 이를 위한 장치 | |
CN103065338A (zh) | 为背景图像中的前景图像提供阴影的方法和装置 | |
CN111414166A (zh) | 代码的生成方法、装置、设备及存储介质 | |
CN105556570A (zh) | 生成屏幕数据 | |
CN113568698A (zh) | 一种暗模式色彩显示管理方法和装置 | |
CN111199565B (zh) | 数据处理方法、装置、系统、电子设备和存储介质 | |
CN111507895A (zh) | 图像处理方法及装置、计算机存储介质、电子设备 | |
Blankenbach et al. | Optimizing and evaluating new automotive HMI image enhancement algorithms under bright light conditions using display reflectance characteristics | |
KR101214674B1 (ko) | 텍스트를 포함하는 모자이크 이미지를 생성하기 위한 장치 및 방법 | |
CN104850297A (zh) | 一种控件的显示方法及电子设备 | |
CN109062645B (zh) | 用于终端的处理信息的方法和装置 | |
CN107203453B (zh) | 一种设备视图的生成方法、装置及电子设备 | |
CN110688108A (zh) | 一种模型的生成方法、装置及存储介质 | |
Webster | Integrating color usability components into design tools | |
CN117632336A (zh) | 对话框的生成方法及装置 | |
CN114237600B (zh) | 前端页面的代码生成方法、装置、设备以及存储介质 | |
CN113763237B (zh) | 可视化报告智能美颜方法、装置和计算机可读存储介质 | |
CN116578798B (zh) | 一种页面对比度自动校准优化的方法 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination |