Front End frame design concept

Write in front

The next period of time to focus on React the ReactNative project and the further components. I also first blow a cow, although it is a small team, but we are also determined to make a set of systematic things, for the moment to name it Royal . Prior to the commencement of work, we did some theoretical research, mainly the set of Ali developed ANT and Twitter Bootstrap , as the basis of scientific theory.

Ten Principles

"Good design is more difficult to find than poor design", because a good design is so natural that it helps the user to accomplish the goal easily, so that the user is unaware of the existence of a good design.

Note: The design principle is the abstract and summary of the design of the image, however, the product is a whole, users of the whole product of the cognition is from the global to the local, so ignore the overall, only in the local apply the principle is not advisable. For these principles, the "designer" should rationally learn it, and then bravely abandon it.

Intimacy of Proximity

If the correlation between information is higher, the distance between them should be closer and more like a visual unit, and conversely, the farther away they should be, the more they will be like multiple visual units. The fundamental purpose of intimacy is to be organized, giving users a clear view of the structure of the page and the level of information.

Longitudinal spacing Relationship

The information hierarchy is divided into three sizes, such as "small spacing", "Medium spacing", and "large spacing". Like what:

longitudinal spacing

In Ali's Ant Design, these three specifications are: 8px (small spacing), 16px (medium spacing), 24px (large spacing).

In cases where these three specifications are not applicable, the information level can be opened by adding a multiple of the "base spacing" or by adding elements.

Note: In Ant Design, Y=8+8*n. Where n>=0,y is the longitudinal spacing, and 8 is the "base spacing".

add element

This opens the hierarchy by adding "split lines".

Transverse spacing Relationship

In order to apply different sizes of screens, the grid layout is used horizontally to arrange the components, thus ensuring the flexibility of the layout.

Example of a composition arrangement

Example in check box

Note: Within a component, the horizontal spacing of the elements should also be different.

Align to alignment

As the continuum law of the Gestalt School describes, in the perceptual process people tend to continuity the straight line of the perceptual object, so that the curve continues to become a curve. In the interface design, the elements are aligned, both in accordance with the user's cognitive characteristics, but also to guide the visual flow, allowing users to receive information more smoothly.

Gestalt School (German: Gestalttheorie): It is one of the important schools of psychology, which arose in Germany in the early 20th century, also known as Gestalt Psychology, and advocated that the human brain works as a whole, "the whole is different from the sum of its parts". --Excerpt from "Wikipedia"

Copy class Alignment

If the field or paragraph of a page is shorter and more scattered, you need to determine a unified visual starting point.

Recommended examples

The title and body are left aligned, using a visual starting point.

Example not recommended

The title and text use two visual beginnings, which are not recommended unless the distinction is deliberately emphasized.

Form class alignment

Colon-aligned (right-aligned) allows the content to be locked within a certain range, allowing the user's eye to follow the colon's visual flow to find all the entries, thus improving the filling efficiency.

Alignment of numeric classes

To quickly compare numeric sizes, it is recommended that all values be of the same significant number and right-aligned.

Correct example

Error example

Compare contrast

Contrast is one of the most effective ways to add visual effects, while also creating an organized hierarchy between different elements, allowing users to quickly identify critical information.

Note: To achieve effective comparisons, contrast must be strong, not daunting.

Comparison of primary and secondary relations

To enable users to quickly make judgments on operations (like forms, popup boxes, and so on) to highlight one of the more important or higher-frequency operations.

Note: A prominent approach, not limited to strengthening the focus, may also be to weaken other items.

Correct example

Error example

In some scenarios that require careful decision-making by the user, the system should remain neutral and not be judged by users or by inducing users.

No distinction between primary and secondary

Comparison of total score relations

By adjusting the layout, font, size and other ways to highlight the level of sense, distinguish the total relationship, making the page more tension and rhythm.

Total relationship

Comparison of State relationships

By changing the color, adding auxiliary shapes and other methods to achieve the comparison of state relations, so that users better distinguish information.
Common types are "static contrast", "dynamic Contrast".

