Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Sketch
Webdesign

Cómo Utilizar Símbolos de Dibujo para Crear Diagramas de Flujo

by
Difficulty:BeginnerLength:LongLanguages:

Spanish (Español) translation by Jean Perez (you can also view the original English article)

Final product image
What You'll Be Creating

En este tutorial vamos a crear usuario reutilizable diagramas de flujo del flujo y la tarea en el dibujo. A aprovechar el poder de los símbolos de esquema, con algunas personalizaciones y elementos básicos para lograr nuestros símbolos.

"[Un] diagrama de flujo es un diagrama de la secuencia de movimientos o acciones de personas u objetos involucrados en un complejo sistema o actividad." — Naema Baskanderi

Para construir los diagramas de flujo necesitaremos elementos de páginas, flechas, acciones (como decisiones y sí/no indicadores), etiquetas y notas. Voy a ir sobre cada uno de estos elementos, cómo debe buscar (si usted se siente inclinado a copiar mi estilo), cómo debe funcionar y cómo encajan en el panorama. Pero antes de hacer eso, tenemos que ir sobre convenciones de nombres en el dibujo. Es uno de los factores clave en la fabricación de este trabajo. Vamos a bucear bien, ¿vamos?

Sketch symbols for flow diagrams
Símbolos de dibujo son perfectos para diagramas de flujo

Tenemos que Hablar Sobre Convenciones de Nomenclatura

Sí, lo hacemos y por dos razones específicas. En primer lugar, es buena práctica para mantener las capas llamadas fines organizacionales, especialmente si estás manejando los archivos con otras personas. Cuando se crea un símbolo con varios campos de texto en él, las capas de texto correctamente nombrado le ayudará a distinguir que el texto es que cuando está tratando de reemplazar o invalidarla.

La segunda razón es mucho más frío. Dibujo automáticamente agrupará símbolos, estilos de texto y estilos compartidos en diferentes capas, suponiendo que sigue una sintaxis específica. Bosquejo se basa en convenciones de nombres URL-como como una carpeta, por ejemplo los siguientes dos símbolos se agruparse ordenadamente.

  • Flecha S-forma/de izquierda a derecha
  • Flecha/S-forma/derecha-abajo-derecha

Entonces si tenemos otro nombre:

  • Flecha/por defecto/izquierda-arriba-izquierda

también se agruparán las flechas, pero en un diferentes subcarpetas: por defecto. Esta clasificación nos permite encontrar exactamente el símbolo que necesitamos cuando lo necesitamos:

Organizing symbols in Sketch
Símbolos organizados en bosquejo

Téngalo en cuenta al nombrar algo hacia adelante, sobre todo las capas de texto, símbolos y estilos compartidos.

El Elemento de Página

La "página" es una parte fundamental de nuestro diagrama de flujo. Usuarios del sitio web o aplicación será seguir varias rutas de completar diversas tareas y páginas siempre será fundamentales para esto.

Para crear el elemento de la página tenemos un rectángulo y un campo de texto por encima de él. Los estilos del rectángulo incluyen #325372 para el color, Helvetica Neue, medio peso y tamaño de fuente 11. Puede crear un estilo compartido para esto como los demás elementos tendrá la misma tipografía, aunque el elemento de página a utilizar mayúsculas. Para ello, en las opciones, cambiar la transformación de texto a mayúsculas.

El rectángulo es 144px por 96px con un radio de 5, #F7FCFD para el fondo y #B7E7EE para el 1px dentro de frontera. Es una buena idea hacer al menos el estilo del rectángulo de la página en un estilo compartido. Esto permitirá que para luego poder editarlos fácilmente.

Cambiar el nombre de la capa de texto "Nombre de página". Esta manera, cuando usted vuelva a utilizar este elemento como un nuevo símbolo, la anulación del texto tendrá un título en vez de "texto". Seleccione ambos y convertirlos en un símbolo a través del botón de Crear Símbolo en la barra de herramientas.

Crear Accesos Directos Personalizados en Sketch

En este tutorial crearemos un montón de símbolos. Sketch no tiene un mando clave para este construido, pero nosotros mismos podemos hacer un acceso directo personalizado.

