Descargo de responsabilidad: Este artículo se generó mediante traducción automática.

Edición de una guía paso a paso

Prev Next

NOTA

Las funciones de IA Floik están disponibles en todos los planes de Document360 como complemento. Para comprar o obtener más información, por favor contacta con nuestro equipo de soporte.

Una vez que tu grabación se sube, el editor Step by step guide a paso se abre en el portal de la Base de conocimiento. Cada paso se genera automáticamente según el flujo de trabajo capturado, con el título y la descripción del paso precompletados a partir de las acciones grabadas.

Cada paso muestra la pantalla capturada a la izquierda y un panel derecho con opciones editables. Este artículo cubre todo lo que puedes hacer para refinar y mejorar tu guía antes de publicarla

Cuándo usar cada herramienta de edición

El kit de herramientas de edición ofrece una amplia gama de funciones. Saber cuándo usar cada una te ayuda a trabajar de forma más eficiente.

Herramienta

Mejor usarse cuando

Ejemplo

Blur

Una pantalla contiene contraseñas, claves API, PII o URLs internas

Ocultar una dirección de correo electrónico de cliente visible en el panel de administración durante una guía de incorporación

Foco

Un elemento en una pantalla concurrida debe destacar

Resaltar un pequeño enlace oculto en una página densa de ajustes

Superposición de texto

Necesitas anotar un paso con una etiqueta, advertencia o señal que no esté en la interfaz

Añadir "No hacer clic en guardar todavía" en rojo encima de un botón que el usuario debería saltarse por ahora

Aspectos destacados

Quieres llamar la atención con el color sin atenuar el resto de la pantalla

Dibujar una casilla amarilla alrededor del campo que el usuario debe rellenar a continuación

Superposición de imagen

Quieres mostrar un diagrama, una tecla de iconos o un asset de marca junto a la captura de pantalla

Añadir una leyenda numerada a una captura de pantalla compleja del panel de control

Cultivo

La pantalla grabada tiene Chrome o barras laterales del navegador irrelevantes que distraen de la tarea

Recortando la barra de marcadores y los paneles laterales no relacionados

Haz zoom

Un punto caliente o objetivo de clic es pequeño y fácil de pasar por alto

Hacer zoom en un pequeño botón de palanca en la esquina superior derecha de la pantalla

Animar clic

Una captura de pantalla estática no explica qué ocurre cuando se pulsa un botón o enlace

Mostrar el desplegable que se expande después de que el usuario haga clic en un elemento del menú


Contenido del paso de edición

Utiliza el panel derecho para modificar estos elementos en cada paso:

  • Título - Introduce el título del paso. Para añadir un hipervínculo, selecciona el texto y haz clic en el icono de Hipervínculo .

  • Descripción - Añadir instrucciones o contexto. Formatear usando negrita, cursiva, subrayado, lista ordenada, lista no ordenada y Hipervínculo.

  • Imagen de la diapositiva - Haz clic en Reemplazar imagen para intercambiar la captura de pantalla capturada (máximo 10 MB; formatos soportados: JPG o PNG; resolución recomendada: 1920×892, mínimo 100×100).

    • Selecciona del original - Elige un fotograma del vídeo grabado. Usa ajuste fino de milisegundos para mayor precisión.

    • Mis subidas - Haz clic en Subir para elegir un archivo de tu explorador local.

    • Haz clic en Insertar para solicitar.

Para insertar un nuevo paso, pasa el cursor entre dos pasos existentes y haz clic en el icono + .

NOTA

Las imágenes utilizadas en cada paso se derivan de tu sesión grabada. Puedes elegir cualquier fotograma de la grabación original para crear un nuevo paso o reemplazar una imagen existente.

Añadir elementos

Estas herramientas superponen mejoras visuales directamente a la imagen escalonada.

Blur

Oculta información sensible o privada en una captura de pantalla.

  1. Haz clic en Desenfocar > Añadir.

  2. Asegúrate de activar el interruptor de desenfoque para mostrar desenfoque.

  3. Introduce un nombre para el desenfoque.

  4. Selecciona el paso al que aplicarlo. Cada elemento de desenfoque se asigna a un paso específico. Repite para otros pasos según sea necesario.

  5. Elige una forma: Círculo o Rectángulo.

  6. Ajusta el control deslizante de Intensidad (opacidad).

  7. Haz clic en Aplicar.

Para eliminar un desenfoque, pasa el cursor sobre él en la lista: haz clic en Más () > Eliminar. Haz clic en Añadir nuevo en la parte superior para añadir más elementos de desenfoque.

NOTA

Puedes añadir varios efectos de desenfoque a una sola imagen.


Imagen

Superpone una imagen adicional a un escalón.

  1. Haz clic en la imagen > añadir.

  2. En el cuadro de diálogo Mis subidas , selecciona una imagen subida previamente o haz clic en Subir para navegar por tus archivos locales. También hay recursos de imagen predefinidos disponibles.

  3. En la sección de Tamaño y posición , elige:

    • Libre - Ajusta tamaño y posición libremente. Introduce un valor exacto en el campo Ángulo o usa Rotar a la izquierda () o Rotar a la derecha () para ajustar manualmente.

    • Ajuste a la pantalla - La imagen llena por defecto el área de imagen del escalón.

  4. Haz clic en Aplicar.


Foco

Llama la atención sobre una zona concreta atenuando todo lo que hay fuera de ella.

  1. Haz clic en Spotlight > Añadir.

  2. Introduce un nombre para el foco de atención.

  3. Selecciona el paso al que aplicarlo.

  4. Elige una forma: Círculo o Rectángulo.

  5. Haz clic en Aplicar.

Para eliminar, pasa el cursor sobre el foco en la lista - Más () > Eliminar. Haz clic en Añadir nuevo para añadir más focos.

