4.4: Planifica y diseña tu app
- Page ID
- 154340
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
\( \newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\)
( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\id}{\mathrm{id}}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\kernel}{\mathrm{null}\,}\)
\( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\)
\( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\)
\( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\AA}{\unicode[.8,0]{x212B}}\)
\( \newcommand{\vectorA}[1]{\vec{#1}} % arrow\)
\( \newcommand{\vectorAt}[1]{\vec{\text{#1}}} % arrow\)
\( \newcommand{\vectorB}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vectorC}[1]{\textbf{#1}} \)
\( \newcommand{\vectorD}[1]{\overrightarrow{#1}} \)
\( \newcommand{\vectorDt}[1]{\overrightarrow{\text{#1}}} \)
\( \newcommand{\vectE}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash{\mathbf {#1}}}} \)
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
\(\newcommand{\avec}{\mathbf a}\) \(\newcommand{\bvec}{\mathbf b}\) \(\newcommand{\cvec}{\mathbf c}\) \(\newcommand{\dvec}{\mathbf d}\) \(\newcommand{\dtil}{\widetilde{\mathbf d}}\) \(\newcommand{\evec}{\mathbf e}\) \(\newcommand{\fvec}{\mathbf f}\) \(\newcommand{\nvec}{\mathbf n}\) \(\newcommand{\pvec}{\mathbf p}\) \(\newcommand{\qvec}{\mathbf q}\) \(\newcommand{\svec}{\mathbf s}\) \(\newcommand{\tvec}{\mathbf t}\) \(\newcommand{\uvec}{\mathbf u}\) \(\newcommand{\vvec}{\mathbf v}\) \(\newcommand{\wvec}{\mathbf w}\) \(\newcommand{\xvec}{\mathbf x}\) \(\newcommand{\yvec}{\mathbf y}\) \(\newcommand{\zvec}{\mathbf z}\) \(\newcommand{\rvec}{\mathbf r}\) \(\newcommand{\mvec}{\mathbf m}\) \(\newcommand{\zerovec}{\mathbf 0}\) \(\newcommand{\onevec}{\mathbf 1}\) \(\newcommand{\real}{\mathbb R}\) \(\newcommand{\twovec}[2]{\left[\begin{array}{r}#1 \\ #2 \end{array}\right]}\) \(\newcommand{\ctwovec}[2]{\left[\begin{array}{c}#1 \\ #2 \end{array}\right]}\) \(\newcommand{\threevec}[3]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \end{array}\right]}\) \(\newcommand{\cthreevec}[3]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \end{array}\right]}\) \(\newcommand{\fourvec}[4]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}\) \(\newcommand{\cfourvec}[4]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}\) \(\newcommand{\fivevec}[5]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}\) \(\newcommand{\cfivevec}[5]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}\) \(\newcommand{\mattwo}[4]{\left[\begin{array}{rr}#1 \amp #2 \\ #3 \amp #4 \\ \end{array}\right]}\) \(\newcommand{\laspan}[1]{\text{Span}\{#1\}}\) \(\newcommand{\bcal}{\cal B}\) \(\newcommand{\ccal}{\cal C}\) \(\newcommand{\scal}{\cal S}\) \(\newcommand{\wcal}{\cal W}\) \(\newcommand{\ecal}{\cal E}\) \(\newcommand{\coords}[2]{\left\{#1\right\}_{#2}}\) \(\newcommand{\gray}[1]{\color{gray}{#1}}\) \(\newcommand{\lgray}[1]{\color{lightgray}{#1}}\) \(\newcommand{\rank}{\operatorname{rank}}\) \(\newcommand{\row}{\text{Row}}\) \(\newcommand{\col}{\text{Col}}\) \(\renewcommand{\row}{\text{Row}}\) \(\newcommand{\nul}{\text{Nul}}\) \(\newcommand{\var}{\text{Var}}\) \(\newcommand{\corr}{\text{corr}}\) \(\newcommand{\len}[1]{\left|#1\right|}\) \(\newcommand{\bbar}{\overline{\bvec}}\) \(\newcommand{\bhat}{\widehat{\bvec}}\) \(\newcommand{\bperp}{\bvec^\perp}\) \(\newcommand{\xhat}{\widehat{\xvec}}\) \(\newcommand{\vhat}{\widehat{\vvec}}\) \(\newcommand{\uhat}{\widehat{\uvec}}\) \(\newcommand{\what}{\widehat{\wvec}}\) \(\newcommand{\Sighat}{\widehat{\Sigma}}\) \(\newcommand{\lt}{<}\) \(\newcommand{\gt}{>}\) \(\newcommand{\amp}{&}\) \(\definecolor{fillinmathshade}{gray}{0.9}\)Objetivos de aprendizaje
- Lluvia de ideas sobre una aplicación que soluciona un problema de negocio
- Identificar y describir un mercado objetivo para una aplicación
- Crea flujos de proceso que te ayudarán a planificar tu app.
- Maqueta una aplicación para iPhone usando la plantilla MockApp.com
Analizar el problema
Tu app necesita resolver un problema de negocio para alguien para poder ser comercializable. Por el bien de esta lección, tus compañeros de clase componen tu mercado objetivo, gente como tú.
Se le pide que identifique un problema y luego describa cómo su aplicación resolverá el problema. Tu app debería proporcionar algunos beneficios tangibles para el mercado objetivo.
Por último, se le pide que describa una persona ficticia en el mercado objetivo. Tener una persona te ayuda a tomar decisiones en el diseño de la app.
Analizar el problema y describir la comerciabilidad de la app Hi Mom. Esta aplicación está diseñada para aliviar las preocupaciones de mamá mientras le da al estudiante más tiempo libre. Deberías hacer tu propio ejemplo original.
Definir requisitos con flujos de proceso
Después de analizar el problema del negocio, necesitas establecer requisitos para el diseño de tu app. Visualizaremos los requisitos usando diagramas de flujo de proceso.
Algunos estudiantes luchan con lo que deberían crear para las pantallas de sus aplicaciones hasta que hacen flujos de proceso. La clave es construir un carril de natación de aplicaciones en el flujo del proceso. Luego, mire el carril de natación de la aplicación del flujo del proceso To-Be para ayudar a determinar qué pantallas crear. Las pantallas deben seguir lógicamente observando la acción que está tomando la aplicación (por ejemplo, preguntar al usuario X o mostrar al usuario X). La conexión no será necesariamente una pantalla por acción. De hecho es posible que tengas múltiples pantallas para cada acción. Depende del nivel de detalle en su flujo de proceso.
Crear un diagrama de planificación casi siempre ahorra tiempo al final. Es mucho más fácil agregar, actualizar y eliminar acciones de un diagrama de proceso que agregar, actualizar y eliminar pantallas de tu app.
Los flujos de procesos también destacan la importancia de hacer la gestión de procesos de negocio y el rediseño de procesos de negocio y por qué el proceso de negocio es tan importante para los sistemas
¿Qué tan diferentes serán tus diagramas como está y por ser? Si estás migrando un proceso computarizado existente al iPhone, pueden ser bastante similares. Sin embargo, si estás comparando un proceso no computarizado con uno que usa un iPhone, entonces es probable que sean bastante diferentes.
Continuando con el análisis (As-Is) y estableciendo los requisitos (To-Be) para la app Hi Mom. Debes hacer tus propios flujos de proceso originales para que coincidan con tu aplicación.
Diseña tu app según el plan
Ahora que hemos discutido los mercados objetivo, las leyes de la marca, el diseño de iconos y los flujos de procesos, ya está listo para diseñar su aplicación para iPhone. Tu app debe tener una estrecha relación con tus flujos de proceso. En otras palabras, las acciones identificadas para la aplicación en los flujos de proceso deben ilustrarse en las maquetas.
Afortunadamente, la interfaz del iPhone está altamente estandarizada, lo que significa que tiene menos decisiones que tomar sobre la ubicación y el estilo de los elementos de la interfaz. Esto te permite enfocarte más en el contenido de tu app.
La barra de estado debe aparecer en la parte superior de la pantalla y mostrar información importante sobre el propio dispositivo. La barra de estado muestra información como la hora actual, el nivel de batería, el proveedor de red y la intensidad de la red.
La barra de navegación aparece en la parte superior de la pantalla directamente debajo de la barra de estado y muestra el título de la página que se está viendo actualmente.
La barra de pestañas siempre aparece en la parte inferior de la pantalla y debería aparecer en todas las pantallas de tu app. La barra de pestañas permite al usuario cambiar de modo o vistas muy fácilmente.
Múltiples capturas de pantalla de la aplicación Hi Mom. Debes hacer tus propias capturas de pantalla originales usando la plantilla y la biblioteca de MockApp.
La plantilla y biblioteca de MockApp
Para crear tu aplicación para iPhone, necesitas acceder a todos los elementos de la pantalla del iPhone. Afortunadamente, hay una maravillosa plantilla de PowerPoint llamada MockApp, que contiene un conjunto completo de elementos de pantalla de iPhone. MockApp se encuentra en MockApp.com.
Cuando descargues MockApp tendrás acceso a dos archivos: una plantilla y una biblioteca. La plantilla es simplemente una serie de pantallas de iPhone en blanco que pueblas con los elementos de pantalla apropiados de la biblioteca.
Tu tarea es copiar elementos de pantalla de la biblioteca y luego pegarlos en la plantilla. Luego, reordena y vuelve a etiquetar los elementos de la pantalla para simular una aplicación que funcione.
Debido a que PowerPoint admite hipervínculos entre diapositivas, incluso puedes simular botones que navegan entre pantallas en tu app. De esta manera, puedes crear una maqueta fotográfica realista.
La plantilla MockApp y la biblioteca se representan aquí abiertas simultáneamente en ventanas superpuestas. Te recomendamos configurarlo de esta manera. La biblioteca consta de una serie de diapositivas de PowerPoint, cada una de las cuales tiene una matriz de elementos de pantalla de iPhone. La diapositiva de la biblioteca que se muestra aquí es para teclados, pero hay muchas otras diapositivas de biblioteca. Copia elementos de cualquiera de estas diapositivas de biblioteca y pegarlos en la plantilla de iPhone en blanco. Luego personaliza el texto para que se adapte a tu app. Toma de pantalla de Mockapp.com reimpresa con permiso de Dotan Saguy.
Claves para llevar
- Los flujos de proceso ayudan a planificar su aplicación al crear una visión general de alto nivel de la funcionalidad.
- Por suerte, el iPhone ha hecho cumplir los estándares de interfaz. Saber qué elementos requeridos van donde libera al diseñador para enfocarse en el contenido de la app.
- Las cuatro partes principales de la interfaz del iPhone son la barra de estado, la barra de navegación, el indicador de actividad y la barra de pestañas.
Preguntas y ejercicios
- Describir el contenido y los elementos de pantalla que esperarías ver en una app que monitoreaba múltiples signos vitales como temperatura, frecuencia cardíaca, glucosa en sangre, ¿y así sucesivamente?
Técnicas
Las siguientes técnicas, que se encuentran en la sección PowerPoint de la referencia de software, pueden ser útiles para completar las asignaciones para este capítulo. Mapa de interfaz de iPhone • Hipervínculo • Inserción de forma
Asignación L1: Un mercado y una persona para tu aplicación
Al hacer una lluvia de ideas sobre aplicaciones para iPhone, a veces es útil mirar otras aplicaciones ya desarrolladas. La mejor manera de ver otras aplicaciones es en la tienda iTunes (iTunes es gratis). Sin embargo, aunque no tengas iTunes cargado, puedes consultar las aplicaciones en el siguiente enlace: app-store.appspot.com/
No podemos exagerar la importancia de las asignaciones en este capítulo. El resto del curso se basará en lo que creas aquí. Tu app será vista por tus compañeros de clase así que hazla algo de lo que puedas estar orgulloso.
Tus compañeros de clase “comprarán” tu app en una tarea futura, por lo que la app debe apelarles ya sea para su propio consumo o para que se la dé como regalo. También construirás proyecciones financieras para tu app en un futuro capítulo. Por último, tu reporte al final del curso será la culminación de todos los entregables que hayas construido sobre tu app hasta ese momento.
Configuración
Inicie una presentación de PowerPoint en blanco. Usando una fuente de 12 puntos, complete el siguiente ejercicio usando frases y párrafos completos.
Contenido y estilo
- En uno o más párrafos describe la situación o problema que tu app está diseñada para abordar. Tenga en cuenta que no está limitado por las limitaciones tecnológicas. Tu app puede tener superpoderes.
- En uno o más párrafos describe tu solución a la situación o problema.
- En uno o más párrafos enumere al menos tres beneficios que su solución brindará. Puedes usar balas.
- Describe tres segmentos de mercado que comprarían tu app, uno de los cuales deben ser tus compañeros de clase. Proporcionar datos demográficos para los segmentos del mercado, por ejemplo, edad, educación, ingresos familiares, género, ubicación geográfica, etc.
- Ahora elige uno de esos segmentos y crea una persona ficticia en el mercado objetivo. Cuéntanos detalles sobre tu persona, dónde vive, cuánto gana, dónde van de vacaciones, si tienen novia/novio, etc. Recuerda que tu persona debe estar dispuesta a comprar la app.
Entregables
Envío electrónico: Envíe un archivo de PowerPoint que contenga sus respuestas.
Envío de papel: Imprima sus respuestas.
Una muestra de escritura del estudiante para el ejercicio L1. You Translate es una app que hace traducción. Deberías hacer tu propio ejemplo original.
Asignación L1: Demuestra los beneficios de tu aplicación
Al crear diagramas de flujo de proceso As-Is y To-Be, podrás analizar los beneficios de la aplicación. Aquí nos muestra cómo su persona se involucra en un proceso de negocio con y sin su aplicación. La aplicación debería construir un caso sólido de que el proceso To-Be es una mejora significativa con respecto a la versión tal cual. Cree los diagramas de flujo del proceso As-Is y To-Be del uso de la aplicación para iPhone. Los diagramas As-Is deben modelar cómo la persona realiza la tarea sin la aplicación. El diagrama To-Be describirá cómo se completa la tarea usando la aplicación.
Configuración
Inicie una presentación de PowerPoint en blanco. Usando una fuente de 12 puntos, complete el siguiente ejercicio usando frases y párrafos completos.
Contenido y estilo
- Cree cada diagrama de proceso en diapositivas separadas.
- Usa una combinación de formas de dibujo (líneas, flechas, etc.) y texto.
- Utilice los principios de diseño para maximizar el profesionalismo.
- Etiquete cada diagrama con un título apropiado y su nombre.
Entregables
Envío electrónico: Envíe su archivo de PowerPoint.
Envío de papel: Cree una impresión en color imprimiendo directamente desde PowerPoint.
Muestra de flujos de proceso de estudiantes para la aplicación You Translate. Debes hacer tus propios flujos de proceso originales para que coincidan con tu aplicación.
Asignación L1: Crea una Mockup de Tu App
En esta tarea crearás una maqueta de app para iPhone basada en tu análisis. PowerPoint te permite crear una maqueta de una aplicación antes de hacer cualquier codificación. Esta maqueta actúa como un modelo visual para usar en una propuesta de producto. Usando las plantillas proporcionadas, diseña una aplicación para iPhone creativa y útil.
Configuración
Completa el registro gratuito para obtener los archivos para diseñar tu app desde MockApp.com. MockApp contiene tres archivos, la biblioteca de iconos utilizados por una aplicación para iPhone y dos plantillas, uno que te permite hacer una demostración en PowerPoint y otro que te permite hacer una demostración en un iPhone. Usarás el que te permita hacer una demostración en PowerPoint. Tenga en cuenta que los usuarios de Mac también pueden elegir las versiones Keynote de los archivos MockApp.
Cree su aplicación en el archivo de plantilla MockApp. No cree su aplicación en el mismo archivo que utilizó para las asignaciones L1 o L2. Las dimensiones de los archivos de PowerPoint son diferentes y tus imágenes se distorsionarán.
Contenido y estilo
- Usa las imágenes dadas para recrear una maqueta original.
- La maqueta debe contener al menos seis diapositivas.
- Crea un ícono para tu app con un logotipo apropiado en la primera diapositiva.
- Aplicar y seguir todos los principios de diseño gráfico.
- Incluye todas las imágenes necesarias.
- Crea hipervínculos entre tus páginas de PowerPoint para simular la aplicación en acción. Deberías construir hipervínculos a partir de los botones, no del texto de los botones. (De lo contrario se subrayará el texto, lo que no se ve bien).
- Incluya su nombre como operador de telefonía móvil en lugar de AT&T (en la esquina superior izquierda).
Entregables
Envío electrónico: Guarde y envíe su archivo de PowerPoint.
Envío de papel: Cree una impresión en color imprimiendo directamente desde PowerPoint.
Muestras de capturas de pantalla para la aplicación You Translate. Debes hacer tus propias capturas de pantalla originales usando la plantilla y la biblioteca de MockApp.