diseño de plantilla de interfaz de usuario: cómo usar ps para el diseño de interfaz de usuario (tutorial de diseño de interfaz de usuario para ps)

El proceso de producción de iconos de interfaz en el diseño de la interfaz de usuario:

1. Etapa creativa del icono;

2. etapa de dibujo;

3. etapa de renderizado de bocetos.

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 Visualización de efectos de diseño de interfaz de usuario. Cualquier tamaño.

3. Arrastre la plantilla de efecto de diseño de interfaz de usuario .psd que acaba de guardar en el lienzo. Presione Ctrl + T para transformar al tamaño apropiado e inclinarlo al ángulo de visión apropiado.

4. Luego haga doble clic en la capa de plantilla de efecto de diseño de interfaz de usuario.

Suplemento: UI es la abreviatura de interfaz de usuario. Se refiere a interfaces de 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 estética de la interfaz. El diseño de la interfaz de usuario se refiere principalmente al estilo y la estética de la interfaz, mientras que el diseño general del software, como la interacción persona-computadora, la lógica de operación y la estética de la interfaz, es otro aspecto igualmente importante. 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 usar PS para el diseño de UI (tutorial de diseño de interfaz de PS UI)

Pasos:

1 Cree un nuevo lienzo con un tamaño de: 640*1136, luego guárdelo y asígnele un nombre. it: Visualización de efectos

2. Crea un nuevo lienzo y asígnale el nombre: Visualización de efectos

2. Crea un nuevo lienzo y asígnale el nombre: Visualización de efectos

2. Crea un nuevo lienzo y nómbralo: Visualización de efectos

El tamaño puede ser tan grande o pequeño como quieras, dependiendo de la situación.

3. Arrastra la plantilla del efecto 5S.PSd que acabas de guardar en este lienzo.

CtrlTransforma al tamaño adecuado e inclina hasta el ángulo de visión adecuado.

4. Luego haga doble clic en la capa "Plantilla de efecto 5S".

Este es el beneficio de los objetos inteligentes.

Salte a esta interfaz

Arrastre a la interfaz que desea hacer:

Luego guarde: Comando (Ctrl) S, Cerrar: Comando (Ctrl) W

5. Regresar a la página de visualización

Nota: Aquí se ignora un paso, simplemente guarde la capa arrastrada. Los estudiantes deben entenderlo_-

Copiar una capa:

Mantenga presionado el botón izquierdo del mouse Opción (Alt) y arrastre la capa hacia abajo, o presione Comando (Ctrl) J, seleccione la capa A continuación, haga doble clic en la capa para ingresar el estilo de capa, seleccione bisel y relieve y establezca los parámetros:

Los parámetros los puede ajustar usted mismo. El ángulo de la sombra es de 45°, que puede ser. Ajustado según las condiciones de iluminación del entorno, el modo de transparencia de la sombra es opcional, puedes ajustarlo según la situación.

6. A continuación, copie varias capas comenzando desde la segunda capa. Cada capa copiada está debajo de la capa anterior. Cada capa copiada se mueve hacia abajo un píxel. arrastre la capa hacia abajo, lo que se puede controlar con las teclas de flecha del teclado.

Luego, establece la proyección en la última capa.

Luego, establece la proyección en la última capa y calcula los parámetros.

Por último, ajuste el entorno general. Cómo hacer un buen trabajo en el diseño de interfaces de usuario

Un buen diseño de interacción juega un papel muy crítico en el éxito del producto. La interfaz de usuario es lo primero con lo que los usuarios entran en contacto y, en general, lo único con lo que entran en contacto. El usuario está mucho más preocupado por los efectos visuales de la interfaz y la facilidad de uso del software que por el tipo de código que se implementa en el código subyacente. Si los programas son músculos y huesos humanos, entonces el diseño de la interfaz de usuario es apariencia y personalidad humanas. ¡Ambos son componentes esenciales e importantes de un producto de software exitoso! No sé mucho sobre programación, así que solo hablaré desde la perspectiva de la relación general entre el diseño de UI y los productos de software y cómo obtener el mejor diseño de UI para productos de software.

