¿Cómo hacer un diagrama de visualización de una aplicación? ¿Cómo diseñar la página de apertura de la aplicación? Consulte estos cinco métodos de uso común.
Lo que vamos a hacer esta vez es una imagen de visualización del efecto APP de 5 s.
Pasos:
1. Cree un nuevo lienzo con un tamaño de 640*1136, guárdelo y asígnele el nombre: Plantilla de renderizado 5S.
2. Crea un nuevo lienzo y asígnale el nombre: Render.
2. Crea un nuevo lienzo y asígnale el nombre: Render.
El tamaño es arbitrario, puedes hacerlo más grande y comprobarlo tú mismo.
3. Arrastra la plantilla de renderizado 5S. El psd que acabas de guardar en el lienzo.
Ctrl+T para transformar al tamaño apropiado e inclinar al efecto de perspectiva apropiado.
4. Luego haga doble clic en la capa "Plantilla de renderizado 5S".
Saltar al final de esta imagen.
Arrastra hasta la interfaz que quieras hacer.
5. Regresar a esta página de demostración. NOTA: Aquí se omite un paso. Arrastra la capa que acabas de guardar.
Duplicar una capa.
Mantenga presionada Opción(Alt)+botón izquierdo del mouse y arrastre la capa hacia abajo, o Comando(Ctrl)+J, seleccione la capa siguiente, haga doble clic en la capa para ingresar el estilo de capa y seleccione Bisel. y Relieve, establezca los parámetros.
Los parámetros los puede ajustar usted mismo. Entre ellos, el ángulo de sombra de 45° se puede ajustar según la luz ambiental. La transparencia del modo de sombra es arbitraria, dependiendo de la situación.
6. Luego, copie varias capas en sucesión comenzando desde la segunda capa. Cada capa duplicada está debajo de la capa anterior y cada capa duplicada se mueve hacia abajo un píxel. Mantenga presionada la opción (Alt) + botón izquierdo del mouse y arrastre la capa hacia abajo; esto se puede controlar usando la tecla de flecha hacia abajo en su teclado.
Luego, establece una sombra paralela en la última capa.
Luego, establece una proyección en la última capa y los parámetros se resolverán solos.
Por último, ajuste el entorno general.
La ventaja de este tutorial es que utiliza objetos inteligentes, lo que permite reemplazar a voluntad la interfaz que desea mostrar.
Si desea mostrar el efecto de múltiples interfaces, solo necesita arrastrar unas cuantas veces en el PSD, organizar los planos y luego ajustar el efecto de perspectiva de manera uniforme.
Por supuesto, hay muchas formas de expresión, y la anterior es solo una de ellas.
Por ejemplo, también puedes dibujar un rectángulo de 640×1136 en un lienzo grande, luego convertirlo en un objeto inteligente y hacer doble clic en el objeto inteligente para ingresar ajustes.
El método adjunto de @Zheng tiene el mismo principio y detalles más ricos.
Hay miles de maneras de lograr un efecto. Aquí solo proporcionamos una idea simple, producida con PS puro.
Primero, distorsión y radial
Importe el diagrama de la interfaz, luego edite, distorsione y luego gire para lograr los siguientes efectos:
2. Espesor de producción. /p>
Este paso es el más crítico. Seleccione la capa de interfaz, [Ctrl+Alt+T], luego haga clic en la tecla de flecha [ ↑] y presione Entrar. Esto duplicará una capa y moverá la nueva capa un píxel hacia arriba del original.
Vamos, presiona [Ctrl+Alt+Shift+T] para repetir la operación de transformación anterior. Esto copiará muchas capas y cada capa subirá un píxel según la capa anterior. para lograr el efecto de espesor.
En tercer lugar, cambie el brillo
Conserve la capa superior y combine todas las demás capas de la interfaz en una sola capa, llamada [espesor].
Luego seleccione la capa [Espesor], use la herramienta Marco rectangular + [Imagen-Ajuste-Contraste de brillo] para reducir el brillo en los lados izquierdo y derecho del espesor en 20 y 50 respectivamente.
Cuarto, Sombra
Duplica la capa [aplicación], cambia el orden de las capas a [Espesor] e inferior, luego usa [Desenfoque gaussiano] + superposición de color a negro + cambia la opacidad. 30%. lo superó.
Bien, eso es todo acerca de cómo usar PS para convertir imágenes en representaciones de aplicaciones.
¿Lo has aprendido?
Cómo hacer un diagrama de visualización del diseño de UI. El proceso de producción de íconos de interfaz en el diseño de UI.
1. Boceto de íconos. etapa;
p>
3. Etapa de renderizado del boceto.
Suplemento:
1. Cree un nuevo lienzo del tamaño requerido en PS y guárdelo, denominado Plantilla de representación de diseño de interfaz de usuario.
2. Cree un nuevo lienzo y asígnele el nombre Interface UI Design Rendering Display. El tamaño es arbitrario.
3. Arrastre la plantilla de representación del diseño de la interfaz de usuario guardada. psd a lienzo. Ctrl transforma al tamaño apropiado e inclina al efecto de perspectiva apropiado.
4. Luego haga doble clic en la capa de la plantilla de representación del diseño de la interfaz de usuario.
Suplemento: UI es la abreviatura de interfaz de usuario. Generalmente se refiere a la interfaz operativa del usuario, incluidas aplicaciones móviles, páginas web, dispositivos portátiles inteligentes, etc. El diseño de la interfaz de usuario se refiere principalmente al estilo y la belleza de la interfaz. En términos de uso, la interacción persona-computadora, la lógica de operación y el diseño general de la hermosa interfaz del software son otros aspectos igualmente importantes. Una buena interfaz de usuario no solo hace que el software sea personalizado y de buen gusto, sino que también hace que su funcionamiento sea cómodo, simple y gratuito, reflejando plenamente el posicionamiento y las características del software.
¿Cómo diseñar la página cuando se abre la App? Echemos un vistazo a estos cinco métodos comúnmente utilizados. ¡Las primeras impresiones son importantes! Muchos usuarios juzgarán si pueden confiar en esta empresa o producto basándose en la imagen inicial de la aplicación/sitio web.
Entonces, ¿cómo solucionar el problema de la percepción rápida? En primer lugar, centrarnos en la primera impresión que nos aporta la App. Una página de inicio razonable puede estimular la mente subconsciente del usuario y ayudar a atraer y retener a los usuarios adecuados.
Antes de profundizar en las estrategias de diseño, primero aprendamos los conceptos básicos de las pantallas de presentación.
La pantalla de inicio se refiere a una serie continua de experiencias, desde el momento en que el usuario hace clic en el icono de la aplicación hasta que carga el contenido. Por lo general, incluye los siguientes cinco formularios:
1. Icono de la aplicación (el primer enlace para participar en la experiencia de inicio)
2. Pantalla de inicio (página de pantalla abierta)
.3. Abra la página de pantalla y salte a la página de contenido
4. Tabla de inicio de la pantalla esqueleto (para cargar)
5.
La página de inicio es la entrada a la experiencia del producto. Al simular tiempos de carga más rápidos, crea una experiencia de inicio perfecta y mejora la experiencia del usuario.
El diseño no sólo se centra en la apariencia, sino también en la solución de problemas concretos del usuario. ¿Qué problemas puede resolver una página de presentación?
-Comunicar con los usuarios de forma subconsciente y establecer expectativas para el futuro;
-Reducir el tiempo de espera percibido ocultando el proceso de carga;
-A los usuarios presentar el propósito y marca de la App;
-Proporcionar a los usuarios una experiencia agradable.
Al resolver los problemas, resumimos cinco formas de abrir el diseño de la página, que pueden atraer efectivamente la atención del usuario.
A partir de iOS10, los desarrolladores pueden personalizar iconos predefinidos. Bear permite a los usuarios ajustar el color de los iconos según los colores del tema.
MLB permite a los usuarios seleccionar su equipo favorito como icono de inicio.
La página de lanzamiento es como una campaña de marketing continua porque los usuarios quedarán más impresionados con la marca cada vez que abran la aplicación.
Al agregar un eslogan o una imagen icónicos a tu página de lanzamiento, no solo enfatizas el uso de tu aplicación, sino que también estableces ciertas expectativas para los usuarios.
Por ejemplo, las tres aplicaciones de la imagen de arriba colocan el logotipo de la marca en la página inicial, lo que estimula directamente los sentidos del usuario.
Las tres aplicaciones anteriores, History, DocuSign (un servicio de firma electrónica) y Ted, fortalecen su propuesta de valor agregando eslóganes en la pantalla de inicio.
Hay un tiempo de carga perceptible desde que se hace clic en el icono hasta que se carga el contenido. Si se agregan animaciones apropiadas durante este período, los usuarios podrán comprender el estado del producto de antemano.
Las tres aplicaciones en la imagen de arriba utilizan animación para construir un puente perfecto entre la página de pantalla abierta y la página de contenido.
Aplicaciones como Google, TinyFax y Cinamatic utilizan animaciones para transformar inteligentemente iconos en contenido.
De manera similar, aunque las animaciones utilizadas por las tres aplicaciones anteriores no son muy refinadas, aún pueden completar la transición desde la página inicial al contenido.
Los efectos dinámicos de algunas aplicaciones se mantienen simples y el logotipo solo se usa como resaltado, como se muestra en la imagen de arriba.
El restaurante de comida rápida Chick-fil-A agregó una animación rápida en la página de inicio, guiando exitosamente a los usuarios a la página de contenido.
Para la mayoría de las aplicaciones, tiene más sentido usar una pantalla abierta más una pantalla esqueleto, porque las aplicaciones livianas generalmente se cargan muy rápidamente y la pantalla esqueleto puede brindar una experiencia más fluida.
Estas aplicaciones precargan el contenido de la página de inicio en la página de inicio, y Breathe utiliza un esqueleto de color similar al contenido de la página de inicio. Transit (derecha) utiliza el esqueleto del mapa como página de inicio, lo que facilita a los usuarios hacer clic directamente después de la carga.
La aplicación en la imagen de arriba utiliza precarga y animación para captar la hora, dando a las personas la sensación de "llegar pronto".
Snow, Dribbble y LaunchPro utilizan muy pocos estados de esqueleto en comparación con aplicaciones anteriores.
Algunas aplicaciones necesitan cargar muchos datos al iniciarse, como vídeo y audio, por lo que el tiempo de carga es muy largo.
Para este tipo de aplicaciones, una animación un poco más larga tiene más sentido. A medida que mejoran los tiempos de carga y almacenamiento en caché de datos, las animaciones pueden volverse cada vez más cortas.
La aplicación en la imagen de arriba utiliza animación para cargar datos y brindar a los usuarios tiempo para recibir comentarios.
Clashem, Tumbleweed y Chefsfeed utilizan animaciones divertidas para cargar datos y mejorar la experiencia de marca.
Después de leer tantos casos, ¿cuánto tiempo se mostrará la pantalla de inicio? Esto debe tener en cuenta la configuración de la aplicación y el tiempo necesario para cargar los datos.
Personalice la experiencia de inicio para adaptarse a diferentes tiempos de uso y usuarios:
Los usuarios en cada etapa deben tener diferentes experiencias de inicio;
Al elegir un inicio razonable Antes páginas, considere el tamaño de la aplicación;
Utilice imágenes para transmitir información, con animaciones como guía;
Utilice iconos únicos para la marca siempre que sea posible.
Espero que el artículo pueda ayudarte a obtener algo~
Recomendaciones maravillosas:
1. Habla sobre la aplicación del diseño de tarjetas.
2. Análisis de Casos: Diseño de trazado de sistema reticular.
3. ¿Cómo diseñar un modo oscuro? Es necesario considerar los tres factores.
4. Análisis en profundidad: diseño de lógica de aplicación del plan de servicio.