| Back to logs list
142421 2010 年 11 月 30 日 17:48 Reading (loading. ..) Comments (0) Category: Product lines
I have been seeking a simple and efficient design, particularly appreciate the smell of fish this article, He used very good interpretation of Figure 1, this view: first,
Super Junior - Qzone log, the logical result of products to ensure clear, accurate, and secondly to set up some quick tasks for the user operation of the bridge.
Figure 1, architecture, better experience. My boss has cited the example of a string of beads that PM to our list of features are like a pile of fragmented beads, and we need to do is to string together the beads to string together functions, the last show to the user is a complete thing, with a clear structure and processes.
that there are some abstract words together, I want to try to log in through the mobile interface design, to share with me on the architecture design and process design thinking process.
first look at an example,
[转]男人亲完女人之后 - Qzone日志, Figure 2:
Figure 2 a child to do the login screen
this page is representative, it is much like the PM's list of requirements, messy pile in the interface. First to choose one problem:
copy is not accurate, He would like to express the Interface elements too much, need to distinguish between the level of relations between their needs known, do not have a clear mandate does not take into account the main issues related to the virtual keyboard blocked operation can be further away recently, for example Forgot your password with the login button
then We structure the analysis, in terms of architecture, this interface, there are three main modules: login, anonymous and registered two cases in which there may be anonymous, where performance is not the case the user name and password,
new balance running shoes, as shown in Figure 3.
chart of Figure 3, the login page
us to analyze both login and registration modules. If the user to log in, you need to enter a user name and password, if you hope do not have to enter a password, you can choose to remember your password,
new balance 574, if the user forgets the password, you can give an entry to retrieve the password to perform his operation. Of course, these are based on the user if the login operation to be performed later. Therefore, these elements can be hidden. Therefore, since the login and registration is same level, then can we designed this page in Figure 4 is that?
Figure 4 login page form with two entrances, you can choose Login or register
reference case is the Foursquare and 16Fun, shown in Figure 5.
Figure 5 Foursquare login page, only two options, login or register
obvious advantage of this program is to structure clear, not There are too many confounding factors, but also some weaknesses, login and registration or the need to distinguish between the two buttons, and these two functions are too flat level,
new balance outlet, at different stages of the product should be focused on fishes, such as new product lines , boot up to a more reasonable, mature product, to highlight the registry.
look at anonymous this function, previously mentioned,
new balance sneakers, there are two situations Anonymous:
1, does not require a user name and password, you can log
2 , required to submit a user name and password, but anonymous login, not allowing people to see
case 1, since no user name and password to log in, then why should first enter the login page, not the content pages? If your product is focused on community and the like, require users to log in, then still have to guide the user logs on, if your products are tools, and content of the class, you want the user to see content, then allows users to go directly to the software, the first to see the content, so need to perform some action before it can be logged only when the user login prompt.
case 2, is often used in the forum, paste it and so need to post anonymously case, we only need to post the page in the box gives the anonymous postings on the line, do not let users to directly select the login screen. If you want to log some of the forums, but do not want to expose online, you can add a login button button above state selector, as shown in Figure 6, QQ client.
Figure 6 iPhone version of QQ client, the login button above to select the state
login page as part of our case 1,
new balance shoes, so put anonymous login feature removed from the login page.
So this time, we have to process the product to an in-depth thinking, and our product is to the user come from? Where do you go? Want the user to complete what our products do a task flow? I'm a bit simple analysis, if the purpose is to guide the process of login, the user must have an account, log in to access products only, then the process is probably so in Figure 7.
Figure 7 phones login process
we know, we just want users to experience this interface into the software to complete the log after the arrival content. If so, should we allow users to more rapid implementation of the login process, that is, the account number and password that level, user-friendly and efficient operation. So I changed the design looks like Figure 8:
Figure 8 reveal account number, password input box of the login page
reference case is a roadside network login page See Figure 9.
Figure 9 roadside network login page, highlight the log function
with password-related options, such as remember your password, forgotten password, you need to put where appropriate? In general, the larger of the best correlation was close to leave. So I remember the password and forgotten passwords on the password input box below, but this time, the information will become more chaotic, the solution is it? Is to give information packet, as shown in Figure 10.
Figure 10 of information separated into two modules, login and registration, strengthen the log
and if the content is based, the purpose is to log on completion of certain operations, then the login page always appears in the navigation bar, menu, or perform some operations need to log in after the Forum Replies example, the process shown in Figure 11:
Figure 11 when the implementation of post operation, the tips flow chart of the registry
At this point, obviously can be analyzed, the end of the process should not login successfully, but the implementation of the next operation. Let come up with a threshold,
new balance mens, crushed part of the user's initiative, not as good as, first the contents exposed, when you need to perform some logged-on user to perform the operation time, and then guide you to the login page to a matter of course, there is no feeling forced to login. In this case, you can use floating layer in the form of simple and quick to complete the login operation, as shown in Figure 12.
Figure 12 Vimeo login page, using the floating layer design mode
, of course, you can also call the unified login page, that is, reduce costs, while maintaining unity.
Sui Suinian reason why so much is because of a seemingly simple page that contains a lot of structure and process of the thinking, logic products include the most important, including the designer grasp of needs.
login page,
莪德一�(�做德到� ) - Qzone日志, in the end to be designed to look like, certainly not a unified standard, but, according to your demand, you can infer that what kind of process, which features the highlights, let us To summarize, some of my deep sentiment point:
Tell me why (why login? Why register?) do not give users too many choices (too many options means that much thought or time) to the user a Way to go in the end (process to beginnings and ends, and can not have too many branches) with an option-related things to follow this option (such as password input box and forget your password) to weaken the content-based login (prompted at the right time users log on the line) structure and process are two different things (clear framework is the basis for efficient process is to ensure that)
Linear Mode
