Sumérgete en los detalles de iOS 11: ¿Apple sigue estando orientado a los detalles?

Hace días ew F, Apple tuvo su evento especial en caída Steve Jobs teatro situado en el interior del parque de Apple, al presentar la pantalla Todos los iPhone X, y posteriormente empujando IOS 11 GM a los probadores beta, que va a salir oficialmente la próxima semana. Actualicé mi teléfono tan pronto como obtuve el impulso de iOS 11 GM.

Desde la WWDC en junio, he sido un beta tester para iOS 11 que ha pasado por un intenso verano de actualizaciones incrementales. Con mi iPhone 7 de 4.7 pulgadas y el GM de iOS 11 a la mano, todavía existe bastante sensación inconclusa de software Beta. Como diseñador, no puedo evitar escribir sobre mis sentimientos.

Escribo esto para ayudar a las personas a darse cuenta de muchos detalles que requieren más pulidos, que con suerte incluyen personas en Apple y pueden seguir adelante con los cambios para mejorar esos detalles.

La sensación inconclusa en iOS 11 proviene principalmente de la interfaz de usuario y la animación. Los elementos de la interfaz de usuario en iOS son bastante inconsistentes, ya que mezclan una variedad de elementos de la interfaz de usuario, que pueden parecer bastante similares pero que presentan una sensación de desconexión para UX. La incoherencia de esos elementos se debe principalmente a los elementos de la interfaz de usuario actualizados en iOS 11, como el título grande y la nueva barra de búsqueda. En mi opinión, esos elementos recién introducidos, que pueden ser desconocidos y nuevos incluso para los ingenieros de Apple, han causado muchas inconsistencias en la experiencia de UI en iOS 11.

Mail.app

Primero veamos Mail.app en iOS 11. Al igual que otras aplicaciones nativas, Mail también presenta una nueva barra de navegación con título grande. Sin embargo, Large Title in Mail tiene un margen izquierdo adicional en comparación con el ejemplo de la guía de diseño. Aquí usaremos la barra de búsqueda como objeto de referencia. En el ejemplo de la guía de diseño, Large Title y la barra de búsqueda comparten la misma distancia al borde, pero en Mail.app, el título grande se mueve un poco hacia la derecha en comparación con la barra de búsqueda.

Watch.app

En Watch.app, la barra de búsqueda no sigue el estilo sugerido, destacándose con su fondo no adaptado. En las aplicaciones nativas que adoptan estilos de iOS 11, la barra de búsqueda debe coincidir con la barra de navegación de forma natural, a diferencia de Watch.app.

En el video de instrucciones de Building Apps para iPhone X publicado por Apple, mencionaron exactamente el mismo caso:

La WWDC.app a la izquierda es un contraejemplo que no coincide con los estilos, y Contacts.app a la derecha es una mejor práctica que combina estilos. El comentarista en el video dice:

Eso es pasar al segundo problema que encontré … si saco el campo de búsqueda, bueno, eso no se ve del todo bien. Comparemos esto con la lista de aplicaciones Contactos. Un par de cosas se ven mal aquí. El color del fondo de la barra de búsqueda no es del todo correcto. Y el tamaño está un poco apagado.

Por lo tanto, iOS 11 sugiere un fondo coincidente entre la barra de búsqueda y la barra de navegación. Sin embargo, Watch.app no ??lo sigue como una aplicación nativa. Además, una vez que se hace clic en, la barra de búsqueda en Watch.app está casi besando la barra de estado, lo que muestra que los ingenieros de Apple deben pulir más.

Files.app

Barra de búsqueda en Files.app también tiene algunos problemas. Parece que los ingenieros de Files.app utilizaron una barra de búsqueda no estándar. De la imagen siguiente, en comparación con la barra de búsqueda estándar en Settings.app, Files.app tiene una barra de búsqueda ligeramente más pequeña y un color de fuente más claro.

Además de la diferencia de color / tamaño, la animación luego de hacer clic en la barra de búsqueda también es diferente. La animación de la barra de búsqueda estándar en Settings.app:

Luego barra de búsqueda en Files.app:

Comparativamente, Search Bar en Files.app tiene una animación más rápida pero una lógica de animación menos natural y un poco de emoción inconclusa.

App Store.app

La App Store de iOS 11 ha experimentado un rediseño e introducido un estilo similar al de Apple Music. Sin embargo, en la pestaña Hoy de App Store, en comparación con Apple Music's For You, las fuentes de fecha son diferentes, ya que App Store usa uno en negrita, mientras que Apple Music usa uno liviano. Y en Apple Music, "Wednesday" es seguido por una coma, pero en App Store falta la coma.

También la comparación entre estas dos aplicaciones. En la página de búsqueda, tocar el elemento de tendencia en App Store no activará un efecto de desplazamiento como retroalimentación para tocar, mientras que una acción similar en la página de búsqueda de Apple Music activará un efecto de desplazamiento cambiando el color de fondo / primer plano del elemento. En mi opinión, Apple Music lo hace mejor y las aplicaciones nativas deben ser coherentes a la hora de tomar decisiones de retorno, sin importar si lo tienen o no.

Además, todavía hay algunos problemas diversos entre los detalles. En la tienda de aplicaciones, abra cualquier aplicación con la imagen del banner, deslice ligeramente desde el borde izquierdo hacia la derecha (pero no pase completamente para cerrar la página de la aplicación). La sección de pancarta aparecerá extrañamente después de que la página rebote:

Puede consultar este error con el video a continuación.

También hay un problema de rendimiento. En la pestaña Actualizaciones, desplácese hacia abajo para actualizar los elementos y hay una caída obvia del marco si el Título grande se tira demasiado hacia abajo. Puedes sentirlo fácilmente.

Health.app

En Health.app, entre la página Hoy y la página Datos de salud, los mismos datos y los mismos estilos, pero de diferente ancho. Este es un problema antiguo de iOS 10 y todavía no se ha solucionado.

Widget de hoy

En iOS 11, hay dos maneras de abrir Today Widget, ya sea deslizando de izquierda a derecha en la pantalla de inicio, o en la pantalla de bloqueo, sin embargo, la barra de búsqueda en las páginas invocadas de manera diferente tendrá un comportamiento diferente. Cuando se invoca desde la pantalla de inicio, al desplegar la página de widgets no se mostrará la pantalla de búsqueda, y al hacer clic en Search Bar faltará la animación de mostrar y descartar el efecto de vidrio esmerilado y la animación de la barra de búsqueda de ampliación (aunque hay animación de acortarla) después de presionar cancelar. La experiencia general es bastante incómoda.

Cuando se invoca desde la pantalla de bloqueo, hay animaciones en todas partes y al desplegar la página de widgets se mostrará correctamente la pantalla de búsqueda, una experiencia muy fluida y natural.

Esto está causando una sensación bastante desconectada de Today Widget en dos escenarios. Obviamente, el que se invoca desde la pantalla de inicio está inacabado en comparación con el invocado desde la pantalla de bloqueo. Lo extraño es que el widget de hoy invocado desde la pantalla de inicio en iOS 10 tiene todas esas animaciones y podría mostrar la pantalla de búsqueda tirando hacia abajo. No tengo idea de por qué va hacia atrás en iOS 11.

Sin embargo, el widget de hoy invocado desde la pantalla bloqueada en iOS 11 también retrocede un poco en comparación con iOS 10. En la página Widget actual, cuando el usuario abre la página, la barra de búsqueda desplazará el widget con cristal esmerilado, evitando que el widget se apile en la barra de búsqueda . Sin embargo, al hacer clic en la barra de búsqueda, el cristal esmerilado desaparecerá inmediatamente y luego se renderizará lentamente un cristal satinado de pantalla completa. Al cancelar la barra de búsqueda, el cristal esmerilado de pantalla completa desaparecerá lentamente y, a continuación, se renderizará inmediatamente la pequeña sección de vidrio esmerilado sin animación, un poco antinatural.

Preste atención a la barra de búsqueda en la parte superior de la pantalla

