1. Antecedentes
En 2019, con el lanzamiento de iOS 13 y Android Q, Apple y Google lanzaron simultáneamente las características principales del modo oscuro, respectivamente Modo oscuro (iOS) / Tema oscuro (Android), en adelante nos referiremos colectivamente como Tema oscuro. En la investigación preliminar, encontramos que el 66% de los usuarios de iOS 13 eligen abrir Dark Theme, lo que demuestra que los usuarios aman y esperan el modo oscuro.
¿Cuáles son los beneficios de Dark Theme?
-
Los teléfonos móviles más modernos que ahorran más energía son pantallas OLED (la pantalla OLED no emite luz debajo del negro, lo que ahorra más energía), y el Dark Theme tiene un menor consumo de energía;
-
Proporcione una experiencia de usuario coherente, cuando los usuarios cambian del entorno de Tema oscuro a nuestra aplicación, aún pueden disfrutar de la tranquilidad del negro y evitar el estímulo causado por el blanco brillante;
-
Mejore la imagen de la marca, haga un seguimiento de las nuevas funciones del sistema a tiempo, además de disfrutar de las nuevas funciones y brindar bondad, también puede obtener las oportunidades de recomendación de Apple Store y Google Play para mejorar la imagen general de la marca;
-
Mejore la visibilidad para los usuarios con ambliopía y aquellos que son sensibles a la luz intensa, permitiendo a los usuarios usar fácilmente la aplicación en un entorno oscuro.
A continuación, presentamos la práctica de Dark Theme en la aplicación Trip.com desde tres ángulos de diseño visual, esquema de implementación y eficiencia de desarrollo.
Segundo, diseño visual.
El modo oscuro es un nuevo estilo de diseño, sombreado de color no simple. Atribuimos el concepto de diseño a tres puntos principales e introducimos nuestras ideas generales de diseño.
2.1 Tres puntos principales
1) Cuanto más alto sea el nivel del elemento, más claro será el color de la superficie
La jerarquía visual de la interfaz de usuario está dedicada a presentar el contenido del producto de una manera que los usuarios puedan comprender rápidamente. ¿Cómo se asegura de que la jerarquía visual siga siendo válida en Dark Theme? En el modo claro, utilizamos una tarjeta blanca con una proyección para simular la sensación de profundidad espacial en el mundo real, mientras que al cambiar al modo oscuro, necesitamos expresar la altura a través de una superficie de color más claro. Cuanto más alto sea el nivel, más cerca de la fuente de luz, más claro será el color de la superficie.
2) Reduce la saturación y mejora la legibilidad
Al diseñar el tema oscuro, trate de evitar el uso de colores altamente saturados, ya que estos colores producirán fluctuaciones visuales sobre un fondo oscuro, causando fatiga al ojo humano. Tomando el azul de la marca Trip.com como ejemplo, si el color no se ajusta y se muestra directamente sobre un fondo oscuro, no solo se reduce la claridad de la información, sino que también se incrementa el esfuerzo de reconocimiento. Obviamente, esto no es lo que queremos, por lo que en Dark Theme elegimos colores de menor saturación para lograr una mejor legibilidad.
3) Aumenta el contraste y mejora la usabilidad
De acuerdo con el estándar de diseño WCAG2.0 AA, la presentación visual de texto e imágenes de texto debe tener una relación de contraste de al menos 4.5: 1. La selección de texto blanco en superficies oscuras no cumple con el estándar AA.
2.2 Plan de diseño
Siguiendo los puntos de diseño anteriores, hemos desarrollado el mapeo de color y el diseño de ilustración de Trip.com.
2.2.1 Esquema de mapeo de color
Con el fin de estandarizar la gestión de las bibliotecas de colores y garantizar la comprensión coherente de los productos, el diseño y el desarrollo, utilizamos la forma más intuitiva para nombrar los colores. Este método no solo unificó los nombres de colores de Light and Dark, sino que también redujo la dificultad de comunicación entre todas las partes. El efecto de mapeo específico es el siguiente:
Los colores en la interfaz de usuario se han desaturado uniformemente. Estos colores se aplicarán a diferentes escenas, que pueden ser fondos, puntos de acción, etiquetas o iconos, etc., cuando se utiliza el color para el fondo, para garantizar el texto y el fondo. El color tiene suficiente contraste, y el fondo claro con baja saturación debe usarse junto con los caracteres oscuros.
2.2.2 Diseño del sistema de ilustración.
Encender Dark Theme es como abrir las cortinas de la habitación y encender una luz. La superficie de los objetos de diferentes niveles estará expuesta a diferentes luces y mostrará diferentes colores de luz y oscuridad. Los objetos y personajes en nuestro sistema de ilustración siguen este diseño: en un ambiente oscuro, debido a la falta de luz, el color de la piel del personaje se oscurecerá y el color de la ropa también cambiará sutilmente. Por ejemplo, la ropa blanca y brillante, en un ambiente oscuro, aparecerá gris y baja saturación de colores oscuros.
3. Plan de implementación
La aplicación Trip.com utiliza un modelo de desarrollo mixto de sistema nativo y React Native. Sobre la base de cada solución de sistema, combinada con las características propias de Trip.com, hemos desarrollado un conjunto de soluciones de adaptación de Dark Theme para iOS, Android y React Native.
3.1 iOS
Ofrecemos dos temas para iOS 13 y superior:
-
Modo adaptativo: siga el sistema para mostrar el tema claro / oscuro
-
Modo de luz forzada: la aplicación mantiene el tema de la luz y no cambia con el tema del sistema
3.1.1 Principio de adaptación
El sistema iOS proporciona la propiedad overrideUserInterfaceStyle para UIWindow, UIViewController, UIView para controlar el tema Light / Dark, por lo que siempre que controlemos esta propiedad de KeyWindow, podemos controlar el tema de toda la aplicación.
3.1.2 Esquema de adaptación
1) Configurar el interruptor
La lógica de la configuración del tema de la aplicación se muestra en la figura. KeyWindow solo inicia el tema oscuro cuando tanto la aplicación como el sistema habilitan el tema oscuro.
El cambio de temas con el sistema debe tener en cuenta la situación cuando el tema del sistema se cambia cuando la aplicación se está ejecutando:
-
Vaya a la página de configuración del sistema para cambiar manualmente
-
Después de activar el cambio automático, el sistema actualizará automáticamente el tema
En ambos casos, la aplicación necesita ingresar al fondo, por lo que solo necesita agregar la aplicación para ingresar al primer plano para monitorear, repita la lógica de 1 para completar la función de seguir el sistema para cambiar el tema.
2) Adaptación de color
El sistema proporciona el método colorWithDynamicProvider para adaptar el color en modo Claro / Oscuro. Empaquetamos el color de acuerdo con el esquema de mapeo de color visual y cubrimos la mayoría de las escenas. Algunas escenas que no pueden adaptarse con colores dinámicos, como los colores CGColor y RGB, pueden resolverse mediante el método resolveColorWithTraitCollection para utilizar el color requerido por el contexto actual.
3) Adaptación de imagen
Ya en iOS12, el sistema agregó la propiedad UserInterface a UITraitCollection. Solo necesitamos registrar imágenes de los dos temas en Claro / Oscuro en ImageAssets, y luego UIImageView obtiene automáticamente imágenes Claro / Oscuro de acuerdo con el cambio de traitCollectionDidChange.
Los recursos de imágenes estáticas en la aplicación se pueden configurar directamente a través de Images.xcassets, y las imágenes entregadas a través de la red o generadas dinámicamente por el código se pueden registrar dinámicamente a través de registerImage: withTraitCollection:.
4) Asuntos que requieren atención
El principio del color dinámico o ImageAssets es obtener el contenido correspondiente de acuerdo con la interfaz de usuario del contenedor. El color dinámico o ImageAssets en la vista se basará en la interfaz de usuario de la vista. El cálculo del color o el procesamiento de imágenes en la aplicación se basará en UITraitCollection.currentColletion. Valor.
Configure el tema de Window para completar el trabajo de adaptación del tema de la aplicación. Habrá casos en los que el tema de la aplicación y el tema del sistema no estén sincronizados. Por ejemplo, el tema del sistema es oscuro y el tema de la aplicación es claro. En este momento, operar directamente en colores dinámicos o ImageAssets obtendrá resultados incorrectos. Por lo tanto, para tales escenas, no se utilizan colores dinámicos ni ImageAssets, y la operación de actualización de la vista solo se realiza cuando se produce el cambio de tema.
3.2 Android
No solo implementamos Dark Theme en Android Q, sino que también adaptamos Dark Theme en versiones inferiores a Android Q. En Android Q, los usuarios pueden optar por seguir el sistema para mostrar el tema oscuro o forzar a Dark a mantener cerrado el tema Light.
Bajo Android Q, también admitimos Dark Theme, los usuarios pueden optar por abrir o forzar Dark Theme.
3.2.1 Principio de adaptación
Cuando se inicia la aplicación de Android, cargará diferentes recursos de acuerdo con la configuración del sistema. Tomando la imagen de carga como ejemplo, el sistema de alta resolución carga la imagen triple y el sistema de baja resolución carga la imagen doble. Del mismo modo, el sistema cargará recursos oscuros o claros de acuerdo con la apertura o cierre de Dark Theme.
Colocaremos dos conjuntos de recursos, Claro y Oscuro, proporcionados por UED en los directorios de archivos de valor y noche de valor de la aplicación. Cuando la aplicación abre el tema oscuro, el sistema elige cargar recursos del directorio de valor nocturno para mostrar la interfaz oscura; cuando la aplicación cierra el tema oscuro, el sistema elige cargar recursos del directorio de valores para mostrar la interfaz ligera.
3.2.2 Esquema de adaptación
Presentamos la solución de adaptación Dark Theme de Android a través de cuatro secciones: configuración del interruptor, adaptación del color, adaptación de la imagen y otras consideraciones.
1) Ajuste del interruptor
Se puede ver en el código anterior que solo el código que usa AppCompat tiene la característica Dark Theme. Por ejemplo, heredar AppCompatAcivity y AppCompatDialog solo es compatible con Dark Theme, mientras que las actividades y el diálogo normales no mostrarán Dark Theme, y la aplicación tampoco lo admite.
// 打开darkmode
2) Adaptación de color
En los directorios value y value-night, defina los colores Light y Dark con el mismo nombre, como se muestra a continuación:
Uso en XML o código
//xml
Nota: La actividad debe ser una instancia de AppCompatActivity, no ApplicationContext / Activity. Además, dado que los colores con transparencia deben declararse uno por uno en XML, para reducir la carga de trabajo de desarrollo, proporcionamos un script que puede generar rápidamente colores de transparencia en Claro y Oscuro.
3) Adaptación de imagen
El trabajo de adaptación de imágenes se divide en adaptación de imágenes de recursos y adaptación dibujable personalizada:
-
drawable / mipmap: coloque las imágenes con el mismo nombre que Light y Dark en los directorios drawable-xxhdpi y drawable-night-xxhdpi. El sistema carga las imágenes según Light / Dark.
-
IconFont / Forma personalizada / Selector personalizado / SVG: dado que el dibujo usa color, el uso es el mismo que el color.
4) Asuntos que requieren atención
- Mostrar el tema oscuro en una actividad que no sea AppCompatActivity, use el siguiente código para mostrar el color oscuro en una actividad que no sea AppCompatActivity.
public class IBUDarkModeDelegate {
-
El nombre del color debe ser único en toda la aplicación.
-
Cambiar el Tema oscuro del sistema de telefonía móvil hará que la Actividad se reconstruya, y la línea de negocios guardará y restaurará el estado según sea necesario.
-
Realice una prueba completa del modelo para evitar problemas de visualización anormales de modelos individuales.
3.3 ReactNative
3.3.1 Esquema de adaptación
El RN une el lado nativo y obtiene los cambios de tema del lado nativo a través de dos métodos: adquisición directa y monitoreo dinámico.
1) Obtenga el valor del tema actual del lado nativo
Utilice el método de sincronización de los módulos nativos para obtener el valor del tema actual en el lado JS. La llamada al método en el lado JS puede obtener directamente el valor de retorno del método de sincronización nativo en lugar de una promesa.
El método de sincronización se introdujo en los lados Android e iOS de ReactNative en enero y octubre de 2017, pero hasta ahora, no se ha escrito en el documento:
-
iOS: Uso RCTEXPORTSYNCHRONOUSTYPEDMETHOD () reemplazar RCTEXPORTMETHOD () (v0.51.0 y por encima de apoyar el Commit )
-
Android: Agregar (isBlockingSynchronousMethod = true) después de la anotación @ReactMethod (v0.42.0 y superior admite Commit )
La desventaja del método de sincronización es que no se puede invocar cuando se depura de forma remota, por lo que debe proporcionar el valor predeterminado cuando se depura de forma remota. Cuando conectamos el tema oscuro, elegimos oscuro como predeterminado.
2) Monitorear el cambio del valor del tema
Usamos eventos RN para monitorear los cambios de tema.
-
iOS: RCTEventEmitter
-
Android: RCTDeviceEventEmitter
3) Tema de llamadas de fiesta empresarial RN
Proporcionamos IBUThemeContext y IBUThemeProvider dos categorías para que la línea de producción obtenga el tema. El contexto proporciona un método para la transferencia de datos entre árboles de componentes sin agregar manualmente accesorios para cada capa de componentes. IBUThemeContext es una aplicación de Context on Theme. IBUThemeProvider es responsable de sincronizar el valor del tema y pasarlo a IBUThemeContext.Provider.
// IBUThemeContext
Al incorporar IBUThemeProvider en el nodo raíz de la aplicación, el árbol de componentes puede obtener el valor del tema a través de los dos métodos siguientes:
Lea el tema global a través de IBUThemeProvider.theme. Use this.context en una clase que declare static contextType = IBUThemeContext para obtener el valor del tema.
4) Adaptación de color
Proporcionamos los siguientes métodos para que la línea de producción use colores, y los métodos admiten la configuración de transparencia:
export declare class IBUColor{
Todos los métodos aceptan dos parámetros opcionales, tema y alfa, el método primero seleccionará el valor de color de la cadena hexadecimal del color correspondiente según el tema, si el valor del tema está vacío, luego recurrirá a IBUThemeProvider.theme y luego calculará el color del color según el valor alfa El valor hexadecimal alfa se concatena con el valor del color de la cadena hexadecimal. Si alfa está vacío, los valores de color hexadecimal no se empalman. Finalmente, se devuelve la cadena de valor de color hexadecimal correspondiente.
5) Adaptación de imagen
Utilizamos getters perezosos para resolver el problema de la visualización de imágenes claras / oscuras. El camino es el siguiente:
Las imágenes en el lado RN han sido unificadas para la gestión de recursos estáticos antes:
export const images = {
Usando getters perezosos, después de una pequeña modificación, se puede adaptar perfectamente:
export const images = {
6） DynamicStyle
La StyleSheet exportada por ReactNative solo se inicializará una vez cuando se importe el archivo, y no cambiará con el cambio de App DarkTheme. Esto lleva al problema de que el RN no puede actualizar los estilos cuando cambia el tema del sistema, lo que hace que la página RN sea inconsistente con Native. Para este fin, proponemos DynamicStyleSheet para resolver este problema.
type IBUNamedStyles<T> = { [P in keyof T]: ViewStyle | TextStyle | ImageStyle };
IBUDynamicStyleSheet es una función, que acepta una función cuyo valor de retorno es estilo como parámetro y devuelve una función. Esta función también se llama función de orden superior .
El código de StyleSheet para crear estilo está envuelto en la función del parámetro, lo que garantiza que cada vez que se toma el valor, obtendrá el estilo correspondiente al tema actual. Antes de cada render, ejecute la función devuelta una vez y use el valor devuelto de esta función como el estilo real.
IBUDynamicStyleSheet almacena en caché internamente los estilos bajo luz y oscuridad, por lo que en la mayoría de los casos el estilo solo se creará una vez, el estilo se creará dos veces cuando el tema cambie y el estilo solo se creará dos veces cuando el tema cambie muchas veces .
Usando DynamicStyleSheet de esta manera, los cambios en el código no solo son pequeños, sino que también la pérdida de rendimiento es pequeña, para lograr el propósito del cambio de tema en tiempo real.
7） Ejemplos
Aplicación abierta tema oscuro
export default class App extends Component{
Acceso a componentes de clase
class MyClass extends React.Component {
Acceso a componentes funcionales
export const MyComponent = () => {
Nota: El componente debe declarar contextType; de lo contrario, no puede desencadenar el renderizado cuando el tema cambie.
4. Herramientas y eficiencia
En el proceso de establecer la especificación de color para la implementación del plan, descubrimos que aunque el nuevo nombre de color es fácil de entender, debido al nombre del nombre utilizado, el desarrollador debe verificar el nombre de color correspondiente contra el borrador visual cuando lo usa, lo que resulta en un desperdicio de la eficiencia del desarrollo.
Por ejemplo, # 287DFA se muestra en el borrador visual, y el nombre de mapeo brandingBlue de este color se busca de acuerdo con el valor del color, y luego el color se establece en brandingBlue.
Para resolver este problema, ampliamos el complemento Sketch Measure, la columna de color ya no muestra el valor del color y se reemplaza el nombre del color. De esta manera, el nombre del color se puede obtener directamente de acuerdo con el borrador visual, lo que reduce en gran medida la carga de trabajo.
El efecto del complemento es el siguiente:
Hasta ahora, resuelve perfectamente el problema de eficiencia de desarrollar y adaptar Dark Theme.
V. Conclusión
La adaptación de Dark Theme es un proyecto que involucra departamentos multifuncionales. Con el apoyo de una guía de diseño estandarizada, soluciones de aterrizaje perfectas y herramientas de eficiencia convenientes, nuestros costos y recursos de adaptación se han reducido considerablemente. En el caso de un solo personal de I + D en cada extremo, se completó desde la formulación del plan hasta la implementación del plan en dos semanas, y se promovió el acceso a la línea de producción.
Trip.com siempre se ha comprometido a seguir las nuevas funciones de vanguardia, brindando a los usuarios la mejor experiencia, haciéndolos más cómodos y viajando a partir de ahora.
Recomendación de servicio
