UI / UE

1 interface design principles

1.1 UX and UI design basis

It refers to UI design of interactive software, operating logic, the overall design attractive interface. In recent years, in which the User Experience (UX / UE) gradually become the focus of product design.

User Experience (UX / UE) is a purely subjective experience built up in the user using the product. Good user experience is very important for users, in the era of the Internet, a positive and efficient user experience, users will continue to use your product. When the product to meet the needs of certain aspects of the user to help people improve the quality of life, improve work efficiency, improve relationships, etc., companies can profit from it.

The following diagram defines the product abstract level, from the most basic level "user needs" and "target site", with the rising level of abstract concepts gradually become concrete, we can directly see and finally to "visual design" level.

1.2 internal Web site design principles
intranet site is to serve the enterprise, the platform for employees to provide information and services, mainly in the information, functionality and speed of response to the focus. Therefore, with respect to the active site of the Internet, combined with large areas of graphics, a large blank area of design, in the intranet normally take simple, elegant, simple design.
1.3 color
scenario-based employees use internal Web site: usually query information, perform certain tasks (such as filling out job log, submit the application form) and so on. Users need to check in a lot of information, or in carrying out its work flow in the line of sight takes a long time to stay on the screen. Thus, for the choice of colors, backgrounds tend to choose the site for a long time staring at a white or gray in color; large text area will choose soft and easy color recognition; emphasized text often use corporate brand colors, in addition to You can enhance the beauty of this screen can also be used as auxiliary functions. In general large enterprise product information page, often a colored button it is easy to attract visual focus of the user.
1.4 presents information and tasks divided
within many networks usually function, also wanted to put all the functions once told the staff, the results lead to the user first came in the face of a huge amount of information has interface. In many cases, employees will know what to do or because some setbacks in the experience and lost the urge to continue down. In order to enhance the product's first impression of the staff, you can try to use the concept of progressive rendering to show the interface. For complex workflows, you will need to perform large tasks into smaller parts, each small task to bring the successful implementation of the incentive effect will be more beneficial to the entire staff to complete a big task.

1.4.1 space and line
information based on the large amount of information within the network features, you first need to streamline the presentation, and put together a list of relevant content organized. Increase the blank small area, reducing the use of lines can reduce the burden on the user's vision.

2 Nielsen's top ten design principles use in interactive design (taken from the Internet colleagues share)
Jakob Nielsen (Jakob Nielsen) is a human-computer interaction, Dr. graduated from Technical University of Denmark in Copenhagen, he has 79 US patents, patent mainly related to make the Internet easier to use the method. Nelson in June 2000, was named to the Scandinavian Interactive Media Hall of Fame, in April 2006, and is included in the American Computer Society Human-Computer Interaction Institute, he was given the Lifetime Achievement Award for human-computer interaction practice. He was also the New York Times called "Web usability guru" is Internet Magazine called "the king of the ease of use."

Jakob Nielsen (Jakob Nielsen) Ten interaction design principles are called "heuristics" because they are broad rule of thumb, rather than specific usability guidelines. Therefore, we can not turn it up as a standard, but rather as an experience to learn, and then combined with the reality designed to use.

A principle: Principles visible state (Visibility of system status)
Second principle: the principle of appropriate environment (Match between system and the real world)
Three principles: the principle of user-controllable (User control and freedom)
Four principles: the principle of consistency (Consistency and standards)
Principle V: error prevention principles (Error prevention)
Principle VI: easy to take the principle (Recognition rather than recall)
Seven principles: the principle of flexible and efficient (Flexibility and efficiency of use)
Principle 8: beautiful, minimalist principles (Aesthetic and minimalist design)
Principle 9: fault-tolerant principles (Help users recognize, diagnose, and recover from errors)
Principle X: humane principles help (Help and documentation)

2.1 Principle One: Status visible principle (Visibility of system status)
the system should allow users to always know what is currently happening, that is, to let users quickly understand what is in their own state, occurred in the past, the current target, as well as on the future direction understood, the general approach is to give the appropriate user feedback at the right time, to prevent user errors.

