Diseño de aplicaciones móviles: Interacciones y animaciones simples para cada aplicación

1. Introducción: Si quieres innovar algo nuevo en tu vida, debería tomar esto. Yo soy Johny Vino. Soy Interaction Designer, y Motion Designer, y Prototype and Visual Designer. A veces, mis diseños son poco convencionales, nuevos, y totalmente especializados en hacer diseño humanizado. actualidad, vamos a aprender cómo podemos crear la idea en tu cabeza al prototipo móvil real en vivo, cual está lleno de muchas emociones, personalidad, y una identidad única en el diseño. Para tomar esta clase, no necesitas ser realmente diseñador de UX/UI ahora mismo. Puedes ser cualquiera como un diseñador gráfico, diseñador visual o ingenieros, o simplemente tienes una idea en tu mente y quieres convertir esa idea en producto vivo. hoy, voy a crear una app para adolescentes. Te voy a mostrar cuál es la forma en que está diseñado actualmente, y cómo podemos mejorarlo. Vamos a mostrar cómo vamos a mejorar el diseño visual de la app. tercer lugar, en realidad vamos a hacer prototipos usando principios para asegurarnos de cómo podemos agregar este micro elemento de interacción y personalidad a la app. Puedes seguir adelante descargando un archivo de boceto en este curso de diseño. También puedes aplicar todo el pensamiento que voy a enseñar, y aplicar esos principios también en tus propias ideas como proyecto. Vine a diseñar porque se ve hermoso y hago algo hermoso, pero quiero quedarme en el diseño porque puedo hacer grandes cambios en el mundo. La interacción es solo un medio realmente genial. A mí me emociona ver lo que se te va a llegar. Empecemos. 2. Humanización del diseño de aplicaciones: Hoy clase, vamos a cubrir cómo podemos agregar personalidad y emoción en el diseño de aplicaciones. Es súper importante en el diseño de aplicaciones hoy en día porque el diseño de aplicaciones está cambiando la vida de todos, cómo interactúan los con el mundo. Lo más importante en la aplicación es todos los días, hay cientos de apps que la gente está lanzando en App Store. App de mayor éxito, siempre tenemos una pregunta de cómo esta app es tan exitosa porque agregaron este nivel de emoción y sentimiento a la app. Por lo que hoy, vamos a cubrir eso. ¿ Cómo se puede hacer ese sentimiento en cualquier app que esté haciendo? ¿ Cómo se puede agregar la personalidad de pequeñas micro-interacciones tocando la app? Porque soy de un pequeño pueblo de comunidad de gente pequeña, todo sucede mayormente humano a la comunicación humana como pedir comida, como publicar un mensaje, todo es tan humano. Pero cuando paso a un mundo tecnológico, todo es tan digital. Entonces tengo una pasión de cómo se puede llevar ese elemento humano que tuve en mi pasado al mundo digital. Para que de vuelta en mi lugar o personas en un pueblo o en cualquier lugar del mundo puedan usar tu app, no solo tener gente en una Ciudad tecnológica. Empecé a hacer diseño por mi cuenta, pero no tenía idea por dónde empezar porque en mi zona no hay escuelas de diseño. Entonces empecé a hacer apps, todas las ideas. Todos los días recibía algunas ideas así que empecé a convertir mis ideas en prototipo real. He publicado en línea todos los días por como pase dos años. Mucha gente dijo: “Oh, esto se ve único. Tus ideas son tan únicas”. Yo digo: “Porque no aprendo diseño, porque no conozco reglas. Simplemente hago lo que pienso”. Entonces como estás empezando como principiante, ya estás fuera de la caja. No te asustes. Ya estás lejos bien que la gente realmente experimentó porque todas las ideas que vas a venir ahora mismo van a ser súper únicas. Entonces solo ten confianza y aprende de esta clase. ¿ Cómo puede la idea que tienes traerla al mundo y compartir con el mundo regularmente de lo que estás haciendo. Vamos a aprender esos creando un verdadero recorrido del producto de la idea que tienes en este momento y cómo podemos crear eso en un camino-through. Walk-through es súper importante para cualquier proyecto porque cuando le dices una idea a alguien, será como, eso es genial. Pero no pueden entender cómo se siente en realidad cuando lo están usando. Entonces al limpiar el caminar a través, vas a darle a alguien una acción real en el móvil donde puedan simplemente hacer clic y sentir, esto se siente muy bien, me encantaría tener esta app. La mayoría de las veces cuando estarás trabajando en los diferentes stakeholders como ingenieros, como gerentes, equipo de marketing no tienen idea de qué diseños estás haciendo. Sólo pueden tomar decisiones cuando realmente ven cuando algo se mueve. Por ejemplo, hay una diferencia entre un guión gráfico y una película real. Cuando ves una película, te da la sensación. No es sólo como un concepto. Crear una aplicación en producto real toma como seis meses, pero caminar a través puedes hacerlo en un día. Entonces es por eso que caminar a través es súper importante para comunicar qué sentimiento estás tratando de comunicar para que la gente realmente pueda tomar una decisión basada en eso. Durante esta clase, vamos a crear una aplicación de dieta especialmente para adolescentes y niños. Estaremos partiendo de un archivo básico de boceto que voy a proporcionar. Se puede descargar de nuestros recursos. A partir de eso, les voy a mostrar cómo podemos mejorar eso a siguiente nivel de diseño visual. Entonces vamos a probar ese producto usando InVision, luego te voy a mostrar cómo puedes agregar elemento de micro-interacción de aha momento en la app. Entonces, por fin, te voy a enseñar cómo puedes comunicar tus ideas a un cliente, al mundo o a ingenieros. Mi pensamiento fue, ¿cómo podemos sacar rápidamente esta información de nuestra mente y convertir esa idea en producto vivo? Por lo que se me ocurre esta idea del rápido proceso de dos horas de llegar a la idea, crear y diseñar y hacer al prototipo. Estaremos usando sketch que es para el diseño de interfaz de usuario en realidad, y también vamos a usar InVision para probar nuestro prototipo. Visualmente, cómo es la jerarquía de fuentes, qué anfitrión funcionan los colores, y después de eso vamos a usar el software de principio donde creamos animación, micro interacción y hacemos que las cosas realmente se muevan. Por último, te voy a enseñar algunos consejos y trucos en Keynote. Cómo realmente puedes poner todos tus videos en Keynote para presentarlos a la gente. Todos estos softwares que mencioné en este momento están disponibles para prueba gratuita por un mes o 15 días. Para que no tengas que preocuparte. Sólo tienes que ir a esa página web y descargar los softwares. Entonces, el siguiente paso, vamos a ver cómo se ven realmente las grandes aplicaciones. 3. Grandes aplicaciones IRL: En esta clase, veamos cuáles son las grandes apps que usamos todos los días en nuestra vida y qué las hace realmente geniales, y qué les da una sensación de experiencia memorable en aplicaciones. Entonces, solo empecemos por solo mirar cuáles son las características de iPhone que tenemos en este momento que literalmente todos los días usamos. Por ejemplo, el Centro de Control donde realizamos cambios de brillo, sobre cambios y todo. Simplemente deslicemos hacia abajo, esa interacción misma, sientes la diferencia. Simplemente se deslizó hacia abajo, es tan natural. No es solo que desde que estoy grabando la pantalla, en realidad me está mostrando un punto de como en realidad estoy grabando la pantalla. Si mejoramos el brillo, puedes ver cómo están cambiando el brillo ahí. De hecho, algo así como sonido, en realidad lo están silenciando. Hay tantos detalles involucrados en ese sonido. Súper interesante uno es como el toque, que está aquí. En realidad se puede ver como el toque está dando por barra por barra y mi linterna está aumentando. Entonces todas estas cosas que capturan del mundo real y ponen esa experiencia en el móvil, y por eso todo el mundo siente que el iPhone es súper fácil de usar porque usan esta diminuta experiencia humana que lo hacen indirectamente que la gente no se da cuenta. Echemos un vistazo a otra app. Este año se presentaron como premio a la Mejor App de Apple, solo una sencilla aplicación de lápiz. El cool que hicieron es esta barra, donde te puede gustar cambiar rápidamente el nip. A ver, así. En el pasado, cuando estábamos en los días escolares, realidad cambiábamos las pinzas en nuestro teléfono como en un lápiz. Por lo que usan esto como cambiar el lápiz como una experiencia humana en detalles como reales, cuando ponen tanto esfuerzo en. Haciendo estos cambios de color. Entonces esto es lo que digo a bordo como esta app se siente genial y no entendemos por qué se siente genial, en realidad es que involucran experiencia humana que teníamos antes. Echemos un vistazo a otra app que hice y publiqué en App Store. Entonces solo una simple calculadora de IMC que puedes revisar tu IMC, donde puedes simplemente deslizar rápidamente hacia abajo en lugar de dar como un menú desplegable donde puedes simplemente “Oh, ¿cuál es la altura de mi peso?” Simplemente puedes deslizar hacia abajo. Es súper interesante y puedes ingresar el peso o género que quieras. Añadí como un pequeño toque de como comer como jugamos a este juego. Entonces me gusta en la pared ese principio, me desplaza hacia abajo y así en realidad te doy el resultado. A pesar de que, esto como una pestaña realmente como una ayuda, no es aburrido como cualquiera puede usarlo y está bien usarlo. Por último, podemos mirar otra app que realmente admiro, es como una página de tiempo. Por lo que acabo de descargarlo ahora mismo. Así que me está dando un, oh, encantado de conocerte. Las palabras que están usando, es todavía se siente como un humano que te habla. Entonces solo están preguntando qué colores quieres, qué colores te gustan. Puedes escoger el color que quieras. Eso es lo que he hecho. Puedes ver todo tu calendario, solo se ve bien. No se siente como un calendario ordinario, se siente súper inteligente. Una característica realmente genial que me gusta de esta app es como cómo están haciendo un escenario que es súper interesante. Hagamos clic en las alertas inteligentes. Al igual que si hacemos clic en las lluvias, en realidad están mostrando como alertas, quieres una notificación cuando está lloviendo. Si queremos como cuál es el momento para salir y qué tipo de auto estás usando, todo esto son como elementos humanos como vas a caminar o te vas a llevar un auto. Entonces estos son como elementos realmente diminutos, pero estos diminutos elementos hacen de esta app súper única, nadie puede hacer esto y cualquiera puede recordar claramente esto es de esa app lapse de tiempo. Entonces eso es lo que vamos a ver en nuestra clase hoy, cómo puedes crear app como esta. Estas apps no son solo como darte la funcionalidad, estas apps son memorables porque es hermosa, es impresionante, y al mismo tiempo, es atemporal. Eso es lo que realmente importa mientras estás haciendo un diseño. ¿ Estás haciendo un diseño que es de moda o atemporal? Ahora, hemos visto algún ejemplo de todas las grandes aplicaciones se hacen en un producto en vivo. Empecemos a usar un boceto y creemos nuestro propio diseño. 4. Preparación de tu concepto: Por lo que el primer paso para hacer una gran apps no es hacer una interacción compleja. El primer paso es que necesitas aprender lo básico. esto lo llamo como una gramática del inglés. Si quieres hablar inglés, necesitas aprender los conceptos básicos de la gramática, entonces solo tú puedes romper y crear algo nuevo. Si no sigues esas reglas, tardará mucho tiempo en configurar el diseño básico. Pero si conoces las reglas, puedes empezar y ser creativo. Empresas como Google y Apple, pronto tienen tantos dispositivos y también [inaudibles]. Ya crearon todas estas reglas básicas. ¿ Cuál es una talla mínima que necesitas usar? ¿ Qué colores son realmente accesibles para todos? Para diferentes países, ¿qué colores deberían realmente? ¿ Cuál es el elemento de navegación que necesitas también? Todos estos son accesibles si vas a como Material Design, vas a encontrar todos estos recursos y está disponible de forma gratuita y también te proporcionan muchos ejemplos como lo que puedes hacer, lo que no puedes hacer. Entonces primero empieza por ahí. Entonces, puedes aplicar esos en tu diseño. Entonces empecemos a hacer en nuestra propia idea. Ayer estaba hablando con mi hermana. Dijo: “Si entrenas a los niños a temprana edad para hacer el fitness, habrá más saludable en el futuro”. Así que pensé en hacer un concepto de diseño de interacción que aliente a los niños a interactuar realmente y hacer fitness. Empecemos por anotar cuáles son las características o como las cosas que necesitamos hacer para dar recomendación de ejercicio a los niños. Entonces las cosas básicas que necesitamos saber es como qué género son. Posteriormente, necesitamos estatura, necesitamos en qué peso se encuentran actualmente, y también podemos preguntarles, ¿cuál es su peso deseado? Podemos hacer algunas preguntas como, ¿cuáles son el estilo de vida? ¿ Cuáles son los alimentos que comen? Por último, muestra como una pantalla que está procesando toda la información y luego mostrando tu pantalla de inicio con el resultado, estos son ejercicios recomendados para ti. Por lo que necesitas anotar básicamente todas las características rápidamente. Sea lo que sea que te esté viniendo a la mente o puedes hablar con tu amigo o con los usuarios a los que estás apuntando, puedes preguntarle a los niños qué información necesitan y puedes llenar toda esta información en un documento para empezar. A veces, inicialmente, cuando empecé a diseñar, me quedé atascado con necesito capturar todas las características y armé una cosa entera, pero lo vas a hacer más o menos. ¿ Cuál es lo principal que necesitamos? Por lo general, escoge cinco cosas principales que necesitamos para esta app o cuatro cosas principales. Para que su interacción sea más enfocada y simple en lugar de reunir toda la información al primer tiempo. Entonces ahora empecemos a traer en realidad toda la velocidad de bocetos o las características que hicimos aquí. Aplicación Sketches que te ayuda a visualizar rápidamente tu diseño. Es súper sencillo de usar. Cualquiera como un gran nerd, o cualquiera puede empezar a usar la app. Entonces ya estás hecho un archivo básico o mostrándote cuáles son las cosas que discutimos, necesitamos un género, necesitamos una estatura, y necesitamos un peso, y necesitamos un peso deseado. Quieren lograr por ejemplo si están en 80 vueltas, quieren ir a 60 vueltas. Entonces estas son las cosas básicas de información que necesitamos. Después de que ingresaron toda esta información, los vamos a recomendar con los resultados. Cometí mucho error intencional en este específico [inaudible] porque esas son las cosas que hace la mayoría de los principiantes. Cuando soy principiante, cometí todos los errores. Entonces solo quiero hacerte saber que estos errores son súper comunes y puedes evitar fácilmente esas cosas. Tan súper común error que todo el mundo hace. No es gran cosa, pero si trabajas en una empresa y estás presentando un diseño, y me gustaría un error ortográfico de hacer cosas. Es súper simple, pero es realmente grande. Ese es el primero que yo diría. Entonces una segunda diría conocer una tipografía como un estilo jerárquico. Eso es súper importante. Por ejemplo, la pantalla actual. Se ven todas las pantallas, casi se ven iguales. Entonces no hay una jerarquía adecuada, cuál es primero, que es más importante. Entonces voy a limpiar rápidamente esta cosa. Por lo que siempre como dije aquí antes de algún sitio web como pautas humano-computadora como Apple, hicieron una clara pauta de lo que es tamaño de encabezado que puedes usar, qué es un tamaño de párrafo que puedes usar. Por ejemplo, 16 es super minúsculo para los encabezamientos. Por lo que puedes usar 34 o como si quieres tener 32, esos son los tamaños que muestra inmediatamente esto es rumbo. Entonces el nivel secundario es como un párrafo. Ahora, me refería a introducir un estilos de fuente diferentes como, por ejemplo, este un encabezamiento y este subtexto de figura. Pero diferenciar realmente claramente. Si te miran como Google Material Design dado es realmente intencionalmente, realmente bueno. Es como separar este tipo de encabezados diminutos, usan tapa completa. Por lo que puedes seleccionar todas las capas e ir Texto y hay una función a llamar como Transformación. Si hacemos click en mayúsculas, se hizo. Por lo que ahora puedes ver rápidamente que hay una clara diferenciación entre el encabezado y la opción que deseas. El tercer error común que mucha gente hace. Al igual que vas de inmediato encontrar agujeros como un diseñador principiante o alguien como por conveniencia es como un espaciado. Por ejemplo 35, tengo 35 espaciado aquí y tengo como un espacio 13 aquí y como un 43. Ese es un truco que es súper fácil de aprender. Es como sistema de cuadrícula ocho. Entonces, por ejemplo, cuando se desea mantener un espaciado entre elemento, se pueden colocar elementos aleatoriamente. Vas a dar como múltiplos de ocho. Por ejemplo quiero que esto sea como 16 y que esto sea como 16. Entonces vas a hacer una constante como espaciado, y tercera cosa es el dimensionamiento. Por ejemplo, muchos diseñadores cuando empezamos a diseñar, no tenemos idea de como cuál es tamaño de este botón para ser y simplemente dibujamos un botón. El tamaño mínimo para un botón es como 44 pixel. Entonces actualmente, la altura está diciendo 39, pero eso está bastante bien pero eso es en realidad pequeño cuando realmente estás usando una huella de dedo pulgar. En realidad no se puede hacer clic en esos botones. Por lo que tienes que asegurarte de que tu mínimo sea de 44 altura. Por lo que solía usar como 48 como tamaño mínimo para que ese botón y ser como súper fácil de hacer click, y como dije, cuando estás diseñando estás cuidando a alguien, cuando solo están caminando por la carretera y quieren llenar el formulario, tienes para asegurarse de que se pueda hacer clic fácilmente. Si es súper diminuto, pueden hacer click. Rápidamente vamos a caminar como, como dije, podemos usar el mismo estilo de encabezamiento aquí. Copia rápidamente el estilo y pega aquí. Entonces cuando estés alineando asegúrate de que estas fuentes también estén alineadas en ángulo recto. El espaciado es claramente correcto. Es ocho sistema múltiple y fuera. Entonces también hay una pregunta como cuál es el espacio exterior, hay que dar. Por lo general tienes el tamaño mínimo aquí para dar ambos lados como extensión extinta. Lo último que quiero decir es como colores. Por lo que me encanta jugar colores. Simplemente puedes usar colores aleatorios porque los colores significan cosas diferentes para las personas. Entonces para este, ni siquiera necesito colores porque siempre que vas a usar colores, estás dando atención a esa parte específica. Quieres que le den click, y actualmente no quiero que nadie haga click en los 10 minutos. Entonces lo vas a hacer solo un color que no es tan importante y es un nivel secundario de color, por eso usé gris. Como has visto como todos los colores que uso no es negro puro. Yo uso como un campo azulado. Esto parecía negro. Si uso negro azulado, realidad es más conveniente para los ojos. Por lo que estos son como pequeños secretos como muchas aplicaciones aplican en el producto. Se puede colorear el tinte. Voy a compartir estos archivos con ustedes. Estarán en tu carpeta de recursos. Puedes descargar y puedes jugar y asegurarte de que todas las fuentes SSR. El espaciado, las caras de fuente que mantengas están perfectamente alineadas. La siguiente lección te voy a enseñar que esta clase se trata de todo después de que hayas aprendido lo básico, siguiente nivel es como cómo podemos hacerlo más personal como elemento humano en toda la aplicación. 5. Prueba del diseño: Entonces aplicamos todas las reglas básicas. Ahora, vamos a revisar rápidamente cómo está funcionando la jerarquía de fuentes, el color está funcionando en un dispositivo, o los botones que se están haciendo pueden hacer clic o no. Por lo que podemos hacer eso rápidamente usando InVision. Por lo que tengo un InVision integrado usando app llamada Craft. Se puede descargar de forma gratuita. Al descargar, habrá opción llamada subir tu diseño. Solo necesitas seleccionar toda la opción que necesitas hacer, necesitas ingresar el nombre. Si haces clic en publicar, habrá una reproducción de sonido, y eso es todo. Ahora, todos tus diseños que hiciste en este momento, los wireframes que hiciste, llegará al móvil. Necesitas revisar siempre tu dispositivo. Debido a que algunas personas hacen algunos usuarios probando lo que piensan pero están haciendo clic hacer algunas preguntas como, “¿Podrías seleccionar esta opción? ¿Qué opinas?” Para que puedas conocer rápidamente todos estos detalles mostrando en el dispositivo. Entonces cómo tienes que trabajar o encontraste problemas como el tiempo y los colores son súper diminutos. Entonces lo que puedes hacer rápidamente es, puedes volver al boceto, y cambiar rápidamente la fuente. Entonces, ya lo sabes usar 10. Por lo que quiero mencionar rápidamente una punta rápida arriba estás para usar una fuente, un mínimo de 14. Tienes que empezar con 14, luego 16, 18, 24, 36. Esas son la jerarquía básica de la fuente que necesitas usar. Entonces voy a seguir adelante y poner 14 aquí. Aquí también, voy a aplicar los mismos estilos. Entonces solo voy a hacer clic derecho y copiar ese estilo que voy a pegar aquí. Cuando hacemos icono, no hagas icono en formas aleatorias. Si quieres hacer icono, asegúrate de que la altura sea como 24. Eso también es para el estilo de íconos, que está haciendo un afilado como 24, 48, 96. Esos son los tamaños que suelen usar. Ahora, usan un tamaño de fuente aquí. Ya que es un alambrón, no voy a mantener ese espacio antes, pero vas a aplicar todo el espaciado que te enseñé antes. Entonces ahora, hicimos todos los cambios. Podemos dar click rápidamente en esta Mesa de trabajo y dar click en publicar. Eso es todo. Nuevamente, consiguió un sonido. Si vuelve a refrescar la pantalla, está aquí. Ahora, rápidamente hicimos todos los cambios. El tipo de letra es bastante grande, y puedo ver los iconos. Entonces así es como vas a iterar constantemente viendo el móvil es súper importante. Porque la mayoría de las veces cuando empecemos como diseño, estaremos trabajando en un gran monitor o laptop. Entonces si vas más allá a revisar en el móvil, porque ahí es donde los usuarios van a usar un producto. Entonces ahora, puede que tengas una pregunta que cuántas veces tengo que iterar. Si sigues iterando, tienes que iterar durante todo el año. Por lo que vas a parar en un momento y realmente lanzar el producto. Entonces, solo habrá muchos usuarios estarán usando tu producto y darán reseñas o comentarios. Trata de iterar como cinco veces. No es un número, pero cinco veces hacen una iteración realmente grande. Entonces, hay que pasar al siguiente. El siguiente paso es el paso más importante que les voy a enseñar es, cómo podemos humanizar eso. ¿ Cómo podemos hacer esto más atractivo que es cómo lo usaste. Específicamente, iteramos para ambos para niños. Entonces, ¿cómo podemos personalizar el diseño para ellos? 6. Adición de personalidad: Ahora, hagamos las cosas divertidas. Hemos hecho todas las cosas básicas como el espaciado. Ahora, vamos a crear ese elemento humano, y las emociones, y los sentimientos en la app. Hagamos una lluvia de ideas sobre cómo podemos pensar realmente en estas ideas. Porque pensar es súper importante, voy a enseñar cómo puedes explorar y pensar este tipo de elemento humano en tu app. Entonces voy a bosquejar diferentes ideas. ¿ Cuáles son las diferentes formas en que podemos reunir esta información aparte de simplemente como en las formas? Al igual, justo en la altura. Entonces inicialmente lo que hice es, literalmente busqué en Google algunos de los instrumentos de medición de altura del niño, de medición de peso. Entonces conseguí esta inspiración aquí. Ahí hay un niño pequeño que están parados cerca una medida de altura y éste le está mostrando a una persona que están poniendo, como recuerdas en los viejos tiempos, te ponen una balanza en la cabeza para medir o tu altura en tu casa. Descargué un montón de inspiración de Google. Entonces lo que hice es, solo lluvia de ideas como, vale, podemos tener un deslizador, que rápidamente aparece arriba y abajo, puedes deslizarte para ingresar el valor, o como deslizador izquierdo y derecho para dar unos valores. Entonces pensé, ¿por qué podemos usar toda la pantalla para un valor después pongo la báscula a la derecha y los detalles a la izquierda. Por lo que finalmente, dibujo este personaje es literalmente como tomó de combinado este perno en mayores que tomé, como si hubiera una escala en la cabeza de algún tipo y hay unas marcas en la pared. Por lo que puse las marcas en la pared a la derecha y hay un niño pequeño con una báscula en la cabeza. Para que puedas traer un montón de ideas diferentes, pero la forma en que se había dibujado es solo pensar, cuáles son la forma diferente e innovadora en la que puedes mostrar esta información y simplemente más interesante para el público objetivo específico. Entonces así es como mido la altura y el peso diría que sigues el mismo principio. Simplemente Google algunas de las escalas de peso que están usando los niños. Encontré esta fascinante báscula de peso redondo al estilo antiguo. Ahora bien, aunque es tan digital esto es tan genial ver cómo se mueve. Por lo que tomé esa inspiración en una escala normal y también agregué una escala de peso. Pero los niños pueden tener un personaje. En realidad es como si aumentas el peso el personaje del niño crecerá y le gustará más pequeño. Por último, para la pantalla de inicio hice un pequeño tuck tal en bien, basado en todos tus datos tenemos estas recomendaciones para ti. Hagamos una pantalla final. Esto es todo lo que tienes para intercambiar ideas rápidamente y esbozarlas en un papel y mostrarlas a la gente. De acuerdo, estas son ideas diferentes que tengo y tú les pides que escojan qué idea es más interesante. Para que puedas tomar decisiones rápidamente en lugar de tomar todo en una pantalla porque lleva tiempo cuando haces algo en un boceto. Por lo que siempre mencioné hacer bocetos aparte de trabajar en una laptop porque cuando dibujas tu mente no está en un mundo digital, estás completamente fuera del mundo digital. Cuando realmente bosquejas usando tu mano, la forma en que funciona el cerebro es completamente diferente. Porque cuando estás en una computadora tratas de obtener mucha inspiración. Oh puedo usar esta app en lugar de [inaudible] pero cuando estás dibujando todo es de tu cerebro. Por lo que estás súper enfocado. Yo quiero dar un consejo que cuando estás dibujando, solo a nadie le importa cómo se ve visualmente. Simplemente estás mapeando la idea. Así que simplemente bosqueja rápidamente lo que sea que te venga a la mente y comprenderte a ti o a los diseñadores con los que estás trabajando. Entonces después de bosquejar todo, vamos a simplemente transformar todas las ideas que tenemos en un boceto. Arreglo las pantallas en base a cada paso. Si quieres hacer una caminata debes asegurarte de que todas tus tablas impares estén en estado diferente. Por ejemplo, sé sin animación lo que voy a hacer. Por ejemplo, si hago clic en masculino aquí va a estar aquí. Entonces si hago click en siguiente, va a haber altura y va a haber esta barra. Si deslizo esta barra, va a ser 169. Si hago clic a continuación, se va a pedir peso, y si cambio el peso, la forma de la persona va a cambiar. Por lo que tienes que asegurarte de que estás organizando toda tu animación en un tablero impar separado diferente para que sea fácil hacer la caminata. De lo contrario será realmente difícil para ti hacer un paseo. Puedes hacer todo en una sola pantalla aunque será súper duro. Por ejemplo, esto también sé que mi animación va a funcionar de esta manera. Voy a deslizar hacia abajo y se va a dar click en el jugador y de nuevo va a jugar toda la actividad. Por lo que todas y cada una de las cosas tenía que ser una capa específica separada para que sea súper simple para ti hacerlo en principio. Ahora todas las pantallas están listas, y estaré compartiendo el archivo de boceto también en la carpeta de recursos para que puedas descargar, y a partir de eso puedes seguir siguiéndome en cómo estoy importando todo el diseño en principio y realmente creando el camina-a través del que hablamos. ¿ Cómo se puede crear ese paseo a través del cual es más interesante para compartir? 7. Creación de transiciones sencillas: Ahora, veamos cómo podemos importar este diseño a Principio y empezar a hacer animación. En primer lugar me gustará tener números de mesa de trabajo, será súper útil. Por lo que estoy usando plug-in rápido llamado Sketch Number Artboard. Vamos allá y pinchamos en filas y tenemos un número de stile de uno a tres. Está bien. Entonces tienes como 11 pantallas ahora mismo. Por lo que sería súper fácil cuando estás importando todo a Principio por lo que supiste a qué pantalla te estás conectando a continuación. Abramos Principio. Yo uso principalmente Principio, es un software que te ayuda a crear prototipo realmente rápidamente. Una ventaja de usar principio es que puedes importar el archivo Principal al iPhone para que puedas hacer pruebas fácilmente. Se siente como un verdadero laboratorio cuando se exporta un archivo Principal. Entonces ahora estamos en Principio, lo que tenemos que hacer es solo dar click en importar y hay que seleccionar el documento. Este es el único documento que hemos seleccionado en este momento. Entonces ahora estoy usando sketch y voy a seleccionar 3x para que mi calidad de mi diseño sea realmente alta. Entonces voy a dar click en la página Importar. Por lo que va a renderizar toda la página que diseñes en un boceto en el Principio. Boom. Todas las pantallas están aquí escriben ahora. Entonces después de importar a principio, el paso básico que debes hacer y el truco mucha bigness o mucha gente que no usa animación no lo saben, solo necesitas seleccionar la mesa de trabajo, puedes seleccionar aquí o incluso puedes seleccionar aquí, no selecciones un rectángulo. Por ejemplo, si hago clic aquí, es seleccionar un rectángulo. Deberías seleccionar la mesa de trabajo, y vas a dar click aquí y hacer clic en Tab. Vas a hacer repetidamente por todas las mesas de trabajo. Entonces ahora me conecté, si ves en la parte superior, es una línea de tiempo. El conteo en la parte superior habrá una pequeña ventana que viene abajo, se llama línea de tiempo. Ahora no vamos a tocar eso pero puedes ver que todas las flechas están conectadas. Significa que si haces clic en esto, irá a aquí. Si haces clic en esto, pasará a la siguiente. Por lo que acabamos de hacer un prototipo click-through. Solo necesito probar eso si haces clic aquí, se va aquí. Se va por aquí y sólo estoy dando click. Solo estoy haciendo clic y las animaciones están ocurriendo automáticamente. Entonces el problema aquí en este momento es Principi's basado en capas. Por ejemplo, si hago clic aquí, esta ronda negra va allá porque estos ambos tienen un mismo nombre. Entonces eso es como la animación automática pero el único problema aquí es que a veces los nombres no se mencionan correctamente. Entonces las cosas que no queremos, se empiezan a animar, algunas cosas que ni siquiera queremos como por ejemplo esta. Es aleatoriamente animado. Ahí es donde viene el truco. Necesitas asegurarte de que nada esté animando aleatoriamente. Entonces el truco es que vas a copiar toda esta capa. Tienes que ir a la segunda mesa de trabajo y cortar todo, comando X y comando V, y comando X y comando V. Lo que realmente hará es renombrar todos los nombres, recoger automáticamente cortar y pegar. Entonces, por ejemplo, si hago clic ahora, no hay animación porque no hay un nombre común porque Principio le cambió el nombre al cortar y pegar. Vamos a intentarlo aquí. Ves, hay algo de animación ocurriendo. Es porque tal vez el vestido de esta chica es similar al nombre del vestido de chicos. Mira, ella tiene un camino tres, camino tres, y él tiene el camino tres como vestido. Entonces lo que literalmente vas a hacer es, de nuevo, vas a cortar toda la capa y pegar aquí y cortar y pegar aquí. Entonces ahora si haces clic a través, no hay animación sucediendo. A veces pensamos como, oh, ¿por qué no usar solo animación automática? Pero la auto animación que no puedes controlar. Como ya has visto anteriormente, el auto animate se mueve aleatoriamente. Entonces, cuando haces auto animate, no puedes controlarlo porque necesitas controlar qué animar, que no se puede animar. Entonces solo tú puedes crear tu diseño, porque la misión no va a hacer diseño para ti, vas a hacer la animación que quieras. Tan rápido solo copia pega todas estas cosas para asegurarte de que nada es auto animando. Entonces te voy a enseñar qué otras cosas podemos hacer para que sea realmente divertido, no solo como si hago click aquí va a ir allá. Entonces para hacerlo más suave, lo que voy a hacer rápidamente es que voy a copiar pegar estos grupos. Por lo que seleccioné estos dos grupos. Voy a copiarlo y pegarlo en una mesa de trabajo anterior, y voy a moverlo un poco al lado derecho. Por lo que puedes hacer eso usando esta herramienta llamada la X. Cuando pases el cursor sobre la x, habrá como una flecha. Por lo que solo necesitas que te guste deslizar aquí. Entonces técnicamente lo que estamos significando es que esta ilustración va a venir de izquierda a derecha. Porque en esta pantalla, está a la derecha y en la pantalla anterior pones la ilustración a la izquierda. Por lo que sólo voy a mostrar la demo lo que está pasando. Si hago click aquí, mira, está viniendo de izquierda a derecha porque tenías la ilustración a la izquierda. Si mueves la ilustración hacia la derecha, va a venir de derecha. Entonces eso es todo. Si quieres como, oh, yo quiero de abajo, puedes usar y. no lo cambies manualmente, no te muevas hacia abajo manualmente. Necesitas asegurarte de que estás usando y, usando estas flechas, porque es súper perfecto. Entonces me mudé de abajo. Ahora voy a probarlo. Ves, viene de abajo. Entonces esos son realmente básicos, si sabes que puedes hacer cualquier cosa. Entonces lo voy a hacer literalmente de abajo pero no así hacia abajo. Pero aún así está bloqueando mi pantalla, así que lo que puedes hacer es en realidad simplemente bajar por debajo de esa capa para que no tenga el símbolo aquí. Para que incluso sea realmente más suave, lo que el truco es son los números. Por lo que a esto se le llama línea de tiempo. Al hacer clic en esta flecha, esto es como una línea de tiempo, muestra cero segundos, un segundo, dos segundos. Por lo que esta animación está sucediendo en, si hacemos click en esto, 0.3 milisegundos. Por lo que está sucediendo demasiado muy rápido. Para hacerlo más suave, el truco es que tienes que hacer clic en esta flecha. Esa es la flecha. Ya tengo mucha animación para mí, tengo una animación por defecto llamada 140. Para esta clase podemos crear una nueva animación. Por lo que hay que dar click en primavera. Para que puedas ver el guión, primavera es como demasiado encanto, si quieres lineal, Easy In, hay tantas opción por defecto. Pero te voy a enseñar mi secreto de cómo podemos hacerlo más suave. Entonces con el fin de reducir la tensión para que sienta esta forma, suelo hacer 100 o 120. Entonces esto es súper importante, si no haces eso, eso es lo que hace que ese toque final de primer nivel de hacerlo súper suave. Además, lo más importante que siempre debes hacer gráfico de animación. Si estás haciendo un prototipo, todos tienen que sentir la misma animación. No puedes ser como uno es super primavera, uno es super suave. Tienes que asegurarte de que toda la animación se vea igual. Entonces vas a aplicar lo mismo a aquí, 100. Si vas a usar el mismo tipo, en realidad puedes agregar esto. Si haces click en plus puedes añadir Skillshare. Por lo que agregué una capa para que no sea necesario cambiar una y otra vez este gráfico, se cambia automáticamente. Entonces cuando hago clic, mira, es súper suave. Por lo que estos son los pasos básicos de animación que debes hacer. Entonces voy a hacer que este tipo venga de derecha a izquierda porque el macho es de derecha a izquierda. Entonces voy a pegar aquí, y me voy a mover un poco aquí. Entonces como ves, no estoy tocando ningún número manualmente, solo necesitas una jugada con la flecha. Yo quiero que la opacidad, opacidad significa que el aislante sea cero. ¿ Ver? Yo solo quiero que la opacidad sea super cero. Entonces cuando va aquí, se convierte automáticamente en 100. Para que no tengas que preocuparte por lo que pasará aquí, solo tienes que preocuparte por qué opacidad quieres. Entonces lo hice a cero y cuando hago clic en macho, se siente como si viniera de cero a 100. Entonces ahora si seleccioné el género, está funcionando perfectamente. Como esperábamos, súper suave y se siente como una aplicación real. Ahora lo que vamos a hacer es seleccionar a este macho y podemos nombrarlo como varón porque sabemos que vamos a usar a esta persona a través de la app. Entonces podemos nombrar a esto como varón y voy a nombrar masculino para todas las mesas de trabajo. Por qué es súper importante es que se anima automáticamente. Ahora es animación automática va a funcionar de la manera que querías porque estás definiendo que es masculino, el nombre de la cosa. Entonces ahora ves la magia. Después de que termines el género, vas a dar click siguiente y ver al chico animar automáticamente porque nombraste igual a la capa. Este es masculino y la siguiente pantalla este nombre de grupo también es masculino. Si haces clic en eso, mira, no es suave pero puedes ver la diferencia. Es en realidad esta persona se está moviendo ahí, ahí, ahí. ¿ Ver? Aquí es donde automático es bueno porque lo nombramos correctamente, no está sucediendo automáticamente. 8. Personalización de las animaciones: Entonces ahora sabemos qué personaje necesitamos mantener a través de diferentes mesas de trabajo. Entonces ahora lo que quiero hacer es, seleccionamos el género, ahora vamos a seleccionar una altura. Altura, a lo que voy a seleccionar, cuando haga clic aquí, le queda claro al chico que crezca el pelo. Crecer significa que el cabello crezca un poco más alto. Entonces lo que está pasando aquí es cuando hago clic aquí, la persona está en una alineación diferente para que se mueva de izquierda a derecha, eso no es suave. Entonces lo que voy a hacer es que voy a eliminar aquí. Voy a copiar a esta persona, voy a pegar aquí al macho. Entonces ya ves, si voy de 65 a 69, nada cambia. Pero lo vamos a hacer manualmente. Entonces ahí es donde te voy a enseñar la opción de escala. Escala no es más que desarrollo hazlo como 1.1 y asegúrate de seleccionar ambas capas y alineadas a los fondos, no alineadas a la parte inferior. Asegúrate de que estos sean de la misma altura para que no se mueva tanto. Entonces ahora si me desliza a 699, mira, hay una transición suave. Terminamos la altura, ahora vamos a hacer el peso. Ahora es una parte un poco compleja porque el peso está en un estilo circular, no es como lineal, lineal es bastante fácil. Entonces lo que vamos a hacer es que tenemos que hacer esto manualmente. Eso es un poco molesto pero tienes que hacerlo manualmente. Por ejemplo 160, hay que asegurarse de que este 160, aquí también 160. Ver en la anterior, cambió a 162 porque le cambiamos el nombre. Ahora vamos a asegurarnos de que todos los nombres sean iguales. Elimina este número. ¿Por qué estamos teniendo el mismo número? Solo trato de decirte si tienes un mismo número, en realidad anima. Te mostraré ejemplo. Si pulsa aquí, este 160 en realidad se está moviendo de aquí a aquí. Veo aquí algo se mueve automáticamente, la cabeza de algún hombre. Entonces, siempre que eso suceda, solo copia a ese hombre porque ese hombre es el único problema. Voy a cortar, pegar, cortar, pegar. Por lo que ahora renombro el nombre correctamente, por ejemplo, 140. Yo lo voy a hacer 140. Entonces voy a renombrarlo rápidamente para asegurarme de que ambos tengan el mismo nombre, por ejemplo. Doscientos son en realidad 200 en la siguiente mesa de trabajo para que anime propiedad. Pero para algunos números, estamos introduciendo nuevos. Por ejemplo cuando te desplazas, en realidad estamos introduciendo 210 y 220. Entonces lo que vamos a hacer eso es que vamos a copiar esa capa y pegar aquí, y moverla hacia abajo para asegurarnos de que continúe con la ronda. Entonces ahora todo es perfecto. Si simplemente te deslizas, se siente como si estuviera deslizándose alrededor. Si entramos todo el peso, la altura, y lo que queremos ser un niño, no nosotros. Deja que el niño entre todos los detalles y el niño finalmente quiere al menos ejercicio de recompensa que puedan hacer. Entonces en lugar de aterrizar directamente a una pantalla de inicio, hazlo, puedes hacer algo interesante. Entonces voy a añadir una nueva mesa de trabajo en el medio. Para mostrar rápidamente, puedes dar click en insertar y voy a insertar mesa de trabajo. Haz rápidamente una animación rápida, voy a hacer un poco de animación aquí. Entonces voy a copiar todo esto al centro. Por lo que se convirtió en rectángulo porque tenías que ajustar el radio. Esto es otra cosa. El radio es lo que usas para hacer esto. Por lo que agregué esta capa adicionalmente para mostrar que realmente estamos calculando una tasa. Mostrar poco compromiso. Entonces lo que realmente voy a hacer aquí es que me quiero una capa otra aquí, como una barra de carga. Entonces, ¿cómo puedes hacer eso? Eso a veces nos llega una pregunta. Estamos haciendo algo y en medio, tenemos alguna idea nueva y estamos como, “¿Cómo puedo agregar eso?” Entonces ese es un truco que podemos hacer fácilmente. Entonces lo que voy a hacer es como ir aquí. Por ejemplo, voy a hacer una carga como una barra. Para que puedas dibujar un círculo. Entonces si ya conoces boceto o si eres como principiante, puedes aprender muchas de estas cosas diminutas como cómo podemos hacer una barra de carga en línea. En Skillshare, hay mucho por supuesto donde te enseñan a hacer las formas. No voy a hacer eso ahora pero estoy diciendo rápidamente si usas tijeras, puedes cortar esta forma para parecer una barra de carga. Voy a aumentar el ancho. Hasta que estés teniendo una forma suave, voy a añadir esta esquina redondeada. Voy a tener como un color blanco. Entonces, por ejemplo, tal vez te estés preguntando ¿qué está pasando en realidad? Por lo que ingresamos todos los datos y voy a dar click siguiente. Va a ser esta pantalla. Entonces ahora rompemos esa conexión y estamos conectando esta pantalla. Piensa como las mesas de trabajo, piensa como la animación de principio es simple, como si estuvieras arreglando un montón de cartas en la mesa y solo estás conectando tarjetas diferentes. De esta tarjeta, ve aquí. Eso es lo que comparé con como hacer películas, es como un storyboarding. Pero si conectas un guión gráfico, se convierte en una película. Ese es el secreto de principio. Ahora, hago clic aquí, vino y cargar no está pasando nada. Entonces ahí es donde este principio es súper inteligente. Es como si pudieras crear componentes. Componentes es llamada como crear animación dentro de la animación. Entonces lo que eso significa es así es como una barra de carga, quiero que sea como rotar. Entonces selecciono esa capa, creo componente, lo encuentras en la parte superior. Da clic ahí y voy a duplicar la mesa de trabajo. Por lo que vas a seleccionar la mesa de trabajo y dar clic en el comando D o como copiar, pegar para duplicar la mesa de trabajo. Entonces esta es la barra de carga. Cuando hago clic en esta mesa de trabajo, este lado para ir aquí, eso es todo. Pero no pasa nada de animación porque no hicimos nada. Lo que vamos a hacer es cuando haga clic en esto, se va a ir aquí. Además, va a cambiar el ángulo. Aquí hay otra funcionalidad. Por lo que ya te enseñé mucho; X Y, cambiando la opacidad, aumentando la escala, radio. Lo final, lo súper bonito es el ángulo. Entonces voy a hacer como ángulo de como 360, algo así. Cuando haga clic en esto, verás que ocurre como una rotación rápida. En lugar de 360, si rejilla 3,600 va a girar continuamente. Mira, es de rotación continua pero es súper rápido. Entonces en ese momento lo que puedes hacer es como, como dije, si quieres cambiar la duración del tiempo. Es como la edición de películas. Si vas aquí y hay una línea de tiempo y puedes ampliar la línea de tiempo. Yo solo estoy haciendo zoom pin aquí usando como una barra táctil Mac. Si alfilas zoom, esta vez se expandirá y se contraerá. En el tiempo en que me voy a ajustar a como tres segundos. Por lo que será un poco más lento. Entonces esta animación pasará más despacio, ¿ves? Un poco más lento. Por lo que podemos tenerlo ordenado. Entonces lo que es la cosa es como esta animación completa es la animación separada dentro de la mesa de trabajo. Cuando hago clic aquí, debería animar porque no se anima automáticamente. Ver, el problema es que la rotación está sucediendo sólo cuando se hace clic porque hice tap. Entonces lo que vas a hacer es en lugar de tocar, vas a eliminar esa flecha y hacer clic en esa mesa de trabajo. Ahí hay una función llamada auto. Empieza automáticamente a rotar, eso es todo. Entonces cuando haga clic aquí, y cuando vuelva a hacer clic en esto va a venir todo. Entonces si voy a la recomendación, recomendación quiero ser un poco más dramática cuando se acerca o cuando se hace. Entonces lo que realmente voy a hacer es que voy a seleccionar grupo todo para que pueda animarlo. Siempre que quieras hacer que todo se mueva, tienes que agruparlo. Algo triste cuando toco aquí, estos son para ser en lugar de venir directamente, quiero ser como izquierda y derecha como lo hacíamos antes. Yo quiero ser como venir de aquí, ¿ves? Yo quiero que la tarjeta sea como uno por uno en lugar de venir todo al mismo tiempo. Así funciona la física mundial. Al igual que si lanzas tres bolas. Entonces será como ir uno por uno basado en la velocidad. Entonces vas a usar esa física que aprendiste en una escuela, ahora estás acostumbrada. Entonces vas a usar esas cosas aquí. Entonces, ¿qué primera cosa viene primero? Entonces lo primero es venir primero. Segunda cosa quiero ser un poco de retraso de tiempo. Entonces me voy a mover. Esta vez eso es en realidad como el retraso. Esto va a empezar primero, esto va a empezar en segundo lugar. Este verde, este tipo de aquí se va a perder. Está pasando algo adicional que no necesitamos, ¿ves? Este grupo, ni siquiera sabemos quién es este. Por lo que vamos a simplemente dar clic en él y eliminar la animación. Haga clic. Ver la suavidad de la cosa. Por lo que se va a llegar con el prototipo súper rápido y hacer clic en macho, siguiente, altura, y peso y decidir peso y se está cargando, y está dando otra celda. Ya está hecho. 9. Adición de detalles sorprendentes: Entonces, ¿cómo podemos hacerlo más interesante usando formas, colores? Por eso se me ocurre este pequeño concepto de ¿cómo podemos iniciar la actividad en cosas como aburrido botón de juego? Esto simplemente es funcionalmente bueno pero no es tan interesante. Entonces voy a añadir ese momento aha arriba como agregar minúscula micro reacción aquí. Entonces, ¿cómo puedes hacer eso? Seleccione una capa específica por ejemplo, la flecha. Voy a mostrar, desliza hacia abajo. Por lo que seleccionas las flechas específicas y haces clic en, Crear componente. Como lo hice antes, realidad se puede duplicar esta flecha. Vas a mover esta flecha un poco hacia abajo. Porque como dije antes, mueves algo hacia abajo. De esta flecha a esa pantalla, la flecha se va a mover hacia abajo. Entonces la parte secreta es lo que vamos a hacer. El curioso es que vamos a decir, de esta flecha ve aquí automáticamente. A partir de éste, vamos a decir, retrocede automáticamente. Te puedo mostrar aquí ver esos pequeños detalles. Este diminuto detalle, si empiezas a notarlo, puedes notar en todas las apps, como un Lift o Uber o Google, G-mail cada software tiene esta cosa diminuta, diminuta que nos llama la atención, que te quieren para dar el foco. Entonces lo que voy a hacer es, si quiero empezar con la actividad así que voy a simplemente deslizar esta tarjeta hacia abajo. Por lo que inicialmente, acabamos de hacerlo tap para hacer una prueba. Pero después de eso, hay tantas funcionalidades interesantes que están ahí. Algo interesante que realmente me encanta es Drag Begin. Por lo que la función Drag Begin es, cuando arrastras hacia abajo. Entonces voy a decir un Drag Begins, y el Drag Begins de este específico como una carta. Arrastrar significa, arrastrar y esta tarjeta tenía que ser más pequeña, cuando comienza el arrastre. Entonces eso es lo que dije, mientras estás hablando con alguien que estás diciendo y un arrastre, tenía que ser más pequeño. Se puede ver como cuando necesito alguna interacción diminuta en una sola pantalla, se llama microinteracción. Esas cosas que creamos, no creamos entre pantallas. Creamos dentro de la pantalla. Al igual que esta flecha, esta flecha está dentro de la pantalla donde están es cosa diminuta. Ahora lo que voy a hacer es, dentro de la pantalla, quiero que esto sea cada vez más grande. Por lo que selecciono este Grupo, agrupar todo, Crear Componente y voy a Auto. Como dije antes, voy a escalar y escalar. Como dije, de cosa más grande a cosa más pequeña y más pequeña a más grande. Por lo que será sólo como ir de ida y vuelta ver. Para dar cosa más urgente. Está diciendo deslizar hacia abajo para empezar. Entonces voy a deslizar hacia abajo. Empieza a parpadear, me da una dirección de que necesitas empezar ahora mismo. Entonces cuando hice eso, no pasa nada porque no conectamos la siguiente pantalla. Pero éste funcionó perfectamente. Doy click, éste está funcionando perfectamente. Si no sigues estos trucos y consejos, será realmente tardará mucho tiempo. Desde que seguimos todo el truco y lo sabemos, pasé muchos años descubriendo todos estos errores. Te lo dije todo, así que es súper fácil para ti. Una vez que comienzas a jugar con él, es súper fácil. Ahora podemos dar rápidamente una toma de todo el paseo por súper rápido. Yo voy a hacer, Start. Entonces voy a seleccionar un género masculino, y luego estatura, luego voy a seleccionar el peso 180 lbs Al lado del peso es como 160, y está cargando y dándome ejercicio diferente. Ahora bien, si me desliza hacia abajo y la actividad ya comenzó y quiero cerrarla, eso es todo. Ya tenías un concepto y hiciste tu concepto realmente bellamente, hecho en muy poco tiempo. Ahora creamos todo el video de la app. El siguiente paso es lo más importante. Es compartir tu diseño y obtener retroalimentación real de un usuario real. 10. Publicación del diseño de la aplicación: Entonces, finalmente, lo logramos. Hicimos una app la cual tuvimos una idea y justo en la cabeza, acabamos de convertir en videos en movimiento en vivo. Por lo que ahora es la parte más importante. Vas a compartir tu diseño con la gente y super abierto sobre. Feedback, recibir feedback es súper importante. El diseño no es solo hacer una iteración final, esto va a tener como 10 iteración. Entonces vas a estar súper abierto y hacer preguntas como tantas maneras, como por qué les gusta, lo que sienten. Vas a hacer muchas preguntas como sentir, y vas a simplemente arriba mostrarles, en lugar de decirles, bueno, cómo se ve el hermoso diseño. Tienes que enmarcar una pregunta de la manera en que te pueden dar muchos críticos, y otro segundo punto que es súper importante es como, hicimos mucha suposición mientras hacemos diseño. Por ejemplo, dije, los niños les encanta ver ilustración, los niños realmente les encanta ver ese tipo de escala. Necesitas rastrear toda la suposición, cuáles son la suposición que hiciste para ti mismo. Entonces mientras estás probando tu producto, debes asegurarte de que todas las suposiciones sean correctas o incorrectas. Entonces vas a aprender continuamente, vale, hice esta suposición pero a los niños ni siquiera les gusta. No les gusta nada la ilustración, sólo quieren un desplegable. Por lo que tener los pensamientos abiertos que es te hace como diseñador te haría mejor. En lugar de solo empujar, este diseño que hice, necesitas desarrollarlo. Nuevamente, decirte como abierto a la retroalimentación es súper importante si eres diseñador. Si no te abres a la retroalimentación, y si alguien dice que este diseño es malo, quieres aceptarlo y preguntarte como por qué crees que es malo, como ¿qué cosa específica es malo? Entonces si haces tantas preguntas, habrá como señalar las cosas. Así que no, sin embargo, como buscar como al azar como una retroalimentación vaga. Estos colores se ven bonitos. Al igual que tienes que preguntar por qué esto se ve bien. Lo bueno de principio es que, una vez que hicimos la animación, en realidad podemos grabarla en la computadora misma. Entonces hay un botón de grabación aquí, hay como un pequeño botón de video y tú haces clic en él, y yo voy a ser como click y voy a seleccionar Male, y luego siguiente y voy a seleccionar la altura, siguiente y voy a para seleccionar el peso, y voy a seleccionar el peso deseado que quiero. A continuación, y se está cargando continuamente, y te está dando el resultado y voy a deslizarme hacia abajo y empezar. Después de que se haga la actividad, ya terminé. Entonces esto es literalmente, lo genial de esto como que se lucen en el video, para que puedas compartir en cualquier lugar, ventana de signos, pone un nombre. Voy a dar clic en Guardar. Mientras tanto, está exportando, te voy a mostrar en Photoshop, que mientras estás presentando en línea, tienes que asegurarte de cómo va a quedar tu diseño en diferentes dispositivos. Si estás diseñando para iPhone X, voy a mostrar como maqueta de móvil rápido, donde puedes poner tu video dentro. Entonces si tienes Adobe CC, realidad puedes poner un video en la pila de Photoshop. Por lo que ya hice una maqueta, se puede descargar en línea, encontrar una maqueta. Entonces lo que vas a hacer es que vas a dar click en Command-O, es como abrir nuevo archivo, y voy a abrir como un video que ahora mismo hicimos. Siguiente igual que súper simple, solo vas a dar clic y arrastrar aquí así, y tu video ya está en. En Photoshop, si quieres encogerte el video es súper grande, y voy a hacer click rápidamente Command-T para transformarlo y voy a encogerlo, y voy a alinearme con el tamaño del móvil. Entonces me alineo correctamente, que todo esté perfecto, el video está perfectamente alineado, y tengo una capa que puedes enmascarar a la forma del iPhone, como una muesca. Por lo que hago clic derecho en el video. Por lo que necesitas desagrupar primero porque no puedes poner el grupo. Entonces me voy a desagrupar. Shift-Command-G para desagruparlo, para que el video se convierta en una capa, si se puede deslizar y ver los videos corriendo ver. Ahora lo que vas a hacer es hacer clic derecho en él, Crear máscara de recorte, eso es todo. Ve, se siente como un móvil real, como tus videos en un móvil real. medida que ves los videos demasiado largos, todas las capas de abajo necesitas para asegurarte de que también coincida con la longitud del video. Por lo que emparejé todo, ves que todo funciona perfectamente, el video se está ejecutando, ya está listo, y ahora vas a dar click en estos tres puntos. Si haces clic en Render Video, se va a renderizar el video. Ya puse el Skillshare y puse a Skillshare con maqueta. Entonces es como realmente genial que también puedas subir tu MP4 en como Skillshare. Entonces si solo sigues lo que dije justo ahora, puedes ponerte tu propia maqueta o puedes seleccionar tus propios dispositivos, y simplemente ponerte dentro y subir los recursos de Skillshare. Segunda cosa que quiero compartir es como compartir ideas con clientes. Entonces este, es como una demo, como una diapositiva que hice, y voy a mostrar el prototipo que hicimos en este momento. El genial de Keynote es que solo necesitas ir allí y copiar este video, solo copiar, e ir a Keynote y simplemente pegarlo, y solo cambiar el tamaño un poco. Otra cosa secreta que había aprendido recientemente es como si pinchamos en lista de objetos, se va a mostrar como una capa, como un boceto, y vas a arrastrar hacia abajo ese video. Voy a adjuntar este archivo Keynote para que puedas usar eso, como el móvil anterior que tengo es como una maqueta. Para que puedas usar esa maqueta. Entonces la forma en que tienes que presentar con clientes o cualquiera es que voy a dar click a auto startup movie. Entonces cuando te estás presentando con un cliente, solo puedes decir: “Oh, este es un video que hice”, Tienes que decir como, “Bueno, ¿cuál es el problema que estamos tratando de resolver? ¿ Cómo podríamos animar a niños y adolescentes a que se inscriban en la aplicación de fitness que están viendo por primera vez?” Entonces ese es el problema que tenemos. Podemos hacer esto usando tres principio de diseño. Puede ser lindo, divertido y emocionante. Entonces vas a mostrar como, oh, este es el concepto de la Versión 1 que tengo, la encuesta, tenemos como una linda ilustración, y luego te vas a mostrar. Esta es la Versión 2, y esta es la versión final. Esta versión investigamos con este muchos usuarios, a todos les gusta, y preferimos esta versión. Es así como estamos para presentar tu trabajo, cuando estás hablando con clientes, cuando estás empezando como principiante a inscribirte. El tercero tiene como, ahora realmente estás asumiendo que estás trabajando en una empresa como rol de tiempo completo. En tercer lugar es como cómo te vas a comunicar con los desarrolladores sobre como qué prototipo hiciste y simplemente preguntarles cuáles son las restricciones técnicas que tienen. Cuánto tiempo va a tardar este tipo de interacción, y también puedes pedirles que prueben, porque los desarrolladores son como si fueran diseñadores diferentes pero puedes pedir sus comentarios de lo que están pensando. El principal es súper poderoso en eso. Por lo que solo necesitas ir al archivo principal y solo tienes que hacer clic derecho en él, y si hacemos clic en Compartir, Airdrop, muestra automáticamente mi móvil, y en mi móvil ya tengo una app principal que he descargado de App Store. Por lo que ahora voy a dar clic en él, y automáticamente lo manda de inmediato abro mi prototipo en mi teléfono, y esto se ve exactamente igual a la app. Nadie puede diferenciar esto es una app o esto es como un prototipo. Entonces ahora lo que vamos a hacer es como darle este prototipo a mi ingeniero, él sólo va a hacer clic a través de lo que estoy haciendo clic aquí. Por ejemplo, aquí le pediré que le guste, vas a llenar tu detalle de perfil. Entonces sólo me va a gustar lanzar pregunta abierta, y él sólo va a dar clic donde quiera hacer clic. Solo necesitas ver en silencio lo que está pasando. Vas a pedirles que digan continuamente cómo están pensando en su mente : “Oh, pensé que esto va a estar aquí pero se comporta así”. Después de que te gusta iterar tanto, ahora sabes, como el ritmo que has creado, la música que has creado, y puedes sentir la diferencia de cómo estás marcando la diferencia en la vida de las personas, y haciéndolas felices, haciendo que cualquier proceso sea transparente para que cualquiera lo use. Obviamente, será experiencia diferente, ya que es una app para niños, fuimos por como más ilustración manera, si es Center Price hub, vamos a probar algo diferente, pero aún así te vas a dar un toque personal. Eso es súper importante. Si realmente puedes seguir la forma en que te enseño, encuentras que puedes hacerlo usando tus propias ideas. 11. Reflexiones finales: Felicidades, finalmente lo hicieron después de lo aprendido cómo llegar a una idea, cómo convertir tu idea en como un marco de alambre, cómo hacer un claramente único visualmente. También aprendimos a agregar ese toque personal y emocional a la app. Lo más importante es que aprenderás a obtener retroalimentación de las personas y seguirás iterando en ello. Espero que hayas aprendido muchas cosas y muchas cosas nuevas a través de esta serie de videos, creo que vas a seguir experimentando y vas a compartir un montón de nuevas ideas locas, innovadoras por todo el mundo que están viendo este video. No olvides publicar todos tus diseños, y como cualquier diseño que hagas en una galería de proyectos. Gracias de nuevo por tomar esta clase. Estoy súper emocionado y curioso por ver qué vas a hacer. 12. Explora más clases en Skillshare: