Cómo diseñar la navegación de un sitio web Cómo diseñar la barra de navegación de un sitio web
La navegación juega un papel importante como guía en el sitio web. Un excelente diseño de navegación puede permitir a los usuarios encontrar rápidamente lo que necesitan, permitirles comprender claramente el marco estructural del sitio web y desempeñar un papel de guía importante. Las siguientes son algunas formas comunes de navegación en páginas web: 1. Navegación superior.
La navegación superior se utiliza ampliamente en sitios web de diversos campos. Este tipo de navegación permite a los usuarios encontrar rápidamente lo que necesitan de un vistazo. El diseño de la navegación superior es conservador pero decidido, lo que puede garantizar la confiabilidad de la estructura organizacional y reducir el tiempo de búsqueda del usuario. Sin embargo, este tipo de navegación tiene un inconveniente. Cuando hay demasiado contenido en la página de inicio y es necesario desplazarse por la pantalla, los usuarios deben desplazarse hasta la parte superior y luego cambiar el contenido de navegación. Por lo tanto, muchas navegaciones diseñadas en la parte superior ahora tienen el efecto de fijar la navegación en la navegación superior, lo que reduce el costo de uso para el usuario.
El diseño de navegación superior tiene muchos estilos, que combinan principalmente logotipos, inicio de sesión y cuadros de búsqueda para formar varios efectos, como se muestra en la siguiente figura:
El diseño de navegación superior Es maduro, estable y satisfactorio, pero no es propenso a sufrir problemas importantes, por lo que su tasa de uso es relativamente amplia. Cualquiera que me conozca sabe que uso Cicada para mi sitio web. La siguiente imagen es la definición de la navegación principal de la interfaz de fondo del sistema Cicada, que se puede combinar de varias maneras para mostrar el efecto en primer plano.
2. Navegación lateral
La navegación de la barra lateral tiene una variedad de formas de diseño, que pueden expresarse en varias formas, dinámicas o estáticas, grandes o pequeñas, y más personalizadas. No se recomienda el diseño de navegación de barra lateral fija, especialmente la navegación de barra lateral ancha, que afectará el ancho de toda la interfaz web. Los diseñadores pueden considerar hacer que la barra lateral sea una pantalla deslizante, lo que no solo ahorra espacio entre los sitios web, sino que también la hace más concisa.
En el diseño de la barra lateral de navegación, preste atención al ancho de la barra de navegación. Si la fuente en la barra de navegación es demasiado larga, habrá algunos problemas de visualización. Incluso si se convierte en una pantalla deslizante, no puede resolver bien el problema. El sitio web copiado no es adecuado para este tipo de navegación. La barra lateral debería tener más columnas de navegación secundarias, por lo que este tipo de navegación es más adecuada para algunos diseñadores o individuos en el sitio web oficial. Por supuesto, también existen algunos sitios web con estructuras simples que utilizan este tipo de navegación.
Sitio web oficial, la siguiente decoración de moda de theHOUSE simplifica el contenido de la barra lateral en un solo elemento y la coloca a un lado. No parece molesta y no ocupa una habitación vacía. También juega un papel decorativo. .
3. Navegación inferior
La aplicación de navegación inferior no está muy extendida, pero aparece en algunas actividades o webs personalizadas. De hecho, la amplia aplicación de la navegación inferior no está en el lado de la PC, sino en el lado móvil.
En PC, la navegación subyacente suele adoptar un método fijo. Este tipo de navegación puede reducir los costos para el usuario, pero para sitios web con estructuras complejas, los sitios web de navegación secundaria o terciaria no son adecuados. En segundo lugar, colocar la navegación en la parte inferior no es especialmente bueno para los hábitos de los usuarios. Los ojos del usuario escanean de arriba a abajo y de derecha. Este diseño desafía los hábitos de los usuarios.
Así que hay muchos sitios web donde la navegación plegable se colocará en la parte inferior y la navegación de la segunda pantalla se fijará en la parte superior, como el sitio web de deportes forhGym.
4. Navegación en Hamburgo
La navegación al estilo Hamburgo, al igual que la navegación inferior, suele aparecer en los terminales móviles. Pero ahora muchos terminales de PC prefieren cada vez más diseños de navegación estilo hamburguesa. Este tipo de diseño ahorra tiempo, lo que equivale a convertir la navegación en un diseño oculto o en un diseño emergente, que tiene sentido de diseño.
La navegación en Hamburgo en el sitio web de STUDIOJT Korean Design Studio tiene un cierto sentido de diseño.
Si bien la navegación de hamburguesas puede tener muchos diseños, también puede ser muy personalizada. Pero para algunos usuarios la navegación en Hamburgo no es tan intuitiva, especialmente cuando la estructura de navegación no es clara. Los diseñadores aún deberían considerar este tipo de navegación.
5. Navegación con desplazamiento
La navegación con desplazamiento incluye desplazamiento horizontal y desplazamiento vertical.
Desplazamiento horizontal
Desplazamiento horizontal significa que el contenido se desplaza horizontalmente en las direcciones izquierda y derecha. La primera vez que un usuario encuentre este tipo de sitio web, la experiencia será mala porque la dirección del movimiento físico y visual es diferente del desplazamiento vertical normal. Y cuando usas la rueda del mouse para desplazarte, su desplazamiento horizontal de izquierda a derecha hará que el usuario se sienta dislocado durante la interacción, lo cual no es particularmente amigable. Así que en realidad no hay muchos sitios web de este tipo, pero hay algunos que funcionan bien.
Mire el efecto de interfaz del sitio web oficial, parece un estilo tradicional chino.
De hecho, para evitar que los usuarios experimenten un desplazamiento horizontal incorrecto, puede agregar flechas hacia la izquierda o hacia la derecha al diseño de la interfaz para brindarles una pista psicológica y reducir la sensación repentina.
Desplazamiento vertical
El desplazamiento vertical se usa ampliamente en páginas web HTML5 y a muchos diseñadores les gusta usar este diseño. Se pueden lograr nuevos efectos visuales combinando algunos efectos de animación con navegación de desplazamiento vertical. Echemos un vistazo al sitio web oficial del sitio web de la marca Denso. Contiene muchos efectos especiales.
Cada uno de los métodos de navegación anteriores tiene sus pros y sus contras, pero no importa cuál sea, dado que la navegación es navegación, debe desempeñar la función de encontrar rápida y fácilmente lo que los usuarios necesitan y mejorar la usabilidad. y operatividad del sitio web. No es una navegación sofisticada, pero es buena; a los usuarios les suele gustar una navegación sencilla y llamativa. ¡Este es el principio de diseño de la navegación!
Lo anterior presenta varios estilos de diseño de navegación comunes. Primero hablemos de lo que debe hacer antes de diseñar la navegación:
1. Preparación: ordene la estructura de navegación.
El encabezado de un sitio web a menudo incluye logotipo, navegación, cuadro de búsqueda, idioma, registro de inicio de sesión, eslogan, número de teléfono 400, etc. No se puede incluir tanto contenido en el sitio web, por lo que debemos planificar el contenido y tomar algunas decisiones adecuadas antes de diseñar el sitio web.
2. Analizar el estilo del sitio web y determinar el estilo de navegación específico.
Después de determinar el contenido de la navegación del sitio web, puede enumerar la información, analizar el estilo general y la mejor experiencia del usuario del sitio web, y determinar la forma de navegación.
3. Plan de diseño
Después de determinar si el formulario de navegación es navegación fija superior o navegación fija inferior, debemos combinar y organizar el contenido de navegación determinado. Elija la mejor opción de diseño.
En el proceso de diseño, primero se debe seguir el principio de diseño de la experiencia del usuario para garantizar la legibilidad del contenido y el diseño óptimo de la interfaz.
Creo que una buena navegación es un paso importante en el éxito de todo un sitio web. No es fácil para los diseñadores diseñar una navegación diferente según las necesidades de los diferentes sitios web. El aprendizaje no tiene fin. Unámonos a las filas de los diseñadores.
¿Cómo hacer una barra de navegación web/Html5 sencilla?
1. Creamos una barra de navegación basada en la barra de navegación que se muestra en la siguiente figura.
2. Primero, echemos un vistazo al principio de esto.
nav>
p>
ahref = "index.html" >李>首页/李>/a>
ahref = " # " >李>magazine/李>
/a >ahref = " # " >李>Login/Li>/ a>
ahref = " # " & gt李> compras center/李>/a>
/p>
Nav, de acuerdo con este formato, puede crear la barra de navegación que desee.
¿Cómo se dibujan los mapas de navegación?
Por lo general, usamos la navegación en dos escenarios: uno es usar un software de navegación de mapas en una computadora o dispositivo inteligente; el otro es usar una navegación para automóvil más profesional o un GPS portátil. Desde la recopilación de mapas hasta la aplicación final en software de navegación, todo el proceso implica conocimientos interdisciplinarios como cartografía, geografía, tecnología de teledetección e informática. Intentamos explicar todo el proceso de pintura en términos fáciles de entender. Pero antes de eso, debemos entender dos conceptos. Gis: Sistema de Información Geográfica, es decir, sistema de información geográfica. En términos generales, la información geográfica real, como el terreno y los edificios, se convierte en patrones digitales, y esta información digital se puede almacenar, analizar, gestionar y calcular. Poi: punto de interés, es decir, punto de interés. Los puntos de interés pueden ser casas, comercios, buzones de correo, paradas de autobús, etc. El método tradicional de recopilación de información geográfica requiere que los cartógrafos utilicen sofisticados instrumentos topográficos y cartográficos para obtener la longitud y latitud de un determinado punto de interés y luego marcarlo. GIS y POI son dos piezas de información indispensables que constituyen un mapa de navegación. Esta información se muestra jerárquicamente en el mapa. Después de superponer capas, se muestra el proceso de expresión. Se aplican diferentes objetivos al mapa y las superposiciones son diferentes. Por ejemplo, si desea ver un mapa satelital, puede seleccionar "Capa satélite" para mostrarlo directamente.
●Los datos del mapa se pueden dividir en las siguientes categorías:
1. Datos del mapa base: el mapa base son los datos gráficos más básicos del mapa y alguna información adicional relacionada. Hay tres fuentes de datos cartográficos básicos: Mapas oficiales: los fabricantes de mapas compran mapas autorizados publicados por la Oficina de Topografía y Cartografía del Gobierno. Minería en el sitio: La minería en el sitio se refiere a los topógrafos que utilizan instrumentos profesionales para obtener datos en el entorno del sitio. Este tipo de excavación en el sitio tiene alta precisión y confiabilidad, pero la desventaja es el alto costo y el ciclo largo. Fotografías aéreas: tome usted mismo o compre fotografías aéreas o satelitales de alta precisión como información del mapa base. La mayoría de los fabricantes de mapas utilizan este tipo de datos cartográficos. En la actualidad, la precisión de las fotografías aéreas o los mapas satelitales puede alcanzar más de 0,05 metros, lo que es suficiente para todos los fabricantes de mapas.
2. Datos de PDI: el concepto de datos de PDI se ha explicado anteriormente. Aquí solo se discutirá la fuente de datos de PDI. Recopilar con un vehículo de recolección de datos: etiquetar manualmente los datos después de la recolección. Este método es adecuado para la recolección y el etiquetado a gran escala, tiene alta eficiencia y bajo costo, y es especialmente adecuado para la recolección y el etiquetado de tiendas y lugares a lo largo de la calle. Es uno de los principales métodos de recopilación utilizados actualmente por los proveedores de recopilación de datos. El personal de tiempo completo o parcial utiliza teléfonos móviles y otros dispositivos inteligentes para la recolección: esto es un complemento a los métodos de recolección anteriores y es más adecuado para las ubicaciones de los comerciantes que cambian con frecuencia. Codificación inversa de direcciones: este método utiliza algoritmos para localizar y etiquetar los números de las casas. La ventaja de este método es que el costo es muy bajo, pero la precisión y exactitud no son altas. Obtenidos de la web o de la empresa: estos puntos de interés se extraen directamente o se compran en sitios web profesionales. Algunas empresas también pueden utilizar estos servicios API abiertos de mapas para ofrecer sus propios productos de Internet. Los datos de PDI no requieren muchas restricciones de calificación, por lo que hay muchas más personas esperando para proporcionar datos de PDI que proveedores de datos subyacentes. Por ejemplo, Tuba es un importante proveedor de datos de puntos de interés.
3. Otros datos: otras capas de datos comunes incluyen capas de condiciones de tráfico, capas satelitales, capas tridimensionales y mapas de vistas de calles. Los mapas de tráfico se basan principalmente en GPS instalados en los taxis para recopilar datos en tiempo real, o la información del tráfico se recopila a través de equipos profesionales como velocímetros láser, cámaras y velocímetros de radar. Las capas tridimensionales se basan principalmente en el escaneo láser y el modelado manual. Las escenas callejeras se filman en exteriores. Procesamiento de datos Una vez que tenga estos datos, debe modelarlos. Actualmente existen dos métodos de modelado: modelos vectoriales y modelos de malla. Después de procesar los datos del mapa, básicamente se forma toda la producción del mapa. Los fabricantes de mapas deben realizar pruebas de campo de los mapas completos para garantizar su integridad y confiabilidad. Finalmente, estos datos cartográficos sin procesar son procesados y revisados por los departamentos pertinentes. Después de pasar la revisión, el mapa electrónico puede publicarse públicamente o venderse en Internet. En este punto, todo el proceso de creación del mapa básicamente ha terminado.
¿Cómo se debe configurar la navegación del sitio web?
Haga clic en la opción "Herramientas" en el menú encima del navegador, seleccione "Opciones de Internet", complete la navegación URL en el espacio en blanco "Página de inicio" en el cuadro de diálogo emergente y haga clic en "Aceptar". . Aquí se explica cómo configurar IE. También hay 360 Browser, Sogou Browser, Maxthon Browser, etc. Los métodos son todos diferentes. Los métodos son casi los mismos, ¡lo entenderás!
¿Cómo configurar la navegación web?
Esto es fácil de configurar, ¡solo usa la lista! ¡Todo lo que tienes que hacer es agregar un ancho a la etiqueta Li!