docs: translate specification (#2377)

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
+
+<img class="preview-img good" align="right" alt="good example" description="Align the title and text to the left; use one visual starting point." src="https://os.alipayobjects.com/rmsportal/xvmiAZAIxrEcqdP.png"> 
+<img class="preview-img bad" align="right" asslt="bad example" description="The tile and the text start in different visual point. This is not recommended except the differences between title and text are emphasized. " src="https://os.alipayobjects.com/rmsportal/qvycImsTiDGVgLJ.png">      
+
+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   
+   
+<img class="preview-img no-padding" align="right" alt="example of colon alignment" src="https://os.alipayobjects.com/rmsportal/DmEbaUsrpJkRyUh.png">
+
+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
+
+<img class="preview-img good" align="right" alt="good example" src="https://os.alipayobjects.com/rmsportal/hCSQTEmahFyQcWk.png">
+<img class="preview-img bad" align="right" alt="bad example" src="https://os.alipayobjects.com/rmsportal/FDjScmPlWFPxkxL.png">    
+      
+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. 。

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
+
+<img class="preview-img good" align="right" alt="good example" src="https://os.alipayobjects.com/rmsportal/RruKZUSYEwauGdF.png">
+<img class="preview-img bad" align="right" alt="bad example" src="https://os.alipayobjects.com/rmsportal/TOupLSPNQkBTmYw.png">
+
+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. 
+
+
+<br>
+
+<img class="preview-img" align="right" alt="Example of ignoring the primary and secondary sequence" decription="Accept and Reject should use default button, for UI should not affect user's decision." src="https://os.alipayobjects.com/rmsportal/xskurfmyKPumFSv.png">
+
+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
+
+<img class="preview-img" align="right" alt="Example of whole and part 1" src="https://os.alipayobjects.com/rmsportal/HEDJpTyufnfXUOP.png">
+
+<img class="preview-img" align="right" alt="Example of whole and part 2" src="https://os.alipayobjects.com/rmsportal/bafqoUWFgXjsuSG.png">
+
+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
+
+<img class="preview-img" align="right" alt="Example of static contrast" description="Points with various colors would be used to show different states. " src="https://os.alipayobjects.com/rmsportal/UHjarNwxrXndznP.png">
+
+<img class="preview-img" align="right" alt="Example of dynamic contrast" description="When the mouse doesn’t be moved, this item and other items would show different visual effects obviously, which would influence the user’s operation." src="https://os.alipayobjects.com/rmsportal/DCAtXAEaFnAXEmG.png">
+
+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』. 

docs/spec/introduce.en-US.md

@@ -0,0 +1,35 @@
+---
+order: 0
+title: Ant Design
+---
+
+<div style="text-align:center;background:#FBFBFB;margin:40px 0;">
+  <img align="middle" width="600" src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png">
+</div>
+
+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).

docs/spec/introduce.zh-CN.md

@@ -1,6 +1,6 @@
 ---
 order: 0
