起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)余音，一款能觸動(dòng)我傷感神經(jīng)的音樂App
連續(xù)周五周六周日周一加班之后的周二，還算準(zhǔn)時(shí)的下班回家，給自己炒了一盤混搭特色的菜。就著配飯視頻，吃的肚皮圓滾滾，再來個(gè)飯后大蘋果。這大概就是我的不加班日常。
飯后看到最美應(yīng)用推薦了——余音，一款音樂App，被它簡潔的界面吸引，決定下載玩玩兒。主打功能是每期歌單，配上文藝唯美范兒的圖片和一段文藝。
翻到一段感興趣的文字，開始播放這期的歌曲，放下手機(jī)專注品著旋律、聽著歌詞，不知是被不算華麗的聲音還是那質(zhì)樸的歌詞感動(dòng)，就這樣陷入久違的傷感情緒里?；蛟S余音就是這樣，每期歌單就是一種情緒，而我們可以跟隨它去釋放或者說緬懷這種情緒。
傷感終究是一時(shí)的，抱著一些理性，繼續(xù)分拆這款A(yù)pp的交互設(shè)計(jì)。
一、功能層級(jí)結(jié)構(gòu)
余音，有兩種視圖——音（每期歌單）、樂（每期樂人），二者之間可相互跳轉(zhuǎn)。
在音、樂的主界面，分別展示最新一期的歌單/樂人。頂部導(dǎo)航欄的右上角均有三個(gè)圖標(biāo)，其中前兩個(gè)icon對(duì)應(yīng)的都是已下載的歌單、播放界面。點(diǎn)擊最后一個(gè)icon，可進(jìn)入列表界面，分別對(duì)應(yīng)往期歌單列表、往期樂人列表。層級(jí)結(jié)構(gòu)如下圖：
二、交互分析
1、音-每期歌單
每一期歌單包含的信息有：配圖、與主題相應(yīng)的一段文字、歌曲列表
交互細(xì)節(jié)：
1）首屏內(nèi)容第一次打開余音，那一期的歌單首屏界面上 只顯示了配圖、與主題相應(yīng)的一段文字，沒看到歌曲列表。這個(gè)時(shí)候我有點(diǎn)蒙：不是音樂APP么，怎么沒看到歌。不過界面上有個(gè)較弱的文字顯現(xiàn)出來，提示我左滑可以看下一期，按著這個(gè)提示操作，發(fā)現(xiàn)下一期歌單首屏界面底部顯示了帶有序號(hào)1的歌曲，我才意識(shí)到可以上滑看這個(gè)歌單的更多內(nèi)容。
為什么我沒有第一時(shí)間反應(yīng)到可以上滑呢？可能有幾個(gè)原因：
- 配圖和那段文字搭配排版正好，界面上沒有其他任何元素提醒我還有更多內(nèi)容在界面下方；
- 左滑看上一期的提醒文字吸引了我的注意力，無暇想其他
后來我想，這樣的學(xué)習(xí)成本需要降低一些么？如果能夠每一期歌單的首屏，都能看到至少一首歌曲，或許能緩解這種問題，不過這樣對(duì)文案的長度會(huì)有限制。
2）翻頁手勢(shì)前面提到，在第一次打開余音時(shí)，會(huì)有較弱的文字提示“左滑看上一期”。左右滑動(dòng)的翻頁手勢(shì)操作，較為常見，學(xué)習(xí)成本不算高，不過在第一次使用時(shí)提示一下也很有必要。
3）歌曲列表播放中的歌曲，文字顏色和圖標(biāo)來標(biāo)示
2、樂-每期樂人
采用圖文、音樂混排的方式，來介紹音樂人。他們做著原創(chuàng)的音樂、相對(duì)小眾，通過這樣的介紹可以了解他們的故事，由此可以看出余音的情懷。
交互細(xì)節(jié)：
1）播放文章中的歌曲基本上每篇只配一首歌曲，可直接播放，播放完畢之后停止，沒有下一首接著播，這樣在聽歌的流暢性上不夠好。
如何解決播放流暢性的問題呢？首先考慮用戶播放文章介紹歌曲的場(chǎng)景：
- 對(duì)新手用戶，剛使用余音，看到有音樂人的介紹，可能會(huì)按照順序?yàn)g覽、有可能挑選感興趣的名字看他得介紹。用戶看到一篇文章中的A歌曲，點(diǎn)擊播放；看完又去看另一篇文章，這個(gè)時(shí)候他可能想繼續(xù)播放A歌曲，將另一篇文章中的B歌曲稍候播放；也可能想直接切換播放B歌曲。
- 對(duì)老用戶，更關(guān)注最新的音樂人介紹，可能只是播放這一首歌曲，播放歌曲時(shí)可能去坐別的事情，過了很久才意識(shí)到歌曲已停止播放。
根據(jù)這兩種場(chǎng)景，想到兩種解決方式：
- 如果點(diǎn)擊播放音樂人文章中的歌曲，可將每期音樂人的歌曲按順序依次加入播放列表（優(yōu)先級(jí)高）
- 提供插入播放隊(duì)列的功能，在當(dāng)前播放歌曲的下一首（優(yōu)先級(jí)低）
2）進(jìn)入、離開此界面時(shí)的轉(zhuǎn)場(chǎng)動(dòng)效從音-每期歌單視圖，切換至樂-每期樂人視圖，采用順時(shí)針翻轉(zhuǎn)動(dòng)效；離開樂視圖、回到音視圖，采用的是逆時(shí)針翻轉(zhuǎn)動(dòng)效，整體效果前后一致。
3、往期歌單列表、樂人列表
- 列表內(nèi)容往期歌單、樂人的列表，包含了幾個(gè)信息：序號(hào)、標(biāo)題、內(nèi)容的第一行文字，按倒敘排列
- 下拉刷新顯示最后更新的時(shí)間，這個(gè)時(shí)間可以用來考慮是否繼續(xù)刷新、也可以判斷剛剛的刷新是否成功。
- 離開列表頁點(diǎn)擊頂部透明度更高的位置，可隱藏列表界面。此時(shí)有一個(gè)舒緩的動(dòng)效，是列表界面會(huì)向中心逐漸收攏消失。
4、播放界面
1）封面唱片圖片+留聲機(jī)圓盤的搭配，顯得挺有格調(diào)
2）播放、暫停、播放進(jìn)度在界面底部用最明顯的圓形圖標(biāo)來表示播放、暫停按鈕，播放進(jìn)度也展示在此按鈕上，這種表示方式直接、明顯、節(jié)約空間。
3）切換歌曲
方式1：點(diǎn)擊向右的箭頭（可見的操作方式）
方式2：左右滑動(dòng)切換下一首、上一首歌曲（不可見的操作方式，但是與主界面的切換一直，學(xué)習(xí)起來也搞笑）
方式2的缺點(diǎn)是，用戶只是嘗試左右滑動(dòng)、沒有完全切換至上一首/下一首歌曲，再自動(dòng)回到當(dāng)前歌曲時(shí)，仍然會(huì)重新開始播放（即使滑動(dòng)幅度很?。?。當(dāng)用戶只是在探索操作方式、或者偷瞄一眼了解下一首歌曲時(shí)什么時(shí)，這種靈敏的處理方式就太坑了。
4）切換播放模式默認(rèn)隨機(jī)播放，可依次切換至順序播放、單曲播放。
5）單曲離線余音將單曲離線功能藏的比較深，點(diǎn)擊icon “…”才能展示?；蛟S可以拿出來更突出一些？還是說為了讓界面簡潔，不得不收起來？
6）分享支持微信好友、朋友圈兩種方式。
7）離開播放界面與在往期列表界面一樣，可以點(diǎn)擊頂部透明度較高的矩形區(qū)域，來離開播放界面。
5、已下載的歌單
1）編輯歌單，目前只支持刪除歌曲
方式1：
在歌曲所在行，左滑操作，即可在右側(cè)顯示“刪除”按鈕，再次點(diǎn)擊即可刪除。刪除過程有一個(gè)平滑的動(dòng)效，該歌單所在行從下向上逐漸消失。
特點(diǎn)是操作高效，缺點(diǎn)是交互操作方式不可見，如果用戶對(duì)iOS較為熟悉，通過摸索可發(fā)現(xiàn)。
方式2：
點(diǎn)擊編輯icon，每個(gè)歌曲前面顯示“-”icon，點(diǎn)擊此icon，顯示刪除圖標(biāo)，點(diǎn)擊即可刪除。
這種方式，編輯icon處于較明顯的位置，容易吸引用戶的注意力去點(diǎn)擊摸索其作用。它的缺點(diǎn)是操作步驟更多，不過可以與方式1形成互補(bǔ)。
三、設(shè)計(jì)模式和設(shè)計(jì)原則總結(jié)
1、操作反饋提示
余音的反饋提示采用在頂部覆蓋導(dǎo)航欄的方式。前幾周分享了一篇《移動(dòng)應(yīng)用反饋提示的幾種方式》，感興趣的朋友可前往查看。
2、一致性的設(shè)計(jì)原則
- 轉(zhuǎn)場(chǎng)動(dòng)效一致
- 離開浮層界面的操作方式一致
- 列表中當(dāng)前播放歌曲/歌單/樂人的顯示樣式一致
四、最后
簡潔的設(shè)計(jì)，通常會(huì)增加學(xué)習(xí)成本，如果做到平衡很難。見識(shí)更多優(yōu)秀的設(shè)計(jì)，才能獲取更多的靈感，共勉之！
#專欄作家#
青溪Joanna，微信公眾號(hào)-青溪札記（qingxizhaji），交互設(shè)計(jì)師一枚，喜歡體驗(yàn)各種App，關(guān)注社交、在線旅游、O2O、工具類產(chǎn)品；擅長需求分析、交互設(shè)計(jì)，有一定前端開發(fā)經(jīng)驗(yàn)；業(yè)余時(shí)間喜歡網(wǎng)球、ukulele、簡筆畫，正在努力攢技能。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，不得轉(zhuǎn)載。
有理想有矯情，太慢，不會(huì)用