En diseño web, según las diferentes ubicaciones de almacenamiento de la información de estilo, existen varios métodos y cuáles son las características de cada uno.
1. Una breve introducción al diseño de UI, diseño gráfico y diseño de sitios web: ①-Definición de diseño de UI: UI es la abreviatura de UserInterface (interfaz de usuario). El diseño de la interfaz de usuario se refiere al diseño general de la interacción persona-computadora, la lógica de operación y la hermosa interfaz del software. Un buen diseño de 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. El diseño de software se puede dividir en dos partes: diseño de codificación y diseño de interfaz de usuario. El significado original de UI es interfaz de usuario, que es la abreviatura de English User and Interface. Literalmente consta de dos partes: el usuario y la interfaz, pero en realidad también incluye la relación interactiva entre el usuario y la interfaz. En los productos electrónicos en rápido desarrollo, el trabajo de diseño de interfaces se está tomando en serio poco a poco. Los "artistas" que diseñan interfaces también se denominan "diseñadores de UI" o "ingenieros de UI". De hecho, el diseño de la interfaz del software es como el diseño de estilo industrial en productos industriales y es un punto de venta importante del producto. Un producto electrónico con una hermosa interfaz brindará a las personas un disfrute visual cómodo y acortará la distancia entre las personas y los productos. Es un diseño artístico basado en la ciencia. El criterio para probar una interfaz no es la opinión de un determinado líder del equipo de desarrollo del proyecto ni el resultado de la votación de los miembros del proyecto, sino los sentimientos de los usuarios finales. ②-Definición de diseño gráfico: el diseño gráfico, también conocido como diseño de comunicación visual, utiliza "visual" como una forma de comunicación y expresión, creando y combinando símbolos, imágenes y texto en una variedad de formas para crear una representación visual utilizada para transmitir. una idea o mensaje. Los diseñadores gráficos pueden utilizar habilidades profesionales en tipografía, artes visuales, diseño de páginas, software de computadora, etc. para lograr el propósito del plan creativo. [1] El diseño gráfico generalmente puede referirse al proceso de realización (diseño), así como al trabajo final completado. Los usos comunes del diseño gráfico incluyen logotipos (marcas comerciales y de marca), publicaciones (revistas, periódicos y libros), publicidad impresa, carteles, vallas publicitarias, elementos gráficos de sitios web, logotipos y empaques de productos. Por ejemplo, el empaque del producto puede incluir un logotipo u otra obra de arte, texto organizado y elementos de diseño puro, como imágenes, formas, tamaños y colores consistentes. La composición es una de las características más importantes del diseño gráfico, especialmente cuando el producto utiliza materiales preexistentes o una fusión de múltiples elementos. ③-Definición de diseño de sitio web: en pocas palabras, el propósito del diseño de un sitio web es producir un sitio web. Se puede colocar información simple como texto, imágenes (GIF, JPEG, PNG) y tablas en las páginas del sitio web mediante el uso de lenguajes de marcado como HyperFile Markup Language y Extensible Hypertext Markup Language. La información más compleja, como gráficos vectoriales, animaciones, videos, audio y otros archivos multimedia, requiere que se ejecuten programas complementarios y también que se trasplanten lenguajes de marcado al sitio web. El diseño web es la parte frontal (lado del cliente) del proceso de diseño. El diseño se utiliza normalmente para describir un sitio web, incluido el marcado de escritura, pero esta es un área gris ya que también cubre el desarrollo web. Se espera que los diseñadores web sean conscientes de la usabilidad y, si su función requiere la creación de marcas, también se espera que estén actualizados en cuanto a las pautas de legibilidad web. Diseño de sitios web (WebDesign), el diseño de sitios web es un proceso de conversión de requisitos de software en representación de sitios web de software, que se refiere a páginas web relevantes producidas en Internet de acuerdo con ciertas reglas utilizando herramientas como Dreamweaver y Photoshop para mostrar contenido específico. En pocas palabras, un sitio web es una herramienta de comunicación, al igual que un tablero de anuncios. Las personas pueden usar el sitio web para publicar información que desean hacer pública (información) o usar el sitio web para proporcionar servicios de red relacionados (servicios de red). Las personas pueden acceder al sitio web a través de un navegador web, obtener la información (información) que necesitan o disfrutar de los servicios de la red. El sitio web se compone de tres partes: nombre de dominio (comúnmente conocido como dirección del sitio web), programa fuente del sitio web y espacio del sitio web. El nombre de dominio es similar al número de una casa en Internet. Es un identificador de carácter jerárquico que se utiliza para identificar y ubicar computadoras en Internet y corresponde a la dirección de Protocolo de Internet (IP) de la computadora.
El diseño del sitio web lo realizan diseñadores que utilizan herramientas como Frontpage o Dreamweaver para editar el sitio web. 2. Herramientas necesarias para el diseño de UI, diseño gráfico y diseño de sitios web: 1. Herramientas de software necesarias para el diseño de UI: comenzando desde la izquierda: Photoshop, Illustrator, CorelDraw, Indesign, Fireworks, DreamWeaver, Flash, HTML5, CSS (hojas de estilo en cascada). ), AxureRPPro7.0, IOS, Android. 2. Herramientas de software necesarias para el diseño gráfico: Photoshop, Illustrator, CorelDraw, Indesign, Fireworks, PageMaker. 3. Herramientas de software necesarias para el diseño de sitios web: ①Photoshop: aprenda a procesar, editar y utilizar canales, capas y rutas de imágenes, corrección de color de imágenes, uso de varios filtros de efectos especiales, producción de palabras de efectos especiales, etc. , utilice de forma flexible estilos de capa, deformación fluida, desvanecimiento y máscara para crear efectos especiales de imagen en constante cambio. ②Freehand: ya sea diseño de trabajo personal, logotipo de empresa o producción de carteles, se puede completar y utilizar fácilmente en publicidad, impresión y otras industrias. ③CorelDraw: a través de las funciones integrales de diseño y páginas web de CorelDRAW9, se integra en el diseño existente. planifique la creación de ilustraciones, diseños y gráficos vectoriales para crear logotipos de empresas, presentaciones, páginas en color, folletos, empaques de productos, logotipos, páginas web y más. ④Illustrator: aprenda dibujo gráfico, empaque y producción de páginas promocionales, lo que le permitirá diseñar LOGO y CI de manera más conveniente. En menos de un mes, se convertirá en un verdadero maestro del arte. Aprenderlo con Photoshop lo hará aún más. Potente. La eficiencia aumenta exponencialmente. ⑤Microsoft FrontPage Si está familiarizado con Word, creo que se sentirá muy cómodo usando FrontPage para diseño web. Al utilizar FrontPage para crear páginas web, realmente podrá apreciar el significado de "potente, simple y fácil de usar". La producción de la página la completa el Editor en FrontPage, y su ventana de trabajo consta de tres pestañas, a saber, la página de edición "Lo que ves es lo que obtienes", la página de edición de código HTML y la página de vista previa. FrontPage viene con un editor de gráficos y animaciones GIF y admite CGI y CSS. Tanto los asistentes como las plantillas pueden facilitar a los principiantes la edición de páginas web. Lo más poderoso de FrontPage es su función de administración de sitios. Cuando actualiza un sitio en el servidor, no necesita crear un directorio para los archivos modificados. FrontPage rastreará los archivos por usted y copiará esas nuevas versiones. FrontPage es el único software entre los software de producción de páginas web existentes que puede funcionar en la computadora local y trabajar directamente en archivos en el servidor remoto a través de Internet. ⑥Editor de Netscape Las versiones Netscape Communicator y Netscape Navigator Gold 3.0 vienen con editores de páginas web. Si le gusta usar el navegador Netscape para navegar por Internet, usar el editor Netscape es realmente simple y conveniente. Cuando usa el navegador Netscape para mostrar una página web, haga clic en el botón Editar, Netscape almacenará la página web en el disco duro y luego. puedes empezar a editar. También puede editar texto, fuentes, colores, cambiar el autor de la página de inicio, el título, el color de fondo o la imagen, definir puntos de dibujo, insertar enlaces, definir la codificación del documento, insertar imágenes, crear tablas, etc., como usar Word. ¿Es similar a FrontPage2000? Sin embargo, el editor Netscape tiene funciones limitadas para diseños web complejos. Ni siquiera admite la creación de formularios o la creación de marcos múltiples. El editor Netscape es una buena herramienta de introducción para principiantes en la producción de páginas web. Si sus páginas web constan principalmente de texto e imágenes, el editor Netscape será una elección sencilla.
Si sabe algo sobre el lenguaje HTML, puede utilizar editores de texto como el Bloc de notas o UltraEdit para escribir una pequeña cantidad de declaraciones HTML, lo que también puede compensar algunas deficiencias del editor Netscape. ⑦AdobePagemill Pagemill no es potente, pero es muy cómodo de usar. Es adecuado para que los principiantes creen una página de inicio más hermosa, en lugar de muy complicada. Si su página de inicio requiere muchos marcos, formularios e imágenes ImageMap, Adobe Pagemill es su primera opción. Otra gran característica de Pagemill es que tiene un portapapeles, donde puedes arrastrar y soltar cualquier cantidad de texto, gráficos y tablas, y luego abrirlo cuando sea necesario, lo cual es muy conveniente. ⑧ClarisHomePage Si utiliza el software ClarisHomePage, puede crear una página web dinámica en unos minutos. Esto se debe a que tiene una buena herramienta para crear y editar marcos, y puedes agregar nuevos marcos sin gastar demasiado esfuerzo. Además, ClarisHomePage3.0 integra la base de datos de FileMaker y las funciones mejoradas de administración del sitio también le permiten detectar conexiones legítimas a la página. Sin embargo, el diseño de la interfaz es demasiado tosco y el procesamiento de las imágenes de ImageMap está incompleto. ⑨DreamWeaver Cree sus propias páginas web animadas HTML dinámicas. DreamWeaver es un excelente software de diseño web. Incluye paquetes de software para edición visual y edición de código HTML, y también puede ser compatible con ActiveX, JavaScript, Java, Flash, ShockWave. arrastrado y soltado Cree animaciones HTML dinámicas de principio a fin y admita el diseño de HTML dinámico (DynamicHTML), para que la animación de la página se pueda mostrar correctamente en los navegadores Netscape e IE4.0 sin complemento. Al mismo tiempo, también proporciona la función de actualizar automáticamente la información de la página. DreamWeaver también utiliza la tecnología RoundtripHTML. Esta tecnología permite que las páginas web se conviertan libremente entre DreamWeaver y los editores de código HTML sin cambiar la sintaxis ni la estructura del HTML. De esta manera, los diseñadores profesionales pueden disfrutar plenamente de los beneficios de la edición visual sin cambiar sus hábitos de edición originales. Lo más desafiante y vital de DreamWeaver es su diseño abierto, que permite a cualquiera ampliar fácilmente su funcionalidad. ⑩ Fireworks Fireworks, el primer software diseñado desde cero para creadores web, tiene una larga historia. Su aparición ha revolucionado el dibujo web. Fireworks está especialmente desarrollado para el diseño de imágenes web y tiene funciones integradas enriquecidas para admitir la publicación web. Por ejemplo, Fireworks puede cortar imágenes automáticamente y generar JavaScript con detección dinámica del mouse. Además, Fireworks tiene funciones de animación muy potentes y un generador de imágenes de red casi perfecto (función Exportar). Mejora la conexión con Dreamweaver. Puede generar directamente la biblioteca de Dreamweaver e incluso exportarla a páginas web e imágenes que coincidan con los estilos CSS. Flash hace que sus páginas web se muevan. Flash es una onda de choque dinámica e interactiva utilizada en Internet. Su ventaja es que es de tamaño pequeño y se puede reproducir mientras se descarga, evitando así que los usuarios tengan que esperar mucho tiempo. FLASH se puede utilizar para generar animaciones y agregar sonidos a páginas web. De esta manera puede generar interfaces y gráficos multimedia manteniendo el tamaño del archivo pequeño. Aunque FLASH no se puede programar como un lenguaje, también puede crear una página de inicio altamente interactiva utilizando sus declaraciones integradas y combinándolas con JavaScript.
Alguien dijo una vez: ¡Los diseñadores de redes del próximo siglo no podrán usar FLASH y serán eliminados! ¡Creo que esta frase es correcta! HotDogProfessional produce páginas web que requieren la adición de múltiples tecnologías complejas. HotDog es una de las primeras páginas web basadas en código. La característica más distintiva de la herramienta de diseño es que proporciona muchas herramientas asistentes para ayudar a los diseñadores a crear partes complejas de la página. El soporte HTML avanzado de HotDog inserta marcos y se puede ver en modo de vista previa a velocidad normal. Esto es muy raro, porque incluso Microsoft, que fue pionero en este tipo de etiquetas, no proporciona dicha función en FrontPage. La compatibilidad con complementos de HotDog también supera con creces la de otros productos. El cuadro de diálogo que proporciona le permite seleccionar manualmente diferentes opciones para archivos en diferentes formatos. Pero el procesamiento del chino no es muy cómodo. HotDog es un software potente que constituye una buena opción para los diseñadores avanzados que desean agregar tecnologías complejas como CSS, Java y RealVideo a las páginas web. HomeSite crea páginas web que pueden controlar completamente el proceso de la página. HomeSite de Allaire es un editor de código HTML pequeño y versátil con ricas funciones de ayuda, admite CGI y CSS, etc., y puede editar directamente programas Perl. La interfaz de trabajo de HomeSite es compleja y sencilla según los hábitos del usuario, puede configurarse como una simple ventana de edición como el Bloc de notas o puede funcionar en una interfaz compleja. HomeSite es más adecuado para el diseño de páginas más complejas y interesantes. Si desea tener control total sobre el progreso de las páginas que crea, HomeSite es su mejor opción. Pero es demasiado complicado para los principiantes. MicrosoftVisualStudio es una serie de productos de kit de herramientas de desarrollo de Microsoft Corporation de Estados Unidos. Las versiones de esta serie incluyen: 2003, 2005, 2008, 2010, 2012, 2013, 2015, 2015RTM y versiones futuras; adecuadas para desarrollar páginas web aspx dinámicas y, al mismo tiempo, también pueden crear sitios web que no se actualizan y servicios web. funciones, etc ?Jbuilder es una herramienta de desarrollo visual JAVA. Es una excelente herramienta para desarrollar aplicaciones comerciales, bases de datos y programas de publicación en la plataforma Java2. Es compatible con J2EE para que los programadores puedan convertir rápidamente aplicaciones Java empresariales. Independientemente de la versión, es adecuado utilizarla para desarrollar páginas web JSP. 3. Dirección de diseño/métodos/pasos/procesos de diseño de UI, diseño gráfico y diseño de sitios web: 1. Dirección de diseño de UI UI es la interfaz de usuario, que es la abreviatura de English User and interface. Literalmente, consta de dos componentes: usuario e interfaz, pero de hecho también incluye la relación interactiva entre el usuario y la interfaz, por lo que se puede dividir en tres direcciones: investigación de usuarios, diseño de interacción y diseño de interfaz. ① Investigación de usuarios La investigación de usuarios incluye dos aspectos: primero, ingeniería de usabilidad (ingeniería de usabilidad), que estudia cómo mejorar la usabilidad de los productos para que el diseño del sistema sea más fácil de usar, aprender y recordar para las personas; en segundo lugar, a través de la investigación de usabilidad; Ingeniería, explorar las necesidades potenciales de los usuarios y proporcionar otra idea y método para la innovación tecnológica. La investigación de usuarios es una especialización interdisciplinaria que involucra ingeniería de usabilidad, ergonomía, psicología, investigación de mercado, educación, diseño y otras disciplinas. La tecnología de investigación de usuarios consiste en estudiar productos desde la perspectiva de las humanidades e intervenir en el desarrollo y diseño de productos desde la perspectiva de los usuarios. La investigación de usuarios, a través de la investigación sobre el entorno de trabajo de los usuarios y los hábitos de uso del producto, les permite integrar las expectativas de los usuarios sobre las funciones del producto, los requisitos de diseño y apariencia en el proceso de desarrollo del producto en la etapa inicial del desarrollo del producto, ayudando así a las empresas a refinar el diseño de un producto. o explorar un nuevo concepto de producto. Es una forma de obtener comentarios y necesidades de los usuarios, y también es un criterio importante para probar si la interfaz y el diseño de interacción son razonables. ②El diseño de interacción se refiere a la ingeniería de interacción entre humanos y máquinas. En el pasado, el diseño de interacción también lo realizaban los programadores. De hecho, los programadores son buenos codificando, pero no buenos interactuando con los usuarios finales.
⑥. Equilibrio El equilibrio puede brindar satisfacción visual y psicológica. El diseñador debe resolver el equilibrio del campo de fuerza en la imagen, el equilibrio de las conexiones frontal y posterior, y el sentido del equilibrio es también la capacidad que requiere el diseñador para componer el. Imagen. El equilibrio y el desequilibrio son relativos, y si cumplir con los requisitos del tema es el estándar. El equilibrio se divide en equilibrio simétrico y equilibrio asimétrico, incluyendo el equilibrio de puntos, líneas, superficies, colores y espacios. ⑦. Brillante. Recuerde, necesita crear entusiasmo visual para sublimar su trabajo. ⑧. Sobre el estilo. Como diseñador, a veces te opones al estilo. La formación de un estilo fijo significa la rigidez del yo. Sin embargo, el estilo también es un reflejo de la personalidad, las preferencias, la experiencia y los logros del diseñador. También es un signo de la madurez del diseñador. Él cree que "sólo comprendiendo Datong se puede caminar solo al límite". ⑨ Los elementos de inspección de producción incluyen: gráficos, fuentes, texto, color, diseño, proporción, sangrado, etc. Requisitos: La imaginación visual y los efectos deben ser agradables a la vista y, lo que es más importante, ¡deben ser comprendidos por el público! 3. Proceso de diseño del sitio web: ① Proceso de diseño del sitio web 1: Determinar el estilo del sitio web A través del color, la tecnología, el texto, el diseño y los métodos de interacción del sitio web, se puede resumir la personalidad de un sitio web: si. es áspero y audaz, o fresco y hermoso; ¿es gentil y elegante, o persistente y entusiasta?, ¿es vivaz y cambiante, o se apega a las reglas? Después de aclarar qué tipo de impresión desea dar a la gente, debe descubrir las cosas más distintivas del sitio web, que son las que mejor reflejan el estilo del sitio web. Y utilícelo como una característica del sitio web para centrarse en fortalecerlo y promoverlo. La formación del estilo no es un posicionamiento único. Puedes fortalecerlo, ajustarlo y mejorarlo continuamente en la práctica. ② Segundo proceso de diseño de sitios web: recopilar materiales. Busque y recopile textos, imágenes, sonidos, videos y otros materiales relevantes, y organice y procese los materiales recopilados. ③ Tercer proceso de diseño del sitio web: Diseño de la página de inicio del sitio web: el tema de la página de inicio también se refleja en el logotipo y el título del sitio web. Un tema de página de inicio resumido con precisión puede ayudar a los usuarios a elegir un sitio web que se adapte exactamente a sus necesidades. Navegación de la página de inicio: la navegación del sitio web puede considerarse como una clasificación del contenido del sitio web. La segmentación del contenido del sitio web facilita a los usuarios la navegación por las páginas de las columnas correspondientes según sus necesidades personales. Contenido de la página de inicio: el diseño del contenido de la página debe analizar primero las necesidades de los grupos de usuarios del sitio web y colocar el contenido al que los usuarios prestan más atención en la posición más importante de la página de inicio. Generalmente, el diseño del contenido de la página se organiza de arriba a la izquierda a abajo a la derecha según la importancia del contenido según el método de navegación del usuario. ④ Cuarto proceso de diseño de sitios web: diseño de logotipos Cómo diseñar un logotipo es un dolor de cabeza para muchos diseñadores de sitios web. Antes de diseñar, es necesario realizar una investigación y un análisis básicos, es decir, realizar una investigación exhaustiva de la empresa. Para explorar los materiales necesarios, el último paso es el diseño y el desarrollo, que también es el paso más importante. Sólo después de repetidas revisiones se puede diseñar un logotipo satisfactorio. ⑤ Quinto proceso de diseño de sitios web: diseño de navegación. Antes de diseñar la navegación, ¿es necesario analizar completamente lo que necesitan los usuarios? Diseñar la navegación desde la perspectiva de la efectividad, implementación y utilización de la navegación. ⑥. Sexto proceso de diseño del sitio web: diseño del banner. Antes de diseñar el banner, comunique con el cliente qué puntos clave desea resaltar en el banner y luego muestre el contenido del banner de manera específica. Después de determinar el enfoque, la combinación de colores del banner debe ser brillante, limpia y coordinada con toda la página. ⑦ Proceso de diseño de sitios web 7: Diseño de enlaces amigables Al diseñar enlaces amigables en el sitio web, debe considerar los problemas de optimización del sitio web. Los enlaces no deben desplazarse, porque nadie intercambiará enlaces de desplazamiento. el fondo. 4. Notas: La visión traerá una serie de reacciones físicas, psicológicas, emocionales y de comportamiento a las personas. El diseño es la ciencia de la experiencia visual. Incluye dos aspectos que los humanos no cambian. sentimientos fisiológicos, y el otro se compone de factores aleatorios o inciertos. Como preferencias personales, personalidad, etc., etc. 1. Aspectos relativamente estables: principalmente percepción visual fisiológica, algunos hábitos visuales de las personas, procesos visuales, lógica visual, como de arriba a abajo, de izquierda a derecha, como continuidad, repetición, contraste y, en realidad, hay colores complementarios contrastantes que a la gente le gusta más cuando se trata de colores y demás. Todos ellos están relacionados con los hábitos fisiológicos de las personas y son reacciones instintivas de las funciones fisiológicas humanas.
Como diseñador, usted debe poder comprender completamente y utilizar este conocimiento de manera flexible. El diseño es una preocupación centrada en el ser humano. Primero debemos estudiar aspectos relativamente estables como la cultura y los métodos de percepción de las personas, y debemos resumirlos en la práctica. 2. Aspectos inestables: los aspectos inestables se refieren principalmente a diferencias en emoción, calidad, gusto y experiencia. En el proceso de diseño, es necesario tener cierto juicio y capacidad de comprensión para completar diseños excelentes. 3. La ciencia del pensamiento de diseño: el diseño debe tener métodos de pensamiento científico, ser capaz de encontrar diferencias entre similitudes, encontrar similitudes entre diferencias y dominar el uso de varios métodos de pensamiento, como el pensamiento de correlación vertical, el pensamiento de correlación horizontal y el pensamiento divergente. Y si somos buenos en el uso de métodos de pensamiento científico para encontrar nuevas imágenes visuales únicas, podremos seguir descubriendo nuevas posibilidades. La ciencia de la visión gráfica es en realidad un conocimiento muy amplio y profundo. Sólo mediante la solidez y la promoción profunda de este conocimiento se puede garantizar la mejora general del nivel de diseño. Este punto de vista se acaba de mencionar aquí y debe organizarse y discutirse sistemáticamente en el futuro en combinación con los resultados de la investigación de otras disciplinas.