From 7f1222f2714072a38d57ca17d016014f0cf2caaf Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Sun, 31 Jul 2016 10:17:07 +0800 Subject: [PATCH] docs: translate specification (#2377) --- docs/spec/alignment.en-US.md | 39 +++++++ .../spec/{alignment.md => alignment.zh-CN.md} | 0 docs/spec/contrast.en-US.md | 50 +++++++++ docs/spec/{contrast.md => contrast.zh-CN.md} | 0 docs/spec/introduce.en-US.md | 35 ++++++ .../spec/{introduce.md => introduce.zh-CN.md} | 2 +- docs/spec/invitation.en-US.md | 81 ++++++++++++++ .../{invitation.md => invitation.zh-CN.md} | 0 docs/spec/lightweight.en-US.md | 78 ++++++++++++++ .../{lightweight.md => lightweight.zh-CN.md} | 0 docs/spec/principle.en-US.md | 46 ++++++++ .../spec/{principle.md => principle.zh-CN.md} | 2 +- docs/spec/proximity.en-US.md | 37 +++++++ .../spec/{proximity.md => proximity.zh-CN.md} | 0 docs/spec/reaction.en-US.md | 75 +++++++++++++ docs/spec/{reaction.md => reaction.zh-CN.md} | 0 docs/spec/repetition.en-US.md | 19 ++++ .../{repetition.md => repetition.zh-CN.md} | 0 docs/spec/stay.en-US.md | 102 ++++++++++++++++++ docs/spec/{stay.md => stay.zh-CN.md} | 0 docs/spec/transition.en-US.md | 80 ++++++++++++++ .../{transition.md => transition.zh-CN.md} | 0 22 files changed, 644 insertions(+), 2 deletions(-) create mode 100644 docs/spec/alignment.en-US.md rename docs/spec/{alignment.md => alignment.zh-CN.md} (100%) create mode 100644 docs/spec/contrast.en-US.md rename docs/spec/{contrast.md => contrast.zh-CN.md} (100%) create mode 100644 docs/spec/introduce.en-US.md rename docs/spec/{introduce.md => introduce.zh-CN.md} (98%) create mode 100644 docs/spec/invitation.en-US.md rename docs/spec/{invitation.md => invitation.zh-CN.md} (100%) create mode 100644 docs/spec/lightweight.en-US.md rename docs/spec/{lightweight.md => lightweight.zh-CN.md} (100%) create mode 100644 docs/spec/principle.en-US.md rename docs/spec/{principle.md => principle.zh-CN.md} (99%) create mode 100644 docs/spec/proximity.en-US.md rename docs/spec/{proximity.md => proximity.zh-CN.md} (100%) create mode 100644 docs/spec/reaction.en-US.md rename docs/spec/{reaction.md => reaction.zh-CN.md} (100%) create mode 100644 docs/spec/repetition.en-US.md rename docs/spec/{repetition.md => repetition.zh-CN.md} (100%) create mode 100644 docs/spec/stay.en-US.md rename docs/spec/{stay.md => stay.zh-CN.md} (100%) create mode 100644 docs/spec/transition.en-US.md rename docs/spec/{transition.md => transition.zh-CN.md} (100%) diff --git a/docs/spec/alignment.en-US.md b/docs/spec/alignment.en-US.md new file mode 100644 index 0000000000..c1bc12f24a --- /dev/null +++ b/docs/spec/alignment.en-US.md @@ -0,0 +1,39 @@ +--- +category: 十大原则 +order: 2 +title: Alignment +--- + +As is described in the Law of Continuity of Gestalt psychology, in the perceptual process, people usually tend to understand the object in the way that it is firstly perceived, to let the straight lines be straight and let the curve lines be curve. In the design of interface, aligning the elements meets users’ perception, also delivers the information to users in a more smooth way. + +> ** Gestalt psychology or gestaltism（German：Gestalttheorie）** ：Gestalttheorie is an important genre of psychology. It rose in the beginning of the 20 century in Germany.The central principle of gestalt psychology is that the mind forms a global whole with self-organizing tendencies.『The whole is other than the sum of the parts.』--Quote from Wikipedia + +--- + +## Text Alignment + +good example + + +If the paragraphs or the length of the words are too short or too loose, then a unified visual starting point is needed. + + +--- + +## Form Alignment + +example of colon alignment + +Colon alignment(right-align) can encircle the content into a certain range. Users can infer where the chart is through the regular arranged colon so that the speed of filling in the chart can be speeded up. + + +More ways of aligning，please visit [(/docs/pattern/form#对齐方式)](/docs/pattern/form#对齐方式)。 + +--- + +## Numbers Alignment + +good example +bad example + +To compare the numbers faster, we suggest that all numbers should keep the same digit numbers after decimal point; meanwhile all numbers should be right-aligned. 。 diff --git a/docs/spec/alignment.md b/docs/spec/alignment.zh-CN.md similarity index 100% rename from docs/spec/alignment.md rename to docs/spec/alignment.zh-CN.md diff --git a/docs/spec/contrast.en-US.md b/docs/spec/contrast.en-US.md new file mode 100644 index 0000000000..455a1f7a93 --- /dev/null +++ b/docs/spec/contrast.en-US.md @@ -0,0 +1,50 @@ +--- +category: 十大原则 +order: 3 +title: Contrast +--- + +Contrast is one of the effective ways to add visual interest to your page, and to create an organizational hierarchy among different element that aid user in finding the information quickly. + +> Note: The important rule for contrast to be effective, it must be strong. Don't be wimp. + +--- + +## The Contrast of major and minor relationship + +good example +bad example + +In order to help user make a quick operation (something like the form，modal), a more important operation or a operation with higher frequency would be emphasized. + + +> Notes: ways of emphasizing are not just to intensify the key item. It could also weaken the other items. + + +
+ +Example of ignoring the primary and secondary sequence + +When there’s something needs users to make decision prudently, the system should remain neutral. It shouldn’t make the decision for users or lead them to make judgement. + +--- + +## Contrast of whole and part + +Example of whole and part 1 + +Example of whole and part 2 + +Taking advantage of changing the typesetting, the typeface and the size, we highlight the different levels and differentiate the ensemble and the part, which would make the page be more flexible and rhythmic. + +--- + +## Contrast of the state relation + +Example of static contrast + +Example of dynamic contrast + +Taking advantage of changing colors and adding assistant shapes, we realize the comparison of state relation, which could help users differentiate various information better + +The forms we usually see include 『static contrast』 and 『dynamic contrast』. diff --git a/docs/spec/contrast.md b/docs/spec/contrast.zh-CN.md similarity index 100% rename from docs/spec/contrast.md rename to docs/spec/contrast.zh-CN.md diff --git a/docs/spec/introduce.en-US.md b/docs/spec/introduce.en-US.md new file mode 100644 index 0000000000..d9e542f725 --- /dev/null +++ b/docs/spec/introduce.en-US.md @@ -0,0 +1,35 @@ +--- +order: 0 +title: Ant Design +--- + +
+ +
+ +In the development process of middleware products, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development. After massive project practice and summaries, Ant Design, a design language for middleware, is refined by Experience Technology Department of Ant Financial, which aims to uniform the user interface specs for middleware projects, reduce the unnecessary cost of design differences and implementation and liberate the resources of design and front-end development. + +Ant Design, created specially for middleware design, is committed to improving the experience of users and product designers. User interface designers and user experience designers, collectively, are considered as product designers, and the boundaries of product managers, interaction designers, visual designers, front-end developers and develop engineers are blurred. Taking advantage of unitary specifications, Ant Design makes design and prototype more simple and accessible for all project members, which comprehensively promotes experience and development efficiency of middleware products. + +--- +## Our Service Recipients + +- Ant Financial +- Alibaba +- Koubei +- China Internet Plus +- Didi + +> If your company or products use Ant Design, welcome to click [here](https://github.com/ant-design/ant-design/issues/477) to leave a message. + +## Front-end Implementation + +[React](http://facebook.github.io/react/) is used to encapsulate a library of Ant Design components. Any other version of frameworks to implement is also welcome. + +- [Ant Design of React](/docs/react/introduce)（official implementation） +- [vue-antd](https://github.com/okoala/vue-antd) +- [antd-ember](https://github.com/idcos/antd-ember) + +## How to Contribute + +Welcome to contribute to Ant Design on Github. If you have any suggestions for improvement, questions,or concerns, do not hesitate to create [Pull Request](https://github.com/ant-design/ant-design/pulls) or advice us [here](https://github.com/ant-design/ant-design/issues). diff --git a/docs/spec/introduce.md b/docs/spec/introduce.zh-CN.md similarity index 98% rename from docs/spec/introduce.md rename to docs/spec/introduce.zh-CN.md index 1bfde350f0..db93c6ce1c 100644 --- a/docs/spec/introduce.md +++ b/docs/spec/introduce.zh-CN.md @@ -1,6 +1,6 @@ --- order: 0 -english: Ant Design +title: Ant Design ---
diff --git a/docs/spec/invitation.en-US.md b/docs/spec/invitation.en-US.md new file mode 100644 index 0000000000..093bbc9957 --- /dev/null +++ b/docs/spec/invitation.en-US.md @@ -0,0 +1,81 @@ +--- +category: 十大原则 +order: 8 +title: Provide an Invitation +--- + +A common problem with many of these rich interactions (e.g. Drag and Drop, Inline Editing, and Contextual Tools) is their lack of discoverability. Providing an invitation to the user is one of the keys to successful interactive interfaces. + +Invitations are the prompts and cues that lead users through an interaction. They often include just-in-time tips or visual affordances that hint at what will happen next in the interface. + +> ** Signifiers ** are signals, communication devices. These signs tell you about the possible actions; what to do, and where to do it. Signifiers are often visible, audible or tangible, from the Design of Everyday Things. + +> ** Affordances ** are the relationships (read: possible actions) between an object and an entity (most often a person). The presence of an affordance is determined by the properties of the object and of the abilities of the entity who's interacting with the object, from the Design of Everyday Things. + +--- + + +## Static Invitations + +By providing cues for interaction directly on the page we can statically indicate to the user the expected interface behavior. Static Invitations provide cues directly on the page. + +
+ +example of Text Invitation + +example of Blank Slate Invitation + +example of Unfinished Invitation + +Call to Action Invitations are generally provided as static instructions on the page. But visually they can be provided in many different ways such as Text Invitation, Blank Slate Invitation and Unfinished Invitation. + +
+ +example 1 of Tour Invitation + +example 2 of Tour Invitation + +Tour invitation can be a nice way to explain design changes to a web application, especially for a well-designed interface. But providing tours will not solve the real problems an interface may have during interaction. + +>Note that make Tour Invitations short and simple, easy to exit, and clear to restart. + + +
+ +--- + +## Dynamic Invitations + +Dynamic Invitations engage users at the point of the interaction and guide them through the next step of interaction. + +
+ +example 1 of Hover Invitation + +example 2 of Hover Invitation + +Hover Invitation: Provide an invitation during mouse hover. + + +
+ +example of Inference Invitation + +Inference Invitation: Use visual inferences during interaction to cue users as to what the system has inferred about their intent. + +
+ +example of More Content Invitation + +More Content Invitation: Indicate that there is more content on the page. + + +
+ +
+ +

Affordance Invitation (coming soon)

+ +
+ +

Drag and Drop Invitation (coming soon)

diff --git a/docs/spec/invitation.md b/docs/spec/invitation.zh-CN.md similarity index 100% rename from docs/spec/invitation.md rename to docs/spec/invitation.zh-CN.md diff --git a/docs/spec/lightweight.en-US.md b/docs/spec/lightweight.en-US.md new file mode 100644 index 0000000000..10c02e16c5 --- /dev/null +++ b/docs/spec/lightweight.en-US.md @@ -0,0 +1,78 @@ +--- +category: 十大原则 +order: 6 +title: Keep it Lightweight +--- + +Fitts’s Law is an ergonomic principle that ties the size of a target and its contextual proximity to ease of use.In other words, if a tool is close at hand and large enough to target, then we can improve the user’s interaction. Putting tools in context makes for lightweight interaction. + + +> +>** Fitts's Law **: The time to acquire a target is a function of the distance to and size of the target. It is proportional to the distance to the target and inversely proportional to the width of the target. + +--- + +## Always-Visible Tools + + +example of Always-Visible Tools, from Zhihu + +If an action is critical, expose it directly in the interface and keep it always visible. + +
+ +--- + +## Hover-Reveal Tools + + +example of Hover-Reveal Tools + +Instead of making Contextual Tools always visible, we can show them on demand. One way to do this is to reveal the tools when the user pauses the mouse over an object. + +
+ +--- + +## Toggle-Reveal Tools + + +example of Toggle-Reveal Tools + +Toggle a tool mode for an area or page when the actions are not the main flow. The tools to accomplish this are revealed on the activation of the toogle. + + +
+ +--- + +## Interaction in Context + +good example + +good example + +bad example + + +If the actions are secondary or alternative, hide Contextual Tools in the user flow, in order to keep visual clutter to a minimum, reduce the load of cognition burden and bring a surprise. + +Some relative knowledge of [Providing an Invitation](/docs/spec/invitation) can also be applied. + +
+ +--- + +## Visible Area ≠ Clickable Area + +example of hypertext hot spot + +The clickable area of hypertext is affected by the length of the stirng in a cell. The while cell can be set to a hot spot in order to be triggered easier. + +
+ +example of button hot spot + +Increase the clickable hot spot to strenthen the responsiveness rather than increase the size of the button. + +>Note that it is especially suited for Mobile. diff --git a/docs/spec/lightweight.md b/docs/spec/lightweight.zh-CN.md similarity index 100% rename from docs/spec/lightweight.md rename to docs/spec/lightweight.zh-CN.md diff --git a/docs/spec/principle.en-US.md b/docs/spec/principle.en-US.md new file mode 100644 index 0000000000..2fc55c10d6 --- /dev/null +++ b/docs/spec/principle.en-US.md @@ -0,0 +1,46 @@ +--- +category: 十大原则 +order: 0 +title: Introduction +--- + +“It is more difficult to find good design than bad ones. ” Because good design are so natural, it can help users to easily meet the targets, so that the users are not aware of the existence of good design. + +After referring to the summary and reasoning of design principles from The Non-Designer’s Design Book” and “Designing Web Interfaces”, and combining with our practice and understanding of the team, we developed the following ten principles, which provide specific criteria and enlightenment of the solutions to problem for designers. + +> Note: the design principle is the abstraction and summary of representational design. However, users’ perception of the entire product is from global aspect to local aspect. So it is not desirable to ignore the full picture and only use partial principles. For the design principles, designers should learn them rationally, and then abandon them bravely. + +--- + +
+ + + + 写给大家看的设计书 + 作者: Robin Williams + 出版社: 人民邮电出版社 + + + + + + Web 界面设计 + 作者: Bill Scott / Theresa Neil + 出版社: 电子工业出版社 + + +
+ +#### Ant Design 十大设计原则 + +- [亲密性 Proximity](/docs/spec/proximity) +- [对齐 Alignment](/docs/spec/alignment) +- [对比 Contrast](/docs/spec/contrast) +- [重复 Repetition](/docs/spec/repetition) +- [直截了当 Make it Direct](/docs/spec/direct) +- [简化交互 Keep it Lightweight](/docs/spec/lightweight) +- [足不出户 Stay on the Page](/docs/spec/stay) +- [提供邀请 Provide Invitation](/docs/spec/invitation) +- [巧用过渡 Use Transition](/docs/spec/transition) +- [即时反应 React Immediately](/docs/spec/reaction) + diff --git a/docs/spec/principle.md b/docs/spec/principle.zh-CN.md similarity index 99% rename from docs/spec/principle.md rename to docs/spec/principle.zh-CN.md index 0df44d9d9a..39ae8599e0 100644 --- a/docs/spec/principle.md +++ b/docs/spec/principle.zh-CN.md @@ -2,7 +2,7 @@ category: 十大原则 order: 0 subtitle: Introduction -english: 引言 +title: 引言 --- 『好设计比差设计更难发现』，因为好设计是如此的自然，帮助用户轻松的完成目标，以至于用户根本意识不到好设计的存在。 diff --git a/docs/spec/proximity.en-US.md b/docs/spec/proximity.en-US.md new file mode 100644 index 0000000000..f8929117c1 --- /dev/null +++ b/docs/spec/proximity.en-US.md @@ -0,0 +1,37 @@ +--- +category: 十大原则 +order: 1 +title: Proximity +--- + +When several items are in close proximity to each other, they become one visual unit rather than several separate units. Otherwise, their distance should be larger and look more like several visual units. The basic purpose of proximity is to organize. To give an apparent view of the page structure and the hierarchy of information to users. + +--- + +## The relation of vertical spacing + +Example of the different vertical distance + +Divide the hierarchy of information through three formats:『small spacing』, 『middle spacing』and『large spacing』 + +
+ +Example of added element + +In the case that the three formats are not inapplicable, the hierarchy of information can be separated clearly through adding or cutting down the multiple of 『basic spacing』, or adding elements. + +> Note: in Ant Design, y=8+8*n, among which，n>=0，y stands for the vertical spacing and 8 represents 『basic spacing』. + +--- + +## Relationship of horizontal spacing + +Example of combination and configuration + +To adapt to screens of different sizes, in the horizontal direction, use grid layout to arrange the components to ensure the flexibility of the layout. + +
+ +Example of checkbox + +In the inner of a component, the horizontal spacing of elements should differ too. diff --git a/docs/spec/proximity.md b/docs/spec/proximity.zh-CN.md similarity index 100% rename from docs/spec/proximity.md rename to docs/spec/proximity.zh-CN.md diff --git a/docs/spec/reaction.en-US.md b/docs/spec/reaction.en-US.md new file mode 100644 index 0000000000..b23d81c9e8 --- /dev/null +++ b/docs/spec/reaction.en-US.md @@ -0,0 +1,75 @@ +--- +category: 十大原则 +order: 10 +title: React Immediately +--- + +Invitations are powerful because they directly address discoverability and provide feedback before an interaction happens. Transitions are useful because they provide visual feedback during an interaction. But another class of feedback exists. It is the feedback that happens immediately after each interaction with the system, an immediate reaction paired with the user’s action. + +While we can’t literally extend Newton’s law to the world of user interfaces, we certainly can apply this principle to the way we should interact with users. When users click on a button, they expect the button to depress. When they type in a field, they expect to see characters show up in the text box. When they make a mistake, they want the application to tell them where they goofed. + +While there is a possibility of too much feedback (or, more accurately, too much of the wrong feedback—a concept we will discuss in the upcoming chapters), a system with little or no feedback feels sluggish and thickheaded. + +> ** Newton’s Third Law of Motion **: For every action, there is an equal and opposite reaction, from Wikipedia. + +--- + +## Lookup Patterns + + +example of Certain Category + +example of Uncertain Category + +Auto Complete: As the user types input into a field, a drop-down menu of matching values is displayed. +Depending on the categories of search results, it can be divided into two types, Certain Category and Uncertain Category. + +
+ +example of Live Search + +Live Suggest: Live Suggest provides real-time search term suggestions for creating a search. + +
+ +Refining Search: Refining Search provides a set of live filters that allow the search results to be tuned in real time. Learn more on [Pattern/Advanced Search](/docs/pattern/advanced-search). + +
+ +--- +## Live Suggest + +example of Live Preview + +Live Preview: A Live Preview gives the users a glimpse beforehand of how the application will interpret their input once submitted. + +>Note: An ounce of prevention is worth a pound of cure. Use Live Previews to prevent errors. + +
+ +Progressive Disclosure: When users are faced with a series of steps, it is often best to provide hints only when they are needed, instead of cluttering the interface by displaying all the hints at once. Learn more cases on [Stay on the Page/Progressive Disclosure](/docs/spec/stay#Process-Flows)。 + +
+ +example of Loading Button + +example of Loading Table + +example of Loading List + +example of Loading Page + + +Progress Indicator: Progress Indicators keep a conversation going with the user when the rest of the interface is currently unavailable. Common Progress Indicators, such as Loading Button, Loading Table, Loading List and Loading Page, can be displayed repectively according to the frequency and importance of operaction. + +
+ +example of Click Refresh + +Click Refresh: Click Refresh notifies the user of fresh content and provides button or tool to refresh. + +
+ +example of Periodic Refresh + +Periodic Refresh: Periodic Refresh brings in fresh content on a periodic basis without direct user interaction. diff --git a/docs/spec/reaction.md b/docs/spec/reaction.zh-CN.md similarity index 100% rename from docs/spec/reaction.md rename to docs/spec/reaction.zh-CN.md diff --git a/docs/spec/repetition.en-US.md b/docs/spec/repetition.en-US.md new file mode 100644 index 0000000000..56283f09cb --- /dev/null +++ b/docs/spec/repetition.en-US.md @@ -0,0 +1,19 @@ +--- +category: 十大原则 +order: 4 +title: Repetition +--- + +The same elements keep repeating in the whole interface, which not only could lower the user’s learning cost effectively, but also help user recognize the relevance between these elements. + +--- + +## Repetitive elements + +Example of repetitive wireframe + +Example of repetitive design elements + +Example of repetitive of formats + +The repetitive element may be a thick rule(line), a wireframe， color, design elements, particular format, spatial relationships, etc. diff --git a/docs/spec/repetition.md b/docs/spec/repetition.zh-CN.md similarity index 100% rename from docs/spec/repetition.md rename to docs/spec/repetition.zh-CN.md diff --git a/docs/spec/stay.en-US.md b/docs/spec/stay.en-US.md new file mode 100644 index 0000000000..be8105a2bb --- /dev/null +++ b/docs/spec/stay.en-US.md @@ -0,0 +1,102 @@ +--- +category: 十大原则 +order: 6 +title: Stay on the Page +--- + +Solve most of problems on the same page and avoid a new one, because the page refresh and forwarding can lead to change blindness, in addition to disrupting the user’s mental flow. + +> ** Change Blindness** is a surprising perceptual phenomenon that occurs when a change in a visual stimulus is introduced and the observer does not notice it. People's poor ability to detect changes has been argued to reflect fundamental limitations of human attention，from the term of Change blindness, Wikipedia. + +> ** Flow**, also known as the zone, is the mental state of operation in which a person performing an activity is fully immersed in a feeling of energized focus, full involvement, and enjoyment in the process of the activity, from the term of Flow, Wikipedia + +--- + +## Overlays + +good example + +good example (special case) + +bad example + +Double-confirm overlay: Using the Modal to double confirm should be avoided, while affording an opportunity to undo is preferred. + +
+ +example of Detail Overlay + +Detail Overlay: Allows an overlay to present additional information when the user clicks or hovers over a link or section of content. + + +> Note that when a mouseover event occurs to trigger the Detail Overlay, 0.5-second delay needs to be added, and when the mouse is out, the overlay needs to be closed immediately. + +
+ +example of Input Overlay + +Input Overlay: Let the user enter small amounts of text on the overlay. + +
+ +--- + +## Inlays + +example of List Inlay + +List Inlay: Works as an effective way to hide detail until needed — while at the same time preserving space on the page for high-level overview information. + +
+ +

Detail Inlay (coming soon)

+ +
+ +example of Tabs + +Tabs: Provides additional panels of information accessible by tab controls. + +
+ +--- + +## Virtual Pages + +In the process of interaction design, Overlays allow you to bring additional interactions or content in a layer above the cur- rent page. Inlays allow you to do this within the page itself. However, another powerful approach to keeping users engaged on the current page is to create a virtual page. That is to say, we create the illusion of a larger virtual page. + +Virtual Scrolling and Pagination, more on [Patterns／Lists／Show Long Lists](../pattern/list#显示长列表) + +Carousel, more on [Patterns／Lists／Show Images](../pattern/list#显示图片) + +
+ +

Flexible User Interface (coming soon)

+ +
+ +--- + +## Process Flows + +It has long been common practice on the Web to turn each step into a sepa- rate page. While this may be the simplest way break down the problem, it may not lead to the best solution. For some Process Flows it makes sense to keep the user on the same page throughout the process. + +
+ +example of Responsive Disclosure + +Responsive Disclosure: Make the experience for selecting painless by providing disclosures as quickly as possible, and doing it all in a single-page interface. + +
+ +example of Configurator Process + +Configurator Process: Provides a configurator that allows users to help them accomplish the task or build their own product. + +
+ +example of Dialog Overlay Process + +Dialog Overlay Process: Any page switch is an interruption to the user’s mental flow. In addition, any context switch is a chance for a user to leave the site. But sometimes the step-by-step flow is necessary. + diff --git a/docs/spec/stay.md b/docs/spec/stay.zh-CN.md similarity index 100% rename from docs/spec/stay.md rename to docs/spec/stay.zh-CN.md diff --git a/docs/spec/transition.en-US.md b/docs/spec/transition.en-US.md new file mode 100644 index 0000000000..dc7f6259ac --- /dev/null +++ b/docs/spec/transition.en-US.md @@ -0,0 +1,80 @@ +--- +category: 十大原则 +order: 9 +title: Use Transition +--- + +Our Gray Matter are wired to react to dynamic things like movement,shape change and colour change. Transitions smooth out the jarring world of the Web, making changes appear more natural. The main purpose for Transitions is to provide an engaging interface and reinforce communication. + +- Adding: The added elements should inform the users how to use, and the modified elements should be recognized. +- Receding: The irrelevant page elements should be removed properly. +- Normal: The elements without any change on the page can be safely ignored. + +--- + +## Maintain Context While Changing Views + +