Contenido y conversaciones, todos a la vez mediante pestañas

Importante

Pestañas en clientes móviles

Siga las instrucciones para las pestañas de dispositivos móviles al crear las pestañas. Si su pestaña usa autenticación, debe actualizar el SDK de JavaScript de Teams a la versión 1.4.1 o posterior, o se producirá un error de autenticación.

Pestañas personales (estáticas) en dispositivos móviles:

Pestañas de canal o grupo (configurable) en dispositivos móviles:

  • Los clientes móviles solo muestran las pestañas que tienen websiteUrlun valor para. Si desea que la pestaña aparezca en los clientes móviles de Teams, debe establecer el valor de websiteUrl.
  • El comportamiento predeterminado de apertura en dispositivos móviles es abrir fuera del explorador websiteUrlcon el. En el caso de las aplicaciones publicadas en la tienda de aplicaciones públicas, si desea que la ficha de canal se abra dentro de Teams de forma predeterminada, siga las instrucciones para las pestañas de Mobiley póngase en contacto con su representante de soporte técnico para que se le solicite que se le solicite que se le pida que

Las pestañas son lienzos que se pueden usar para compartir contenido, mantener conversaciones y hospedar servicios de terceros, todo ello dentro del flujo de trabajo ecológico de un equipo. Cuando se crea una pestaña en Microsoft Teams, se coloca la aplicación web en su lugar y en el centro a la que se puede acceder fácilmente desde las conversaciones clave.

Instrucciones

Una buena pestaña debe mostrar las siguientes características:

Funcionalidad centrada

Las pestañas funcionan mejor cuando se crean para satisfacer una necesidad específica. Céntrese en un pequeño conjunto de tareas o en un subconjunto de datos que sea relevante para el canal en el que se encuentra la pestaña.

Cromo reducido

Evite crear varios paneles en una pestaña, agregar capas de navegación o requerir que los usuarios se desplacen tanto vertical como horizontalmente en una pestaña. Es decir, intente no tener pestañas en la pestaña.

Integración

Obtenga información sobre cómo notificar a los usuarios la actividad de pestañas mediante el registro de tarjetas adaptables en una conversación.

Conversación

Buscar una forma de facilitar la conversación alrededor de una pestaña. Esto garantiza que las conversaciones se centran en el contenido, los datos o el proceso a mano.

Acceso simplificado

Asegúrese de que está concediendo acceso a las personas adecuadas en el momento adecuado. Mantener simple el proceso de inicio de sesión evitará la creación de obstáculos a la contribución y la colaboración.

Capacidad de respuesta al tamaño de la ventana

Los equipos se pueden usar en tamaños de ventana tan pequeños como 720px, por lo que es importante asegurarse de que una pestaña se puede usar en una ventana pequeña tan importante como el uso de resoluciones muy altas.

Navegación plana

Se pide a los desarrolladores que no agreguen todo su portal a una pestaña. mantener la navegación relativamente plana ayuda a mantener un modelo de conversación más sencillo. En otras palabras, la conversación trata sobre una lista de cosas, como los elementos de trabajo clasificados o de un solo elemento, como una especificación.

Hay desafíos de navegación inherentes a la jerarquía de navegación profunda en conversaciones encadenadas. Para obtener la mejor experiencia del usuario, la navegación de la pestaña debe mantenerse al mínimo y diseñarse de la siguiente manera:

  • Abre un módulo de tareas como una entidad o elemento de trabajo individual. Esto excluye completamente el chat y es la mejor opción para mantener el chat específicamente sobre la ficha y no sobre las subentidades o la experiencia de edición.
  • Abre un pseudo cuadro de diálogo en un iframe. Si se usa con un fondo con pantalla, se recomienda usar el color más claro en lugar del oscuro. La app-gray-10 at 30% transparencia funciona bien.
  • Abre una página del explorador.

Personalidad

El lienzo de pestañas ofrece una gran oportunidad para personalizar su experiencia. Su logotipo es una parte importante de su identidad y su conexión con los usuarios de, por lo que debe asegurarse de incluirlo:

  • Poner el logotipo en la esquina izquierda o derecha o a lo largo del borde inferior
  • Mantener el logotipo en pequeña y discreta

