Instrucción: Desarrollo De Prototipos De Aplicaciones Con El Sketch Y Principle

Diseño de la comunidad Sketchapp preparó la traducción de las notas de un diseñador de Google joe toscano sobre cómo organizar el trabajo de creación de diseños en Sketch y en una aplicación para la creación de un prototipo Principle. Es posible que ya se han trabajado en Principle anteriormente y han conseguido su odiar, porque no claro de inmediato cómo crear en él modular organizado por el proceso de trabajo. Seguramente no entendían por qué algunas capas de fantasmas vuelan allí, donde usted nunca hace. Esta anotación cambiará su proceso normal de creación de prototipos en Principle mejor. La clave de la agradable experiencia de trabajo en Principle es la organización de.

Y empieza con su archivo Sketch. Si no se han organizado correctamente antes de la sincronización Sketch de archivo con la aplicación, espere a la pesadilla de un lugar de trabajo normal. Sobre la importancia de la organización y la modularidad de archivos de diseño se ha escrito mucho, es mucho más rápido y más cómodo trabajando. Yo uso una organización muy parecida a la de entonces, como ordenan su trabajo de los programadores. Anteriormente he estudiado la sintaxis de Block Element Modifier (BEM), cuando antes se ocupaba de la programación, y este enfoque ha cambiado mucho mi trabajo.

La sintaxis de BEM (Bloque, un elemento modificador) se puede dividir en simples elementos: Nombre-_-_ modificador. Si en ruso, es la siguiente: Si usted mira en mis y los grupos o capas, verás que están siguiendo esta sintaxis, por ejemplo: Un grupo de capas también se denominan de esta manera:

Descargar Sketch-el archivo de referencia. Si usted lo desea, puede utilizar el Principle como habría utilizado InVision o cualquier otro similar producto mediante la implementación de de interacción basado en el estado. No es la mejor forma de utilizar el Principle, pero si es necesario hacer un prototipo rápido, es la versión más exitosa. Esto puede lograrse simplemente mediante la exportación de cada estado de la interfaz en PNG y agregando capas invisibles encima de sus representaciones, para que funcionen como un hot-spots. El momento más importante — usted no cambia la opacidad de la capa a cero, se denomina la opacidad a cero en el selector de colores.

Si usted apague la opacidad a cero en la configuración, el botón se convertirá en invisible y . Después de que todos los hot-spots ocultos, sólo es necesario conectar las pantallas, y resultar prototipo. Descargar básico archivo PDF Principle de referencia. La creación de más detallado y complejo de prototipo Principle puede ser más laborioso. Y aquí viene a la ayuda de la correcta división y neyming.

Usted ya ha visto y sin mí, que el estado, que son visibles en mi archivo Sketch, no coinciden con los que hay en mi archivo Principle. Y en esto tiene razón, en la animación. En el Principle de la animación se basa en el estado. Es decir, los grupos y las capas se mueven en función de su estado en cada . En el ejemplo de la capa de demo-shape no hay radio bordes, sombreado de tonos hex #FA5367 y las coordenadas (70, 500) en el estado 1 de la animación (primera imagen).

En State 2 ya viene con el radio de las fronteras de los 70, el sombreado, hex #2B96FE y las coordenadas (190, 270) en la pantalla. Entre los estados, esto se verá así. Si tienes resultan antiestéticos de la animación, probablemente, la razón de que los grupos y capas no han sido nombrados correctamente antes de la importación. Principle es una herramienta para la creación de un prototipo basado en el estado que utiliza el movimiento lineal para el movimiento de grupos y capas sobre la base de sus nombres, que haces, seleccionados de los atributos de cada estado, así como la configuración de un controlador o una animación para cada interacción. Cuando se importa sin identificar grupos o segmentos de la Principle hará estos nombres por usted.

Esta automatización conduce a conflictos de nombres de grupos o capas entre estados, que lleva a la con las animaciones. Para la animación eran suaves, hay que citar los nombres de los grupos o capas en plena conformidad, así como asegurarse de que estén disponibles en cada pantalla, con el que interactúa — incluido el estado, donde estos grupos o capas deben ser invisibles. Eso es lo que realmente está ocurriendo bajo el capó de prototipos Principle y por qué usted verá un tanto diferentes capas, no en o ventana de trabajo en mis archivos de Principle. Como se puede ver, el teclado está disponible para cada estado de la aplicación, pero se muestra en la ventana de trabajo sólo si es necesario, como el botón Log Out.

Si el teclado y el botón no estarían disponibles en cada estado, el programa no reconoce su transición, y que sería aparecían mucho más rápido — por las sensaciones sería demasiado de repente o se vea . Descargar un archivo en PDF en el enlace. Descargar animado un archivo en PDF en el enlace. Después de que usted entienda los problemas teóricos y prácticos de la base, como todo se mueve en Principle, el programa se vuelve más parecida a un juego de la fractura de las sensaciones. Hay impresionantes prototipos y animación Principle, que se ven realmente bien, que no requieren de un gran esfuerzo en el desarrollo de.

Todos ellos se basan en el lineal y rotatorio en movimiento, así como el informe exfoliacin de gráficos. Uno de los más poderosos aspectos de Principle es la posibilidad de instalar el vídeo, de lo cual hasta ahora no permiten muchas otras herramientas de creación de prototipos. Esta opción mostrará su prototipo en un nuevo nivel, especialmente si su producto se centra en el contenido de vídeo. Descargar el origen de la referencia.

Aunque Principle no es un programa en el cual por lo general crean diseños, usted puede utilizar fuentes vectoriales creados en otros programas, para crear hermosos efectos con la ayuda de un pequeño de la fractura del sistema. En este demo vectoriales de código fuente se mueven en la pantalla de forma lineal. Este efecto ha sido posible gracias a la creativa animación y .

Descargar el origen de la referencia. La sensación de no linealidad en el movimiento se logra mediante el creativo de la estratificación. No lineales de las fuentes, por sí mismos, se crean en los editores vectoriales y, a continuación, se importan en el Principle de animación. Ver ejemplos de los trabajos en Dribbble-cuenta Jardson Almeida. Si se abre el codigo fuente de este archivo, verás que todo el movimiento en este prototipo se ha creado con una lineal y giratoria, la animación y la ilusión de la no linealidad garantizada creativo de estratos.

Descargar el codigo fuente de referencia. Al igual que varios de los últimos animaciones, esta animación se ve mucho más compleja de lo que es en realidad. Más ejemplos en el Dribble-cuenta Mario Šimić. Si abres la fuente y con él, usted verá que la animación es increíblemente creativo, fruto de su percepción a través de una combinación de montaje y asincrónicas lineales de los movimientos.

Descargar el origen de la referencia. El movimiento, en el que muchos de los fragmentos se mueven con velocidades diferentes o en diferentes direcciones en la base de las interacciones de un usuario con una capa o un grupo generalmente se conoce como “Controlador”. Los controladores son un poco más profundo que la simple animación entre los estados, pero no son tan difíciles de montar, como parece. Usted puede familiarizarse con los controladores más información en la documentación Principle, y también en un excelente video de la lección.

Descargar el origen de la referencia. Espero que ahora este programa le parece mucho más accesible. Después de un poco de práctica con el Principle va creciendo rápidamente en . Él realmente se centra en las más importantes bases de la. La inspiración para ver el repositorio Principle.

Envíe sus columnas y los contenedores de los casos en interface@vc.ru.

Leave a Reply