Case I: for example, today the pull-down refresh feature headlines: refresh headlines page using the drop-down refresh interactive way, when users scroll down, middle of the page status bar with content area will be "Happy New Year" message when I loose intermediate page will open a "recommendation" dynamic prompt, appeared in the middle after a loaded "today's headlines recommendation engine has eight updated" text prompts; this series of tips is what we call visible dynamic principles, as follows:

Case II: such as ease concerns in mind overtime and canceling Circles: When the user clicks the button concern, middle of the page will prompt a "concern successful", disappeared after staying 2S; this is similar, suggesting that after the operation is also visible state principle in one, as shown below:

2.2 Second principle: the principle of appropriate environment (Match between system and the real world )
software system should use familiar language, text, statement, or other users are familiar with the concept, rather than the system language. Your software should be as close to the real world, make information more natural, logical and more easily understood by the user.

Case I: for example, computer software interface design: Now we phone calculator software design interface, basically use with our reality calculator style is similar to the figure below left one is our real calculator is used, Left two, three mobile phones and Apple followed hammer X comes with a calculator interface software, is really very similar, this design allows users to quickly get started, easy to operate, because in real life users are already familiar with the use of a calculator this is the environment appropriate principles:

Case II: for example, Sina Bo Anzhuo of Chinese and international versions: Chinese version and the international version of the logo and internal microblogging page style, language, structure layout includes interactive mode are not the same; taking into account foreign customers use the software the default language is English, of course, also supports a variety of languages, can be adjusted in accordance with the desired settings, use another layout style interface in full compliance with the international version of Google's design specifications, this is the appropriate environmental principles, specific look:

2.3 Principle III: user-controllable principles (User control and freedom)
users often inadvertently to certain functions, we should give the user easy exit. In this case, we should "emergency exit" button to make the obvious point, but not an additional dialog box pops up when you exit. Many user sends a message, he suddenly realized that there is always something wrong place myself, this is called the critical effect; so the best support for undo / redo function.

Case I: such as micro-channel chats recall feature: two people chatting in the micro letter, I sent a message or expression, I suddenly felt inappropriate, I can press this message or expression, in the event selection box select withdraw and then re-edited and then sent to a moment thought good and avoid possible wrong message to the other party or causing distress yourself, which is user-controllable principles, specific look:

Case II: for example, Google album Undo function after deleting the picture: When using Google album, we have photos to do some operations, such as deleting pictures, when I delete a photo in Google album when it will be at the bottom a prompt box appears, box behind revoked prompt will appear, and this is reflected in the principles of user-controllable, specific look:

2.4 Principle IV: the principle of consistency (Consistency and standards)
for the user, the same text, status, buttons, should trigger the same thing, to comply with a common platform conventions; that is, the same terminology, functions, operations consistent. Compliance software products include the following five areas:
(1) structural consistency: maintain a similar structure, the new structure will let users change thinking, the order of the rules can reduce the burden on the user's thinking;

Case: for example, the entry for each module micro-channel layout: micro letter entry for each module has a unified "icon + text messages," the architectural style that allows users to quickly understand the circle of friends, sweep swept away, shake, look at a look, a search found near the man, drift bottles, shopping, games and applets and other features are for what, and this is reflected in structural integrity, as shown below:

(2) Color consistency: the main color products used should be uniform, not for a color page is different;

Case: such as color Netease cloud music: the main color and color of the icon interface Netease cloud music are red, as well as some of the label text color is red and emphasized, the entire interface in addition to the useful information of the picture, through gray , white and red to render the interface to maintain good consistency, which is the color consistency principle, as follows:

(3) Operation Compliance: still makes time to make product upgrading users to maintain awareness of the original product, to reduce the cost of learning the user;

