Skip to content

A
ant-design

wanjj_1210 / ant-design
与 Fork 源项目一致

从无法访问的项目Fork

通知 10
Star 0
Fork 0
A
ant-design

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 b838d3b4 编写于 作者: A afc163
浏览文件
操作

Add pictures

上级 b6ffd6ce
隐藏空白更改
内联 并排
Showing with 35 addition and 25 deletion
docs/spec/alignment.md
浏览文件 @ b838d3b4
......@@ -12,14 +12,14 @@
## 文案类对齐
<img class="preview-img" align="right" alt="推荐示例" description="标题和正文左对齐，使用了一个视觉起点。" good src="https://os.alipayobjects.com/rmsportal/mLkQbODgVsdGUTe.png">
<img class="preview-img" align="right" alt="不推荐示例" description="标题和正文使用了两个视觉起点，不推荐该种对齐方式，除非刻意强调两者区别。" bad src="https://os.alipayobjects.com/rmsportal/mLkQbODgVsdGUTe.png">
<img class="preview-img" align="right" alt="推荐示例" description="标题和正文左对齐，使用了一个视觉起点。" good src="https://os.alipayobjects.com/rmsportal/halNrWDrYoFPYzC.png">
<img class="preview-img" align="right" alt="不推荐示例" description="标题和正文使用了两个视觉起点，不推荐该种对齐方式，除非刻意强调两者区别。" bad src="https://os.alipayobjects.com/rmsportal/WBHYfadyasYcEIN.png">
如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点。
## 表单类对齐
<img class="preview-img" noPadding align="right" alt="冒号对齐示例" src="https://os.alipayobjects.com/rmsportal/mLkQbODgVsdGUTe.png">
<img class="preview-img" noPadding align="right" alt="冒号对齐示例" src="https://os.alipayobjects.com/rmsportal/ZRZQGhrTKBJUJYd.png">
冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。
......@@ -27,7 +27,7 @@
## 数字类对齐
<img class="preview-img" align="right" alt="正确示例" good src="https://os.alipayobjects.com/rmsportal/mLkQbODgVsdGUTe.png">
<img class="preview-img" align="right" alt="错误示例" bad src="https://os.alipayobjects.com/rmsportal/mLkQbODgVsdGUTe.png">
<img class="preview-img" align="right" alt="正确示例" good src="https://os.alipayobjects.com/rmsportal/hCSQTEmahFyQcWk.png">
<img class="preview-img" align="right" alt="错误示例" bad src="https://os.alipayobjects.com/rmsportal/FDjScmPlWFPxkxL.png">
为了快速对比数值大小，建议所有数值取相同有效位数，并且右对齐。
docs/spec/contrast.md
浏览文件 @ b838d3b4
......@@ -12,30 +12,32 @@
## 主次关系对比
<img class="preview-img" align="right" alt="正确示例" good src="https://os.alipayobjects.com/rmsportal/mLkQbODgVsdGUTe.png">
<img class="preview-img" align="right" alt="错误示例" bad src="https://os.alipayobjects.com/rmsportal/mLkQbODgVsdGUTe.png">
<img class="preview-img" align="right" alt="正确示例" good src="https://os.alipayobjects.com/rmsportal/RruKZUSYEwauGdF.png">
<img class="preview-img" align="right" alt="错误示例" bad src="https://os.alipayobjects.com/rmsportal/TOupLSPNQkBTmYw.png">
为了让用户能在操作上（类似表单、弹出框等场景）快速做出判断， 来突出其中一项相对更重要或者更高频的操作。
> 注意：突出的方法，不局限于强化重点项，也可以是弱化其他项。
<img class="preview-img" align="right" alt="不区分主次的示例" decription="『通过』和『驳回』都使用次按钮，系统保持中立。" src="https://os.alipayobjects.com/rmsportal/mLkQbODgVsdGUTe.png">
<br>
<img class="preview-img" align="right" alt="不区分主次的示例" decription="『通过』和『驳回』都使用次按钮，系统保持中立。" src="https://os.alipayobjects.com/rmsportal/xskurfmyKPumFSv.png">
在一些需要用户慎重决策的场景中，系统应该保持中立，不能替用户或者诱导用户做出判断。
## 总分关系对比
<img class="preview-img" align="right" alt="总分关系示例 1" src="https://os.alipayobjects.com/rmsportal/mLkQbODgVsdGUTe.png">
<img class="preview-img" align="right" alt="总分关系示例 1" src="https://os.alipayobjects.com/rmsportal/HEDJpTyufnfXUOP.png">
<img class="preview-img" align="right" alt="总分关系示例 2" src="https://os.alipayobjects.com/rmsportal/mLkQbODgVsdGUTe.png">
<img class="preview-img" align="right" alt="总分关系示例 2" src="https://os.alipayobjects.com/rmsportal/bafqoUWFgXjsuSG.png">
通过调整排版、字体、大小等方式来突出层次感，区分总分关系，使得页面更具张力和节奏感。
### 状态关系对比
<img class="preview-img" align="right" alt="静态对比示例" description="用不同颜色点，来表明不同状态。" src="https://os.alipayobjects.com/rmsportal/mLkQbODgVsdGUTe.png">
<img class="preview-img" align="right" alt="静态对比示例" description="用不同颜色点，来表明不同状态。" src="https://os.alipayobjects.com/rmsportal/UHjarNwxrXndznP.png">
<img class="preview-img" align="right" alt="动态对比示例" description="鼠标悬停时，该项和其他项呈现出明显不同的视觉效果，响应用户操作。" src="https://os.alipayobjects.com/rmsportal/mLkQbODgVsdGUTe.png">
<img class="preview-img" align="right" alt="动态对比示例" description="鼠标悬停时，该项和其他项呈现出明显不同的视觉效果，响应用户操作。" src="https://os.alipayobjects.com/rmsportal/DCAtXAEaFnAXEmG.png">
通过改变颜色、增加辅助形状等方法来实现状态关系的对比，以便用户更好的区分信息。
......
docs/spec/feature.md
浏览文件 @ b838d3b4
......@@ -5,25 +5,29 @@
---
<div style="text-align:center;background:#FBFBFB;margin:40px 0;">
<img align="middle" width="600" src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png">
</div>
Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言。
在中台设计中，我们模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界，将进行体验设计和界面设计人员统称为『设计者』，并为其提供一系列工具和服务来支持他们进行业务创新。
## 三大特性
<div class="row" style="margin-left: -12px; margin-right: -12px;">
<div style="margin-left:-40px;margin-right:-40px;">
<div class="col-8 features">
<img src="https://os.alipayobjects.com/rmsportal/IRjHVNFWRlCMdnb.png">
<img src="https://os.alipayobjects.com/rmsportal/OVirOHTeAdzDBuQ.png">
<h5>微小</h5>
<div>致力于微小而美好的改变，力求在细节上精益求精，不仅让业务产品更加实用和可靠，而且还能让『用户』感到小惊喜。</div>
</div>
<div class="col-8 features">
<img src="https://os.alipayobjects.com/rmsportal/IRjHVNFWRlCMdnb.png">
<img src="https://os.alipayobjects.com/rmsportal/iJbUiLYpuPBXUhV.png">
<h5>确定</h5>
<div>通过制定通俗而科学的规则、运用面向对象的方法、使用一致的文档沟通机制，给予研发团队一种高确定性、低熵值的研发状态。</div>
</div>
<div class="col-8 features">
<img src="https://os.alipayobjects.com/rmsportal/IRjHVNFWRlCMdnb.png">
<img src="https://os.alipayobjects.com/rmsportal/uSOjjlCRjRIhtIY.png">
<h5>幸福</h5>
<div>不苛求简单，但是力求让『用户』和『设计者』流畅的完成目标，并带着成功和满足离开。</div>
</div>
......@@ -31,12 +35,12 @@ Ant Design 是一个致力于提升『用户』和『设计者』使用体验的
<style>
.features {
padding: 12px;
padding: 40px;
font-size: 12px;
}
.features h5 {
font-size: 14px;
margin-top: 24px;
margin-top: 16px;
}
</style>
......
docs/spec/proximity.md
浏览文件 @ b838d3b4
......@@ -10,11 +10,13 @@
## 纵向间距关系
<img class="preview-img" align="right" alt="纵向间距示例" description="在 Ant Design 中，这三种规格分别为：8px（小号间距）、16px（中号间距）、24px（大号间距）。" src="https://os.alipayobjects.com/rmsportal/mLkQbODgVsdGUTe.png">
<img class="preview-img" align="right" alt="纵向间距示例" description="在 Ant Design 中，这三种规格分别为：8px（小号间距）、16px（中号间距）、24px（大号间距）。" src="https://os.alipayobjects.com/rmsportal/clilcwkwtpZduHV.png">
通过『小号间距』、『中号间距』、『大号间距』这三种规格来划分信息层次。
<img class="preview-img" align="right" alt="增加元素示例" description="通过增加『分割线』来拉开层次。" src="https://os.alipayobjects.com/rmsportal/mLkQbODgVsdGUTe.png">
<br>
<img class="preview-img" align="right" alt="增加元素示例" description="通过增加『分割线』来拉开层次。" src="https://os.alipayobjects.com/rmsportal/EWpTfSlQzueWlbp.png">
在这三种规格不适用的情况下，可以通过加减『基础间距』的倍数，或者增加元素来拉开信息层次。
......@@ -22,10 +24,12 @@
## 横向间距关系
<img class="preview-img" align="right" alt="组合排布示例" src="https://os.alipayobjects.com/rmsportal/mLkQbODgVsdGUTe.png">
<img class="preview-img" align="right" alt="组合排布示例" src="https://os.alipayobjects.com/rmsportal/IxhCpgqwjPUXmzr.png">
为了适用不同尺寸的屏幕，在横向采用栅格布局来排布组件，从而保证布局的灵活性。
<img class="preview-img" align="right" alt="复选框内示例" src="https://os.alipayobjects.com/rmsportal/mLkQbODgVsdGUTe.png">
<br>
<img class="preview-img" align="right" alt="复选框内示例" src="https://os.alipayobjects.com/rmsportal/CiQXThPLBLokMmw.png">
在一个组件内部，元素的横向间距也应该有所不同。
docs/spec/repetition.md
浏览文件 @ b838d3b4
......@@ -10,10 +10,10 @@
## 重复元素
<img class="preview-img" align="right" alt="线框重复示例" src="https://os.alipayobjects.com/rmsportal/mLkQbODgVsdGUTe.png">
<img class="preview-img" align="right" alt="线框重复示例" src="https://os.alipayobjects.com/rmsportal/SREcKOUMmiWPQNO.png">
<img class="preview-img" align="right" alt="设计要素重复示例" src="https://os.alipayobjects.com/rmsportal/mLkQbODgVsdGUTe.png">
<img class="preview-img" align="right" alt="设计要素重复示例" src="https://os.alipayobjects.com/rmsportal/khGUWsTKqxWVNME.png">
<img class="preview-img" align="right" alt="文案格式重复示例" src="https://os.alipayobjects.com/rmsportal/mLkQbODgVsdGUTe.png">
<img class="preview-img" align="right" alt="文案格式重复示例" src="https://os.alipayobjects.com/rmsportal/mveDxAdjucdJDll.png">
重复元素可以是一条粗线、一种线框，某种相同的颜色、设计要素、设计风格，某种格式、空间关系等。
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或