做了一段時(shí)間的web，在移動(dòng)端都快忘光的時(shí)候，臨時(shí)被征用去做了兩個(gè)工具類的app，一個(gè)Android原生開發(fā)，一個(gè)H5開發(fā)，彼時(shí)已忘得七七八八，一邊看著規(guī)范一邊極力回憶做過的和分析過的移動(dòng)端界面，僥幸過關(guān)。所以痛定思痛，今天來分析一個(gè)app，畢竟設(shè)計(jì)趨勢(shì)一直在變，以不變應(yīng)萬變那是用來唬別人的，只有自己知道別人口中的中規(guī)中矩暗含的意思大概就是，你的界面實(shí)在是太土了。
愛屋及烏，作為云音樂的死忠粉，不管怎么說，網(wǎng)易的產(chǎn)品一生推，下面就是網(wǎng)易公開課的app界面解析咯。

1.首頁(yè)

index.png

先來說首頁(yè)，其重要性不言而喻，最能拿得出手的，最能吸引用戶的，一定要在首頁(yè)統(tǒng)統(tǒng)展現(xiàn)出來，這就如同“XX院”一個(gè)女子風(fēng)情萬種的說著：“客官，里面請(qǐng)～”反正首頁(yè)呢，該有的都有了，巴特，關(guān)于輪播廣告，個(gè)人淺鄙之見，是移動(dòng)端不太友好的一種展示方式，眾所周知，上下滾動(dòng)是手機(jī)用戶最常用的手勢(shì)，在當(dāng)今浮躁的社會(huì)，極少有人的目光會(huì)在某一個(gè)區(qū)域多做停留，不信各位看官隨便打開一個(gè)應(yīng)用，在無意識(shí)的情況下，就是趕緊往下滾幾屏看看后面都有什么，更何況這個(gè)輪播廣告數(shù)量居然有9個(gè)之多。既然是放在首頁(yè)的輪播，那勢(shì)必是這個(gè)app相當(dāng)引以為豪的內(nèi)容，所以何必羞羞答答的隱藏起來，直接展示就好。
頁(yè)內(nèi)導(dǎo)航的圖標(biāo)重心不穩(wěn)，看上去大小不一致，當(dāng)然啦，網(wǎng)易的一干設(shè)計(jì)師們一定不會(huì)犯這么低級(jí)的錯(cuò)誤，但視覺上的統(tǒng)一也很重要耶。
因?yàn)檫@不是app解析的重點(diǎn)，平時(shí)在工作中也怕自己太糾結(jié)于圖標(biāo)而投入過多精力，比較良好的交互方式更重要，但還是稍微改了一下，自我感覺整齊舒服了很多。

修改前后圖標(biāo)對(duì)比.png

關(guān)于推薦的內(nèi)容，因?yàn)楹荛L(zhǎng)，需要滾N屏，就不一一截圖了，但滾到底部后很有意思，是兩組展現(xiàn)形式不同的內(nèi)容——“訂閱推薦”和“專題推薦”，因?yàn)榇藭r(shí)我是尚未登錄狀態(tài)的，所以這里所謂的推薦應(yīng)該是能極大的激起用戶興趣的內(nèi)容，訂閱我打開看了一下，確實(shí)干貨滿滿，這說明網(wǎng)易公開課在把握用戶心理層次做的還是相當(dāng)?shù)轿坏?，目?biāo)用戶是帶有求知欲和探索欲的群體（我例外，我就看看這個(gè)app界面……，偶爾看下感興趣的內(nèi)容），所以看訂閱推薦的幾個(gè)涵蓋美食／物理／歷史／文學(xué)等等，還是傳達(dá)了知識(shí)傳播的理念的。

bottom.png

2.頁(yè)內(nèi)導(dǎo)航

好了，下面從頁(yè)內(nèi)導(dǎo)航開始，一個(gè)個(gè)排隊(duì)來，先說“最熱”和“最新”，這兩個(gè)頁(yè)面是相同的，都是那種無限滾動(dòng)的瀑布流，如下：

最新.png

但我唯一不能理解的是為何不給圖片上的文字加上半透明黑的蒙版背景？如果說圖片都是小編控制也就罷了，可以找些深色背景的圖片，但下面這種

疊加在淺色背景上的文字.png

