圖解電影?重設(shè)計



圖解電影

我是圖解電影的粉絲。因為感覺看一部電影有時候太花費時間,就經(jīng)常用這個APP節(jié)約時間。只有看圖解感覺好看才會去搜索完整電影來看。不過在使用過程中,感覺APP有很多不妥,于是就在抽空余時間做了一個重設(shè)計表達了一些自己的想法。也希望圖解電影未來能做得更好,手動比心。(頁面比較多,我會盡量用圖片展示的。)


產(chǎn)品介紹

名稱:圖解電影

產(chǎn)品版本:v5.1.1

使用平臺:Android 5.02?

產(chǎn)品特色:高清在線電影/電視劇圖文解說,幾分鐘便可看完一部電影,睡前飯后觀影神器。

截圖來源:

原圖:尺寸1080x1920? ? ? ? ? 改版:尺寸720x1280



信息結(jié)構(gòu)圖


圖解電影功能結(jié)構(gòu)圖(部分)

因為功能和展開實在非常的多,梳理了部分主要功能,這次重設(shè)計也主要是針對部分所存在的問題做的。


頁面重設(shè)計和一些想法

1.首頁?

存在問題:

1.首頁因為很多不同的欄目而變得很長,但是卻沒有可以達到特定欄目的功能,只能依靠用戶的不?;瑒觼淼竭_用戶感興趣的欄目,太過考驗用戶耐心。內(nèi)容區(qū)展示采用的網(wǎng)格列表不如卡片來得直接,美觀。

2.“換一大波推薦”按鈕每次點擊獲得4個新的推薦影片,效率不高,而且如果看到了想要看的影片,但是因為手抖又多按一下,就得等很久才能再見(別問我為什么知道)。不如滑動刷新來得簡便安全。

3.“定制主頁”按鈕(為主頁添加或減少欄目)在最下方。這點,大部分用戶都不會有那么多的耐心滑動到7屏去找到這個按鈕(我也是最近才發(fā)現(xiàn)的),想必點擊率應(yīng)該蠻低的。

原首頁部分截圖

重設(shè)計:

1.增加一個Scroll bar,放入不同欄目標題和原icon。用戶可以更容易的在首頁找到自己感興趣的欄目,這樣下滑即可在自己感興趣的欄目瀏覽更多,左右滑動切換不同欄目。把定制首頁按鈕用一個加號代替放置在Scroll bar上方。

2.改用卡片的方式來展示內(nèi)容。(因為增加了在Z軸上的高度,是不是更有點擊欲望了)。


首頁重設(shè)計

2.側(cè)邊欄菜單

存在問題:

1.用戶等級名稱“伸手黨”太負面,可能會引起用戶不滿。(用戶大爺用你軟件,高興的時候還能給個好評或者給個紅包。怎么就伸手黨了。)

2.金幣/粉絲/關(guān)注所占區(qū)域太大,頭像位置也極端靠左。整個排版是混亂的,沒有規(guī)范。

3.“設(shè)置”與“開啟護眼”兩個按鈕太不明顯。都是可點擊區(qū)域,但是“設(shè)置”和“開啟護眼”和其他可點擊區(qū)域的字號顏色都相差太大。這容易使用戶對于是否可以點擊產(chǎn)生懷疑。也不知道為什么會那樣排版,如果是因為內(nèi)容太多,底部導(dǎo)航欄會遮住一部分,完全可以將他們固定在底部啊。


側(cè)邊欄對比(左原版,右重設(shè)計)

重設(shè)計:

1.重新設(shè)計了側(cè)邊欄,減少了“金幣/粉絲/關(guān)注”所占區(qū)域,調(diào)整頭像居中。并且了去掉原用戶等級稱號(或者可以更改為更為合適的稱號也可以)。

2.將“設(shè)置”和“開啟護眼”這兩個按鈕移入側(cè)邊欄固定在側(cè)邊欄底部,同時將他們的字號和顏色與其他可點擊按鈕保持一致。

3.分類

存在問題:

1.通過點擊出現(xiàn)篩選欄并沒有收回按鈕,只有通過下滑下方內(nèi)容才能收回。這樣一是容易引起誤操作,二是會對想收回的用戶造成一定困惑。

2.很難發(fā)現(xiàn)篩選欄里的tab可以滾動,沒有一點提示。

3.卡片的排版不美觀合理。


分類頁面對比(左原版,右重設(shè)計)

重設(shè)計:

