Analysis and redesign of music player apps (application software) How to design a beautiful music player interface

Analysis and redesign of music player apps (application software) How to design a beautiful music player interface
Analysis and Redesign of Music Playback App Sanlian Tutorial
I have always been interested in wireless interaction, so I'm going to practice it this time~
This analysis and evaluation is based on the iOS platform and selects two representative music players, QQ Music and Douban FM. Since these two products already have a huge user base on the web and have a certain degree of user stickiness, the mobile version is an extension of the web version, and the target users, information architecture, core experience, etc. also inherit the distinctive style of the web version. These two products can represent two categories of music players with different positioning. One is large and comprehensive, with comprehensive functions, which can meet users' various needs such as managing local music, syncing music from other devices, discovering good music, etc. (similar applications: Baidu Ting, Kuwo Music Box, iScrob). One is small and simple, easy to operate, just like using a radio, just turn it on and listen, if you don’t like it, change the channel (similar applications: Xiami FM, Console.fm).
QQ Music 1. Interface Overview
2. Demand analysis Target users: ordinary young people who love music and loyal users of QQ products.
User needs: Listen to music anytime and anywhere. You can listen to local music when there is no wifi and listen online when there is wifi. You can download songs you like and synchronize songs collected on other devices.
Design goal: Provide functions such as playing local music, account synchronization, online listening, and music search.
3. Information architecture QQ Music integrates information from four aspects: local music, my music, online music, and more.
"Local Music" can play local music from the dimensions of singers and albums, you can also build your own local music playlist, and you can also search for cached songs that have been downloaded.
"My Music" synchronizes the songs collected and playlists created by the QQ account on various devices. This synchronization service can improve user stickiness and cultivate users' good habit of logging in in time. In order to enhance the social attributes, there is also a secondary menu of "Order Songs". QQ users can order songs for their friends, and the songs sent to you will appear here.
"Online Music" is the place to discover great music. The "radio" is similar to "Douban FM", where you can randomly listen to music on different themes. The system can also guess what you like based on your collections and listening habits. Here we provide charts of new songs and popular songs to help users understand music trends as quickly as possible. There is also a collection similar to Xiami Music, which selects good music with themes for users.
"More" integrates some minor information, including personal account, cache settings, scheduled message notifications, and software information.
4. Page Layout
Similar to most iOS-based app layouts, QQ Music's list page uses a list-style layout for easy searching and expansion. The main navigation is fixed at the bottom of the screen, the secondary navigation is on the top, there is a unified return button in the upper left corner, and the upper right corner is the details page of the song being played, which allows users to quickly find the music being played and perform operations such as stop, play, favorite, download, and share.
The song playback interface is displayed in full screen, and the most commonly used play/pause, previous song/next song, and volume adjustment buttons are displayed by default. When the user clicks on the song cover, the song progress, playback mode, favorites, download, and share buttons will be displayed, and the user can perform corresponding operations here.
5. Gesture operation
The operation of songs is not complicated. QQ Music uses online sliding, left and right sliding, and single-clicking operation gestures, most of which are commonly used and obvious gesture operations for users. Only when checking the lyrics, the user needs to swipe the album cover to the left, swipe the picture to the lower left, and the lyrics will appear. This operation is not very easy to find.
DoubanFM
1. Interface Overview
2. Demand analysis Target users: young people who love music and loyal users of Douban products.
User needs: Like Douban FM, as long as I open it, I can play the literary songs I like without any operation.
Design goals: clean interface, simple operation, accurate recommendations, and shortened path for playing songs.
3. Information Architecture
Douban FM's information architecture is much simpler, with shallow levels and easy operation. As long as you turn on the radio, songs will be played. Users can swipe above the song to select MHz, or select from a list. Douban does not require users to bother choosing which song to listen to. Users only need to select the category they want to listen to and Douban will automatically recommend it. Douban hopes that users can "maintain the radio station with care" and, based on users' long-term usage habits, analyze the songs that users have added to their favorites or choose not to play again, and recommend songs that suit users' preferences.
4. Interface layout
The interface of Douban FM is very simple. When you open the app, you will see the song playing interface, with only buttons for Like, Stop Playing, and Next Song. You can select Hz by sliding above the song. The song currently playing will gradually disappear, and the new song will gradually sound, with a very smooth transition.
Because Douban is positioned as a radio station, you can turn it on when you want to listen and close it when you don’t want to listen, so even the play and pause buttons are simplified. When you click on an album, the cover will flip to show the song's rating.
Click the button in the upper left corner to enter the list page for category selection of songs. The list page is divided into private MHz and public MHz. Private MHz refers to songs recommended by Douban based on user habits and songs that users have collected, while public MHz recommends good songs with certain themes.
Click the settings button in the upper right corner, and the settings will appear in the form of a reminder message, which saves Douban an interface. Therefore, Douban FM has truly achieved minimalism, with only two pages, the song play page and the list page.
Douban FM's interface also adopts skeuomorphic design metaphors. For example, the background when no music is playing looks like a radio speaker, and the details on the back of the album are made to look like the back of a real CD.
Redesign of the music player 1. Product positioning and information architecture The redesign of this music player is positioned as a comprehensive music player that can meet the needs of users in various scenarios. It can discover good music online, collect and download songs, manage and play local music, search for music, etc.
Through the analysis of existing products, it is found that the information architecture is deep and the recommended music content is more. From the perspective of user needs, when listening to music aimlessly, users hope to have good music recommended to them and see what the latest popular music is. When listening to music with a purpose, users hope to quickly find their favorite music or local music, or search for the songs they want to listen to. When analyzing existing products, we found that many apps provide a dazzling array of recommendations such as various radio stations, collections, rankings, etc., which not only confuse users but also make the products bloated.
When redefining product functions, we hope to merge recommendations with similar functions, such as radio stations and collections, and make recommendations from different dimensions of themes and musicians. At the same time, we hope to flatten the information architecture and shorten the user operation path. Place less frequently used secondary actions in More to highlight primary tasks. The following is the summary of the information architecture:
2. Product prototype design After sorting out the product, the prototype is made as follows:
Refer to the information architecture and place the primary product navigation at the bottom of the screen and the secondary navigation at the top. Flat information architecture, no secondary pages except for collections. When users switch between the primary navigations, the first tab page, which is the page most frequently used by users, will be displayed by default. At this time, only one click is required to see the music list.
Existing music players usually enter a new page to play the song after clicking on the song. If the user wants to turn off the music after browsing other pages, he needs to enter the playback page again, which increases the page depth.
The operations and information of the play page, such as pause, previous song/next song, favorites, downloads and play progress, can be integrated into a relatively small area and placed at the bottom of the music player list page for easy operation at any time. If the user wants to view the lyrics, they can swipe up on the player to expand the lyrics.
When users are accustomed to clicking on the pop-up operation layer, they can also switch to another method. Swipe the song to the right, and the collection and download operations will appear on the next layer of the song. Of course, you will need some guidance when using it for the first time.
WeChat can be shaken, and of course the music player can also be shaken. When you hear a song you don’t like, just shake it to change it.
Using drop-down menus in the web interface is a good way to save space and increase scalability. Mobile terminals can also learn from this. For infrequently used secondary actions, they can slide out when clicked.
The search function is often in an awkward position in music apps. Which page should it be placed on? If it is placed on a certain page, then you can only search within the content of this page. Putting it on all pages is too long-winded, and there is no need to have a separate search page, after all, it is not a commonly used function. Considering that the search function is not often used, this time the search is placed in More. After sliding out vertically, you can also slide out the search box horizontally, and you can perform a global search on all online and local content.

