Cómo diseñar y desarrollar una aplicación de reproductor de música paso a paso

OooPlay es un reproductor de música minimalista. Este artículo es compartido por Yin Guanglei, formador de diseño de prototipos de producto y diseñador de OooPlay. El artículo detalla la evolución del pensamiento de OooPlay en el proceso de diseño y desarrollo del prototipo de producto. El viaje se comparte aquí con los lectores interesados.

Hablemos primero del diseño principal

Antes de comenzar a hablar sobre cómo diseñar esta aplicación, echemos un vistazo al vídeo de demostración de la aplicación OooPlay para que todos tengan una comprensión intuitiva. . Después de ver el video, puede pensar que es un poco interesante debido al diseño o al método de interacción, pero en esencia no buscamos la sensación de frescura, sino que siempre hacemos un diseño de producto informal y compacto en torno a la funcionalidad.

Luego restauremos paso a paso el resultado del diseño actual:

En primer lugar, el reproductor de música integrado del iPhone no es conveniente para escuchar canciones de la lista. un clic ingresará a otra interfaz de reproducción. Si desea escuchar algunas canciones de esta manera, deberá hacer clic en "Volver" con frecuencia. Más tarde, me di cuenta de que existe una aplicación Panamp, que es muy conveniente para jugar directamente en la lista. Desafortunadamente, esta aplicación tiene muchas funciones que no se usan comúnmente, por lo que no es un diseño ágil e inteligente y las características no son. muy prominente. Creo que desde el punto de vista inicial, si puede ser en forma de lista y poder escuchar canciones, solo una lista y un botón de reproducción y pausa son suficientes. Tal como se muestra a continuación:

Sin embargo, esto por sí solo no es suficiente, porque a medida que se navega y se desplaza por la lista, se vuelve importante poder regresar rápidamente a la canción que se está reproduciendo, por lo que es necesario Al final de la lista podría haber un botón en la parte superior o inferior para navegar rápidamente a la canción que se está reproduciendo. Pensando que debe existir tal cosa, ¿qué elementos se pueden agregar para que no sea molesto ni redundante y pueda ser más armonioso con el estilo simple general? Entonces pensé que la pantalla del CD de la canción es muy importante para reflejar quién está reproduciendo la canción, y la pantalla del CD también puede eliminar la monotonía de algunas interfaces de software.

Además, debe haber algunos efectos dinámicos durante la reproducción para reflejar el estado de la reproducción. Basado en la combinación de estas funciones y elementos, pensé en usar un disco CD para mostrar la "pantalla de CD", usar la rotación del disco para reflejar "reproduciendo ahora" y usar el borde del disco para regresar a la " canción que se está reproduciendo". Con ello se consigue un diseño "compacto". El siguiente paso es integrar las funciones más utilizadas, como reproducción, pausa, canción anterior y siguiente, en la cara del disco CD. Como se muestra en la siguiente imagen

Sin embargo, si lo piensas bien, esto no es suficiente, porque aunque la búsqueda de canciones no es un uso común, cuando es necesario, los usuarios no pueden encontrar esa canción entre cientos de canciones. Entonces necesitamos una función de búsqueda, pero luego me di cuenta de que hay más, incluida la aleatorización, el bucle de una sola pista, etc. Entonces, ¿dónde deberían agregarse estas funciones? ¿Agregarlo encima? La parte inferior ya ocupa mucha altura, y agregarla a la parte superior de repente exprimirá el espacio para el contenido en el medio y, al mismo tiempo, hará desaparecer la sensación de simplicidad. Intenté creativamente dibujar una barra lateral en papel y colocarle bucles de búsqueda, aleatorios y únicos.

Porque creo que no importa si el ancho de la lista de canciones está un poco comprimido. Inesperadamente, el efecto de colocarlo de esta manera es bueno. Al mismo tiempo, este diseño asimétrico hace que el disco CD permanezca en esa posición de manera particularmente apropiada. No quería poner el CD en el medio, que es una forma aburrida de decirlo. Entonces tenemos la siguiente imagen:

Ahora que tenemos el diseño básico, continuamos refinando algunas funciones. Personalmente, a menudo escucho una canción que de repente me hace sentir muy bien, y pienso en otra canción de esta persona en mi teléfono que también es muy buena y quiero escucharla. Por lo tanto, es necesario que exista una función que pueda encontrar todas las canciones de esta persona a través de una sola canción. Así que agregué un ícono de "hombrecito" después del nombre de la canción para buscar otras canciones de este cantante. El método de búsqueda también se usó para evitar agregar una interfaz adicional y, al mismo tiempo, se convirtió en una función raramente utilizada como "buscar". comúnmente utilizado.