1.增加收回按鈕,去除不可點擊又意義不明的‘排序’。并為每個可滾動tab增加一個三角指示。為篩選欄增加一點陰影與底層分離開。

2.重新排版卡片內(nèi)信息并增加一個淺色描邊

4.搜索

存在問題:

1.搜索流程繁瑣,需三次點擊跳轉(zhuǎn)才能開始輸入。這個是非常難受的。

搜索流程的使用一般分兩種:一是當用戶帶著一定目的性來的時候,很清楚自己想要什么,這個時候搜索流程應(yīng)該盡量快捷精確的幫助到用戶,而不是設(shè)置障礙和分散用戶注意力。二是瀏覽了一會沒有發(fā)現(xiàn)自己想要的東西,如果沒有離開就會用到搜索框?qū)ふ蚁胍膬?nèi)容。這個時候應(yīng)給予用戶一定的信息(如熱門搜索和歷史記錄)幫助他??傊龅娇旖莺筒贿^分干預(yù)。

2.熱門搜索排名上升下降難分辨(不要懷疑你的視力,它真的就那么小而不清楚),這樣的信息我得瞇著眼睛才能看清。

3.存在干擾用戶搜索的元素。這些元素完全可以放在首頁供用戶瀏覽的,而不是在用戶有自己的目的和沒有瀏覽意圖后再呈現(xiàn)出來。

搜索流程

重設(shè)計:

1.簡化搜索流程到在首頁一次點擊即可開始輸入。點擊一次后即可彈出小鍵盤開始輸入,以前的搜索框內(nèi)文字設(shè)為背景就好,在用戶開始輸入的時候立即消失。并且把搜索范圍“圖解”與其他可點擊保持一致(不應(yīng)該讓用戶考慮是否可以點擊)

2.為排名下降上升增加顏色。用紅色和綠色來表示升降關(guān)系,用戶不用思考也能理解信息。

3.去除部分干擾項。把以前的干擾項用歷史記錄代替,統(tǒng)一可點擊和不可點擊字體的顏色和字號并修改不可點擊的字體的顏色以便區(qū)分。

搜索重設(shè)計

6.詳情頁

存在問題:

1.在點擊“下載”后雖然上方會出現(xiàn)一個已加入下載的提示,但是下載按鈕沒有任何變化,而用戶將視覺焦點放在下載按鈕上的時候,上方的提示很容易被忽視,造成用戶二次或多次點擊,直到發(fā)現(xiàn)上方提示。在點擊“收藏”過后的變化就很奇怪了, 用了一個明度比較高的黃色,放在白色背景上很容易看不清。而點擊“關(guān)注”就更無語了,既沒有已關(guān)注的信息提示,也沒有可以取消的按鈕(如果是手滑,關(guān)注了什么奇怪的作者怎么辦...)。

2.下方按鈕擁擠混亂,而且部分icon表示的意思不容易理解,極易迷惑用戶。界面上元素與元素之間分離感太強(在寸土寸金的手機上還怎么浪費),明明是相互聯(lián)系的元素也距離很開。

3.紅色打賞按鈕太搶視覺,而且這樣并不會讓用戶覺得“好顯眼可愛的按鈕,好想點”。相反還把頁面的格調(diào)拉低了,矜持一點,讓用戶大爺高興了少不了你的。

原詳情頁

重設(shè)計:

1.增加下載中icon變化和文字顯示。修改了收藏后的顏色填充和文字顯示。增加了關(guān)注后提示的“已關(guān)注”文字(再次點擊即可取消關(guān)注)。

2.重新組織原頁面下方按鈕,把返回會分享放置頁面上方。修改“金幣打賞”按鈕并放置在“紅包打賞旁”。因下滑就能到達評論區(qū)與原評論按鈕略顯重復(fù),于是去除了評論按鈕。減少分割距離,把相關(guān)聯(lián)的元素以分割線分割。

3.“紅包打賞”按鈕縮小并把填充改為描邊(同理與“金幣打賞按鈕”)。這樣不會和頁面搶視覺,又能在用戶大爺高興的時候輕松發(fā)現(xiàn)打賞按鈕。

詳情頁重設(shè)計

7.排行榜(高能護眼預(yù)警)

存在問題:

1.顏色太...大膽...。而且排行榜名稱與導(dǎo)航欄高度一樣,字號也一樣大,打亂了層次感,右邊的信息詳情icon(介紹每個排行榜含義)太大而且因為在紅色背景下更像是警告。