Nuestros productos de software actualmente tienen algunos problemas técnicos, pero más problemas surgen de la cooperación entre varios departamentos y equipos de proyecto. Nuestro proceso de desarrollo existente generalmente implica que el departamento de marketing proponga los requisitos del cliente, los diseñadores de productos propongan informes de diseño de productos, el departamento de desarrollo diseñe un plan de desarrollo, cada equipo desarrolle un módulo y finalmente lo integre en un producto de software completo. ¿Qué parte del diseño de la interfaz de usuario debería estar involucrada entre estos procesos y hasta dónde debería llegar cada parte para lograr el mejor efecto de diseño de la interfaz de usuario para el producto? A continuación realizaremos un análisis detallado de cada parte.

En primer lugar, analicemos los problemas existentes en algunos productos de software relativamente desarrollados en la industria del software, el diseño de la interfaz de usuario recorre todo el proceso de desarrollo del software, de principio a fin, y es indispensable. En China, el diseño de la interfaz de usuario del producto aún no ha sido ampliamente aceptado. Incluso algunas empresas que ya tienen diseñadores de interfaz de usuario no prestan suficiente atención a la interfaz de usuario del producto. En términos generales, se centrarán en cómo utilizar el código para realizar sus ideas. En mi opinión, esto es sólo una parte de un producto de software exitoso. Un excelente proceso de desarrollo de productos de software debe constar de cuatro partes:

1. Diseño de productos de software (modelado de negocio)

2. Diseño de sistemas (modelado técnico)

. 3. Desarrollo de subunidades (divida cada parte del software en código de subunidad)

4. Pruebas (divididas en pruebas unitarias, pruebas de integración del sistema y producto). Las pruebas (pruebas unitarias, pruebas de integración de sistemas y pruebas funcionales de productos) las realiza el departamento de desarrollo de software.

Además de las cuatro partes anteriores del proceso de desarrollo de software, también existen los requisitos del usuario y las pruebas de aceptación del usuario. Estos dos procesos los completan el departamento de marketing y los usuarios del producto, respectivamente. Por lo tanto, el código que implementa la funcionalidad del producto (el proceso de codificación) es sólo un paso en el desarrollo de software. Ahora volvamos a la perspectiva del diseño de UI. Como diseñadores de UI, debemos participar en el proceso de desarrollo de software, en lugar de simplemente participar en un determinado paso. Los diseñadores de UI en la mayoría de las empresas de software solo participan en el proceso de codificación del producto. Participar sustancialmente en el proceso de desarrollo de software, mientras solo participa o incluso no participa en otros pasos (enfatizo "participación").

Lo que quiero enfatizar es que "participar" y "participar" son dos conceptos diferentes. "Participar" se refiere a participar plenamente en la etapa de diseño del proceso de desarrollo, mientras que "participar" se refiere simplemente a escuchar la reunión o hacer algo simple. sugerencias opiniones sin comenzar a entrar en la etapa de diseño), esto reducirá en gran medida la eficiencia del desarrollo de productos de software, duplicará los costos de desarrollo e incluso conducirá al fracaso del producto. Esto no es alarmista. Analicemos hasta qué punto se debe realizar el diseño de la interfaz de usuario durante el proceso de desarrollo de un producto de software para evitar los problemas anteriores.

Ahora explicaré los problemas anteriores en función del proceso de desarrollo de software. Hace un momento mencioné varios pasos en el proceso de desarrollo de software, 1. Modelado de productos

2. p>

3. Desarrollo del módulo

4. Pruebas, luego también lo dividiremos en estas cuatro partes para discutir:

Período de modelado del producto:

Primero comprendamos "entrada" y "salida", dos conceptos muy importantes en el diseño de la interfaz de usuario. La gente suele venir a mí y decirme: "Tenemos un producto de software que necesita ser embellecido" y luego nada más. , solo esta frase inició mi trabajo, pero ¿para quién es este software? ¿Qué hace? ¡No lo sabemos! Un diseño de interfaz de usuario exitoso primero debe tener una "entrada" completa. ¿Cómo se puede llamar una "entrada" completa? Los diseñadores de UI deben involucrarse desde la etapa de planificación de todo el producto de software. Una vez que los usuarios del producto (es decir, los clientes) presentan los requisitos del producto al departamento de marketing o al departamento de producto, deben comenzar a participar en el proceso de planificación y desarrollo del producto. Esta parte del trabajo es la primera etapa de inversión para los diseñadores de UI. En esta etapa, el diseñador de UI también debe presentar algunas opiniones sobre el diseño de interacción del producto. Deje que el departamento de producto considere la interactividad del producto y el principio de expresión simple de funciones al diseñar productos. Se agregan muchos software con muchas funciones adicionales durante la etapa de diseño, pero de hecho, un buen diseño de software es utilizarlo. La estructura más simple para implementar las ideas del usuario, algunas funciones prescindibles que parecen sofisticadas y que a menudo afectan el juicio del usuario. Estos son algunos conceptos de optimización del producto, solo necesito mencionarlos brevemente aquí. Si desea estudiarlos en profundidad. En algunos libros sobre optimización de productos e incluso libros de psicología, mucha gente piensa que la optimización del software es la optimización del código (usar la menor cantidad de código para lograr la función del producto, en mi opinión, esto es solo la optimización del programa por parte de los programadores). Ahora bien, la mayoría de los diseñadores de interacción en las empresas de software no son buenos en esta parte, por lo que a menudo se ignora esta parte. Al comienzo del artículo, el diseño de UI no es solo el diseño de interfaces gráficas. Incluso si la empresa tiene tales optimizadores o diseñadores de interacción, aún necesitan completar el diseño de interacción del producto con el diseñador de UI. el producto Interactividad y diseño. La interactividad del producto y la facilidad de uso son factores que los diseñadores de UI deben considerar al diseñar.

Volviendo al tema, los diseñadores de productos a menudo no piensan demasiado en el principio de simplicidad y facilidad de uso, es decir, qué tipo de combinación de productos se presenta a los usuarios. los diseñadores tienen que considerar más, por lo que los diseñadores de UI deben involucrarse durante el modelado del diseño del producto y darles algunas sugerencias a los diseñadores de productos. Como excelente diseñador de UI, también necesitamos tener una comprensión más profunda del entorno de uso del producto y los hábitos de uso del grupo de usuarios después de comprender las necesidades del producto. También necesitamos comprender el diseño de productos de software similares en el mercado, estudiar sus ventajas y desventajas, para aprender de los puntos fuertes de cada uno y evitar cometer sus errores en nuestro diseño. Después de modelar el producto, el diseñador del producto generalmente explica el diseño funcional al cliente. A menudo, esta explicación es solo textual y el cliente debe imaginarla y comprenderla. Esto causará grandes peligros ocultos. Algunos clientes simplemente no pueden entender su explicación. Incluso tal explicación, no escuchan atentamente porque no entienden nada durante el proceso de discusión, a menudo están de acuerdo con todas las ideas de diseño del diseñador del producto, sin embargo, cuando se prueba el producto, lo hacen. Genera varias insatisfacciones. Creo que esto es lo que encontrarán la mayoría de las empresas de software. También es el problema más problemático, pero esto no se puede culpar al cliente. Yo digo que los clientes solo se preocuparán por los efectos visuales y el funcionamiento del software. cómo logramos todo esto.

La consecuencia directa de esta situación es que el producto se modifica repetidamente y el coste de desarrollo se duplica. Esto depende del diseñador de la interfaz de usuario. Como dice el refrán, "ver para creer, oír para creer", por lo que el diseñador de la interfaz de usuario debe realizar una demostración del efecto general del producto. Esta demostración se puede expresar en forma de imágenes. Solo necesitamos crear una interfaz que pueda reflejar el efecto del producto, ¡porque esta no es la apariencia final del producto! Este no es el aspecto final del producto, pero tiene como objetivo ayudar al diseñador del producto a explicar el diseño del producto al cliente. Durante el modelado del producto, el diseñador de la interfaz de usuario debe comprender las necesidades e ideas del cliente y la comprensión profunda del diseñador del producto de los requisitos funcionales del producto, recopilar las necesidades de uso del usuario, el entorno de uso y los hábitos de uso, comprender el diseño de productos similares en el mercado. y analizar sus ventajas y desventajas. Ayudar a los diseñadores de productos a completar el proceso de modelado del producto y crear demostraciones de productos, simular los procesos de operación del usuario y la presentación de la interfaz de las funciones principales, y generar prototipos interactivos (básicamente, la interactividad del producto y la facilidad de uso deben abordarse durante el modelado del producto). Si el tiempo lo permite, incluso podemos proponer un "informe de análisis de diseño de UI", que se puede adjuntar a la descripción del diseño del producto para ayudar de manera más efectiva a los clientes a comprender el diseño de nuestro producto y ayudar a los desarrolladores a seguir mejor los requisitos generales del trabajo de desarrollo completo de UI. La clave de este período es el "diseño de interacción".