Case: for example, Andrews micro-channel version, Alipay APP and nails in the upper left corner of the return operation: they return within three Android version of the application on an operation, are returned through the left side of the top of the button, of course, by Andrews the physical return key, which is reflected in the operation consistency, as shown below:

(4) feedback Consistency: When a user operation buttons or entries, click the feedback effect should be the same;

Case: such as open mobile QQ Android version List ways: its message is a list of structure, whether you click on that line entry, the next level of interface is slipping out from right to left, click on the button at the top left corner of the return slide back from left to right, the experience quite consistent; this is reflected in the consistency of feedback.

(5) Text consistency: the product presented to the user to read the text size, style, color, layout, and so should be consistent;

Case: for example, several key micro-channel interface font: text entry section of the figure below I used the red frame up, three main interface is different, however, font size, style, color, and layout are the same, so the whole visual APP on looks very comfortable, this is the font consistency, so we try to use the agreed text style when doing visual design.

2.5 Principle V: error prevention principles (Error prevention)
than a good reminder pop wrong way better design, is before this error to avoid it. Can help users exclude some cases, error-prone, or give him a confirmation option before the user submits. Here there must be prompt, with particular attention to the devastating effect the function of the user operation, to prevent user errors made irreversible.

Case I: Android version of such know almost login operation: When the user know almost registered, in the absence of filling out the phone number and password, login button at the bottom is grayed not clickable, just fill in the bottom two are complete login button will become clickable, there would be blue, which is to prevent users from committing more errors, but also a reflection of the principle of error-proofing, as shown below:

Case II: for example, when Andrews version micro letter friends circle dynamic, Return to prompt pop buttons that appear: pop-up box approach will increase the difficulty of irreversible operation, when a user send a dynamic half the time, because of misuse or other exit the current state of when using bombs windows are a good choice, because the hard edit user before this operation will be brought back to delete the contents, then send only want to start from scratch, the user loss is relatively large; this is another error prevention principles a reflection, as shown below:

2.6 Principle VI: Principles easy to take (Recognition rather than recall)
to reduce the load by user's memory assembly, option buttons, and visualized. Users do not need to remember information for each dialog box. Guide software should be visible, and can be viewed again at the right time.

Case I: for example, Google delete photos in the album Operation: After using a similar trash "icon" logo delete function for users, there is a certain cognitive load, and click the "Delete" and the consequences for users the impact is not clear, therefore, popups appear after deleting the prompt is necessary, this pop cleared after stated the impact of deleting the subsequent options and help explain the operation, a pop-up box well reduced users around memory, which is easy to take the principles embodied, as shown below:

Case II: New features such as the Android version iQIYI update the boot: After you've updated APP, when a user to trigger these functions, type the following figure tips Hoods will appear, where these prompts tell the user where and function the role of function; this practice will appear in a lot of APP, which is easy to take a manifestation of the principle of look:

2.7 Seven principles: the principle of flexible and efficient (Flexibility and efficiency of use)
Car Throttle - often invisible to novice users, but also for experts who can quickly interact with the car through it. Such a system can meet the experienced and inexperienced users simultaneously. It allows users to customize commonly used functions.

Case: for example, Andrews paid version editing application functions treasure: the application Alipay homepage can be customized according to their own preferences, including the definition of common applications, sort, delete, add, and so on; so users can customize their own according to their personal interests suitable applications in a distributed manner, which is called custom commonly used functions, which is a reflection of the principle of flexible and efficient, as shown below:

Case II: Android version such as QQ chat module commonly used expression: Android version of the QQ chat interface in the popups will face a "common expression" of the module, it is usually the personal use of the frequency or the highest number of expressions are classified, when a user uses when can quickly find your favorite or commonly used emoticons, chat improve the efficiency, good experience, and this is reflected in the principle of flexible and efficient, as shown below:

2.8 Principle 8: beautiful, minimalist principles (Aesthetic and minimalist design)
content of the dialogue should be removed almost no information or irrelevant information. Any irrelevant information will be important so that the original information is more difficult to detect the user.

