Guía para principiantes para el desarrollo de iOS La interfaz - Parte I

Apple ha sido una industria líder en el mundo móvil durante años con su serie de iPhone y iPad. A pesar de la exageración que puede crear con todos los lanzamientos oficiales, también tiene una gran parte de las cuotas de mercado en la plataforma móvil, y esta es probablemente la razón por la que la mayoría de los clientes querrán que su aplicación exista en la tienda de aplicaciones de Apple; convirtiéndose así en la razón para que los desarrolladores aprendan y construyan la aplicación para iPhone.

La buena noticia es que el desarrollo de aplicaciones para iPhone no es tan difícil como podría pensar, y esta publicación existe como una guía completa para guiarlo a través del proceso completo de creación de una aplicación para iPhone..

Discutiremos las razones, las fases y las herramientas para desarrollar la aplicación y, en última instancia, seguiremos un sencillo tutorial para diseñar la aplicación básica de iPhone con Xcode..

Entonces, ya sea que estés aprendiendo para negocios o simplemente tengas una increíble idea de aplicación que pueda convertirte en un millonario, empecemos a construir tu primera aplicación para iPhone.!

Nota: Necesitará una computadora con sistema operativo Macintosh (Mac OS) para la instalación de Xcode, el desarrollo de aplicaciones y el envío de aplicaciones, no hay forma de hacerlo legalmente en Windows.

Por qué desarrollar para Apple?

Veo esta pregunta con frecuencia, así que quiero explicar por qué debería interesarle el desarrollo de iPhone. Al igual que he indicado en la introducción, iPhone actualmente posee una gran parte de las cuotas de mercado en la plataforma móvil.

Creo que esta razón debería ser suficiente para que aprendas a desarrollar la aplicación de iPhone, ya sea que estés desarrollando para ti o para tus clientes, la mayoría de la gente probablemente espera que muchas personas en el mundo puedan acceder a su aplicación..

Desde el punto de vista del desarrollo., A Apple le gustan las cosas simples., Y esto se aplica a sus productos y marcos.. iOS es el sistema operativo que alimenta todos los dispositivos móviles de Apple.. Estos incluyen iPod Touch, iPhone y iPad. Así que ten en cuenta que cuando estés desarrollando aplicaciones para iPhone, podrías estar Desarrollando para todos los demás dispositivos con el iOS!

Además, lo que hace que la característica anterior sea aún mayor es la cantidad de trabajo de codificación que se puede guardar. Cuando escribes código para la aplicación de iPhone estás Utilizando el mismo lenguaje de programación para todos los dispositivos informáticos de Apple.. Eso significa que cuando esté desarrollando la aplicación para iPhone, la aplicación puede integrarse posteriormente en iPad e incluso en Mac.

C objetivo es el lenguaje de programación central que impulsa todos sus marcos. Junto con Objective-C, también desarrollará una aplicación para iPhone con el Toque de cacao, El marco de programación que impulsa la interacción del usuario en iOS.

Todo esto es solo un poco de información para que pueda comenzar con el desarrollo de aplicaciones para iPhone. El desarrollo es un proceso bastante complicado, pero relájate, tómalo lentamente. Así que las razones están aquí, y la decisión es tuya. Ya sea que la respuesta sea sí o no, siempre puedes saltar directamente al siguiente tema: diseñando apps para iPhone.

Planificación de la estructura de su aplicación de iPhone

En la ideología estándar de crear una aplicación para iPhone querrás pasar por algunas fases. La primera fase incluye planeando y dibujando.

Primero que todo necesitas tener una idea para lo que tu aplicación va a hacer. ¿Por qué la gente querría descargarlo?? Y ¿Qué características quieres incluir?? Esta es la fase más importante, ya que si lo haces bien, podrás Ahorra mucha confusión y problemas en la fase de codificación.

Lo peor, te lleva de vuelta al tablero de dibujo..

Recomiendo a Haga un bosquejo de algunas ideas aproximadas para unas pocas páginas (o vistas) de su aplicación. Simplemente dibuje una forma de rectángulo, tal vez 5 o 6 formas en una hoja de papel, luego dibuje las características que desea en cada vista de su aplicación.

Puedes pensar en las vistas como páginas diferentes en un sitio web. Cada vista ofrecerá una funcionalidad diferente, como un formulario de inicio de sesión, una lista de contactos o una tabla de datos.

A continuación, he construido una breve colección de los diferentes elementos de la barra de UI:

Barra de estado - Muestra el nivel actual de la batería del dispositivo, la conexión 3G, las barras de recepción, el operador de telefonía y mucho más. Se recomienda que siempre incluyas estos elementos..
Barra de navegación - Ofrece a sus usuarios la opción de navegar entre las jerarquías de páginas. Esto a menudo incluye un botón en el lado izquierdo de la barra para permitir al usuario volver a la vista de la aplicación anterior.
Barra de herramientas - Aparece en la parte inferior de la aplicación para iPhone. Esto mantendrá algunos iconos vinculados a algunas funciones como Compartir, Descargar, Borrar, etc.
Barra de pestañas - Muy similar a la barra de herramientas, excepto que ahora estás trabajando con pestañas. Cuando un usuario hace clic en el icono de una pestaña, se resaltará automáticamente y mostrará un estado de desplazamiento brillante. Esta barra se usa para cambiar entre vistas en lugar de ofrecer funcionalidad directa.

Esta lista solo contiene las barras de herramientas que puedes encontrar en la mayoría de las aplicaciones. Hay otras vistas y estilos a considerar, que puede encontrar en las Pautas de uso de elementos de la interfaz de usuario de iOS de Apple. Recomiendo consultar esta documentación cuando tenga dudas sobre los elementos de la interfaz de usuario del iPhone..

En aras del tiempo, no describiré cada elemento de la interfaz de usuario. Hay demasiados elementos a considerar, y no terminará usándolos todos en su aplicación única. Pero al dibujar sus puntos de vista, puede inspirarse en las pautas sugeridas anteriormente y en otras aplicaciones para iPhone has disfrutado usándolos.

Diseñar maquetas de Photoshop

Supongo que la mayoría de ustedes está bastante cómodo trabajando con Adobe Photoshop. Es el software principal para crear gráficos para sitios web, banners, logotipos y maquetas móviles. Diseñar gráficos para la web es un proceso bastante sencillo, pero es un poco más complicado cuando se trata del diseño de aplicaciones para iPhone..

Si estás buscando construir una aplicación realmente deberías Crea diseños de píxeles perfectos desde el principio..

Para empezar, deberíamos discutir la configuración de Photoshop. Ya que estamos diseñando para iPhone, debemos considerar 2 estilos de diseño diferentes. los La pantalla normal del iPhone es de 320 x 480 píxeles.. Sin embargo, el iPhone 4 incluye un pantalla retina que duplica la cantidad de píxeles dentro del mismo tamaño de pantalla. Así que deberías Doble la resolución a 640 x 960 píxeles. y diseña tus diseños a este estándar.

Esto significa que también necesitará crear 2 conjuntos de iconos para sus maquetas Originalmente los iconos serían establecer en 163ppi pero necesitarás Incluye iconos con 326ppi para iPhone 4. Los iconos están marcados tradicionalmente con @ 2x al final del nombre de su archivo, como “[email protected]“.

Ahora vamos a optimizar nuestra nueva configuración de documentos. Primero tendremos que editar algunas preferencias, así que acceda a Photoshop> Editar> Preferencias> Guías, Grid y Slices. Bien ser configurando nuestro Gridline cada 20px con subdivisiones en 2. Al diseñar para retina display. La línea 2px mostrará 1 punto en la pantalla. Esta es una regla importante que debe tener en cuenta para reducir su aplicación..

Tiendo a encontrar más fácil construir mis diseños con una resolución más alta y luego reducirlos, pero puedes Prueba ambos métodos y ve qué te queda mejor.. Estamos utilizando 640 x 960 píxeles a 326ppi; guárdelo como un ajuste preestablecido personalizado si cree que lo usará con frecuencia.

Construyendo con elementos de plantilla

Ahora puedes usar Photoshop para crear un diseño de píxeles perfecto por ti mismo, pero esto demuestra ser un trabajo muy agotador y tedioso..

Este es un archivo enorme con demasiados elementos. Para facilitar las cosas puede pulsar v activar la Herramienta de movimiento y haga clic en el “Selección automática” en su barra de opciones, a continuación, seleccione la “Capa” más bien que “Grupo”. Con la configuración, puede hacer clic en cualquier elemento y Photoshop lo llevará a su capa correspondiente!

Siéntete libre de jugar con la maqueta., o incluso puedes crear el prototipo de tu aplicación desde la maqueta. Dependiendo de su aplicación, podría incluir una gran cantidad de funciones dentro del área central, muchas de las cuales podría encontrar en este archivo PSD. También es posible ir a las capas de estos elementos y editar las fuentes, los colores degradados y otros estilos de diseño. Sólo Asegúrate de no cambiar el tamaño de nada ya que todas las barras y elementos de la interfaz de usuario están configurados en tamaños estándar predeterminados.

Desarrollando aplicaciones en Xcode

