虎撲直播設計思路

 　　前言：虎撲一直覺得視覺做的不好，很多細節體驗也不好，但是真離不開它，原因在於幾年web端的經營，聚集了大量優質用戶，這些用戶的創造的氛圍也是虎撲區別市面上其它app最重要的特點沒有之一，而根據這個特點制作的賽後用戶點評更是不能再贊，雖然有bug- -最新版本也撤離了這個非常重要個的功能。單論產品新浪直播要好的多(視覺也很贊很多數據能圖像化)，可惜還是選擇虎撲，畢竟氛圍無可替代。

　　這是做ios圖的時候設計思路

　　ios視覺圖

　　這次根據虎撲改造在交互方面遇到最主要的問題有2個，1個是架構;第2個是如何利用更多區域浏覽直播頁。

　　接下來會根據首頁、新聞、視頻、排行、數據這5個底部標簽欄來講述。遇到這2個問題會在下面描述。

　　首頁

　　因為架構比較大，我只列舉如何從首頁到直播頁看數據這塊。

　　分別涉及3個產品。虎撲、新浪直播、espn。先看3個產品首頁：

　　可見新浪和espn架構類似(新聞方面有所不同)，都是直播和新聞一級，然後他們各個包涵各類比賽。虎撲是各類比賽一級，每個比賽包涵直播、新聞等。

　　我遇到的問題是什麼呢?因為一開始我一直傾向espn的架構，因為覺得各種球賽直播，在首頁放滿他們是最好的。

　　但我一直在想哪裡不對。直到我在找用戶數據的時候發現——虎撲還是以看籃球為主的!!

　　數據來自足球賽事新聞板塊的評論，評論數很少上10的。。而籃球板塊，基本輕松破100

　　再想，虎撲，他本身就是以虎撲籃球出名的，以籃球為引導看其它賽事。籃球為主頁，更適合它虎撲。

　　這時候虎撲架構顯得更加扁平。假設我要從首頁去nba板塊去.看數據，虎撲只需要1步，espn需要3步，新浪4步。

　　我並不是說虎撲架構會比新浪和espn更好，是這種架構，更適合虎撲。所以最終還是用各類賽事為一級，包涵各類比賽的架構。

　　首頁1.2

　　既然以NBA為主，那麼主頁第一個放nba，其它賽事與之切換。第二個問題，怎麼切換賽事?

　　1、側邊欄第一個被排除，因為facebook關於側邊攔討論的那篇文章，第二也因為貌似虎撲以前就是放側邊欄各個賽事。

　　2、下拉的比較簡潔

　　3、第三種比第二種更方便，但是視覺方面難做點，而且會出現top欄為一級，底部butter為二級的(top控制底部butter)奇怪交互(一般都是底部butter控制top)

　　這種交互雖然很少見，但是我長期用下來。。。雖然奇怪，但是蠻好用的=w=所以我覺得有時候不必太過拘泥。就繼續安虎撲的交互來做，只是視覺方面我難做了點，原虎撲設覺參照下圖。

　　比賽擺放

　　虎撲是這樣。來，比如我要找我隊伍黃蜂的比賽，這時候眼球一般視覺流動是這樣子——左右左右左右，或者上下：

　　當然也有亂找亂動流，這個不表。在尋找自己的球隊時候眼球要左右尋找，非常不方便，一條直線視覺流才是正確並且我認為是唯一的選擇，所以我做的和新浪，espn是一樣的，直線流。

　　哦，這裡說一下視覺想法。

　　比賽聚集很多種類信息，思路——卡片。

　　大量數據要看，所以——白底黑字

　　配色方面，虎撲web主色是紅色，但是app是黑色- - 品牌統一 啊。。

　　我選擇了黑色為主，紅色為輔。

　　直播頁面

　　這裡我把底部標簽欄變為了滑動tab，進去無限底部標簽欄還是有點奇怪

　　遇到問題2——如何利用更多區域去浏覽信息

　　虎撲紅色區域，看信息區域少，有點壓抑。

　　新浪的交互是一種思路，新浪上滑後導航欄顯示球隊，可惜。。。根據

　　上滑到這應該下滑返回,新浪下滑無法回來，經常誤操作。。。

　　我的想法是滑動時候直接把top欄頂走，到球隊隊徽那停下來，如果隊徽的卡片高度設置為(128px，以iphone5為准)，滑上去剛好頂替top，但是返回要保留。(下圖是特別改的，我原設計圖高度其實大於128px)

　　直播采用了時間軸，不過後來想了一想，列表應該才是更好的做法(不打斷快速浏覽)，所以後來在material的時候我改為了列表。但是不是太確定，所以ios還是時間軸+卡片

　　ios時間軸

　　直播頁面房間解決思路

　　最新版本增加了主持人房間這個功能，但是。。還這有用戶需要，我說一下做的不好的地方吧，如圖

　　首先要考慮2種用戶，一種是有選擇主持人需求的，我不知道比重多少;一種是沒有。

　　無論哪種，我進入直播頁面，我的心理預期是看最新戰況，比賽稍眾即逝，有點著急的心態。

　　但是一進來，居然是莫名奇妙的幾個圖，下面寫著奇怪的文字，我比較機智，第一次用2秒後就反應過來是主持人的房間。

　　但是，你能保證這樣的界面，全部用戶都知道這是什麼嗎?這種也不符合心裡預期。更淚流滿面的是，只有一個房間時候，我還要無謂的操作點擊。

　　交互上來也增加了層級，還是重要頁面的層級;增加了選擇，交互要讓用戶盡可能不用思考，更少選擇。它相當於一個對話框，《about face3》說過對話框的問題。何況這個對話框是一個頁面。

　　我每次去這個，房間都是亂選的。對我這類用戶意義就是增加我使用難度。

　　我的解決思路是，一進來，直接直播頁面，如果你要選擇主持人，去標題欄下拉切換。

　　系統第一次進的默認房間是人氣最高主持人，以後系統後台計算用戶選擇，算下來後用戶進去默認用戶選擇過最多的那個主持人。當然後續可能還要制定一些規則比如第二人氣等等，我只是提供一種思路。畢竟這種一個頁面選房間的體驗不好。

　　新聞和視頻頁面等

　　沒什麼好說，只是視覺上改動，新聞列表頁沒做，因為那一頁視覺做的挺好的，稍微改動一下就可以達到網易新聞水准。

　　排行

　　東部西部是用按鈕分開來的，但是因為導航欄占了滑動手勢。這時候用tab表示很容易誤操作。沒有手勢情況，大屏手機並不方便操作，還不如東部西部放在一頁，下滑頁面就是西部的排名更方便。

　　數據

　　必須吐槽一下這個左邊按鈕控制右邊按鈕的交互。明顯他們是平行，怎麼會出現左邊按鈕是一級，右邊按鈕是二級的行為呢?

　　而且我要切換得分 、籃板、助攻等非常繁瑣，需要不停按按鈕。

　　解決思路還是和排行一樣，與其不停按按鈕切換，還不如滑動來的方便

　　按照得分-籃板-助攻這些關注度高低排列，讓用戶更少選擇更少思考

　　另外，常規賽數據變動不是非常大，數據不經常變的情況下，這個頁面也很少人會看，我沒記錯哈登占了快