閱讀起來真的好吃力哇，再說你們這個(gè)app針對(duì)的是青年人，也要關(guān)懷一下我們老年人哇。所以蒙版背景這種形式，土是土了點(diǎn)，但在更好的展示形式出來之前，絕壁不能省。
當(dāng)然了，這是小細(xì)節(jié)，也罷，不影響產(chǎn)品，但我最大的趕腳就是“最新”這個(gè)頁(yè)面的存在很雞肋，因?yàn)榫W(wǎng)易公開課的內(nèi)容五花八門，絕大多數(shù)人關(guān)注的是自己希望了解到內(nèi)容，所以更新的那一堆，幾乎就不是根據(jù)我訂閱的類型分析過的，從里面扒拉好久才找到興趣點(diǎn)，換句話說，我們來網(wǎng)易公開課，不是為了掃幾眼新聞消磨時(shí)間的，最熱或許可以看看，因?yàn)槭侨藲庾罡叩?，一定程度上代表了?nèi)容的品質(zhì)，至于最新嘛，拿掉也無關(guān)痛癢。

直播的界面同上，縱使“直播”現(xiàn)在是風(fēng)口浪尖炙手可熱，網(wǎng)易試新的心情表示理解，但是，但是，隨便點(diǎn)開幾個(gè)看了下，直播的內(nèi)容相比較其他專題，真的是質(zhì)量堪憂。直播，不是這款app的亮點(diǎn)，似乎直播內(nèi)容下用戶的評(píng)價(jià)也和我類似，“亂亂的，不知道在說什么”“音質(zhì)差，聽不清”等等，另外，直播哎，不要欺負(fù)我們不懂好吧，能快進(jìn)的是直播嘛，這明明是“網(wǎng)易直播”的內(nèi)容回放，何必湊那個(gè)熱鬧冠以直播的名頭呢？嗯，名不副實(shí)，又可以砍掉一塊。

頁(yè)內(nèi)導(dǎo)航剩最后一個(gè)，“分類”，其實(shí)，這才是最重要的頁(yè)面，要從若干分類中篩選出自己所需，這個(gè)需求實(shí)在太強(qiáng)烈。個(gè)人甚至感覺首頁(yè)的頁(yè)內(nèi)導(dǎo)航直接改成分類更加合適。

分類.png

既然說分類重要，那我們來看看做的怎樣，默認(rèn)加載頁(yè)還好，當(dāng)進(jìn)入某個(gè)具體分類頻道（以心理為例）后，那個(gè)“篩選”功能著實(shí)讓我凌亂了一把，因?yàn)楫?dāng)前已經(jīng)是心理的分類頻道了，所以當(dāng)我試著用篩選時(shí)，第一反應(yīng)就是對(duì)當(dāng)前頻道的內(nèi)容進(jìn)行篩選，沒毛病啊，可當(dāng)我再選了“數(shù)學(xué)”時(shí)，結(jié)果并不是我想象中的“心理??數(shù)學(xué)”，而是刷新當(dāng)前頻道，直接變數(shù)學(xué)了，所以我把下拉面板的數(shù)學(xué)和分類頁(yè)的數(shù)學(xué)加了個(gè)雙向箭頭，感情您這不是篩選，是分類導(dǎo)航啊。當(dāng)然了，你還不能在這個(gè)下拉面板中進(jìn)行所有的導(dǎo)航，比如“公開課策劃”的所有頻道，還得從分類的默認(rèn)加載頁(yè)進(jìn)去，然后在某具體的頻道下的篩選面板只有“公開課策劃”的，來來來，這個(gè)交互是哪位高人做的，一定是有想法，我不才，猜不透，求解～
這里的亮點(diǎn)是針對(duì)一個(gè)主題的單集視頻和多集視頻卡片的樣式不同（藍(lán)框框出的區(qū)域），單集的沒有后面的層次感，這種視覺引導(dǎo)比單純的文字描述直觀，很喜歡。

3.視頻播放

來看視頻播放頁(yè)

video play

因?yàn)轫?yè)面好長(zhǎng)，所以只截取了有代表性的部分。關(guān)于移動(dòng)端，縱向手勢(shì)的應(yīng)用一定優(yōu)于橫向手勢(shì)，關(guān)于這個(gè)有機(jī)會(huì)回單獨(dú)寫篇文章，很有意思，但像這種展示“全部課程”就太適合橫向手勢(shì)了，因?yàn)橛脩艋爻料滦膩?，左右滑?dòng)去查看，當(dāng)然，也同時(shí)提供了底部彈層的列表。而且當(dāng)滑到某一極限時(shí)，頂部視頻播放窗口消失，增加查看頁(yè)面的視口，視頻縮略成浮動(dòng)層（紅線框出的區(qū)域）以便切換。關(guān)于這種頁(yè)面下滑時(shí)頂部區(qū)域消失以增加信息量的方式最近app用的也比較多，是一種根據(jù)心理模型得出的一個(gè)很友好的交互方式，不過這個(gè)app根據(jù)自己的產(chǎn)品性質(zhì)做了改進(jìn)，體驗(yàn)還是不錯(cuò)的。