-english: Ant Design
+title: Ant Design
 ---
 
 <div style="text-align:center;background:#FBFBFB;margin:40px 0;">

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.
+
+<br>
+
+<img class="preview-img" align="right" alt="example of Text Invitation" src="https://os.alipayobjects.com/rmsportal/pWnlJpbkCPIaKdP.png">
+
+<img class="preview-img" align="right" alt="example of Blank Slate Invitation" src="https://os.alipayobjects.com/rmsportal/DkOYgfJHDuzhyBg.png">
+
+<img class="preview-img" align="right" alt="example of Unfinished Invitation" src="https://os.alipayobjects.com/rmsportal/cojQlWfINmsVDGd.png">
+
+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.
+
+<br>
+
+<img class="preview-img" align="right" alt="example 1 of Tour Invitation" description="A few of tour points are provided when the user first logs in. Clicking the “Got It” button leads the user to the next tour step." src="https://os.alipayobjects.com/rmsportal/TGnzYViseCoFBYL.png">
+
+<img class="preview-img" align="right" alt="example 2 of Tour Invitation" src="https://os.alipayobjects.com/rmsportal/KQabdaTbolVuMld.png">
+
+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.
+
+
+<br>
+
+---
+
+## Dynamic Invitations
+
+Dynamic Invitations engage users at the point of the interaction and guide them through the next step of interaction.
+
+<br>
+
+<img class="preview-img" align="right" alt="example 1 of Hover Invitation" description="During mouse hover on the whole card, the clickable parts turn to blue hypertext." src="https://os.alipayobjects.com/rmsportal/gzfDJLcETyTOfFg.png">
+
+<img class="preview-img" align="right" alt="example 2 of Hover Invitation" description="During mouse hover, the button of ""Select this Template"" appears." src="https://os.alipayobjects.com/rmsportal/tdJWZFIDWYuMVIe.png">
+
+Hover Invitation: Provide an invitation during mouse hover.
+
+
+<br>
+
+<img class="preview-img" align="right" alt="example of Inference Invitation" description="The system predicts that the user's interest in an article extends to a type of articles, and it provides an invitation after the user click ""like""." src="https://os.alipayobjects.com/rmsportal/SyurwytfcvpbNLG.png">
+
+Inference Invitation: Use visual inferences during interaction to cue users as to what the system has inferred about their intent.
+
+<br>
+
+<img class="preview-img" align="right" alt="example of More Content Invitation" description="Use the left or right arrows to switch more content around Modal." src="https://os.alipayobjects.com/rmsportal/sOqYOydwQjLHqph.png">
+
+More Content Invitation: Indicate that there is more content on the page.
+
+
+<br>
+
+<br>
+
+<p><span class="waiting">Affordance Invitation (coming soon)</span></p>
+
+<br>
+
+<p><span class="waiting">Drag and Drop Invitation (coming soon)</span></p>

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.
+
+
+> <img src="https://os.alipayobjects.com/rmsportal/wAcbQmeqTWDqsnu.png" width="150" />
+>** 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
+
+
+<img class="preview-img" align="right" alt="example of Always-Visible Tools, from Zhihu" description="Status No.1: A clear clickable area makes it easier to highlight the button on the page.<br>Status No.2: As hovering over the button, the mouse pointer turns into a hand symbol, and the fill colour of the button changes to a dark colour, which provides a clear call to action.<br>Status No.3: The style of the button obviously changes once clicked." src="https://os.alipayobjects.com/rmsportal/sfytaOSssRrdYFg.png">
+
+If an action is critical, expose it directly in the interface and keep it always visible.
+
+<br>
+
+---
+
+## Hover-Reveal Tools
+
+
+<img class="preview-img" align="right" alt="example of Hover-Reveal Tools" description="On mouse hover, the tools are revealed." src="https://os.alipayobjects.com/rmsportal/AUiWMlbxCvpBFyA.png">
+
+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.
+
+<br>
+
+---
+
+## Toggle-Reveal Tools
+
+
+<img class="preview-img" align="right" alt="example of Toggle-Reveal Tools" description="The table reveals an input box from the text only when the edit mode is turned on for the area." src="https://os.alipayobjects.com/rmsportal/uGWcpAFgWdynxBy.png">
+
+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.
+
+
+<br>
+
+---
+
+## Interaction in Context
+
+<img class="preview-img" align="right" alt="good example" description="On mouse hover, the Tooltips are revealed to prompt the user to copy the text." src="https://os.alipayobjects.com/rmsportal/STvIHSgnVAHOVHl.png" good>
+
+<img class="preview-img" align="right" alt="good example" description="When highlighted or double-clicked, the text is automatically copied to the clipboard. The system helps automate the user flow and brings a surprise." src="https://os.alipayobjects.com/rmsportal/aRihOoBCQHGATBA.png" good>
+
+<img class="preview-img" align="right" alt="bad example" description="The copy icon appears near the copyable text." src="https://os.alipayobjects.com/rmsportal/MfbnQfAJhQfIODY.png" bad>
+
+
+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.
+
+<br>
+
+---
+
+## Visible Area ≠ Clickable Area
+
+<img class="preview-img" align="right" alt="example of hypertext hot spot" description="When hovering on the cell in which the hypertext is positioned, the mouse turns from a cursor to a hand symbol. Click it and jump to another page." src="https://os.alipayobjects.com/rmsportal/bCrBxGPJiDvkyOH.png">
+
+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.
+
+<br>
+
+<img class="preview-img" align="right" alt="example of button hot spot" description="Move the mouse near the button and activate the hover state." src="https://os.alipayobjects.com/rmsportal/dSehXwUuXDFDhJO.png">
+
+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.

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.
+
+---
+
+<div class="resource-cards">
+<a target="_blank" href="http://book.douban.com/subject/3323633/" class="resource-card">
+  <img src="https://os.alipayobjects.com/rmsportal/SNdJVyZaZwdwJmr.png">
+  <span class="resource-card-content">
+    <span class="resource-card-title">写给大家看的设计书</span>
+    <span class="resource-card-description">作者: Robin Williams</span>
+    <span class="resource-card-description">出版社: 人民邮电出版社</span>
+  </span>
+</a>
+<a target="_blank" href="http://book.douban.com/subject/3821157/" class="resource-card">
+  <img src="https://os.alipayobjects.com/rmsportal/CoojVXLtoWrUSmI.png">
+  <span class="resource-card-content">
+    <span class="resource-card-title">Web 界面设计</span>
+    <span class="resource-card-description">作者: Bill Scott / Theresa Neil</span>
+    <span class="resource-card-description">出版社: 电子工业出版社</span>
+  </span>
+</a>
+</div>
+
+#### 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)
+