3. Due to limited time, only some visual drafts were produced:
4. Use gestures to slide up and down to view the song list
Swipe up on the player to view lyrics, swipe down to close
Slide the song to the right and common operations will appear below
Click More, slide out the search and settings, click Search, slide left to display the search box
Shake your phone to play the next song
Other click actions
Author: Li Yue

<<:  Implementation example of Vue+Element+Springboot image upload

>>:  Summary of the deployment of Tomcat cluster and Nginx load balancing based on Docker

Recommend

Vue echarts realizes horizontal bar chart

This article shares the specific code of vue echa...

Vue implements click and passes in event objects and custom parameters at the same time

Just pass in custom parameters HTML <div id=&q...

Linux uses lsof/extundelete tools to restore accidentally deleted files or directories

Preface Linux does not have a prominent Recycle B...

The simplest MySQL data backup and restore tutorial in history (Part 2) (Part 36)

Data backup and restoration part 2, as follows Ba...

Detailed explanation of the order of Mysql query results according to the order of ID in in()

Detailed explanation of the order of Mysql query ...

Mysql get table comment field operation

I won't say much nonsense, let's just loo...

Nodejs-cluster module knowledge points summary and example usage

The interviewer will sometimes ask you, tell me h...

Vue implements a simple marquee effect

This article shares the specific code of Vue to a...

Use Rem layout to achieve adaptive

I have written an article about mobile adaptation...

Two solutions for Vue package upload server refresh 404 problem

1: nginx server solution, modify the .conf config...

vue+springboot realizes login verification code

This article example shares the specific code of ...

How to use docker to build redis master-slave

1. Build a Docker environment 1. Create a Dockerf...

How to allow remote connection in MySql

How to allow remote connection in MySql To achiev...

Simple CSS text animation effect

Achieve results Implementation Code html <div ...

How to use node scaffolding to build a server to implement token verification

content Use scaffolding to quickly build a node p...