OooPlay is a minimalist music player. This article is shared by Yin Guanglei, a product prototype design trainer and OooPlay designer. The article details the evolution of OooPlay's thinking in the product prototype design and development process and The product journey is shared here with interested readers.

Let’s talk about the main design first

Before we start talking about how to design this application, let’s take a look at the demonstration video of the OooPlay application to give everyone an intuitive understanding. After watching the video, you may think it's a little cool because of the layout or interaction method, but in essence we are not pursuing the cool feeling, but always making a casual and compact product design around functionality.

Then let’s restore it step by step to the current design result:

First of all, the iPhone’s built-in music player is not convenient for listening to songs on the list. , one click will enter another playback interface. If you want to listen to a few songs in this way, you need to click "Return" frequently. Later, I noticed that there is such an application Panamp, which is very convenient for playing directly on the list. Unfortunately, this application has many functions that are not commonly used, so it is not a streamlined and clever design and the features are not very prominent. I think from the initial point of view, if it can be in the form of a list and can listen to songs, only a list and a playback and pause button are enough. Just like the sketch below:

However, this alone is not enough, because as the list is browsed and scrolled, it becomes important to be able to quickly return to the song being played, so it needs to be at the end of the list. There could be a button at the top or bottom to quickly navigate to the song being played. Thinking that there must be such a thing, what elements can be added so that it is not obtrusive and redundant, and can be more harmonious with the overall simple style? Then I thought that the CD screen of the song is very important to reflect who is playing the song, and the CD screen can also eliminate the monotony of some software interfaces.

In addition, there should be some dynamic effects during playback to reflect the status of being played. Based on the combination of these functions and elements, I thought of using a CD disk to display the "CD screen", using the rotation of the disk to reflect "now playing", and using the edge of the disk to return to the "song being played". This achieves a "compact" design. The next step is to integrate the most commonly used functions such as play, pause, previous song, and next song into the side of the CD disc. As shown in the picture below

However, if you think about it carefully, these are not enough, because although searching for songs is not commonly used, when it is needed, users cannot find that song among hundreds of songs. . So we need a search function, but later I realized that there are more, including randomization, single-track looping, etc. So where should these functions be added? Add it on top? The bottom already takes up a lot of height, and adding it to the top will squeeze out the space for the content in the middle, and at the same time make the sense of simplicity disappear. I creatively tried to draw a sidebar on paper and put search, random, and single loops on it.

Because I think it doesn’t matter if the width of the song list is compressed a little. Unexpectedly, the effect of placing it this way is good. At the same time, this asymmetric design makes the CD disk stay in that position particularly appropriately. I didn't want to put the CD disc in the middle, which is a boring way of saying it. So we have the following picture:

Now that we have the basic layout, we continue to refine some functions. Personally, I often hear a song that suddenly makes me feel very good, and I think of another song by this person on my phone that is also very good, and I want to listen to it. Therefore, there needs to be a function that can find all the songs of this person through one song. So I added a "little man" icon after the song name to search for other songs by this singer. The search method was also used to avoid adding an additional interface, and at the same time, a rarely used function like "search" became commonly used. .

In addition, many players have the function of timing the end of playback, so that you can fall asleep listening to music before going to bed.

I also added this function and only reserved two time slots of 30 minutes and 60 minutes from a commonly used perspective (the hourglass is a countdown to end playback). Another thing is to reserve an entrance for the "About" of the software, and because I have a Bluetooth stereo headset, I added support for the AirPlay function (this icon does not appear when there is no AirPlay device). So here is the picture below:

Actually, when there was only a list, I thought of making the music slideable left and right to top and bottom. This was influenced by the Clear application video. Clear’s design approach really gave designers some new thinking directions. Essentially, the content above the important information and the unimportant information below can be processed in this way.

I personally think that music can use this method appropriately. Those songs that you don’t want to listen to because of your mood and so on can just swipe right to the bottom, which means "death far away". Those songs that are more If you follow the song you want to know more about, you can swipe left to pin it to the top, which is the easiest way to find it. This kind of casual processing can make the songs on the top prefer to listen, and the songs on the bottom tend to be less pleasant. This is something other music players can't do, and it's so easy to use, which is the biggest highlight of this player.

At the same time, since the songs you want to pay attention to are swiped left to the top, there is no need to retain the "playlist" function of the built-in player, because the position near the top is the playlist. And I always feel that the past "playlist" method of moving songs back and forth between multiple lists is too mechanical and not at all casual and simple. See the picture below for sliding songs left and right:

