¿Cómo aprender a diseñar UI?
Con el desarrollo de la industria de Internet, el mercado tiene requisitos cada vez más altos para los diseñadores de UI, y el contenido de aprendizaje correspondiente al diseño de UI también está aumentando. Si aún desea encontrar un trabajo bien remunerado con una habilidad básica que la mayoría de la gente conozca, esto es básicamente poco realista.
Cuando Internet recién estaba surgiendo, el umbral para el diseño de UI era muy bajo. Tal vez podrías encontrar un muy buen trabajo solo con diseño gráfico o diseño web simple. Pero ahora, con la popularización de los teléfonos inteligentes y el advenimiento de la era 5G, la base de usuarios de Internet es cada vez mayor, y los requisitos de interfaz de todos son cada vez mayores, y los requisitos de las empresas correspondientes también han cambiado mucho. La conciencia de la humanización en la producción de productos aumenta día a día y cada vez más empresas comienzan a centrarse en invertir en diseño de interacción y pruebas de usuario. Las empresas no solo necesitan comprender el diseño de la interfaz de usuario, sino que también deben comprender la interacción y la psicología del usuario. Incluso necesitan poder codificar, AE para crear efectos de movimiento, ilustraciones, pintar a mano, etc.
Dicho todo esto, ¿cómo aprendemos a diseñar UI? ¿Cómo convertirse en el diseño de UI necesario en el mercado? Ahora desglosaré los pasos de aprendizaje específicos de un curso de diseño de UI maduro, así como las precauciones durante el aprendizaje. 1. ¿Cómo aprendemos a diseñar UI? ¿Cómo convertirse en el diseño de UI necesario en el mercado? 1. Conceptos básicos de software y dibujo a mano: nivel de software
Dibujo a mano
¿Puedo aprender diseño de interfaz de usuario sin habilidades artísticas?
La respuesta es definitivamente sí, pero los diseñadores de UI con habilidades artísticas harán que su competitividad sea más prominente hasta cierto punto. Las ideas creativas son muy importantes para el diseño de la interfaz de usuario, pero este es sólo un aspecto. Ser capaz de expresar con precisión sus ideas creativas a través de diferentes formas y canales es otro aspecto. Para los diseñadores con base en el arte, habrá más formas de expresión para expresar sus ideas, como pinturas a mano de uso común, ilustraciones, íconos realistas, etc.
Por lo tanto, debemos aprender a utilizar el dibujo a mano en futuros trabajos de diseño de UI. En esta parte del estudio, el propósito es dominar y comprender la estructura de la forma, el sentido de la luz y la relación espacial a través del dibujo a mano. Solo más tarde se podrá infiltrar la pintura a mano en el trabajo, combinando la pintura a mano con la pintura con el mouse, pasando de cero a uno a la ilustración y penetrando aún más en los trabajos del proyecto, como la página de inicio del comercio electrónico/la página temática/la pantalla de presentación de la aplicación/ página predeterminada, etc.
Aprender a pintar a mano no requiere que todos alcancen el nivel de estudiantes de arte profesionales, pero permite que todos aprendan a utilizar la pintura a mano para expresar mejor sus obras. Porque la inspiración que aporta el funcionamiento del software es mucho menos ágil que el pensamiento rápido que aporta el dibujo a mano. Para todo diseñador maduro, la buena creatividad y las ideas no deben provenir primero de las computadoras, sino de los cuadernos. El dibujo a mano es la mejor expresión de creatividad e inspiración. Desarrolla el hábito de dibujar a mano y poder hacerlo. Puede ampliar aún más el pensamiento del diseñador, presentar rápidamente sus necesidades gráficas en el boceto e intentar comparar rápidamente los gráficos en evolución, mejorando así la eficiencia del trabajo.
Así que para la parte pintada a mano, combinando el pintado a mano con el diseño del proyecto, puedes tener el siguiente proceso de aprendizaje:
Comprender objetos a través de ejercicios de naturaleza muerta, perspectiva/ luz y sombra/tres lados y cinco tonos
Comprende las relaciones de color a través de la saturación, el brillo, el tono, etc., y comprende la expresión emocional de los colores analizando las implicaciones psicológicas positivas y negativas de cada color.
¿Utilizar el software PS para dibujar iconos a mano para mejorar la familiaridad con el software?
¿Pintar con el mouse dibujado a mano combinado con habilidades de dibujo (copia de ilustraciones)?
Software
El software es una herramienta auxiliar indispensable para el diseño de la interfaz de usuario. No se aprende mucho sobre las herramientas, pero depende de si puede usar las herramientas con habilidad para expresar sus ideas y dejar que las herramientas se transformen en sus manos izquierda y derecha para ayudarlo. al completar el diseño. Elija uno o dos de cada tipo de herramienta de diseño para operar con competencia y podrá comenzar rápidamente cuando encuentre herramientas similares en trabajos futuros.
De hecho, la forma más rápida de aprender herramientas es aprender con un propósito. Aprender utilizando el método inverso puede brindarle una comprensión más clara e intuitiva del significado de esta función. Comience con casos y aprenda nuevas herramientas a partir de los casos, integrando las herramientas y técnicas con los casos, profundizando así la introducción y mejora del software y sus capacidades integrales.
Entonces, ¿qué es el aprendizaje por inferencia inversa? A continuación seleccionamos PS y AI, dos herramientas comunes en diseño, para presentarlas brevemente. Otras herramientas también pueden referirse a este modelo de aprendizaje. En cuanto al dominio del software, es necesario dedicar tiempo y practicarlo usted mismo.
(1) PD, Adobe Photoshop, es un software de procesamiento de imágenes desarrollado y distribuido por Adobe Systems. Creo que los amigos que no están en la industria del diseño también han admirado su nombre durante mucho tiempo, y también es una herramienta de diseño que los profesionales del diseño deben dominar. Photoshop procesa principalmente imágenes digitales compuestas de píxeles y se centra en el procesamiento de imágenes.
?
Cuando entramos en contacto con PS por primera vez, necesitamos aprender por nosotros mismos los conceptos básicos de PS, explicaciones detalladas de las herramientas, Operaciones booleanas, estilos de capa, opciones de fusión, máscaras y ajustes Capas, filtros, modos de fusión, imágenes y más. ¿Cómo podemos entender estas funciones paso a paso?
Conceptos básicos de PS: conozca los detalles de las herramientas, los estilos de capa y los ajustes de capa. (Demostración de caso)
Aprenda las operaciones booleanas de PS y aplíquelas al dibujo de gráficos.
Domina los modos de fusión/máscaras a través de ejemplos de síntesis de carteles.
Utilice ajustes de imagen (curvas, tono, saturación, equilibrio de color, etc.) para ajustar la uniformidad de color, luces y sombras, etc. del material compuesto.
En la síntesis de carteles se utilizan filtros para conseguir distancia, virtualidad, realidad, nitidez, distorsión, etc. / Camera Raw se utiliza para el ajuste final de la síntesis.
Solo podemos integrar el software y el pensamiento de diseño mediante el análisis continuo de las operaciones comerciales reales y la inferencia de resultados. En el proceso de razonamiento inverso y copia, la base de nuestra herramienta será más sólida.
(2) AI, Adobe Illustrator, es un software de ilustración vectorial estándar de la industria que se utiliza en publicaciones, multimedia e imágenes en línea. Sus potentes funciones y su cuidada interfaz de usuario lo convierten en el software de edición de vectores preferido por la mayoría de los diseñadores. ? ?
Para la IA, necesitamos dominar las funciones de símbolos gráficos y las habilidades de uso de la IA, los gradientes, las herramientas de combinación y las ilustraciones 2.5D de la IA. Luego, para dominar las herramientas de dibujo, a través del estudio de los estilos de ilustración convencionales y la conversión de estilos, aprenda los colores en las ilustraciones. Finalmente, se implementan las habilidades de dibujo y diseño de fuentes de gráficos de logotipos.
Conceptos básicos de IA: domine la capacidad de restar, intersecar y agregar gráficos aprendiendo el buscador de rutas/símbolos gráficos maestros para mejorar la estética de los gráficos o diseños.
Dibuje una cantidad adecuada de ilustraciones para mejorar su comprensión de la estructura/luz y sombra/color del objeto.
Siga las tendencias de moda actuales y obtenga una comprensión profunda de las expresiones principales de la ilustración vectorial a través de personajes y paisajes.
Lo anterior es en realidad solo una comprensión básica de las herramientas, lo que le permite comprender las funciones de las herramientas y luego familiarizarse con las herramientas una y otra vez. En cuanto a cómo utilizar estas herramientas, todavía tenemos que seguir aprendiendo más.
2. Conceptos básicos del diseño, teoría del diseño - pensamiento de diseño
Sin el pensamiento de diseño, no importa cuán competente sea en el uso de las herramientas, las obras diseñadas no serán reconocidas por el público. Por lo tanto, debemos aprender los principios del diseño y dominar los conceptos básicos del diseño. Combina teoría y práctica para demostrar perfectamente tus ideas de forma razonable.
En esta etapa, puede introducir el diseño de logotipos, el diseño de fuentes y el diseño de manuales VI, intercalar teoría con práctica práctica, hacer que el aprendizaje tenga un propósito e invertir el pensamiento de diseño en operación.
¿Qué es un logotipo? ¿Cómo empezar a hacer un logo original? ¿Cuáles son las formas comunes de logotipos? Aquí combinamos diseño de logotipo y texto para explicar los pasos de aprendizaje.
Aprender composición de planos: puntos, rectas y planos, y comprender los elementos básicos del espacio plano. Utilice métodos de diseño para hacer que los elementos sean más refinados y visualmente impactantes.
Xi Ping construye formas básicas de repetición, aproximación, gradiente, variación, etc., y cultiva el pensamiento lógico y las habilidades de modelado para que podamos aplicarlos al diseño real.
Desarróllese a partir de una lluvia de ideas sobre diseño de logotipos y extraiga palabras clave de diseño del espacio de pensamiento macro al micro.
Aprenda una variedad de métodos de dibujo de LOGO. Aquí deberá utilizar las habilidades de dibujo a mano que aprendió antes. Luego elige uno de ellos para continuar optimizando.
Al combinar diferentes palabras clave entre sí, los gráficos se pueden refinar, combinar, reorganizar y asignar gráficamente a las palabras clave para optimizar gráficamente el borrador final.
De acuerdo con los trazos horizontales y verticales de la fuente, comprenderá la estructura del texto, la literalidad, el centro de gravedad, los caracteres combinados individuales, el procesamiento central, etc., dominará el diseño de deformación de la fuente y mejorará la Representaciones de propuestas de logotipos para aumentar la probabilidad de presentación.
La parte del texto del logo se extrae y se rediseña.
Los gráficos y el texto del logo se combinan y finalizan.
En el diseño de logotipos, aprendimos la composición de los planos. , diseño de fuentes, etc., y lo aprendido en el álbum de imágenes. También intercalaremos conocimientos de diseño. Por ejemplo, diseño de psicología del color, contraste de color y habilidades de combinación, vi especificaciones y contenido básicos de la aplicación, representaciones de aplicaciones de escenas, tamaño y materiales, etc. Al simular el proyecto usted mismo, podrá obtener una comprensión profunda de las partes básicas del manual vi.
Conozca las especificaciones del manual visual de VI y concéntrese en perfeccionar el diseño del encabezado y pie de página del manual visual de VI.
El proyecto del ejercicio de simulación proporciona una comprensión profunda de las partes básicas del manual vi desde múltiples perspectivas, como la Parte A y los usuarios: logotipo corporativo, colores estándar, fuentes estándar, especificaciones de impresión en chino e inglés, gráficos auxiliares y aplicaciones de errores, y se realiza en base a características corporativas Diseño estándar de piezas básicas.
La parte de aplicación del manual vi proporciona a la Parte A sugerencias de implementación y demostraciones de efectos de productos terminados profesionales basados en escenarios de uso, materiales, procesos, tamaños, entornos de visualización, etc.
Mejorar las representaciones de propuestas manuales de vi.
3. Diseño de operaciones de comercio electrónico/página web
El diseño gráfico es la base del diseño de la interfaz de usuario. Aprendemos los conceptos básicos del diseño y el pensamiento de diseño a través del diseño gráfico, lo que reduce la etapa de aprendizaje. Diseño UI. Muchas dudas.
En la era de Internet, la mayoría de las empresas se han dado cuenta de lo importante que es atraer más clientes potenciales a través de la información online. La impresión que estos clientes potenciales tienen sobre su empresa y sus productos depende en gran medida de cuánto esfuerzo ponga en el diseño del sitio web. Los sitios web corporativos y las plataformas de comercio electrónico también son plataformas de comunicación indispensables y plataformas comerciales independientes del lado C para las empresas en el entorno de Internet, y son la corriente principal en la industria de Internet.
Para el diseño web, debe estar familiarizado y dominar las especificaciones del diseño del lado web, comprender la estructura básica y el diseño de cuadrícula del sitio web, concentrarse en dominar las especificaciones y resultados del diseño de la interfaz del sitio web corporativo. especificaciones, y poder adaptarse a las necesidades reales de la página de diseño empresarial. Domine el diseño/composición y la combinación de diseño/color/texto/imagen en páginas web, y domine las habilidades de diseño de las imágenes de encabezado de sitios web corporativos.
La parte del comercio electrónico requiere los requisitos de diseño y las especificaciones de diseño de la industria del comercio electrónico, aprender diferentes tipos de métodos de diseño y métodos de empaque de tiendas en la industria del comercio electrónico y dominar todo el comercio electrónico. proceso de diseño y diseño de banner de comercio electrónico.
Con tanto conocimiento, parece abrumador. ¡No te preocupes! ! ! Desglosamos este conocimiento y lo llevamos paso a paso.
(1) Sitio web empresarial responsivo/diseño de sitio web de una pantalla: domine el proceso y las especificaciones del diseño web, la combinación de colores del diseño web y las habilidades de composición tipográfica.
Especificaciones básicas para diseño web: unidad, resolución, tamaño, fuente, color, etc./Comprender la estructura del sitio web (diseño de página de inicio) a través de presentaciones de casos
Difusión de formato e interfaz en diseño web Diseño
A través del diseño de cuadrícula, mejore el diseño del diseño web, realice una investigación en profundidad sobre la composición/color/fuente/uso de imágenes en la página web y mejore los detalles generales de la página.
Especificaciones de diseño de terminal móvil responsivo: tamaño del diseño, dispositivo de adaptación, forma de conversión del diseño.
Diseño de interfaz de sitio web empresarial
(2) Diseño backend: gráficos de datos maestros y combinación de colores de datos gráficos.
En la actualidad, la visualización y el backend basados en comentarios de información del mercado de contratación también son características estándar en la etapa de la página web, entonces, ¿cuáles son los puntos de aprendizaje en la página de inicio del backend?
Diseño de interfaz de sitio web empresarial
Dominar el diseño web de una pantalla y el diseño de efectos interactivos en la página (diseño de página de inicio de una pantalla)
Comprender las especificaciones de diseño de fondo a través de casos de diseño y procesos y funciones de operación en segundo plano
Diseño de página de inicio de backend
Visualice los datos en segundo plano a través de gráficos de columnas, circulares, de tendencias y otras técnicas para mejorar la visualización y la legibilidad
(¿Diseño gráfico de datos)?
(3) Diseño de comercio electrónico: operación y dominio de la página de inicio, página de temas, detalles, imagen principal, tren directo, exposición de diamantes, decoración de backend, terminal móvil y PC Aprenda las especificaciones de diseño de un extremo a otro y domine las habilidades de diseño y diseño de las páginas de detalles del comercio electrónico a través de operaciones reales de la tienda.
Conozca las especificaciones de diseño de la página de inicio para dispositivos móviles y PC a través de la plataforma de comercio electrónico Taobao.
Domine la imagen principal, a través del tren, las especificaciones de diseño de la exhibición de diamantes y obtenga más información sobre la sección de diseño de la imagen de promoción de operación en la ventana de promoción de backend.
Muestre la composición del diseño de la página temática a través del análisis/análisis de casos del proyecto con casos reales: proceso del proyecto, extracción de puntos clave, diagrama de derivación visual.
Diseño de la página de inicio y de la página de temas de la plataforma de comercio electrónico Taobao
Especificaciones del diseño de la página de detalles y composición del contenido, considere el diseño desde la perspectiva del usuario
Comercio electrónico de Taobao detalles de la plataforma Diseño de página
Al solicitar su propia tienda Taobao, practique la decoración/lista de productos en el backend del comercio electrónico (cortar imágenes/colocar estantes/decoración práctica del backend)
( 4) C4Dbanner: El diseño maestro de escenas 3D se aplica a trabajos de diseño para enriquecer los efectos visuales de la imagen.
Construcción de bases/escenas del software C4D, que utiliza escenas 3D para mejorar el sentido tridimensional del espacio de diseño y mejorar el impacto visual.
(Construcción de escena modelo blanco) material de iluminación/salida de renderizado/c4dbanner (material de pegado de escena/iluminación/configuraciones de renderizado y salida para aplicar al banner).
El diseño y el eje Z se dividen en el diseño de banner.
Mejorar el banner del e-commerce e incorporar más elementos de ilustración en pantalla. Y principalmente se muestra en estilo de ilustración vectorial.
Diseño y producción de banners estilo C4D.
3. Diseño móvil
¡Concéntrate en ello! ! !
Con el desarrollo de Internet móvil, la demanda de teléfonos móviles por parte de todos es cada vez mayor. Las personas usan los teléfonos móviles para entretenimiento, consumo y aprendizaje, por lo que el diseño de la interfaz de usuario se refleja en nuestras vidas todo el tiempo. En esta parte, no solo necesitamos aprender diseño, sino también experiencia de usuario, diseño de interacción y diseño de operación para acercar nuestros productos a los hábitos de uso de los usuarios objetivo.
(1) Experiencia de usuario, productos de la competencia, diagramas de prototipos: comprender el desarrollo de proyectos, la investigación de productos, los procesos de proyectos y dominar los prototipos interactivos.
Realizar análisis de productos competitivos de proyectos a través de estudios de mercado o análisis de big data. Utilice estadísticas de big data para analizar los puntos débiles de los usuarios y experimentar comentarios sobre el producto, y simule retratos de usuarios para analizar los puntos débiles, las necesidades, las audiencias, las ocupaciones, etc. de los usuarios para este proyecto. Realizar análisis de mercado mediante comparación de datos y recopilación de información.
Aprende el software Axure y dibuja prototipos de baja fidelidad.
Utilice Xmind para crear mapas mentales basados en análisis de productos y análisis de productos competitivos.
Analice el diagrama de flujo de la página de la aplicación/el marco funcional/la lógica de salto de la interfaz y utilice axure para dibujar el diagrama del prototipo de la aplicación.
(2) Icono, cápsula, diseño de interfaz: domine el icono, la barra de estado, la barra de navegación, la barra de pestañas, la pantalla de presentación, el inicio, la página de bienvenida/página de guía, la página emergente, etc. interfaz de diseño general Diseño de interfaz.
Comprenda la diversidad de íconos a través de íconos de silueta, íconos planos, íconos lineales, íconos facetados, íconos con microtexturas e íconos cuasi-objetos claros.
Descubre las características de las áreas de diamantes, los iconos funcionales y los diseños de iconos decorativos, así como los tipos y diseños de gráficos que se deben utilizar en las diferentes secciones.
Comprenda las especificaciones de diseño de la interfaz ios/Android: tamaño, fuente, color, tamaño, interlineado, etc., y luego profundice en los componentes de la interfaz como: barra de estado, barra de navegación, barra de pestañas , etc., tamaño del espacio en el que se puede hacer clic, etc.
A través de aplicaciones maduras, comprenda la forma y los componentes del diseño de la cápsula/emergente, y realice un análisis en profundidad de la pantalla de presentación/inicio/página de guía/características de diseño y la experiencia del usuario del pensamiento operativo entre los tres
Finalmente, de 0 a 1, ¿diseñar la interfaz de manera integral de acuerdo con el pensamiento del usuario y el pensamiento del producto?
(3) Interfaz de operación, efectos interactivos AE y formulación del diseño de especificaciones visuales: Operación Pensamiento y pensamiento de comercio electrónico Combinado con el diseño del producto, revise la interfaz con el pensamiento del usuario para encontrar los puntos débiles del usuario, mejorar la interfaz operativa general y lograr propósitos de marketing y promoción. El diseño de animación interactiva AE mejora la experiencia de operación interactiva de la interfaz.
Ampliar el diseño de la interfaz de promoción con pensamiento operativo. (Mire más productos de comercio electrónico excelentes para hacer retroceder el pensamiento y el diseño operativos)
Destaque la atmósfera de diseño de páginas especiales para actividades promocionales, ventanas emergentes y pantallas de presentación para mejorar el atractivo visual y promover clics y vistas del usuario.
Diseño de interfaz de operación. (Comience desde el modelo, luego agregue pensamiento operativo para diseñar la interfaz de operación)
Domine los conceptos básicos del software ae con casos: deformación gráfica, movimiento, tamaño, animación transparente
In- Función de profundidad ae: suavización de nodos, use gráficos de velocidad para hacer la imagen más suave, más suave y más natural, use filtros para lograr más efectos de animación y use animaciones interactivas de interfaz y animaciones de efectos de salto para ejercicios y presentaciones de proyectos.
Domina los métodos de exportación de vídeo a MP4, secuencia PNG y Quicktime.
4. Front-end WEB: el diseño de la interfaz de usuario no requiere necesariamente dominio del front-end web, pero si comprende los conocimientos básicos del front-end, podrá comunicarse mejor con los programadores para lograrlo. resultados que deseas.
Domine los conocimientos básicos del front-end web y esté familiarizado con Html5 y Css3. Familiarizado con el diseño del marco.
Al aprender Html5 y Css3, podrá analizar el sitio web corporativo que desee. diseñado en una página web.
A través del aprendizaje anterior, tenemos habilidades de diseño de UI. Después de ingresar a la industria del diseño de UI, necesitamos mantener un aprendizaje continuo para mejorar nuestra estética, diseño, habilidades, etc. Por lo tanto, mire más los diseños de otras personas, no para plagiar, sino para pensar y aprender de las fortalezas de otras personas para mejorar su propio pensamiento de diseño.