Terminamos el campo de búsqueda de Google clavado

Durante una década de desarrollo, Google ha dejado de diseñar páginas de búsqueda con un diseño primitivo, hay suficiente dinero y tiempo para diseñar una página de búsqueda. Recientemente (de hecho, había estado experimentando en diferentes partes del mundo durante 2 meses ya), presentó un nuevo diseño de resultados de búsqueda, que aún se están finalizando: apareció un campo de entrada ovalado (en la búsqueda de imágenes todavía es rectangular), clavado en la parte superior (al desplazarse por la página) buscar. Las funciones restantes, básicamente, siguen siendo las mismas para las que se creó el script de usuario de Google Search Extra Buttons (extensión del navegador) hace bastante tiempo. En relación con los cambios en el diseño de la página, se realizaron mejoras y, al mismo tiempo, tocaron nuevos elementos de la interfaz de usuario, que discutiremos ahora, que muestran modificaciones de trabajo.

Todo, en general, es bueno con Google, y las modificaciones realizadas no hablan de fallas fuertes, pero agregan un poco de comodidad a las pequeñas cosas, lo que constituye la interfaz de usuario (interfaz de usuario) general. Enumeramos lo que se discutirá. Al principio, en funciones de script ya existentes, y más abajo, el hecho de que el otro día había uno nuevo con el diseño de Google.

  • Botones adicionales: forman la base del script de usuario para el que está instalado. Para que estén a solo un clic de distancia, algunas funciones (búsqueda por fechas, tipos de archivos y sitios) se mueven más cerca del usuario, a un espacio de página vacío. Ya existe desde hace varios años, por lo que ya se ha discutido, incluso en un par de artículos sobre Habré;
  • almacenamiento de configuraciones de botones adicionales;
  • lista desplegable de extensiones de archivo (aproximadamente 30), en la búsqueda general y búsqueda en imágenes;
  • sugiere cerrar los resultados de búsqueda cuando aparecen: cómo se decidió el cierre incompleto;
  • campo de búsqueda clavado: fue en Yandex hace aproximadamente 7 años; hay un script que "luchó" con él, y ahora resuelve problemas similares en el estilo de aikido y el script de usuario de Google;
  • La página ancha requerida de Google (quiere 1100) está ligeramente recortada (hasta 800 px con un encabezado es relativamente conveniente).

Botones adicionales


No han cambiado en los últimos días, pero hubo una revisión hace aproximadamente un año, que mejora las transiciones (transiciones CSS) de la desaparición de las columnas de fecha por el mouse. Inicialmente, el guión hizo la desaparición programática de las columnas en JS, de modo que con un movimiento aleatorio del mouse no desaparecerían instantáneamente y en una fracción de segundo sería posible corregir si la columna aún se necesita. Este es un truco común usado en los menús con el mismo propósito. Ahora esto se puede hacer completamente en CSS, pero antes, se requería un soporte de navegador más completo. Ahora la extinción del programa se guarda, pero se suaviza un poco por la presencia de transiciones CSS. No a todos les gusta la presencia de transiciones y el desvanecimiento suave de la transparencia en general, pero esto es una cuestión de configuración y mejoras en el guión. Proporciona el almacenamiento de configuraciones en localStorage, pero no hay "temas".

Almacenamiento de configuraciones


Google, Yandex y Facebook no han sido fáciles de almacenar localStorage durante mucho tiempo: limpian periódicamente su memoria (navegador de la computadora local de cada usuario). Por lo tanto, para almacenar los dominios de los sitios en los que el usuario busca a menudo, la cantidad de días y semanas durante los cuales realiza grupos de búsqueda, tuve que tomar una decisión difícil (algo similar se describió en algún lugar del Habré, por lo que recuerdo, para Facebook): almacenar la configuración en otro dominio . Pero ahora puede expandir el guión, por ejemplo, preservando los mismos "temas" que podrían haberse escrito durante mucho tiempo. El número de días, semanas o años que el usuario seleccionado durante la última búsqueda aparece y se almacena en el encabezado de la lista desplegable. (Otro poco de conveniencia).

Lista de extensiones de archivo


Para mostrar convenientemente 23 tipos de archivos y 7 tipos de imágenes, los tipos de archivos se dividen en 3 columnas, pero las 2 últimas aparecen cuando hace clic en el botón "Más ...". Además, en la búsqueda de imágenes en los botones adicionales, la casilla de verificación "Mostrar tamaños de imagen" (o no mostrar) se duplicó.

Para los archivos, la pregunta sigue siendo cómo es más conveniente y si es necesario establecer una búsqueda de varios tipos de archivos. Una solicitud puede escribirse manualmente en el campo de búsqueda (tipo de archivo: pdf O tipo de archivo: doc), pero puede hacerse de alguna manera en la interfaz del botón. Yandex tiene una oportunidad similar.

Consejos de búsqueda y transparencia