II. Período de modelado técnico:

En este período, como diseñadores de UI, hemos entendido los requisitos funcionales del producto de software y hemos recibido orientación sobre el diseño del producto por parte del diseñador del producto. luego ingrese al proceso de diseño de estilo de interfaz. En este momento, debemos considerar más sobre el estilo general y el diseño de la interfaz del producto. Por lo general, también haremos varios planes para que los clientes elijan. Algunos clientes requerirán que el producto siga un estándar de diseño VI general. En este caso, debemos diseñar la interfaz del software de acuerdo con el estilo general determinado para que coincida con la imagen corporativa de la empresa del cliente. Durante este período, el diseño de la interfaz de usuario del software ha entrado en la etapa de diseño artístico. Necesitamos formular el estilo de todo el software, dar forma a la imagen general del software y describir específicamente los elementos, el diseño, las fuentes de texto y otra información. cada interfaz. No diré mucho en esta etapa. Lo principal es que cada diseñador de UI debe utilizar su experiencia artística para expresar el producto de software con la interfaz más simple y hermosa. Cabe señalar que cuando diseñamos el estilo general, debemos tener un conocimiento profundo del concepto del producto y ver para qué se utiliza. Diferentes productos tienen diferentes estilos. Aquí hay muchos detalles: diferentes productos, productos similares, diferentes contenidos y diferentes medios de comunicación determinarán el estilo del diseño de la interfaz de usuario. 1. Diferentes productos: por ejemplo, un producto de juego necesita hacer que la interfaz sea más elegante o llenarla con imágenes grandes, si es una aplicación de software, debe resaltar la facilidad de uso y un diseño funcional potente. : por ejemplo, un producto de juego lindo (como un juego de dibujos animados) debe hacer que la interfaz sea animada y linda, si es un juego de rol de combate (como un juego de tiroteo), debe ser atractivo y profundo; 3. Diferentes medios de comunicación: si los productos de software que necesitamos crear deben difundirse en Internet, debemos considerar la velocidad de la red; algunos también utilizan CD como medio, para que el software pueda realizar algunos efectos sofisticados. Estos productos diferentes también deben considerarse por separado, lo que también requiere que los diseñadores de UI sepan más sobre los productos y se comuniquen constantemente con los clientes. Cabe señalar también que en el proceso de diseño gráfico debemos realizar un diseño interactivo en la etapa anterior y siempre prestar atención a la interactividad y facilidad de uso del producto. Durante el proceso de diseño, debemos hacer representaciones de cada estructura y paso. No podemos simplemente proporcionar íconos, botones, imágenes de fondo, etc., para que los programadores no sepan dónde colocar estas cosas. Durante este período, debemos finalizar La representación. de la interfaz del software. El modelado técnico generalmente lo completan programadores senior, quienes dividen todo el desarrollo del software en módulos funcionales y los asignan a un equipo de desarrollo. Pero estos programadores senior responsables del modelado técnico a menudo piensan más en cómo implementar todo el diseño en código, cómo reutilizar módulos previamente existentes de manera más efectiva, etc., en lugar de qué estilo tendrá el software, por lo que como UI Como diseñadores, nosotros Debemos tomar la iniciativa y comunicarnos más con ellos para garantizar que nuestras ideas se puedan realizar plenamente. Si encontramos problemas de implementación técnica, debemos realizar modificaciones oportunas. También necesitamos hacer cambios oportunos.

