單曲循環(huán)是我使用音樂軟件經(jīng)常點擊的一個按鈕，多次使用各大主流音樂網(wǎng)站及APP，發(fā)現(xiàn)各個界面的單曲循環(huán)還真有很大差別及體驗，作為經(jīng)常一首歌幾十遍循環(huán)的資深重度單曲循環(huán)使用患者，就做個關(guān)于單曲循環(huán)按鈕的比對吧！沒有比對沒有發(fā)現(xiàn)！沒有發(fā)現(xiàn)沒有改變！

80后，90后應(yīng)該都用過千千靜聽？00后開始就是酷狗的天下了，而10后更多人開始用網(wǎng)易云音樂，在這個富足的年代，情感生活能夠讓人獲得更舒適的感覺，音樂正是其中之一，因此播放器網(wǎng)站或者軟件是大部分人們電腦里都會有的一個產(chǎn)品。

這些產(chǎn)品雖然經(jīng)過許多的更新?lián)Q代，但是他們的主要功能的圖標都沒怎么變過，播放主要還是圓里有個三角，暫停是兩條線，而作為喜歡一首歌幾十上百遍的循環(huán)的交互時代，單曲循環(huán)對交互時代來說是一個很重要的功能呢，相信不少人也都喜歡點這個按鈕吧？

而在交互時代多年的UI設(shè)計教育經(jīng)驗中，倒是也經(jīng)歷過不少音樂播放器的UI設(shè)計項目，而在學員的實訓項目中，自然也是少不了這些的，而交互時代針對各大互聯(lián)網(wǎng)企業(yè)所獨力開發(fā)出的尖端課程，就是在這么多項目中總結(jié)出來的，能夠讓學員在短時間內(nèi)熟練掌握設(shè)計技術(shù)，畢業(yè)之后可以即刻就業(yè)，毫無過渡期。

而音樂類產(chǎn)品就是這門課程中的一部分，今天，交互時代就簡單與大家分享一下關(guān)于單曲循環(huán)這一按鈕的UI設(shè)計構(gòu)想。

首先，跟隨交互時代來看看現(xiàn)在主流音樂產(chǎn)品里單曲循環(huán)的放置吧

再來看鼠標點擊單曲循環(huán)按鈕時的示意圖，見下圖

圖片里的手就是我們的鼠標，可以說每一次我們使用單曲循環(huán)，都需要瞇著眼睛看清楚中間的那個1……為了更直觀的顯示出該按鈕的識別度，交互時代特別作了個比對表：

想了解更多有關(guān)ui設(shè)計知識培訓班請關(guān)注ds798/class-ui-basis，咨詢熱線；咨詢QQ：；或者關(guān)注微信訂閱號“交互時代”；

接下來，大家一起來看看各個音樂APP的界面UI設(shè)計吧。

下面這張音樂產(chǎn)品APP的截圖是在用戶點擊單曲循環(huán)后出現(xiàn)的界面，其中QQ音樂的提示最明顯，而其他產(chǎn)品的提示文字則更快了一些，容易讓人忽略掉。

大家可以看到，各大音樂APP產(chǎn)品的單曲循環(huán)按鈕基本上差別不大，并且擺放的位置也很相似，而細微的區(qū)別大家可以看下面的對比表格。

交互時代最后總結(jié)：

單曲循環(huán)可以說是許多人會用到的按鈕，所以我們在設(shè)計這個按鈕的時候都要更細心的觀察與嘗試它的易用性和識別性，很多人也會在想，為什么不將它獨立出來呢？這就好像要我們把許多諸如下一首、上一首這類的按鈕都獨立出來一樣，是不必要的，并且如果我們操作錯誤，則還要再重新進入獨立頁面，會降低用戶體驗。

當然，今天交互時代分享的這個單曲循環(huán)按鈕只是個個例，但是在許多產(chǎn)品的按鈕上，我們都可以用這種方法進行思考，怎么操作，怎么擺放，是否獨立？以及提示類信息的顯示時間、顯示位置等等。

當我們將每一個細節(jié)都設(shè)計完善，那將是一個多么棒的UI設(shè)計。

請聯(lián)系網(wǎng)站客服，了解詳細的優(yōu)惠課程信息~

優(yōu)質(zhì)、權(quán)威、便捷、省心