() translation by (you can also view the original English article)
Si usted está trabajando en la empresa, contratación, o para una agencia, las empresas necesitan aplicaciones por muchas razones diferentes. Empresas establecidas en particular necesitan atender a sus clientes actuales y los dispositivos que utilizan. A menudo eso significa una nueva aplicación para Android e iPhones.
En un mundo ideal, pasan meses diseñando dos aplicaciones. Pero en realidad, muchos proyectos no permitan mucho tiempo. Para cualquiera de las aplicaciones que he trabajado en, la fecha límite ha sido lo suficientemente apretada como para diseñar una aplicación, por no hablar de dividir el proyecto en dos.
A menudo está diseñando una aplicación, con retoques realizados antes de entregar a dos equipos de desarrollo. Si está diseñando una aplicación de esta manera, es importante entender la diferencia entre las dos plataformas desde el principio, y lo rápido que usted puede hacer la experiencia de sentir nativo de cada uno.
Antes de Empezar: Elija su Enfoque
1. Mantenga su Enemigo Más Cercano
Es probable que usted tendrá una preferencia personal por un sistema. Siempre he usado iPhones, para tener una comprensión más natural de los patrones de interfaz de usuario de iOS. La cosa lo primero es conseguir a los apretones con la otra plataforma, y la mejor manera de hacerlo es comprar otro aparato, un androide en mi caso. Incluso podría ser una buena idea utilizarlo como su dispositivo primario para la duración del proyecto, para realmente tener una idea de la plataforma.
Si trabajas en casa, Haz que te compren un dispositivo de prueba. Si hay cualquier problema, comunicarse con la gerencia el valor que la comprensión de la plataforma alternativa agregará a su trabajo de diseño (el costo es caro para dos dispositivos de tu propio bolsillo, pero para un negocio es un costo bajo en comparación con el gasto en el diseño y desarrollo de una nueva aplicación). Si trabajas freelance, debe ser capaz de escribir contra su factura de impuestos.
2. Elija un Plomo
Como que estamos diseñando para ambas plataformas a la vez, mientras que tratar con el mundo real donde el tiempo es limitado, tendrás que aceptar la realidad de dar prioridad a una plataforma desde el principio. Tomar esta decisión no basada en sus preferencias personales, pero basados en el mercado para su aplicación. ¿Más gente en el mercado utilizan los teléfonos Android? ¿Es una aplicación de pagada? ¿Cuál es el público objetivo? Estas preguntas le ayudará a decidir que es preferible.
3. Conocer las Reglas
Leer las directrices de la interfaz de usuario para Android y iOS. En el pasado Apple era conocido por ser más estricta con sus directrices. Para obtener una aplicación en la app store, hay un proceso de aprobación que dura aproximadamente dos semanas. No hay ningún proceso de aprobación de la Play store. Sin embargo, debido a esta baja barrera de entrada en Android la calidad del diseño ha sido tradicionalmente peor. Google busca para cambiar esto con sus Directrices de Diseño de Material.
Hay un montón de buena y gratis, kits de interfaz de usuario que puede utilizar para sus proyectos (encontrarás algunos listados al final de este artículo). Utilizando estos componentes naturalmente dará su aplicación una sensación natural. Pero aun cuando los kits de interfaz de usuario, puede ser difícil saber dónde difieren y donde quieres el mismo entre plataformas, así que es donde yo quiero ayudar a.
Diseño Su Aplicación
Siga estos sencillos pasos, y su aplicación será en el camino correcto para caber en dispositivos iOS y Android.
1. General estilo
Desde iOS7, Apple ha cambiado de puesto a un estilo de diseño más plano y abandonó el skeuomorphic sombras, texturas y efectos que define el iPhone desde años. Android, después de haber sido más sistemática en estilo en un principio, ha ido un poco al revés. Las directrices de diseño de Material nuevo de Google crean más sutiles referencias al mundo real, con un enfoque de capas "papel" proporcionando más jerarquía.
2. Real botones
Los teléfonos Android tienen un botón de retroceso, que se puede utilizar para volver a pantallas anteriores en la aplicación.
iPhone no tienen este botón, por lo que tiene que haber una manera de viajar nuevamente a la pantalla anterior. Esto es hecha generalmente por un "back" chevron en la parte superior izquierda de la pantalla, pero hay que considerar a lo largo de los varios viajes en su aplicación.
3. Globales elementos
Hay elementos globales (como una barra de estado y encabezado) que aparecen en todas las páginas de su diseño. Usted no debe estar cambiando la altura o el estilo de estas barras en todo si quieres la aplicación para sentir nativo, por lo que se recomienda definirlos una vez en su primer diseño de página para cada plataforma. Entonces luego puede utilizar un marcador de posición (o la barra de estado y la parte superior de su OS principal) en cada una de sus maquetas, pero indicar a los desarrolladores que debe ser el mismo en todos los ámbitos.
Hay ligeras diferencias entre las barras de navegación en cada plataforma. En Android que el texto quedo alineado, mientras que para iOS se centra. En iOS, muchas empresas cambiar el título de la Página principal con el logotipo de su empresa, pero esto no es mejor en Android. La barra de estado (con su red, batería e información de tiempo) es un componente nativo, y no es necesario tener en cuenta el diseño. Sólo asegúrese de que en la presentación de maquetas para utilizar la correcta para evitar cualquier confusión o distracción.
4. Navegación
Quizás el mayor punto de diferencia entre las plataformas Android y iOS es navegación. El patrón de navegación primaria en Android es un cajón. Los usuarios de Android van naturalmente a esto para elementos de menú, y tiende a ser omnipresente a lo largo de la experiencia. Las directrices de Apple son más a favor de una barra de pestañas, que se encuentra en la parte inferior de la pantalla y permite un fácil acceso a las áreas de nivel superior de la aplicación. Cuando usted está decidiendo la arquitectura de alto nivel de su aplicación, usted puede planificar dos menús diferentes para las dos plataformas.
Pensar en la arquitectura de la aplicación es sin duda más importante que el diseño de menús, un lo que hice en otro artículo sobre algunos de estos temas. Si su estructura es sólida, la navegación seguirá.
Como ver aquí, hay dos patrones de navegación: un menú de cajón para una barra de pestañas para iOS y Android. A veces es más fácil simplemente ocultar la capa de navegación mientras trabajas en vistas individuales.
¿5. Tarjetas, o no?
Las tarjetas se están convirtiendo en el principal patrón de interfaz de usuario en diseño digital. Son versátiles y permiten a los usuarios consumir bites rápidas de contenido de forma que se adapte comportamientos móvil. Visualmente, las tarjetas caben muy bien con el diseño material de Android (que está inspirada por el papel). Usar sombras y canaletas razonables entre tarjetas creará una apariencia nativa natural.
En iOS, utilizando tarjetas necesita más cuidado y consideración. Incluso grandes aplicaciones como Facebook y Pinterest utilizan tarjetas de una manera que es un poco fuera de sintonía con las directrices de iOS. iOS las guías sugieren usar profundidad en transparencias y superposiciones, pero la vista básica es generalmente más plana. Instagram utiliza un estilo de diseño completamente plano, aunque cada post se podría considerar una tarjeta desde un punto de vista arquitectónico. Vale la pena mirar cómo Instagram obtener la misma sensación de componente dentro de un estilo de iOS. Si vas con las tarjetas en iOS muy suave con el uso de sombra y tratan de mantenerlos tan sutil como sea posible.
6. Tipografía
La familia de fuentes del sistema en iOS es Helvetica Neue. En Android es Roboto. Aunque el estilo de las tipografías son notablemente diferentes, las métricas de las fuentes son bastante similares. Si usted está ahorrando tiempo estarás lo suficientemente seguro para trabajar con sólo uno, pero comunicar a los desarrolladores aplicar la fuente correcta para el sistema. Cuando se trabaja con diseños de importantes y extremos en tamaños tipo es recomendable para probar al menos su diseño con ambas fuentes.
Si quieres ir la milla extra, usted necesitará prestar más atención a los caracteres y las convenciones de diseño en cada plataforma, referencia otra vez a las directrices arriba. Algunas generalizaciones:
- Diseño de Material Android utiliza un amplio espacio en blanco en el diseño
- También hay uso más espectacular del apresto de la fuente en el diseño de materiales. Títulos llamativos con un montón de espacio proporcionan la jerarquía de
- En iOS, hay menos dramática variación en tamaño. Pero hay más variación en pesos de la fuente, que todavía le permite crear una jerarquía.
- Normalmente, ambas plataformas utilizan pesos más ligeros en la familia de fuentes. Sin embargo, en el ejemplo siguiente, el diseño de Android está utilizando pesas ligeras y regulares de Roboto, mientras que el diseño de iOS está utilizando pesos bold y regulares de Helvetica Neue.
Este es un ejemplo muy simple, hacer hincapié en cómo incluso en formas sencillas de que la tipografía inmediatamente puede decirle si usted está tratando con una app de iOS o un Android.
7. Rejillas y Toque Objetivos
iOS (44px @1 x) y Android (48dp - 48px en proporción 1:1) tienen ligeramente diferentes pautas para objetivos de toque. Guías de diseño del material sugieren también alinear todos los elementos con una cuadrícula de base cuadrada de 8dp.
En el último proyecto que he trabajado en lo encontramos más seguro seguir estas pautas Android porque el mayor objetivo de toque 48px es seguro para ambas plataformas, y (b) la disposición para el diseño de materiales es más definido y hasta la fecha. De cualquier manera, necesita una red para trabajar con, pero con Android más estrictamente se define encontramos 8dp para funcionar bien. Esto significa configurar el documento con 8dp incrementos en planos horizontales y verticales para crear un diseño de baldosas de la rejilla.
8. Estilos de botón
Existen varios estilos de botón definidos en el diseño del Material:
- Botones de acción flotante: tradicionalmente, la mayoría en forma de botones. Las sombras son bastante pesadas y levantarlas de la página. Estas sólo puede usarse en fondos, o escasamente en las tarjetas. Ellos no se debe utilizar en absoluto en alertas o pop-ups, como hacer crea tan demasiadas capas de profundidad. La acción principal toma su color de acento, mientras que las versiones secundarias son generalmente un color menos prominente.
- Botones planos: texto esencialmente en el color de acento, sin ningún elemento delimitador. Utilizan relleno y todo el caso de tapas para darles estructura.
En comparación con el diseño de Material, aplicaciones de iOS son típicamente plano en apariencia, aprovechando no sombras profundidad o gota. Los botones primarios tienen un color de relleno, mientras que los botones secundarios están invertidos, con un movimiento del mismo color. Esta metáfora puede convertirse en algo limitada, especialmente en comparación con las lengüetas y otros elementos a seguir. Para obtener este estilo muy plano adecuado, es importante tener metáforas claras y coherentes para lo que quiere decir colores en su aplicación.
iOS también tiene un botón de estilo del texto, pero no comparte el estilo mayúsculas de Android y es más ligero en peso de la fuente.
9. Acción Hojas
Hojas de acción permiten a los usuarios elegir entre una multitud de acciones de un elemento de interfaz de usuario. Por ejemplo, cuando toque (o pulsación larga) en una imagen que quizás quiera compartir, subir, copiar o eliminar la imagen.
iOS y Android abordarlo de manera ligeramente diferente. En primer lugar, son similares hojas de acción que muestran desde la parte inferior de la pantalla, como una superposición en la vista actual.
Con hojas, superposiciones y alertas de acción, iOS y Android utilizan datos diferentes para indicar profundidad en capas:
- Superposiciones de androides tienen un color sólido con una ligera sombra para indicar que es una capa de "papel" superior.
- superposiciones de iOS no tienen ninguna sombra, pero tienen una ligera transparencia en el fondo.
Botones de Lista Desplegable
Existente sólo en Android, se trata de un fuego rápido método de hacer una selección. Tener en cuenta, sin embargo, no hay un equivalente de iOS nativo. En el ejemplo siguiente, el usuario presiona en "perfil" en el paso 1 y se presenta con un menú sencillo en esa ubicación a elegir uno de los perfiles disponibles. Estos menús se utilizan también con frecuencia desde el botón de superposición en la barra de acción, indicada por tres puntos verticales.
Entrada de Datos Específicos
Para entradas particulares como la fecha y la hora, Android ahora viene con construido en diálogos. Estos look como alertas pop-up, pero con interfaz de usuario atiende específicamente a introducir este tipo de datos. Se muestra un ejemplo de un calendario de la entrada. Android tiene un recubrimiento óptimo para introducir una fecha. iOS se ocupa de esto absolutamente diferentemente, que aparece como una rueda que sube como una sábana bajera. Tenga cuidado en la planificación de éstos y comunicarse con componentes principios de entrada de los desarrolladores.
10. Controles Segmentados
Controles segmentados se utilizan para cambiar entre diferentes contenidos dentro de una sola vista. Su uso es muy similar, pero son muy distintivos visual de cada plataforma por lo que es importante utilizar el estilo correcto. En iOS hay tres pestañas, de estilo similar a los botones de línea discutidos previamente. En Android, son denotadas por un simple subrayado y dadas mucho más espacio en blanco para indicar su interacción.
11. Alertas
Es importante que el estilo de estos derechos porque ellos podrían controlar acciones importantes como registrarse, aceptar los términos, o incluso confirmar el pago. Queremos que se sientan confianza y nativa.
Las alertas Android utilizan los estilos de botón que se mostraron anteriormente, dimensiones que pueden encontrarse en las guías de diseño material. Las acciones de sentarse en la parte inferior derecha de la alerta. Los "botones" son realmente basadas en texto. Usan mayúsculas para darles más estructura, y llevan el color de la acción principal de la aplicación.
En iOS, las acciones están separadas por divisores. Son generalmente en caso de sentencia o título, como adquieren su estructura de los bloques separados. Se centran en el campo, y otra vez va a heredar tu color activo.
12. Iconos
Diseño de icono es bastante el área de especialista en diseño de interfaz de usuario. Si usas iconos gratuitos, puesta en marcha de un diseñador icono, o diseñar los iconos usted mismo, hay un estilo distinto nativo de cada plataforma. iOS popularizó los iconos de la línea, con trazos muy finos. Los iconos del sistema Android tienen trazos más gruesos, o iconos totalmente sólida. En el pasado, los iconos de Android utilizan perspectiva o tres torcedura dimensional, pero ahora sus directrices especifican dos iconos tridimensionales han consultado el recto. Aquí está un ejemplo rápido con varios iconos para comparación o utilice los enlaces directos a las pautas de icono para iOS o Android
13. Puntos, tostadas, cargando imágenes
Unlucky 13. Hay algunos detalles de la interfaz de usuario que pueden deslizarse a través de las grietas. Más comunes como alertas y carga los iconos quedan a menudo a los desarrolladores. Usted puede haber experimentado rogue hilanderos y alertas extrañas que se han sentido fuera de sintonía con el resto de la aplicación. Allí tienden a ser soluciones nativas para estos, pero pueden ajustarse al estilo de su aplicación. Esto es definitivamente un área donde la colaboración con desarrolladores de es la mejor manera de decidir en que manera tuya debe trabajar.
14. Controles de Interfaz de Usuario Comunes
Botones de opción, casillas de verificación, campos y switches son componentes funcionales que se deben dar una sensación natural. Como alertas y diálogos, las entradas y controles son un espacio de confianza y familiaridad para el usuario. Utilizar los componentes nativos tanto como sea posibles para éstos, por lo que (a) saben cómo usarlos y (b) confía su aplicación con sus datos sensibles o datos de pago.
En el ejemplo siguiente vemos conmutador y radio botón equivalentes para Android y iOS. Una vez más, las diferencias son lo suficientemente pequeñas como para que usted pueda progresar con un diseño y retoque para la posterior, pero las diferencias sutiles son esenciales para un look natural. Utilice el kit de interfaz de usuario tanto como sea posible para estos componentes y otra vez comunicarse con los desarrolladores en el proceso.
Resumen
No es una tarea imposible para crear una sensación nativa para su aplicación en iOS y Android con un diseño. Trate de mantener en la cima de estos ajustes desde el principio, mantener un ojo hacia fuera para los componentes que se sienten fuera de sincronización en una sola plataforma y siempre trabajan lo más estrechamente posible con los desarrolladores.
Recursos
Este artículo que te dará respuestas rápidas en donde divergen diseño para dos aplicaciones, pero también necesitarás algunas herramientas y plantillas para ejecutar correctamente su diseño. Hay un montón de recursos comúnmente disponibles que puede utilizar como punto de partida, estas son algunas de las mejores:
Directrices
Si quieres saber más, mucha de la información que he proporcionado se puede encontrar en las directrices de la plataforma. Es bastante extensos, así que apenas he sacado de las partes que son importantes para comparar. Pero si usted tiene preguntas más específicas este es el mejor lugar para empezar:
UI Kits
Estos Kits de interfaz de usuario le ahorrará recreando básicos controles nativos y coincidencia de tamaños. Usted puede arrancar las piezas que necesites y luego alternar entre ellos para la salida de Android y el iPhone de sus diseños.
Iconos
Incluso si usted está haciendo su propio, o puesta en servicio los iconos, son útiles como marcadores de posición mientras trabajas. Diseño de icono puede ser un trabajo en sí mismo, y no desea que los iconos para retrasar mientras que usted consigue una sensación general de su aplicación. Recientemente encontré los siguientes enlaces icons8 look bastante bueno, o flaticon.com es ideal para los iconos más general.
- Iconos de línea que son grandes para el diseño de iOS
- Iconos planos que funcionan bien con el diseño de materiales
Maquetas
Siempre es útil tener prototipos de dispositivo para la presentación de su aplicación. Estas vienen en muchas categorías. Puede una maqueta del dispositivo básico para el contexto, un dispositivo plano simplificado para dejar brillar su aplicación, o una maqueta de estilo de vida para presentar un caso de uso. Aquí hay algunos recursos que he encontrado útil, hay muchos mas por ahi. Cuando se trata de dispositivos Android, tenga cuidado que usted elija. Me se inclino hacia la gama Nexus, como son los teléfonos de Google y no insinúan una preferencia hacia otros fabricantes.