A veces también necesitamos hacer algunos diseños extendidos (también llamados diseño extendido de la interfaz de usuario del producto) basados ​​en las necesidades específicas de los clientes o productos, incluyendo: interfaz de navegación de instalación de software, animaciones de promoción de demostración de productos, algunos fondos de escritorio o protectores de pantalla y elfos de dibujos animados que representan el software y, a veces, se les pide que diseñen logotipos de software, pancartas publicitarias, etc. La clave del período de modelado técnico es el "diseño de estilo e interfaz".

Tres. Período de desarrollo del módulo:

Este período ingresa a la etapa de implementación del proceso de desarrollo de software y también es el período que requiere la mayor cantidad de mano de obra, lo que distraerá la energía del diseñador de la interfaz de usuario. El software se dividirá en varios módulos pequeños para su codificación y finalmente se integrará en un producto de software completo. Para un programador, la mayoría de ellos no piensan en cuál debería ser el estilo general del producto, solo piensan en cómo usar el código para implementar los requisitos de diseño. En las empresas de software actuales, la mayoría de ellos se dan cuenta de la reutilización de módulos. De esta manera, se ahorrará mucho costo de mano de obra y luego los programadores solo modificarán la plantilla original para adaptarla al nuevo producto de software, lo que traerá muchos problemas a la implementación final y al diseño de la interfaz de usuario. La implementación final y la implementación de un diseño de interfaz de usuario pueden causar muchos problemas. Aunque cada módulo se puede utilizar, todos "trabajan de forma independiente" sin unidad, por lo que también debemos ayudar y supervisar activamente a los programadores para implementar todos los requisitos de diseño de la interfaz de usuario. Si hay problemas técnicos que no se pueden implementar, el plan de diseño debe realizarse. comunicado y corregido oportunamente. A veces, algunos módulos necesitan tener un estilo separado. Por ejemplo, algunos productos de software existentes deben integrarse en un nuevo producto. Esto aumentará la dificultad del diseño del diseñador. Debemos cambiar el estilo original y al mismo tiempo garantizar el estilo general. El producto permanece sin cambios. El estilo de diseño del producto se integra para hacerlo más adecuado para la presentación de nuevos productos. Si aún mantenemos el estilo del producto original, cuando se ensamblen los distintos módulos, el nuevo producto a menudo se sentirá flojo y cada función incorporada hará que la gente sienta que es otro software, y la gente no tendrá una impresión profunda de el software. En esta etapa, todavía debemos tomar la iniciativa de realizar un seguimiento de la implementación de la interfaz de cada módulo. Hoy en día, muchas empresas de software tienen muchos problemas con la colaboración entre diseñadores de UI y programadores. O los programadores no pueden cumplir con los requisitos del diseño de UI o los diseñadores de UI insisten en algunas de sus propias ideas que no se pueden cambiar. deberían hacerlo o no. ¡Haz algo por mí! Cuando se integró el software y se revisó nuevamente, había muchas cosas con diferentes estilos apiladas, lo que lo hizo incómodo de principio a fin. Los líderes o clientes estaban extremadamente insatisfechos y los criticaron durante mucho tiempo. Diseño de interfaz de usuario no implementado. Algunas personas dicen que el software cuyos diseñadores de UI asumen la culpa no tiene éxito porque las personas no pueden ver cómo está escrito el código o cómo se implementan las funciones. Sólo conocen la apariencia del software y los comentarios sobre su uso. Si se le pide a un usuario que revise un software, solo dirá que el software es fácil de usar, se ve bien y es hermoso, pero como usuario común, es absolutamente imposible decir que el programa de software está bien escrito. Cuando lo miramos de esta manera, pensaremos que la principal contradicción en el desarrollo de software radica entre los diseñadores y programadores de UI. De hecho, esto es solo una manifestación superficial. Esencialmente, este fenómeno refleja un problema común en las empresas de software, que es que la relación de colaboración entre los equipos de desarrollo es relativamente caótica. El nivel de colaboración entre los programadores y los diseñadores de UI es tal que los programadores no serán responsables del producto desde este punto. Desde el punto de vista, los diseñadores de UI solo deben escuchar al gerente del proyecto. Independientemente de los cambios o adiciones que se realicen en el diseño, deben ser decididos por el gerente del proyecto de desarrollo y el gerente de producto después de consultar. Esto también puede evitar muchas disputas y conflictos entre programadores y diseñadores de UI. Pero ahora la mayoría de los gerentes de productos y gerentes de proyectos de desarrollo en las empresas de software no lo han hecho. No comprenden el trabajo de los diseñadores y programadores de UI ni pueden comprender su carga de trabajo. De hecho, puede establecer algunos sistemas de gestión de procesos razonables, incluso si la empresa no tiene uno, como diseñador de UI, puede redactar un "Formulario de solicitud de requisitos de diseño de UI" adecuado para usted y la empresa, que debe incluir las "entradas". " contenido y horas de trabajo que necesitamos. , resultados finales de "salida" y otras columnas (se pueden decidir de manera flexible según las necesidades). De esta manera se forma un proceso de trabajo con los participantes y las pruebas. Cuando surgen problemas o disputas, tenemos pruebas en las que basarnos. Esto es algo habitual. Las discusiones que surgen de diferentes empresas no necesariamente tienen que crear un solo requisito.