En primer lugar, ir a Preferencias del Sistema y entrar en el Teclado. Seleccione la ficha Atajos de la parte superior. En el panel izquierdo, seleccione Atajos de la Aplicación y pulse el botón +. Se mostrará una superposición; en la lista de aplicaciones busque Sketch. Bajo Título de Menú que es necesario rellenar el nombre de elemento de menú específico que estamos enfocando, en este caso que es Crear Símbolo (es el primer elemento de menú debajo de Capa). Por último, seleccionar el atajo de teclado, y eso es todo.

Pro tip: esto puede usarse para cualquier aplicación.

Custom keyboard shortcut for Sketch
Hacer un atajo de teclado personalizado para Sketch

Las Flechas

Usted puede hacer tantos estilos diferentes de la flecha como quieras, pero la idea es mostrar cómo crear una flecha sola, ajustable para comenzar con. Usted puede agregar su propio estilo y variaciones más adelante.

Como se puede ver en la imagen de arriba, la flecha se va a tomar muchas formas; tenemos que ser inteligentes sobre la creación. En primer lugar, necesitamos un punto inicial y punto final. En mi caso, es un círculo abierto y un triángulo. El triángulo es un icono SVG que encontré en el Proyecto Noun. Puede hacerse un simple triángulo, o utilizar un icono.

Estoy usando #325372 para la flecha, la frontera del círculo y la línea. El círculo también tiene un fondo blanco #FFFFFF. Ahora, convertirlos en símbolos y nombre según lo que son. Si quieres ir un poco loco y crear símbolos individuales para siendo el triángulo, abajo, izquierda o derecha, luego ir a por ello. Pero no es necesario.

El siguiente es la línea en sí. Crear una línea de píxel con la herramienta línea. Sea cual sea el estilo que tienes que ir allí, vuelven al estilo de la línea de un estilo compartido. Tengo dos; estilos de puntos y sólidos para flechas de primarias y secundarias. Tener múltiples estilos compartidos harán conmutación entre ellos sea más fácil. Más en eso más adelante.

A continuación, tendremos que crear cada tipo de flecha combinando el punto de inicio, la línea y el punto final. Las flechas deben ser intercambiables para la creación del diagrama, así que vamos a hacerlo ahora.

Crear un Símbolo de Flecha Recta

En primer lugar, vamos a crear una mesa de trabajo cuadrada. Una plaza nos ayudará a mantener todo de la misma forma y las flechas será más fáciles trabajar con entonces. La mía es 80px por 80px. Quiero empezar por crear una mesa de trabajo para cada flecha. Así, podré verlos todos a la vez. Vamos a comenzar creando primero la izquierda, derecha, superior e inferior frente a las flechas. Ahora, seleccione las flechas y convertirlas en símbolos de la manera que hemos estado haciendo. No te olvides de usar el acceso directo recién creado también. Nombre de estos símbolos, por defecto/flecha/izquierda, derecho de flecha de forma predeterminada y así sucesivamente (usted consigue la idea).

Crear las Flechas Curvadas

Ahora que las flechas más fácil son cuidadas; vamos a pasar en las curvas. Esta parte es fundamental porque necesitamos las flechas para ser fácilmente ajustables y ajustables. Voy a seguir adelante y crear uno de cada uno de los tres estilos primero.

Dentro de las nuevas mesas de trabajo, aún 80px por 80px en tamaño y con la herramienta de vector (V), dibujar líneas de flecha de la forma de L, la forma de S y los estilos en forma de U. Asegúrese de que sus líneas son cuadradas. No realizar ninguna curva sí mismo todavía. Si usted está teniendo problemas para hacer líneas perfectas, colocar los puntos más o menos donde debe estar, luego editar su ubicación manualmente introduciendo X y Y posiciones usted mismo.

Echa un vistazo a la imagen. A continuación, tenemos que editar las curvas. Para cada selección de línea sólo los puntos que conforman las esquinas. No seleccionar el principio o puntos finales. En el lado derecho, aumentar número de esquinas que usted desee. Mi puse a 10px. Ahora, las esquinas serán automáticamente cambiar de tamaño sin deformar la línea.