Static comparison

Use different color points to indicate different states.

Dynamic contrast

When the mouse hovers, the item and other items show a distinct visual effect in response to user action.

Repeat repetition

The same elements are repeated throughout the interface, not only to effectively reduce the user's learning costs, but also to help users identify the relationship between these elements.

Repeating elements

Repeating elements can be a thick line, a wireframe, some of the same color, design elements, design styles, some format, spatial relationships, and so on.

Wireframe Repeat

Repeating design elements

Repeating design elements

Straightforward make it Direct

As Alan Cooper puts it: "Where to export, where to allow input". This is the principle of direct operation. Eg: Do not open another page in order to edit the content, you should implement editing directly in the context.

In-page editing

Single field inline editing

Click Edit

When legibility is far more important than easy editing, you can use Click Edit.

• State one: Normal browsing mode, does not distinguish between editable lines and non-editable lines;
• State two: When the mouse hovers, the "pointer" changes to "hand", the editing area background to yellow, "ToolTips" prompt click Edit;
• Status three: When the mouse clicks, the input box, OK, cancel form elements appear, and the cursor is positioned in the input box.

Text Chain/Icon Editing

• Status one: A text chain/icon appears near an editable line;
• Status two: When the mouse clicks "Edit", the "input box", "OK", "Cancel" form elements appear, and the cursor is positioned in the "input box".

Multi-field inline editing

Note: In the case of multi-field inline editing, there is a big difference between what is displayed and what fields are required for editing, so it is more necessary to "explain what just happened" in the "clever transition" principle to eliminate this visual impact.

Edit mode without destroying the integrity of the premise, you can expand the space in order to put down the "input box" and other form elements, wherein the table in the editing mode switch, you need to ensure that each column does not beat.

Using drag-and-drop

You can only restrict drag and drop in one dimension (up/down or left/right).

Drag and Drop List

• State one: When the mouse hovers over the row, a movable "icon" appears;
• State two: Hover over the "icon", the pointer changes to "Hand", click can be dragged;
• State three: Drag to a block that can be placed, and a blue stroke informs the user that the chunk can be placed on the object.

Drag and drop Pictures/files

Stay on the Page

Can solve the problem on this page, do not go to other pages to solve, because any page refresh and jump will cause changes in the blind (change blindness), resulting in user flow (flow) is interrupted. Frequent page refreshes and jumps, just like when you're watching a play, the actor finishes a line and arranges a curtain call.

Transform blind view (change blindness): Refers to the psychological phenomenon that some changes in the visual scene have not been noticed by the observer. Causes of this phenomenon include obstacles in the scene, eye movements, changes in location, or lack of attention. --excerpted from the Wikipedia

Flow: There is also an alias in sublimation (Zone), also translated into the Shenchi state, defined as a kind of personal mental ability to fully bet on a certain activity of the feeling, the heart flow will also have a high degree of excitement and fullness. --excerpted from the Wikipedia

Cover Layer

Two confirmation overlay: avoid misuse of Modal for two confirmations, should be brave to let users try to give users the opportunity to "undo" can.

Recommended examples

When the user clicks "Delete", a message informs the user that the operation was successful and provides the user "undo" button, the user does the next action or does not do anything within 1 minutes, the message disappears and the user can no longer "undo".

Exception: When performing certain actions that cannot be undone, you can click "Delete" and the popconfirm will be confirmed two times to complete the task on the current page.

Example not recommended

Misuse of Modal for two confirmations, just like "Wolf", interrupts the user's flow (unable to bring the context into the popup box), or avoids mistakes.

Details covering layer

In the list, more details about the list item are loaded on the current page by the user "hover"/"click" On a chunk.

Note: When you use hover to activate, you need to set a delay trigger of about 0.5 seconds when the mouse moves, and close the overlay immediately when the mouse moves out.

See more details with the "click" icon.

Input cover Layer

On the overlay, let the user directly enter a few fields.

