"The road to the design of the Web front-end of great Qiao" study notes

Front-end design like a person's dress and appearance, site design is always the first to attract people's attention. Whether the layout is reasonable, whether the style is brief, whether the color is harmonious, whether the flow is smooth, whether the operation is convenient, these front effects affect the user's recognition of the site. With the advent of more and more front-end terms such as user experience, usability, interactivity, front-end design is not simple HTML, CSS, Ajax and other elements of the integration, it is more concerned about the fluency of interaction, ease of operation, the rationality of the process, the clarity of the structure and maintainability, page compatibility and good bridging with the backend program, should be able to truly understand the needs of the Web application based on the overall perspective, grasp the entire front-end design, so the new era has given the front-end developers a new mission, the industry needs all-round development personnel.

1. Visual design

Learn about Web typography and interactive art, PS, some ways to learn about Web applications: layout, typography, fonts, colors, forms, etc., to provide users with a good visual experience

2. Interactive design

Emphasis on usability: measured in terms of effectiveness, efficiency, and satisfaction of three dimensions. Effectiveness: The user can complete the task; efficiency: How quickly the user completes the task; satisfaction: Whether the user is enjoying the process of completing the task.

Open the Web page, do you really want your attention message to appear in the most visible position? Do you like a certain operation because it is relatively simple? Do you want to see only what you want on the page?

Summary: 3 characteristics of the User: lazy, hate, have ideas.

Design time to follow the user-centric design principles: UCD (user-centered design): That is, user-centric product development and maintenance, everything from the user's feelings and needs, rather than let users to adapt to the product, to do this, we must always pay attention to user habits , visual experience, interactive mode, and other details.

Tools: Axure RP, primarily for experts responsible for defining requirements, design features, design interfaces, including UX Designer, interactive designer UI, business analyst BA, information architect IA, usability expert UE, and product manager pm

Prototype design and customer communication have undergone the following reforms:

1. More efficient design possible

2. Experience a dynamic prototype

3. Communicate ideas more clearly

The production line block diagram should be noted:

1. Requirements: Requirements

2. Streamlining: Reduction

3. Rule: Regularity

4. Refactoring: Refatoring, understood to work in the field of programming in order to improve the quality of the code. That is improvement.

Using PNG, a lossless bitmap image compression format, has more practical advantages over the current GIF image format:

1. Higher compression ratio

2. Higher color depth

3. Transparent color based on alpha channel

Color:

Humans can perceive wavelengths of light waves from 380nm to 780nm, meaning that we can perceive the multicoloured world. The balanced color makes the person comfortable, the abrupt color lets the person be vexed. For example, the design of the IBM Notebook black-based, and then with a red dot, so that the overall look coordinated and eye-catching.

Three elements of color:

Hue: The primary feature of the color, such as red, yellow, and blue, is the hue in the color attribute.

Saturation: The purity of the color, the more the number of colors mixed, the lower the purity. Design: The similarity of saturation can make the design more cohesive.

Lightness: The brightness of the color. The color has the depth, the light and shade change. White has the highest value and lowest black.

Popular color:

1. Monochrome Color System: stable

2. Similar color matching: colors of the same color

3. Complementary color Matching

4. Three-color color matching

Optimization of page content:

1. Reduce the number of requests

1) Merging files

2) CSS Sprites: Put all the background images into a picture file, note: Can not be abused, late maintenance difficulties; If the cache policy is well done in the system architecture, the same technique can be used as low as possible because the first load time becomes longer.

3) Eliminate duplicate scripts: Bring extra HTTP requests and JavaScript operations, affecting page performance.

2. Reduce the interactive communication channel

2.1 Compression Technology

1) Compression: Compress JavaScript and CSS, reduce file size, save download time

2) Optimize Image: Use "Save as Web format" in PS to save cut picture, can output image for Web quality. (png,jpg,gif)

Which: GIF only 256 colors, not easy to display color-rich images, small icons, support small animation, JPG format compression is relatively high, so suitable for photo class image. The PNG format contains PNG-8 and true-color PNG-24 or PNG-32, is smaller in size and supports alpha channels and does not support animations.

3) Reduce Cookie volume

2.2: Reasonable use of cache

1) with external JavaScript and CSS, you can increase the speed of page loading because external files can generate caches in the browser and reduce the size of HTML documents. If JavaScript and CSS are built into HTML, they are re-downloaded with the HTML document each time they are requested, and are more noticeable when the user accesses multiple pages in the site.

2) Caching Ajax

Ajax can realize asynchronous communication between front-end and background services, so that the browser can get the data without refreshing the whole page, bring the good experience, it is equally important to get an asynchronous HTTP response quickly, and the most important thing to improve the performance of Ajax is to make the response cacheable.

2.3. Reduce the amount of unnecessary traffic

1) Remove unused scripts and styles.

2) Delay Loading content

3) using get to complete the AJAX request, using the Post method needs to first send the file header, and then send the data. For post, only one TCP packet is sent (unless there are many cookies), but the maximum length of the URL in IE is 2K, so if you send a data that is more than 2K, you cannot use get.

4) Use no cookie request for static content.

3. Reasonable use of "parallel"

3.1 Minimizing redirects

3.2 Using IFRAME with caution

3.3 Styles on top

3.4 Scripts are placed behind styles to load

4. Save system consumption

4.1 Avoid using CSS expressions

4.2 Avoid using filters

Two IE and parsing css bug,28 a common bug, 4 layout bugs, 6 can bypass the bug. (Personal advice: do not need to deliberately to remember, when encountering a bug, according to the actual situation of flexible response to good)

"The road to the design of the Web front-end of great Qiao" study notes