docs: translate specification (ant-design#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.md → 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.md → docs/spec/principle.zh-CN.md

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