The design idea of tiger flutter live broadcast

Preface: Tiger flutter has always felt that the vision does not good, many details experience is not good, but really inseparable from it, the reason is a few years of the web side of the operation, gathered a large number of high-quality users, these users create the atmosphere is also the tiger flutter differences in the market other apps the most important characteristics of And according to this feature produced after the game user reviews are no longer praise, although there are bug--the latest version also evacuated this very important function. Single-Talk products Sina live much better (visual is also very praise a lot of data can be image), unfortunately or choose tiger flutter, after all, the atmosphere can not be replaced.

This is the time to do the iOS map design ideas

iOS visual map

This time according to the Tiger-bashing transformation in the interactive aspects of the main problems encountered 2, one is the framework, the 2nd is how to use more areas to browse the live page.

Next will be based on the home page, news, video, ranking, data, these 5 bottom tab bar to tell. Encountering these 2 questions will be described below.

Home

Because the architecture is relatively large, I only enumerate how to look at the data from the homepage to the live page.

3 products were involved. Tiger flutter, Sina Live, ESPN. First look at 3 products first:

It can be seen that Sina and ESPN architectures are similar (different in news), they are live broadcast and the news level, and then they cover all kinds of competitions. Tiger Flutter is a class of competitions, including live broadcast, news and so on in each competition.

What is the problem I have? Because at first I have been inclined to ESPN's architecture, because I feel all kinds of game live, on the front page full of them is the best.

But I've been thinking about what's wrong. Until I find the user data when found-tiger flutter or to watch the main basketball!!

Data from the Football news section of the commentary, the number of comments rarely 10. and the basketball plate, basically easy to break 100

Again think, tiger flutter, he himself is famous for the tiger-bashing basketball, to guide the basketball to see other races. Basketball for the homepage, more suited to its tiger flutter.

At this time the tiger flutter structure appears more flat. Suppose I want to go to the NBA plate from the home page. Look at the data, tiger flutter only need 1 steps, ESPN need 3 steps, Sina 4 steps.

I am not saying that the tiger-bashing structure will be better than Sina and ESPN, which is a more suitable framework for tiger bashing. Therefore, the final use of various types of tournaments as a level, with the structure of various competitions.

Home 1.2

Since the NBA mainly, then the first home to the NBA, the other games with the switch. Second question, how do you switch races?

1, the sidebar is the first to be excluded, because Facebook about the side bar discussion of the article, the second because it seems tiger flutter before is to put the side bar of each race.

2, the lower pull is relatively concise

3, the third is more convenient than the second, but the visual difficult to do, and will appear in the top column level, the bottom butter to two (top control bottom butter) strange interaction (usually the bottom of the butter control top)

Although this kind of interaction is very rare, but I use it for a long time ... Although strange, but very good =w= so I think sometimes not too rigidly. Continue to an HU flutter of the interaction to do, but the visual aspects of my difficult to do, the original tiger flutter set to see the figure below.

Game Placement

Tiger flutter is like this. Come on, like I'm looking for my team Hornets game, when the eye general visual flow is like this--left or right, or up and down:

Of course, there are also disorderly find the flow, this does not watch. In the search for their team when the eyeball to look around, very inconvenient, a straight line of visual flow is correct and I think is the only choice, so I do and Sina, ESPN is the same, straight flow.

Oh, here's a visual idea.

The game gathers a lot of kinds of information, train of thought-card.

A lot of data to see, so--white bottom black word

Color, tiger-bashing web main color is red, but app is black-brand unity AH.

I chose the main black, red as a supplement.

Live page

Here I turn the bottom tab bar into a sliding tab, and it's still a little strange to go inside the infinite bottom tab.

Encounter problems 2--How to use more areas to browse information

Tiger Flutter red area, see information area less, a little depressed.

Sina's interaction is a way of thinking, Sina on the slide after the navigation bar shows the team, unfortunately ... Under

Slide up to this should fall back, Sina slipped can't come back, often misoperation ...

My idea is to slide the top bar straight up, to the team badge that stop, if the badge card height set to (128px, to iphone5), slide up just to replace the tops, but return to keep. (The following picture is specially modified, my original design figure height is actually greater than 128px)

It used the timeline, but then thought about it, and the list was supposed to be a better approach (without interrupting quick browsing), so I changed the list when I was material. But not too sure, so iOS is still the timeline + card

iOS timeline

Live page Room Solution idea

The latest version adds to the function of the host room, but. Also this has the user needs, I said that does not have the bad place, like the figure

First of all to consider 2 kinds of users, one is the need to choose the host, I do not know how much the proportion;

Either way, I entered the live page, my psychological expectation is to see the latest situation, a little bit of the game, the state of mind.

But a come in, incredibly is inexplicable strange several pictures, below write strange words, I am more witty, the first time in 2 seconds after the reaction came to be the host's room.

But can you guarantee that this interface, all users know what this is? This is not in line with the expectations of the heart. Even more tearful, there is only one room when I have to click on the meaningless operation.

The interaction also increases the hierarchy, or the level of the important page; The choice is increased, and the interaction is made so that the user does not have to think or choose as much as possible. It is equivalent to a dialog box, "about Face3" said the problem of the dialog box. And the dialog box is a page.

Every time I go to this, the room is randomly chosen. For me this kind of user meaning is to increase my use difficulty.

My solution is, one comes in, direct live page, if you want to choose the moderator, go to the title bar to pull the switch.

System for the first time into the default room is the most popular host, after the system backend computing user choice, after the user went into the default user to choose the most of the host. Of course, the follow-up may have to make some rules such as second popularity and so on, I just provide a way of thinking. After all, this one page choice room experience is not good.

News and video pages, etc.

Nothing to say, just visual changes, News list page did not do, because that one page vision do very well, a little change can achieve NetEase news level.

Ranking

The eastern West is separated by buttons, but because the navigation bar takes up the slide gesture. At this time, the tab indicates that it is easy to operate incorrectly. No gesture, big screen mobile phone is not convenient to operate, but also less than the east of the west on a page, the slide page is the western ranking more convenient.

Data

You have to spit it out. This left button controls the interaction of the right button. Obviously they are parallel, how can the left button be the first level, the right button is a level two behavior?

And I have to switch points, rebounds, assists and so very cumbersome, need to keep pressing the button.

The solution is still the same as the ranking, rather than keep pressing the button to switch, it is not as easy as sliding to

Follow the scores-rebounds-assists these levels of attention, allowing users to choose less and think less

In addition, the regular game data changes are not very large, the data does not often change in the case, this page is very few people will see, I remember correctly the first season, and the last few days to become the Davis Brooks.

It should be today's data, which is often changed at the first-glance display. Switch between the regular season and today.

Finally say, do this thing is actually my personal thoughts, may also have the wrong place. After all, this is what I do based on my personal thoughts and experience. Lack of data support. But the essence wants to do a product design according to own idea.

The article is very long, it is not a big article to see what kind of harvest. If you've seen it, I am. Honor, thanks for watching.