Exploración

Por favor, ten en cuenta: el diseño "Buscar" presentado en esta página está todavía siendo explorado.

El diseño en está página está siendo actualmente explorado por la comunidad FOLIO UX. Esto significa que estamos considerando potencialmente convertirlo en una recomendación oficial de UX/UI pero necesitamos debatir y pensar más sobre ello antes de hacerlo. Si quieres saber más o involucrarte en el debate sobre este diseño, visita el post FOLIO Discuss para este diseño:

La funcionalidad de buscar permite a los usuarios buscar y elegir contenido fácilmente de una lista preconfigurada.

Ejemplo de un modal de buscar

Estructura

Icono de buscar

Un icono de buscar debe estar ubicado a la derecha del campo de texto permitiendo a los usuarios elegir datos de una lista preconfigurada.

 

 

Si el campo de texto permite entrada libre de texto además de la funcionalidad de buscar, una línea vertical tiene que separar el campo del icono.

 

Modal de búsqueda

El modal de buscar está compuesto por un header con un icono de cierre a la izquierda y un título centrado.

El contenido está dividido en dos partes. A la izquierda, está la parte de buscar y filtrar y a la derecha, está la lista de resultados con checkboxes.

Un botón «Cancel» en el estilo por defecto y un botón «Save & Close» en el estilo primario están ubicados abajo a la derecha.

Comportamiento

Cuando los usuarios clican en un campo de texto con un icono de búsqueda, un modal aparece. Si el campo de texto permite libre entrada de texto además de la funcionalidad de buscar, los usuarios tienen que clicar en el icono de búsqueda para abrir el modal.

Los usuarios pueden refinar la lista de resultados usando filtros o palabras clave.

Los resultados seleccionados tiene un checkmark de modo que los usuarios pueden saber los resultados que seleccionaron.

Una vez la selección está hecha, los usuarios tienen que clicar en el botón «Save & Close» para añadir la selección.

 

Exploración

Por favor, ten en cuenta: el diseño "Buscar" presentado en esta página está todavía siendo explorado.

El diseño en está página está siendo actualmente explorado por la comunidad FOLIO UX. Esto significa que estamos considerando potencialmente convertirlo en una recomendación oficial de UX/UI pero necesitamos debatir y pensar más sobre ello antes de hacerlo. Si quieres saber más o involucrarte en el debate sobre este diseño, visita el post FOLIO Discuss para este diseño: