¿Qué aplicaciones de iOS ya utilizan Material Design? ¡Así es como tomar notas para el autoestudio! Lo que estoy compartiendo hoy son los resultados del autoestudio de Diseño de Materiales de @东门王三. Sus notas de estudio son rigurosas y ordenadas, y puede establecer paralelos. Ha investigado desde Diseño de Materiales hasta las especificaciones de diseño de otros sistemas. También hizo cuidadosamente un mapa mental. Los estudiantes pueden aprender de él. Su método de autoestudio se aprende y se aplica al mismo tiempo, matando dos pájaros de un tiro. Si desea leer un buen libro, puede ir directamente a: Selección de navegación de libros de diseñador. @东门王三: A medida que el sistema Android se actualiza gradualmente de Android 4.4 a Android L, Material Design, como la última especificación estándar para la evolución del diseño de Android, también ha lanzado una especificación de diseño completa, Holo Themes, como modelo recomendado oficialmente. Tema para diseño de Android, es ampliamente utilizado en diversas aplicaciones. Holo Themes se ha utilizado ampliamente en el diseño de varias aplicaciones y, aunque la mayoría de las aplicaciones no cumplen completamente con las especificaciones de diseño, podemos ver que estas aplicaciones están trabajando para cumplir con las especificaciones durante el año pasado. Al observar la descripción general de Material Design, Google ha expresado su deseo desde el principio de crear una nueva especificación de diseño subyacente y luego usar esta especificación para unificar la experiencia del usuario en varias plataformas e interacciones. El diseño de Material Design se basa en tres principios: Material es una metáfora. Google cree que el tacto material en el mundo real se puede expresar a través de la metáfora del papel, mediante el uso de interacciones animadas que se ajustan a las leyes del movimiento en el mundo. diseño, y mediante el uso de luces y sombras para crear relaciones jerárquicas en el diseño. El espacio de interacción virtual puede crear un nuevo espacio, y este espacio es el espacio de interacción virtual mencionado en el documento. Este espacio está en línea con las leyes de la realidad. . Este es también el estudio del papel y la tinta mencionado en el documento. Audaz, vívido y reflexivo En términos visuales, Google no solo requiere imágenes vívidas, sino que también requiere que el diseño confirme el propósito del diseño, abandone el diseño puramente por estética y enfatice que el diseño visual debe proporcionar una guía para que los usuarios lo utilicen. y resaltar las funciones principales actuales de la página. Google menciona esta parte del diseño de impresión tradicional en el documento. Las acciones aportan significado El propósito de la animación interactiva es atraer la atención del usuario y expresar los cambios que ocurren en la página y, al igual que los requisitos visuales, debe ser significativa. El documento de especificación de diseño es muy detallado y no los enumeraré uno por uno. La siguiente es mi experiencia personal en capítulos específicos, que es el foco del resumen de aprendizaje. Puede consultar: El resumen del autor es práctico y completo. Se recomienda que los estudiantes descarguen imágenes grandes de alta definición para estudiar: Descarga de microdisco Recientemente, mientras estudiaba las especificaciones de diseño de Material Design, obtuve cierta comprensión de la historia de la evolución. otras especificaciones de diseño del sistema. Tengo algunas ideas personales inmaduras para compartir con ustedes. Bienvenido a comentar: La lógica de varias especificaciones de diseño espera construir un mecanismo operativo del mundo virtual razonable, y las especificaciones de diseño son los principios operativos de este mundo, lo que permite innumerables aplicaciones. opera razonablemente en el mundo virtual para que los usuarios puedan entender claramente cuando lo usan. Diseño de eskeuomorfismo (iOS1-6): durante la evolución de iOS1-6, el diseño de eskeuomorfismo ha sido muy respetado. La intención original de este estilo de diseño es ajustarse al modelo mental del usuario tanto como sea posible y reducir el costo cognitivo del usuario. En este estado, el teléfono es como una caja que contiene varios artefactos, y los artefactos en la caja son aplicaciones completamente antropomórficas. El diseño antropomórfico consiste en trasladar completamente la relación interactiva de la capa real al teléfono móvil. Por ejemplo, el estilo de diseño de iBooks es personificar completamente la lógica de las estanterías y los libros en la realidad, totalmente en línea con las expectativas psicológicas de los usuarios y fácil de entender y usar: la captura de pantalla de iBooks de Douban Radio a continuación también refleja completamente que el El diseño antropomórfico se ajusta al modelo mental del usuario. Ventajas innatas. Con el desarrollo del antropomorfismo, han ido surgiendo gradualmente algunas desventajas: las complejas relaciones jerárquicas en la realidad no se pueden simular completamente a través del espacio bidimensional de la pantalla del teléfono móvil, y con el desarrollo de la ciencia y la tecnología, algunos objetos se van desconociendo gradualmente; Si seguimos persistiendo en el antropomorfismo, tendremos un problema de cognición inversa; otro ejemplo es el cronómetro de Smartisan Technology Clock. Creo que muchas personas nunca han visto el objeto real y no conocen los pasos operativos reales. Para esas personas, no hay mucha diferencia entre el costo de aprendizaje de usar la aplicación y el diseño de unos pocos botones.
El antropomorfismo de la aplicación Hammer Watch tiene requisitos de interfaz de usuario extremadamente altos, el diseñador tiene una gran carga y el umbral de diseño también es muy alto. Los íconos antropomórficos son más adecuados para las operaciones de clic del mouse y, con la popularidad de las pantallas táctiles, planas y planas; toque a gran escala La operación es más adecuada para la interacción con la pantalla táctil. Diseño plano (iOS 7, 8/WP): En cuanto al diseño plano recientemente popular, aunque iOS 7 y WP son algo similares visualmente, son muy diferentes en las metáforas de interacción. El diseño plano de WP no sólo aplana visualmente los iconos, sino que también aplana el nivel lógico de interacción. ¿El nivel lógico anterior era? ¿Disco C/D/E? ¿Carpeta? ¿Varios software de documentos? El nivel de lógica plana actual es que todos los niveles lógicos pueden estar en un nivel lógico, en lugar de considerar deliberadamente simular la lógica que ya existe en el mundo real. En otras palabras, es una lógica completamente nueva. Esto es como muñecos de anidación que han sido desmantelados y dispuestos en una matriz. Entonces solo pueden ser muñecos de matriz. ¿Todavía pueden llamarse muñecos de anidación? ¿Muñecas nido? El diseño plano de Win8 e iOS7 y 8 es visualmente similar al estilo de diseño de WP, pero en términos de interacción, iOS7 y 8 utilizan mucho zoom, desenfoque, perspectiva y estilo de vidrio esmerilado para crear un espacio completamente nuevo con un sentido de posición y profundidad del mundo virtual, controlando así la superposición de interacciones a través de la profundidad de campo. También asegura la planitud de la jerarquía transformando el ángulo del eje Z. Diseño de tarjetas (webOS), diseño de materiales (Android): el sistema de tarjetas en webOS representa cada programa en forma de tarjeta y se usa junto con gestos interactivos en el área de gestos durante operaciones multitarea, lo que realiza operaciones multitarea. muy conveniente. Al mismo tiempo, en la era webOS 2.0, la metáfora de la tarjeta continuó y se introdujo el concepto de apilamiento en la multitarea, y cada tarea de la aplicación se apiló en un gesto similar al de jugar a las cartas. webOS Después de que Google le quitara el voto a webOS, Android también incorporó algunos conceptos de Solitario. Mi visión personal de Material Design es estandarizar aún más el diseño de tarjetas y extenderlo a todo el nivel del sistema. El webOS original transformó metafóricamente toda la aplicación en una tarjeta, mientras que Material Design estandarizó varios diseños dentro del sistema en una hoja de papel deformada. Entonces, Google está utilizando el modelo físico de papel y tinta reales para interactuar. Dado que la aplicación en el teléfono móvil no puede simular completamente el nivel lógico del mundo real, estandarizo la aplicación en una hoja de papel y simulo completamente la interacción lógica. nivel de una hoja de papel ¿Está bien? El papel está dividido por pliegues. Aunque son dos contenidos diferentes, lógicamente los dos contenidos siguen muy relacionados y, en términos de expresión, siguen siendo un solo trozo de papel. Las líneas límite de las sombras expresan que se trata de dos hojas de papel. La relación entre las dos hojas de papel es lógicamente independiente. La unión de la capa superior de papel definitivamente no interferirá con la capa inferior de papel. La pestaña de contenido se puede mover hacia arriba y hacia abajo en la parte inferior de la pestaña de la barra de herramientas. La barra de menú es un pequeño trozo de papel nuevo pegado encima de la jerarquía de papel existente. Los botones flotantes son trozos de papel circulares que están adheridos a todas las capas de papel excepto a la barra del sistema. Se trata de jerarquías lógicas en toda la interfaz del programa y se distinguen por el sombreado en el borde del papel. La representación de la sombra de la tarjeta. La representación de la sombra de la FAB. La representación de la sombra de la navegación correcta. En resumen, el diseño de papel de Material Design primero integra la interfaz en el papel y luego distingue las múltiples capas del papel a través de sombras. y finalmente utiliza el Collage para proporcionar posibilidades de interacción unificadas y diversas entre plataformas. Personalmente, creo que el propósito de la especificación es estandarizar varias plataformas (iOS, Android, WP?) y varias ROM (miui, flyme, ColorOS?) basadas en la profunda personalización de Android. Hay tres especificaciones: unificar y restringir el diseño y. la interacción de la experiencia de aplicaciones de terceros, reduce los costos de aprendizaje y uso de los usuarios; unifica la experiencia de uso y aprendizaje de los usuarios; unifica la experiencia de uso y aprendizaje de los usuarios; , Reduzca los costos de aprendizaje y uso de los usuarios. Unifique la experiencia multiplataforma y reduzca los costos de uso y aprendizaje multiplataforma de los usuarios; proporcione una interfaz unificada estandarizada y reduzca los costos de diseño de los desarrolladores.