mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-04 04:58:55 +08:00
f965d92aa8
* adjust docs & logo * adjust typo * doc update * update style & trans * fix style * update doc * update translate
115 lines
4.5 KiB
Markdown
115 lines
4.5 KiB
Markdown
---
|
||
category: Ant Design
|
||
order: 0
|
||
title: Introduction
|
||
---
|
||
|
||
<div style="text-align:center;margin:40px 0;">
|
||
<img src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*P0S-QIRUbsUAAAAAAAAAAABkARQnAQ">
|
||
</div>
|
||
|
||
Ant's enterprise-level products are an enormous and complex system with a large number and complex functions. Designers and developers often need to respond fast due to frequent changes and concurrency. Meanwhile, there are many similar pages and components in these products. Some stable and highly reusable content can obtain through abstraction.
|
||
|
||
With the trend of commercialization, more and more enterprise-level products begin to pursue a better user experience. With such an ultimate goal, we (Ant Financial User Experience Department) have gradually polished a design system(Ant Design) for enterprise-level products through a huge quantity of project practices and summaries. Based on the four design values of 「 natural 」, 「certain」, 「meaningful」, and 「growing」, through modular solutions, reduce redundant production costs and allow designers to focus on better user experience.
|
||
|
||
---
|
||
|
||
## Guidelines and Resources
|
||
|
||
We provide comprehensive design guidelines, best practices, design resources, and design tools to help designers produce high-quality product prototypes.
|
||
|
||
- [Design values](/docs/spec/values)
|
||
- [Design patterns](/docs/spec/overview)
|
||
- [Visualization](/docs/spec/visual)
|
||
- [Illustration](/docs/spec/illustration)
|
||
- [Design resources](/docs/spec/download)
|
||
- [Sketch toolbox](http://kitchen.alipay.com/)
|
||
- [Articles](/docs/spec/article)
|
||
|
||
## Front-end Implementation
|
||
|
||
[React](http://facebook.github.io/react/) is used to encapsulate a library of components which embody our design language. We welcome the community to implement [our design system](https://ant.design/docs/spec/introduce) in other front-end frameworks of their choice.
|
||
|
||
```__react
|
||
import {
|
||
ExportOutlined,
|
||
} from '@ant-design/icons';
|
||
|
||
const LinkIcon = () => (
|
||
<ExportOutlined className="outside-link-icon" />
|
||
);
|
||
|
||
const LinksList = () => (
|
||
<ul>
|
||
<li>
|
||
<a href="/docs/react/introduce" target="_blank">Ant Design of React</a>
|
||
(official implementation)
|
||
</li>
|
||
<li>
|
||
<a href="http://ng.ant.design" target="_blank">
|
||
NG-ZORRO - Ant Design of Angular<LinkIcon />
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="http://ng.mobile.ant.design" target="_blank">
|
||
NG-ZORRO-MOBILE - Ant Design Mobile of Angular<LinkIcon />
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="http://vue.ant.design" target="_blank">Ant Design of Vue<LinkIcon /></a>
|
||
</li>
|
||
<li>
|
||
<a href="https://ecomfe.github.io/santd" target="_blank">
|
||
San UI Toolkit for Ant Design<LinkIcon />
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://github.com/FE-Driver/vue-beauty" target="_blank">
|
||
vue-beauty (vue)<LinkIcon />
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://github.com/priornix/antizer" target="_blank">
|
||
antizer (ClojureScript)<LinkIcon />
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://github.com/idcos/antd-ember" target="_blank">
|
||
antd-ember<LinkIcon />
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://github.com/zzuu666/antue" target="_blank">
|
||
antue (vue)<LinkIcon />
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
);
|
||
|
||
ReactDOM.render(<LinksList />, mountNode);
|
||
```
|
||
|
||
## Who's using Ant Design
|
||
|
||
- [Ant Financial](http://www.antgroup.com/index.htm?locale=en_US)
|
||
- [Alibaba](http://www.alibaba.com/)
|
||
- [Tencent](http://www.tencent.com)
|
||
- [Baidu](http://www.baidu.com)
|
||
- [Koubei](http://www.koubei.com/)
|
||
- [Meituan](http://www.meituan.com)
|
||
- [Didi](http://www.xiaojukeji.com/)
|
||
- [Eleme](https://www.ele.me/)
|
||
- [Other Users](https://github.com/ant-design/ant-design/issues/477)
|
||
|
||
> If your company or products use Ant Design, and you'd like to be added to this growing list, click [here](https://github.com/ant-design/ant-design/issues/477) to leave us a message.
|
||
|
||
## Words From Community
|
||
|
||
- Hacknews: [Show HN: Antd – A set of high-quality React components](https://news.ycombinator.com/item?id=13053137)
|
||
- Alligator: [Crafting Beautiful UIs in React Using Ant Design](https://alligator.io/react/beautiful-uis-ant-design/)
|
||
- Hackernoon: [Interesting JavaScript Libraries born in China](https://hackernoon.com/interesting-javascript-libraries-born-in-china-d50d1bb81355)
|
||
|
||
## How to Contribute
|
||
|
||
Contributions to Ant Design on Github are welcomed! Whether you have questions, concerns, or suggestions for improving Ant Design - please don't hesitate to reach out to us [here](https://github.com/ant-design/ant-design/issues).
|