Share
Este diseño se utilizó junto con nuestro sitio asociado Mobiletuts +. Bart Jacobs, desarrollador muy capacitado, ha tomado esta interfaz de usuario y ha creado una aplicación funcional y, lo mejor de todo, ¡puedes seguir y aprender a crear la tuya! Puedes encontrar su serie aquí: Parte 1, Parte 2, Parte 3.
En este tutorial me gustaría mostrarle cómo crear una interfaz de usuario lista para retina para una aplicación meteorológica. Usaremos múltiples tableros de arte y tipografía para crear una interfaz mínima..
Descargue los recursos de fuentes aquí:
Cuando utilice fuentes para aplicaciones o por cualquier motivo, asegúrese de consultar el Acuerdo de licencia. Debido a que este es solo un tutorial y la aplicación en sí no estará disponible para la venta, estamos de acuerdo con el uso de las fuentes mencionadas anteriormente. Sin embargo, si planea crear el suyo propio y desea obtener una licencia comercial, siga las instrucciones de los diseñadores de tipos sobre cómo hacerlo..
Usaremos el tablero de arte múltiple para las diferentes vistas que tiene la aplicación, así que una vez que hayamos decidido esto con la ayuda de nuestro desarrollador, podemos seguir adelante y crear nuestro documento..
Para empezar, necesitamos crear un documento del tamaño de nuestro dispositivo móvil. Ya que estamos trabajando en la plataforma iOS, estaremos diseñando para el iPhone 5, que tiene un tamaño de pantalla más alto que las encarnaciones anteriores del iPhone. Me parece que trabajar en el tamaño más grande es fácil de reducir más adelante para otros dispositivos. Dado que el diseño general es tan mínimo, será más fácil eliminar el espacio más tarde que intentar escalarlo. Para ello nuestro documento será 640 x 1136 pts (no píxeles).
Durante una lluvia de ideas con el desarrollador, se decidió que habrá una pantalla principal que se deslizará hacia la izquierda o la derecha para revelar más información. Con esto en mente, también crearemos varias tablas de arte en este momento. Una para cada ventana que aparecerá. Asegúrese de mirar detenidamente la captura de pantalla para los detalles.
Una vez creado el documento, deberemos ajustar el perfil de color. Así que ve a Editar> Asignar perfil y asegúrese de desactivar todos los perfiles de color. Cuando XCode prepara sus activos para ser empaquetados con la aplicación, elimina completamente los perfiles de color asociados con los activos. Debido a esto, lo mejor es simplemente eliminar cualquier perfil de color de su documento y probar regularmente su diseño en una pantalla móvil para garantizar la salida de color correcta.
Nuestro fondo es bastante simple. Debido a que estamos trabajando con un diseño más o menos "plano", trabajaremos con colores sólidos y combinaciones para lograr nuestros efectos..
Usaremos el tablero de arte intermedio para representar nuestra página principal de la aplicación. El que está a la izquierda será lo que sucederá cuando seleccione la ubicación. Y la que está a la derecha aparecerá cuando seleccione la fecha. Comience dibujando un rectángulo de la misma altura y anchura del tablero artístico en el medio y rellénelo con nuestro color base
A continuación, crea un círculo que es exactamente 30 x 30pt y rellénalo con el color descrito abajo.
Copia este círculo recién creado y pégalo detrás del otro. Ahora ajusta el tamaño a 2300 x 2300pt y soltar el Opacidad Abajo a 0%.
Ahora ve a Objeto> Mezcla> Opciones de mezcla ... y seleccione Pasos específicos luego configurarlo para 30. Entonces hazObjeto> Mezcla> Hacer) la mezcla.
Con la mezcla aún seleccionada, céntrela en el centro horizontalmente en el tablero artístico y luego centre el círculo en la parte superior del tablero artístico como se ve a continuación.
Duplique el rectángulo de fondo plano y péguelo sobre la mezcla que acabamos de crear. Ahora seleccione el rectángulo y la combinación de la paleta de capas y seleccione Objeto> Máscara de recorte> Hacer. De esta manera no tenemos que preocuparnos por nuestra mezcla bastante grande que se desborda en nuestros otros tableros de arte.
Una característica interesante que pensamos que agregaría algo de estilo a la aplicación sería que el fondo cambiara de color dependiendo de la temperatura. Entonces, si bien el fondo que creamos ahora es para cuando está "caliente", ahora duplicaremos estos elementos y ajustaremos el color y la posición para representar una sensación más "fría".
Debido a que nuestro efecto de círculo combinado tiene tantos pasos, es posible que note cierta demora mientras continúa creando el diseño de su aplicación. Dado que esto es solo por motivos estéticos, podemos continuar y deshabilitar las capas de mezcla y dejar el color de fondo plano por ahora. Asegúrese de volver a habilitar la capa de mezcla cuando realice pruebas en su dispositivo móvil para que pueda ver cómo funciona el texto con su fondo.
Vamos a confiar mucho en el tipo para obtener la información del clima a través. Por este motivo, he elegido algunas fuentes agradables, limpias y fáciles de leer que realmente le dan cierta personalidad a la aplicación. Me quedo con dos familias de fuentes y uso de anchos variables para crear los elementos vistos.
Para empezar, tendremos que mostrar una fecha de algún tipo. Selecciona el Tipo de herramienta (T) y entra un día de la semana. Usaré "Tuesday" y nuestra fuente "Mission Gothic" con el peso establecido en "Thin". El texto en sí será blanco y agregaremos un Sombra paralela Para ayudarlo a sobresalir del fondo. Luego lo posicionaremos de modo que esté centrado en el tablero de arte y 20px desde la parte superior. Para hacer esto, simplemente alinéelo con la parte superior donde el cuadro delimitador toca el borde de la placa artística y luego sostenga Cambio y presione el Abajo flecha en el teclado dos veces.
Selecciona el Tipo de herramienta (T) de nuevo y vamos a crear nuestro medidor de temperatura. Me gusta la idea de que los números estén centrados mientras que el símbolo de "grado" está a la derecha. Así, en lugar de centrar el tipo en el Párrafo panel Lo he mantenido alineado a la izquierda y solo he escrito el número que usaremos para el marcador de posición. Usaré "86" y la fuente "Maven Pro" con la siguiente información que se muestra en la siguiente captura de pantalla.
Una vez creado, alinéelo con el centro del tablero de arte y luego la parte superior. Una vez alineado con la parte superior, botón derecho del ratón el texto y Transformar> Mover ... abajo 210 pts. Ahora selecciona el tipo y agrega el símbolo de grado.
Ahora que tenemos la temperatura, agreguemos una ubicación. Escribe tu ubicación, para mí es "Nassau, BAH", siéntete libre de usar la tuya. Para darle un poco de contraste a la ciudad y al país, usaremos dos pesos diferentes. La ciudad será "Mission Gothic" establecida en "Regular", y el país será "Mission Gothic" establecida en "Thin".
En cuanto a la ubicación, dije anteriormente que me gusta la idea de que la figura de la temperatura esté centrada, pero para todos los demás textos quiero que se alinee a la izquierda en función del ancho de la figura de la temperatura. Así que por ahora alinearé manualmente esta dirección a la izquierda de la temperatura y la colocaré aproximadamente 20 puntos desde el fondo. Siéntase libre de ajustar esta distancia como mejor le parezca. Asegúrate de revisar siempre los elementos en tu dispositivo móvil.
Podemos detenernos aquí si queremos, pero al desarrollador le gustaría incluir información adicional. Así que vamos a crear tres líneas separadas de texto. Uno para la hora actual, uno para la velocidad del viento y otro para la humedad. Asegúrate de crearlos por separado ya que usaremos diferentes tamaños de fuente y pesos, y esto puede eliminar la altura de la línea para estos elementos.
Me gustan las formas numéricas de nuestra fuente "Maven Pro", así que continuaré usando esta fuente para los números en estos elementos, solo usaremos el peso "Medio" y los contrastaremos con la fuente "Mission Gothic" configurada en " Thin "y para esta fuente más delgada también la estableceremos en" Small Caps ". Puede establecer mayúsculas resaltando la fuente adecuada y haciendo clic en el icono del menú en la parte superior derecha de Personaje panel luego elegir Letras minúsculas.
Nuestra tipografía hace llegar nuestro mensaje bastante bien, pero aún necesitamos crear íconos para representar cuáles son las diferentes figuras y especificar los menús en la aplicación. Me enamoré de la forma del símbolo de grados de nuestra fuente "Maven Pro", así que pensé en unir los elementos de los íconos junto con el tipo reutilizando esta forma para crear los íconos..
Con el Tipo de herramienta (T) habilitado escriba el símbolo de grado. El tamaño exacto no importa en este momento, ya que lo ajustaremos para adaptarlo a los tamaños de nuestros iconos. Luego haz click derecho y elige "Crear contornos"para convertir el tipo a una forma editable. Ahora active el Herramienta de selección directa (A) y seleccione el camino interno más pequeño y elimínelo. Usaremos un trazo más adelante para obtener el widget adecuado para nuestros iconos. Una vez que tenga su forma cuadrada curva asegúrese de ajustar la anchura altura para que sean exactamente iguales. Estarán ligeramente apagados y debemos asegurarnos de que sean precisos al agregar elementos más adelante.
Usaremos y reutilizaremos esta forma varias veces, así que asegúrese de tener una copia en caso de que pierda el original mientras trabaja. Por ahora crearemos un ícono para representar el menú de ubicación..
Con nuestra forma cuadrada redondeada copiada, vamos a reducirla a 32 x 32pt, y añadir un interior Carrera de 3px
Habilitar el Herramienta de rectángulo redondeado y crea un rectángulo que es 3 x 12 puntos e incrementa las esquinas redondeadas para que los extremos sean completamente redondos. Ahora duplique esta forma tres veces más y gírela para que forme una especie de forma de cruz y luego agrupe todos los objetos. Finalmente con el grupo seleccionado, agregue un Sombra paralela y colocarlo 30 puntos Tanto en la parte superior como en la izquierda del tablero de arte. Asegúrese de verificar el espacio en su dispositivo móvil y ajuste según corresponda.
Copiemos nuestra forma cuadrada redondeada de nuestro ícono Ubicación ya que los otros íconos se basarán en esta misma forma y tamaño. Ajuste la ubicación del rectángulo redondeado al lado de nuestro elemento Tiempo. Al igual que el símbolo de grado real del elemento de temperatura, quiero que los iconos para estos detalles adicionales también se encuentren fuera de la temperatura, solo que esta vez, obviamente, estará a la izquierda de los elementos.
Como puede imaginar, para el elemento Tiempo se creará un icono de Reloj. Nuestra forma cuadrada redondeada será la cara del reloj y ahora necesitamos hacer las manecillas del reloj. Selecciona el Herramienta de rectángulo redondeado y crea un rectángulo que es 10 x 4 puntos y alinéelo con el centro de la esfera del reloj. Duplica este proceso solo esta vez hazlo 4 x 12 pt. Una vez que tenga las manecillas del reloj en un lugar cómodo, agrupe los elementos y añada un Sombra paralela.
Duplica el cuadrado redondeado una vez más desde nuestro ícono anterior y alinéalo junto a nuestro elemento Viento. Para este ícono, intentaremos lograr un buen efecto en el que el ícono en sí ayude a mejorar la información del viento al proporcionar una flecha que indica la dirección directa en la que está soplando el viento. en el centro de este icono particular. Comience creando un Rectángulo redondeado es decir 4 x 9pt Y centrándolo en la plaza redondeada. A continuación, crea un cuadrado perfecto con el Herramienta de rectángulo redondeado es decir 12 x 12 puntos y quitar una de las esquinas. Ahora cierre el camino abierto y gírelo para que cree el punto hacia arriba a nuestra flecha, luego céntrelo sobre la parte del vástago de la flecha, asegurándose de ocultar las esquinas redondeadas por completo.
Una vez que haya completado nuestra flecha, agrupe el vástago y el punto juntos, luego cree siete copias más. Gire cada una de estas copias en incrementos de un cuarto para que tenga una apuntando hacia arriba, una apuntando hacia la parte superior derecha, otra hacia la derecha, y así sucesivamente. Debido a que nuestra forma principal no es un círculo completo, simplemente girando la forma con la flecha no funcionará, por lo que necesitamos un ícono de flecha para cada dirección en la que el viento pueda estar soplando. Una vez que se crean, puede ocultar las flechas innecesarias y luego agrupar las flechas y el cuadrado redondeado y aplicar una Sombra paralela.
Pegue una copia de nuestra forma cuadrada redondeada una última vez y alinéela con nuestro elemento Humedad. Ahora crea un círculo que sea 8 x 8 puntos y alinee el centro en la forma principal y póngalo más abajo. Habilitar el Herramienta de selección directa (A) y seleccione el punto de anclaje más alto del círculo y arrástrelo hacia arriba para crear una forma similar a una gota, también introduzca un poco los tiradores para hacer un punto más fino a la gota. Duplique esta forma de gota dos veces más, reduzca el tamaño y colóquelos cerca de la parte superior y a cada lado de la gota más grande. Finalmente Grupo (Control + G) los elementos juntos y añadir una Sombra paralela.
Para el último icono de esta sección principal, necesitaremos algo que represente la fecha. Se nos ocurrió un icono de calendario que también mostrará la fecha del mes..
Para comenzar a crear un Rectángulo redondeado es decir 40 x 36pt y darle un golpe interior de 3 puntos. Ahora ve a Objeto> Expandir Apariencia para convertir el trazo a una forma real. Con el Herramienta de selección directa (A) habilitado, seleccione los puntos de anclaje internos superiores y empújelos hacia abajo 9px usando las flechas del teclado. Con el Herramienta de rectángulo redondeado Crea dos formas redondas de pastillas que son 9pt de ancho y en cualquier altura que desee, luego colóquelos sobre el cuadrado redondeado más grande para que la parte inferior se encuentre a medio camino entre el área blanca grande. A continuación, menos estas nuevas formas de la forma cuadrada utilizando el Pionero panel. Crea dos formas más de pastillas, esta vez serán 3 x 8 puntos y alinearlos dentro de las secciones recortadas. Finalmente, agregaremos una fecha de marcador de posición con la siguiente configuración, luego agruparemos estos elementos y agregaremos una Sombra paralela.
Cuando se lanzó, el desarrollador quería tener un conjunto de widgets desplazables en la parte inferior de la página principal de la aplicación que mostraba el tiempo proyectado por hora para ese día en particular. Así que para terminar nuestra página principal de la aplicación, vamos a crear esos ahora.
Habilitar el Herramienta de rectángulo redondeado y crea un rectángulo blanco que es 165 x 250pt, Centro alinéelo con el tablero de arte y colóquelo. 40px desde el fondo del tablero de arte.
Duplica este rectángulo y rellénalo con negro. Duplica una vez más y empújalo 4px entonces Frente menos en el Pionero panel. A continuación, puede soltar la opacidad a 15%.
Duplica nuestro rectángulo blanco nuevamente y rellena con negro que se reduce a 15% Opacidad. Dibuja otra forma de rectángulo sobre esta que es 79 puntos Alto y cualquier ancho y alinéelo con la parte superior de la forma del rectángulo subyacente. Seleccione su nuevo rectángulo y el negro más grande rellenado a continuación, luego elija Intersecarse desde el Pionero panel.
Habilitar el Tipo de herramienta (T) e introduce una temperatura de tu elección. Quería asegurarme de tener suficiente espacio para expandir, así que elegí el número "100". Para esto usaré la fuente "Missing Gothic" en el peso de "Black". El texto en sí también será un negro plano con la Opacidad tirado 15%. Luego lo alinearemos cerca de la parte superior de la sección blanca de nuestro contenedor..
Dado que se supone que esto se debe proyectar en el clima, no será tan preciso, por lo que también incluiremos los posibles "bajo" y "alto". Con el Tipo de herramienta (T) de nuevo, cree sus estimaciones y, en lugar de usar el peso "Negro", usaremos "Delgado". Alinee esto hacia la parte inferior, asegurándose de que haya suficiente espacio para respirar.
La barra superior más oscura será nuestro indicador de tiempo. Copie el ícono del reloj que creamos anteriormente en este tutorial y colóquelo centrado ya la izquierda de esta barra más oscura. También puede copiar el texto de Tiempo de antes también. Asegúrese de quitar el Sombra paralela A partir de estos elementos, ya que no es necesario..
Finalmente, agregue un Sombra paralela al rectángulo blanco principal, luego agrupa estos elementos juntos. Ahora puedes copiar este agrupamiento y colocarlos. 20px aparte a cada lado de los elementos centrados, asegúrese de ajustar el tiempo para cada nueva copia. Como bono adicional, tomé los widgets de tiempo que salen de la página y reduje su tamaño para ser 235pt alto. Si tiene la restricción bloqueada al cambiar el tamaño de la altura, el widget seguirá su ejemplo. Esto tendrá un número decimal detrás, por lo que no es exacto. Ya que estos están fuera del uso de la página o la máscara que creamos anteriormente para ocultar los elementos que salen de la pantalla.
Con eso nuestra página principal está completa. Asegúrese de activar la combinación de fondo y la prueba para ver cómo se ve en su dispositivo móvil.
Ahora vamos a empezar a trabajar en nuestros menús. Me resultó más fácil copiar la capa con todos los elementos de la página principal, luego seleccionar el tablero de arte a la izquierda de la página principal y pegar en la capa duplicada. Colóquelo de modo que solo el icono de ubicación sea visible en el lado más a la derecha de la pizarra artística. Ahora cree una máscara que tenga las mismas dimensiones de nuestro tablero artístico y oculte los elementos que están fuera de la página.
Debido a que nuestro diseño general es 'plano' en lugar de una sombra graduada para indicar que la página principal está sobre el elemento del menú, usaremos un rectángulo plano negro relleno para 10% de opacidad es decir 4 puntos De ancho y la misma altura que nuestro tablero de arte..
En este menú, necesitaremos un área para agregar una nueva ubicación, así como una lista de nuestras ubicaciones establecidas y los interruptores para habilitar / deshabilitar la detección de ubicación automática y las Unidades en las que se muestra la temperatura. Empecemos creando la nueva sección de ubicación..
Selecciona el Herramienta Rectangular (M) y crea un rectángulo que es 640 x 100pt y alinéelo con la parte superior del tablero de arte luego agregue un Sombra paralela.
Ahora habilite el Herramienta de rectángulo redondeado y crea un rectángulo que es 8 x 32pt y rellenarlo con negro. Duplique este rectángulo y gírelo para que intersecte la forma anterior y forme un símbolo "+". Seleccione ambos rectángulos y Unir ellos desde el Pionero panel. Reducir el Opacidad a 25% y centrarlo verticalmente con el elemento rectángulo que creamos con el Sombra paralela desde antes. Una vez centrado verticalmente, pásalo por encima para que esté aproximadamente a la misma distancia desde la izquierda que desde los bordes superior e inferior..
Finalmente seleccione el Tipo de herramienta (T) e ingrese la frase "Agregar nueva ubicación ..." usando la fuente "Mission Gothic" enviada a "Delgado" y suelte Opacidad a 15%.
Duplique el rectángulo anterior y alinéelo con la parte inferior del anterior, luego ajuste el Sombra paralela.
Copie sobre nuestra forma cuadrada redondeada que usamos para nuestros íconos previamente y en lugar de un trazo llénelo con negro plano y luego reduzca la Opacidad a 15%. Copie el símbolo "+" que hicimos en el paso anterior y gírelo para que forme una "X" y céntrelo dentro de nuestra forma cuadrada redondeada, luego elija la opción Frente menos opción del Pionero panel.
Ahora copie el texto del elemento Ubicación de nuestra página principal y elimine el Sombra paralela y establezca el color de fuente en negro y reduzca el Opacidad a 25%. Siéntase libre de agregar múltiples instancias solo para que podamos ver cómo se llenará la lista a medida que se agreguen nuevos elementos..
Vamos a trabajar en el elemento de interruptores para este menú. Este elemento se pegará en la parte inferior de este menú, sin importar cuánto tiempo obtenga la lista de ubicaciones. Comienza por crear un rectángulo que es 640 x 200pt y agrega un Sombra paralela.
Con el Tipo de herramienta (T), escriba las etiquetas de los interruptores que estamos a punto de hacer. Uno será para la detección automática de la ubicación y el otro establecerá si la temperatura se muestra en grados Fahrenheit o Celsius. Dado que el elemento principal de estos interruptores se encuentra en es 200pt alto espacio.
Vamos a añadir un separador entre estas dos etiquetas. Con el Herramienta de segmento de línea (\), crear una linea que sea 476pt de ancho y dale un golpe de 2 puntos. Este trazo será negro con el Opacidad reducido a 10 puntos.
Para crear los interruptores, volveremos a utilizar la forma cuadrada redondeada de antes. Copia esta forma y redimensionala a 50 puntos y llenarlo de negro. Botón derecho del ratón esta forma y elige Transformar> Mover ... luego muévalo horizontalmente 80 puntos y haga clic en "Copiar", no en "Aceptar". Ahora deberías tener dos cuadrados redondeados uno al lado del otro.
Selecciona el Herramienta Rectangular (M) y dibuja un rectángulo que tenga la misma altura que nuestros cuadrados redondeados y que se junte directamente en el centro. Seleccione los tres de estos elementos y Unir ellos en el Pionero panel. Reducir el Opacidad de esta forma a 15% y alinearlo correctamente al lado de nuestra etiqueta.
Pega una vez más en nuestro cuadrado redondeado, rellénalo con blanco y ajusta el tamaño para que sea 40 x 40pt. Alinéelo al lado izquierdo o derecho para que haya una distancia alrededor de las piezas del borde. Ahora puede duplicar estas formas y voltearlas horizontalmente para indicar el estado del interruptor opuesto. Luego agregue en su texto para representar el estado del interruptor. Haga esto tanto por dentro como por fuera.
Finalmente, también puede duplicar este elemento para el selector de unidades. Y con eso nuestro menú de ubicación está completo. Vamos a pasar a nuestro menú Fecha.
Este menú de fecha mostrará el clima para los próximos días. Repetamos los primeros pasos del menú Ubicación y copiemos toda la capa de la página principal, luego ocultamos los elementos que salen de la página y agregamos un rectángulo para representar la sombra del menú.
Ahora crea un rectángulo que es 640 x 160pt y alinéelo con la parte superior de esa placa artística y luego dele una Sombra paralela.
Necesitaremos algo para representar el día y la fecha, así como antes creamos un icono de calendario. Crea un rectángulo redondeado que sea 120 x 120pt y añadir un trazo interior que es 8px. Ahora ve a Objeto> Expandir Apariencia para convertir el trazo a una forma real. Con el Herramienta de selección directa (A) habilitado, seleccione los puntos de anclaje internos superiores y empújelos hacia abajo 30px usando las flechas del teclado. Luego reduce el Opacidad a 15%.
Ahora agregue su texto al icono. Queremos que la acción principal sea el día de la semana. Este será el texto en blanco. La fecha en sí será negra con el Opacidad tirado 15%. Ambos usando "Maven Pro" en el peso "Medio".
Finalmente agregar la temperatura esperada. La fuente será "Mission Gothic" para los números y "Maven Pro" para el símbolo de grado. También agregaremos una selección "alta / baja" en la parte inferior derecha del elemento.
Si lo desea, puede duplicar este elemento y ajustar el día / la fecha para el resto de la semana..
Asegúrese de tomar nota del espacio entre los elementos y de las cifras de ubicación exactas que pueda pensar para facilitar el trabajo de los desarrolladores. Cuanta más información proporcione, más fácil será para el desarrollador codificar el producto para que coincida con el diseño. Tampoco puedo enfatizar lo importante que es probar siempre mientras diseñas para que sepas que tu diseño se traducirá a la pantalla del móvil. La mejor de las suertes con el diseño de tu aplicación.!
Accentsconagua