移动端皮肤切换方法、设计方法及计算机存储介质与流程

1.本发明涉及移动终端领域，具体地说是一种移动端皮肤切换方法、设计方法及计算机存储介质。


背景技术：

2.现在很多中高端的手机都已经搭载了oled显示屏幕，而且也紧跟着出了属于自己的暗黑模式，打开系统的暗黑模式app会有黑色背景；暗黑模式下，可大幅减少耗电量，可为弱视以及对强光敏感的用户提高可视性，也可让所有人都可以在光线较暗的环境中更轻松地使用设备。微信，钉钉等主流app均已适配了系统的暗黑模式。
3.很多手机app为了增加用户体验，给用户在ui上更多的选择，增加了让用户设置app的皮肤的功能。在主流手机系统均已增加了暗黑模式的情况下，app皮肤管理与暗黑模式适配的设计的需求应运而生，故如何将暗黑模式与多皮肤的相关设置融合，增加用户体验是目前亟待解决的技术问题。


技术实现要素：

4.本发明的技术任务是提供一种移动端皮肤切换方法、设计方法及计算机存储介质，来解决如何将暗黑模式与多皮肤的相关设置融合，增加用户体验的问题。
5.本发明的技术任务是按以下方式实现的，一种移动端皮肤切换方法，该方法具体如下：
6.在移动端对皮肤设置页进行跟随系统设置区域和具体皮肤设置区域的划分；
7.对具体皮肤设置区域进行亮色系和暗色系的划分；
8.根据用户选择是否跟随系统暗黑模式帮助用户确定使用亮色系或暗色系的皮肤；
9.或，
10.根据用户选择的具体皮肤的类型影响跟随系统设置区域的开关状态。
11.作为优选，跟随系统设置区域用于更改app的皮肤样式是否跟随系统暗黑模式变化，且仅当移动端系统支持暗黑模式时才会显示跟随系统暗黑模式变化。
12.更优地，跟随系统设置区域关闭时，用户的皮肤不受移动端系统是否为暗黑模式的影响，同时在具体皮肤设置区域设置任何皮肤时，也不受影响；
13.跟随系统设置区域打开时，情况如下：
14.当移动端系统为暗黑模式时，情况如下：
15.若当前跟随系统设置区域选中的皮肤为暗色系，则对当前的皮肤不作处理；
16.若当前跟随系统设置区域选中的皮肤为亮色系，则将当前的皮肤设置为暗色系的默认皮肤；
17.当移动端系统暗黑模式未开启时，情况如下：
18.若当前跟随系统设置区域选中的皮肤为亮色系时，则对当前的皮肤不作处理；
19.若当前跟随系统设置区域选中的皮肤为暗色系时，则将当前的皮肤设置为亮色系
的默认皮肤。
20.更优地，跟随系统设置区域打开时，移动端系统的暗黑模式变化后，再进入app后，帮助用户自动切换皮肤，情况如下：
21.若移动端系统暗黑模式由关变开时，则帮助用户切换成暗色系的默认皮肤；
22.若移动端系统暗黑模式由开变关时，则帮助用户切换成亮色系的默认皮肤。
23.作为优选，具体皮肤设置区域用于直接设置app的皮肤；具体皮肤设置区域由具体皮肤的列表组成，具体皮肤的列表顺序依次为亮色系皮肤和暗色系皮肤；亮色系皮肤依次包括清新白、优雅灰和商务蓝；暗色系皮肤包括暗夜黑。
24.更优地，点击具体皮肤设置区域任一皮肤，情况如下：
25.若当前皮肤为亮色系且移动端系统暗黑模式未开启时或当前皮肤为非亮色系且移动端系统暗黑模式开启时，则应用所设置的皮肤；
26.若当前皮肤为亮色系且移动端系统暗黑模式开启时或当前皮肤为非亮色系且移动端系统暗黑模式未开启时，则将跟随系统设置区域开关关闭后，应用所设置的皮肤。
27.一种移动端皮肤切换设计方法，该设计方法具体如下：
28.ui开发阶段：对ui结构进行开发，划分标题栏、跟随系统设置区域及具体皮肤设置区域；
29.跟随系统设置区域处理流程开发阶段；
30.移动端系统暗黑模式变化时处理流程阶段；
31.具体皮肤设置区域处理流程开发阶段。
32.作为优选，ui开发阶段具体如下：
33.顶部为标题栏，标题栏处设置有返回箭头，点击返回箭头可返回，标题栏中间位置为文案；标题栏下方为跟随系统设置区域，当移动端系统不支持暗黑模式时，则不显示跟随系统设置区域，跟随系统设置区域的左侧为文案描述，右侧为开关按钮；跟随系统设置区域下方为具体皮肤设置区域，具体皮肤设置区域从上至下依次为亮色系和暗色系的皮肤列表，并确认亮色系和暗色系的默认皮肤；其中，亮色系皮肤依次包括清新白、优雅灰和商务蓝；暗色系皮肤包括暗夜黑；
34.跟随系统设置区域处理流程开发阶段具体如下：
35.跟随系统设置区域的开关按钮关闭时，不作处理，仅将开关按钮的值缓存到本地；
36.跟随系统设置区域的开关按钮打开时，具体如下：
37.将开关按钮的值缓存到本地；
38.判断当移动端系统为暗黑模式时，情况如下：
39.若当前跟随系统设置区域选中的皮肤为暗色系，则不会对当前的皮肤做更改；
40.若当前跟随系统设置区域选中的皮肤为亮色系，则会将当前的皮肤设置为暗色系的默认皮肤，并将更改后的皮肤缓存到本地；
41.判断移动端系统为关闭暗黑模式时，情况如下：
42.若当前跟随系统设置区域选中的皮肤为亮色系，则不会对当前的皮肤做更改；
43.若当前跟随系统设置区域选中的皮肤为按色系，则会将当前的皮肤设置为亮色系的默认皮肤，并将更改后的皮肤缓存到本地。
44.更优地，移动端系统暗黑模式变化时处理流程阶段具体如下：
45.若移动端系统不支持暗黑模式，可忽略移动端系统暗黑模式变化时处理流程阶段；
46.若移动端系统支持暗黑模式，具体如下：
47.进入app时，会读取移动端app的暗黑模式是否开启，情况如下：
48.当跟随系统设置区域的开关按钮关闭时，则不作处理；
49.当跟随系统设置区域的开关按钮开启时，则会读取当前移动端系统暗黑模式是否开启，情况如下：
50.若移动端系统暗黑模式开启且当前所选择的皮肤为亮色系，则会帮用户设置成暗夜黑皮肤；
51.若移动端系统暗黑模式关闭且当前所选择的皮肤为暗色系，则会帮用户设置成清新白皮肤；
52.当点击具体皮肤列表中任一具体皮肤时，情况如下：
53.若要设置的皮肤为亮色系，且当前移动端系统的暗黑模式为开启状态，且跟随系统设置区域的开关按钮为打开时，会先关闭跟随系统设置区域的开关再设置成用户所选择的皮肤；其余情况下则会直接设置成用户所选择的皮肤；
54.若要设置的皮肤为暗色系，且当前移动端系统的暗黑模式为关闭状态，且跟随系统设置区域的开关按钮为打开时，会先关闭跟随系统设置区域的开关再设置成用户所选择的皮肤；其余情况下则会直接设置成用户所选择的皮肤。
55.一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机程序，所述计算机程序可被处理器执行以实现如上述的移动端皮肤切换方法。
56.本发明的移动端皮肤切换方法、设计方法及计算机存储介质具有以下优点：
57.(一)本发明即可以让用户通过选择是否跟随系统的来设置皮肤，又可以在选择具体皮肤的同时，帮助用户修改是否跟随系统的状态，一次操作就可以设置成用户想要的皮肤；
58.(二)本发明的皮肤分为“亮色系”和“暗色系”，“亮色系”的皮肤有清新白，商务蓝，优雅灰等，在系统暗黑模式关闭时视觉体验较好，“暗色系”的皮肤有暗夜黑，在系统暗黑模式打开时视觉体验较好；
59.(三)本发明既满足用户可根据是否跟随系统的暗黑模式来设置皮肤，又可以直接进行设置具体的皮肤，且设置皮肤后会帮用户处理是否跟随系统的暗黑模式的开关；
60.(四)本发明完美的将暗黑模式与多皮肤的相关设置融合在一起，用户可以从是否跟随系统暗黑模式上进行设置，又可以直接进行具体皮肤的设置，且只需要一次操作就可完成，这样的设计增加了用户体验，在实际应用效果中非常显著，收到了可观的经济效益。
附图说明
61.下面结合附图对本发明进一步说明。
62.附图1为移动端皮肤切换方法的流程框图；
63.附图2为跟随系统设置区域与具体皮肤设置区域的示意图；
64.附图3为跟随系统设置区域打开时处理流程框图；
65.附图4为手机系统暗黑模式由关变开时处理流程框图；
66.附图5为具体皮肤设置处理流程框图。
具体实施方式
67.参照说明书附图和具体实施例对本发明的移动端皮肤切换方法、设计方法及计算机存储介质作以下详细地说明。
68.实施例1：
69.如附图1所示，本发明的移动端皮肤切换方法，该方法具体如下：
70.s1、在手机对皮肤设置页进行跟随系统设置区域和具体皮肤设置区域的划分；
71.s2、对具体皮肤设置区域进行亮色系和暗色系的划分；
72.s3
‑
1、根据用户选择是否跟随系统暗黑模式帮助用户确定使用亮色系或暗色系的皮肤；
73.或，
74.s3
‑
2、根据用户选择的具体皮肤的类型影响跟随系统设置区域的开关状态。
75.本实施例中跟随系统设置区域用于更改app的皮肤样式是否跟随系统暗黑模式变化，且仅当手机系统支持暗黑模式时才会显示跟随系统暗黑模式变化。跟随系统设置区域包括如下两种情况：
76.(一)、跟随系统设置区域关闭时，用户的皮肤不受手机系统是否为暗黑模式的影响，同时在具体皮肤设置区域设置任何皮肤时，也不受影响。
77.(二)、跟随系统设置区域打开时，如附图3所示，处理流程具体如下：
78.(1)、跟随系统设置区域打开，下一步执行步骤(2)；
79.(2)、具体皮肤设置区域选中是否为亮色系：
80.①
、若是，则执行步骤(3)；
81.②
、若否，则跳转至步骤(4)
82.(3)、当前移动端系统是否开启暗黑模式：
83.①
、若是，则跳转至步骤(7)；
84.②
、若否，则执行步骤(6)；
85.(4)、当前移动端系统是否开启暗黑模式：
86.①
、若是，则跳转至步骤(6)；
87.②
、若否，则执行步骤(5)；
88.(5)、将具体皮肤设置区域切换到清新白；
89.(6)、具体皮肤设置去不作处理；
90.(7)、将具体皮肤设置区域切换至暗夜黑。
91.本实施例中跟随系统设置区域打开时，手机系统的暗黑模式变化后，再进入app后，帮助用户自动切换皮肤，情况如下：
92.(一)、若手机系统暗黑模式由开变关时，则帮助用户切换成亮色系的默认皮肤；
93.(二)、若手机系统暗黑模式由关变开时，则帮助用户切换成暗色系的默认皮肤；如附图4所示，具体处理流程如下：
94.(ⅰ)、进入app，下一步执行步骤(ⅱ)；
95.(ⅱ)、跟随系统设置区域是否打开：
96.①
、若是，则下一步执行步骤(ⅲ)；
97.②
、若否，则跳转至步骤(
ⅵ
)；
98.(ⅲ)、判断手机系统暗黑模式是否打开：
99.①
、若是，则跳转至步骤(
ⅴ
)；
100.②
、若否，则下一步执行步骤(ⅳ)；
101.(ⅳ)、判断当前皮肤是否为亮色系：
102.①
、若是，则跳转至步骤(
ⅵ
)；
103.②
、若否，则跳转至步骤(
ⅶ
)；
104.(
ⅴ
)、判断当前皮肤是否为亮色系：
105.①
、若是，则跳转至步骤(
ⅷ
)；
106.②
、若否，则下一步执行步骤(
ⅵ
)；
107.(
ⅵ
)、对app的皮肤不作处理；
108.(
ⅶ
)、将app的皮肤改为清新白；
109.(
ⅷ
)、将app的皮肤改为暗夜黑。
110.本实施例中具体皮肤设置区域用于直接设置app的皮肤；具体皮肤设置区域由具体皮肤的列表组成，具体皮肤的列表顺序依次为亮色系皮肤和暗色系皮肤；亮色系皮肤依次包括清新白、优雅灰和商务蓝；暗色系皮肤包括暗夜黑。
111.如附图5所示，具体皮肤设置处理流程如下：
112.(
ⅰ
)、点击具体皮肤设置区域任一皮肤，下一步执行步骤(
ⅱ
)；
113.(
ⅱ
)、当前皮肤是否属于亮色系：
114.①
、若是，则下一步执行步骤(
ⅲ
)；
115.②
、若否，则跳转至步骤(
ⅳ
)；
116.(
ⅲ
)、手机暗黑模式是否打开：
117.①
、若是，则跳转至步骤(
ⅴ
)；
118.②
、若否，则跳转至步骤(
ⅵ
)；
119.(
ⅳ
)、手机暗夜模式是否打开：
120.①
、若是，则跳转至步骤(
ⅵ
)；
121.②
、若否，则下一步执行步骤(
ⅴ
)；
122.(
ⅴ
)、将跟随系统设置区域开关按钮关闭，下一步执行步骤(
ⅵ
)；
123.(
ⅵ
)、应用所设置的皮肤。
124.实施例2：
125.本发明的移动端皮肤切换设计方法，该设计方法具体如下：
126.(1)、ui开发阶段：对ui结构进行开发，划分标题栏、跟随系统设置区域及具体皮肤设置区域；
127.(2)、跟随系统设置区域处理流程开发阶段；
128.(3)、手机系统暗黑模式变化时处理流程阶段；
129.(4)、具体皮肤设置区域处理流程开发阶段。
130.如附图2所示，本实施例中步骤(一)的ui开发阶段具体如下：
131.顶部为标题栏，标题栏处设置有返回箭头，点击返回箭头可返回，标题栏中间位置
为文案；标题栏下方为跟随系统设置区域，当移动端系统不支持暗黑模式时，则不显示跟随系统设置区域，跟随系统设置区域的左侧为文案描述，右侧为开关按钮；跟随系统设置区域下方为具体皮肤设置区域，具体皮肤设置区域从上至下依次为亮色系和暗色系的皮肤列表，并确认亮色系和暗色系的默认皮肤；其中，亮色系皮肤依次包括清新白、优雅灰和商务蓝；暗色系皮肤包括暗夜黑。
132.举例：app总共支持清新白、优雅灰、商务蓝及暗夜黑四种皮肤，其实亮色系有清新白、优雅灰及商务蓝等皮肤。暗色系有暗夜黑等皮肤，亮色系的默认皮肤为清新白，暗色系的默认皮肤为暗夜黑。确定完成后，开发具体皮肤列表，按照亮色系和暗色系的顺序开发皮肤列表，皮肤列表每一项从左到右依次为皮肤颜色示例，皮肤文案描述和皮肤是否选中的标识。跟随系统设置区域开关的值以及所选择的具体皮肤的值会缓存到手机本地，再次打开该页面时会应用缓存的值。至此，ui效果已开发完成。
133.本实施例中步骤(2)的跟随系统设置区域处理流程开发阶段具体如下：
134.(2.1)、跟随系统设置区域的开关按钮关闭时，不作处理，仅将开关按钮的值缓存到本地；
135.(2.2)、跟随系统设置区域的开关按钮打开时，具体如下：
136.(2.2.1)、将开关按钮的值缓存到本地；
137.(2.2.2)、判断当手机系统为暗黑模式时，情况如下：
138.①
、若当前跟随系统设置区域选中的皮肤为暗色系，则不会对当前的皮肤做更改；
139.②
、若当前跟随系统设置区域选中的皮肤为亮色系，则会将当前的皮肤设置为暗色系的默认皮肤，并将更改后的皮肤缓存到本地；
140.(2.2.3)判断手机系统为关闭暗黑模式时，情况如下：
141.①
、若当前跟随系统设置区域选中的皮肤为亮色系，则不会对当前的皮肤做更改；
142.②
、若当前跟随系统设置区域选中的皮肤为按色系，则会将当前的皮肤设置为亮色系的默认皮肤，并将更改后的皮肤缓存到本地。
143.本实施例中步骤(3)的手机系统暗黑模式变化时处理流程阶段具体如下：
144.(3.1)、若手机系统不支持暗黑模式，可忽略手机系统暗黑模式变化时处理流程阶段；
145.(3.2)、若手机系统支持暗黑模式，具体如下：
146.(3.2.1)、进入app时，会读取手机app的暗黑模式是否开启，情况如下：
147.①
、当跟随系统设置区域的开关按钮关闭时，则不作处理；
148.②
、当跟随系统设置区域的开关按钮开启时，则会读取当前手机系统暗黑模式是否开启，情况如下：
149.若手机系统暗黑模式开启且当前所选择的皮肤为亮色系，则会帮用户设置成暗夜黑皮肤；
150.若手机系统暗黑模式关闭且当前所选择的皮肤为暗色系，则会帮用户设置成清新白皮肤；
151.本实施例中步骤(4)的具体皮肤设置区域处理流程开发阶段具体如下：
152.当点击具体皮肤列表中任一具体皮肤时，情况如下：
153.①
、若要设置的皮肤为亮色系，且当前手机系统的暗黑模式为开启状态，且跟随系统设置区域的开关按钮为打开时，会先关闭跟随系统设置区域的开关再设置成用户所选择的皮肤；其余情况下则会直接设置成用户所选择的皮肤；
154.②
、若要设置的皮肤为暗色系，且当前手机系统的暗黑模式为关闭状态，且跟随系统设置区域的开关按钮为打开时，会先关闭跟随系统设置区域的开关再设置成用户所选择的皮肤；其余情况下则会直接设置成用户所选择的皮肤。
155.实施例3：
156.本发明实施例还提供了一种计算机可读存储介质，其中存储有多条指令，指令由处理器加载，使处理器执行本发明任一实施例中的移动端皮肤切换方法。具体地，可以提供配有存储介质的系统或者装置，在该存储介质上存储着实现上述实施例中任一实施例的功能的软件程序代码，且使该系统或者装置的计算机(或cpu或mpu)读出并执行存储在存储介质中的程序代码。
157.在这种情况下，从存储介质读取的程序代码本身可实现上述实施例中任何一项实施例的功能，因此程序代码和存储程序代码的存储介质构成了本发明的一部分。
158.用于提供程序代码的存储介质实施例包括软盘、硬盘、磁光盘、光盘(如cd
‑
rom、cd
‑
r、cd
‑
rw、dvd
‑
rom、dvd
‑
rym、dvd
‑
rw、dvd rw)、磁带、非易失性存储卡和rom。可选择地，可以由通信网络从服务器计算机上下载程序代码。
159.此外，应该清楚的是，不仅可以通过执行计算机所读出的程序代码，而且可以通过基于程序代码的指令使计算机上操作的操作系统等来完成部分或者全部的实际操作，从而实现上述实施例中任意一项实施例的功能。
160.此外，可以理解的是，将由存储介质读出的程序代码写到插入计算机内的扩展板中所设置的存储器中或者写到与计算机相连接的扩展单元中设置的存储器中，随后基于程序代码的指令使安装在扩展板或者扩展单元上的cpu等来执行部分和全部实际操作，从而实现上述实施例中任一实施例的功能。
161.最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。