NOTA

Todas las zonas fuera del foco se atenuarán. Actualmente, no se puede ajustar el brillo de la zona atenuada.


Texto

Añade anotaciones de texto personalizadas sobre la imagen de pasos.

  1. Haz clic en Texto > Añadir.

  2. Introduce tu texto. Formatea usando negrita, cursiva, subrayado, lista ordenada/no ordenada o Hipervínculo.

  3. Elige una fuente y tamaño de fuente.

  4. Elige un color de la paleta.

  5. Establece la rotación usando el control de grados .

  6. Haz clic en Aplicar.

Para editar, haz clic en el icono Editar (). Para eliminar, haz clic en Más () > Eliminar. Haz clic en Añadir nuevo para añadir elementos de texto adicionales.


Aspectos destacados

Marca las áreas importantes en la imagen escalonada con una superposición de colores.

  1. Haz clic en Resaltar > Añadir.

  2. Asegúrate de activar el interruptor de mostrar resaltad .

  3. Introduce un nombre.

  4. Elige una forma: Círculo o Rectángulo.

  5. Selecciona un color de la lista o haz clic en + para usar un color personalizado.

  6. Haz clic en Aplicar.

Para eliminar, pasa el cursor sobre el resalto → Más () > Eliminar. Haz clic en Añadir nuevo para más resaltos.


Transiciones de imagen

Efecto de zoom

Aplica un efecto de zoom para llamar la atención sobre puntos calientes o áreas clave dentro de la imagen escalonada.

  • Haz clic en el botón + en la esquina superior derecha de la imagen para acercar.

  • Haz clic en el botón − para alejar la vista.

Usa esto para centrar al lector en un elemento pequeño o fácilmente pasado por alto: una casilla de selección, un interruptor, un enlace sin recortar el contexto circundante.


Animar clic

En lugar de una imagen estática, anima un paso reproduciendo un breve clip de vídeo alrededor del clic grabado, útil cuando el resultado de un clic (una apertura desplegable, un panel que se expande) es importante para que el lector lo vea.

  1. Selecciona el paso deseado.

  2. En el panel derecho, ve a Transición de imagen.

  3. Elige Animar y haz clic.

  4. Selecciona una duración:

    • 3 segundos - muestra 1,5 segundos antes y después del clic. Ideal para interacciones rápidas y sencillas.

    • 5 segundos - equilibrado; bueno para la mayoría de los casos en los que se necesita una animación breve.

    • 10 segundos - muestra hasta 5 segundos en cada lado; mejor para transiciones más lentas como cargas de página o respuestas animadas de la interfaz. La duración se ajusta según el metraje disponible.

El paso se reproduce como un mini vídeo, centrado en el punto de clic.


Editar imagen

Cultivo

Recorta la imagen escalonada para enfocar en una zona específica.

  1. Haz clic en recortar.

  2. Elige una relación de aspecto:

    • Original (320:141)

    • Costumbres

    • Cuadrado (1:1)

    • Paisaje (16:9)

    • Retrato (9:16)

  3. Para Personalizado, arrastra el área de recorte en la imagen. La sección de salida Recorte muestra el ancho, la altura y la relación de aspecto resultantes.

  4. Haz clic en Aplicar para guardar.

NOTA

Una vez recortada, solo el área seleccionada se resaltará y será visible en la base de conocimientos.


Gestión de elementos añadidos

Para revisar y gestionar todas las mejoras en un solo paso:

  1. Expande la sección de Elementos añadidos en el panel derecho.

  2. Pasa el cursor sobre cualquier elemento:

    • Haz clic en Editar () para actualizarlo.

    • Haz clic en Borrar () para eliminarlo.

Instructions to click the 'Browse articles' button for accessing support articles.


Resolución de problemas de edición

Un desenfoque o foco que apliqué no aparece en la guía publicada: comprueba que el interruptor de Mostrar desenfoque o Mostrar resaltado esté activado para el elemento. Los elementos están ocultos por defecto hasta que se activa el interruptor, permanecen en tu editor como configuraciones guardadas pero no se renderizarán en la base de conocimientos hasta que estén activos.

El clic animado muestra "no disponible" para un paso - El clic animado solo funciona para pasos cuya imagen de diapositiva fue tomada directamente de la grabación original. Si reemplazaste la imagen por una subida personalizada a través de Mis subidas, la fuente de animación ya no estará disponible. O bien reverte al fotograma original usando Seleccionar desde el original, o usa Zoom como alternativa.

Recorté una imagen escalonada pero ahora el lector no puede ver el contexto circundante : recortar es permanente por paso. Una vez aplicado, solo se ve el área recortada. Si necesitas restaurar el contexto, haz clic en Recortar de nuevo y selecciona Original como relación de aspecto para volver a la imagen completa.

Las anotaciones de texto se ven bien en el editor, pero son demasiado pequeñas en la base de conocimiento : tamaños de fuente que parecen apropiados en un lienzo grande de editor pueden renderizarse pequeños en diferentes tamaños de pantalla. Usa un tamaño de fuente de al menos 16 - 18px para las anotaciones del cuerpo y previsualiza la guía en la base de conocimientos antes de publicarla para comprobar la legibilidad.

La sección de "Elementos añadidos" está vacía, pero sé que apliqué un desenfoque : los desenfoques, focos y otros elementos se almacenan por paso. Asegúrate de tener seleccionado el paso correcto en el panel izquierdo, los elementos de un paso no aparecen en la lista de Elementos añadidos de otro.


Próximos pasos

Una vez que tu guía esté pulida, puedes publicar, traducir, clonar o gestionar el acceso. Consulta Gestión de guías paso a paso para traducción, clonación, despublicación y ajustes.