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

這是做ios圖的時候設(shè)計思路

ios視覺圖

這次根據(jù)虎撲改造在交互方面遇到最主要的問題有2個，1個是架構(gòu)；第2個是如何利用更多區(qū)域瀏覽直播頁。

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

首頁

因為架構(gòu)比較大，我只列舉如何從首頁到直播頁看數(shù)據(jù)這塊。

分別涉及3個產(chǎn)品?；?、新浪直播、espn。先看3個產(chǎn)品首頁：

可見新浪和espn架構(gòu)類似(新聞方面有所不同)，都是直播和新聞一級，然后他們各個包涵各類比賽?；涫歉黝惐荣愐患墸總€比賽包涵直播、新聞等。

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

但我一直在想哪里不對。直到我在找用戶數(shù)據(jù)的時候發(fā)現(xiàn)——虎撲還是以看籃球為主的??！

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

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

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

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

首頁1.2

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

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

2、下拉的比較簡潔

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

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

比賽擺放

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

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

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

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

大量數(shù)據(jù)要看，所以——白底黑字

配色方面，虎撲web主色是紅色，但是app是黑色- – ? 品牌統(tǒng)一 啊。。

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

直播頁面

這里我把底部標簽欄變?yōu)榱嘶瑒觮ab，進去無限底部標簽欄還是有點奇怪

遇到問題2——如何利用更多區(qū)域去瀏覽信息

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

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

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

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

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

ios時間軸

直播頁面房間解決思路

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

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

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

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

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

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

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

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

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

新聞和視頻頁面等

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

排行

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

數(shù)據(jù)

必須吐槽一下這個左邊按鈕控制右邊按鈕的交互。明顯他們是平行，怎么會出現(xiàn)左邊按鈕是一級，右邊按鈕是二級的行為呢？

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

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

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

另外，常規(guī)賽數(shù)據(jù)變動不是非常大，數(shù)據(jù)不經(jīng)常變的情況下，這個頁面也很少人會看，我沒記錯哈登占了快一賽季了，就這幾天才變?yōu)榫S斯布魯克。

應該是今日數(shù)據(jù)這個常變的放在第一眼展示處。常規(guī)賽與今日之間進行切換。

最后說一下，做的這個東西嘛其實都是我個人想法，可能也有不對的地方。畢竟這是我根據(jù)個人想法和使用體驗做。缺乏數(shù)據(jù)支持。但本質(zhì)想根據(jù)自己想法做好一個產(chǎn)品的設(shè)計。

source:ui中國