關(guān)于跟帖，這里可比云音樂冷清太多了，只是不解的是，既然寫跟帖是跳轉(zhuǎn)到一個(gè)單獨(dú)的頁(yè)面，那搞個(gè)輸入框就為了當(dāng)入口用？嗯，一定是恁們網(wǎng)易開發(fā)人員充足，多做個(gè)頁(yè)面無所謂，換做是我，該被項(xiàng)目組長(zhǎng)嫌棄了，“什么？還要多個(gè)頁(yè)面出來！”

跟帖.png

另，這里有個(gè)bug啊，就是我回了2帖，內(nèi)容都顯示了，全部跟帖數(shù)量還是無變化，這個(gè)錯(cuò)誤，低級(jí)了點(diǎn)……

4.訂閱

說完頁(yè)內(nèi)導(dǎo)航，下面就是底部導(dǎo)航咯，訂閱，也是主要功能之一。

訂閱

同樣，訂閱也有三個(gè)頁(yè)內(nèi)導(dǎo)航，視頻分類直接跳轉(zhuǎn)到分類的默認(rèn)加載頁(yè)，添加訂閱頁(yè)面分為左右兩欄，左側(cè)為頂級(jí)分類（針對(duì)這款app，也是末級(jí)分類），右側(cè)對(duì)應(yīng)分類下的數(shù)據(jù)列表。
移動(dòng)端要做好菜單樹的功能還是需要費(fèi)點(diǎn)功夫的，根據(jù)分類的層級(jí)數(shù)，每一層級(jí)的數(shù)量以及操作不同來選擇適合的形式，由于公開課app層級(jí)結(jié)構(gòu)簡(jiǎn)單，數(shù)據(jù)量小，所以這種展現(xiàn)形式還是適合的，添加/取消訂閱操作也方便，成功訂閱后會(huì)有一個(gè)是否推新的彈窗。成功添加后的灰色圖標(biāo)設(shè)計(jì)可以優(yōu)化一下。因?yàn)榛疑土辽鰧?duì)比時(shí)，通常傳達(dá)的意思是不可用或者需要被弱化的操作，而這里，需要表示成功的狀態(tài)。

訂閱狀態(tài)圖標(biāo)修改.png

再來看我的訂閱，也是簡(jiǎn)單的列表，名稱+更新提醒，不過這里的已開啟是灰色的，不如改成下面這種綠色線框+對(duì)號(hào)的形式。原因同上。

推送消息圖標(biāo).png

5.課間

這里，云課堂完全模擬了課堂，搞了個(gè)“課間”出來，不過回想我們的學(xué)生時(shí)代，課間就是侃大山嬉鬧嘛，咳咳，這里的課間是一些可參與的話題討論。先來看界面，卡片形式，左右滑動(dòng)進(jìn)行卡片的前后切換，還好，雖然不是特別新穎的形式，但相比之前的頁(yè)面輕松了許多。

課間.png

手賤賤的翻到了最后一張，然后到“查看更多課間內(nèi)容”，隨便來個(gè)“嗶嗶”看看咯，這里把“被贊過”做的最大最醒目，也是為了激發(fā)參與討論的積極性吧。配色上似乎稍微改進(jìn)下最好，大的灰色純色底塊總感覺是產(chǎn)品要上線之前，產(chǎn)品經(jīng)理突然說，快快快，這里需要把“X人贊過”搞得醒目些，然后設(shè)計(jì)師尚未來得及思考表現(xiàn)形式，搞了下布局就匆匆上線了。

6.小彩蛋

這個(gè)功能是因?yàn)槲翌l頻刷開這個(gè)app，然后看到的。金光閃閃的獎(jiǎng)?wù)乱幻?，就是激?lì)用戶的手段咯。

彩蛋.png

好了，app本身不復(fù)雜，就寫到這里，即使有這樣那樣的小問題，染鵝，這仍是一款良心制作，原因？當(dāng)然是內(nèi)容為王啊。憑心而論，真的一款app的界面對(duì)用戶有沒有影響，肯定是有，但絕沒有設(shè)計(jì)師們想象的影響力多么深遠(yuǎn)，一個(gè)優(yōu)異的界面救不了一個(gè)爛的app，當(dāng)然，一個(gè)好用的app我們會(huì)忽略很多界面和交互的問題，既然如此，那我們?yōu)槭裁催€要分析app界面，吹毛求疵？還做什么優(yōu)化？答案是：當(dāng)然有意義啊，我可不想有一天自己的做的app也掉入同樣的坑，然后被人指出來……其實(shí)絕大多數(shù)設(shè)計(jì)師做的都是敏捷開發(fā)，前期盡量一次成型，因?yàn)楹笃跊]有修正錯(cuò)誤的機(jī)會(huì)，流程上能跑通，界面不那么丑，不引起用戶誤會(huì)，就已經(jīng)算合格了，嗯，這是正解。