Además, muchos reproductores tienen la función de cronometrar el final de la reproducción, para que puedas quedarte dormido escuchando música antes de acostarte. También agregué esta función y solo reservé dos franjas horarias de 30 minutos y 60 minutos desde una perspectiva de uso común (el reloj de arena es una cuenta regresiva para finalizar la reproducción). Otra cosa es reservar una entrada para el "Acerca de" del software, y como tengo unos auriculares estéreo Bluetooth, agregué soporte para la función AirPlay (este ícono no aparece cuando no hay un dispositivo AirPlay).

Así que aquí está la imagen a continuación:

En realidad, cuando solo había una lista, pensé en hacer que la música se pudiera deslizar hacia la izquierda y hacia la derecha hacia arriba y hacia abajo. Esto fue influenciado por el video de la aplicación Clear. El enfoque de diseño de Clear realmente les dio a los diseñadores nuevas direcciones de pensamiento. Básicamente, el contenido que se encuentra encima de la información importante y la información sin importancia que se encuentra debajo se pueden procesar de esta manera.

Personalmente, creo que la música puede usar este método de manera apropiada. Aquellas canciones que no quieres escuchar debido a tu estado de ánimo, etc., pueden deslizarse hasta el final, lo que significa "muerte muy lejos". ". Esas canciones que son más Si prestas atención a la canción sobre la que quieres saber más, puedes deslizar el dedo hacia la izquierda para fijarla en la parte superior, que es la forma más fácil de encontrarla. Este tipo de procesamiento casual puede hacer que las canciones de arriba prefieran escuchar y las canciones de abajo tiendan a ser menos agradables. Esto es algo que otros reproductores de música no pueden hacer y es muy fácil de usar, lo cual es lo más destacado de este reproductor.

Al mismo tiempo, dado que las canciones a las que desea prestar atención se deslizan hacia la izquierda hacia la parte superior, no es necesario conservar la función "lista de reproducción" del reproductor integrado, porque la posición cerca la parte superior es la lista de reproducción. Y siempre sentí que el método anterior de "lista de reproducción" de mover canciones de un lado a otro entre múltiples listas era demasiado mecánico y nada casual y simple. Vea la imagen a continuación para deslizar canciones hacia la izquierda y hacia la derecha:

No he conservado la función de arrastrar y clasificar canciones porque no es fácil de operar con una mano, incluso si tiene que usar ambas manos para hacerlo. Si operas así, probablemente seas una persona con trastorno obsesivo-compulsivo. Organizaré deliberadamente el orden de cada canción. "Deliberadamente" va en contra de mi principio "informal", y mantener y arrastrar la canción aumentará en gran medida la posibilidad de un mal funcionamiento.

En este punto, se debe presentar el proceso de diseño de las funciones principales de la aplicación. Se puede resumir brevemente en tres puntos:

Reproducir directamente en la lista para escuchar rápidamente. las canciones.

Desliza el dedo hacia la izquierda o hacia la derecha para distinguir rápidamente entre canciones buenas y malas.

Haz clic en el icono del artista para ver rápidamente las canciones del artista.

Debido a que el teléfono tiene botones laterales para controlar el volumen, el control de volumen no se retiene en la interfaz del software. No esperaba necesitar una barra de progreso al escuchar música, por lo que no hay control de barra de progreso. Sin embargo, al igual que el reproductor integrado, puedes presionar y mantener presionado "siguiente" para avanzar rápidamente la canción (control por cable). también es compatible). Debido a que el reproductor OooPlay tiene solo una interfaz principal y un diseño de íconos completo, se puede distribuir globalmente sin traducción adicional. Teniendo en cuenta un mercado de usuarios global, es imposible proporcionar un servicio de visualización de letras basado en Internet más fiable. Además, la mayor parte de la música que viene con iTunes de los usuarios no tiene letra y no se puede posicionar ni mostrar frase por frase. Por lo tanto, por las razones anteriores, también abandonamos la función de mostrar letras y dejamos que se reproduzca música informal sin preocuparnos. sobre lo que cada frase que canta.

Hablemos de los detalles

Para que el producto sea casi perfecto, el reproductor de música minimalista OooPlay tiene muchos detalles que han sido cuidadosamente procesados. Aquí hay algunos puntos (parte de. el contenido presentado en el artículo anterior, puedes omitirlo si ya lo conoces):

