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

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

ios視覺(jué)圖

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

接下來(lái)會(huì)根據(jù)首頁(yè)、新聞、視頻、排行、數(shù)據(jù)這5個(gè)底部標(biāo)簽欄來(lái)講述。遇到這2個(gè)問(wèn)題會(huì)在下面描述。

首頁(yè)

因?yàn)榧軜?gòu)比較大，我只列舉如何從首頁(yè)到直播頁(yè)看數(shù)據(jù)這塊。

分別涉及3個(gè)產(chǎn)品。虎撲、新浪直播、espn。先看3個(gè)產(chǎn)品首頁(yè)：

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

我遇到的問(wèn)題是什么呢？因?yàn)橐婚_(kāi)始我一直傾向espn的架構(gòu)，因?yàn)橛X(jué)得各種球賽直播，在首頁(yè)放滿他們是最好的。

但我一直在想哪里不對(duì)。直到我在找用戶數(shù)據(jù)的時(shí)候發(fā)現(xiàn)——虎撲還是以看籃球?yàn)橹鞯模。?/p>

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

再想，虎撲，他本身就是以虎撲籃球出名的，以籃球?yàn)橐龑?dǎo)看其它賽事。籃球?yàn)橹黜?yè)，更適合它虎撲。

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

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

首頁(yè)1.2

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

1、側(cè)邊欄第一個(gè)被排除，因?yàn)閒acebook關(guān)于側(cè)邊攔討論的那篇文章，第二也因?yàn)槊菜苹湟郧熬褪欠艂?cè)邊欄各個(gè)賽事。

2、下拉的比較簡(jiǎn)潔

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

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

比賽擺放

虎撲是這樣。來(lái)，比如我要找我隊(duì)伍黃蜂的比賽，這時(shí)候眼球一般視覺(jué)流動(dòng)是這樣子——左右左右左右，或者上下：

當(dāng)然也有亂找亂動(dòng)流，這個(gè)不表。在尋找自己的球隊(duì)時(shí)候眼球要左右尋找，非常不方便，一條直線視覺(jué)流才是正確并且我認(rèn)為是唯一的選擇，所以我做的和新浪，espn是一樣的，直線流。

哦，這里說(shuō)一下視覺(jué)想法。

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

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

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

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

直播頁(yè)面

這里我把底部標(biāo)簽欄變?yōu)榱嘶瑒?dòng)tab，進(jìn)去無(wú)限底部標(biāo)簽欄還是有點(diǎn)奇怪

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

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

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

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

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

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

ios時(shí)間軸

直播頁(yè)面房間解決思路

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

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

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

但是一進(jìn)來(lái)，居然是莫名奇妙的幾個(gè)圖，下面寫著奇怪的文字，我比較機(jī)智，第一次用2秒后就反應(yīng)過(guò)來(lái)是主持人的房間。

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

交互上來(lái)也增加了層級(jí)，還是重要頁(yè)面的層級(jí)；增加了選擇，交互要讓用戶盡可能不用思考，更少選擇。它相當(dāng)于一個(gè)對(duì)話框，《about face3》說(shuō)過(guò)對(duì)話框的問(wèn)題。何況這個(gè)對(duì)話框是一個(gè)頁(yè)面。

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

我的解決思路是，一進(jìn)來(lái)，直接直播頁(yè)面，如果你要選擇主持人，去標(biāo)題欄下拉切換。

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

新聞和視頻頁(yè)面等

沒(méi)什么好說(shuō)，只是視覺(jué)上改動(dòng)，新聞列表頁(yè)沒(méi)做，因?yàn)槟且豁?yè)視覺(jué)做的挺好的，稍微改動(dòng)一下就可以達(dá)到網(wǎng)易新聞水準(zhǔn)。

排行

東部西部是用按鈕分開(kāi)來(lái)的，但是因?yàn)閷?dǎo)航欄占了滑動(dòng)手勢(shì)。這時(shí)候用tab表示很容易誤操作。沒(méi)有手勢(shì)情況，大屏手機(jī)并不方便操作，還不如東部西部放在一頁(yè)，下滑頁(yè)面就是西部的排名更方便。

數(shù)據(jù)

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

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

解決思路還是和排行一樣，與其不停按按鈕切換，還不如滑動(dòng)來(lái)的方便

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

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

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

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

source:ui中國(guó)