Transcripciones
1. Ángel introducción de Davchev: Diablos, chicos. Bienvenido. Mi nombre es Sonya. Estoy impartiendo esta clase. Podemos aprender a diseñar unas áreas de aplicación móvil. Esposa me hace. Yo mismo soy diseñador de UX. Bueno, más de cinco años de experiencia en los ingleses lanzaron muchos amplificadores del mercado tanto para
llorón como para plano salvaje. Uno de ellos aguanta. Let's fue destacado en la revista Forbes recibió el premio Katie gobernante en 2000 y 16. Experiencias de usuario cada vez en crecimiento Las empresas de profesión de todo el mundo parte buscan diseñadores de
buen uso para ayudarlos a través de sus problemas ya que utilizan diseñador. Tu trabajo es hacer que el usuario se sienta cómodo usando tu camino. Me alegra tenerte a bordo y una esperanza de que aprendas mucho de esta clase. Mantente atentos para un emocionante viaje por
2. Introducción: Bienvenido a bordo. Damas y caballeros, Gracias por tomar esta clase donde podrás aprender a diseñar una aplicación móvil para reservar boletos utilizando diversas U. Y en nuevas técnicas X. Este vidrio asume que tienes conocimientos previos de un software de diseño como ilustrador de
tienda fotográfica para Adobe Experience Design. Si no tienes conocimientos previos, no te preocupes. Todavía puedes seguir adelante. Este vidrio está dirigido a las personas que quieran aprender estás en tu diseño de huevos y
diseño móvil . Ya sea principiante, intermedio o incluso profesional, podría tener un truco o dos en mi sueño que pueda aumentar tus conocimientos. Aprender nunca es suficiente. Aprenderás qué temas, er persona. Y por qué es importante en el diseño de experiencia de usuario, Aprenderás qué es el flujo de usuarios y cuál es el propósito del mismo. Y por último, aprendes a diseñar la aplicación real. El software que vamos a utilizar. 12 Esta serie se llama Sigma y autoridad de conducta de forma gratuita en señal punto com. Fig more está entre los peores suaves más populares para ti. Por qué y tus huevos diseñan y puedes usarlo en el navegador. No obstante, te
recomiendo que no conozcas la aplicación de escritorio. Ahora. Si no quieres usar el estigma porque estás usando otro software, como lleno de Shop o sketch, tal vez eso esté bien, porque aún puedes seguir esta clase. Cada video tendrá su propio panel de activos. Aquí encontrarás diversas imágenes e iconos necesarios para que completes los videos. Ya que nuestra clase no cuenta con temas como yo puedo diseñar o la fotografía usará estos activos son libres de usar. Y puedes ver los enlaces Muñeca Recon, otros activos si quieres. Por último, requerirás de actitud positiva para completar esta clase. Y recuerda, aprender nunca es suficiente. Gracias por unirte a mi vaso y empecemos.
3. Persona del usuario: en este video, echaremos un vistazo a lo que es personal de un usuario. ¿ Y por qué es tan importante en el diseño de experiencia de usuario? Ya preparé a la usurpadora Sana para este video, así que sólo lo vamos a discutir ahora. ¿ Qué demonios es un usurpador Santa? Piensa en ello como una representación de ficción fuera de tu cliente ideal. En el mundo del marketing, hay un término llamado Target, y ese es un grupo de personas que comparten mismas características. comportamiento, rango de edad
pesado y los ingresos que pueden ser dirigidos como clientes potenciales para su negocio es el mundo de la experiencia del usuario. El usuario persona es algo parecido a eso. Al construir un hermano, siempre
debes investigar y definir quién va a ser usuario. Cosas como hábitos, necesidades metas, edad, etcétera. Despliegue de nuevo usuario para Sana Al construir una plantilla, tienes una clara comprensión de cómo debe ser y sentir tu producto Si
quieres que la gente use tu producto, debes construirlo para que les guste. Recuerda, siempre construyes para los usuarios porque el usuario es el que impulsa tu negocio. Si tu usuario puede navegar a través de tu APP. Héroe, periodo
diligente como diseñador de experiencia de usuario, debes seguir el comportamiento de los usuarios y construir el producto de esa manera. Por regla general, piense en los usuarios como niños pequeños que se pierden fácilmente si no ven una flecha señalando su dirección. Ahora examinemos nuestra persona de usuario. Si Google usurpador hijo de plantillas, deberías encontrar algo similar a esto. El propósito de la plantilla es personificar al grupo de personas que llegamos a ser los usuarios fuera de nuestra aplicación que hará mucho más fácil un trabajo una vez tengamos un claro entendimiento de lo que debemos construir y para quién lo estamos construyendo. Digamos que nuestro equipo de investigación de usuarios nos ha proporcionado suficientes datos para que construyamos esta plantilla. Como puedes ver, nuestro usuario se llama Tobias Swenson. Es un estudiante de 24 años de Gotemburgo, Suecia. Es una persona extrovertida, le gusta salir de fiesta los fines de semana y viaja a nuevos lugares cuando puede. Como se puede ver en una imagen, que está abajo con ella desde,
um, um, splash dot com, el sesgo rara vez se ve sin su teléfono. Es realmente activo desde las redes sociales, pero también es explorar y saliente. Estudiar esta plantilla nos dice que aunque es conocedor de la tecnología, comprar un boleto para el techno 14 Burling no debería ser una molestia para el bayous. Su joven enérgico y le gusta ver rápido valor real. Al igual que cualquier otro millennial. Le gustan sus redes sociales si toca historias en instagram, tweets o pergaminos. Cronología en Facebook. Sabiendo que nos damos cuenta que la pantalla de inicio de sesión debe tener canales de redes sociales incluidos y ver a Tobias como una persona que está activa se frustra por Internet lento, probablemente
deberíamos excluir el registro con correo electrónico, ya que requiere múltiples pasos que entran en conflicto con el comportamiento de nuestro usuario. Escriba correos electrónicos, palabras
rápidas y confirmar contraseñas a través del correo electrónico puede ser frustrante para el sesgo, porque podría estar tomando prestado Internet de un café para comprar boletos para una fiesta. A lo largo de esto, los videos harán referencia a la plantilla de persona del usuario. Cuando vamos a estar tomando decisiones en nuestro diseño, eso es todo para este video. Pausa y examina al usurpador algunos de plantilla el tiempo que quieras. Gracias por ver, y los veré en el próximo video
4. Flujo de usuario: Bienvenidos de nuevo, chicos. En este video, vamos a aprender qué hay en el flujo de usuarios y por qué es importante y el diseño de la experiencia del usuario? Ya diseñé el flujo de usuario para un proyecto. Echemos un vistazo con cuidado y examinemos cada parte. Años de flujo es el camino que toma el usuario con el fin de completar hace en un sitio web para una aplicación. En nuestro caso, ya que estamos diseñando una aplicación de reserva de entradas, el flujo de usuarios está guiando al usuario a comprar entradas para su concierto favorito. diseño y el flujo del usuario es una parte crucial en cualquier aplicación, ya que define una guía visual clara sobre cómo debe verse la aplicación y cómo el usuario navegará con cada rectángulo representa una pantalla separada que existirá dentro nuestra aplicación. En las flechas se indica la relación entre la pantalla. En primer lugar, tenemos nuestro punto de entrada de usuario, que es el Splash Queen. Esta es la pantalla que aparece en cuanto el usuario te quiere la aplicación. Después de que la implicación se carga en el fondo, la pantalla de bienvenida se desvanece y se presentaron con la pantalla de inicio de sesión. La pantalla de inicio de sesión es importante para nuestra aplicación, ya que el objetivo de la aplicación es que el usuario compre boletos. Vamos a necesitar a él o a su ley del dedo en nuestra solicitud con el fin de obtener información
personal de beso o de ella . Después de que el usuario inicia sesión, se
le presenta con la pantalla de la fiesta Lee. Aquí, el usuario puede encontrar una lista de fiestas que están disponibles para el día. Como podemos ver, el usuario puede proceder a la pantalla del calendario donde puede seleccionar un día en el calendario y ver la fiesta está disponible para ese día en particular. Desde aquí, el usuario también puede acceder a Tickets Queen. Si el usuario no ha comprado ningún boleto, se
le muestra en pantalla vacía. Ahora diseñar una pantalla vacía es un importante diseño de experiencia de usuario de trading. Como diseñador, siempre
debes incluir algún gráfico apropiado, un texto el estado vacío indicado y una llamada a la acción que nunca dará usuario y no lo
dejará en un callejón sin salida. En nuestro caso, si no hay boletos disponibles en la reina de boletos, deberíamos agregar una llamada a la acción que diga algo como Comprar boletos ahora y llevaremos al usuario de vuelta al ciclo. De acuerdo, Así que vuelve a la pantalla de lista de fiestas cuando el usuario toca al menos artículo en una pantalla de fiesta Lee . Se le redirige a la Reina de Partidos Solteros, cual contiene detalles sobre esa fiesta en particular como lugar de fiesta, el precio del boleto. Cuando se iniciará el show, así
como una pequeña muestra de video para ese deejay en particular desde la pantalla de fiesta única, el usuario puede navegar a la pantalla de video, donde podrá ver la muestra de video disponible y familiarizarse con los DJ's música. Lo más importante que el usuario puede hacer en la pantalla de fiesta única es reservar entradas para esa fiesta en particular. Después es llevado a la pantalla de boletos de libro, que él o ella puede elegir cuántos boletos comprar en la info de la tarjeta de crédito. Después de eso, se
le muestra un mensaje de éxito. Si la compra fue exitosa o un mensaje de error si la compra no se completó, mostrar un mensaje de éxito o error es crucial para el usuario, tal como lo es. Dar comentarios sobre si los boletos fueron comprados o no se les dio retroalimentación al usuario es una de las cosas más importantes en el diseño de la experiencia del usuario porque como diseñador, nunca
debes dejar al usuario en un estado donde él o ella no sepa lo que es ocurriendo. Después de que los boletos se adquieren con éxito, el usuario es llevado a la reina de los boletos, donde se le muestran los boletos comprados. Esto concluye el camino que toma el usuario. Completa el ciclo completo usando nuestra aplicación. Y esto concluye nuestro video. Nos vemos en el siguiente.
5. Pantalla de splash: en este video, vamos a aprender a rallar una pantalla de presentación para un proyecto. El splash screen es una parte integral off ya mientras la aplicación, porque es lo primero que ve el usuario. Una vez que observa la aplicación, da servicio en ambos sentidos. Cubre toda la pantalla mientras la aplicación se carga en segundo plano. A menos que el usuario obtenga fórmula con la marca implicaciones, se carga
una de la pantalla principal, la pantalla de salpicaduras se desvanece. Ahora vamos a crear una pantalla de presentación para nuestro proyecto. Selecciona Canal directo dos o pulsa están en tu teclado. Dibuja un rectángulo que cubra toda la pantalla. Cambie el nombre de la capa BG para el fondo y moviéndose a la parte inferior de las capas. Pila genio Color a una B 1540 Ahora vamos a crear el más bajo para la aplicación. Selecciona los labios para incluir los. Haga clic en este cambio para reducir su proporción y cambiar de tamaño. 260 píxeles centran lo suficiente. Elimina su campo y que Ah, 40 pixeles le trazo. Duplicar este círculo y así, como el anterior. En un efecto, con una gota superficial con 44 píxeles, difumina y elimina los valores de ex y por qué cambiar su color a TD para ser Pacey. Ahora pasa al panel de activos y selecciona esta imagen. Esta es una imagen libre de aburrido todo. De splash dot com. Muévelo a nuestra reina salpicada y bajado al bastón de la guarida. Selecciona el primero en saltos y la imagen derecha Haz clic en Seleccionar usado como máscara. Selecciona el Grupo Mess y la Primera Elipse. Agruparlos juntos. Cambia el nombre a Lovell Image. Ahora usemos la herramienta de tipo y mecanografiando Burling. Definitivamente. Boletos cambian el color blanco su tamaño a 30 píxeles y centro mañana. Rompe la palabra para que Berlín y Technol estén en una línea. Los boletos es una locura. Seleccione tanto Berlín como techno funciona y cambió el peso frontal a perno. Seleccione los boletos funcionan y cambió su peso a ligero. Genial. Ahora lo podemos centrar. Seleccione tanto la imagen del logotipo como los boletos techno de Berlín. Que los buenos juntos. Llama a esto más bajo y centralo hacia arriba en nuestra pantalla. Genial. Ahora tenemos a nuestra reina chapoteo
6. Pantalla de inicio sesión: Bienvenidos eso, chicos. En este video, vamos a aprender a diseñar una pantalla de inicio de sesión para un proyecto. Ahora, ah, pantalla de inicio de
sesión no es una parte crucial para una aplicación. Pero en nuestro caso, lo es. Ya que están contentos se trata de comprar boletos. Vamos a necesitar alguna información de usuario estudiando persona grasante. Vemos que a nuestro usuario le gusta usar mucho las redes sociales. Entonces en lugar de diseñar, pertenecer, pantalla por qué nombre de usuario de contraseña. Cuando escribamos la contraseña, vamos a usar el registro social. El registro social es una forma más fácil para que las personas inicien sesión en una aplicación. Dado que la información ya se proporciona a un canal de redes sociales. Diseñemos una pantalla de inicio de sesión ahora mismo. Primero, elijamos un más largo y con un gran top arriba Ahora vamos a crear las botellas para un registro de redes
sociales, seleccionar la herramienta de rectángulo haga clic en unos y escribiendo 345 píxeles para el con y 60 píxeles. Para la altura, cambie el radio de esquina para los píxeles y centrar esto hacia arriba. Cambiemos el dedo del pie de color. Tres B 59 Mi nombre, que es un color hexadecimal para Facebook. A menos que en efecto a ella una lanzadera de gota con 10 píxeles borrosa, cinco píxeles llenos de valor I y 20% de capacidad. Genial ahora. Por lo tanto, deja que la herramienta de tipo y la tipografía venga continuar con Facebook y coloque esto o la base de para los cambios de fondo peso, negrita y tamaño 24 píxeles. Ahora, como Bellis Loy es una forma condensada, cambiemos el espaciado entre letras a 4%. Cambiemos el centro blanco del dedo de relleno tú mismo de Yeah, y pasemos a nuestros paneles de activos. Seleccionemos este Facebook. Yo vengo, lo proveo y arrastra una puerta a nuestras cámaras, selecciona el icono de Facebook y la base de su botella y los centro hacia arriba, agrupados para el fondo de Facebook. Genial. Ahora duplicemos esta botella seleccionándola, sujetando perno en tu teclado y arrastrándola hacia abajo. Vamos a cambiar para continuar Gmail. Ahora vamos a enviarlos con el otro trabajo. Ahora paseemos por el Facebook. Yo vengo con el Jimmy como un cuchillo proporcionado en el panel de activos. Entonces, al
igual que el Jimmy le gusta y arrastrado hacia arriba a la cuenta, selecciona la base de abajo y centralos hacia arriba. Ahora, por último, necesitamos cambiar el color a esta base, y el cambio está cambiando. Para ver varios 1610 Genial. Ahora tenemos nuestra pantalla de blogueo
7. Pantalla de lista de fiestas: Hola chicos. Bienvenido de nuevo en este video, vamos a diseñar la fiesta Lee Screen para su aplicación. El partido enumera. Queen es esencialmente la pantalla principal de nuestra aplicación, ya que es un punto de acceso a muchas pantallas diferentes, como la pantalla del calendario,
la pantalla de tickets en la pantalla de fiesta única. El propósito principal fuera de la pantalla de lista de fiestas es proporcionar al usuario una lista de
fiestas disponibles , incluso ellos así en No hablar y pongámonos al negocio. En primer lugar, selecciona tu herramienta de rectángulo y dibuja un rectángulo en toda la pantalla. Cambia su nombre para que sea Jeep por fondo y muévelo hacia abajo en el último orden. Cambiemos su color a 071 9 a 3. Ahora usemos en la imagen para realzar nuestro fondo. Visualmente, no
quiero esta imagen de todo splash dot com, que puede hacer está bien de forma gratuita. Por lo que deja esta imagen en arrastre. Funcionará a nuestras cámaras tres tamaños y lo posicionará de acuerdo con gusto real. Ahora movamos la imagen hacia abajo en nuestra pila de capas. Genial. De acuerdo, agreguemos otra sensación a esta imagen, que va a ser un ingrediente lineal con el mismo color que el fondo en ambas paradas de
color seleccionamos la primera Grady en punto, y movimos su capacidad a cero solo esto hasta que se funde bien con el fondo. Ahora vamos a tener ah, Heather a nuestra pantalla. Posteriormente, vamos a convertir esto en un componente. Siente más nos permite crear componentes, y los usamos a través de múltiples pantallas que facilitarán mucho nuestro trabajo. Además, cuando hagamos un cambio, se reflexionará sobre todos los componentes copias. Seleccione nuevamente la herramienta de rectángulo y dibuje un rectángulo que esté lleno con los cambios. Altura, 140 píxeles. Cambie el nombre de este BG por fondo y movió una capa hacia abajo en la pila de capas. Haga clic en este globo ocular junto a él para ocultar las capas. Grupo de fondo está usando control Genoma su teclado, y nombramos a este grupo toe Heller. Ahora selecciona el tiempo para en fiestas de mecanografía en Berlín. Cambia el teléfono. Babel nevando el tamaño del teléfono 30 pixels, el peso frontal demasiado audaz. El espaciado entre letras a 4% desde el ruido de Bevan una forma condensada y finalmente cambió el color dedo del pie blanco. Este va a ser nuestro título. Mueve el título en el cochecito de cabello y muévelo arriba arriba. Seleccione nuevamente el globo ocular junto a la capa de suelo para ver el fondo. Ahora mueve el título 20 píxeles desde la parte inferior del fondo dijo Eyeball de nuevo en el jugador de
fondo. Ahora vamos a copiar con título sosteniendo viejo y moviéndolo hacia arriba. Cambia el tamaño del teléfono de 18 píxeles, muévelo hacia la izquierda y movió 14 píxeles desde la parte superior del título. De acuerdo, vamos a cambiar esto a una cita. Por ejemplo, 17 de noviembre de 2000 y 18. Posicionémoslo en consecuencia. Ahora pasemos al panel de activos y agarremos los iconos que proporciono selectivos y
los movamos a nuestras cámaras. Vamos a moverlas a la carpeta del asesino y colocarlas al borde fuera de la pantalla a la derecha. alineó con la parte superior fuera del día y cambiemos su color dedo del pie blanco. Los ciclos van a representar la pantalla del ticket y la pantalla del calendario, respectivamente. De acuerdo, tan seleccionable y movido, Um, 15 píxeles desde el borde de la pantalla. Genial. De acuerdo, vamos a seleccionar nuestro encabezado Fuller. Ahora lo que es genial para conformarse en televisión seleccionada y hacer clic, este ícono simplemente crearía una señal de componente sobre creativo informado, aunque nuestra carpeta Vamos a pasar a la Izquierda y Let's Kobe pero sosteniendo viejo y bebiendo justo sobre nuestro campus. Esto ahora crea una copia de todo nuestro componente, que podemos utilizar a través de todas nuestras pantallas. Veamos cómo funcionan los componentes. Hemos cometido un error al deletrear las fiestas de trabajo en nuestro título. Vamos a cambiarlo. Montaña Tore Messer de Born y te permite llamar a los cambios reflexionar sobre nuestra copia a la derecha. Ver, así de fácil funcionan estos con componentes en señales. Ahora lo único que nos queda es crear la propia lista de partidos. Seleccionar o un solo, también. Haga clic una vez en escribir 325 píxeles para la semana y 120 píxeles para la altura. Justo esto al centro de tu pantalla y cambia el dedo del pie de color. One beef 1540 Cambia las coronarias cuatro píxeles y vamos a poner efectivamente un transbordador de tambor . 10 píxeles desenfocan cinco píxeles para el blanco lo harás tú y 24 7 40 opacidad cambio retrasador BG para fondo. Pasar a detener su panel y seleccionar esta imagen, que tienen a Donald de nuevo de una splash dot com. Sólo tienes que ir a splash dot com y escribir techno en la barra de búsqueda. Puedes encontrar un montón de imágenes para jugar con imagen selectiva y arrastrarla a nuestras cámaras . Ajustemos con 95 píxeles, 97 píxeles para la altura. Mueve esto en consecuencia a nuestro panel y ajustó 10 píxeles desde la izquierda fuera del borde. Cambiemos el radio de esquina a dos píxeles. Seleccione tanto la imagen como el fondo y agruparlos utilizando el control G. Vamos a cambiar el nombre de este grupo a la lista. Ya se lo dije. Seleccione el tipo para volver a escribir y escribir. Ya conoces a Kravitz. Cambiemos la alineación a la izquierda hasta el medio. Cambia el color dedo del pie blanco y cambia el tamaño de fuente 24 píxeles. Coloca esto y la línea de 10 píxeles de la derecha fuera de la imagen Café Destexhe
sosteniendo viejo y arrastrándolo hacia abajo. Cambie el tamaño de fuente a 18 píxeles y la espera telefónica para reservar cambió el campo. Por lo que la pasividad al 70%. Y cambiemos esto a Burke Hind, Pamela Rama y Bar Seleccione tanto el texto tipo de nacimiento como Kravitz y agruparlos. Llama a esto doloroso y muévelo a nuestro elemento de lista. Seleccione este grupo y duplicado sosteniendo viejo y arrastrándolo hacia abajo. Acerquemos y hagamos un hisopo de las cubiertas. Mueve esto a la parte superior y mueve esto a la parte inferior. Ahora cambia. Esto inicia y cambia esto a 1 p.m. Cambió su tamaño de teléfono dedo del pie, 18 pixel y este tamaño de teléfono 14 pixels y luego sólo ellos en consecuencia. Vamos a renombrar a su grupo Empezar duplicado sosteniendo viejo y arrastrándolo hacia la derecha. Vamos a moverlas 20 pixeles el uno del otro. Cambia este precio también, que indicará el precio de los boletos y cambiará esto por algo así como 18 años de edad. Renombrar esto en consecuencia. Ahora lo único que nos queda es diseñar un llamado a la acción. Ah, la dirección
fría es algo que incita a la acción para el usuario. Por ejemplo, comprar boletos. Agarra el texto a en escribir boletos de regalo. Cambiemos la forma de un autobús. El divertido tamaño 14 pixels. Vamos a mover esto a la izquierda. Ponlo dentro del título Oeste y cambie su color a e. D. Dos d. J. C. Cambie la vía delantera para votar y vamos a hacer zoom para ajustarlo al balón. Ahora he añadido el icono de Flecha a los activos, así que vamos a agarrarlo y nos pasamos a nuestros camellos. De acuerdo, deja posición de aquí. Vamos a moverlo a nuestra lista Grupo de ítems. Ahora vamos a moverlo. A 10 píxeles o cinco píxeles de los boletos de get. Seleccionémoslos a ambos y agruparlos. Llamaremos ocho a esta ciudad. Cual está Llamado a la acción, Más puerta al borde de nuestro fondo para artículo de lista y magia. 10 píxeles a la izquierda. Genial. Sabemos que hemos diseñado nuestro artículo de lista. Por último, vamos a convertir este elemento de lista en un componente. Entonces, ¿podemos usarlo de nuevo? Vamos a seleccionarlo y vamos a dar click en, Crear conformidad, muévelo hacia la izquierda y co pagado sosteniendo Holt y arrastrándolo de nuevo hacia cámara. Enviemos a Se duplicó cuatro veces, sosteniendo viejo arrastrado hacia abajo y con algo así como 10 píxeles hacen el GAM y finalmente, cuatro cosa. Entonces son todos esos títulos. empuñó hasta el fondo de tu pantalla y muévalos. 15 grandes sociales. El frasco. De acuerdo, entonces ahora tenemos los ítems de lista para nuestras fiestas. Voy a publicar el video en Popular los datos ahora. Bienvenido de nuevo. Como puede ver, calculé los datos para una variedad con diversos nombres de deejay, sedes, precios de
entradas, etcétera. También he cambiado las imágenes de las diferentes fiestas. Ahora la señal no nos permite agregar imágenes u otros elementos a nuestras instancias de componentes. El modo en que resolvemos esto es poner todas las imágenes en un componente maestro. Acude al ítem de la lista y da clic en los Aibos fuera de las imágenes que no quieras mostrar y eso es todo. Chicos no tendrían terminada la pantalla de Bartoli. Hasta el momento, hemos aprendido muchas cosas, como cómo debe organizarse un elemento de lista con imágenes, información y llamada a la acción. Por último, aprendemos ¿cuáles son los componentes en la Fig? MMA? ¿ Cómo trabajar con ellos y por qué son importantes en el diseño? Gracias por ver. Te veré en el siguiente video.
8. Pantalla de una fiesta: Bienvenidos de nuevo, chicos y chicas. En este video, vamos a diseñar la pantalla de fiesta única como se mencionó antes en esta reina. Vamos a poner los detalles sobre el Partido Selectivo, como el nombre del deejay, la ubicación del partido, la fecha, la hora en que comienza el deejay así como el precio del boleto. También vamos a poner el video de muestra del deejay para que el usuario pueda tener una mejor sensación o ¿qué tipo de musing? Ese deejay lugar desde la experiencia del usuario. Perspectiva. Esta es una característica importante para nuestra aplicación. Por último, en este verde, vamos a poner una llamada a la acción fondo para que el usuario pueda comprar boletos para esta fiesta. De acuerdo, empecemos. Lo primero es lo primero. Vamos a utilizar la imagen de pantalla completa para poder realzar visualmente el fondo y
darle un blanco oscuro, que es complementario con el movimiento fuera de nuestra aplicación. Como de costumbre, no
vivo esta imagen de sunsplash dot com. Yo lo voy a proporcionar en el panel SS, pasar por encima del panel de activos. Entonces, al
igual que la imagen y muévala de nuevo a nuestro lienzo, arrastrado hacia abajo a la pila de guarida en, posiciónala en consecuencia. Te gusta Añadamos otro campo a esta imagen, que va a ser Polina Grady. Um y vamos a usar ese mismo color para ambas paradas de color off. El color va a ser algunos de 71 9 a 3. Y cambiemos la opacidad de las paradas del auto. El primer tope de color va a ser de 66% de capacidad, y el 2do 1 va a ser algo así como 93 lisos Grady Inbar. Hasta que te guste a continuación, vamos a usar el componente capilar de nuestra lección anterior. Copia el componente capilar seleccionando la falla de retención y arrastrándolo a nuestro campus. Ahora, ya que la pantalla de fiesta única es una fórmula posterior pantalla Party Lee, necesitamos proporcionar a nuestro usuario lejos para nunca volver a la reina anterior. El modo de hacerlo es tener una botella trasera. Ahora, como no podemos modificar nuestros componentes y cosas, vamos a tener que modificar nuestro componente master. Ya sabes, nuestro panel de activos? Yo proporcioné una espalda. Vengo selectivo y Dragon viejos maestros tour conformancia cambiando color blanco y posición en consecuencia. Encima de la fecha, como se puede ver en nuestros componentes, instancia, podemos ver el icono de atrás. Ahora. Lo único que nos queda es bombar la fecha. Haga clic fuera del globo ocular junto a la fecha con el fin de ocultarlo. Genial, ahora
tenemos el botón Atrás para nuestra pantalla. A continuación, agregarle el título. Acude al panel de activos seleccionado decoración gráfica, que he proporcionado y moviéndome hacia cámaras. Ahora abre tu tipo dos y escribe. Ya sabes, Kravitz cambia el tamaño del teléfono 50 pixels. El peso frontal es voto, y el color es blanco. Alineó estos dos gráficos de decoración y moviendo algo así como cinco píxeles de la parte inferior de la misma. Selecciónelos ambos ranurados y cámbielos esto a un título. Entonces, al
igual que el grupo titular se movió hacia el Heller y moviendo 50 píxeles desde la parte inferior del cabello, dejemos de lado nuestro detalle. Chirriar. Seleccione la hora para volver a escribir las fechas. Cambia la diversión tamaño 18 pixels, una línea a la izquierda, cambia el color blanco y cambia la opacidad. 40% alineó estos con el titular del título Bolt y arrástralo hacia abajo y cambió su tienda. Fecha especificada, que es el 17 de descuento de noviembre de 2000 y el 18. Cambia al 100% la capacidad de este campo y cambia el tamaño del teléfono a 24 píxeles, los
alineó y movió algo así como cinco píxeles desde la parte inferior de la fecha. Entonces déjalos a ambos y agruparlos juntos. Hacer una copia de este grupo sosteniendo viejo y arrástralo hacia la derecha. Mueve este grupo algo así como 25 píxeles a la derecha. Cambia esto a una ubicación. Cambia esto a Burke Hind Panorama Bar. Cambia la semana de esta palabra para que el trabajo de bar vaya debajo. Seleccione ambos grupos, cópielos manteniendo viejo y arrastrando hacia abajo. Se movió en algo así como 10 píxeles por la parte inferior. Cambiemos esta información en consecuencia para reflejar la de nuestra pantalla anterior. Entonces empieza, que va a ser uno más allá de mí, mi y precio de entrada, que va a ser de 18 años. Esto por lo que coincidirá aquí. Vamos a mover el balón. Dos grupos por unos cinco píxeles más. Está bien, genial. Vamos a tontear juntos y llamar a este grupo en su totalidad y movimos algo así como 30 píxeles de abajo de nuestro título. Ahora vamos a tener el video. Café sencillo. Un grupo de la en gripe al sostener viejo y arrastrarlo hacia abajo, moviéndose fuera del grupo y llamarlo video con algo así como 40 píxeles desde el fondo del Mpaluku. Cambiemos la opacidad del trabajo superior al 100%. Eliminemos el trabajo inferior. Ahora pasa a nuestro panel de activos. Entonces que esta imagen que he proporcionado y la traslade a nuestras cámaras, arrastre dentro de nuestro grupo de videos y ajustemos como cinco píxeles al fondo del
precio del boleto . Cambia el precio del boleto a simple funcionario de Jim. Apenas el con fuera de la imagen a 210 píxeles, la altura a 120 píxeles. El radio de esquina cuatro naves AP otra sensación a ella. Va a ser un negro de color sólido por 50% de capacidad. El último es a otra imagen afectiva, que va a ser una sombra gota. El desenfoque será de 10 píxeles. El por qué bueno, serás de cinco píxeles y la capacidad será de 60%. Esto hará que la imagen destaque desde el fondo. El último dedo del pie de aquí es el fondo de juego. Pasar por familia de activos, Seleccione el fondo de juego, que he proporcionado y arrástralo o a nuestras cámaras. Ponlo dentro del grupo de video. Let's Century seleccionando el fondo de juego y la imagen y enviamos a ella usando nuestros
iconos de alineación . Genial. Ahora tenemos muestra de video. Al hacer clic en esto, el usuario estará llevando a una nueva pantalla fría. El video de la pantalla. Ahora lo único que falta dedo del pie nuestro diseño es el llamado a la acción fondo Copia mantequilla de nuestra pantalla de inicio de sesión y se trasladó a nuestro campus, alineándose a la parte inferior de la pantalla y moviendo algo así como 15 píxeles de alrededor. Ahora vamos a renombrar esto a Ciudad A para llamar a la acción. Eliminemos este ícono. Cambia esto por boletos de regalo. Cambiemos el color de la misma a que estás tan en una línea. 23 Cambiemos también el color de estos fondos a este auto sido, que es et tu de que ven ahora. Lo último que hay que hacer aquí es crear un componente fuera de nuestro llamado a la acción con el fin de
usarlo en otras pantallas, haga clic en el componente quit Tyco y vamos a arrastrarlo por fuera, copiado sosteniendo viejo y bebiendo de vuelta en gira vino con posicionémoslo en consecuencia. A 15 píxeles de la parte inferior de la misma. Eso es todo, chicos, Esto concluye nuestras lecciones. Te veo en el próximo.
9. Pantalla de boletos de libro: Hola otra vez, chicos y chicas. En este video, vamos a seguir construyendo encima de nuestro diseño anterior, la pantalla de fiesta única. Vamos a diseñar una parte de reserva de boletos que se va a presentar en un modelo que se desliza desde la parte inferior de la pantalla justo después de que el usuario haga clic en la llamada a la acción. Pero consigue boletos. El propósito de esto es beneficioso para el usuario porque no perderá el foco al hacerse navegado. Dos pantallas diferentes en este más solicitarán al usuario que introduzca su nombre y los detalles de su
tarjeta de crédito en Río para realizar una compra para los boletos al trabajarlo datos sensibles
como detalles de tarjeta de crédito. Es de suma importancia que no creas al usuario en la Voy sin saber lo que está pasando
con el suyo por su dinero. Es por eso que DF necesita proporcionar al usuario comentarios sobre lo que está pasando. De acuerdo, dejemos la plática y pongámonos a los negocios. Primero lo primero. Asegúrate de tener una copia de la pantalla anterior porque vamos a eliminar algunas cosas después de que hayas copiado la reina anterior entregó el título. El info saluda en la muestra de video, pero deja la botella de llamada a la acción. Ya que vamos a usar más adelante, solo tienes que hacer clic en el globo ocular la próxima semana para ocultarlo. A continuación, seleccione la imagen de fondo y aplicando de manera efectiva. El efecto es Leibler 20 pixels para el M O. La razón por la que estamos difuminando el fondo. Trabajan el enfoque del usuario al intestino deslizante. El fondo seguirá estando ahí, pero menos prominente. Ahora selecciona tu rectángulo para y dibuja un rectángulo que sea semana completa pero cambia su altura a 600 píxeles. Haga clic en este ciclo junto a la esquina. El sudor de Brady Radio de esquina independiente para ángulo directo en el 1er 2 campos de entrada tenía 15 píxeles y dejar el resto de cero. El primer pie de vez se siente referido a la esquina superior izquierda y superior derecha respectiva. Apenas esta capa, por lo que tal es la parte inferior de la pantalla. Ahora cambiemos el color dedo del pie uno B una esposa por cero y vamos a subir otra sensación a ello, que va a ser de color sólido negro en 40% de capacidad. Por último, vamos a cambiar el color motile dis capa la exclusión y arrastramos un rectángulo en la
pila de capas . Ahora abre tu tipo dos y escribe en reserva un boleto. El tamaño divertido de la misma es de 18 píxeles. El frente paga tazón y el color es blanco. Pero cambia la opacidad. 40% duplican esto sosteniendo viejo y arrastrándolo hacia abajo. Cambie el nombre para que signifique, Oh Kravitz, cambie el tamaño de fuente 40 píxeles y cambie la opacidad de la misma al 100%. Ahora vamos a tener sólo esto y vamos a leer cinco píxeles hacia abajo. Selecciónalos a ambos y muévalos aquí. Ajustarlo y dejarlos caer como 10 píxeles. Ahora abre el rectángulo para otra vez y haz clic una vez. Cambia el ancho a 95 píxeles, y la altura a 75 cambió unos pocos a los mismos saltos que estamos usando para una llamada a
botellas de acción , mucho estos a la esquina superior derecha de nuestro modelo. Y vamos a tener un individuo de coro a 15 píxeles en el segundo campo de entrada para suavizar sólo la esquina superior derecha. Ahora vamos a conducir una copia de nuestra etiqueta sosteniendo viejo y arrastrándolo sobre fondos de torpedo. Seleccionar tanto el fondo como la etiqueta y Sentara cambiar el color de estos 2071 93 y cambiar la opacidad al 70% llevando esto a pista total de Cope Jalloh V sosteniendo viejo y arrastrándolo hacia abajo, cambie esto a 18 años, cambiar el tamaño de fuente a 34 píxeles y traer de vuelta la opacidad que queremos de buen por ciento. Centrarlos a ambos. Selecciona todo agrupando al Hitler de Coley. De acuerdo, hagamos un ajuste rápido a esto. Selecciona tanto Nina Kravitz y reserva Un billete de texto y la línea de ellos hasta el borde de la pantalla. Ahora se movió hacia arriba 15 píxeles a la derecha. Genial. Ahora vamos a diseñar un paso a paso numérico, que va a proporcionar al usuario la opción de comprar uno o varios boletos, Seleccione este grupo y duplicado sosteniendo viejo y arrastrándolo hacia abajo. Elimina todo lo que hay dentro de ella excepto esta etiqueta. Nombramos a este dedo cuántos boletos ahora más a nuestro panel de activos y seleccionamos Aumentar y Disminuir Aiko's, que he proporcionado. Muévalos a nuestro lienzo y me gustan hasta los bordes de la pantalla. Mueve el plus vengo 10 pixels a la izquierda. Seleccione el ciclo menor y la justicia en la línea con este texto. Ahora selecciónalos ambos y centro de todos geniales. Abre tu tipo dos y tecleando uno. Esta será la cantidad inicial de boletos de descuento cambiar el tamaño frontal a 50 picks off y el color blanco. Centra estos y selecciona tanto los iconos como el fix and select y Landau verticalmente
agrupados entre sí. Y no termines en este grupo. Quien nombró a este grupo para numerar paso a paso. De acuerdo, ahora alineación. 30 píxeles hacia abajo desde el borde de este rectángulo. De acuerdo, Cuando el usuario toque el más y el menos, ajustará la cantidad a medida que cambie el número de boletos fuera. El precio debe cambiar también para reflejar los cambios en tiempo real. Esto es crucial para la experiencia del usuario. Seleccione el número Grupo paso a paso y duplicado manteniendo pulsado viejo y arrástralo hacia abajo, moviendo 30 píxeles hacia abajo. Seleccione este grupo con iconos del número y elimine. Cambie el nombre de esto a nombre de usuario y
también cambió la etiqueta . Tu nombre. Selecciona
tambiénel sencillo adecuado también y dibuja un rectángulo que tenga 345 píxeles en semanas y 50 píxeles de altura. Cambia el radio de esquina a dos picos del color blanco y la capacidad a 10% de posición . Este cinco píxeles hacia abajo desde el borde de la etiqueta. Ahora abre tu tipo dos al escribir el nombre de nuestro usuario, Cuál es el sesgo, Svensson. De acuerdo, cambiemos el frente dos STD Circular. Cambia la letra. Espaciado 0%. El tamaño de la forma es de 20 píxeles y el color es blanco. Ahora, STD
Circular es una forma más legible que el noi de Baba. Colóquelo 10 píxeles a la derecha desde el borde del rectángulo. De acuerdo, este va a ser nuestro campo de entrada otra vez. Duplica este grupo sosteniendo viejo y arrástralo hacia abajo y de nuevo con 30 píxeles. De acuerdo, Nombramos este número de tarjeta del dedo del pie y cambiamos el nombre de la etiqueta así como a número de tarjeta escribiendo un número aleatorio de
16 dígitos que se agrupa en cuatro grupos por cuatro dígitos y se separa con guiones. Esto simbolizará el número de tarjeta, oro o activos, Penhall. Y agarra la carta de monstruo bajo y tómela en nuestro número de tarjeta. Te sentirías moverlo. 10 píxeles a la izquierda, desde el borde de la derecha fuera del rectángulo. De acuerdo, estamos agregando el logotipo para que el usuario pueda obtener una retroalimentación visual de que esta es una tarjeta existente y todo está bien. Recuerda cuando trabajes con datos sensibles como este. Es primordial que brindes al usuario comentarios. Genial. Ahora repasémoslo o panel de activos otra vez y agarramos el ícono de error y lo
movamos a nuestro lienzo. Colóquelo en el mismo lugar que el logotipo de MasterCard, pero escóndelo haciendo clic en el globo ocular a tu lado. Este icono aparecerá si se trata de un número de tarjeta de crédito. Además, bien en etiqueta de error debajo del campo de entrada que dice número de tarjeta es Valle. Inténtalo de nuevo. Cambiemos la forma a 12 píxeles y usemos el mismo color que el error, que es E B 001 B. Vamos a ocultarlo por ahora. Que vamos a seleccionar nuestro logotipo de MasterCard y colocarlo en nuestro grupo de números de tarjeta. Ocultemos el ícono del aire haciendo clic en el globo ocular que hay junto a él. Seleccione el grupo de números de tarjeta y vuelva a duplicarlo sosteniendo el molde y arrastrándolo hacia abajo y moviendo 30 píxeles hacia abajo desde el campo de entrada del borde fuera del campo de entrada para el número de tarjeta. Ahora este techo será la fecha de caducidad para tarjeta de crédito. Cambie el nombre y cambie el pozo de LaBella. Ahora vamos a eliminar el logotipo del músculo car, el nivel de terror y el icono de error. Ya que no los necesitamos. Cambia esto a octubre de 2000 y 20 los cuales indicarán la fecha de caducidad de un automóvil. Ahora no hace falta que este rectángulo sea tan grande Celeste. Ajustar con él. Ahora selecciona esta etiqueta y un rectángulo y centralos hacia arriba. Genial. Ahora selecciona grupo de fecha de caducidad y vuelve a competir sosteniendo viejo y arrástralo a la derecha esta vez y se casó 30 píxeles a la derecha. Esta serán las tarjetas número serio que se va que se encuentra en el dorso fuera de la tarjeta. Ahora es un número de Egipto de trato. Pero lo vamos a ocultar poniendo asteriscos en paso. Selecciónelos ambos con el rectángulo y centrar hacia abajo hacia arriba. De acuerdo, vamos a esconder nuestro llamado a la acción fondo y vamos a cambiar los palos para echar un vistazo. De acuerdo, ahora tenemos nuestros boletos de libro. Diseño Queen. Nos vemos en el siguiente video
10. Pantalla del calendario: Bueno, hola otra vez. Niños y niñas en este video se sumergirán en profundidad y diseñarán una pantalla de calendario para su aplicación . La pantalla del calendario es un lugar donde el usuario puede escoger una fecha en particular del mes y comprobar si hay fiestas disponibles para ese día. Ahora hablemos aquí de algunos escenarios de casos reales. No hay fiesta disponible cada fecha la mayoría de mis clubes trabajan en los fines de semana y raramente en un día laborable. Eso significa que nuestro calendario debería permitirnos escoger fechas que estén debilitadas o cercanas a él. En nuestro caso, vamos a empezar desde el jueves hasta el domingo. Eso significa que los lunes, martes y miércoles están libres Para diferenciar entre qué días están disponibles y cuáles no, vamos a usar un estado con discapacidad. Un estado deshabilitado es un estado donde los elementos no son seleccionables. Eso significa que vamos a tener que hacer que se vean diferentes del otro elemento. Esto generalmente se logra cambiando el color y la capacidad del elemento. Está bien, basta de hablar. Pongámonos a los negocios. En primer lugar, abre tu rectángulo para dibujar un rectángulo que cubra toda la pantalla. Cambie el nombre a DJ y muévalo hacia abajo hasta la parte inferior, fuera de la pila de capas. Cambia el color de la misma a que adivinaste que es tu 71923 Vale, Como puedes ver, tenemos una copia sobre Heather Component colocado en nuestras cámaras. Vamos a diseñar la pantalla del calendario para que sea un recolector de modelos de pantalla completa. Para lograrlo, necesitamos hacer algunos cambios en nuestra salud. Como recuerdan, no
podemos hacer cambios, almacenar instalaciones, por lo que necesitamos actualizar nuestros componentes maestros, ir a su panel de activos, agarrar el ícono de la ropa y ponerlo en nuestro componente de masas, alineándose a la parte superior y derecha. Asegúrate de que encaje en los bordes y ve a nuestros componentes en cosas. Como se puede ver con Rep replicado que entro a nuestra instancia ahora bombo el icono del calendario en el ciclo de boletos, ya que no los dejamos finalmente cambió el título a nuestra instancia, también. Pick. Ellos Ahora vamos a diseñar son calendario real. Volver al panel RSS y agarrar este icono de flecha. Colóquelo sobre nuestro lienzo y alineándose a la izquierda, haga una copia
, levante sosteniendo, sosteniendo, arrastrándolo hacia la derecha. Haga clic en él y elija voltear horizontal para voltear horizontalmente. Abre tu tipo dos y escribe en el mes. Recuerda, el tamaño del teléfono es una fuente muy grande. El teléfono salta perno pero cambió el color a los saltos que hemos estado usando para los fondos . Centúrela en nuestra pantalla y selecciona iconos más antiguos. Y la obra Noviembre y agruparlos juntos llamó a su grupo Calendario Heather. Ahora vamos a crear los días calendario. Agarra de nuevo tu tipo dos. Estoy escribiendo la obra en ambos para el lunes. Cambia los teléfonos, espera a reservar. Cambia el tamaño del teléfono a 20 píxeles. El auto es blanco con 80% de capacidad alineado. Este trabajo al borde izquierdo de la pantalla. Ahora voy a publicar el video y duplicar este seis veces más para representar los siete días de la semana. Bienvenido de nuevo. Como pueden ver, he creado los días de la semana y los agrupo o los nombro días calendario. Ahora vamos a crear las fechas reales que tenemos. Vuelve a escribir dos y escribe en uno. Cambia el peso frontal de nuevo a ambos talla de 30 píxeles. El color es blanco y capacidad completa colocar esto bajo nuestro jueves es que es el comienzo del mes moviéndose 30 píxeles hacia abajo. De acuerdo, voy a volver a publicar el video y crear las fechas a través del calendario. Ahorra algo de tiempo. De acuerdo, chicos, bienvenidos de nuevo. Como puedes ver, hay bastante pasando. Entonces déjame explicarte. He alineado estos calendarios, Heller y Calendario días 50 píxeles de arriba fuera recoger una fecha. Y estos días calendario son 50 píxeles de abajo del calendario. Heyler He agrupado todos los roles indicando las fechas y los espacian 30 píxeles cada uno. Como puedes ver, los días de lunes a miércoles son de un color diferente que indica que no se puede hacer click. Este es el Estado de Desactivación. El pit off antes todo lo que hice fue cambiar la opacidad 30%. Este círculo aquí indica el estado del pie. Se trata de un 50 a 52 picks diámetro del océano y el color es lo mismo que se utiliza para botellas. Por último, tenemos nuestro llamado a la acción que aplica la fecha Selectiva y cierra el móvil. Este fondo aparece en Lee. Si seleccionamos la fecha eso es todo. Chicos no tendrían el diseño de pantalla del calendario. Te veo en el próximo video
11. Pantalla de video: Hola otra vez. Señoras y señores, bienvenidos de nuevo a nuestra serie En este video diseñará la pantalla de video. Aquí el usuario puede ver un video corto simple que representa a un deejay de la fiesta seleccionada si recuerdas de un video anterior sobre cómo diseñar la pantalla de fiesta única con agregado un video de masculino con un fondo de juego. Cuando el usuario toca ese Tamil, es redirigido a la pantalla de video. Ahora esta reina espera un modelo de pantalla completa, igual que nuestra pantalla de calendario. El usuario puede ver el video y controlar la línea de tiempo del video usando una barra lateral como por
lo habitual suficiente hablando. Pongámonos al negocio, Abre tu recto y dibuja un rectángulo que colorea toda la pantalla como de costumbre, renombrando a fondo BJP y, como de costumbre, bajando por nuestra pila de capas. Cambiemos el color del mismo por nuestro color favorito, que es el 071 93. Como se puede ver con la instancia del cielo o los componentes Hiller que necesitan cambiar, haga clic fuera del globo ocular para que el ícono del calendario, el ícono del boleto, la fecha y el título hagan clic en el globo ocular fuera del ícono de la ropa. Cuando el usuario toca el icono de la ropa, el móvil se cierra de nuevo a la pantalla de fiesta única. Sin movimiento ni a nuestros activos. Penhall. Agarra la imagen y muévala a nuestras cámaras. Esta es la misma imagen que hemos estado usando en nuestra pantalla de fiesta única, y va a representar nuestro video, hacerlo cuatro semanas y cambiar su bombo. 265 días libres. Posicionamiento al centro de la pantalla. Excelente unión izquierda a diseñar es la barra enferma. Agarra un ángulo recto para hacer clic en las paredes y que sea 345 píxeles en con y centralmente hacia arriba. Hacer la altura tres píxeles y cambiar el color de la misma. 103 cuatro para a. Esto representará las barras enfermas que crecieron duplicadas al presionar el control C y Control V y cambiar el color del blanco. Este serán los barrotes marinos tiempo transcurrido. Que sea 75 píxeles con Now, agarra un taburete de permiso y rápido uno. Haga clic en el icono de la cadena para delimitar las proporciones del círculo y cambiar los 25
píxeles de la semana . Esto cambiará automáticamente la altura a 25 píxeles también. Cambia el color del círculo blanco y colócalo para que sea Etch fuera del tiempo transcurrido. Este será el control de las barras enfermas, que el usuario puede ligeras. Cambiar los videos Tiempo Por último, abre tu tiempo a y tecleando cero carbón 16 barra uno Coal 30 Cambió la falla a STD
circular. El espaciado a cero El tamaño completo es de 16 píxeles en el frente. El peso es encuentro y el color es blanco lugares al borde derecho, en algún lugar por debajo de la Sigmar. Este número representa nuestro Stein del Electo y el enlace de video seleccionado. Seleccione los labios y los rectángulos y agruparlos. Cambie el nombre de estos gran bar organizando Baylor y eso es todo. Chicos no tendrían nuestro diseño de pantalla de video. Te veo en el siguiente video.
12. Pantalla de bollos: Bienvenidos de nuevo a los chicos y chicas serios en este video echarán un vistazo a cómo diseñar la pantalla de boletos como mencionamos antes. La pantalla de boletos es un lugar donde el usuario puede ver sus boletos de compra. Piénsalo como un tipo especial de billetera que existe en tu teléfono. Ahora hablemos con el diseño fuera del boleto real. Nos vamos a asegurar que fueran auténticos. Entonces vamos a diseñar el boleto virtual para que se asemeje a uno en tiempo real. Vamos a utilizar los mismos datos de nuestra fiesta. El boleto ha sido comprado para, como el nombre del deejay, el recinto con precio de entrada y cuándo comenzaríamos. Por último, vamos a utilizar un barco para nuestro boleto. Se requiere el código de barras para que las personas en la puerta que utilicen un tipo especial de
lectores de códigos de barras puedan autenticar el boleto. Vamos a utilizar en línea para generar el Barco, simplemente Google up generador de código de barras gratis y haga clic en la primera o la segunda consulta de resultados . Ahí se puede generar la imagen de código de barras y se puede duplicar como un archivo PNG. Además, estoy más por qué la imagen de código de barras en el panel de activos. Ahora, como siempre, basta de hablar y pongámonos a los negocios. En primer lugar, taladro
habitual. Crea el fondo, usando nuestro rectángulo a y nuestro color favorito. Seleccione, dirija y vaya dedo del pie. Hacer un tonto y altura completa. ¿ Verdad? Single Renombralo BG para fondo. Bajando por nuestra pila de capas. Cambia su color a 07123 Ahora, ya que la pantalla de tickets es una pantalla interna en nuestra aplicación, necesitamos proporcionar al usuario lejos para nunca volver. Ahora bien, si recuerdas de nuestra lección anterior respecto a la pantalla de fiesta única, hemos agregado un gran fondo para el componente Heather. Ve al Heller Component Systems y haz clic en los globos oculares fuera de todo excepto el Big Bottle, y el título cambió el título a mis hijos o a mi billetera si lo prefieres de esa manera. De acuerdo, vamos a diseñar el boleto real. Ahora agarrar direccionando Goto de nuevo y haga clic en paredes cambiar el color de fondo a blanco cambiado con el dedo del pie, 345 píxeles y el dedo del pie alto, 465 píxeles. Centra esto hacia arriba y cambia la esquina. cuatro pixeles de Brady Ahora en nuestro panel de activos, tenemos la misma imagen que hemos estado usando para fondo en las fiestas individuales Queen selectivo y nos trasladamos a nuestras cámaras. Asegúrate de que sea lo mismo con el rectángulo y para la altura que vamos a usar tener la altura fuera del rectángulo para hacerlo. Selectivo y mecanografiado. 465 píxeles divididos por dos en nuestro campo de entrada. Por aquí, podemos crear las ecuaciones matemáticas toe calcular automáticamente la altura de la imagen. De acuerdo, ahora agreguemos radio de esquina a esta imagen también. Haga clic aquí para agregar esquinas independientes y escribir para píxeles. En el 1er 2 entradas, esto actuará para los píxeles. Esquina es a la parte superior izquierda y a la esquina superior derecha, respectivamente. Ahora viene la parte divertida. Seleccione el taburete lib y haga clic en los. Clip este cambiante para restringir las proporciones del círculo y escribir 35 píxeles para la semana. Selecciona el círculo en su lugar a D H R. Para conseguir verás las líneas rojas chasquean. De acuerdo, selecciona el círculo y copia sosteniendo viejo y arrastrándolo hacia la derecha. Asegúrese de que la copia se encaja también. Genial. Ahora selecciona ambas elipses y agruparlas. Asegúrate de hacer una copia de ellos presionando el control C en tu teclado. Ahora selecciona tanto el rectángulo en los círculos sosteniendo nave como puñetazos. Restar selección. Ya ves, esto hace un boleto como rectángulo. Mueve el restar aquí abajo, y asegúrate de que basaste los círculos previamente Kobe. Controlaría el en tu teclado. Ahora coloca este grupo por encima de la imagen y selecciona tanto la imagen como los círculos. Y resta de nuevo la euforia. Agrupar todo juntos. Y nombramos a estos ukip beat. Ahora tenemos un tiempo real para llegar aquí. Ahora coloquemos los datos. Copiar la información de nuestra pantalla de fiesta única y basarla. No tu cámara asegúrate de que sea la línea central y moviendo 30 píxeles desde la parte superior. Ahora todo es igual excepto esto el nombre del DJ en nombre del recinto nuestro centro alineado. El último que hay que hacer a nuestro boleto es dedo del pie en el ladrido apagado. Más al panel RSS, seleccione un código de barras que he proporcionado y colóquelo en nuestro lienzo. También puedes, como ya he mencionado antes, hacer tu propio código de barras yendo en línea y buscar convertidores de código de barras gratuitos. bien. Lo último que hay que hacer es agrupar todo y vigilar un boleto. También podemos hacer un componente fuera del boleto. Así que haga clic en grandes componentes y películas fuera copia, pero sosteniendo viejo y arrastrándolo de nuevo hacia la cámara. Ahora, si compras más de un boleto, hagamos un café. Huechala para ser auténtico. Y eso es todo para la lección de hoy. Chicos, los
veo en el próximo video.
13. Pantalla vacía: bienvenido al segundo video encima de la pantalla de boletos, la pantalla de estado vacío. En este breve video, aprendemos a diseñar en estado vacío para obtener pantalla. Ya que la pantalla de boletos es accesible desde nuestra pantalla de inicio, a k a. la pantalla de fiesta. Existe la posibilidad de que esta reina no tenga ningún contenido, ve el usuario. Todavía no hemos comprado ninguna entrada para este propósito estamos diseñando en Empty State, que mostrará si no hay boletos en la pantalla de figuras. Si recuerdas, mencionamos esto en el usuario para video. Cómo debe verse una pantalla vacía como los elementos son algún gráfico apropiado, un mensaje que explica por qué aquí no hay contenido en una llamada a la acción que hará que el usuario haga algo en nuestro caso. Compra boletos. Entonces sin más preámbulos, pongámonos a los negocios. Asumo que ya has creado tu fondo, usando el rectángulo a en nuestro color favorito. Si no, hazlo ahora estamos usando el mismo Heller. Ahí hay una pantalla de boletos donde tenemos un fondo grande y un título de pantalla ahora en nuestro
panel de activos . He proporcionado el gráfico para esta lección. Agarra y colócala en nuestras cámaras. Como puedes ver, esto es lo mismo que Michael estaba usando en nuestro componente de cabello para vincularnos a los boletos Queen solo más grande y un color diferente. Colócala en medio de nuestras cámaras. Ahora abre tu tipo,
también, también, y tecleando. Parece que no tienes hijos. Barco cambió los cuatro lados a esto. 30 quita el teléfono. Espera, Es regular y el color es blanco. Lo último que hay que hacer es centrar. Alinee este texto y asegúrese de que encaje en nuestra pantalla rompiendo estas palabras. Ahora colócala. 30 pesos no son gráficos y forro central para Kemalist. Por lo que tanto el gráfico como el texto y agruparlos centro los alineó al molino fuera de nuestras cámaras. Ahora lo último que hay que hacer es remolcar en el llamado a la acción, copiar y pegar la dirección de código de nuestras pantallas anteriores y cambiar el contenido para reservar boletos. Ahora asegúrate de que esta es la línea central y 15 píxeles desde abajo. Eso es, chicos. Lo hemos convertido en el diseño final para la aplicación. Te veo en el próximo video donde discutiremos las cosas que hemos aprendido hasta ahora y prepararemos para el reto. Muchas gracias por su atención.
14. Conclusión: Bienvenidos a la conclusión de cristal, chicos. En primer lugar, quiero decir Enhorabuena por terminar este vaso. Gracias por ser mi público. Sinceramente espero que te guste algo de estos Siri para recapitular. Aprendemos a diseñar un flujo de usuario, una persona de usuario y muchos tipos de pantallas que para una aplicación móvil a lo largo de los videos en salpicados consejos útiles que contribuyen a una buena experiencia de usuario. Recuerda, el usuario es clave para cualquier negocio, y siempre debes diseñar para el usuario. Pienso en la aplicación como algún artilugio de fantasía que sirve de herramienta para el usuario,
cuanto más fácil pueda hacer las cosas, mejor tanto para él como para las muertes de negocios. ¿ Estabas pisando la experiencia del usuario? Los diseñadores se aseguran de que los usuarios se sientan cómodos al usar sus aplicaciones. Y ahora el reto en realidad dos retos. La primera parte es diseñar la pantalla de éxito y la pantalla de error. Si recuerdas cuando el usuario compra los boletos, se
le redirige a la reina de éxito o errores. Dependiendo del resultado de la compra, el reto es diseñar esas reinas usen las técnicas que has aprendido en estos videos para lograrlas o podrías pensar que tienes una mejor solución. Adelante y úsalo. La segunda parte es diseñar Ah toda la app de reserva utilizando las técnicas que has aprendido hasta
ahora. El up puede ser para donde estaban. Te gusta la reserva de hotel, los boletos de
avión, reserva de mesa, etcétera. Yo lo vivo para que tú lo decidas una vez más. Gracias por ser parte de mi clase. Y espero volver a encontrarte en el futuro Siri's por
Angel Davchev, UI/UX Designer