Case I: Apple phone comes with software (IOS11 design specifications): comes with the new version of Apple's phone software belong in the title font size, simple interface design style; and Apple's own music software, the difference between the title and text of the paragraph is clear, obviously a great title, but a relatively small part of the body, and this is reflected in the beautiful simple principle, as shown below:

Case II: for example, Android version NetEase cloud music and QQ music player page: Netease cloud music and QQ music APP music player interface, from a visual and functional layout above do quite well, beautiful and simple, prioritize function, the user experience is good; also elegant and simple principle of a reflection, as shown below:

2.9 Principle 9: fault-tolerant principles (Help users recognize, diagnose, and recover from errors)
error messages should use simple language (do not use the code), points out what is wrong, and gives suggestions to solve. That is how to provide correct and timely help when it is user error user error? That is, to help users identify the error, analyze the cause of the error and then help the user back on the right path. If you really can not help you recover from an error, we should try to help allow users to minimize the loss for the user.

Case I: such as NetEase mailbox PC end of the registration interface: the user when the computer end 163 registered mail, not only will prompt an error in the input error, but also give the appropriate advice to help users correct choice, thus avoiding users appear bigger mistakes and improve the efficiency of the registration, which is a very good user experience, but also a reflection of the principle of fault-tolerant, as shown below:

Case II: for example, registration error Twitter page: Registered users Twitter account, the first step to enter the name and phone number, when the user enters the correct time, the input box circle behind the green check mark will prompt the user to enter the correct because it can enter the next step up, and when the user enters the wrong time, the input box will turn red and an error message appears in red at the bottom, so allowing users to clearly know the user input errors and wrong, so users I know how to modify, and this is a reflection of the principle of fault-tolerant, as shown below:

2.10 Principle X: humane principles help (Help and documentation)
even if the system does not apply help documentation is the best, but we should also provide a help document. Any help information should be able to easily search, the user's task at the core, the appropriate steps listed, but not too much text.

Case I: such as helping entrance Taobao APP and APP know almost login page: There are more important feature in the entrance of the need to provide appropriate help entry, to solve the problems encountered by users during the operation function entrance feedback or questions, do not let users know what to do when things go wrong, do not know how to do specific look:

Case II: for example, some commonly used on large software mac: prototyping tool Axure RP 8 software, image editing software Photshop CC and the Safari browser on mac, on the top status bar has a "Help" entry, but also reflects the need for the help documentation, so no matter what kind of products should help to provide a user entry, to solve problems encountered in the process of user operations, as shown below:

3 UI elements (The following is an actual project as an example)
3.1 layout plate
3.1.1 Home

3.1.2 Log Management page

3.1.3 Navigation with secondary page (for example, the case registration page)

3.2 text
Headline text (font family: Microsoft elegant black, font size: 28px, Color: # EE7600)
Banner title text (font family: Microsoft elegant black, font size: 20px, color: #FFFFFF)
text title text (font family : Microsoft elegant black, font size: 18px, color: # 333333)
# 333333): the MENU text (font family: Microsoft elegant black, font size: 16px, color
when the background color is light-colored, body text (font family: Microsoft Ya black, font size: 13px, color: # 333333)
background color when a dark, body text (font family: Microsoft elegant black, font size: 13px, color: #FFFFFF)
special link text (font family: Microsoft elegant black, font size: 13px, color: # EE7600 :)
explanatory text (font family: Microsoft elegant black, font size: 13px, color: # 9C9C9A)
copyright text (font family: Microsoft elegant black, font size: 13px, color: # 6B6B6B )
link text Hover effect
when the background color is light-colored, body text (font family: Microsoft elegant black, font size: 13px, color: # 333333, text- decoration: underline)
the background color when a dark, body text (font family : Microsoft elegant black, font size: 13px, color: #FFF FFF, text- decoration: underline)
Special link text Hover (font family: Microsoft elegant black, font size: 13px, color: # EE7600, text- decoration: underline)