I have not retained the function of dragging and sorting songs, because it is not easy to operate with one hand. Even if you have to use both hands to operate like this, you are probably a person with obsessive-compulsive disorder thinking. I will deliberately organize the order of each song. "Deliberately" goes against my "casual" principle, and holding and dragging the song will greatly increase the chance of misoperation.

At this point, the design process of the main functions of the application should be introduced. It can be briefly summarized in three points:

Play directly in the list to quickly listen to songs.

Swipe left or right to quickly distinguish between good and bad songs.

Click the artist icon to quickly view the artist's songs.

Because the phone has side buttons to control the volume, the volume control is not retained on the software interface. I didn’t expect to need a progress bar when listening to music, so there is no progress bar control. However, just like the built-in player, you can press and hold "next" to fast-forward the song (wired control is also supported). Because the OooPlay player has only one main interface and a full icon design, it can be distributed globally without additional translation. Based on a global user market, it is impossible to provide a more reliable Internet-based lyrics display service. In addition, most of the music that comes with users’ iTunes does not have lyrics and cannot be positioned and displayed sentence by sentence. Therefore, for the above reasons, we have also abandoned the function of displaying lyrics and let casual music play without worrying about what every sentence he sings. .

Let’s talk about the details

In order to make the product close to perfection, OooPlay minimalist music player has many details that have been carefully processed. Here are a few points (part of the content Introduced in the previous article, you can skip if you already know it):

If you swipe right on the currently playing song, it means you don’t want to listen to it, so the song will stop playing and be put to the bottom, and then start playing." "Next" song; if you swipe left on the currently playing song, it means it sounds good or you want to pay attention to it, so you cannot stop playing it. The song needs to be on the top, but the song needs to stay at the original position, because after the song is played, the next song needs to be played, and the second song on the top cannot be played, because those songs may be listened to from above Download the song you just listened to.

Swiping left and right is a global operation. Songs you swiped left in any search results can still be found at the top when you return to the list of all songs. Don’t worry, you can only find them at the top if you return to that search result. turn up.

The artist icon is not displayed behind all songs. It will only be displayed when the number of songs by a certain artist in the library is more than 1, because if the artist only has one song, you can There is no point in searching anymore, to avoid being disappointed when you find that there is only one song after searching.

The algorithm for random playback has been specially processed. If there are more than 10 songs in the music library, the bottom 1 song will not be played randomly; if there are more than 20 songs, the bottom 2 songs will not be played. The song will not be played. By analogy, up to 30 songs at the bottom will not be played at random. This prevents you from hearing songs you don’t want to listen to recently when playing randomly.

The list method may cause misoperation. If you click on a song by mistake, you can press "Previous" within 5 seconds to return to the song you just listened to and start from the next song. Continue playback where you left off. After 5 seconds, it means that you probably did not make a mistake. Press "Previous" again and it will jump to the "Previous" song normally.

When a song is about to be sung within 25 seconds, that is, when the climax of the song is basically sung, if you press the "Previous" button, the song of the day will be played again. Because when you press "previous" when you are about to finish singing, it is probably because you feel so happy listening to this song and want to play it again. The iPhone's built-in player starts playing the song 3 seconds later, and then press "Previous" to replay the current song.

If you synchronize 5 new songs to your phone, the newly synced songs will be ranked on top of all the original songs. You probably want to listen to your newly synced songs right away, so put them at the top. The ordering of your original songs is also retained, and all your songs will not be reordered due to synchronization.

As you can see, we have made a coherent animation connection starting from the splash screen, making each layer of meaning clear and distinguishable.

We don’t want to take up an extra interface just for you to look at useless “About” information, so our “Night Mode” can give you a final layer of surprise there.

The development process roughly went through the following stages:

2013-01-21 Inspired by DailyCost, I decided to make a product from the perspective of a music player.

2013-01-22 I completed the sketch on paper in the morning and produced the initial main prototype interface in the evening.

2013-01-24 I found the developer of my application, rexshi, through a friend’s introduction, and I found the interface designer soioi on the 28th.

2013-03-03 After celebrating the Spring Festival and completing all prototype details, I returned to Beijing.

2013-03-16 After communicating all the work, we began to enter the development stage.

2013-05-15 The main development function is completed and a demo video of the developer version is released.

A public beta preview version was released on 2013-05-24.

2013-06-14 Submitted for AppStore review.

2013-06-21 OooPlay passed the review and went online, ranking 7th on the paid music list that day and 3rd the next day.