Si el video es demasiado rápido, puedes verificarlo por fotograma. Lo que podemos ver es que el vidrio esmerilado de pantalla completa no está relacionado con el vidrio esmerilado de la sección superior en términos de una representación uniforme, lo que genera una sensación de desconexión.

Además de las animaciones faltantes, iOS 11 también trae animación redundante. En iOS 11, cada vez que deslice desde Today Widget a la pantalla bloqueada, la sección Player cambiará de tamaño una y otra vez, lo cual es bastante innecesario.

En la página de Siri Search Suggestion invocada después de hacer clic en Search Bar, hay dos problemas. En primer lugar, cuando se tocan las sugerencias, la retroalimentación está usando un ancho menor que el ancho de la pantalla, lo que hace que los comentarios de desplazamiento se conviertan en un rectángulo extraño. La retroalimentación de desplazamiento apropiada ya está presente en Apple Music, donde el efecto de desplazamiento tiene un ancho de pantalla completo.

En segundo lugar, y bastante extraño, si miras detenidamente la fuente Siri Search Suggestions, verás que están irregulares (especialmente la secuencia de comandos latina) cerca de los bordes, no son del todo uniformes, incluso se pueden comparar con el texto de entrada en la misma pantalla.

Photos.app

El margen inadecuado, ya sea demasiado o muy poco, aparece en muchos lugares de iOS 11, causando una mayor sensación de trabajo sin terminar / sin pulir.

En la pestaña Compartido de Photos.app, el margen (como se señala a continuación por la flecha) es demasiado estrecho e inconsistente, en comparación con cualquier otra aplicación nativa con páginas similares.

Settings.app

En la sección Settings.app ? Apple ID, la alineación de la lista de dispositivos está completamente desactivada desde la sección ID. Esto fue correcto en iOS 10 y roto en iOS 11.

Music.app

En la sección Connect de Apple Music, algunas publicaciones tendrán un margen realmente pequeño entre la imagen y el texto. Esto no debería ser una decisión de diseño ya que el margen en el cliente de iTunes en macOS de escritorio es apropiado. Aunque Connect es, de facto, una característica que rara vez se usa, Apple no debería cometer un error tan básico en el diseño de la interfaz de usuario.

También en Apple Music, ingrese la lista de álbumes a través de la Biblioteca, luego haga clic en la lista de letras inicial para ir rápidamente a esa sección. Verás que la sección de la letra inicial en la parte superior está cortando portadas de álbumes.

Anunciado como una función en iOS 10 en WWDC, la pantalla de jugador de Apple Music también se vuelve extraña en iOS 11. Volver a abrir la pantalla del reproductor hará que la sombra debajo de la cubierta del álbum desaparezca, y la tapa del álbum reducida durante la pausa también se agrandará si vuelve a abrir el reproductor pantalla.

El video se enumera a continuación:

Pausa la música, la portada del álbum se acerca, cierra y vuelve a abrir la pantalla del reproductor, la cubierta del álbum retrocede:

Reproducción de música, sombra debajo de la portada del álbum, cierre y vuelva a abrir la pantalla del reproductor, la sombra desapareció:

En iOS 10 con AirPods, cuando el dispositivo AirPlay está conectado, la pantalla del reproductor mostrará el nombre del dispositivo cerca del ícono de AirPlay. Eso se fue en iOS 11.

Algunas personas podrían pensar que esta es una opción de diseño, sin embargo, es un error en realidad. En el siguiente video, cuando el dispositivo AirPlay está conectado, el nombre del dispositivo se muestra correctamente. Sin embargo, si vuelve a abrir la pantalla del reproductor, desaparecerá. Si se trata de una opción de diseño, el nombre del dispositivo no debería haberse mostrado inicialmente.

Y en Podcasts.app que usa el mismo estilo de diseño que Apple Music, el nombre del dispositivo AirPlay siempre está ahí.

Otro error en Apple Music. Como sabemos, hay dos formas de ir a la diapositiva hacia arriba en iOS, ya sea haciendo clic en la barra de estado o haciendo clic en el icono en la barra de pestañas. En Apple Music, al presionar Barra de estado se regresará correctamente a la barra de navegación de Título grande, mientras que al presionar el ícono de la pestaña aparecerá una barra de navegación de fuente pequeña como se muestra a continuación.

