Let's go from "Tell user where"

When it comes to "tell the user where the user is" in web design, the first thing we came to think of was bread crumbs, which not only tell users where they are but also clearly show where you are. Of course there is a control that "tells the user where it is" - the browser title. Both are inseparable - navigation

Usually a web site design, is composed of these three controls to complete the "tell the user where".
Navigation - Throughout the site architecture;
Title - tell the current page;
Breadcrumbs - Prompt user's location in multiple levels.

An excellent product design, there will not be too many levels, like "Pirates of the dream space", too much level will make people want to break free, back to the relaxed first floor. Fortunately, the biggest advantage on the PC Internet is the space, so when a page at the same time put these three controls, we almost achieve the ability to jump at any time and will not get lost, as shown below:
Just enter the subway, you just see this global map, you can choose where to go, and then get on the right car.

When you have entered the subway train on Line 1, the stop light signs can show the train's driving track, and you must know where you are.

The main question we are discussing today is how do we tell users where by design on the mobile internet?
We know there's a natural limit to the interface of mobile devices - small screens. Although the screen resolution has been increasing, 240 * 320,480 * 320,800 * 480,960 * 480, but the physical size of the screen did not change much, 3.5-inch screen is the mainstream.
So before the PC Internet to "tell the user where" three magic can not be all down.
What is the current page - the title must be retained.
Navigation a little too much space - on the home page on it.
Bread crumbs do - level more than one can not let go, but also take a position. Do people need bread crumbs? What depends on bread crumbs at this time?

First, we need to subtract the demand.
Do not put the demand on the PC Internet in the mobile state on the mobile terminal, so to some extent, we extract the most users need the most useful needs.
For example: Baidu know the product on the PC Internet, you can search for answers, questions, answers, you can also define the problem classification, to know the mall to redeem items, to complete the task, to know the team and to know the commune. So when we do mobile products, the above requirements can be done in the mobile state, but also the need to move the state, through the exclusion, the core requirement is to search for answers, questions and answers. Meet these three core needs, it is well aware of most of the work porting to the mobile.

One interface to do one thing.
This is the idea of ​​designing a task flow - do not pile everything into one interface. However, the interaction design will find that the previously tabbed content functionality in web design can solve this problem, so content-based applications such as news applications, tab-like controls, and even left and right swipes.
There tab bar iphone is similar to the tab controls, as well as the title area of ​​the tab control.
However, by the horizontal width limit, tab can not be too much. So we need to streamline the framework and ingenuity.
Personal point of view: For multi-level product architecture can choose, 16-grid interface -> tab bar interface -> title area tab interface -> sliding tab interface. From the overall situation to the details, if all four tab levels can not let go of the content, it can only say that your application is too lengthy.

3. Find the way to come.
Iphone interface design will have a "back" control in the title bar area. You can always return. Sometimes, programmers will also put a button to quickly return to the home page.
The Android application generally use the back physical buttons to allow users to return to the previous step. However, through the actual operation, we can find that Android's back physical keys are somewhat different from "return" on the iphone. Android's back records not only user actions, but also "cancels" certain actions. For example, you press the menu button to bring up the menu, and you can press the back button to recall the menu. Users do not know how to operate, usually consider pressing "back" to go back to the previous step. iphone on the "return" just back to the previous interface.

--- (Personal point of view: Android's back button at any time to shoulder two functions undo and return, will bring suspicion to the user.Design on Android application, we found that often in some of the interface can not prompt the user to "return." That is, we must always understand the user - use the back button when you need to return or cancel.
However, Android phones that do not have a back button appear on the market today. For example Lenovo's music phone. However, music phone supports full keyboard components.
There is also a point of view exists, is the user in the use of applications, do not switch back and forth between the application (touch interface) and the machine (physical keys). However, people who hold this view tend to tangle with the system's operating habits. )
Coupled with the cost of development considerations, we will use this program - that is, using the iphone mature interactive controls, and on Android "Back" "Cancel" and the back button to match the interface to retain. Then I will share similarities and differences about the title area. ----
Sorry to insert a different topic.
Now back, in fact, mobile users directly see the navigation and content is not a good experience, after all, navigation occupy too much position. So we just need to give a user a look at the navigational entry. For example, home or menu. In the iphone, there is usually a dedicated toolbar to hold this button. In Android, we use the menu button physics better.

Think about the design from the iphone, Android platform applications, for how to make users clear where they think we are a lot, sum up the sentence is - clever use of TAB-level architecture, always give the user a quick return to the home page (see the navigation )Methods.

Source Address: http://www.blueui.net/blog/?p=275