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

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

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

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

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

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

再來(lái)看鼠標(biāo)點(diǎn)擊單曲循環(huán)按鈕時(shí)的示意圖，見(jiàn)下圖

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

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

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

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

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

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

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

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

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

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

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