La incorporación de sus propios colores y diseños Twill también ayuda para comunicar la personalidad.

Sugerencia

Trabaje con nuestro estilo visual para que su servicio se sienta como parte de Microsoft Teams. Consulte, por ejemplo, [colores de Microsoft Teams] (/Concepts/Design/Components/Typography.MD


Diseños de pestañas

  • Single canvas

    This is one large area where work gets done. OneNote and Wiki follow this pattern. If you have an app that doesn’t separate content into smaller components this would be a good fit.

  • List

    Lists are great for sorting and filtering large quantities of data and are great at keeping the most important things at the top. It is helpful to use sortable columns. Actions can be added to each list item under the ellipsis menu.

  • Column

    Columns are great for workflows that move an item from one column to another to indicate a new status. Consider supporting drag and drop for those scenarios. We recommend using dialogs or inline expansion for detail views.

  • Grid

    Grids are useful for showing elements which are highly visual. It helps to include a filter or search control at the top.


Tipos de pestañas

  • Wiki

  • Planner


Alto de página de configuración

Importante

En septiembre de 2018, se incrementó el alto de la Página de configuración de pestañas mientras el ancho permaneció sin cambios. Si la aplicación está diseñada para el tamaño anterior, la página de configuración de pestañas tendrá una gran cantidad de espacio en blanco vertical. Las aplicaciones de la tienda heredadas exentas de este cambio tendrán que ponerse en contacto con Microsoft después de la actualización para acomodar las nuevas dimensiones.

Las dimensiones de la página de configuración de pestañas:

Instrucciones para el formato de página de configuración de pestañas

  • Base el alto mínimo del área de contenido de la página de configuración de pestañas en elementos gráficos de altura fija.
  • Calcula el espacio vertical disponible (el alto del área de contenido en la página de configuración window.innerHeight) mediante. Esto devuelve el tamaño del en <iframe> el que reside la página de configuración, lo que puede cambiar en futuras versiones. Al usar este valor, el contenido se ajustará automáticamente a los cambios futuros.
  • Asigna espacio vertical a los elementos variable-height menos lo que se necesita para los elementos de altura fija.
  • Para el estado de Inicio de sesión , centrar vertical y horizontalmente el contenido.
  • Si desea una imagen de fondo, necesitará una nueva imagen, ajustada para ajustarse al área (recomendado) o puede conservar la misma imagen y elegir entre:
    • alineación a la esquina superior izquierda.
    • escalar la imagen para ajustarla.

Cuando esté correctamente ajustado, la página de configuración de pestaña debe tener un aspecto similar a este:

Procedimientos recomendados

Incluir siempre un estado predeterminado

Incluya un estado predeterminado para que las pestañas se puedan configurar fácilmente incluso si la pestaña se puede configurar.

Vinculación profunda

Siempre que sea posible, las tarjetas y los bots deben tener un vínculo profundo a datos enriquecidos en una pestaña hospedada. Por ejemplo, puede que una tarjeta muestre un resumen de los datos de los errores, pero al hacer clic en él se muestra el error completo en una pestaña.

Poner

En muchos casos, el nombre de la aplicación tomará un nombre de pestaña excelente. Pero, también considere la posibilidad de asignar un nombre a las pestañas según la funcionalidad que proporcionan.

Notificaciones para pestañas

Hay dos modos de notificación para cambios de contenido de pestañas:

  • Use la API de aplicaciones para notificar a los usuarios los cambios. Este mensaje se mostrará en la fuente de actividad del usuario y un vínculo profundo a la ficha. consulte Create deep links to Content and features in Microsoft Teams
  • Usar un bot. Este método es preferible especialmente si el subproceso de la pestaña es de destino. El resultado será que la conversación encadenada de la pestaña se desplazará a la vista como activa recientemente. Este método también permite una sofisticación en el modo en que se envía la notificación.

El envío de un mensaje a un subproceso de tabulación aumenta la conciencia de la actividad a todos los usuarios sin notificar explícitamente a todos los usuarios. Se trata de un reconocimiento sin ruido. Además, cuando hay usuarios @mention específicos, la misma notificación se colocará en la fuente, lo que hará que se vinculen directamente al hilo de la pestaña.