Pasamos a lo más interesante: a la herencia de los diseñadores de Google. Sin embargo, en Yandex, la hoja de sugerencias que cubre la media pantalla no está resuelta y también tuvo que corregirse. En Google, lo haremos más exhaustivo, ya que resalta las diversas terminaciones de palabras y frases para facilitar la navegación. Nos aseguraremos de que todo este banquete tampoco interfiera mucho con la búsqueda, la ocupación principal del motor de búsqueda.

En Yandex, la transparencia se hizo simple, apenas perceptible (con el script Yandex No Float Field ), de modo que se adivinaron los encabezados y la forma de la columna debajo del indicador. Esto casi no interfiere con la observación de consejos no siempre deseados y no elimina por completo la visibilidad de los resultados de búsqueda.


En Google, el nuevo script se hizo más radical, más transparencia. A través de campos blancos sólidos incluso puedes leer. Pero para que las indicaciones sean visibles: utilizamos etiquetas de texto en negrita de las indicaciones para organizar sustratos de colores densos para estas partes importantes.


Campo de búsqueda clavado


(O la línea se atascó - © 2011 ya - pelearon aquí: userstyles.org/styles/51117/yandex-ru-no-float-field . Después de un par de años se canceló, luego se ingresó nuevamente después de 2-3 años y ahora está en la interfaz Yandex está disponible.)

Entonces Google pisó este camino curvo. Obviamente, esta solución es fundamentalmente defectuosa si no tiene un monitor con una altura de más de 1600 píxeles. El campo de búsqueda con sus bordes y adornos oculta parte de la altura de la ventana necesaria para mostrar los resultados de la búsqueda, el principal, por el cual llegaron al sitio. Si el desplazamiento elimina un campo de una ventana en una página normal, entonces con el "buen servicio" de mordisquearlo en la parte superior, esta simple oportunidad se pierde. Y si, como Yandex ahora, también hay enlaces, la cantidad de gratitud crece proporcionalmente. (Sin embargo, los usureros también toman quién es el 3%, quién es el 7% de la comisión, por lo que la mayoría es familiar, pero ¿cuál es el punto? ¿Por qué, si ni siquiera necesita tres?) Sin embargo, ambos probablemente invirtieron en los fabricantes de monitores de alta resolución a tiempo, por lo que y Google ahora comenzará a gotear ganancias). Pero hasta que compremos un nuevo monitor, eliminemos esta línea adhesiva.

Google come un poco en su campo enclavado: solo 72 px (72/1080 = 6.7% de comisión para los fabricantes de monitores), Yandex - 94 (8.7%). Aunque ambos podrían mostrar la ventana si es necesario, colocando el mouse sobre la parte superior de la pantalla.


Cumplimos los sueños de los usuarios pobres que no quieren gastar dinero en hierro (innecesario), especialmente porque Google logró mostrar automáticamente nuestros botones adicionales en su campo enclavado. Si mueve el campo debajo de la parte superior de la ventana, los botones se "cuelgan", y al pasar el cursor sobre ellos le permite abrir el campo de entrada.


El porcentaje de la comisión era la altura de los botones: 22/1080 = 2%, e incluso entonces dividimos por 3, porque ancho ocupan un tercio de la pantalla. (Un murmullo de indignación se extendió entre los monitores capitalistas).

Señalamos algo en el medio de la página: vemos no solo los botones que caen, sino también el campo de entrada disponible.


Página ancha de Google


Todavía no producen monitores de pantalla panorámica, por lo que los estilos establecen un límite de ancho de página de 1100 píxeles, bastante modesto todavía. (¿Por qué necesitan a estas personas con 1100 píxeles?) Pero cuando miramos los resultados de búsqueda no en la ventana completa, a veces lleva menos. Un campo de búsqueda para ver un ancho menor es inconveniente.

Estamos realizando mejoras para que desde 800 píxeles pueda usar todas las funciones en el encabezado sin rotar la página horizontalmente.


El desplazamiento horizontal horizontal permanece, pero esta es la identidad corporativa de Google, que depende en gran medida del contenido de la página. Dejemos este trabajo a él, y cuando (y si) hacemos nuestro motor de búsqueda, trabajaremos en él y en el desplazamiento horizontal.

Los planes del script de usuario para Google son agregar varios botones (tamaños, estilos, colores) para la ventana de búsqueda de imágenes, hacer una selección múltiple de archivos, 1-2 casillas de verificación para estilos y dejarlo en este formulario para las próximas revisiones cuando sea necesario.

UPD: una característica interesante en Google para el idioma ruso.
Como sabes, la calculadora de Google se mezcla con los resultados de búsqueda si ve una expresión matemática. En particular, 2 ^ 4 es 2 ** 4, igual a 16. Pero Google también entiende '2v4' como una operación de elevar a una potencia.

Source: https://habr.com/ru/post/es432032/


All Articles