Diseño de interfaz | ¿Cómo diseñar un teclado personalizado en una aplicación móvil?

El teclado juega un papel muy importante en el proceso de interacción del usuario, especialmente en escenarios con múltiples cuadros de entrada. Cambiar correctamente entre "tipo de teclado" y "tipo de comando de teclado" puede mejorar la eficiencia de los usuarios al completar formularios. También puede hacer que el proceso de llenado de formularios sea más fluido y reducir la tasa de abandono de páginas.

iOS proporciona 12 tipos de teclados para elegir. Podemos proporcionar diferentes tipos de teclados según las necesidades actuales de los usuarios.

En el borrador interactivo, se debe marcar el teclado al que se llamará. Si hay diferentes tipos de cuadros de entrada en la misma interfaz, se deben marcar las instrucciones para cambiar de teclado.

Aunque 12 tipos de teclado ya son muchos, todavía no pueden cubrir todos los escenarios. En este momento necesitamos personalizar el teclado.

Además de elegir diferentes tipos de teclados, algunos teclados también tienen una variedad de "comandos de teclado" (botones azules en la imagen siguiente) para elegir, como "Completo", "Buscar", " Enviar", etc.

iOS proporciona 11 tipos de comandos. Los comandos requeridos se pueden marcar en forma de descripciones de texto/capturas de pantalla en el borrador interactivo.

El teclado iOS tiene las funciones de elementos anteriores y siguientes (lt; gt;, como se muestra en la parte superior izquierda de la imagen de arriba), lo que juega un papel muy importante en el diseño interactivo del formulario y debe explicarse en el borrador interactivo.

Tiene la misma función que la tecla de tabulación del teclado, saltando a la secuencia de etiquetas anterior/siguiente y garantizando que el contenido completado no se borre.

Escenario de aplicación: la etiqueta del cuadro de entrada del formulario supera los 2 elementos. Cuando se activa el teclado, los botones de operación "elemento anterior" y "elemento siguiente" se muestran en el teclado.

Restricciones:

Distinguir entre estados de botones en los que se puede hacer clic y en los que no se puede hacer clic.

Beneficios:

Haga clic en el botón "Listo" para contraer el teclado de arriba a abajo.

1) Entrada de texto por teclado convencional

Escenarios de aplicación: entrada de texto como nombre de cuenta, dirección, etc.

2) Entrada de caracteres por teclado convencional

Escenario de aplicación: Contraseña de inicio de sesión

Solo admite caracteres, números y símbolos. El método de entrada no se puede cambiar, lo que brinda a los usuarios instrucciones claras y reduce la posibilidad de cometer errores.

3) Entrada numérica pura mediante teclado normal

Escenarios de aplicación:

Solo admite números de teléfono móvil, códigos postales numéricos, códigos de verificación por SMS y contraseña de pago digital pura , número de tarjeta bancaria, código de seguridad de la tarjeta de crédito.

Solo admite la entrada de números del 0 al 9, lo que aumenta el área de clic efectiva, brinda a los usuarios indicaciones claras y reduce los errores de entrada.

4) Teclado-teléfono convencional.

Escenarios de aplicación:

Número de teléfono móvil, no limitado a nacional y extranjero.

Al completar el número de teléfono móvil, si no hay una restricción separada en la ubicación del número de teléfono móvil, se llamará al teclado del teléfono que contiene " ", "*" y "#".

5) Teclado normal: teclado numérico con "."

Escenario de aplicación: ingrese el monto con un punto decimal.

6) Teclado normal: teclado de correo electrónico con @

Escenario de aplicación: dirección de correo electrónico

1) Teclado personalizado: teclado numérico con X

Escenario de aplicación: Número de tarjeta de identificación nacional de 18 dígitos

2) Teclado personalizado - teclado de contraseña aleatoria

Escenario de aplicación: Varias contraseñas de inicio de sesión/contraseñas de pago de aplicaciones bancarias

Banca móvil de China Merchants Bank:

(Imagen 1)

(Imagen 2)

China Zheshang Bank:

Teclado de contraseña de inicio de sesión :

Contraseña de pago de 6 dígitos/contraseña de retiro/contraseña de cuenta, etc.:

Las posiciones de los números en el teclado se muestran aleatoriamente para evitar que se filtren contraseñas. Sin embargo, si bien mejora la seguridad, también aumenta la dificultad de la entrada del usuario.

Entonces, ¿cómo reducir la oposición entre ambos?

Recomendaciones:

A. Mejorar diferentes niveles de seguridad según los diferentes escenarios de uso del usuario.

B. El teclado seguro y la entrada de teclado normal se pueden cambiar, lo que permite a los usuarios elegir por sí mismos y recordar la elección del usuario. Cuando lo use nuevamente la próxima vez, la última opción será la predeterminada.

Al ingresar texto en inglés, el sistema utilizará de manera predeterminada la función de corrección automática para ayudar a los usuarios a corregir posibles errores de entrada.

Pero cuando el usuario completa el formulario, como nombre de cuenta, nombre de correo electrónico, apodo, dirección postal, abreviatura, etc., la función de autocorrección debe desactivarse para evitar que el usuario corrija automáticamente el formulario. El contenido se completa sin que el usuario se dé cuenta de los cambios, lo que provoca errores de entrada.

Ejemplo negativo:

Los teléfonos inteligentes escriben en mayúscula la primera letra de los cuadros de entrada de texto estándar de forma predeterminada, lo cual es apropiado en la mayoría de los casos.

Sin embargo, en algunos casos, el uso de mayúsculas automáticas debe desactivarse, especialmente en situaciones como direcciones de correo electrónico donde la mayoría de los usuarios esperan que las letras minúsculas en la primera letra hagan que el usuario deba modificar lo ingresado. contenido nuevamente, causando frustración y aumentando la dificultad operativa.

Si un cuadro de entrada invoca un teclado dedicado pero otros cuadros de entrada similares no, los usuarios se confundirán cuando no se invoque el teclado dedicado y comenzarán a cuestionar el tipo de entrada requerida por el cuadro de entrada.

Es una buena práctica llamar al teclado apropiado para un campo de entrada específico, pero asegúrese de que sea consistente dentro de la aplicación, de lo contrario confundirá a los usuarios.

En otras palabras, si el cuadro de entrada del número de la tarjeta de crédito llama a un teclado numérico, entonces los cuadros de entrada similares, como el código de seguridad, la fecha de vencimiento y el número de teléfono móvil reservado, también deben utilizar el mismo enfoque.