Experience Sharing: how to design and develop a music player App step by step

First, let's talk about subject design.

Before talking about how to design this application, let's take a look at the demo video of OooPlay, which gives you an intuitive understanding. After watching the video, people may feel a bit cool because of the layout or interaction, but we are not pursuing cool feeling in essence, instead, we always make a simple and compact product design around functions.

Next, let's take a look at how the design results are presented step by step:

First, it is not convenient for the iPhone's music player to listen to songs in the list. One click will go to another playing interface. In this way, you need to frequently click "back" to listen to several songs ". Later, I noticed that Panamp is very convenient to play directly on the list. Unfortunately, this application does not often use many functions, therefore, the features are not very prominent due to the lack of streamlined and clever design. From the initial point of view, if you want it to be in the form of a list and listen to songs, you only need a list and a pause button. Like the following sketch:

However, this is not enough, because with the browsing and scrolling of the list, it becomes important to quickly return to the playing song. Therefore, you need to have a button at the top or bottom of the list, you can quickly locate the playing song. The thought must have such a thing, so what elements can be added to show that they are not abrupt and redundant, and can be more harmonious with the overall concise style? So I thought that the CD screen of the song is very important to the playing of the song, and the CD screen can eliminate the monotonic of some software interfaces.

In addition, there should be some dynamic effects to reflect the playing status. Based on the combination of these functions and elements, I thought of using the CD disc to display the "CD screen", and using the rotation of the disc to show that "playing ", click the edge of the disc to return to "playing songs". This makes it a "Compact" design. The most common functions such as playing, pause, last and next are added to the side of the CD disc. Such

However, it is not enough to think about it in detail, because although it is not often used to search for songs, when necessary, users cannot find the song from hundreds of songs. Therefore, you need to have the search function, which is not limited to the search function, but also the random and single-headed loop functions. So where can these functions be added? Add it to the top? The bottom has occupied a lot of height. When added to the top, it will squeeze the space in the middle of the content, which makes the simple feeling disappear. I creatively tried to draw a sidebar on the paper and put search, random, and single-headed loops on it.

The reason is that it is okay to compress the width of the song list. I didn't expect the effect to be good. At the same time, this asymmetric design made the CD disc very suitable to stay in that position. I don't want to put the CD disc in the middle of it as a new expression. So there is:

In this way, the basic layout is available, and then some features are further refined. I personally often hear a song that suddenly feels quite appealing. I think another song from this person on my cell phone is also very good. I just want to hear it. Therefore, you need a function to find all the songs of this person using a song. Therefore, a "villain" icon is added to the end of the song name to search for other songs of the singer. The search method is to add no additional interface, at the same time, the "Search" function is also commonly used.

In addition, many players have the function of timed playback, so that they can listen to music before going to bed. I have also added this feature. From the common point of view, only 30 minutes and 60 minutes are retained. The sand leakage occurs when the countdown ends ). The next step is to keep an entry for the software's "about", and this icon is not displayed when AirPlay is added because I have Bluetooth headsets ). So there is:

In fact, when there is only a list, I want to let the music Slide left and right to set the top and bottom. This is due to the influence of the Clear application video. The Clear design method has really brought some new thinking directions to designers. In essence, this method can be used to handle important information that is biased from top to bottom.

I personally think that this method can be used properly for music. Those songs that do not want to listen for the time being can be right-slide, which means "Far from death ", those songs that are more concerned about and want to know more can be left slide to top it, which is the most convenient to find. In this way, you can make the above songs sound better, and the following songs are not nice. This is something other music players cannot do. Moreover, it is so easy to use, which is also the biggest highlight of this player.

At the same time, because the songs you want to follow are left slide to the top, you do not need to retain the function of the player "playlist", because the position close to the top is even the playlist. In addition, I always think that in the past, the "playlist" method was too mechanical to move songs between multiple lists, which was not at all simple and convenient. Slide the left and right of the song to see:

I have not reserved the function to sort songs by dragging, because it is not easy to operate with one hand, even if you want to do this with both hands, it is probably a person with obsessive-compulsive thinking who will deliberately organize the sorting of each song. "Deliberate" violates my "casual" principle. Moreover, holding and dragging a song will greatly increase the chance of misoperations.

At this point, the design process of the main functions of the application should be completed, which is summarized as three points:

Because the phone has a side key to control the volume, the volume control is not kept on the software interface. The progress bar is not required when you listen to music, so there is no progress bar control. However, just like the built-in player, you can press "Next" to fast forward to the song and support the line control mode at the same time ). Because the OooPlay player has only one main interface and the full icon design, it can be released globally without additional translation. Based on a market like global users, it is impossible to provide reliable online lyrics display services. In addition, most of the music that comes with iTunes does not contain lyrics and cannot be displayed one by one. In summary, we also discard the function of displaying the lyrics, so that the casual music will sound, you don't have to worry about what every sentence he sings.

Let's talk about the details.

In order to bring the product closer to perfection, the OooPlay simple music player still has a lot of details to be carefully processed. The following lists some of the content that has been described in the previous article and can be skipped directly):

The development process has roughly gone through the following stages:

• Inspired by DailyCost, 2013-01-21 decided to create a product from the music player perspective.
• Sketch on the paper in the morning from, and create the original main prototype interface at night.
• On February 24, a friend introduced me to the application developer rexshi and found the interface design soioi on the 28th.
• After finishing the Spring Festival and finishing all the prototype details, return to Beijing on February 3.
• After all the work was completed in, the development phase began.
• The main development function was completed in February 15, and a Demo Video of the developer version was released.
• A preview version of Public Beta was released.
• Submitted for AppStore review on February 14.
• OooPlay was approved and launched. It reached 7th paid music rankings on that day and 3rd on the next day.