音樂應(yīng)該是一個讓人非常放松的東西，所以音樂界面的設(shè)計也應(yīng)該盡可能地呈現(xiàn)讓人舒服和舒適的感覺，下面我們跟隨小編一起來了解一下音樂界面設(shè)計的相關(guān)資料吧。

音樂界面設(shè)計之確定所需要的操作：

　　1、界面設(shè)計的注意事項

　　2、如何搜集靈感

　　3、設(shè)計界面

　　3、切圖后導(dǎo)入工具軟件

　　4、制作動效

　　音樂界面設(shè)計的步驟：

一、第一步

　　首先確認這個音樂界面小頁面的一些界面設(shè)計規(guī)范設(shè)置

　　字體：Helvetica Neue LT Pro Black / Bold / Light

　　字號：標題40px 內(nèi)容32px 其他24px

　　顏色：主字色#475266 輔助字色#acb3bf 主色調(diào)#61d5f4 - #58f2f4

（圖片來自網(wǎng)絡(luò)）

二、第二步

　　1、首先制作banner的切換動效。將兩個banner放入AE排列好，分析動畫的運動，首先第一個banner滑動走有位置，Y軸旋轉(zhuǎn)，透明度的變化，位置從右到左，Y軸旋轉(zhuǎn)從0度到20度，需要打開3D模式，透明度從100到0。

　　2、第二個banner位置從右到左，Y軸旋轉(zhuǎn)從-20度到0度，透明度從0到100，在運動完成后會發(fā)現(xiàn)這個效果過于生硬，所以可以將其Y軸旋轉(zhuǎn)繼續(xù)運動 “5度 - 0度 - 3度 - 0度”，讓其有一個回彈效果。

　　3、檢查列表效果。列表的上劃涉及到的動效有幾個動畫，列表的位置從下往上運動，在運動的同時每個小卡片會有一個X軸旋轉(zhuǎn)的動效，當運動到banner的時候，banner會翻轉(zhuǎn)進行消失。

　　難點解析：

　　首先是列表的運動，從下面滑動的動效很簡單，但是需要注意第三排，由于后面的動畫需要利用到第三個中的唱片，名字和封套，所以我們需要將其進行單獨處理，但是我們需要先做X軸旋轉(zhuǎn)，不能將第三排的4個組件單獨進行處理，需要讓唱片，名字和封套跟隨其基礎(chǔ)的組件。

　　運動到banner的時候，banner的X軸旋轉(zhuǎn)的同時需要將位置往上挪動，就可以有向上翻轉(zhuǎn)的效果，并且在翻轉(zhuǎn)的時候需要將其透明度降低到0。

（圖片來自網(wǎng)絡(luò)）

三、第三步

　　首先是點擊后的封套會Y軸旋轉(zhuǎn)消失，然后是字和唱片會放大后挪動到相應(yīng)位置，然后會加上水波動效和時間變化動態(tài)效果等。

　　難點介紹：

　　1、首先介紹水波的動效。我們可以創(chuàng)建一個矩形，修改其顏色，然后加上“效果 - 扭曲 - 波形變形”的動畫，調(diào)整其參數(shù)即可完成水波動效。

2、然后是時間的變化效果，可以復(fù)制粘貼文本

　　rate = 1;

　　clockStart = -4;

　　function minZero(n){ if (n function secZero(n){ if (n clockTime = Math.max(clockStart + rate* (time - inPoint),0);

　　t = Math.floor(clockTime);

　　min = Math.floor((t%3600)/60);

　　sec = Math.floor(t%60);

　　minZero(min) + ":" + secZero(sec)

　　需要注意的是clockStart 為其開始的時間。

　　3、歌詞的動效。這里涉及到蒙版，需要復(fù)制2層文字，將上層的文字改成藍色，后層文字改成灰色，然后將上層的文字用蒙版的變化去做歌詞的動效。

其實有了小編為你介紹的以上音樂界面設(shè)計的相關(guān)步驟之后，相信一定可以讓你涉及出更好看且更有特色的音樂界面哦!