La última cosa que necesitamos hacer aquí es agregar los puntos inicial y final. Pero antes de hacerlo, vamos a convertir las líneas (sólo las líneas por ahora) en símbolos. Queremos que la línea a ser ajustable basado en sus criterios de valoración reales, su principio y fin, exclusivo de los iconos en sus extremos. Vamos a añadir los puntos inicial y final en un minuto. Nombre de estas tres flechas flecha/L-forma/inferior derecha, flecha/S-forma/derecha-abajo-derecha y flecha/U-forma izquierda/derecha-abajo.

Ahora, haga doble clic en uno de los símbolos recién hechos para editarlo. Queremos poner el comienzo y extremos en el borde del centro y símbolo de alinearlo con puntos de final de la línea. Idealmente, usted quiere poner los puntos inicial y final en la esquina de las mesas de trabajo del símbolo.

Por último, las flechas de tamaño variable, para el punto de partida y el punto final, en opción de reposo seleccione ancho fijo y altura fija. Además, no te olvides de cambiarles para comenzar a punto y punto final. Este cambio de nombre hará más fácil saber que es que cuando cambio los tipos.

Tenemos que repetir esto con las flechas restantes, incluyendo las restantes indicaciones de la forma L, forma de S y las flechas en forma de U. Hacerlo, repitiendo los pasos anteriores.

¿Qué Estilos Diferentes de Flechas?

Usted puede tener tantos estilos diferentes de flechas que quieras; puntos, guiones, sólido o cualquier otra cosa. La parte tediosa es que vas ha crear un nuevo conjunto de flechas para cada estilo si desea utilizar más de uno en el mismo archivo. De lo contrario sólo actualizar el estilo compartido. No te olvides de ajustar la terminología flecha/S-forma/derecha-abajo-derecha/puntos o flecha/puntos/S-forma/derecha-abajo-derecha.

Las Acciones

Creo que es el desarrollo más importante detrás de nosotros. Los elementos restantes no son muy complicados. Los elementos de acción aquí incluyen los elementos para sí/no indicadores, una decisión, una etiqueta de acción.

Indicadores Sí y No

Sí y no los indicadores nos permiten ilustrar puntos en nuestro diagrama donde la dirección del flujo se ve afectada por un "sí" o "no" acción.

Estos indicadores son simples (al menos comparado con las flechas). Hacía descargando dos iconos del proyecto Sustantivo. Aquí está un enlace a la verificación y un enlace a la X. El proyecto Sustantivo iconos blanco #FFFFFF. Mientras que el color de fondo es #F89B8D para 👎 y #FECD75 para 👍🏿. �.

Convertirlos en símbolos y nombre de anotación/Si-No/👎 y anotación/Si-No/👍🏿 (Si, emojis son compatibles.) ted.) #F2F2F2, ninguna frontera. Guardarlo como un estilo compartido. Sobre la Plaza, tenemos un área de texto. He titulado mi capa de texto "Decisión". Recuerde que las capas es importante. Puede volver a utilizar el estilo de texto compartida Si guardaste antes. Si no, el estilo del texto es #325372 para el peso medio de color, Helvetica Neue, tamaño de fuente 11. Si está copiando mis estilos, convertir el estilo de ambos, el texto y la Plaza, en estilos compartidos.tyles.
#6FCFDB para el fondo. A continuación, el área de texto. Volver a utilizar el estilo de texto de los indicadores de acción o decisión. Luego, crear un nuevo estilo compartido llamado texto de la etiqueta y volver a colorear el texto a #FFFFFF. ¿A continuación, convertirlos en un símbolo nuevo (has sido usando el atajo y acostumbrando estar allí? Genial. 🙌) t. 🙌)
#A4A4A4 para el color del texto, Helvetica Neue, peso regular este tiempo y tamaño de fuente 11. Esto es desemejante todo lo demás hasta ahora, para no hacer el texto de notas en un símbolo. Sólo agregar un estilo compartido. style.
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.