Dado que en Podcasts.app y App Store.app, al hacer clic en cualquiera de ellos, ambos devolverán la barra de navegación Título grande, este comportamiento en la música de Apple es definitivamente un error.

Centro de control

En el Centro de control, la sección del dispositivo AirPlay también tiene problemas. A menudo, durante el uso de AirPods, Control Center mostrará el iPhone como dispositivo, y cuando se muestre AirPods como dispositivo, pausar la música hará que el dispositivo se convierta en iPhone (aunque AirPods aún se está reproduciendo).

Preste atención al nombre del dispositivo sobre el título de la canción

También hay una animación inapropiada en el Centro de control, la animación 3D Touch en Screen Mirroring:

Weather.app

Weather.app en iOS 11 también se ha actualizado utilizando una fuente más grande y menos margen. Sin embargo, noté que el texto templado en iOS 11 no está alineado al centro, mientras que estaba en iOS 10.

Esta podría ser una decisión de diseño de iOS 11. Sin embargo, durante el uso real, debido a la falta de alineación, para algunos dígitos, es muy obvio para el usuario que el texto está más cerca del borde izquierdo, lo que no muestra ningún profesional en comparación con el iOS 10.

Faux audaz problema para PingFang en Safari

El último y más serio problema, en mi opinión, es la fuente. Los problemas anteriores pueden no afectar el uso normal, pero el problema que se muestra a continuación nos afectará a todos.

Ese es el problema de la fuente falsa en negrita para PingFang (tipo de letra chino predeterminado de iOS) en iOS 11 Safari. Descubrí este problema cuando estaba probando sitios web personales en iOS 11. A continuación, todas las comparaciones se toman entre iOS 11 e iOS 10.

Como se muestra arriba, PingFang se está renderizando como falsa negrita. Faux bold básicamente no usa el peso de la fuente proporcionado por la fuente en sí, sino que agrega el peso de la fuente en algún peso de fuente base a la fuerza. Faux bold se genera mediante algoritmo y, a menudo, carece de calidad, lo que provoca el problema de los grosores de trazo y el seguimiento de letras. En la captura de pantalla, puede ver que el falso valor en negrita PingFang en iOS 11 tiene un espaciado más grande entre los textos.

Después de algunas pruebas, descubrí que esto sucedería solo cuando la familia de fuentes CSS incluye "-apple-system", es decir, una familia de fuentes que usa la fuente de San Francisco proporcionada por el sistema. Una vez que lo eliminemos, el sistema respetará el peso de la fuente proporcionado por la fuente misma y el falso negrita desaparecerá.

Este problema no solo está en Safari, sino también en todas las aplicaciones que usan el motor webkit de iOS para renderizar una página web, como el navegador interno de WeChat y Douban.app. Como puede ver, Douban.app ha estado dominado por falsa PingFang en negrita, con un aspecto bastante malo.

Escogiendo aleatoriamente una publicación de revisión de película, notarás que el título está en negrita falsa. A través de la comparación, también notará que el espaciado de fuente en negrita falsa es problemático. En realidad, esto no se trata solo de letras en negrita, sino también de peso regular o de cualquier fuente, por lo que está viendo "faux regular", etc. Faux regular no se identifica fácilmente a partir del grosor de trazo, pero de la comparación a continuación, notará que el espaciado de fuente es diferente en iOS 11, de modo que cada línea de texto tiene palabras diferentes, lo que demuestra una presencia "falsa regular".

Y verifique más imágenes de falsa negrita en WeChat.app.

Este problema de falsa fuente de Safari apareció en iOS 11 Beta 1 y envié un informe de error a través de la aplicación Comentarios en agosto (el número de caso es # 3436665 ). Sin embargo, sigue siendo un problema a partir de hoy, y probablemente para iOS 11 o posterior. Como entusiasta de la tipografía, estoy bastante decepcionado por esto.