Accentsconagua
Share
Lo que vas a crearHace un tiempo publicamos un tutorial sobre cómo crear un archivo de croquis personalizado con diagramas de flujo reutilizables. Es un gran recurso para crear tus propios flujos de usuarios o mapas de sitio. En este tutorial vamos a reforzar ese archivo de Sketch para que sea más utilizable para otros..
Es posible que tenga colegas que deseen utilizar su archivo, o quizás pagar a los clientes. De cualquier manera, las mejoras que realicemos en el archivo significarán que otros pueden abrirlo, entenderlo y utilizarlo..
Te recomiendo que sigas y leas el tutorial original. Como mínimo, tome el archivo final de Sketch para comenzar con el pie derecho y siga esta segunda parte. Este tutorial está repleto de consejos y trucos de Sketch, algunos consejos profesionales aquí y allá, así como algunos complementos relacionados que debes probar por ti mismo..
Lo primero que haremos es configurar una nueva página. Estoy llamando al mío "Manual del usuario". Esta página servirá como una guía rápida sobre cómo utilizar los elementos del diagrama de flujo. Lo usaremos para explicar el rol de cada elemento, cómo usarlos y cómo manipular sus propiedades, como los puntos de inicio de las flechas..
Comenzaremos con una nueva mesa de trabajo. Llamaré a la mía "Cómo usar flechas". prensa UNA para crear una nueva mesa de trabajo y en la esquina superior derecha, seleccione Tamaño de papel y Carta. Sketch colocará automáticamente la mesa de trabajo del tamaño adecuado para ti (¡esto también funciona con tamaños de pantalla de escritorio y móviles!).
Tamaños de papel para cartulinas en croquis.Quiero que los nuevos usuarios entiendan algunas cosas, como cómo seleccionar una línea y colocarla en una mesa de trabajo, cómo cambiar su forma y cómo cambiar sus puntos de inicio y final. Cómo explicas estas cosas es tu elección; Las descripciones e instrucciones específicas dependen de usted. He mejorado mis descripciones al incluir un par de capturas de pantalla.
Al igual que con los símbolos o estilos de capa, también podemos organizar estilos de texto. Para estas páginas de manual tengo tres estilos de texto diferentes., H1, H2, y cuerpo.
Mi H1 es Helvetica Neue, Regular, 24 px de tamaño con una altura de línea de 30 px. los H2 es Helvetica Neue, Bold, 14 px de tamaño con una altura de línea de 20 px. los cuerpo es Helvetica Neue, Regular, 12 px de tamaño con una altura de línea de 20 px. Los tres usan el color # 325372..
Podemos usar la sintaxis de organización de Sketch para organizar estos estilos en el menú desplegable. Los he nombrado de la siguiente manera, que se pueden ver reflejados en el menú desplegable anterior:
Me encanta esto, hace que mis archivos de Sketch sean mucho más organizados.!
La siguiente página en el manual del usuario va a discutir las anotaciones. Para ahorrar tiempo, copie la página de la flecha y edite el texto y las imágenes para reflejar las anotaciones. Para las anotaciones debemos discutir lo siguiente: agregar a una página, seleccionar una anotación diferente y cambiar el tamaño.
En el tutorial inicial, nos aseguramos de que las anotaciones de Acción y Etiqueta se redimensionaran manualmente con las propiedades nativas de Sketch. Sin embargo, si desea utilizar un complemento genial para hacer el cambio de tamaño por usted, puedo sugerirle que descargue y use el botón Rebel o Paddy?
Por último, estoy agregando una página para "Cómo usar las páginas". He incluido las instrucciones predeterminadas sobre cómo agregar una página a la mesa de trabajo, así como cómo cambiar el texto predeterminado de la "página de inicio".
Propina: si alguna vez necesita colocar sus elementos con precisión, seleccione un elemento y presione Opción en tu teclado A medida que el mouse se desplaza sobre los otros elementos de la mesa de trabajo, los indicadores transmitirán las distancias de píxeles exactas entre ellos.
Lo siguiente que debemos configurar es la guía de estilo. He creado una nueva página y, lo has adivinado, la he llamado "Guía de estilo". Al igual que cualquier otra guía de estilo, esto pretende presentar a los usuarios los diferentes estilos utilizados en el archivo. Dentro de la guía de estilo, voy a hablar sobre los colores, la tipografía y los estilos de capas, incluidos los estilos de líneas de flecha (sólido y discontinuo)..
En el diseño original de los diagramas de flujo terminé usando nueve colores diferentes, así que vamos a crear una nueva mesa de trabajo solo para ellos. Coloca todos los colores en la página y nómbralos. Lo bueno viene después!
Ahora añadiré estos colores como estilos. De esta manera, si alguien quiere personalizar los colores de los diferentes elementos que pueden.
Primero, la sintaxis: Estilos / Color / nombre del color. Asi que, Estilos / Color / Error rojo o Estilos / Color / Fondo azul. Una vez que haya terminado de agregarlos, mire y admire la forma ordenada en que aparecen esos colores en el Estilo de capa ¡desplegable! Además, puede ver que quedan algunos estilos del tutorial original. Podremos organizarlos un poco más tarde..
La primera razón para todos los colores establecidos es para mostrar lo que está en uso (como lo debería hacer una guía de estilo). La segunda razón es para un fácil reciclaje. Eso no se aplicará a todos los diferentes elementos en uso (como el texto) pero podría afectar fácilmente a aquellos con solo un fondo como el Sí y No anotaciones Intentaremos hacer exactamente eso a continuación..
Vuelve a la página de símbolos. A continuación, aplique los mismos estilos que acabamos de crear a los elementos Acción, Etiqueta, Sí y No. De esta manera, si decide que ya no desea que el Sí sea amarillo sino verde, todo lo que tiene que hacer es actualizar el color en la Guía de estilo y todos los Sí en todo el archivo de Sketch cambiarán de color.
Para facilitar un poco más el flujo de trabajo, es posible que desee guardar los colores en los colores del documento. Esto les facilitará el acceso en todo momento..
Si te gusta estar organizado, te sugiero que descargues el complemento Sort Me. Ordena ambas capas y tableros de trabajo, alfabéticamente y numéricamente (o al revés también). Aquí hay algunos otros recursos de eficiencia para Sketch:
La siguiente guía de estilo que necesitamos crear es para tipografía. Queremos mostrar todos los estilos de texto en el documento, y quiero dividirlos en dos categorías, textos de documentos (como en el manual y la guía de estilo aquí) y los de los diagramas de flujo..
Ahora me gustaría mostrarle cómo reorganizar sus estilos de texto actuales y cambiarles el nombre (si es necesario). Desde el Estilo de texto desplegable, seleccione la última opción Organizar los estilos de texto ... Esto abrirá una nueva ventana que se llena con cada uno de sus estilos de texto. Si hace doble clic en uno, puede cambiarle el nombre. Quiero que les cambies el nombre de la siguiente manera:
También quiero que cambie el nombre de los tres "Textos manuales" a "Texto del documento". Creamos los nombres iniciales con la intención de usarlos solo dentro de la documentación del Manual del usuario, pero desde entonces hemos agregado la guía de estilo que hace que la convención de nombres ya no sea precisa. Como puedes ver, cambiar el nombre de los estilos de texto es simple. Si escribe incorrectamente un nombre o su convención de nomenclatura necesita actualizarse, no es un problema!
Propina: el pequeño ícono menos [-] en la esquina inferior izquierda eliminará el estilo seleccionado. Pero ten cuidado: no hay deshacer y no pregunta si estás seguro..
Actualice el estilo de texto en la guía de estilo para actualizar la tipografía en todo el archivo (al igual que con los colores).
Esta será la última mesa de trabajo en la sección de guía de estilo. Aquí analizaremos cómo cambiar el color y tratar los elementos restantes, el símbolo de página y el símbolo de anotación de decisión. Discutiremos las flechas al final, justo después de terminar la sección de estilos compartidos..
Si regresa a la sección de colores, recordará que tuvimos algunos estilos adicionales que dije que organizaremos más adelante. Bueno, ahora es el momento! La idea es exactamente la misma que con la organización de estilos de texto. Elige organizar el estilo de capa; puede cambiarles el nombre, organizarlos y eliminarlos todos al igual que con los estilos de texto.
Para los estilos de capa, quiero que conserves cada uno de los estilos / colores / ... que hicimos anteriormente. Luego, renombra el resto de la siguiente manera:
Propina: al presionar la tecla Tab no se navega hacia abajo en la lista de nombres de estilo, igual que en la lista de capas. En su lugar, en esta ventana, la tecla Tab hace que el nombre del estilo seleccionado sea editable o no. Muevalo una o dos veces para ver exactamente lo que quiero decir!
Recuerda el ícono menos [-] que mencioné antes? Es para borrar estilos. Necesito que borres Fondo gris. Es un remanente de mi exploración de diseño inicial y no se usa en ningún lugar.
Por último, cierre la ventana, seleccione el fondo de la anotación de decisión y seleccione Crear nuevo estilo de capa, Desde el desplegable. Nombre el nuevo estilo "Fondo / Decisión". Continuaremos y ajustaremos los estilos de estos ahora, de vuelta en la página de la guía de estilo. Copie los fondos de la anotación de decisión y los elementos de la página..
De vuelta en la guía de estilo, pegue los dos fondos en el área de diseño Flechas y elementos. (Solo voy a copiar sobre la página y la anotación de decisión).
Solo para darle un ejemplo real de cambiar el estilo y actualizarlo universalmente, quiero que sigamos adelante y cambiemos el estilo de fondo de la Anotación de la Decisión. Es por eso que te hice crear un estilo de capa por separado, para que no afectara la anotación de acción. Cámbielo a cualquier cosa que desee, no tiene que coincidir con el diseño. Agregue un borde de 1px con un color de su elección y un nuevo color de fondo también.
Una vez que hayas terminado, desde el Estilo de capa desplegable seleccionar Actualizar estilo de capa. Si va a la página del diagrama de flujo de muestra o regresa a la página de símbolos, verá que los estilos se han actualizado. Ese es un gran ejemplo de los estilos de actualización en acción. Eso es exactamente lo que debe esperar si actualiza el documento para un nuevo estilo de diseño, como los diferentes colores de marca..
Propina: si cambia el estilo de un elemento con un estilo de capa en él, puede devolverlo al estilo original seleccionando Restablecer estilo de capa.
Bien, hemos encontrado los activos finales y todo se trata de las flechas. Dejé lo mejor para el final, naturalmente. Lo primero es lo primero, necesitamos agregar flechas a nuestra guía de estilo. En este momento solo tenemos un tipo de flecha a nuestra disposición. Sin embargo, si recuerda que durante la limpieza del estilo de capa, tuvimos una línea continua y una línea de puntos. Añadamos las flechas punteadas a nuestra colección..
En la página de símbolos, quiero que copie la primera flecha, Flecha / Predeterminado / Derecha, y le cambie el nombre Flecha / Punteada / Predeterminada / Derecha. Seleccione la línea de la flecha y de la Estilos de capa desplegable seleccionar Linea de flecha entonces Punteado. ¡Y eso es! Tenemos nuestra primera flecha punteada..
Dos cosas más aquí. Primero, adelante, y luego a las flechas restantes. Mantenga el nombre de la convención Flecha / Punteado / ... para mantener una organización bien organizada Simbolos desplegable. Hablando de convenciones y sintaxis de nombres, lo segundo que debe hacer es cambiar el nombre de cada una de las flechas de línea sólida original. los Simbolos desplegable va a ser desordenado si no lo hace.
¡Usa el complemento Rename It Sketch para hacerlo más suave para ti! Seleccionar Complementos> Renombrarlo> Buscar y reemplazar capas / Nombres de Artboard. O puede presionar el Control + Opción + Comando + R para que aparezca la ventana del plugin. Allí, escriba Arrow / Default o Arrow / S-Shape y sustitúyalo por Arrow / Solid / Default y Arrow / Solid / S-Shape y así sucesivamente. Asegúrese de que el alcance de búsqueda actual esté seleccionado para Página actual en lugar de Capa.
Lo último cuando se trata de flechas son los puntos de inicio y fin. En el primer tutorial te mostré cómo agregar diferentes ejemplos, como un esquema. Agregue tantos estilos como desee, luego, cuando haya terminado, no olvide incluir todos los puntos de inicio y finalización nuevos e increíbles en la guía de estilo..
Y con eso, hemos terminado de crear la guía de estilo.!
El propósito de este tutorial fue construir el original y enseñarte formas más asombrosas de usar Sketch. Al mismo tiempo, esto mostrará algunas formas prácticas de mejorar y empaquetar todos los archivos de Sketch para que sean más útiles para los miembros del equipo y los clientes..