La herramienta de desarrollo para la programación de iOS y Mac OS X se denomina Xcode. Si está ejecutando OS X Lion, puede encontrar Xcode y todos los paquetes aplicables de forma gratuita en el Mac App Store.

Una vez completada la instalación, inicie Xcode y aparecerá la pantalla de bienvenida. Desde aquí puede cargar un proyecto anterior o elegir hacer uno nuevo. Por ahora necesitas hacer clic “Crear un nuevo proyecto Xcode“, entonces la ventana de la plantilla presentará algunas opciones. En iOS> Aplicación, haga clic en “Solicitud de vista única” y golpear “Siguiente”. Usted puede dale un nombre a la nueva aplicación, como Prueba (preferiblemente sin espacios), luego en la Identificación de compañía, escriba cualquier palabra como mi empresa, y finalmente escoger un directorio y golpear “Salvar”.

Xcode construirá el directorio de archivos y lo enviará a una nueva ventana para trabajar. Debería ver una gran cantidad de opciones de archivos en la lista, pero carpeta que lleva el nombre de su aplicación es el enfoque principal.

Con Xcode tienes dos opciones para diseñar elementos frontales. El clásico xib / plumilla El formato es estándar para las aplicaciones Mac OS X e iOS, lo que requiere que diseñe una vista de página nueva cada vez. Sin embargo, a medida que va creando más vistas en una sola aplicación, la cantidad de archivos de plumillas puede ser demasiado abrumadora, por lo que una nueva guión gráfico el archivo contiene todas las vistas de su plumilla en un único panel de edición. Desde aquí puede eliminar y agregar elementos y funciones de la interfaz de usuario con facilidad..

Además te encontrarás con .h y .metro archivos en el mismo grupo de carpetas. Estos son nombres de archivo cortos para encabezamiento y implementación código. Estos archivos son donde se escriben todas las funciones y variables de Objective-C necesarias para que su aplicación se ejecute. Puede ser una buena idea explicar cómo funciona Xcode MVC (Modelo, Vista, Controlador), ¿Cuál es la razón por la que necesitamos 2 archivos para cada controlador?.

Jerarquía de programación MVC

Para comprender cómo funciona la aplicación, deberá comprender su arquitectura de programación. Con Modelo, Vista, Controlador (MVC) como base, Xcode puede separar todas sus pantallas y el código de interfaz de su lógica y funciones de procesamiento, y realmente no hay otra opción para elegir. MVC puede parecer confuso al principio, pero si intentaste entenderlo y comenzar a crear algunas aplicaciones básicas, te encantará la estructura..

Para que sea más fácil de entender, he presentado cada objeto en la siguiente lista:

Modelo - Mantiene toda su lógica y datos básicos. Esto incluye variables, conexiones a fuentes RSS o imágenes externas, funciones detalladas y procesamiento de números. Esta capa está completamente separada de sus vistas para que pueda cambiar fácilmente las vistas y seguir teniendo los mismos datos funcionando..
Ver - Una pantalla o estilo de visualización en su aplicación. Una lista de tablas, una página de perfil, una página de resumen del artículo, un reproductor de audio, un reproductor de video, todos estos son ejemplos de vistas. Puede cambiar sus estilos y eliminar elementos, pero seguirá trabajando con los mismos datos en su Modelo..
Controlador - Actúa como intermediario entre los otros dos. Conecta los objetos en su vista a un ViewController que pasa la información hacia y desde su modelo. De esta manera, es posible hacer que un usuario toque un botón y lo registre en su modelo. Luego ejecute una función de cierre de sesión y, a través del mismo controlador, pase un mensaje. “desconectado con éxito!”.

Así que básicamente tu El modelo guarda toda la información y funciones. que deberás mostrar en algún lugar en la pantalla. Pero Los modelos no pueden interactuar con la pantalla, solo las vistas pueden. Las vistas son en su mayoría visuales, y solo pueden extraer datos a través de un ViewController. los El controlador es en realidad una forma mucho más refinada de ocultar sus datos de back-end del diseño de front-end. De esta manera puede renovar el diseño varias veces sin perder ninguna funcionalidad..

Con este conocimiento, no debería ser difícil comenzar a crear sus primeras aplicaciones. Como se mencionó anteriormente, C objetivo es el lenguaje de programación central que usarás para desarrollar la aplicación. Está construido en el lenguaje C con sintaxis actualizada y algunos paradigmas adicionales. Necesitará mucho tiempo para familiarizarse con el idioma, pero para la lección para principiantes recomiendo la serie de tutoriales de Mobiletuts+.

Vista de diseño con guiones gráficos

