Kit de diseño de Surface Duo (en Figma)

Kit de diseño de Surface Duo

El Kit de diseño de Surface Duo es un recurso de la comunidad figma para ayudar a los diseñadores de aplicaciones y desarrolladores a crear experiencias de usuario de doble pantalla. Los componentes de este kit son los bloques de creación de lo que hace que Surface Duo se sienta como productos de Microsoft en Android.

  • Marco de dispositivo : esquemas de dispositivo en color Glaciar y Obsidian para presentar capturas de pantalla.
  • Áreas seguras: las áreas seguras impiden que el contenido supere el encabezado de la aplicación, la barra de navegación, las pestañas y la bisagra.
  • Interacciones de lápiz : cómo diseñar interacciones para la entrada del lápiz.
  • Patrones de diseño y directrices : los patrones de diseño en el kit muestran las posibilidades de pantallas de doble pantalla para diferentes escenarios de la aplicación y cómo todas las piezas se unen para una experiencia de producto significativa.
  • Instrucciones de vídeo y multimedia : sugerencias para incluir vídeos e imágenes en una experiencia de usuario plegable.
  • Posturas : los dispositivos de doble pantalla pueden venir en una gama de variaciones de diseño industrial y hardware. Surface Duo, lanzado recientemente junto con otros dispositivos planeados, pretenden ayudar a definir la categoría, pero otros dispositivos pueden tener pantallas más grandes o diseños de bisagras diferentes. Al diseñar las aplicaciones, ten en cuenta que debes evitar el diseño de las especificaciones de cualquier dispositivo específico disponible hoy en día.
  • Diseño, controles y complementos : teniendo en cuenta un factor de forma de doble pantalla, nos aseguramos de que puede diseñar la forma en que le gusta usar diseños y controles conocidos. También destacamos los detalles que debe tener en cuenta al diseñar para aplicaciones de doble pantalla, como la bisagra e incluir diseños para diseñar de forma automática.
  • Componentes : cada componente se crea para que sea lo más plano posible, por lo que son fáciles de administrar y trabajar con ellos. Algunos componentes tienen capas ocultas que puede activar o desactivar para agregar variaciones sin desasociar.
  • Conjunto de componentes: componentes maestros para la navegación y otros elementos de diseño como conjuntos agrupados que ayudan a organizar mejor las variantes que contienen diferentes modelos, modos, recuentos de pantalla y orientaciones.

Tutorial de Figma