Si deslizas el dedo hacia la derecha en la canción que se está reproduciendo actualmente, significa que no quieres escucharla, por lo que la canción dejará de reproducirse y se colocará al final, y luego comenzará a reproducirse". Canción "Siguiente"; si desliza hacia la izquierda la canción que se está reproduciendo actualmente, significa que suena bien o que desea prestarle atención, por lo que no puede detener la reproducción. él. La canción debe estar en la parte superior, pero la canción debe permanecer en la posición original, porque después de reproducir la canción, es necesario reproducir la siguiente canción y la segunda canción en la parte superior no se puede reproducir, porque esas canciones pueden ser escuchado desde arriba Descarga la canción que acabas de escuchar.

Deslizar hacia la izquierda y hacia la derecha es una operación global. Las canciones deslizadas hacia la izquierda en cualquier resultado de búsqueda aún se pueden encontrar en la parte superior cuando regresas a la lista de todas las canciones. en la parte superior si regresa a ese resultado de búsqueda.

El ícono del artista no se muestra detrás de todas las canciones. Solo se mostrará cuando el número de canciones de un determinado artista en la biblioteca sea superior a 1, porque si el artista solo tiene una canción, puedes hacerlo. Ya no tiene sentido buscar más, para evitar decepcionarte cuando descubras que solo hay una canción después de la búsqueda.

El algoritmo para la reproducción aleatoria se ha procesado especialmente. Si hay más de 10 canciones en la biblioteca de música, la última canción no se reproducirá aleatoriamente; si hay más de 20 canciones, las dos últimas. Las canciones no se reproducirán. La canción no se reproducirá. Por analogía, hasta 30 canciones en la parte inferior no se reproducirán aleatoriamente. Esto evita que escuches canciones que no deseas escuchar recientemente cuando se reproducen aleatoriamente.

El método de lista puede causar un mal funcionamiento. Si hace clic en una canción por error, puede presionar "Anterior" dentro de los 5 segundos para regresar a la canción que acaba de escuchar y continuar con la reproducción. donde lo dejaste. Después de 5 segundos, significa que probablemente no cometiste ningún error. Presiona "Anterior" nuevamente y saltará a la canción "Anterior" normalmente.

Cuando una canción está a punto de ser cantada dentro de los 25 segundos, es decir, cuando básicamente se canta el clímax de la canción, si presionas el botón "Anterior", se reproducirá nuevamente la canción del día. . Porque cuando presionas "anterior" cuando estás a punto de terminar de cantar, probablemente sea porque te sientes muy feliz escuchando esta canción y quieres volver a reproducirla. El reproductor que viene con el iPhone comienza a reproducir 3 segundos después y luego presiona "Anterior" para reproducir la canción actual nuevamente.

Si sincronizas 5 canciones nuevas con tu teléfono, las canciones recién sincronizadas se clasificarán por encima de todas las canciones originales. Probablemente quieras escuchar tus canciones recién sincronizadas de inmediato, así que colócalas en la parte superior. El orden de tus canciones originales también se conserva y todas tus canciones no se reordenarán debido a la sincronización.

Como puedes ver, hemos establecido una conexión de animación coherente a partir de la pantalla de presentación, haciendo que cada capa de significado sea clara y distinguible.

No queremos ocupar una interfaz adicional solo para que puedas ver información inútil "Acerca de", por lo que nuestro "Modo nocturno" puede brindarte una última capa de sorpresa.

El proceso de desarrollo pasó aproximadamente por las siguientes etapas:

2013-01-21 Inspirándome en DailyCost, decidí crear un producto desde la perspectiva de un reproductor de música.

2013-01-22 Completé el boceto en papel por la mañana y produje la interfaz del prototipo principal inicial por la tarde.

2013-01-24 Encontré al desarrollador de mi aplicación, rexshi, a través de la presentación de un amigo, y encontré al diseñador de la interfaz soioi el día 28.

2013-03-03 Después de celebrar el Festival de Primavera y completar todos los detalles del prototipo, regresé a Beijing.

2013-03-16 Después de comunicar todo el trabajo, comenzamos a entrar en la etapa de desarrollo.

2013-05-15 Se completa la función de desarrollo principal y se publica un vídeo de demostración de la versión para desarrolladores.

Se lanzó una versión preliminar beta pública el 24 de mayo de 2013.

2013-06-14 Enviado para revisión de la AppStore.

2013-06-21 OooPlay pasó la revisión y se conectó, ocupando el séptimo lugar en la lista de música paga ese día y el tercero al día siguiente.