Several "general" of Design edge condition

Because in the details of the interactive design, there are times when clearly know but the old must be missing some special situation of the design, which is the edge of the design of the omission of the majority, so simply to their own summed up a few "general" to remind themselves remember not to forget. Here are a few, I hope it will help you a little bit.

One. Any input, there must be restrictions. This problem comes when we use input controls, especially text input boxes, in our design.

The first one to face is the limit of the number of characters, the limit of the number of characters from the product itself, such as the business restrictions, such as micro-blog 140 words, the registration of the length of the account and password.

Some products do not seem to limit the number of characters, or do not give users the concept of "restrictions." But there is a need for restrictions, which come from technical considerations. For example, the number of recipients to fill in the mail, search box to accept the keyword words, message board content. Although the business does not require, but input content, may cause difficulties in submitting, the database is bloated, vulnerable to attack, etc., so we also have to consider the "invisible limit", although the border does not see, once the user crosses the line, or need to have a corresponding solution.

Picture-in fact, the message theme still can't write too long, although generally not write so long

Figure-Baidu originally also has the word limit

Input is not all text, so we also need to face input restrictions on other formats.

such as the number of uploaded files,

Figure-The limit of the number of photos transmitted by everyone online

such as the size of the upload file,

Figure-QQ Mailbox Attachment size limit

For example, upload file format, upload photos when the user chose not a picture format of the file how to do? At first let TA only look at the picture file or check after the reminder?

Figure-QQ mailbox for EXE attachment restrictions

These restrictions are also from both business and technical considerations, such as photo albums can only pass 20 photos, upgrade to membership can be 50, this is the business restrictions. Browser albums can only pass 20 photos at a time, install Plug-ins or clients, can pass 50, this is a technical limit, consider the browser load.

In the face of the above input restrictions, the specific solution is of course varied, here are some rules: a. If it is a character input, the rules for calculating the number of Chinese characters. The rules are different and the design is different.

Figure-Sina Weibo is limited to 140 Chinese 280 English (of course there are a variety of other characters spaces)

B. How do I imply a restriction?

C. How do I get feedback when violating the rules? This issue will continue to be mentioned below.

D. Does the input control change according to the contents of the content? Is it directly solved with the scroll bar or is it the extension of the input box or the combination of the two? and so on.

Figure-Scroll bar appears

Figure-Extend Height

E. Don't forget the above content. When you draw an input box, think it's not a bottomless pit.

Two. All input, must consider the output. The dynamic content of the interface, may come from the input of the backstage edit, also may come from the foreground user's publication, in short, the interface dynamic content, is the first person input. The input of the person (especially the user) may not be considered after the effect of the show, but as a designer, we should consider for the user.

Consider the display of the excess content. This involves two aspects of consideration, first consider the constraints of the input time, we need to know exactly how much of a display space may be the maximum number of content (of course, sometimes input and output to consider, and ultimately the balance between the two sides). And then consider the content in the display space if the display is not complete, then what to do? The solution can be to display the index page as part of the page, and then to show the full details (there must be a place to display complete information),

You can also display part of the content and leave it for more expanded display.

or scroll bars to save and so on and so on.

If you have excess content, you may have blank content. How do i show when the search results are 0? When the user has not received any news, how to present? When a product in a category is empty, what to do? Don't forget to consider our design.

Figure-It's better to have a description than to let people think it's not loaded.

Figure-You can't always expect users to find results every time

In addition, there is the resolution of the matter. Whether it's a mobile terminal (especially Android) or a computer, the interface we're designing will appear on various sizes of monitors. This determines that we have to consider the suitability of the screen. For example, a PC on the pop-up layer, to determine the position of the button to ensure that the first screen, it should consider the mainstream (in the smallest) screen height. For example, a default full screen application wallpaper, how much suitable? Is it suitable for tiling or centering? Or is it adaptive? For example, a 480x800 screen can display 6 rows and columns, and a 480x854 screen can display more than one row.

Three. Every success will be considered a failure. Do not think that the user will always be able to operate correctly, err. This is a big topic, it involves how to prevent errors, how to remind after a mistake, how to give help, perhaps later on a special fuss. Here want to say is, sometimes do the design to do faint head, coupled with the progress of tension, often just the normal process to make, but forget, since the user operation, it may fail. For example, when the registration of some of the form items did not fill in, login password account does not match, drag files failed, paste pictures failed, and so on.

Figure-When the load fails

Edge is not the main content of our design, but it has to design, it embodies the intimate products, testing our careful, the devil in the details, do not forget their:).