We will call the web interface 12306 frustration, poor, slow, look back to write their own code, it is not the same as the idea! In the front, many of the seemingly simple things, containing countless mystery. This will be a small sign in the box to the entrance, to talk about how to improve their own procedures. In many people's eyes, the tip is DIV + CSS + JQuery, and even some people stuck in the fog table layout among (these people should just like IE6, as history has gradually been gathering dust). Nike Lunarglide+ 3 However, the front is by no means what you can see. For example, the login page almost every system is an integral module, a lot of skilled people who can write in a quarter of an hour a login page, two input, a submit button, everything is OK. Username: \u0026 lt; input type = \u0026 quot; text \u0026 quot; / \u0026 gt; \u0026 lt; br / \u0026 gt; Password: \u0026 lt; input type = \u0026 quot; password \u0026 quot; / \u0026 gt; \u0026 lt; br / \u0026 gt; \u0026 lt; input type = \u0026 quot; sbumit \u0026 quot; / \u0026 gt; of course, as a complete login authentication page, which several elements can be competent, but I can only say that you can use to complete a page, this page is no user experience at all, totally inconsistent with having the programmers rigorous style of thinking! First, all to a good user experience based on visual interface design 1. Needless to say, in general, the job belongs to art, here to talk about is some of the most basic points. First, your page compatibility How? The length and width of each element, whether the line of higher performance consistency on different browsers, and if this is not guaranteed, it must be unqualified. Second, experience problems on the mobile terminal, now many pages PC and mobile terminals with a structure, that is what we Nike Lunareclipse call the response-style layout, this blog on the use of responsive layout, narrow window you can see the results, Responsive layout is to allow different mobile terminals can get the same quality experience, but many developers ignore the effect of cross-screen when. Below are a few common pixel ratio of mobile terminals: Mobilepx rateIphone5320 * 568Iphone4320 * 480Galaxy S 3/4360 * 640Lumia 920384 * 640iPad768 * 1024 to take care of the user's response layout in addition to considering horizontal screen these screens, had considered the vertical screen inside. I simply made a landing page: correct account number is: barret, password is: 123, you can use the error message to go test the next ~ can stamp the Air Max 2011 Womens Blue Black DEMO: http: //qianduannotes.duapp.com/demo/login /login.html2. preceding interaction that way, click on the submit button, and sent back to verify, verify that no by then back to the login page, it would be an interactive, but to experience this interaction is particularly bad, every times had to refresh the page, you should use ajax asynchronous to verify the form. In order to save the user's focus clicks, you can do the following ideas: User name is blank, or the wrong format - 'an error, clear the password box, focusing the user name box, and a full selection of username user name does not Nike Air Mens Nike Free 3.0 Wool Skin Shoes Red Grey Max exist -' What will do things, 'an error, clear the password box, the focus frame Focus password to the password box, select all passwords to tell the user what went wrong, and to anticipate users encounter these problems, we can use the program to solve - Ibid password error thing, never bothering the user hands-on. When prompted for a user name wrong, the user will definitely return to re-enter the input box, this time we have focused on the user box, and select all the previous input, aspects of the user delete operation. Interaction like this, we should do a pre-judgment in advance. 3. What is the status of the state prompted tips? Sometimes the reason because the network, then click Submit button, ajax transfer half did not respond, the user page that prompted such a long time are not, this is sure to make users anxious. Looking back Gmail, one to maximize the ajax web applications, the user experience is also doing quite a force, log-mail when a loading animation, beside put a load basic HTML (for slow network use). Each operation has suggested that there is a prompt Undo button, the data is loaded, if the loading time is too long, will be conducted during several different prompts, and an exact result. Finally, for a login box, the need to do this: a clear hint box waiting for the state 3s, the results did not come out, prompting the user to continue to wait to wait for 6s, the results did not come out, prompting the user to set up the network is not smooth 10s timeout, and inform the user Failure to submit the form to achieve these things and do not have much technical difficulty, but can bring a good experience and a sense of security to users under a slow network. 4. Security transport users are most worried about is the account password is intercepted, or because the password is a multi-use, do not want others to see clear text passwords, since users are concerned, we should think of ways to deal with. Password and time stamp overlay, then encrypted, spread the background is encrypted results and the time stamp, as follows: // front-end t = new Date (); s = encode (pwd + t); post (s, t) // background decode (s) === pwd + t This ensures passwords hidden, if the hacker does not know decode function, even got the s and t, also in vain. About secure transmission, before also wrote articles related to password secure transmission OAuth and HTTP authentication principle under. If you want to do when the user input is absolutely safe, you must use something like this Alipay security plugin. His principle is embedded in a page control, between the controls and the pages are shielded from each other, in internal controls input controls only get them to enter information. 5. Data go caching should Air Jordan Outlet be the preferred form submission post, but does not rule out filing with the get, then this should be considered when the data cache, and the same url if requested, the program will take the data directly from the browser's cache and gives state status: 200 OK (from cache), in order to avoid these common-sense questions, remember to add a little something in the parameter request. _t = new Date * 1_n = Math.random order to guarantee the uniqueness of parameters, and even the time stamp and random numbers stack up with _s = (new Date * 1 + Math.random * 1E5) / 1E56. Progressive Enhancement Progressive The word is generally enhanced not support javascript or javascript support for the less good browser using other ways, or tell the user what the reason can not be used, is a degeneration process. Currently does not support javascript browsers should be extinct, of course, is not absolute, kindle built-in browser for the javascript support is not high, or do not support. Another is that the user has disabled javascript, this ratio is small, the developers will do so, and the average user will not make change browser settings. But our program, especially in key parts (such as search, login, registration, etc.) must be considered part of this small group. The general approach is: 1) the use of noscript Mens Nike Free 3.0 Wool Skin Shoes Red Grey tag, this is the most common and also the most practical. 2) hack mode, document.write ('\u0026 lt;' '! -' +) Document.write (\u0026 quot; \u0026 lt; \u0026 quot; + \u0026 quot; -! \u0026 2015 Nike Free 5.0 Quot;); // code ... // if the browser does not support javascript, will display the contents of this middle // code ... document.write (\u0026 quot; - \u0026 quot; + \u0026 quot; \u0026 gt; \u0026 quot;); This is a particularly clever processing means, it is recommended. 7. Browser Back Button This register or log in when it is a common problem, after landing, jump to another page, my mouse Mens Nike Free Run 3 Shoes Blue 3 has two side buttons for forward and backward, and sometimes delayed side buttons, this time will return to the previous page login page, but the fact is that the user has logged in, the status of all pages should be logged, no matter under what circumstances should allow the user to see this page. Users click operation will lead to the above problems, and the program history.go (-1) \u0026 amp; history.back () will have the same bug. This problem is relatively simple processing scheme, ajax get to do the jump when the state code immediate success, but there can not be used window.location.href, so browsers will record the login history, you should use window.location.replace, replace 579765-700 Sonic Yellow / Sail - Cool Grey - Tour Yellow Nike Air Max LeBron 10 Low Sonic Yellow Online The current history. 8. Remember Password Zuifan must enter each time you log pages long account password, if not check the 'Remember Password', then the user's login status is stored in the answer of the session, close the page or browser when the answer end, session is deleted, so that when the next time the user logged in and the need to re-enter the password. Form page 'Remember Password' check box is selected by default should Mens Nike Free Run 3 Shoes Grey 3 be subconscious behavior of users is fewer operations. When the user submits the information successfully saved directly in the cookie account password? This approach is clearly unreasonable, how can the plaintext password save it, someone will think of the encryption process and then save the password, or use the server to set the cookie, these practices are possible, but the best way is when a user successfully When submitting information, the server to the front end of a token, this token is used to automatically log on, we only need to save the token on the line, Nike Free 3.0 V5 so good to avoid the cookie information stored in the user's privacy. Another to note is that when the user cancels the 'remember password' check box, you should immediately remove the relevant cookie. Second, several other related point 1. If the user forgets the password the user for a long time did not come to your site, he may forget to set your own password, the user will forget some of the wonderful work of even your own user name, but the user is always no wrong, wrong only our program and the writing process. For people forget the password, you can enter a password plus a next link 'Forgot Password?', Allowing users to use the mobile phone mailbox or bound to find the password, user name and password to forget people, internal injuries in ...undefined 13 # 14 # 2. Positive Solutions script injection form information should be a regular match, or filtering information to prevent script injection, the main problem is the background to be considered, not much to say. Question 3. repeatedly submit when we send microblogging often encounter, because the network itself, click the Publish button several times, the problem has a 554988 105 Black Red Nike Zoom KD V 5 Online variety of treatment options: Before release from the server to take token, the token valid only once Analyzing the rear end users within a certain time pieces of information, the same information to re ... Third, several error-prone knowledge 1. setRequestHeader use ajax to post information, some people may come across, get the data back ʱ?? The reason is not to rewrite the request header Content-Type, xhr.open (\u0026 quot; POST \u0026 quot ;, Mens Nike Free 3.0 Wool Skin Shoes Grey Navy url, true); xhr.setRequestHeader (\u0026 quot; Content-Type \u0026 quot ;, \u0026 quot; application / x-www-form-urlencoded \u0026 quot;) ; xhr.send ($ param (. {\u0026 quot; user \u0026 quot;: Nike Lunarglide+ 2 $ (\u0026 quot; # user \u0026 quot;) val (), \u0026 quot; pwd \u0026 quot;:.. $ (\u0026 quot; # pwd \u0026 quot;) val ()})); general Adding browser does not support the GET method xhr.send parameters, but POST is also a must, if not set Content-Type header, the data would not be sent to the back-end way to resolve a key-value model, background (PHP) by $ _POST can not get the data. 2. checkbox here is an experience the problem, some people put checkbox and his relevant text to write separately, the results did not use the label to point, such as: \u0026 lt; input type = \u0026 quot; checkbox \u0026 quot; checked = \u0026 quot; checked \u0026 quot; / \u0026 gt; remember Password Clearly, we click on the back of the text will not let input change of state, and some people would be so treated: \u0026 lt; label \u0026 gt; \u0026 lt; input type = \u0026 quot; checkbox \u0026 quot; checked = \u0026 quot; checked \u0026 quot; / \u0026 gt; Remember password \u0026 lt ; / label \u0026 gt; After this process, click on the text, of course you can select the input, but this approach is unreasonable, label originally input box labeled with his content should be text, should not be included in this input box, so reasonable The approach should be like this: \u0026 lt; input type = \u0026 quot; checkbox \u0026 quot; checked = \u0026 quot; checked \u0026 quot; id = \u0026 quot; rem \u0026 quot; / \u0026 gt; \u0026 lt; label for = \u0026 quot; rem \u0026 quot; \u0026 gt; Remember password \u0026 lt; / label \u0026 gt; four Summary says a lot, a lot of problems are from the user's point of view to think that we are a programmer, but we are also users, we Tucao, but we will be Tucao. To achieve the ultimate user experience, this is very important not to miss any detail!see the front end from the login box