Ahora que hemos examinado los aspectos técnicos de una aplicación, deberíamos dedicar un poco de tiempo a diseñar la interfaz. Supongo que has guardado el “Guión gráfico” opción Se comprueba al crear el proyecto, lo que significa que puede encontrar un solo MainStoryboard_iPhone.storyboard archivo en algún lugar del grupo de carpetas ubicado en el lado izquierdo de la ventana. Haga clic en el archivo para seleccionarlo y abrir la vista..

Una nueva barra lateral debería aparecer directamente a la derecha del grupo de carpetas. Esto se llama Esquema del documento y es una especie de método de vista previa rápida para verificar todas las vistas disponibles en este guión gráfico.

Queremos comenzar agregando solo unos pocos elementos de página en nuestro controlador de vista. Necesitamos dos elementos diferentes: un Barra de navegación y un Barra de pestañas. Antes de agarrarlos, acceder a la Inspector de atributos (Ver> Utilidades> Mostrar inspector de atributos) en el lado derecho de la ventana, luego busque Barra de estado etiqueta. Por defecto está configurado en Inferido que utiliza el color de estado estándar de iPhone, pero también puede elegir Negro o Negro translucido Si el diseño de tu aplicación se ajusta mejor al color..

La biblioteca de objetos

Si el Utilidades El panel en el lado derecho de la ventana no está visible, puede habilitarlo accediendo a Ver> Utilidades> Mostrar utilidades. En el panel Utilidades, busque en la parte inferior un panel llamado Biblioteca de objetos. Obtuvo un menú desplegable con la “Objetos” como el primer elemento de la lista. Si no puede encontrarlo, puede seleccionar Ver> Utilidades> Mostrar biblioteca de objetos.

En el menú desplegable de la Biblioteca de objetos, busque y seleccione Ventanas y bares. Ahora haga clic en el Barra de navegación, arrástrelo a la ventana de visualización y colóquelo directamente debajo del negro Barra de estado (con un icono de batería). Podemos personalizar la descripción del título de la barra ahora. Haga doble clic en el texto que se lee actualmente. “Título“, y verás una etiqueta llamada “Título” en el panel Utilidades, en el que puede cambiar la descripción del título “Prueba” desde allí. Golpear “Entrar” para presenciar el cambio.

Nuevamente en el panel Ventanas y barras, desplácese hacia abajo para encontrar la Barra de pestañas, luego arrástrelo a la ventana de visualización y colóquelo en la parte inferior de su aplicación. Por defecto estos 2 elementos se ven fantásticos..

Ahora tal vez desee que el gradiente de la barra de navegación coincida con la barra de pestañas en la parte inferior, y para hacer esto, puede hacer clic en la barra de navegación y mirar a la derecha en Atributos panel en el panel Utilidades. La primera opción se llama Estilo, que se establece en Predeterminado. Cambiar el estilo de predeterminado a Negro opaco y tendremos un conjunto de colores a juego!

También agreguemos otro botón de pestaña en la barra inferior de la aplicación. Mueva el cursor del mouse al panel de Windows & Bars nuevamente y desplácese hacia abajo para Elemento de la barra de pestañas, directamente debajo de la barra de pestañas. Arrástrelo a la ventana de su aplicación y colóquelo en el centro de los 2 botones existentes de la barra de pestañas. Si hace doble clic en este nuevo botón, podrá ver algunas opciones adicionales en el panel Utilidades, cambiará el elemento. imagen y título desde allí. Por ejemplo, he cambiado el título a “Marcador” para el nuevo elemento de la barra de pestañas.

Este es un breve tutorial sobre el diseño de vistas dentro de Xcode. No es un proceso terriblemente difícil, pero requerirá un poco más de tiempo para acostumbrarse a la interfaz. Juegue con algunos elementos más si se siente cómodo, también puede dirigirse a los Recursos de desarrollo de iOS de Apple para obtener más recursos de aprendizaje, nunca es malo descubrir más!

Estén atentos para la Parte II

Esto concluye nuestra primera parte de la guía para el diseño y desarrollo de aplicaciones para iPhone. En la siguiente parte profundizaremos un poco más en Objective-C y Cocoa Touch, y finalmente aprenderá a construir una aplicación de iPhone que funcione, permanezca atento.!

Galería de diseño de iOS

Para los diseñadores, también espero poder inspirarte, así que a continuación te incluyo una lista de impresionantes vistas de aplicaciones para iPhone. La lista presenta una gran variedad de elementos inspiradores de aplicaciones que probablemente nunca antes hayas notado. Siéntase libre de compartir sus ideas, vistas de aplicaciones o preguntas en la sección de comentarios a continuación, gracias!

Divisor de carrera

Control remoto de satisfacción

Tweetbot para iPhone

Reeder

Firme

MailChimp

Instagram

Joystiq

Piictu

Oscuridad