docs/spec/principle.zh-CN.md

@@ -2,7 +2,7 @@
 category: 十大原则
 order: 0
 subtitle: Introduction
-english: 引言
+title: 引言
 ---
 
 『好设计比差设计更难发现』，因为好设计是如此的自然，帮助用户轻松的完成目标，以至于用户根本意识不到好设计的存在。

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
+
+<img class="preview-img" align="right" alt="Example of the different vertical distance" description="In Ant Design, the three different formats are 8px (small spacing), 16px (middle spacing) and 24px (large spacing)." src="https://os.alipayobjects.com/rmsportal/blBCqHsUJhKxxAU.png">
+
+Divide the hierarchy of information through three formats:『small spacing』, 『middle spacing』and『large spacing』
+
+<br>
+
+<img class="preview-img" align="right" alt="Example of added element" description="To make the hierarchy more apparent through adding 『guides』." src="https://os.alipayobjects.com/rmsportal/EWpTfSlQzueWlbp.png">
+
+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   
+
+<img class="preview-img" align="right" alt="Example of combination and configuration" src="https://os.alipayobjects.com/rmsportal/LdomydjSKKlFhiv.png">
+
+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. 
+
+<br>
+
+<img class="preview-img" align="right" alt="Example of checkbox" src="https://os.alipayobjects.com/rmsportal/DxzQXtIEnFcFxGY.png">
+
+In the inner of a component, the horizontal spacing of elements should differ too.

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
+
+
+<img class="preview-img" align="right" alt="example of Certain Category" description="The keyword of the user query is only displayed in three categories, Topics, Questions and Articles." src="https://os.alipayobjects.com/rmsportal/fgQfkNakHrUiAun.png">
+
+<img class="preview-img" align="right" alt="example of Uncertain Category" description="The number of categories the keyword of the user query belongs to is uncetain." src="https://os.alipayobjects.com/rmsportal/hUfCsXwnOsVlskl.png">
+
+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.
+
+<br>
+
+<img class="preview-img" align="right" alt="example of Live Search" description="When the user type a search value, the system instantly displays the search results." src="https://os.alipayobjects.com/rmsportal/OyJCVmOigyXKWCf.png">
+
+Live Suggest: Live Suggest provides real-time search term suggestions for creating a search.
+
+<br>
+
+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).
+
+<br>
+
+---
+## Live Suggest
+
+<img class="preview-img" align="right" alt="example of Live Preview" description="Depending on the type of the input from the user, the system provides instant feedback on password strength and validation." src="https://os.alipayobjects.com/rmsportal/jecYhRgfbHleGDJ.png">
+
+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.
+
+<br>
+
+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)。
+
+<br>
+
+<img class="preview-img" align="right" alt="example of Loading Button" src="https://os.alipayobjects.com/rmsportal/FBAZGqfeUnDlUtw.png">
+
+<img class="preview-img" align="right" alt="example of Loading Table" src="https://os.alipayobjects.com/rmsportal/FPXsINbTgsuSStI.png">
+
+<img class="preview-img" align="right" alt="example of Loading List" src="https://os.alipayobjects.com/rmsportal/WJqeUHzthTXaHnW.png">
+
+<img class="preview-img" align="right" alt="example of Loading Page" src="https://os.alipayobjects.com/rmsportal/qPWjexSmFfCiLVJ.png">
+
+
+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.
+
+<br>
+
+<img class="preview-img" align="right" alt="example of Click Refresh" src="https://os.alipayobjects.com/rmsportal/DdmWqoqIFSCSAvq.png">
+
+Click Refresh: Click Refresh notifies the user of fresh content and provides button or tool to refresh.
+
+<br>
+
+<img class="preview-img" align="right" alt="example of Periodic Refresh"  description="The added list item turns to be highlighted and get back to normal in a few seconds." src="https://os.alipayobjects.com/rmsportal/guiuShsfpJzxZQx.png">
+
+Periodic Refresh: Periodic Refresh brings in fresh content on a periodic basis without direct user interaction.

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
+
+<img class="preview-img" align="right" alt="Example of repetitive wireframe" src="https://os.alipayobjects.com/rmsportal/SREcKOUMmiWPQNO.png">
+
+<img class="preview-img" align="right" alt="Example of repetitive design elements" src="https://os.alipayobjects.com/rmsportal/ZjFUWyPHGzyQJYD.png">
+
+<img class="preview-img" align="right" alt="Example of repetitive of formats" src="https://os.alipayobjects.com/rmsportal/mveDxAdjucdJDll.png">
+
+The repetitive element may be a thick rule(line), a wireframe， color, design elements, particular format, spatial relationships, etc.

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
+
+<img class="preview-img" align="right" alt="good example" description="As the user clicks delete, a success message and an undo button are displayed. When the user does nothing within one minute or click the undo button, the message and the button disappear." src="https://os.alipayobjects.com/rmsportal/woHOTIZeXCYmtkv.png" good>
+
+<img class="preview-img" align="right" alt="good example (special case)" description="If the undo operation is invalid, the Popconfirm is displayed after clicking the delete button. The user can stay on the page to double confirm." src="https://os.alipayobjects.com/rmsportal/hDlhNscVtHdvvgu.png" good>
+
+<img class="preview-img" align="right" alt="bad example" description="
+Abusing the Modal can neither bring the context into the popup, which is prone to interrupt the user’s flow, nor allow the user to undo the change." src="https://os.alipayobjects.com/rmsportal/JEcWKBYlMcYIowX.png" bad>
+
+Double-confirm overlay: Using the Modal to double confirm should be avoided, while affording an opportunity to undo is preferred.
+
+<br>
+
+<img class="preview-img" align="right" alt="example of Detail Overlay " description="Click the eye icon to see more information." src="https://os.alipayobjects.com/rmsportal/WIhhhXExyQBsZwj.png">
+
+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.
+
+<br>
+
+<img class="preview-img" align="right" alt="example of Input Overlay" description="Click the edit icon to trigger the Input Overlay. Click the outside of it to preserve the input and close it." src="https://os.alipayobjects.com/rmsportal/YehbrRkldqWsezo.png">
+
+Input Overlay: Let the user enter small amounts of text on the overlay.
+
+<br>
+
+---
+
+## Inlays
+
+<img class="preview-img" align="right" alt="example of List Inlay" src="https://os.alipayobjects.com/rmsportal/bHCqDMqXhZvKbve.png">
+
+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.
+
+<br>
+
+<p><span class="waiting">Detail Inlay (coming soon)</span></p>
+
+<br>
+
+<img class="preview-img" align="right" alt="example of Tabs" src="https://os.alipayobjects.com/rmsportal/MsVyvEIJtlxZWBL.png">
+
+Tabs: Provides additional panels of information accessible by tab controls.
+
+<br>
+
+---
+
+## 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#显示图片)
+
+<br>
+
+<p><span class="waiting">Flexible User Interface (coming soon)</span></p>
+
+<br>
+
+---
+
+##  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. 
+
+<br>
+
+<img class="preview-img" align="right" alt="example of Responsive Disclosure" src="https://os.alipayobjects.com/rmsportal/xpynnwXnfCpGHvn.png">
+
+Responsive Disclosure: Make the experience for selecting painless by providing disclosures as quickly as possible, and doing it all in a single-page interface.
+
+<br>
+
+<img class="preview-img" align="right" alt="example of Configurator Process" src="https://os.alipayobjects.com/rmsportal/EBVLFAwHHjiXtIJ.png">
+
+Configurator Process: Provides a configurator that allows users to help them accomplish the task or build their own product.
+
+<br>
+
+<img class="preview-img" align="right" alt="example of Dialog Overlay Process" src="https://os.alipayobjects.com/rmsportal/xcYosQncDPuFxhS.png">
+
+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.
+

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
+
+<video class="transition-video-player" alt="example of Slide In and Slide Out
+" src="https://os.alipayobjects.com/rmsportal/EejaUGsyExkXyXr.mp4" />
+
+Slide In and Slide Out: Create an illusion of virtual space.
+
+<br>
+
+<video class="transition-video-player" alt="example of Carousel" src="https://os.alipayobjects.com/rmsportal/GIutPgZMTyfFfrH.mp4" />
+
+Carousel: Carousels are great for extending vir- tual space.
+
+<br>
+
+<video class="transition-video-player" alt="example of Accordion" src="https://os.alipayobjects.com/rmsportal/ERKhqHlcHiCDSQu.mp4" />
+
+Accordion: Accordion helps maintain context while switching views.
+
+<br>
+
+<p><span class="waiting">View Navigation (coming soon)</span></p>
+
+<br>
+
+---
+
+## Explain What Just Happened
+
+<video class="transition-video-player" alt="example of Adding an Object" description="When an object is added, the highlighted area shows it to the user. The highlight fades in several seconds in order not to interfere the user flow." src="https://os.alipayobjects.com/rmsportal/FqkQMyFqNqielOw.mp4" />
+
+Adding an Object: Add an object in the table or chart.
+
+<br>
+
+<video class="transition-video-player" alt="example of Deleting Objects" src="https://os.alipayobjects.com/rmsportal/pnNkNIMoowmGUQy.mp4" />
+
+Deleting an Object: Delete an object in the table or chart.
+
+<br>
+
+<video class="transition-video-player" alt="example of Modifying an object" description="Status No.1: The user modifies the value of Detail. <br>Status No.2: After the user click the save button, a yellow fill is displayed in the grid of Detail, which indicates the change of the object. <br>Status No.3: The fill fades in several seconds and returned to normal." src="https://os.alipayobjects.com/rmsportal/XrUIWmsmOlEnZGc.mp4" />
+
+Modifying an Object: Modify an object in the table or chart.
+
+<br>
+
+<video class="transition-video-player" alt="example of Calling out an Object" src="https://os.alipayobjects.com/rmsportal/gSNilqbiXOufDXF.mp4" />
+
+Calling out an Object: Click the page element and call out a new object.
+
+---
+
+## Improve Perceived Performance
+
+If actual performance can hardly improved, there is a difference between actual performance and perceived performance. Diverting the user’s attention is a good way to improve the perceived time an operation takes.
+
+<br>
+
+<p><span class="waiting">Image (coming soon)</span></p>
+
+---
+
+## Natural Motion
+
+Please refer to [Ant Motion, a motion language](http://motion.ant.design/#/language/)。