Durante el período de desarrollo del módulo, lo que el diseñador de la interfaz de usuario debe hacer es demostrar el efecto de cada módulo en la etapa inicial del desarrollo del módulo (que se puede expresar en forma de imágenes), y requiere que los programadores desarrollen de acuerdo con el estilo de la demostración. módulo, y ayudar y supervisar a los programadores. Siga estrictamente los requisitos del diseño de la interfaz de usuario para generar el producto final, domine la unidad de cada módulo y esté siempre al tanto del progreso del trabajo del programador. Para los módulos que no son razonables o difíciles de implementar. El plan debe discutirse de manera oportuna y facilitar el diseño de nuevos productos para hacerlos más eficientes. Discutir el diseño de nuevas soluciones basadas en diseños difíciles de implementar. La clave del período de desarrollo del módulo es "ayudar y supervisar a los programadores para producir el producto final".

IV. Entrada y salida durante el período de prueba:

Las pruebas del producto de software se dividirán en tres etapas de prueba. La primera es la prueba unitaria de cada módulo una vez completado el desarrollo del módulo. ; el segundo es la prueba que integra cada unidad en un producto completo; el tercero es la prueba general antes de entregar el producto completo. Durante el proceso de prueba, la tarea del diseñador de la interfaz de usuario será relativamente fácil. Solo necesitamos seguir al evaluador durante el proceso varias veces y, si encontramos alguna parte que no cumpla con los requisitos de diseño de la interfaz de usuario, podemos solicitar correcciones de inmediato. A menudo nos encontramos con clientes que de repente sienten que hay algo inapropiado que debe modificarse durante el proceso de prueba. Este es el problema más problemático. A veces lo que dicen no es necesariamente correcto, siempre que cada paso de nuestro diseño tenga una razón determinada. Que crean que todo está bien. Si insisten en modificar el diseño, no nos queda más remedio que modificarlo según los requisitos del cliente. Pero si sigues el proceso de este artículo, creo que esta posibilidad es poco probable y no habrá grandes problemas incluso si lo modificas. Durante el proceso de modificación, todavía necesitamos hacer representaciones primero para permitir que el cliente determine el plan de implementación específico, lo que también evitará muchos problemas. La clave del período de prueba es "verificar todo el producto, encontrar problemas y corregirlos a tiempo".

El software actual tiene cada vez más en cuenta los factores humanos. El concepto de diseño "orientado a las personas" se extiende a lo largo del desarrollo de productos de software. Por lo tanto, lo más importante en el proceso de diseño de la interfaz de usuario de los productos de software es el comportamiento y la estructura. Dos partes, a saber, diseño de interacción y diseño de interfaz. Arriba, analizamos las tareas de diseño de UI en cada período una por una según las cuatro etapas del desarrollo de software. De esto podemos ver que el diseño de la interfaz de usuario no es completamente un proceso de diseño artístico, sino que también es una parte muy importante del diseño de interacción y el diseño de usabilidad. Cuanto más aprendes, más ves, más tiempo y experiencia acumulas, menos aprendes.