The mouse "click" icon to trigger the mouse "click" outside the suspended layer of other blocks, directly save the input results and exit.

Embedded Layer

List embedding layer: In the list, displays details of a list item, keeping the context uninterrupted.

List embedded Layer

tab page

It organizes and categorizes multiple peer information, displaying only one set of information at a time.

Virtual page

In the interactive process, "overlay" can display additional content and interactive links at the top of the current page, "embedded layer" can achieve the same effect within the page, and "virtual page" does not limit the mechanical age "page", can use the characteristics of the information age to build a new "page".

Process processing

For a long time, the way the WEB implements the process is to put each step on a separate page. While this approach is the simplest way to decompose a problem, it is not the best solution. For some process processing, it is more necessary to keep users on the same page at all times.

Progressive presentation

Progressively show different operational options based on user actions/specific rules.

Configuration Program

Configurator: Helps users complete tasks or assemble products by providing a range of configuration items.

Pop-up box overlay

Although pop-up boxes interrupt the user's flow, it is sometimes possible to use the "Step Bar" in the popup box to manage complex processes.

Simplify interaction Keep it lightweight

According to the Fitzer rule (Fitts's law), if the user's mouse moves less distance and the object's relative target is larger, the user is more likely to operate. Simplifies interaction by combining content and operations by using contextual tools (i.e., operations tools placed in content).

Fitzer rule: The time to reach the target is the function of reaching the target's distance and the target size, specifically: T =a+bl o g 2 (1+D/W )

Where: 1. The distance between the device's current position and the target location (D); 2. The target size (W). The longer the distance, the longer it takes, and the greater the target, the less time it takes.

Real-time visibility tools

If an operation is important, it should be placed in the interface and visible in real time.

• State one: A relatively obvious click area appears in the copywriting;
• State two: Mouse hover, the mouse "pointer" changed to "hand", the background changes, inviting users to click.
• Status three: After the mouse click, and no click before there is a clear distinction.

Hover Instant Tool

If an operation is less important, or if using the live View tool is too verbose to affect the user's reading, the action item can be displayed when hovering over the object.

When the mouse hovers, an action item appears.

Switch Display tool

If some operations only need to be displayed in a specific mode, they can be implemented by means of a switch.

When the user taps "modify", the "text" in the Table becomes "input box" and the editing function is turned on.

Tools in the interaction

If the operation is not important or can be done by other means, the tool can be placed in the user's operation process, reduce the interface elements, reduce the cognitive burden, to the user small surprise.

Recommended examples

When the mouse hover, appear tooltips to prompt, the user clicks the content to copy directly.

The system automatically copies the content when the mouse is selected or double clicked. By daring to guess the user's behavior and help complete, give the user a little surprise.

Example not recommended

A "icon" appears near the replicable content and is copied after clicking.

Viewable area ≠ clickable area

When you use Table, the click range of the text chain is affected by the length of the text, and you can set the entire cell as the hot zone for the user to trigger.

Text link Hot Zone example

When you hover over the text-link cell where the ID is located, the mouse pointer changes to hand, and you click to jump.

Button Hot Zone Example

You can activate the Hover state by moving the mouse around the button.

When you need to enhance the responsiveness of a button, you can enhance responsiveness without losing aesthetics by increasing the extent of the user's click on the hot zone instead of increasing the button shape.

Note: This is especially true on the mobile side.

Offer invitation provide invitation

Many rich interactive modes (eg: drag-and-drop, inline edit, contextual tools) have a common problem, which is lack of easy discovery. So the "offer invitation" is the key to the successful completion of human-computer interaction.

Invitations are reminders and hints that guide the user into the next level of interaction, usually including the signifier (eg: real-time hint) and availability to indicate what can be done on the next interface. The process of human-computer interaction is more natural and smoother when the perceptible part of the perceived affordance is represented as an signifier.

Signifier (signifiers): An additional hint that tells the user what behavior to take and how it should be done, and must be perceptible (eg: visual, auditory, tactile, etc.). --from "Design Psychology 1"

Availability (Affordance): also translated into "energy", proposed by James J. Gibson, defines the relationship between the characteristics of an item and the body's ability to determine the purpose of the object, partially perceptible (this part is defined as perceived affordance) and partially imperceptible. --from "Design Psychology 1"

Static Invitations

Refers to an invitation to provide a guided interaction on a page through a visual technique.

Bootstrap Action Invitation

Usually appear on the page in static form, but they can also be visually displayed in a variety of different styles. Common types: Text invitations, white-board invitations, unfinished invitations.

Roaming Discovery Invitations

is a great way to introduce new features to your users, especially for those with well-designed interfaces. But it is not a "band-post", only through it does not solve the real problem of interface interaction.

Note: Keeping the roaming process simple makes it easy for users to exit and restart, keeping the content concise and closely related to functionality.

A small number of "discovery points" appear when the user first logs in, and when the user clicks on "I know", they can quickly switch to the next point of discovery.

Dynamic Invitations

refers to providing a specific invitation in response to a user performing a specific action at a specific location.

Hover Invitations

Provide invitations during rollover.

When the mouse hovers over the entire card, it can be clicked to change to a blue "text chain".

When the mouse hovers, the Select this template button appears.

Inference Invitation

For the duration of the interaction, it is reasonable to infer the requirements that the user may incur.

After the user clicks on "likes", the system analysis (since the user likes this article, then may be interested in this kind of article) and provide open "budget-conscious" invitation.
Inference invitation: For the duration of the interaction, reasonably infer the user's potential requirements.

More content Invitations

Used to invite users to view more content.

In the Modal, the arrows will appear before and after switching.

Skillfully using the transition use Transition

Gray Matter is sensitive to dynamic things (eg: movement, deformation, color change, etc.). In the interface, appropriate to add some transition effect, can keep the interface vivid, but also can enhance the user and interface communication.

• Adding: The newly added information element should be told how to use it, and the information element that is transformed from the page needs to be re-identified.
• Receding: Information elements that are not related to the current page should be removed in the appropriate way.
• Normal: Refers to information elements that have not changed from the beginning of the transition to the end.

Keep context when view changes

• Slide in and slide out: You can effectively build virtual space.
• Conveyors: can greatly expand virtual space.
• Collapse window: helps to maintain context while the view is toggled, and also expands virtual space.

To explain what just happened.

• Object added: A new object has been added to the list/table.
• Object deletion: In the list/table, an object is deleted.
• Object change: An object has been changed in the list/table.
• Object Outbound: Click on the element in the page to call out a new object.

Improve perceived performance

When "real performance" cannot be effectively improved, consider transferring the user's attention appropriately to shorten the perceived time of an operation and improve perceived performance.

Instant reaction react Immediately

The powerful embodiment of "offer invitation" gives feedback before interaction, solves the problem of easy to find; the usefulness of "clever transition" is reflected in its ability to provide visual feedback to the user during the interaction; the importance of "instant response" is reflected in the feedback immediately after the interaction.
Just as the "Newton Third Law" describes the force and reaction, the user to operate or the internal data has changed, the system should immediately have a corresponding feedback, while the input magnitude, the greater the importance of the higher the feedback magnitude, the greater the importance.
While too much feedback (and, to be exact, too much error feedback) is a problem, a system with too little feedback or even no feedback makes people feel dull and clumsy and the user experience worse.

Newton's third law: When two objects interact with each other, they are applied to each other's forces, which are equal in size and opposite in direction. --excerpted from the Wikipedia

Query mode auto-complete

When the user enters, the drop-down list displays matches as the keyword is entered. According to the results of the query, the classification can be divided into two types: "Determination of category" and "indeterminate category".

Users query the keywords, only in the "topic", "question", "article" the 3 categories appear.

The keywords that the user queries, the number of categories they belong to is uncertain, maybe 4, maybe 5, maybe more.

Real-time Search

Displays search results in real time as the user enters. Close relatives of "autocomplete", "real-time recommendations".

The user enters a search value and the query results are displayed.

Fine-Tune Search

Adjust the search structure in real time as the user adjusts the search criteria. Specifically visible: "Mode/Advanced Search".

Feedback mode real-time preview

Before the user submits the input, let him know how the system will handle his input.

Note: The best way to fix the error is to not let the error happen. "Real-time preview" is a good design to avoid mistakes.

Provides real-time feedback on password strength and effectiveness, based on user input.

Progressive presentation

Provide the necessary hints when necessary, rather than peremptorily display all hints, resulting in a confusing interface and increased cognitive burden. Examples are described in the "home/Progressive show".

Progress indicator

When an operation takes a certain amount of time to complete, it is necessary to inform the progress immediately and keep the communication with the user. Common progress Indicators: "button load", "Table Load", "Rich List Load", "page load". Different types of progress indicators can be displayed depending on the magnitude and importance of the operation.

Click Refresh

Inform users of new content and provide tools such as buttons to help users view new content.

Timed Refresh

New content is displayed regularly without user intervention.

The new list item "highlight", which lasts a few seconds, returns to normal.

Design Base Font Fonts

Cross-platform font settings, to achieve the best performance under each operating system.

Font family

• Chinese font family

• English text Body Family

The font family CSS code is as follows

font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;

Typesetting typography

Good typesetting standards can greatly enhance the user's visual experience.

Row heights and paragraphs

Given the comfort and rhythm of reading, there is a need for proper spacing between sentences and paragraphs. The line spacing decides the vertical distance of each line of text in the paragraph, which is controlled by the line height of the font itself, and we gaumer 1.5 times times the font size. Paragraph spacing decides the spacing between the paragraphs, usually the width of the font size.

Punctuation and spaces

• Use full-width Chinese punctuation.
• Meet the complete English sentence, the special noun, its contents use half-width punctuation.
• Numbers use half-width characters.
• Punctuation is not reused.

whitespace specification

• Space is required between Chinese and English.
• You need to add spaces between numbers and units. Exceptions: There is no need to add spaces between degrees, percentages, and numbers.
• Add spaces between Chinese links.

Text background

When the text and background contrast is less than a certain ratio, the human eye recognition text information will become laborious, especially in the case of bright outdoor or shaking.

Methods: If the color background, color de-color to black and white, respectively, to absorb and view the background and text of the HSV color values. The difference between the V value of the two is the contrast difference between light and dark. This contrast difference is recommended to be no less than 40.

Align left to Chi Zhongwen/English

Both Chinese and English are left-aligned, because the reading order of text is usually left to right.

Digit/decimal Alignment

Numbers are usually aligned by right or decimal points, which makes it easier to compare numbers on a Chichong bit.

Colon alignment

A colon-aligned approach is especially common in forms. Mainly to distinguish the title and content blocks, in addition to beautiful and concise, so that users can quickly see the title to reduce the probability of error.

Copy length

Language is usually the simpler the more clear, and the hint of text needs to be concise, let the user at a glance, reduce the operation error. The prompt sentence length depends on the business, the proposal generally does not exceed 16–18 words.

Keep a concise and accurate approach:

• Each sentence contains only one point of view;
• Use of definite words;
• Use the active voice as much as possible with less passive voice;

Hierarchical guidance

We usually use the contrast of the method to distinguish the level of information, information can be clearly defined to accurately communicate the information to the user, so that users get the information needed at the first glance, improve the reading experience.

Squint test

We can use the method of fuzzy testing, that is, narrowing the eyes from the whole to examine the structure of reasonable or not.

Color colors Meaningful color

The use of color in interface design should be both brand identification and interface design functionality. It is well known that color is quite emotional, the use of color in the design of the first should take into account the brand level of expression, another important point is that the use of color should be used to achieve information transmission, action guidelines, interactive feedback, or strengthen and highlight an element of the purpose. The selection and use of any color should be meaningful. It is well known that color is quite emotional, the use of color in the design of the first should take into account the brand level of expression, another important point is that the use of color should be used to achieve information transmission, action guidelines, interactive feedback, or strengthen and highlight an element of the purpose. The selection and use of any color should be meaningful.

Ant Design Colors

Ant Design's color palette consists of 9 basic colors, each of which is derived from the nine, which can also be used to achieve the effect of color shading by means of black and white overlay.

Color and interactivity

The design element itself can cause a series of subtle visual changes due to the interaction behavior, and the color change of the element itself is sometimes a good idea for this purpose. In this design, it is advisable to add black or white on the color and follow the pattern of n+5%. For example, when the mouse hover a particular element, it is regarded as floating, corresponding to the color of the corresponding increase in white overlay, the opposite click of the behavior can be understood as press down, in the color of the corresponding increase in black overlay.

Color recognition

Appropriate color contrast for the information to convey the points, but also to take into account the needs of people with color recognition. We have marked each color derived from the main color, when considering the choice of contrasting colors, it is recommended that the difference between the two color corresponding label values is greater than or equal to 5.

Common layout Layouts

Layout and navigation is the skeleton of the product, is one of the important structure of the page, is the basis for the follow-up page design, can lay the interactive and visual style for the product.

The layout and navigation design specifications for ANT design are as follows:

Dimension rules

The first level navigation item is left close to the logo place, the auxiliary menu is placed on the right.

• Top navigation (most systems): first-level navigation height 64px , level two navigation 48px .
• Top Navigation (Display Class page): First level navigation height 80px , level two navigation 56px .
• The range of the top navigation height is calculated as: 48+8n .
• The range of the side navigation width is calculated as a formula: 200+8n .

Interaction Principles

• First-level navigation and final navigation need to be emphasized at the visual level;
• The current item should have the highest priority on the rendering;
• When the navigation is closed, the style of the current item is automatically assigned to its previous level;
• The retractable interaction of the left navigation bar supports both accordion and fully unfolded styles, making the right choice according to the requirements of the business.

Visual principles

The navigation style requires a reasonable selection of styles based on the information hierarchy:

• Big color block emphasizes
  Recommended for navigation items that are the parent of the current page when the background color is dark.
• Highlight Match Sticks
  used when the navigation bar has a light color system, can be used for the current page corresponding to the navigation items, it is recommended to use the final item in the navigation path as far as possible.
• Font Highlighting Color
  From the visual level, the visual intensity of the font highlighting is less than the large color block and is usually used at the top level of the current item.
• font magnification
  12PX, 14PX is the standard size of the navigation, font 14th is used in secondary navigation. The font size can be selected by considering the level of the navigation item.

In the large-medium backend system, ant design uses two common layout forms, the top navigation layout and the side navigation layout, and the following collects the basic layout of the back-end products using Ant design.

Component Animation motion component animation

Easing function

Summarize

The Ali ant Framework is very powerful and covers almost every aspect of project development, but has one drawback. She is very bloated, and this is a powerful unavoidable problem. I have a single page application project, Webpack packaged well after about 500k, but once introduced ant framework, size reached 5M, for the moment not to mention the subsequent optimization, I do not need to use ant all things, maybe some component or Layout , actual utilization is actually less than 10%. For free developers, I prefer to choose separate and low-coupling components.

In contrast, Bootstrap's customizable features are a very good design concept. The longer the component works, the more it feels that the previously written components are not good enough. If a Web project is likened to a glass of water, it is actually made up of countless water molecules, but the water molecule is made up of hydrogen atoms and oxygen atoms, and atoms are made up of protons and neutrons .... So the problem of component coupling is always entangled.

So what is a good component library? Not the best, but it must be relatively independent, configurable, customizable, and can be as ubiquitous as an atom. This is not to say that Ant is bad, if you want to use the whole set of ant to do development, she will make you feel more convenient and tall, or to choose according to demand.

@ Reference "Customizing and Downloading Bootstrap"
@ refer to "Ant Design"
@ Jafeney

Front End frame design concept