2.粗體的排名數(shù)字會感覺頁面很笨重,深色的配色讓排名“456”甚至比“123”還要突出。

3.愛心與其增加數(shù)量不齊,不知道是故意的還是怎么。

4.下方tab上的icon沒有識別性(無文字提示),肯定會對用戶造成迷惑,除了增加用戶記憶負擔(dān),其他什么用處都沒有。另外顏色也很怪異,如此高明度的配色讓我想到了彩虹。

排行榜對比(左原版,右重設(shè)計)

重設(shè)計:

1.去掉底部標簽欄和原排行榜名稱和所占區(qū)域。設(shè)計一個tab左右滑動切換排行榜,用排行榜名稱代替其icon(減少認知負擔(dān),減少記憶負擔(dān)),并去除所有標簽顏色,還一片干凈界面。將信息詳情icon縮小并移入導(dǎo)航欄,切換頁面時保持不變。

2.用襯線體來表示名次,讓頁面更加干凈。其實前三名更適合用不同的皇冠表示。(與首頁的排行榜icon相關(guān)聯(lián))

3.對齊愛心。

8.排片區(qū)

存在問題:

1.整個界面擁擠復(fù)雜無吸引力。對于影片,如果沒有看過的話,就依靠一個名字就無法獲得任何信息的,自然也就談不上期待或者喜歡。那么這種情況怎么會有人會設(shè)置提醒呢。所有的排片都放在一個頁面展示,雖然這樣展示效率蠻高的,但是如果某一天的影片多,那么用戶要找到特定日期的某個影片難度劇增。

2.“電影/番劇”標簽存在不合理。首先標簽的優(yōu)先級一定是低于影片名字的,所以絕對不應(yīng)該放在前面。而且標簽如果就是一個簡單的“電影”或者“番劇”,簡直太多余了。

3.不可點擊和可點擊的區(qū)域無區(qū)別。已上線的可以點擊進入觀看,而其他的明明不可點擊,卻和可點擊的一樣。用戶分不清就會試著去點,當多次無反應(yīng)的時候一點會很煩躁(參考你叫一個人,他一直不理你的感受)。

另外,排片區(qū)這樣的功能怎么想也應(yīng)該是在首頁而不會埋得特別深。而這個卻在三級界面里。

排片區(qū)對比(左原版,右重設(shè)計)

重設(shè)計:

1.簡化界面,每一頁只表示某一天的排片。用左右滑動或者點擊日期到達特定時間的方式切換日期。

2.去掉“電影/番劇”標簽,增加影片的基本信息(海報/導(dǎo)演名稱/主演名稱)和已提醒人數(shù)來增加影片吸引力。

3.更改了添加提醒的按鈕樣式。每個影片(不管是否上線)都可以點擊,只不過未上線的不能觀看。但是評論,打賞都可以有的啊,在影片上線前對于未知影片的討論也是很精彩的。



以上是改動比較大得界面,后面的改動都比較小,看圖即可。


系統(tǒng)設(shè)置對比(左原版,右重設(shè)計)
下載管理對比(左原版,右重設(shè)計)

修改資料對比(左原版,右重設(shè)計)

原版私人推薦與卡片視覺路徑
重設(shè)計私人推薦與卡片視覺路徑






總結(jié)

整個APP最大的問題就是沒有規(guī)范,界面布局,卡片設(shè)置,配色使用都不統(tǒng)一,感覺像是不同的人做的一樣。而且瀏覽過程比較繁瑣,可點擊區(qū)域與不可點擊區(qū)域很多時候都沒有區(qū)別等,這些讓用戶的學(xué)習(xí)成本增高也會導(dǎo)致整個APP混亂。特別是層級越深的界面,越混亂。

我的重設(shè)計也是主要針對這幾個方面去做的。每做一個改變都在詢問自己為什么,努力在這過程中尋找答案。另外整個重設(shè)計在撰寫的過程中我也盡量不去使用好不好看和丑不丑來評價一個界面和里面的各個元素。因為我覺得好看與否太主觀了,一千個人眼中有一千個哈姆雷特。作為設(shè)計者更應(yīng)該去思考談?wù)摓槭裁磿每?,為什么會丑以及這樣設(shè)計的理由(抱一下經(jīng)常被一句不好看或者多丑啊噎得不知道怎么接的自己)。

如果有不適當?shù)牡胤?,十分感謝批評和建議。多謝。(手動比心)


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容