top of page
music app UI-10.png

Music Player

music app UI-07.png

​針對音樂播放器外觀設計的自主練習。主要是練習配色、排版,和繪製擬物化按鍵的技巧。並思考音樂播放器基本功能的視覺呈現方式。

The visual design exercise of music players. Mainly to practice color matching, typesetting, and making a Neumorphic buttons. And rethinking the visual effect of the music player.

UI Practice

music app UI-05.png

Track Screen

Progress Bar

The playback progress bar is not only represented by a common linear indicator but also adds a color change of the background to make the screen more lively.

Play Button

Use the popular Neumorphism way to make the play button and the jump button. This button design can make the screen more modern and concise and has a metaphorical effect like physical buttons.

But the disadvantage is that reducing the contrast between the button and the background in pursuit of a cleaner interface may make the buttons less conspicuous. Therefore, I selected a high-contrast color for the icon to make the functions clearer.

Volume

In addition, to control the volume with physical buttons of the mobile phone or earphones, you can also adjust the volume directly on the sound waves on the main screen by dragging.

music app UI-06.png
​Button Focus
Play Methods

Three playback methods: Order, Shuffle, Loop

In the Focus state, the button presents a concave effect.

Drag to decrease the volume
Drag to increase volume
music app UI-08.png
music app UI-09.png
Volume 100 %
Volume 50 %
music app UI-11.png

Order

music app UI-12.png

Shuffle

music app UI-13.png

Loop

music app UI-10.png
music app UI-07.png

Play List

bottom of page