From 9a9c07869a3597bd26c14bc6529b926a6ec1a982 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 7 Mar 2016 19:25:59 +0800 Subject: [PATCH 01/86] update tabs style --- style/components/tabs.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/style/components/tabs.less b/style/components/tabs.less index dda0bfaca0..74ef84c66d 100644 --- a/style/components/tabs.less +++ b/style/components/tabs.less @@ -159,7 +159,7 @@ .@{tab-prefix-cls}-tab { float: left; height: 100%; - margin-right: 28px; + margin-right: 24px; box-sizing: border-box; position: relative; @@ -196,7 +196,7 @@ } &-mini &-tab { - margin-right: 24px; + margin-right: 0; .@{tab-prefix-cls}-tab-inner { padding: 8px 16px; } From 235c1e38cb784b287333af3e462b246f3fdb1749 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 7 Mar 2016 23:34:11 +0800 Subject: [PATCH 02/86] Fix site style --- site/static/style.less | 8 ++++---- site/templates/code.html | 2 +- site/templates/demos.html | 6 ------ 3 files changed, 5 insertions(+), 11 deletions(-) diff --git a/site/static/style.less b/site/static/style.less index f926169351..ba6734123c 100644 --- a/site/static/style.less +++ b/site/static/style.less @@ -940,6 +940,7 @@ footer ul li > a { transition: all 0.3s ease; color: #999; background: #fff; + user-select: none; } .code-box.expand .collapse { @@ -1540,10 +1541,9 @@ a.entry-link:hover .anticon-smile { .main-container { margin-left: 0; - } - - .markdown > * { - width: 100%!important; + > .markdown > * { + width: 100%!important; + } } .main-wrapper { diff --git a/site/templates/code.html b/site/templates/code.html index a6992e2b33..f5203fd254 100644 --- a/site/templates/code.html +++ b/site/templates/code.html @@ -9,6 +9,6 @@ {{ post.title }} {{ post.meta.description }} - + diff --git a/site/templates/demos.html b/site/templates/demos.html index 905bde6485..b1b359da6b 100644 --- a/site/templates/demos.html +++ b/site/templates/demos.html @@ -3,12 +3,6 @@

代码演示 - {%- if post.meta.sketch %} - - - Sketch 下载 - - {%- endif %}

{%- if post.meta.cols == 1 %} From 4ab5aee99432329135e47d8701bb1a9f23311c47 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 7 Mar 2016 23:34:11 +0800 Subject: [PATCH 03/86] Fix site style --- site/static/style.less | 18 +++++++++--------- site/templates/code.html | 2 +- site/templates/demos.html | 6 ------ 3 files changed, 10 insertions(+), 16 deletions(-) diff --git a/site/static/style.less b/site/static/style.less index f926169351..c414a1b947 100644 --- a/site/static/style.less +++ b/site/static/style.less @@ -940,6 +940,7 @@ footer ul li > a { transition: all 0.3s ease; color: #999; background: #fff; + user-select: none; } .code-box.expand .collapse { @@ -1507,7 +1508,7 @@ a.entry-link:hover .anticon-smile { .nav-phone-icon { display: block; - width: 18px; + width: 16px; height: 50px; position: absolute; left: 30px; @@ -1518,11 +1519,11 @@ a.entry-link:hover .anticon-smile { .nav-phone-icon:before { content: ""; display: block; - border-radius: 1px; - width: 18px; + border-radius: 2px; + width: 16px; height: 2px; - background: #666; - box-shadow: 0 7px 0 0 #666, 0 14px 0 0 #666; + background: #777; + box-shadow: 0 6px 0 0 #777, 0 12px 0 0 #777; position: absolute; } @@ -1540,10 +1541,9 @@ a.entry-link:hover .anticon-smile { .main-container { margin-left: 0; - } - - .markdown > * { - width: 100%!important; + > .markdown > * { + width: 100%!important; + } } .main-wrapper { diff --git a/site/templates/code.html b/site/templates/code.html index a6992e2b33..f5203fd254 100644 --- a/site/templates/code.html +++ b/site/templates/code.html @@ -9,6 +9,6 @@ {{ post.title }}
{{ post.meta.description }} - + diff --git a/site/templates/demos.html b/site/templates/demos.html index 905bde6485..b1b359da6b 100644 --- a/site/templates/demos.html +++ b/site/templates/demos.html @@ -3,12 +3,6 @@

代码演示 - {%- if post.meta.sketch %} - - - Sketch 下载 - - {%- endif %}

{%- if post.meta.cols == 1 %} From 033ec68c9fa9b2b0b630d6c77cb28557188151fa Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 8 Mar 2016 00:24:29 +0800 Subject: [PATCH 04/86] Fix menu in mobile device --- scripts/demo.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/scripts/demo.js b/scripts/demo.js index 62278e0bd6..891691956b 100644 --- a/scripts/demo.js +++ b/scripts/demo.js @@ -377,12 +377,17 @@ InstantClickChangeFns.push(function() { prevNextNavNode.appendTo('.main-container'); } + var navMenu = $('.nav'); $('.nav-phone-icon').click(function() { - var navMenu = $(this).prev(); - navMenu.removeClass('nav-hide').addClass('nav-show').focus(); - navMenu.one('blur', function() { + navMenu.removeClass('nav-hide').addClass('nav-show'); + }); + + $('body').on('click', function (e) { + if (e.target !== $('.nav-phone-icon')[0] && + !navMenu[0].contains(e.target) && + navMenu.hasClass('nav-show')) { navMenu.removeClass('nav-show').addClass('nav-hide'); - }); + } }); $.easing['jswing'] = $.easing['swing']; From b05cabf50719c0632e41c34079c3019a807231a1 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 8 Mar 2016 17:02:45 +0800 Subject: [PATCH 05/86] Add new pages --- docs/spec/alignment.md | 25 ++++++++++ docs/spec/contrast.md | 29 +++++++++++ docs/spec/direct.md | 24 +++++++++ docs/spec/feature.md | 91 +++++++++++++++++++++++++++++++++++ docs/spec/introduce.md | 6 +-- docs/spec/invitation.md | 7 +++ docs/spec/lightweight.md | 34 +++++++++++++ docs/spec/principle.md | 25 ++++++++++ docs/spec/proximity.md | 23 +++++++++ docs/spec/reaction.md | 7 +++ docs/spec/repetition.md | 11 +++++ docs/spec/stay.md | 7 +++ docs/spec/transition.md | 7 +++ site/templates/aside.html | 1 + site/templates/component.html | 2 +- 15 files changed, 294 insertions(+), 5 deletions(-) create mode 100644 docs/spec/alignment.md create mode 100644 docs/spec/contrast.md create mode 100644 docs/spec/direct.md create mode 100644 docs/spec/feature.md create mode 100644 docs/spec/invitation.md create mode 100644 docs/spec/lightweight.md create mode 100644 docs/spec/principle.md create mode 100644 docs/spec/proximity.md create mode 100644 docs/spec/reaction.md create mode 100644 docs/spec/repetition.md create mode 100644 docs/spec/stay.md create mode 100644 docs/spec/transition.md diff --git a/docs/spec/alignment.md b/docs/spec/alignment.md new file mode 100644 index 0000000000..5eb5e7f619 --- /dev/null +++ b/docs/spec/alignment.md @@ -0,0 +1,25 @@ +# 对齐 + +- category: 设计原则 +- order: 2 +- subtitle: Alignment + +--- + +正如『格式塔学派』中的连续律（Law of Continuity）所描述的，在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性；也能引导视觉流向，让用户更流畅地接收信息。 + +> 格式塔学派（德语：Gestalttheorie）：是心理学重要流派之一，兴起于 20 世纪初的德国，又称为完形心理学；主张人脑的运作原理是整体的，『整体不同于其部件的总和』。——摘自『维基百科』 + +## 文案类对齐 + +如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点。 + +## 表单类对齐 + +冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。 + +更多对齐方式，请查看『模式』-『表单』-『规格』-『对齐方式』。 + +## 数字类对齐 + +为了快速对比数值大小，建议所有数值取相同有效位数，并且右对齐。 diff --git a/docs/spec/contrast.md b/docs/spec/contrast.md new file mode 100644 index 0000000000..58ab696396 --- /dev/null +++ b/docs/spec/contrast.md @@ -0,0 +1,29 @@ +# 对比 + +- category: 设计原则 +- order: 3 +- subtitle: Contrast + +--- + +对比是增加视觉效果最有效方法之一，同时也能在不同元素之间建立一种有组织的层次结构，让用户快速识别关键信息。 + +> 注：要实现有效的对比，对比就必须强烈，切不可畏畏缩缩。 + +## 主次关系对比 + +为了让用户能在操作上（类似表单、弹出框等场景）快速做出判断， 来突出其中一项相对更重要或者更高频的操作。 + +> 注意：突出的方法，不局限于强化重点项，也可以是弱化其他项。 + +在一些需要用户慎重决策的场景中，系统应该保持中立，不能替用户或者诱导用户做出判断。 + +## 总分关系对比 + +通过调整排版、字体、大小等方式来突出层次感，区分总分关系，使得页面更具张力和节奏感。 + +### 状态关系对比 + +通过改变颜色、增加辅助形状等方法来实现状态关系的对比，以便用户更好的区分信息。 + +常见类型有『静态对比』、『动态对比』。 diff --git a/docs/spec/direct.md b/docs/spec/direct.md new file mode 100644 index 0000000000..366ecb477f --- /dev/null +++ b/docs/spec/direct.md @@ -0,0 +1,24 @@ +# 直截了当 + +- category: 设计原则 +- order: 5 +- subtitle: Make it Direct + +--- + +正如 Alan Cooper 所言：『需要在哪里输出，就要允许在哪里输入』。这就是直接操作的原理。eg：不要为了编辑内容而打开另一个页面，应该直接在上下文中实现编辑。 + +## 页内编辑 + +单字段行内编辑 + +当『易读性』远比『易编辑性』重要时，可以使用『单击编辑』。 + +当『易读性』为主，同时又要突出操作行的『易编辑性』时，可使用『文字链/图标编辑』。 + + +多字段行内编辑 + +注：在『多字段行内编辑』的情况下，显示的内容和编辑时所需的字段会存在比较大的差异，所以更需要『巧用过渡』原则中的『解释刚刚发生了什么』来消除这种视觉影响。 + +更多有关『页内编辑』的模式，可查看『模式』-『表格』-『交互』中的内容。 diff --git a/docs/spec/feature.md b/docs/spec/feature.md new file mode 100644 index 0000000000..0d4edb19c4 --- /dev/null +++ b/docs/spec/feature.md @@ -0,0 +1,91 @@ +# 特性 + +- category: 1 +- order: 1 + +--- + +Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言。 + +在中台设计中，我们模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界，将进行体验设计和界面设计人员统称为『设计者』，并为其提供一系列工具和服务来支持他们进行业务创新。 + +## 三大特性 + +
+
+ +
微小
+
致力于微小而美好的改变，力求在细节上精益求精，不仅让业务产品更加实用和可靠，而且还能让『用户』感到小惊喜。
+
+
+ +
确定
+
通过制定通俗而科学的规则、运用面向对象的方法、使用一致的文档沟通机制，给予研发团队一种高确定性、低熵值的研发状态。
+
+
+ +
幸福
+
不苛求简单，但是力求让『用户』和『设计者』流畅的完成目标，并带着成功和满足离开。
+
+
+ + + +## 微小 + +### 微创新 + + + +『不同』不一定『更好』，但是『更好』一定『不同』。不断追求细节上的『更好』，使得我们的组件和同类产品都不一样，自然而然的『不同』。 + +### 集成创新 + + + +选择合适的组件进行组合和集成，形成优势互补的创新过程，来满足多变的业务需求。 + +--- + +## 确定 + +### 面向对象的方法 + + + +探索设计规律，并将其抽象成『对象』，增强界面设计的灵活性和可维护性，同时也减少『设计者』的主观干扰，从而降低系统的不确定性。 + +### 通俗科学的规则 + +详见『十大原则』。 + +--- + +## 幸福 + +### 用户的幸福 + + + +漂亮的组件、精致的排版、流畅的动画等的元素，使用户在『本能层次』中产生积极反应； + +良好的功能、性能和可用性，使用户在『行为层次』中产生积极反应； + +自我形象、个人满足和美好记忆，使用户在『反思层次』中体验思想和情感的交融。 + +### 设计者的幸福 + + + +从『无』到『有』时，提供一整套设计解决方案，帮助『设计者』将商业想法快速形成产品并推向市场，快速、低成本试错。 + +从『有』到『优』时，提供一系列自定义建议，帮助『设计者』塑造产品个性并提升整体体验，服务海量用户。 diff --git a/docs/spec/introduce.md b/docs/spec/introduce.md index d26ad09ae7..7aefa9500a 100644 --- a/docs/spec/introduce.md +++ b/docs/spec/introduce.md @@ -5,11 +5,9 @@ --- -Ant Design 是一个 UI 设计语言，是一套提炼和应用于企业级中后台产品的交互语言和视觉体系。 +Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言。 - - -Ant Design 源自蚂蚁金服体验技术部的后台产品开发。在中后台产品设计中，通常有很多类似的页面和控件，不同的产品会出现不同的规范和实现，给设计师和工程师带来很多困扰和重复建设，降低企业后台的整体研发效率。我们的设计师和前端工程师经过大量的项目实践和总结，希望能沉淀出一套企业级的交互视觉规范，统一中后台项目的前端 UI 设计，屏蔽各种不必要的设计差异和前端实现成本，解放设计和前端开发资源。 +Ant Design 源自蚂蚁金服体验技术部的中台产品开发。在中后台产品设计中，通常有很多类似的页面和控件，不同的产品会出现不同的规范和实现，给设计师和工程师带来很多困扰和重复建设，降低企业后台的整体研发效率。我们的设计师和前端工程师经过大量的项目实践和总结，希望能沉淀出一套企业级的交互视觉规范，统一中后台项目的前端 UI 设计，屏蔽各种不必要的设计差异和前端实现成本，解放设计和前端开发资源。 整套设计规范还在持续整理和完善中。 diff --git a/docs/spec/invitation.md b/docs/spec/invitation.md new file mode 100644 index 0000000000..744f7e39e6 --- /dev/null +++ b/docs/spec/invitation.md @@ -0,0 +1,7 @@ +# 提供邀请 + +- category: 设计原则 +- order: 8 +- subtitle: Provide Invitation + +--- diff --git a/docs/spec/lightweight.md b/docs/spec/lightweight.md new file mode 100644 index 0000000000..e5d39a598a --- /dev/null +++ b/docs/spec/lightweight.md @@ -0,0 +1,34 @@ +# 简化交互 + +- category: 设计原则 +- order: 6 +- subtitle: Keep it Lightweight + +--- + +根据费茨法则（Fitts's Law）所描述的，如果用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作。通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互。 + +> 注：费茨法则：到达目标的时间是到达目标的距离与目标大小的函数，具体：t = a + b log2 (D / S + 1）。其中：1.设备当前位置和目标位置的距离（D）；2.目标的大小（S）。距离越长，所用时间越长；目标越大，所用时间越短。 + +## 实时可见工具 + +如果某个操作非常重要，就应该把它放在界面中，并实时可见。 + +## 悬停即现工具 + +如果某个操作不那么重要，或者使用『实时可见工具』过于啰嗦会影响用户阅读时，可以在悬停在该对象上时展示操作项。 + +## 开关显示工具 + +如果某些操作只需要在特定模式时显示，可以通过开关来实现。 + + +## 交互中的工具 + +如果操作不重要或者可以通过其他途径完成时，可以将工具放置在用户的操作流程中，减少界面元素，降低认知负担，给用户小惊喜。 + +此处也可以运用『提供邀请』相关的知识点。 + +## 可视区域 ≠ 可点击区域 + +注：在移动端尤其适用。 diff --git a/docs/spec/principle.md b/docs/spec/principle.md new file mode 100644 index 0000000000..79c877bd71 --- /dev/null +++ b/docs/spec/principle.md @@ -0,0 +1,25 @@ +# 十大原则 + +- category: 设计原则 +- order: 0 + +--- + +『好设计比差设计更难发现』，因为好设计是如此的自然，帮助用户轻松的完成目标，以至于用户根本意识不到好设计的存在。 + +我们借鉴了《写给大家看的设计书》、《Web 界面设计》对设计原则的总结和推理，并结合我们团队的实践和理解，制定了以下十大原则，为『设计者』提供解决具体问题的准则和启示。 + +> 注：设计原则是对具象设计的抽象和总结，然而产品是一个整体，用户对整个产品的认知也是从全局到局部，所以忽略全局，只在局部套用原则是不可取的。对于这些原则，『设计者』应当理性地学会它，而后勇敢地抛弃它。 + +我们总结了中台十大设计原则： + +- [亲密性 Proximity]() +- [对齐 Alignment]() +- [对比 Contrast]() +- [重复 Repetition]() +- [直截了当 Make it Direct]() +- [简化交互 Keep it Lightweight]() +- [足不出户 Stay on The Page]() +- [提供邀请 Provide Invitation]() +- [巧用过渡 Use Transition]() +- [即时反应 React Immediately]() diff --git a/docs/spec/proximity.md b/docs/spec/proximity.md new file mode 100644 index 0000000000..10c96e70e3 --- /dev/null +++ b/docs/spec/proximity.md @@ -0,0 +1,23 @@ +# 亲密性 + +- category: 设计原则 +- order: 1 +- subtitle: Proximity + +--- + +『物理位置的接近意味着存在关联』，也就是说如果信息之间关联性越高，它们之间的距离越接近，也越像一个视觉单元；反之，则它们的距离越远，越像多个视觉单元。亲密性的根本目的是实现**组织性**，让用户对页面结构和信息层次一目了然。 + +## 纵向间距关系 + +通过『小号间距』、『中号间距』、『大号间距』这三种规格来划分信息层次。 + +在这三种规格不适用的情况下，可以通过加减『基础间距』的倍数，或者增加元素来拉开信息层次。 + +> 注：在 Ant Design 中，`y=8+8*n`。其中，`n>=0`，y 是纵向间距，8 是『基础间距』。 + +## 横向间距关系 + +为了适用不同尺寸的屏幕，在横向采用栅格布局来排布组件，从而保证布局的灵活性。 + +在一个组件内部，元素的横向间距也应该有所不同。 diff --git a/docs/spec/reaction.md b/docs/spec/reaction.md new file mode 100644 index 0000000000..8b84620302 --- /dev/null +++ b/docs/spec/reaction.md @@ -0,0 +1,7 @@ +# 即时反应 + +- category: 设计原则 +- order: 10 +- subtitle: Stay in the Page + +--- diff --git a/docs/spec/repetition.md b/docs/spec/repetition.md new file mode 100644 index 0000000000..4673d14a60 --- /dev/null +++ b/docs/spec/repetition.md @@ -0,0 +1,11 @@ +# 重复 + +- category: 设计原则 +- order: 4 +- subtitle: Repetition + +--- + +相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成本，也可以帮助用户识别出这些元素之间的关联性。 + +重复元素可以是一条粗线、一种线框，某种相同的颜色、设计要素、设计风格，某种格式、空间关系等。 diff --git a/docs/spec/stay.md b/docs/spec/stay.md new file mode 100644 index 0000000000..30836f5043 --- /dev/null +++ b/docs/spec/stay.md @@ -0,0 +1,7 @@ +# 足不出户 + +- category: 设计原则 +- order: 6 +- subtitle: Stay in the Page + +--- diff --git a/docs/spec/transition.md b/docs/spec/transition.md new file mode 100644 index 0000000000..c799015dc7 --- /dev/null +++ b/docs/spec/transition.md @@ -0,0 +1,7 @@ +# 巧用过渡 + +- category: 设计原则 +- order: 9 +- subtitle: Use Transition + +--- diff --git a/site/templates/aside.html b/site/templates/aside.html index 9b7a8d325d..7c746d7ad8 100644 --- a/site/templates/aside.html +++ b/site/templates/aside.html @@ -10,6 +10,7 @@ class="{%- if item.meta.disabled %}nav-link-disabled{%- endif %}"> {{item.title}} {{item.meta.chinese}} + {{item.meta.subtitle}} {%- endfor %} diff --git a/site/templates/component.html b/site/templates/component.html index 4d068c72dc..edb39fca5d 100644 --- a/site/templates/component.html +++ b/site/templates/component.html @@ -4,7 +4,7 @@

- {{ post.title }} {{ post.meta.chinese }} + {{ post.title }} {{ post.meta.chinese }}{{ post.meta.subtitle }} {%- if post.meta.API %} From 7d3ebba56416b47799b803aabd371bd996b33353 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 8 Mar 2016 17:45:19 +0800 Subject: [PATCH 06/86] Add design principles --- docs/spec/alignment.md | 8 ++++++++ docs/spec/contrast.md | 13 +++++++++++++ docs/spec/principle.md | 23 +++++++++++++++++++++-- docs/spec/proximity.md | 8 ++++++++ docs/spec/repetition.md | 8 ++++++++ site/templates/aside.html | 1 - site/templates/page.html | 2 +- 7 files changed, 59 insertions(+), 4 deletions(-) diff --git a/docs/spec/alignment.md b/docs/spec/alignment.md index 5eb5e7f619..732e3723a9 100644 --- a/docs/spec/alignment.md +++ b/docs/spec/alignment.md @@ -12,14 +12,22 @@ ## 文案类对齐 +推荐示例 +不推荐示例 + 如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点。 ## 表单类对齐 +冒号对齐示例 + 冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。 更多对齐方式，请查看『模式』-『表单』-『规格』-『对齐方式』。 ## 数字类对齐 +正确示例 +错误示例 + 为了快速对比数值大小，建议所有数值取相同有效位数，并且右对齐。 diff --git a/docs/spec/contrast.md b/docs/spec/contrast.md index 58ab696396..3d7bfb3cf3 100644 --- a/docs/spec/contrast.md +++ b/docs/spec/contrast.md @@ -12,18 +12,31 @@ ## 主次关系对比 +正确示例 +错误示例 + 为了让用户能在操作上（类似表单、弹出框等场景）快速做出判断， 来突出其中一项相对更重要或者更高频的操作。 > 注意：突出的方法，不局限于强化重点项，也可以是弱化其他项。 +不区分主次的示例 + 在一些需要用户慎重决策的场景中，系统应该保持中立，不能替用户或者诱导用户做出判断。 ## 总分关系对比 +总分关系示例 1 + +总分关系示例 2 + 通过调整排版、字体、大小等方式来突出层次感，区分总分关系，使得页面更具张力和节奏感。 ### 状态关系对比 +静态对比示例 + +动态对比示例 + 通过改变颜色、增加辅助形状等方法来实现状态关系的对比，以便用户更好的区分信息。 常见类型有『静态对比』、『动态对比』。 diff --git a/docs/spec/principle.md b/docs/spec/principle.md index 79c877bd71..0ca3b7ea95 100644 --- a/docs/spec/principle.md +++ b/docs/spec/principle.md @@ -11,9 +11,28 @@ > 注：设计原则是对具象设计的抽象和总结，然而产品是一个整体，用户对整个产品的认知也是从全局到局部，所以忽略全局，只在局部套用原则是不可取的。对于这些原则，『设计者』应当理性地学会它，而后勇敢地抛弃它。 -我们总结了中台十大设计原则： +
+ + + + Web 界面设计 + 作者: Bill Scott / Theresa Neil + 出版社: 电子工业出版社 + + + + + + 写给大家看的设计书 + 作者: Robin Williams + 出版社: 人民邮电出版社 + + +
-- [亲密性 Proximity]() +#### 中台十大设计原则 + +- [亲密性 Proximity](./proximity) - [对齐 Alignment]() - [对比 Contrast]() - [重复 Repetition]() diff --git a/docs/spec/proximity.md b/docs/spec/proximity.md index 10c96e70e3..f557a7d513 100644 --- a/docs/spec/proximity.md +++ b/docs/spec/proximity.md @@ -10,14 +10,22 @@ ## 纵向间距关系 +纵向间距示例 + 通过『小号间距』、『中号间距』、『大号间距』这三种规格来划分信息层次。 +增加元素示例 + 在这三种规格不适用的情况下，可以通过加减『基础间距』的倍数，或者增加元素来拉开信息层次。 > 注：在 Ant Design 中，`y=8+8*n`。其中，`n>=0`，y 是纵向间距，8 是『基础间距』。 ## 横向间距关系 +组合排布示例 + 为了适用不同尺寸的屏幕，在横向采用栅格布局来排布组件，从而保证布局的灵活性。 +复选框内示例 + 在一个组件内部，元素的横向间距也应该有所不同。 diff --git a/docs/spec/repetition.md b/docs/spec/repetition.md index 4673d14a60..1751e6dd8b 100644 --- a/docs/spec/repetition.md +++ b/docs/spec/repetition.md @@ -8,4 +8,12 @@ 相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成本，也可以帮助用户识别出这些元素之间的关联性。 +## 重复元素 + +线框重复示例 + +设计要素重复示例 + +文案格式重复示例 + 重复元素可以是一条粗线、一种线框，某种相同的颜色、设计要素、设计风格，某种格式、空间关系等。 diff --git a/site/templates/aside.html b/site/templates/aside.html index 7c746d7ad8..9b7a8d325d 100644 --- a/site/templates/aside.html +++ b/site/templates/aside.html @@ -10,7 +10,6 @@ class="{%- if item.meta.disabled %}nav-link-disabled{%- endif %}"> {{item.title}} {{item.meta.chinese}} - {{item.meta.subtitle}} {%- endfor %} diff --git a/site/templates/page.html b/site/templates/page.html index e2ccae706b..3b519e127e 100644 --- a/site/templates/page.html +++ b/site/templates/page.html @@ -17,7 +17,7 @@ {% block content %}
-

{{ post.title }} {{ post.meta.chinese }}

+

{{ post.title }} {{ post.meta.subtitle }}

{{ post.toc }}
{{ post.html|add_anchor }}
From 1c73c61f175b099a11e92c0738c5ede642e15c75 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 8 Mar 2016 19:39:08 +0800 Subject: [PATCH 07/86] fix touch event --- scripts/demo.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/demo.js b/scripts/demo.js index 891691956b..41251392f3 100644 --- a/scripts/demo.js +++ b/scripts/demo.js @@ -382,7 +382,7 @@ InstantClickChangeFns.push(function() { navMenu.removeClass('nav-hide').addClass('nav-show'); }); - $('body').on('click', function (e) { + $('body').on('click touchstart', function (e) { if (e.target !== $('.nav-phone-icon')[0] && !navMenu[0].contains(e.target) && navMenu.hasClass('nav-show')) { From b6ffd6ced151b951dbb3d38e67bd60adc38d68fe Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 8 Mar 2016 20:05:50 +0800 Subject: [PATCH 08/86] update docs --- docs/spec/lightweight.md | 2 +- docs/spec/principle.md | 18 +++++++++--------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/spec/lightweight.md b/docs/spec/lightweight.md index e5d39a598a..b944c91dcd 100644 --- a/docs/spec/lightweight.md +++ b/docs/spec/lightweight.md @@ -8,7 +8,7 @@ 根据费茨法则（Fitts's Law）所描述的，如果用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作。通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互。 -> 注：费茨法则：到达目标的时间是到达目标的距离与目标大小的函数，具体：t = a + b log2 (D / S + 1）。其中：1.设备当前位置和目标位置的距离（D）；2.目标的大小（S）。距离越长，所用时间越长；目标越大，所用时间越短。 +> 注：费茨法则：到达目标的时间是到达目标的距离与目标大小的函数，具体：。其中：1.设备当前位置和目标位置的距离（D）；2.目标的大小（W）。距离越长，所用时间越长；目标越大，所用时间越短。 ## 实时可见工具 diff --git a/docs/spec/principle.md b/docs/spec/principle.md index 0ca3b7ea95..9fc800fed1 100644 --- a/docs/spec/principle.md +++ b/docs/spec/principle.md @@ -33,12 +33,12 @@ #### 中台十大设计原则 - [亲密性 Proximity](./proximity) -- [对齐 Alignment]() -- [对比 Contrast]() -- [重复 Repetition]() -- [直截了当 Make it Direct]() -- [简化交互 Keep it Lightweight]() -- [足不出户 Stay on The Page]() -- [提供邀请 Provide Invitation]() -- [巧用过渡 Use Transition]() -- [即时反应 React Immediately]() +- [对齐 Alignment](./alignment) +- [对比 Contrast](./contrast) +- [重复 Repetition](./repetition) +- [直截了当 Make it Direct](./direct) +- [简化交互 Keep it Lightweight](./lightweight) +- [足不出户 Stay in the Page](./stay) +- [提供邀请 Provide Invitation](./invitation) +- [巧用过渡 Use Transition](./transition) +- [即时反应 React Immediately](./reaction) From 3e0d11043b3dfbef95dc8bd177e39fc7830a576d Mon Sep 17 00:00:00 2001 From: yiminghe Date: Tue, 8 Mar 2016 20:29:18 +0800 Subject: [PATCH 09/86] fix pagination in table --- components/table/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/table/index.jsx b/components/table/index.jsx index 32ffc4d205..72648e2f2d 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -86,7 +86,7 @@ let AntTable = React.createClass({ componentWillReceiveProps(nextProps) { if (('pagination' in nextProps) && nextProps.pagination !== false) { this.setState({ - pagination: objectAssign({}, this.state.pagination, nextProps.pagination) + pagination: objectAssign({}, defaultPagination, this.state.pagination, nextProps.pagination) }); } // dataSource 的变化会清空选中项 From b838d3b40ff01c4e857bcf6e0ff18c98c5077717 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 8 Mar 2016 21:03:05 +0800 Subject: [PATCH 10/86] Add pictures --- docs/spec/alignment.md | 10 +++++----- docs/spec/contrast.md | 16 +++++++++------- docs/spec/feature.md | 16 ++++++++++------ docs/spec/proximity.md | 12 ++++++++---- docs/spec/repetition.md | 6 +++--- 5 files changed, 35 insertions(+), 25 deletions(-) diff --git a/docs/spec/alignment.md b/docs/spec/alignment.md index 732e3723a9..60c17c7e89 100644 --- a/docs/spec/alignment.md +++ b/docs/spec/alignment.md @@ -12,14 +12,14 @@ ## 文案类对齐 -推荐示例 -不推荐示例 +推荐示例 +不推荐示例 如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点。 ## 表单类对齐 -冒号对齐示例 +冒号对齐示例 冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。 @@ -27,7 +27,7 @@ ## 数字类对齐 -正确示例 -错误示例 +正确示例 +错误示例 为了快速对比数值大小，建议所有数值取相同有效位数，并且右对齐。 diff --git a/docs/spec/contrast.md b/docs/spec/contrast.md index 3d7bfb3cf3..ad8d115109 100644 --- a/docs/spec/contrast.md +++ b/docs/spec/contrast.md @@ -12,30 +12,32 @@ ## 主次关系对比 -正确示例 -错误示例 +正确示例 +错误示例 为了让用户能在操作上（类似表单、弹出框等场景）快速做出判断， 来突出其中一项相对更重要或者更高频的操作。 > 注意：突出的方法，不局限于强化重点项，也可以是弱化其他项。 -不区分主次的示例 +
+ +不区分主次的示例 在一些需要用户慎重决策的场景中，系统应该保持中立，不能替用户或者诱导用户做出判断。 ## 总分关系对比 -总分关系示例 1 +总分关系示例 1 -总分关系示例 2 +总分关系示例 2 通过调整排版、字体、大小等方式来突出层次感，区分总分关系，使得页面更具张力和节奏感。 ### 状态关系对比 -静态对比示例 +静态对比示例 -动态对比示例 +动态对比示例 通过改变颜色、增加辅助形状等方法来实现状态关系的对比，以便用户更好的区分信息。 diff --git a/docs/spec/feature.md b/docs/spec/feature.md index 0d4edb19c4..2ea31f1f95 100644 --- a/docs/spec/feature.md +++ b/docs/spec/feature.md @@ -5,25 +5,29 @@ --- +
+ +
+ Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言。 在中台设计中，我们模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界，将进行体验设计和界面设计人员统称为『设计者』，并为其提供一系列工具和服务来支持他们进行业务创新。 ## 三大特性 -
+
- +
微小
致力于微小而美好的改变，力求在细节上精益求精，不仅让业务产品更加实用和可靠，而且还能让『用户』感到小惊喜。
- +
确定
通过制定通俗而科学的规则、运用面向对象的方法、使用一致的文档沟通机制，给予研发团队一种高确定性、低熵值的研发状态。
- +
幸福
不苛求简单，但是力求让『用户』和『设计者』流畅的完成目标，并带着成功和满足离开。
@@ -31,12 +35,12 @@ Ant Design 是一个致力于提升『用户』和『设计者』使用体验的 diff --git a/docs/spec/proximity.md b/docs/spec/proximity.md index f557a7d513..84886d12c5 100644 --- a/docs/spec/proximity.md +++ b/docs/spec/proximity.md @@ -10,11 +10,13 @@ ## 纵向间距关系 -纵向间距示例 +纵向间距示例 通过『小号间距』、『中号间距』、『大号间距』这三种规格来划分信息层次。 -增加元素示例 +
+ +增加元素示例 在这三种规格不适用的情况下，可以通过加减『基础间距』的倍数，或者增加元素来拉开信息层次。 @@ -22,10 +24,12 @@ ## 横向间距关系 -组合排布示例 +组合排布示例 为了适用不同尺寸的屏幕，在横向采用栅格布局来排布组件，从而保证布局的灵活性。 -复选框内示例 +
+ +复选框内示例 在一个组件内部，元素的横向间距也应该有所不同。 diff --git a/docs/spec/repetition.md b/docs/spec/repetition.md index 1751e6dd8b..4b0edebe21 100644 --- a/docs/spec/repetition.md +++ b/docs/spec/repetition.md @@ -10,10 +10,10 @@ ## 重复元素 -线框重复示例 +线框重复示例 -设计要素重复示例 +设计要素重复示例 -文案格式重复示例 +文案格式重复示例 重复元素可以是一条粗线、一种线框，某种相同的颜色、设计要素、设计风格，某种格式、空间关系等。 From 1be6669bb7d74ee20ca47dd335d60319a790e54b Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 8 Mar 2016 23:44:42 +0800 Subject: [PATCH 11/86] remove es3ify, ref #858 --- webpack.config.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/webpack.config.js b/webpack.config.js index bcba32864e..49f7afa0f0 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -26,10 +26,6 @@ module.exports = { module: { loaders: [{ - test: /\.jsx?$/, - exclude: /node_modules/, - loader: 'es3ify', - }, { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', From 6526468f575b03f92f02da9e7e4af2ecc916da69 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 8 Mar 2016 23:53:09 +0800 Subject: [PATCH 12/86] fix inline FormItem margin, close #1141 --- style/components/form.less | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/style/components/form.less b/style/components/form.less index 0c7adfc14e..ce0c7c73ca 100644 --- a/style/components/form.less +++ b/style/components/form.less @@ -242,6 +242,12 @@ form { .@{css-prefix}form-item { display: inline-block; margin-right: 10px; + margin-bottom: 0; + + &-with-help { + margin-bottom: 24px; + } + > div { display: inline-block; } From 56fb20b76dedd6469184f8dd8c71f21bb679b7dc Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 9 Mar 2016 11:33:05 +0800 Subject: [PATCH 13/86] Fix date-picker style prop --- components/date-picker/index.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/components/date-picker/index.jsx b/components/date-picker/index.jsx index 85670591ec..b6dd9fb69a 100644 --- a/components/date-picker/index.jsx +++ b/components/date-picker/index.jsx @@ -115,7 +115,7 @@ function createPicker(TheCalendar, defaultFormat) { pickerClass += ' ant-calendar-picker-open'; } return ( - + From 3baf790341fa7c83afe103d03ab2642240447260 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 9 Mar 2016 11:50:02 +0800 Subject: [PATCH 14/86] fix badge style --- style/components/badge.less | 1 + 1 file changed, 1 insertion(+) diff --git a/style/components/badge.less b/style/components/badge.less index 94b1a1726a..84cc76f362 100644 --- a/style/components/badge.less +++ b/style/components/badge.less @@ -5,6 +5,7 @@ position: relative; display: inline-block; line-height: 1; + vertical-align: middle; &-count { position: absolute; From b706a024c6097f37bef72c55e804715d1f17465a Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 9 Mar 2016 11:50:11 +0800 Subject: [PATCH 15/86] Fix autoprefix --- package.json | 1 + webpack.config.js | 3 +++ 2 files changed, 4 insertions(+) diff --git a/package.json b/package.json index 416565f6d6..6d769c3157 100644 --- a/package.json +++ b/package.json @@ -72,6 +72,7 @@ "warning": "~2.1.0" }, "devDependencies": { + "autoprefixer": "^6.3.3", "babel-cli": "^6.2.0", "babel-core": "^6.2.1", "babel-jest": "^6.0.1", diff --git a/webpack.config.js b/webpack.config.js index 49f7afa0f0..ef21c5af4e 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -2,6 +2,7 @@ var webpack = require('webpack'); var ExtractTextPlugin = require("extract-text-webpack-plugin"); var path = require('path'); var pkg = require('./package'); +var autoprefixer = require('autoprefixer'); var entry = {}; entry['demo'] = ['./scripts/demo.js', 'webpack-hot-middleware/client']; @@ -53,6 +54,8 @@ module.exports = { }] }, + postcss: [autoprefixer], + plugins: [ new ExtractTextPlugin('[name].css'), new webpack.optimize.OccurenceOrderPlugin(), From 1c5bc26e9f16f76b73d7630271ea3d39a5aa22a1 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 9 Mar 2016 11:57:00 +0800 Subject: [PATCH 16/86] Fix badge in old webkit browser --- components/badge/ScrollNumber.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/components/badge/ScrollNumber.jsx b/components/badge/ScrollNumber.jsx index 9b91e788a3..7acf36799d 100644 --- a/components/badge/ScrollNumber.jsx +++ b/components/badge/ScrollNumber.jsx @@ -76,6 +76,7 @@ class AntScrollNumber extends React.Component { className: `${this.props.prefixCls}-only`, style: { transition: removeTransition && 'none', + webkitTransform: `translate3d(0, ${-position * height}px, 0)`, transform: `translate3d(0, ${-position * height}px, 0)`, height, }, From a553f6b2999f14a9584985b4ff98115c5ef9ea54 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 9 Mar 2016 11:59:02 +0800 Subject: [PATCH 17/86] typo --- components/badge/ScrollNumber.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/badge/ScrollNumber.jsx b/components/badge/ScrollNumber.jsx index 7acf36799d..27a2fd19d5 100644 --- a/components/badge/ScrollNumber.jsx +++ b/components/badge/ScrollNumber.jsx @@ -76,7 +76,7 @@ class AntScrollNumber extends React.Component { className: `${this.props.prefixCls}-only`, style: { transition: removeTransition && 'none', - webkitTransform: `translate3d(0, ${-position * height}px, 0)`, + WebkitTransform: `translate3d(0, ${-position * height}px, 0)`, transform: `translate3d(0, ${-position * height}px, 0)`, height, }, From 6d9f26088b232e471f713a6e20dfca83887c0feb Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 9 Mar 2016 15:56:00 +0800 Subject: [PATCH 18/86] Add pictures --- docs/spec/alignment.md | 2 +- docs/spec/feature.md | 28 ++++++++++++++++++++-------- 2 files changed, 21 insertions(+), 9 deletions(-) diff --git a/docs/spec/alignment.md b/docs/spec/alignment.md index 60c17c7e89..d85b631ee9 100644 --- a/docs/spec/alignment.md +++ b/docs/spec/alignment.md @@ -23,7 +23,7 @@ 冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。 -更多对齐方式，请查看『模式』-『表单』-『规格』-『对齐方式』。 +更多对齐方式，请查看[『模式』-『表单』-『规格』-『对齐方式』](../pattern/form#对齐方式)。 ## 数字类对齐 diff --git a/docs/spec/feature.md b/docs/spec/feature.md index 2ea31f1f95..cb4424061d 100644 --- a/docs/spec/feature.md +++ b/docs/spec/feature.md @@ -1,4 +1,4 @@ -# 特性 +# 三大特性 - category: 1 - order: 1 @@ -13,7 +13,7 @@ Ant Design 是一个致力于提升『用户』和『设计者』使用体验的 在中台设计中，我们模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界，将进行体验设计和界面设计人员统称为『设计者』，并为其提供一系列工具和服务来支持他们进行业务创新。 -## 三大特性 +## 特性
@@ -48,13 +48,19 @@ Ant Design 是一个致力于提升『用户』和『设计者』使用体验的 ### 微创新 - +数值输入框示例 + +分页示例 + +字数校验框示例 『不同』不一定『更好』，但是『更好』一定『不同』。不断追求细节上的『更好』，使得我们的组件和同类产品都不一样，自然而然的『不同』。 ### 集成创新 - +填空示例 + +带图表的表格 选择合适的组件进行组合和集成，形成优势互补的创新过程，来满足多变的业务需求。 @@ -64,13 +70,19 @@ Ant Design 是一个致力于提升『用户』和『设计者』使用体验的 ### 面向对象的方法 - +色值换算工具示例 + +排版规则示例 + +操作反馈 - 正确示例 + +操作反馈 - 错误示例 探索设计规律，并将其抽象成『对象』，增强界面设计的灵活性和可维护性，同时也减少『设计者』的主观干扰，从而降低系统的不确定性。 ### 通俗科学的规则 -详见『十大原则』。 +详见[『十大原则』](./principle)。 --- @@ -78,7 +90,7 @@ Ant Design 是一个致力于提升『用户』和『设计者』使用体验的 ### 用户的幸福 - +用户的幸福示例 漂亮的组件、精致的排版、流畅的动画等的元素，使用户在『本能层次』中产生积极反应； @@ -88,7 +100,7 @@ Ant Design 是一个致力于提升『用户』和『设计者』使用体验的 ### 设计者的幸福 - +设计者的幸福示例 从『无』到『有』时，提供一整套设计解决方案，帮助『设计者』将商业想法快速形成产品并推向市场，快速、低成本试错。 From e5ba8b72f5d3e326070a52fd6c272cb4a55ae4cb Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 9 Mar 2016 16:01:02 +0800 Subject: [PATCH 19/86] upgrade polyfill files --- docs/react/getting-started.md | 2 +- site/templates/layout.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/react/getting-started.md b/docs/react/getting-started.md index b9ca914184..fb552d8a69 100644 --- a/docs/react/getting-started.md +++ b/docs/react/getting-started.md @@ -119,7 +119,7 @@ Ant Design React 支持所有的现代浏览器和 IE8+。 - + diff --git a/site/templates/layout.html b/site/templates/layout.html index 28ddc69da8..1629b3cb0d 100644 --- a/site/templates/layout.html +++ b/site/templates/layout.html @@ -13,7 +13,7 @@ {% block styles %}{% endblock %} - + - -
- -
- -> 参考我们的进场组件案例。查看[进场动画组件(QueueAnim)](/components/queue-anim/) diff --git a/docs/spec/transition.md b/docs/spec/transition.md index 9bfb87c43a..f602411a97 100644 --- a/docs/spec/transition.md +++ b/docs/spec/transition.md @@ -8,22 +8,57 @@ 人脑灰质（Gray Matter）会对动态的事物（eg：移动、形变、色变等）保持敏感。在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增强用户和界面的沟通。 +- Adding:  新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。 + +- Receding:  与当前页无关的信息元素应采用适当方式移除。 + +- Normal: 指那些从转场开始到结束都没有发生变化的信息元素。 + +````css +video{ + display: block; +} +```` ## 在视图变化时保持上下文 -滑入与滑出示例 +
+ +
+
+
+
+
+ +
滑入与滑出：可以有效构建虚拟空间。
-传送带示例 +
+ +
+
+
传送带示例
+
+
+ +
传送带：可极大地扩展虚拟空间。
-折叠窗口示例 +
+ +
+
+
折叠窗口示例
+
+
+ +
折叠窗口：在视图切换时，有助于保持上下文，同时也能拓展虚拟空间。 @@ -35,24 +70,57 @@ 视图定位：在视图切换时，保持定位。 ## 解释刚刚发生了什么 - -对象增加示例 - +
+ +
+
+
对象增加示例
+
新增一条对象时，该行『高亮』告知用户这是新增项；几秒后『高亮』消失，以免过度干扰用户。
+
+ +
对象增加：在列表/表格中，新增了一个对象。
- -对象删除示例 +
+ +
+
+
对象删除示例
+
+
+ +
对象删除：在列表/表格中，删除了一个对象。
- -对象更改示例 +
+ +
+
+
对象更改示例
+
状态一：用户更改了『详情』中的值；
+ 状态二：用户点击『保存』后，详情所在的网格出现『黄底』，表明该对象发生了更改；
状态三：底色持续『 1 秒』后消失，回复正常。
+
+ +
对象更改：在列表/表格中，更改了一个对象。 +
+
+ +
+
+
弹出框唤起
+
从页面的某个按钮唤起弹出框时, 弹框从按钮处唤起, 可提示用户弹框与按钮的关第;
+
+ +
+ +弹出框唤起：从页面的某个按钮唤起弹出框时, 弹框从按钮处唤起, 可提示用户弹框与按钮的关第;。 + ## 改善感知性能 @@ -67,3 +135,5 @@ 常见过渡效果：『按钮过渡』、『页面过渡』。 + + diff --git a/site/static/motion.js b/site/static/motion.js index 19c5ba9bbd..6f4576bae5 100644 --- a/site/static/motion.js +++ b/site/static/motion.js @@ -839,8 +839,12 @@ $(function() { window.Motion = newMotion; var motionVideo = { - video: ['https://t.alipayobjects.com/images/rmsweb/T1yHhhXfxkXXXXXXXX.webm', 'https://t.alipayobjects.com/images/rmsweb/T12I8gXexdXXXXXXXX.webm', 'https://t.alipayobjects.com/images/rmsweb/T1br0gXghtXXXXXXXX.webm', 'https://t.alipayobjects.com/images/rmsweb/T14q0hXbBdXXXXXXXX.webm'], - videoMp4: ['https://t.alipayobjects.com/images/rmsweb/T15IXhXlXbXXXXXXXX.mp4', 'https://t.alipayobjects.com/images/rmsweb/T1e0hgXcpdXXXXXXXX.mp4', 'https://t.alipayobjects.com/images/rmsweb/T1lcRgXb4gXXXXXXXX.mp4', 'https://t.alipayobjects.com/images/T1qWNhXkpeXXXXXXXX.mp4'], + video: [ + 'https://os.alipayobjects.com/rmsportal/EejaUGsyExkXyXr.mp4', 'https://os.alipayobjects.com/rmsportal/GIutPgZMTyfFfrH.mp4', + 'https://os.alipayobjects.com/rmsportal/ERKhqHlcHiCDSQu.mp4', 'https://os.alipayobjects.com/rmsportal/FqkQMyFqNqielOw.mp4', + 'https://os.alipayobjects.com/rmsportal/pnNkNIMoowmGUQy.mp4', 'https://os.alipayobjects.com/rmsportal/XrUIWmsmOlEnZGc.mp4', + 'https://os.alipayobjects.com/rmsportal/gSNilqbiXOufDXF.mp4', + ], init: function() { var self = this; self.videoBox = $(".video-player"); @@ -849,11 +853,7 @@ $(function() { var svg = new SVG(); self.videoBox.eq(i).append(svg.node); var video = self.videoBox.eq(i).find("video"); - if (video[0].canPlayType('video/webm; codecs="vp8.0, vorbis"')) { - $('').appendTo(video); - } else { - $('').appendTo(video); - } + $('').appendTo(video); video.css({ "width": "100%" }); From fb59c4d00b654d88dee613408566a6d88d3ee7d4 Mon Sep 17 00:00:00 2001 From: hi-caicai Date: Fri, 11 Mar 2016 10:33:03 +0800 Subject: [PATCH 37/86] update docs --- docs/spec/direct.md | 10 +++++----- docs/spec/invitation.md | 18 +++++++++--------- docs/spec/lightweight.md | 16 ++++++++-------- docs/spec/reaction.md | 20 ++++++++++---------- docs/spec/stay.md | 20 ++++++++++---------- 5 files changed, 42 insertions(+), 42 deletions(-) diff --git a/docs/spec/direct.md b/docs/spec/direct.md index 9cda9fd51e..ebf4ee2925 100644 --- a/docs/spec/direct.md +++ b/docs/spec/direct.md @@ -16,7 +16,7 @@ 单击编辑示例 +状态三：鼠标点击后，出现『输入框』、『确定』、『取消』表单元素，同时光标定位在『输入框』中。" src="https://os.alipayobjects.com/rmsportal/PmVuUUKeamHdveT.png"> 单字段行内编辑 @@ -25,13 +25,13 @@
文字链/图标编辑示例 +状态二：鼠标点击『编辑』后，出现『输入框』、『确定』、『取消』表单元素，同时光标定位在『输入框』中。" src="https://os.alipayobjects.com/rmsportal/ZmRlahliUbCurhu.png"> 当『易读性』为主，同时又要突出操作行的『易编辑性』时，可使用『文字链/图标编辑』。
-多字段行内编辑示例 +多字段行内编辑示例 多字段行内编辑 @@ -49,7 +49,7 @@ 拖放列表示例 +状态三：拖动到可放置区块，出现蓝色描边，告知用户该区块可放置该对象。" src="https://os.alipayobjects.com/rmsportal/ZQxzyqMpeJwalbe.png"> 拖放列表 @@ -57,7 +57,7 @@
-拖放图片/文件示例 +拖放图片/文件示例 拖放图片/文件 diff --git a/docs/spec/invitation.md b/docs/spec/invitation.md index ffbe6b820c..7a7b79d095 100644 --- a/docs/spec/invitation.md +++ b/docs/spec/invitation.md @@ -26,20 +26,20 @@
-文本邀请示例 +文本邀请示例 -白板式邀请示例 +白板式邀请示例 -未完成邀请示例 +未完成邀请示例 引导操作邀请：一般以静态说明形式出现在页面上，不过它们在视觉上也可以表现出多种不同样式。 常见类型：『文本邀请』、『白板式邀请』、『未完成邀请』。
-漫游探索邀请示例 1 +漫游探索邀请示例 1 -漫游探索邀请示例 2 +漫游探索邀请示例 2 漫游探索邀请：是向用户介绍新功能的好方法，尤其是对于那些设计优良的界面。但是它不是『创口贴』，仅通过它不能解决界面交互的真正问题。 @@ -56,23 +56,23 @@
-悬停邀请示例 1 +悬停邀请示例 1 -悬停邀请示例 2 +悬停邀请示例 2 悬停邀请：在鼠标悬停期间提供邀请。
-推论邀请示例 +推论邀请示例 推论邀请：用于交互期间，合理推断用户可能产生的需求。
更多内容邀请示例 +" src="https://os.alipayobjects.com/rmsportal/sOqYOydwQjLHqph.png"> 更多内容邀请：用于邀请用户查看更多内容。 diff --git a/docs/spec/lightweight.md b/docs/spec/lightweight.md index c351ecb576..046d2fd302 100644 --- a/docs/spec/lightweight.md +++ b/docs/spec/lightweight.md @@ -19,7 +19,7 @@ 实时可见工具示例--摘自知乎 +状态三：鼠标点击后，和未点击前有明显的区分。" src="https://os.alipayobjects.com/rmsportal/sfytaOSssRrdYFg.png"> 如果某个操作非常重要，就应该把它放在界面中，并实时可见。 @@ -30,7 +30,7 @@ ## 悬停即现工具 -悬停即现工具示例 +悬停即现工具示例 如果某个操作不那么重要，或者使用『实时可见工具』过于啰嗦会影响用户阅读时，可以在悬停在该对象上时展示操作项。 @@ -41,7 +41,7 @@ ## 开关显示工具 -开关显示工具示例 +开关显示工具示例 如果某些操作只需要在特定模式时显示，可以通过开关来实现。 @@ -52,11 +52,11 @@ ## 交互中的工具 -推荐示例 +推荐示例 -推荐示例 +推荐示例 -不推荐示例 +不推荐示例 如果操作不重要或者可以通过其他途径完成时，可以将工具放置在用户的操作流程中，减少界面元素，降低认知负担，给用户小惊喜。 @@ -69,13 +69,13 @@ ## 可视区域 ≠ 可点击区域 -文字链热区示例 +文字链热区示例 在使用 Table 时，文字链的点击范围受到文字长短影响，可以设置整个单元格为热区，以便用户触发。
-按钮热区示例 +按钮热区示例 当需要增强按钮的响应性时，可以通过增加用户点击热区的范围，而不是增大按钮形状，从而增强响应性，又不缺失美感。 diff --git a/docs/spec/reaction.md b/docs/spec/reaction.md index 386d9e58d8..ffc83cf8da 100644 --- a/docs/spec/reaction.md +++ b/docs/spec/reaction.md @@ -22,16 +22,16 @@ 自动完成：用户输入时，下拉列表会随着输入的关键词显示匹配项。 -确定类目示例 +确定类目示例 -不确定类目示例 +不确定类目示例 根据查询结果分类的多少，可以分为『确定类目』、『不确定类目』两种类型。
实时搜索示例 +" src="https://os.alipayobjects.com/rmsportal/OyJCVmOigyXKWCf.png"> 实时搜索：随着用户输入，实时显示搜索结果。『自动完成』、『实时建议』的近亲。 @@ -45,7 +45,7 @@ ## 反馈模式 实时预览示例 +" src="https://os.alipayobjects.com/rmsportal/jecYhRgfbHleGDJ.png"> 实时预览：在用户提交输入之前，让他先行了解系统将如何处理他的输入。 @@ -57,13 +57,13 @@
-按钮加载示例 +按钮加载示例 -表格加载示例 +表格加载示例 -富列表加载示例 +富列表加载示例 -页面加载示例 +页面加载示例 进度指示：当一个操作需要一定时间完成时，就需要即时告知进度，保持与用户的沟通。 @@ -71,12 +71,12 @@
-点击刷新示例 +点击刷新示例 点击刷新：告知用户有新内容，并提供按钮等工具帮助用户查看新内容。
-定时示例 +定时示例 定时刷新：无需用户介入，定时展示新内容。 diff --git a/docs/spec/stay.md b/docs/spec/stay.md index 29f5121892..2d15e18053 100644 --- a/docs/spec/stay.md +++ b/docs/spec/stay.md @@ -18,17 +18,17 @@ ## 覆盖层 -推荐示例 +推荐示例 -推荐示例 +推荐示例 -不推荐示例 +不推荐示例 二次确认覆盖层：避免滥用 Modal 进行二次确认，应该勇敢的让用户去尝试，给用户机会『撤消』即可。
-详情覆盖层示例 +详情覆盖层示例 详情覆盖层：一般在列表中，通过用户『悬停』/『点击』某个区块，在当前页加载该条列表项的更多详情信息。 @@ -36,7 +36,7 @@
-输入覆盖层示例 +输入覆盖层示例 输入覆盖层：在覆盖层上，让用户直接进行少量字段的输入。 @@ -46,7 +46,7 @@ ## 嵌入层 -列表嵌入层示例 +列表嵌入层示例 列表嵌入层：在列表中，显示某条列表项的详情信息，保持上下文不中断。 @@ -57,7 +57,7 @@
-标签页示例 +标签页示例 标签页：将多个平级的信息进行整理和分类了，一次只显示一组信息。 @@ -87,18 +87,18 @@
-渐进式展现示例 +渐进式展现示例 渐进式展现：基于用户的操作/某种特定规则，渐进式展现不同的操作选项。
-配置程序示例 +配置程序示例 配置程序：通过提供一系列的配置项，帮助用户完成任务或者产品组装。
-弹出框覆盖层示例 +弹出框覆盖层示例 弹出框覆盖层：虽然弹出框的出现会打断用户的心流，但是有时候在弹出框中使用『步骤条』来管理复杂流程也是可行的。 \ No newline at end of file From 827ac4b7e833b628c5b5d04069dfa94b33b36930 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 11 Mar 2016 12:00:21 +0800 Subject: [PATCH 38/86] Fix button style --- style/components/button.less | 13 ++++++------- style/mixins/button.less | 4 ++-- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/style/components/button.less b/style/components/button.less index d2d880d4f5..c61ed099a6 100644 --- a/style/components/button.less +++ b/style/components/button.less @@ -106,9 +106,8 @@ bottom: 0; right: 0; border-radius: inherit; - z-index: -1; border: 0 solid @primary-color; - opacity: 0.44; + opacity: 0.4; animation: buttonEffect 0.36s ease forwards; } } @@ -116,10 +115,10 @@ @keyframes buttonEffect { to { opacity: 0; - top: -6px; - left: -6px; - bottom: -6px; - right: -6px; - border-width: 6px; + top: -5px; + left: -5px; + bottom: -5px; + right: -5px; + border-width: 5px; } } diff --git a/style/mixins/button.less b/style/mixins/button.less index d1987ed60b..e3456baba6 100644 --- a/style/mixins/button.less +++ b/style/mixins/button.less @@ -200,10 +200,10 @@ position: absolute; top: 0; left: 0; + right: 0; + bottom: 0; display: inline-block; .opacity(0); - width: 100%; - height: 100%; border-radius: 50% 50%; content: " "; .scale(0, 0); From 26c4e070402b0a2475a00853c4420a5c053aada5 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 11 Mar 2016 15:21:32 +0800 Subject: [PATCH 39/86] improve video in markdown --- docs/spec/transition.md | 97 ++++++++--------------------------------- scripts/demo.js | 16 ++++++- site/static/motion.js | 24 +++------- site/static/style.less | 10 +++++ 4 files changed, 47 insertions(+), 100 deletions(-) diff --git a/docs/spec/transition.md b/docs/spec/transition.md index 62e3a01667..f002a59f22 100644 --- a/docs/spec/transition.md +++ b/docs/spec/transition.md @@ -8,62 +8,32 @@ 人脑灰质（Gray Matter）会对动态的事物（eg：移动、形变、色变等）保持敏感。在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增强用户和界面的沟通。 -- Adding:  新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。 +- Adding: 新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。 -- Receding:  与当前页无关的信息元素应采用适当方式移除。 +- Receding: 与当前页无关的信息元素应采用适当方式移除。 - Normal: 指那些从转场开始到结束都没有发生变化的信息元素。 -````css -video{ - display: block; -} -```` - -
- --- ## 在视图变化时保持上下文 -
- -
-
-
-
-
- -
+滑入与滑出示例 滑入与滑出：可以有效构建虚拟空间。
-
- -
-
-
传送带示例
-
-
- -
+传送带示例 + 传送带：可极大地扩展虚拟空间。
-
- -
-
-
折叠窗口示例
-
-
- -
+折叠窗口示例 + 折叠窗口：在视图切换时，有助于保持上下文，同时也能拓展虚拟空间。 @@ -79,59 +49,30 @@ video{ --- ## 解释刚刚发生了什么 -
- -
-
-
对象增加示例
-
新增一条对象时，该行『高亮』告知用户这是新增项；几秒后『高亮』消失，以免过度干扰用户。
-
- -
+ + +对象增加示例 + + 对象增加：在列表/表格中，新增了一个对象。
-
- -
-
-
对象删除示例
-
-
- -
+ +对象删除示例 对象删除：在列表/表格中，删除了一个对象。
-
- -
-
-
对象更改示例
-
状态一：用户更改了『详情』中的值；
- 状态二：用户点击『保存』后，详情所在的网格出现『黄底』，表明该对象发生了更改；
状态三：底色持续『 1 秒』后消失，回复正常。
-
- -
+ +对象更改示例 对象更改：在列表/表格中，更改了一个对象。
-
- -
-
-
弹出框唤起
-
从页面的某个按钮唤起弹出框时, 弹框从按钮处唤起, 可提示用户弹框与按钮的关第;
-
- -
- -弹出框唤起：从页面的某个按钮唤起弹出框时, 弹框从按钮处唤起, 可提示用户弹框与按钮的关第;。 - +弹出框唤起示例 +弹出框唤起：从页面的某个按钮唤起弹出框时, 弹框从按钮处唤起, 可提示用户弹框与按钮的关联。 --- @@ -145,8 +86,6 @@ video{ 页面过渡示例 - 常见过渡效果：『按钮过渡』、『页面过渡』。 - diff --git a/scripts/demo.js b/scripts/demo.js index 891691956b..e29b6bee0e 100644 --- a/scripts/demo.js +++ b/scripts/demo.js @@ -193,10 +193,20 @@ const PriviewImg = React.createClass({ const createMarkup = () => { return {__html: this.props.description} }; + + let node = Sample Picture; + if (this.props.type === 'video') { + node = ( + + ); + } + return (
- Sample Picture + {node}
{this.props.alt}
@@ -245,7 +255,9 @@ InstantClickChangeFns.push(function () { priviewImgNodes.each(function (i, img) { priviewImgs.push( ); }); diff --git a/site/static/motion.js b/site/static/motion.js index 6f4576bae5..22c31bf8a0 100644 --- a/site/static/motion.js +++ b/site/static/motion.js @@ -846,23 +846,10 @@ $(function() { 'https://os.alipayobjects.com/rmsportal/gSNilqbiXOufDXF.mp4', ], init: function() { - var self = this; - self.videoBox = $(".video-player"); - $('').appendTo(self.videoBox); - for (var i = 0; i < self.videoBox.length; i++) { + $(".preview-image-box video").each(function(i, video) { var svg = new SVG(); - self.videoBox.eq(i).append(svg.node); - var video = self.videoBox.eq(i).find("video"); - $('').appendTo(video); - video.css({ - "width": "100%" - }); - video.append(svg); - svg.css({ - "position": "absolute", - "top": 0, - "left": 0 - }); + video = $(video); + video.parent().append(svg.node); var playBox = _playBox(svg); svg.addChild(playBox); playBox.addEventListener("click", function(e) { @@ -877,11 +864,10 @@ $(function() { this.setTimeout = setTimeout(function() { video[0].play(); }, 500); - m.attr("play", "true") } - }) - } + }); + }); } }; window.Motion.motionVideo = motionVideo; diff --git a/site/static/style.less b/site/static/style.less index fc0b880214..367f8c0d7d 100644 --- a/site/static/style.less +++ b/site/static/style.less @@ -1202,6 +1202,16 @@ a.entry-link:hover .anticon-smile { position: relative; } +.preview-image-wrapper video { + display: block; + width: 100%; + + svg { + position: absolute; + top: 0; + left: 0; + } +} + .preview-image-wrapper.good:after { content: ''; width: 100%; From f7d172b7f442ae2804803758ce0a64f7aa1194f4 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 11 Mar 2016 15:29:00 +0800 Subject: [PATCH 40/86] update style --- site/static/style.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/static/style.less b/site/static/style.less index 367f8c0d7d..9f17e917bc 100644 --- a/site/static/style.less +++ b/site/static/style.less @@ -1179,12 +1179,12 @@ a.entry-link:hover .anticon-smile { .preview-image-boxes { float: right; - margin: 0 0 110px 60px; + margin: 0 0 70px 60px; width: 616px; } .preview-image-boxes + .preview-image-boxes { - margin-top: -75px; + margin-top: -35px; } .preview-image-box { From 0752e94dd9f9a6fa5404a942c84d43c1095c90b7 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 11 Mar 2016 15:43:51 +0800 Subject: [PATCH 41/86] typo --- docs/spec/introduce.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/introduce.md b/docs/spec/introduce.md index ce89f48cc4..7a9573518b 100644 --- a/docs/spec/introduce.md +++ b/docs/spec/introduce.md @@ -11,7 +11,7 @@ 在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，给设计师和工程师带来很多困扰和重复建设，大大降低了产品的研发效率。我们（蚂蚁金服体验技术部）经过大量的项目实践和总结，沉淀出一个中台设计语言 Ant Design。旨在统一中台项目的前端 UI 设计，屏蔽不必要的设计差异和实现成本，解放设计和前端的研发资源。 -Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言，模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界，将进行 UE 设计和 UI 设计人员统称为『设计者』，利用统一的规范进行设计赋能，全面提高中台产品体验和研发效率。 +Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言。它模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界，将进行 UE 设计和 UI 设计人员统称为『设计者』，利用统一的规范进行设计赋能，全面提高中台产品体验和研发效率。 ## 谁在使用 From 7b40c91e8702ffecb631189597dc9858febbd3c3 Mon Sep 17 00:00:00 2001 From: hi-caicai Date: Fri, 11 Mar 2016 15:45:45 +0800 Subject: [PATCH 42/86] update docs --- docs/spec/direct.md | 2 +- docs/spec/reaction.md | 2 +- docs/spec/stay.md | 2 +- docs/spec/transition.md | 7 +------ 4 files changed, 4 insertions(+), 9 deletions(-) diff --git a/docs/spec/direct.md b/docs/spec/direct.md index ebf4ee2925..a486a5119c 100644 --- a/docs/spec/direct.md +++ b/docs/spec/direct.md @@ -39,7 +39,7 @@
-更多有关『页内编辑』的模式，可查看[『模式』-『表格』-『交互』](../pattern/table#交互)中的内容。 +更多有关『页内编辑』的模式，可查看[『模式』-『表格』-『交互』](../pattern/table#模块编辑)中的内容。
diff --git a/docs/spec/reaction.md b/docs/spec/reaction.md index ffc83cf8da..76a91a73dd 100644 --- a/docs/spec/reaction.md +++ b/docs/spec/reaction.md @@ -20,12 +20,12 @@ ## 查询模式 -自动完成：用户输入时，下拉列表会随着输入的关键词显示匹配项。 确定类目示例 不确定类目示例 +自动完成：用户输入时，下拉列表会随着输入的关键词显示匹配项。 根据查询结果分类的多少，可以分为『确定类目』、『不确定类目』两种类型。
diff --git a/docs/spec/stay.md b/docs/spec/stay.md index 2d15e18053..1fd1e7053e 100644 --- a/docs/spec/stay.md +++ b/docs/spec/stay.md @@ -53,7 +53,7 @@
-详情嵌入层(敬请期待) +详情嵌入层 (敬请期待)
diff --git a/docs/spec/transition.md b/docs/spec/transition.md index f002a59f22..8db7647be8 100644 --- a/docs/spec/transition.md +++ b/docs/spec/transition.md @@ -39,10 +39,7 @@
-视图定位示例 - - -视图定位：在视图切换时，保持定位。 +视图定位 (敬请期待)
@@ -82,9 +79,7 @@
-按钮过渡示例 -页面过渡示例 常见过渡效果：『按钮过渡』、『页面过渡』。 From 014b66cc37feade13673b224c5b2b09a66836d42 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 11 Mar 2016 16:00:51 +0800 Subject: [PATCH 43/86] fix docs --- docs/spec/alignment.md | 6 ++++++ docs/spec/contrast.md | 10 +++++++++- docs/spec/feature.md | 8 ++++---- docs/spec/principle.md | 2 +- docs/spec/proximity.md | 10 ++++++++-- docs/spec/repetition.md | 6 +++++- docs/spec/transition.md | 5 ++--- 7 files changed, 35 insertions(+), 12 deletions(-) diff --git a/docs/spec/alignment.md b/docs/spec/alignment.md index d9f837d853..5cc10cd823 100644 --- a/docs/spec/alignment.md +++ b/docs/spec/alignment.md @@ -10,6 +10,8 @@ > 格式塔学派（德语：Gestalttheorie）：是心理学重要流派之一，兴起于 20 世纪初的德国，又称为完形心理学；主张人脑的运作原理是整体的，『整体不同于其部件的总和』。——摘自『维基百科』 +--- + ## 文案类对齐 推荐示例 @@ -17,6 +19,8 @@ 如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点。 +--- + ## 表单类对齐 冒号对齐示例 @@ -25,6 +29,8 @@ 更多对齐方式，请查看[『模式』-『表单』-『规格』-『对齐方式』](../pattern/form#对齐方式)。 +--- + ## 数字类对齐 正确示例 diff --git a/docs/spec/contrast.md b/docs/spec/contrast.md index 093403dddf..daa60f292f 100644 --- a/docs/spec/contrast.md +++ b/docs/spec/contrast.md @@ -10,6 +10,10 @@ > 注：要实现有效的对比，对比就必须强烈，切不可畏畏缩缩。 +
+ +--- + ## 主次关系对比 正确示例 @@ -25,6 +29,8 @@ 在一些需要用户慎重决策的场景中，系统应该保持中立，不能替用户或者诱导用户做出判断。 +--- + ## 总分关系对比 总分关系示例 1 @@ -33,7 +39,9 @@ 通过调整排版、字体、大小等方式来突出层次感，区分总分关系，使得页面更具张力和节奏感。 -### 状态关系对比 +--- + +## 状态关系对比 静态对比示例 diff --git a/docs/spec/feature.md b/docs/spec/feature.md index 7340428238..ca77caea91 100644 --- a/docs/spec/feature.md +++ b/docs/spec/feature.md @@ -40,9 +40,9 @@ ### 微创新 -数值输入框示例 +数值输入框示例 -分页示例 +分页示例 字数校验框示例 @@ -82,7 +82,7 @@ ### 用户的幸福 -用户的幸福示例 +用户的幸福示例 漂亮的组件、精致的排版、流畅的动画等的元素，使用户在『本能层次』中产生积极反应； @@ -92,7 +92,7 @@ ### 设计者的幸福 -设计者的幸福示例 +设计者的幸福示例 从『无』到『有』时，提供一整套设计解决方案，帮助『设计者』将商业想法快速形成产品并推向市场，快速、低成本试错。 diff --git a/docs/spec/principle.md b/docs/spec/principle.md index 38c6da53ba..e9739b8f2a 100644 --- a/docs/spec/principle.md +++ b/docs/spec/principle.md @@ -31,7 +31,7 @@
-#### 中台十大设计原则 +### 中台十大设计原则 - [亲密性 Proximity](./proximity) - [对齐 Alignment](./alignment) diff --git a/docs/spec/proximity.md b/docs/spec/proximity.md index 2b83be2cd4..54bf574757 100644 --- a/docs/spec/proximity.md +++ b/docs/spec/proximity.md @@ -8,6 +8,10 @@ 如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现**组织性**，让用户对页面结构和信息层次一目了然。 +
+ +--- + ## 纵向间距关系 纵向间距示例 @@ -22,14 +26,16 @@ > 注：在 Ant Design 中，`y=8+8*n`。其中，`n>=0`，y 是纵向间距，8 是『基础间距』。 +--- + ## 横向间距关系 -组合排布示例 +组合排布示例 为了适用不同尺寸的屏幕，在横向采用栅格布局来排布组件，从而保证布局的灵活性。
-复选框内示例 +复选框内示例 在一个组件内部，元素的横向间距也应该有所不同。 diff --git a/docs/spec/repetition.md b/docs/spec/repetition.md index 67fbbbf138..34b50bf5e7 100644 --- a/docs/spec/repetition.md +++ b/docs/spec/repetition.md @@ -8,11 +8,15 @@ 相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成本，也可以帮助用户识别出这些元素之间的关联性。 +
+ +--- + ## 重复元素 线框重复示例 -设计要素重复示例 +设计要素重复示例 文案格式重复示例 diff --git a/docs/spec/transition.md b/docs/spec/transition.md index f002a59f22..c114d0f584 100644 --- a/docs/spec/transition.md +++ b/docs/spec/transition.md @@ -9,13 +9,12 @@ 人脑灰质（Gray Matter）会对动态的事物（eg：移动、形变、色变等）保持敏感。在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增强用户和界面的沟通。 - Adding: 新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。 - - Receding: 与当前页无关的信息元素应采用适当方式移除。 - - Normal: 指那些从转场开始到结束都没有发生变化的信息元素。 ---- +
+--- ## 在视图变化时保持上下文 From 59fb1af79ac224061b1567c2ffacd9ef2150abaf Mon Sep 17 00:00:00 2001 From: hi-caicai Date: Fri, 11 Mar 2016 16:11:46 +0800 Subject: [PATCH 44/86] update docs --- docs/spec/invitation.md | 4 ++-- docs/spec/stay.md | 2 +- docs/spec/transition.md | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/spec/invitation.md b/docs/spec/invitation.md index 7a7b79d095..5f8da6b406 100644 --- a/docs/spec/invitation.md +++ b/docs/spec/invitation.md @@ -79,9 +79,9 @@
-预期功能邀请 (敬请期待) +预期功能邀请（敬请期待）
-拖放邀请 (敬请期待) +拖放邀请（敬请期待） diff --git a/docs/spec/stay.md b/docs/spec/stay.md index 1fd1e7053e..92a37a774e 100644 --- a/docs/spec/stay.md +++ b/docs/spec/stay.md @@ -53,7 +53,7 @@
-详情嵌入层 (敬请期待) +详情嵌入层（敬请期待）
diff --git a/docs/spec/transition.md b/docs/spec/transition.md index dec209107b..1f4008b03c 100644 --- a/docs/spec/transition.md +++ b/docs/spec/transition.md @@ -38,7 +38,7 @@
-视图定位 (敬请期待) +视图定位（敬请期待）
@@ -60,7 +60,7 @@
-对象更改示例 +对象更改示例 对象更改：在列表/表格中，更改了一个对象。 From d24e4dea4406d9c2c9f21feacd9949389c5ce518 Mon Sep 17 00:00:00 2001 From: yiminghe Date: Fri, 11 Mar 2016 16:21:32 +0800 Subject: [PATCH 45/86] fix chrome render bug --- style/components/menu.less | 9 +++++++++ style/components/tabs.less | 11 +++++++++++ 2 files changed, 20 insertions(+) diff --git a/style/components/menu.less b/style/components/menu.less index 418926628b..bbe41c6807 100644 --- a/style/components/menu.less +++ b/style/components/menu.less @@ -45,6 +45,7 @@ &-item-active, &-submenu-title:hover { + transform: translateZ(0); background-color: tint(@primary-color, 90%); } @@ -56,10 +57,13 @@ &-horizontal > &-item-active, &-horizontal > &-submenu &-submenu-title:hover { background-color: transparent; + transform: translateZ(0); } &-item-selected { color: @primary-color; + // fix chrome render bug + transform: translateZ(0); } &-inline, @@ -78,6 +82,7 @@ .@{menu-prefix-cls}-selected, .@{menu-prefix-cls}-item-selected { border-right: 2px solid @primary-color; + transform: translateZ(0); } } @@ -192,6 +197,7 @@ &-selected { border-bottom: 2px solid @primary-color; color: @primary-color; + transform: translateZ(0); } > a { @@ -295,6 +301,7 @@ &-dark&-horizontal > &-submenu:hover, &-dark&-horizontal > &-submenu &-submenu-title:hover { color: #fff; + transform: translateZ(0); } &-dark &-item > a { @@ -320,11 +327,13 @@ border-right: 0; background-color: @primary-color; color: #fff; + transform: translateZ(0); } &-dark &-item-active, &-dark &-submenu-title:hover { background-color: transparent; color: @primary-color; + transform: translateZ(0); } } diff --git a/style/components/tabs.less b/style/components/tabs.less index 74ef84c66d..b4284b2833 100644 --- a/style/components/tabs.less +++ b/style/components/tabs.less @@ -23,10 +23,12 @@ &-transition-forward { transition: right 0.3s @ease-in-out, left 0.3s @ease-in-out 0.3s * 0.3; + transform: translateZ(0); } &-transition-backward { transition: right 0.3s @ease-in-out 0.3s * 0.3, left 0.3s @ease-in-out; + transform: translateZ(0); } } @@ -176,6 +178,7 @@ &:active { color: shade(@primary-color, 5%); + transform: translateZ(0); } .anticon { @@ -188,6 +191,7 @@ .@{tab-prefix-cls}-tab-active .@{tab-prefix-cls}-tab-inner { color: @primary-color; + transform: translateZ(0); } } @@ -220,6 +224,7 @@ &-slide-horizontal-backward-enter&-slide-horizontal-backward-enter-active { animation-name: antMoveLeftIn; + transform: translateZ(0); animation-play-state: running; } @@ -236,6 +241,7 @@ &-slide-horizontal-backward-leave&-slide-horizontal-backward-leave-active { animation-name: antMoveRightOut; + transform: translateZ(0); animation-play-state: running; } @@ -249,6 +255,7 @@ &-slide-horizontal-forward-enter&-slide-horizontal-forward-enter-active { animation-name: antMoveRightIn; animation-play-state: running; + transform: translateZ(0); } &-slide-horizontal-forward-leave { @@ -263,6 +270,7 @@ } &-slide-horizontal-forward-leave&-slide-horizontal-forward-leave-active { + transform: translateZ(0); animation-name: antMoveLeftOut; animation-play-state: running; } @@ -397,11 +405,13 @@ } &&-card &-tab-active { background: #fff; + transform: translateZ(0); border-color: @border-color-base; color: @primary-color; } &&-card &-tab-active &-tab-inner { padding-bottom: 7px; + transform: translateZ(0); } &&-card &-nav-wrap { margin-bottom: 0; @@ -430,6 +440,7 @@ &&-card &-tab-active .anticon-cross, &&-card &-tab:hover .anticon-cross { width: 16px; + transform: translateZ(0); } &-extra-content { From f0c4ecbc8f4d5dcfe5bbe1f28b519176c6c7279f Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 11 Mar 2016 16:22:38 +0800 Subject: [PATCH 46/86] fix: suppress submit event by default #1173 --- components/form/Form.jsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/components/form/Form.jsx b/components/form/Form.jsx index 4139a0e8e4..b01377f9a1 100644 --- a/components/form/Form.jsx +++ b/components/form/Form.jsx @@ -35,6 +35,9 @@ Form.propTypes = { Form.defaultProps = { prefixCls: 'ant-form', + onSubmit(e) { + e.preventDefault(); + }, }; Form.childContextTypes = { From 4da550782e66438906b08c60df21732eb323bc75 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 11 Mar 2016 16:57:35 +0800 Subject: [PATCH 47/86] bump 0.12.9 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6d769c3157..7e9b504846 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "0.12.8", + "version": "0.12.9", "title": "Ant Design", "description": "一个 UI 设计语言", "homepage": "http://ant.design/", From b9c97ca07f5531ae2f3a2a1da9693276dd20f328 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 11 Mar 2016 17:29:36 +0800 Subject: [PATCH 48/86] docs: update CHANGELOG.md --- CHANGELOG.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 080eddfe0e..cce75a8eaa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,26 @@ --- +## 0.12.9 + +`2016-03-11` + +- Transfer + - 可以定义 `notFoundContent `。 + - 修复 `searchPlaceholder` 使用了 `placeholder` 的值的问题。 +- 调整 Tabs 样式。 +- 修复 Table 中的 Pagination 默认配置问题。 +- 调整 Form.Item 的 `margin-bottom`。[#1141](https://github.com/ant-design/ant-design/issues/1141) +- 修复 DatePicker `style` 设置错误的问题。 +- 修正 Badge 样式问题。 +- 修复 Popconfirm 箭头位置问题。 +- 优化 Popconfirm、Button 样式。 +- Dropdown hover 后增加延时效果。 +- 修复 Dialog 样式问题。 +- 修复 Upload 上传状态问题。 +- 优化 Menu、Tabs 在 Chorme 下的渲染性能。 +- Form 默认 supress submit 事件。 + ## 0.12.8 `2016-03-06` From b5ace6ec1d8f01df9da12db47762c306b6cae8d1 Mon Sep 17 00:00:00 2001 From: hi-caicai Date: Fri, 11 Mar 2016 17:37:27 +0800 Subject: [PATCH 49/86] update --- docs/spec/transition.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/spec/transition.md b/docs/spec/transition.md index 1f4008b03c..ce0f0d5ad4 100644 --- a/docs/spec/transition.md +++ b/docs/spec/transition.md @@ -66,9 +66,9 @@
-弹出框唤起示例 +对象呼出示例 -弹出框唤起：从页面的某个按钮唤起弹出框时, 弹框从按钮处唤起, 可提示用户弹框与按钮的关联。 +对象呼出：点击页面中元素，呼出一个新对象 --- From 833eebccb737b948d885763aafeacc631750698f Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 11 Mar 2016 17:48:46 +0800 Subject: [PATCH 50/86] update docs --- CHANGELOG.md | 18 +++++++++--------- docs/react/upgrade-notes.md | 4 +++- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index cce75a8eaa..d0135ca1c4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,21 +8,21 @@ `2016-03-11` -- Transfer +- Transfer - 可以定义 `notFoundContent `。 - 修复 `searchPlaceholder` 使用了 `placeholder` 的值的问题。 +- 修复 Popconfirm、Popover、Tooltip 的箭头位置未指向元素的问题。 +- 修正 Badge 在搜狗等旧版 webkit 浏览器下无法使用的问题。 - 调整 Tabs 样式。 - 修复 Table 中的 Pagination 默认配置问题。 -- 调整 Form.Item 的 `margin-bottom`。[#1141](https://github.com/ant-design/ant-design/issues/1141) -- 修复 DatePicker `style` 设置错误的问题。 -- 修正 Badge 样式问题。 -- 修复 Popconfirm 箭头位置问题。 +- 调整 Form.Item 在 inline 模式下的 `margin-bottom`。[#1141](https://github.com/ant-design/ant-design/issues/1141) +- 修复 DatePicker `style` 设置错误的问题。 - 优化 Popconfirm、Button 样式。 -- Dropdown hover 后增加延时效果。 +- Dropdown 增加默认的 mouseEnterDelay 延迟以优化体验。 - 修复 Dialog 样式问题。 -- 修复 Upload 上传状态问题。 -- 优化 Menu、Tabs 在 Chorme 下的渲染性能。 -- Form 默认 supress submit 事件。 +- 修复 Upload 上传中的状态问题。[#1159](https://github.com/ant-design/ant-design/issues/1159) +- 优化 Menu、Tabs 在 Chorme 下的渲染问题。 +- Form 默认阻止 submit 事件。 ## 0.12.8 diff --git a/docs/react/upgrade-notes.md b/docs/react/upgrade-notes.md index 71acaf02f8..52ba919de1 100644 --- a/docs/react/upgrade-notes.md +++ b/docs/react/upgrade-notes.md @@ -5,13 +5,15 @@ --- +这里只列出升级中的不兼容改动，其他改动见 [Changelog](/changelog)。 + ## 0.11 => 0.12 --- ### 使用 Form 提供的校验功能代替 Validation -Validation 已经被废弃，并会在以后的版本完全移除，所以建议尽快使用 Form 自带的校验功能替换 Validation。具体使用方式可以查阅文档和例子([#1](http://ant.design/components/form/#demo-validate-basic) [#2](http://ant.design/components/form/#demo-validate-other) [#3](http://ant.design/components/form/#demo-validate-customized))。 +Validation 已经被废弃，并会在以后的版本完全移除，所以建议尽快使用 Form 自带的校验功能替换 Validation。具体使用方式可以查阅文档和例子（[#1](http://ant.design/components/form/#demo-validate-basic) [#2](http://ant.design/components/form/#demo-validate-other) [#3](http://ant.design/components/form/#demo-validate-customized)）。 ### Progress `format` 属性的值改为函数 From 963dcc6b237f0c160b88f04a3013fc34038eee15 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 11 Mar 2016 17:58:40 +0800 Subject: [PATCH 51/86] bump 0.12.10 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7e9b504846..d86b921949 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "0.12.9", + "version": "0.12.10", "title": "Ant Design", "description": "一个 UI 设计语言", "homepage": "http://ant.design/", From 9194108c3602a0debbbfd4b7a857167e4c0e5131 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 12 Mar 2016 00:04:44 +0800 Subject: [PATCH 52/86] update Changelog --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index d0135ca1c4..64cf13f246 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,10 @@ --- +## 0.12.10 + +- 修复 0.12.9 版本 npm 包打包错误的问题。 + ## 0.12.9 `2016-03-11` From e91b009e93cedcc5ba7dda56a5fa03d264a07d05 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 12 Mar 2016 00:13:05 +0800 Subject: [PATCH 53/86] update button style --- style/components/button.less | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/style/components/button.less b/style/components/button.less index c61ed099a6..db2626fda5 100644 --- a/style/components/button.less +++ b/style/components/button.less @@ -101,14 +101,14 @@ &-clicked:before { content: ''; position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; + top: -1px; + left: -1px; + bottom: -1px; + right: -1px; border-radius: inherit; border: 0 solid @primary-color; opacity: 0.4; - animation: buttonEffect 0.36s ease forwards; + animation: buttonEffect 0.32s ease forwards; } } From acec3e68f1c6f405bd7f2896440322deaeda84a0 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 12 Mar 2016 14:53:57 +0800 Subject: [PATCH 54/86] update design docs --- docs/spec/feature.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/spec/feature.md b/docs/spec/feature.md index ca77caea91..cb85401b35 100644 --- a/docs/spec/feature.md +++ b/docs/spec/feature.md @@ -5,7 +5,7 @@ --- -使 Ant Design 与众不同的一点是，这是一个同时追求『用户』和『设计者』体验的规范，也让三大特性都以人为本。 +与众不同的是，Ant Design 不但追求『用户』的使用体验，还追求『设计者』的使用体验，真真正正贯彻和践行『以人为本』的设计理念。
@@ -16,7 +16,7 @@
确定
-
制定通俗而科学的规则、运用面向对象的方法、使用一致的文档沟通机制，给予研发团队一种高确定性、低熵值的研发状态。
+
制定通俗而科学的设计原则、运用面向对象的方法、使用一致的文档沟通机制，给予研发团队一种高确定性、低熵值的研发状态。
From fd1856dac3bf6d9f31d2a068f86d44189a2dd5ea Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 12 Mar 2016 15:05:29 +0800 Subject: [PATCH 55/86] update design docs --- docs/spec/layout/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/layout/index.md b/docs/spec/layout/index.md index bf41733f15..66290d43e5 100644 --- a/docs/spec/layout/index.md +++ b/docs/spec/layout/index.md @@ -1,7 +1,7 @@ # 常用布局 - template: component -- category: 基础 +- category: 设计基础 - order: 4 - cols: 1 From ed3cda06a28fdf1e2603df5023fae2fe4d5244ec Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 13 Mar 2016 13:19:43 +0800 Subject: [PATCH 56/86] update button docs --- components/button/demo/basic.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/button/demo/basic.md b/components/button/demo/basic.md index c4d69feb75..5f52387050 100644 --- a/components/button/demo/basic.md +++ b/components/button/demo/basic.md @@ -6,7 +6,7 @@ 通过设置 `type` 为 `primary` `ghost` 可分别创建主按钮、幽灵按钮，若不设置 `type` 值则为次按钮。不同的样式可以用来区别其重要程度。 -主按钮和次按钮可独立使用，需要强引导用主按钮。幽灵按钮用于和主按钮组合。 +主按钮和次按钮可独立使用，需要强引导用主按钮。幽灵按钮用于和主按钮组合。主按钮在同一个操作区域最多出现一次。 --- From d393f496ffd88a2ec332e21da98c600826a0c45d Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 13 Mar 2016 15:28:56 +0800 Subject: [PATCH 57/86] fix lesshint --- package.json | 2 +- style/components/dialog/Mask.less | 2 +- style/components/popover.less | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index d86b921949..73d5e20b74 100644 --- a/package.json +++ b/package.json @@ -102,7 +102,7 @@ "jsonp": "^0.2.0", "less": "~2.6.0", "less-loader": "^2.2.0", - "lesshint-antd": "^1.2.1", + "lesshint": "^1.2.1", "lodash": "^4.1.0", "nico-jsx": "~0.8.2", "postcss-loader": "^0.8.0", diff --git a/style/components/dialog/Mask.less b/style/components/dialog/Mask.less index 4c09579762..fb526fc85e 100644 --- a/style/components/dialog/Mask.less +++ b/style/components/dialog/Mask.less @@ -9,7 +9,7 @@ background-color: rgba(55, 55, 55, 0.6); height: 100%; z-index: 1000; - filter: alpha(opacity=50); + filter: ~"alpha(opacity=50)"; &-hidden { display: none; diff --git a/style/components/popover.less b/style/components/popover.less index 3bd06814b5..de6f6c12dc 100644 --- a/style/components/popover.less +++ b/style/components/popover.less @@ -43,7 +43,7 @@ &:after { content: ""; position: absolute; - background: rgba(255,255,255,0.01); + background: rgba(255, 255, 255, 0.01); } &-hidden { From 38baf0ef1961d566aeee4f5cf99d250839142a12 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 13 Mar 2016 16:49:05 +0800 Subject: [PATCH 58/86] Fix(Popconfirm): confirm and cancel not trigger onVisibleChange --- components/popconfirm/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/popconfirm/index.jsx b/components/popconfirm/index.jsx index ad1dbb5de1..197d9bb724 100644 --- a/components/popconfirm/index.jsx +++ b/components/popconfirm/index.jsx @@ -56,12 +56,12 @@ export default React.createClass({ }, onVisibleChange(visible) { this.setVisible(visible); - this.props.onVisibleChange(visible); }, setVisible(visible) { if (!('visible' in this.props)) { this.setState({ visible }); } + this.props.onVisibleChange(visible); }, render() { const { title, okText, cancelText, placement, overlayStyle, trigger, ...restProps } = this.props; From c4b9d39c3349289105a5bdcbc7969955b89b8aab Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 13 Mar 2016 20:19:26 +0800 Subject: [PATCH 59/86] update label required color --- style/themes/default/custom.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style/themes/default/custom.less b/style/themes/default/custom.less index c1443c7574..ef1509c8c3 100644 --- a/style/themes/default/custom.less +++ b/style/themes/default/custom.less @@ -117,7 +117,7 @@ @legend-color : #999; @legend-border-color : @border-color-base; // Label -@label-required-color : #f60; +@label-required-color : #f50; @label-color : @text-color; // Input @input-height-base: 28px; From 71abe49bf154bc2650259e0518d77b83490a341b Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 13 Mar 2016 20:38:32 +0800 Subject: [PATCH 60/86] fix menu z-index problem, close #1182 --- style/components/menu.less | 3 +++ 1 file changed, 3 insertions(+) diff --git a/style/components/menu.less b/style/components/menu.less index bbe41c6807..95c05cad64 100644 --- a/style/components/menu.less +++ b/style/components/menu.less @@ -92,6 +92,7 @@ position: absolute; min-width: 100%; margin-top: 7px; + z-index: 1070; } &-submenu-vertical > & { @@ -100,6 +101,7 @@ position: absolute; min-width: 160px; margin-left: 4px; + z-index: 1070; } &-item, @@ -192,6 +194,7 @@ top: 1px; float: left; border-bottom: 2px solid transparent; + z-index: 1; &-active, &-selected { From 8675b7abe1747a00288d6dd46b5239577e75c15c Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 13 Mar 2016 21:32:10 +0800 Subject: [PATCH 61/86] update style --- scripts/demo.js | 2 +- site/static/style.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/demo.js b/scripts/demo.js index 6f8a71a0f6..1e669512df 100644 --- a/scripts/demo.js +++ b/scripts/demo.js @@ -285,7 +285,7 @@ InstantClickChangeFns.push(function() { if (window.location.href.indexOf('#') > 0) { setTimeout(function() { window.location.href = window.location.href; - }, 0); + }, 30); } $('.component-demos .icon-all').off('click'); diff --git a/site/static/style.less b/site/static/style.less index 9f17e917bc..c1e9723a8c 100644 --- a/site/static/style.less +++ b/site/static/style.less @@ -625,6 +625,7 @@ footer ul li > a { border-left: 4px solid #e9e9e9; padding-left: 0.8em; margin: 1em 0; + font-style: italic; } .markdown blockquote p { @@ -1203,7 +1204,6 @@ a.entry-link:hover .anticon-smile { } .preview-image-wrapper video { - display: block; width: 100%; + svg { position: absolute; From 996eca7eb923a773faf1c37a346e72319c104b15 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 13 Mar 2016 21:32:10 +0800 Subject: [PATCH 62/86] update style --- docs/pattern/advanced-search.md | 2 +- docs/pattern/list.md | 2 +- docs/pattern/table.md | 2 +- docs/spec/direct.md | 9 ++++----- docs/spec/invitation.md | 7 +++---- docs/spec/stay.md | 6 +++--- docs/spec/transition.md | 2 +- scripts/demo.js | 2 +- site/static/style.less | 8 ++++++-- 9 files changed, 21 insertions(+), 19 deletions(-) diff --git a/docs/pattern/advanced-search.md b/docs/pattern/advanced-search.md index 03cfaa15bd..d4b0f1cbcb 100644 --- a/docs/pattern/advanced-search.md +++ b/docs/pattern/advanced-search.md @@ -53,4 +53,4 @@ 字段型一般会出现在主搜索框底部，适合搜索条件和值都比较少的场景中。 -## 案例（敬请期待） +## 案例（敬请期待） diff --git a/docs/pattern/list.md b/docs/pattern/list.md index 2abd1a1d6b..0d1a3a4734 100644 --- a/docs/pattern/list.md +++ b/docs/pattern/list.md @@ -98,4 +98,4 @@
-## 案例（敬请期待） +## 案例（敬请期待） diff --git a/docs/pattern/table.md b/docs/pattern/table.md index 67f56b6ac1..2aa3f4fde4 100644 --- a/docs/pattern/table.md +++ b/docs/pattern/table.md @@ -154,4 +154,4 @@ 数值右对齐（带小数则按小数点对齐），其余左对齐。 -## 案例（敬请期待） +## 案例（敬请期待） diff --git a/docs/spec/direct.md b/docs/spec/direct.md index a486a5119c..06e6afb3dd 100644 --- a/docs/spec/direct.md +++ b/docs/spec/direct.md @@ -63,13 +63,12 @@
-拖放对象（敬请期待） - -拖放多个对象（敬请期待） +拖放对象（敬请期待） + +拖放多个对象（敬请期待）
--- -## 直接选择（敬请期待） - +## 直接选择（敬请期待） diff --git a/docs/spec/invitation.md b/docs/spec/invitation.md index 7a7b79d095..646ce619eb 100644 --- a/docs/spec/invitation.md +++ b/docs/spec/invitation.md @@ -10,7 +10,7 @@ 很多富交互模式（eg：『拖放』、『行内编辑』、『上下文工具』）都有一个共同问题，就是缺少易发现性。所以『提供邀请』是成功完成人机交互的关键所在。 邀请就是引导用户进入下一个交互层次的提醒和暗示，通常包括意符（eg：实时的提示信息）和可供性，以表明在下一个界面可以做什么。当可供性中可感知的部分（Perceived Affordance）表现为意符时，人机交互的过程往往更加自然、顺畅。 - + > 意符（Signifiers）：一种额外的提示，告诉用户可以采取什么行为，以及应该怎么操作；必须是可感知（eg：视觉、听觉、触觉等）。——摘自《设计心理学 1 》 @@ -79,9 +79,8 @@
-预期功能邀请 (敬请期待) +预期功能邀请 (敬请期待)
-拖放邀请 (敬请期待) - +拖放邀请 (敬请期待) diff --git a/docs/spec/stay.md b/docs/spec/stay.md index 1fd1e7053e..c636385d2d 100644 --- a/docs/spec/stay.md +++ b/docs/spec/stay.md @@ -53,7 +53,7 @@
-详情嵌入层 (敬请期待) +详情嵌入层 (敬请期待)
@@ -75,7 +75,7 @@
-伸缩式用户界面（敬请期待） +伸缩式用户界面（敬请期待）
@@ -101,4 +101,4 @@ 弹出框覆盖层示例 -弹出框覆盖层：虽然弹出框的出现会打断用户的心流，但是有时候在弹出框中使用『步骤条』来管理复杂流程也是可行的。 \ No newline at end of file +弹出框覆盖层：虽然弹出框的出现会打断用户的心流，但是有时候在弹出框中使用『步骤条』来管理复杂流程也是可行的。 diff --git a/docs/spec/transition.md b/docs/spec/transition.md index dec209107b..c7a9c33c6d 100644 --- a/docs/spec/transition.md +++ b/docs/spec/transition.md @@ -38,7 +38,7 @@
-视图定位 (敬请期待) +视图定位 (敬请期待)
diff --git a/scripts/demo.js b/scripts/demo.js index 6f8a71a0f6..1e669512df 100644 --- a/scripts/demo.js +++ b/scripts/demo.js @@ -285,7 +285,7 @@ InstantClickChangeFns.push(function() { if (window.location.href.indexOf('#') > 0) { setTimeout(function() { window.location.href = window.location.href; - }, 0); + }, 30); } $('.component-demos .icon-all').off('click'); diff --git a/site/static/style.less b/site/static/style.less index 9f17e917bc..c291fe5fae 100644 --- a/site/static/style.less +++ b/site/static/style.less @@ -625,6 +625,7 @@ footer ul li > a { border-left: 4px solid #e9e9e9; padding-left: 0.8em; margin: 1em 0; + font-style: italic; } .markdown blockquote p { @@ -637,6 +638,10 @@ footer ul li > a { margin-left: 8px; } +.markdown .waiting { + color: #ccc; +} + .markdown h1:hover .anchor, .markdown h2:hover .anchor, .markdown h3:hover .anchor, @@ -1179,7 +1184,7 @@ a.entry-link:hover .anticon-smile { .preview-image-boxes { float: right; - margin: 0 0 70px 60px; + margin: 0 0 70px 20px; width: 616px; } @@ -1203,7 +1208,6 @@ a.entry-link:hover .anticon-smile { } .preview-image-wrapper video { - display: block; width: 100%; + svg { position: absolute; From 1929f7db97ea56f96a2bcf1ee081a95ec331fef3 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 14 Mar 2016 11:19:13 +0800 Subject: [PATCH 63/86] fix dataSource undefined --- components/table/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/table/index.jsx b/components/table/index.jsx index 72648e2f2d..2cb29b1ca1 100644 --- a/components/table/index.jsx +++ b/components/table/index.jsx @@ -531,7 +531,7 @@ let AntTable = React.createClass({ getLocalData(dataSource) { let state = this.state; - let data = dataSource || this.props.dataSource; + let data = dataSource || this.props.dataSource || []; // 排序 if (state.sortOrder && state.sorter) { data = data.slice(0); From b4060f40a9cdb4ee71adc7d20e3b86600dce378a Mon Sep 17 00:00:00 2001 From: hi-caicai Date: Mon, 14 Mar 2016 11:31:14 +0800 Subject: [PATCH 64/86] update reaction.md --- docs/spec/reaction.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/reaction.md b/docs/spec/reaction.md index 030c6ca10e..4275dac348 100644 --- a/docs/spec/reaction.md +++ b/docs/spec/reaction.md @@ -6,7 +6,7 @@ --- -『提供邀请』的强大体现在`交互之前`给出反馈，解决易发现性问题；『巧用过渡』的有用体现在它能够在**交互期间**为用户提供视觉反馈；『即时反应』的重要性体现在**交互之后**立即给出反馈。 +『提供邀请』的强大体现在`交互之前`给出反馈，解决易发现性问题；『巧用过渡』的有用体现在它能够在`交互期间`为用户提供视觉反馈；『即时反应』的重要性体现在`交互之后`立即给出反馈。 就像『牛顿第三定律』所描述作用力和反作用一样，用户进行了操作或者内部数据发生了变化，系统就应该立即有一个对应的反馈，同时输入量级越大、重要性越高，那么反馈量级越大、重要性越高。 From 80d6ae30a8ef77c36ad35a31b4c42dd274cd4ce8 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 14 Mar 2016 11:46:48 +0800 Subject: [PATCH 65/86] Add propTypes and prop align in Modal docs --- components/modal/Modal.jsx | 19 +++++++++++++++++-- components/modal/index.md | 3 ++- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/components/modal/Modal.jsx b/components/modal/Modal.jsx index 7bf8f2a311..7368e840ac 100644 --- a/components/modal/Modal.jsx +++ b/components/modal/Modal.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { PropTypes } from 'react'; import Dialog from 'rc-dialog'; import { Dom } from 'rc-util'; import Button from '../button'; @@ -8,7 +8,7 @@ function noop() {} let mousePosition; let mousePositionEventBinded; -let AntModal = React.createClass({ +const AntModal = React.createClass({ getDefaultProps() { return { prefixCls: 'ant-modal', @@ -24,6 +24,21 @@ let AntModal = React.createClass({ }; }, + propTypes: { + prefixCls: PropTypes.string, + onOk: PropTypes.func, + onCancel: PropTypes.func, + okText: PropTypes.node, + cancelText: PropTypes.node, + width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + confirmLoading: PropTypes.bool, + visible: PropTypes.bool, + align: PropTypes.object, + footer: PropTypes.node, + title: PropTypes.node, + closable: PropTypes.bool, + }, + handleCancel(e) { this.props.onCancel(e); }, diff --git a/components/modal/index.md b/components/modal/index.md index c8b39b68d3..875f4e46d5 100644 --- a/components/modal/index.md +++ b/components/modal/index.md @@ -30,7 +30,8 @@ | footer | 底部内容 | React.Element | 确定取消按钮 | | okText | 确认按钮文字 | String | 确定 | | cancelText | 取消按钮文字 | String | 取消 | -| maskClosable | 点击蒙层是否允许关闭 | Boolean | true | +| maskClosable | 点击蒙层是否允许关闭 | Boolean | true | +| align | 浮层自定义位置 | Object, [dom-align](https://github.com/yiminghe/dom-align) | 距离顶部 100px | ### Modal.xxx() From 3d792ac482be32d6dd46543f60d395134a7bb5cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=97=B2=E8=80=98=E2=84=A2?= Date: Mon, 14 Mar 2016 11:28:48 +0800 Subject: [PATCH 66/86] update(PR-template): better PULL-Request template format. --- .github/PULL_REQUEST_TEMPLATE.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index f9760a3504..fedbdf9311 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -2,6 +2,6 @@ First of all, thanks for your contribution! :-) Please makes sure these boxes are checked before submitting your PR, thank you! -[ ] Run `npm run lint` and fix those errors before submitting in order to keep consistent code style. -[ ] Rebase before creating a PR to keep commit history clear. -[ ] Add some descriptions and refer relative issues for you PR. +* [ ] Run `npm run lint` and fix those errors before submitting in order to keep consistent code style. +* [ ] Rebase before creating a PR to keep commit history clear. +* [ ] Add some descriptions and refer relative issues for you PR. From 5ec436d0dd1fd297e59f5d8c75945dccd642aae4 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 14 Mar 2016 14:04:33 +0800 Subject: [PATCH 67/86] Make default progress color not primary color --- style/components/progress.less | 2 +- style/themes/default/custom.less | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/style/components/progress.less b/style/components/progress.less index 7634236cb0..fc7531a70a 100644 --- a/style/components/progress.less +++ b/style/components/progress.less @@ -26,7 +26,7 @@ } &-line-bg { border-radius: 100px; - background-color: @primary-color; + background-color: @info-color; transition: all 0.3s linear 0s; position: relative; } diff --git a/style/themes/default/custom.less b/style/themes/default/custom.less index ef1509c8c3..cba20d0978 100644 --- a/style/themes/default/custom.less +++ b/style/themes/default/custom.less @@ -3,6 +3,7 @@ // Color @primary-color : #2db7f5; +@info-color : #2db7f5; @success-color : #87d068; @error-color : #f50; @warning-color : #fa0; From ffe729a77b40bee1d2cb5e1ec7861fb22cbf9d86 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 14 Mar 2016 15:01:00 +0800 Subject: [PATCH 68/86] update docs --- docs/pattern/form.md | 2 +- docs/spec/alignment.md | 2 +- docs/spec/feature.md | 2 +- docs/spec/principle.md | 2 +- docs/spec/proximity.md | 2 +- scripts/demo.js | 2 +- site/static/style.less | 7 +++++++ 7 files changed, 13 insertions(+), 6 deletions(-) diff --git a/docs/pattern/form.md b/docs/pattern/form.md index ac865a1b5f..c85d6d2df2 100644 --- a/docs/pattern/form.md +++ b/docs/pattern/form.md @@ -106,7 +106,7 @@ ### 字数校验框 -字数校验框示例 +字数校验框示例 用于统计当前输入长度，以及是否超过系统阈值。 diff --git a/docs/spec/alignment.md b/docs/spec/alignment.md index 5cc10cd823..8c9726c6bc 100644 --- a/docs/spec/alignment.md +++ b/docs/spec/alignment.md @@ -6,7 +6,7 @@ --- -正如『格式塔学派』中的连续律（Law of Continuity）所描述的，在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性；也能引导视觉流向，让用户更流畅地接收信息。 +正如『格式塔学派』中的连续律（Law of Continuity）所描述的，在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息。 > 格式塔学派（德语：Gestalttheorie）：是心理学重要流派之一，兴起于 20 世纪初的德国，又称为完形心理学；主张人脑的运作原理是整体的，『整体不同于其部件的总和』。——摘自『维基百科』 diff --git a/docs/spec/feature.md b/docs/spec/feature.md index cb85401b35..b8af268ba3 100644 --- a/docs/spec/feature.md +++ b/docs/spec/feature.md @@ -44,7 +44,7 @@ 分页示例 -字数校验框示例 +字数校验框示例 『不同』不一定『更好』，但是『更好』一定『不同』。不断追求细节上的『更好』，使得我们的组件和同类产品都不一样，自然而然的『不同』。 diff --git a/docs/spec/principle.md b/docs/spec/principle.md index e9739b8f2a..4eb393e800 100644 --- a/docs/spec/principle.md +++ b/docs/spec/principle.md @@ -31,7 +31,7 @@
-### 中台十大设计原则 +#### Ant Design 十大设计原则 - [亲密性 Proximity](./proximity) - [对齐 Alignment](./alignment) diff --git a/docs/spec/proximity.md b/docs/spec/proximity.md index 54bf574757..99b3e46f93 100644 --- a/docs/spec/proximity.md +++ b/docs/spec/proximity.md @@ -6,7 +6,7 @@ --- -如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现**组织性**，让用户对页面结构和信息层次一目了然。 +如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。
diff --git a/scripts/demo.js b/scripts/demo.js index 1e669512df..17755a69a6 100644 --- a/scripts/demo.js +++ b/scripts/demo.js @@ -205,7 +205,7 @@ const PriviewImg = React.createClass({ return (
-
+
{node}
{this.props.alt}
diff --git a/site/static/style.less b/site/static/style.less index c291fe5fae..670ad2c343 100644 --- a/site/static/style.less +++ b/site/static/style.less @@ -1207,8 +1207,15 @@ a.entry-link:hover .anticon-smile { position: relative; } +.preview-image-wrapper.video { + padding: 0; + background: 0; + display: block; +} + .preview-image-wrapper video { width: 100%; + display: block; + svg { position: absolute; top: 0; From 9665daa1922500f56f8ac0d9cb7eb7c1893eb663 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 14 Mar 2016 16:18:06 +0800 Subject: [PATCH 69/86] move toc under meta description --- docs/pattern/advanced-search.md | 4 ++-- docs/pattern/complex-table.md | 4 ++-- docs/pattern/form.md | 4 ++-- docs/pattern/list.md | 4 ++-- docs/pattern/navigation.md | 4 ++-- docs/pattern/table.md | 4 ++-- docs/react/getting-started.md | 4 ++-- docs/react/introduce.md | 3 +-- docs/spec/alignment.md | 2 -- docs/spec/colors.md | 2 +- docs/spec/contrast.md | 4 ---- docs/spec/direct.md | 4 ---- docs/spec/easing.md | 2 +- docs/spec/feature.md | 8 ++++---- docs/spec/font.md | 4 ++-- docs/spec/introduce.md | 4 ++-- docs/spec/invitation.md | 6 ------ docs/spec/lightweight.md | 4 ---- docs/spec/motion.md | 3 --- docs/spec/principle.md | 4 ++-- docs/spec/proximity.md | 4 ---- docs/spec/reaction.md | 4 ---- docs/spec/repetition.md | 4 ---- docs/spec/stay.md | 4 ---- docs/spec/transition.md | 4 ---- docs/spec/typography.md | 4 ++-- package.json | 2 +- site/static/style.less | 2 +- 28 files changed, 31 insertions(+), 75 deletions(-) diff --git a/docs/pattern/advanced-search.md b/docs/pattern/advanced-search.md index d4b0f1cbcb..6eed9292d7 100644 --- a/docs/pattern/advanced-search.md +++ b/docs/pattern/advanced-search.md @@ -3,10 +3,10 @@ - category: 6 - order: 6 ---- - 借助『高级搜索』，用户可以缩小复杂列表／表格等的展示范围。 +--- + ## 常规型 ### 交互 diff --git a/docs/pattern/complex-table.md b/docs/pattern/complex-table.md index 2c4e103a70..cb165ec021 100644 --- a/docs/pattern/complex-table.md +++ b/docs/pattern/complex-table.md @@ -3,10 +3,10 @@ - category: 5 - order: 5 ---- - 表格也用于展示复杂和高度结构化数据。 +--- + ## 案例 ### 多列数据 diff --git a/docs/pattern/form.md b/docs/pattern/form.md index c85d6d2df2..985704fc3a 100644 --- a/docs/pattern/form.md +++ b/docs/pattern/form.md @@ -3,8 +3,6 @@ - category: 2 - order: 2 ---- - 作为获取用户输入的重要交互方式，表单也承担将问题和答案进行配对的角色。 设计者进行表单设计时，应当注意这几点： @@ -23,6 +21,8 @@ 4. 不要提出不必要的问题。 +--- + ## 内容 结构示例 diff --git a/docs/pattern/list.md b/docs/pattern/list.md index 0d1a3a4734..012558169c 100644 --- a/docs/pattern/list.md +++ b/docs/pattern/list.md @@ -3,8 +3,6 @@ - category: 3 - order: 3 ---- - 列表是非常常见的界面元素，有多种使用场景： - 获取概览 @@ -13,6 +11,8 @@ - 排序与过滤 - 重新安排、添加、删除或重新分类列表项 +--- + ## 交互 ### 显示详情信息 diff --git a/docs/pattern/navigation.md b/docs/pattern/navigation.md index 7f2c68132b..4367d24822 100644 --- a/docs/pattern/navigation.md +++ b/docs/pattern/navigation.md @@ -3,14 +3,14 @@ - category: 1 - order: 1 ---- - 在广义上，任何告知用户他在哪里，他能去什么地方以及如何到达那里的方式，都可以称之为导航。而我们将中后台常见的导航方式进行提炼和封装，帮助设计者快速构建清晰和流畅的系统。当设计者使用导航或者自定义一些导航结构时，请注意： 1. 尽可能提供标示、上下文线索以及网站地图，避免用户迷路； 2. 保持导航样式和行为一致或者减少导航数量，降低用户学习成本； 3. 尽可能减少页面间的跳转（eg：一个常见任务需要多个页面跳转时，请减少至一至两次），让用户移动距离保持简短。 +--- + ## 常见导航 diff --git a/docs/pattern/table.md b/docs/pattern/table.md index 2aa3f4fde4..f3e05d7ab5 100644 --- a/docs/pattern/table.md +++ b/docs/pattern/table.md @@ -3,10 +3,10 @@ - category: 4 - order: 4 ---- - 表格可被视为一种列表。它经常和其他界面元素一起协同，用于展示和操作结构化数据，并经常用于详情信息的入口。 +--- + ## 内容 结构示例 diff --git a/docs/react/getting-started.md b/docs/react/getting-started.md index fb552d8a69..6015f14349 100644 --- a/docs/react/getting-started.md +++ b/docs/react/getting-started.md @@ -3,10 +3,10 @@ - category: 1 - order: 1 ---- - Ant Design React 致力于提供给程序员**愉悦**的开发体验。 +--- + ## 第一个例子 最简单的试用方式参照以下 CodePen 演示，也推荐 Fork 本例来进行 `Bug Report`，注意不要在实际项目中这样使用。 diff --git a/docs/react/introduce.md b/docs/react/introduce.md index 16f37b7a90..4360c5f993 100644 --- a/docs/react/introduce.md +++ b/docs/react/introduce.md @@ -3,8 +3,6 @@ - category: 0 - order: 0 ---- - 这里是 Ant Design 的 React 实现，开发和服务于企业级后台产品。
@@ -24,6 +22,7 @@ } +--- ## 特性 diff --git a/docs/spec/alignment.md b/docs/spec/alignment.md index 8c9726c6bc..06bae6f17d 100644 --- a/docs/spec/alignment.md +++ b/docs/spec/alignment.md @@ -4,8 +4,6 @@ - order: 2 - subtitle: Alignment ---- - 正如『格式塔学派』中的连续律（Law of Continuity）所描述的，在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息。 > 格式塔学派（德语：Gestalttheorie）：是心理学重要流派之一，兴起于 20 世纪初的德国，又称为完形心理学；主张人脑的运作原理是整体的，『整体不同于其部件的总和』。——摘自『维基百科』 diff --git a/docs/spec/colors.md b/docs/spec/colors.md index 21484602c9..fc23d9c8a1 100644 --- a/docs/spec/colors.md +++ b/docs/spec/colors.md @@ -9,7 +9,7 @@ 色彩在界面设计中的使用应同时具备品牌识别性以及界面设计功能性。众所周知色彩是相当感性的东西，设计中对色彩的运用首要应考虑到品牌层面的表达，另外很重要的一点是色彩的运用应达到信息传递，动作指引，交互反馈，或是强化和凸现某一个元素的目的。任何颜色的选取和使用应该是有意义的。众所周知色彩是相当感性的东西，设计中对色彩的运用首要应考虑到品牌层面的表达，另外很重要的一点是色彩的运用应达到信息传递，动作指引，交互反馈，或是强化和凸现某一个元素的目的。任何颜色的选取和使用应该是有意义的。 -## ANTD Color +## Ant Design Colors Ant Design 的色板由 9 种基本色彩组成，每种基本色又衍生出九宫格色板，在此基础上还可以通过黑白叠加的方式实现色彩明暗的效果。 diff --git a/docs/spec/contrast.md b/docs/spec/contrast.md index daa60f292f..bc2d75b6a7 100644 --- a/docs/spec/contrast.md +++ b/docs/spec/contrast.md @@ -4,14 +4,10 @@ - order: 3 - subtitle: Contrast ---- - 对比是增加视觉效果最有效方法之一，同时也能在不同元素之间建立一种有组织的层次结构，让用户快速识别关键信息。 > 注：要实现有效的对比，对比就必须强烈，切不可畏畏缩缩。 -
- --- ## 主次关系对比 diff --git a/docs/spec/direct.md b/docs/spec/direct.md index 19cbc621d7..a5e5016972 100644 --- a/docs/spec/direct.md +++ b/docs/spec/direct.md @@ -4,12 +4,8 @@ - order: 5 - subtitle: Make it Direct ---- - 正如 Alan Cooper 所言：『需要在哪里输出，就要允许在哪里输入』。这就是直接操作的原理。eg：不要为了编辑内容而打开另一个页面，应该直接在上下文中实现编辑。 -
- --- ## 页内编辑 diff --git a/docs/spec/easing.md b/docs/spec/easing.md index 0d9bade216..5767a58ddd 100644 --- a/docs/spec/easing.md +++ b/docs/spec/easing.md @@ -14,7 +14,7 @@ 当某个东西往下掉时，首先是越掉越快，撞到地上后回弹，最终才又碰触地板。 -### 质量和重量 +## 质量和重量 在物理世界里，是以力量附加到物体对象里，加上自身的质量才完成一段动画。力量的持续时间决定物体的加速，减速与改变方向。 diff --git a/docs/spec/feature.md b/docs/spec/feature.md index b8af268ba3..3f4f55a707 100644 --- a/docs/spec/feature.md +++ b/docs/spec/feature.md @@ -3,11 +3,9 @@ - category: 1 - order: 1 ---- - 与众不同的是，Ant Design 不但追求『用户』的使用体验，还追求『设计者』的使用体验，真真正正贯彻和践行『以人为本』的设计理念。 -
+
微小
@@ -27,7 +25,7 @@ +--- + ## 微小 ### 微创新 diff --git a/docs/spec/font.md b/docs/spec/font.md index f60f2b818f..9093eda02f 100644 --- a/docs/spec/font.md +++ b/docs/spec/font.md @@ -3,10 +3,10 @@ - category: 设计基础 - order: 0 ---- - 跨平台的字体设定，力求在各个操作系统下都有最佳展示效果。 +--- + ## 字体家族 - 中文字体族： diff --git a/docs/spec/introduce.md b/docs/spec/introduce.md index 7a9573518b..d324f45cd4 100644 --- a/docs/spec/introduce.md +++ b/docs/spec/introduce.md @@ -3,8 +3,6 @@ - category: 0 - order: 0 ---- -
@@ -13,6 +11,8 @@ Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言。它模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界，将进行 UE 设计和 UI 设计人员统称为『设计者』，利用统一的规范进行设计赋能，全面提高中台产品体验和研发效率。 +--- + ## 谁在使用 - 蚂蚁金服 diff --git a/docs/spec/invitation.md b/docs/spec/invitation.md index 468dde619e..b2d97ce879 100644 --- a/docs/spec/invitation.md +++ b/docs/spec/invitation.md @@ -4,20 +4,14 @@ - order: 8 - subtitle: Provide Invitation ---- - - 很多富交互模式（eg：『拖放』、『行内编辑』、『上下文工具』）都有一个共同问题，就是缺少易发现性。所以『提供邀请』是成功完成人机交互的关键所在。 邀请就是引导用户进入下一个交互层次的提醒和暗示，通常包括意符（eg：实时的提示信息）和可供性，以表明在下一个界面可以做什么。当可供性中可感知的部分（Perceived Affordance）表现为意符时，人机交互的过程往往更加自然、顺畅。 - > 意符（Signifiers）：一种额外的提示，告诉用户可以采取什么行为，以及应该怎么操作；必须是可感知（eg：视觉、听觉、触觉等）。——摘自《设计心理学 1 》 >可供性（Affordance）：也被翻译成『示能』，由 James J. Gibson 提出，定义为物品的特性与决定物品用途的主体能力之间的关系；其中部分可感知（此部分定义为 Perceived Affordance），部分不可感知。——摘自《设计心理学 1 》 -
- --- ## 静态邀请 diff --git a/docs/spec/lightweight.md b/docs/spec/lightweight.md index c7f9cae7a5..31391017a7 100644 --- a/docs/spec/lightweight.md +++ b/docs/spec/lightweight.md @@ -4,14 +4,10 @@ - order: 6 - subtitle: Keep it Lightweight ---- - 根据费茨法则（Fitts's Law）所描述的，如果用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作。通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互。 > 注：费茨法则：到达目标的时间是到达目标的距离与目标大小的函数，具体：。其中：1.设备当前位置和目标位置的距离（D）；2.目标的大小（W）。距离越长，所用时间越长；目标越大，所用时间越短。 -
- --- ## 实时可见工具 diff --git a/docs/spec/motion.md b/docs/spec/motion.md index 3c4b02246a..db351fcc66 100644 --- a/docs/spec/motion.md +++ b/docs/spec/motion.md @@ -9,8 +9,6 @@ Ant Design 提供了一些预设的组件动画样式。
-## 组件动画 - 通过设置组件的 `transitionName` 指定组件动画。 | 组件 | 中文名 | 采用动画 | @@ -255,4 +253,3 @@ ReactDOM.render(, document.getElementById('components-motion-demo-basic') width:180px; } - diff --git a/docs/spec/principle.md b/docs/spec/principle.md index 4eb393e800..1a7e7c6f38 100644 --- a/docs/spec/principle.md +++ b/docs/spec/principle.md @@ -4,14 +4,14 @@ - order: 0 - subtitle: Introduction ---- - 『好设计比差设计更难发现』，因为好设计是如此的自然，帮助用户轻松的完成目标，以至于用户根本意识不到好设计的存在。 我们借鉴了《写给大家看的设计书》、《Web 界面设计》对设计原则的总结和推理，并结合我们团队的实践和理解，制定了以下十大原则，为『设计者』提供解决具体问题的准则和启示。 > 注：设计原则是对具象设计的抽象和总结，然而产品是一个整体，用户对整个产品的认知也是从全局到局部，所以忽略全局，只在局部套用原则是不可取的。对于这些原则，『设计者』应当理性地学会它，而后勇敢地抛弃它。 +--- +
diff --git a/docs/spec/proximity.md b/docs/spec/proximity.md index 99b3e46f93..2208bf02df 100644 --- a/docs/spec/proximity.md +++ b/docs/spec/proximity.md @@ -4,12 +4,8 @@ - order: 1 - subtitle: Proximity ---- - 如果信息之间关联性越高，它们之间的距离就应该越接近，也越像一个视觉单元；反之，则它们的距离就应该越远，也越像多个视觉单元。亲密性的根本目的是实现组织性，让用户对页面结构和信息层次一目了然。 -
- --- ## 纵向间距关系 diff --git a/docs/spec/reaction.md b/docs/spec/reaction.md index 4275dac348..5339370797 100644 --- a/docs/spec/reaction.md +++ b/docs/spec/reaction.md @@ -4,8 +4,6 @@ - order: 10 - subtitle: React Immediately ---- - 『提供邀请』的强大体现在`交互之前`给出反馈，解决易发现性问题；『巧用过渡』的有用体现在它能够在`交互期间`为用户提供视觉反馈；『即时反应』的重要性体现在`交互之后`立即给出反馈。 就像『牛顿第三定律』所描述作用力和反作用一样，用户进行了操作或者内部数据发生了变化，系统就应该立即有一个对应的反馈，同时输入量级越大、重要性越高，那么反馈量级越大、重要性越高。 @@ -14,8 +12,6 @@ > 牛顿第三定律：当两个物体互相作用时，彼此施加于对方的力，其大小相等、方向相反。——摘自《维基百科》 -
- --- ## 查询模式 diff --git a/docs/spec/repetition.md b/docs/spec/repetition.md index 34b50bf5e7..4b184b9b7a 100644 --- a/docs/spec/repetition.md +++ b/docs/spec/repetition.md @@ -4,12 +4,8 @@ - order: 4 - subtitle: Repetition ---- - 相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成本，也可以帮助用户识别出这些元素之间的关联性。 -
- --- ## 重复元素 diff --git a/docs/spec/stay.md b/docs/spec/stay.md index a9009b1134..777c95e47e 100644 --- a/docs/spec/stay.md +++ b/docs/spec/stay.md @@ -4,16 +4,12 @@ - order: 6 - subtitle: Stay in the Page ---- - 能在这个页面解决的问题，就不要去其它页面解决，因为任何页面刷新和跳转都会引起变化盲视（Change Blindness），导致用户心流（Flow）被打断。频繁的页面刷新和跳转，就像在看戏时，演员说完一行台词就安排一次谢幕一样。 > 变换盲视（Change Blindness）：指视觉场景中的某些变化并未被观察者注意到的心理现象。产生这种现象的原因包括场景中的障碍物，眼球运动、地点的变化，或者是缺乏注意力等。——摘自《维基百科》 >心流（Flow）：也有别名以化境 (Zone) 表示，亦有人翻译为神驰状态，定义是一种将个人精神力完全投注在某种活动上的感觉；心流产生时同时会有高度的兴奋及充实感。——摘自《维基百科》 -
- --- ## 覆盖层 diff --git a/docs/spec/transition.md b/docs/spec/transition.md index c7efc8f275..e5ef87a352 100644 --- a/docs/spec/transition.md +++ b/docs/spec/transition.md @@ -4,16 +4,12 @@ - order: 9 - subtitle: Use Transition ---- - 人脑灰质（Gray Matter）会对动态的事物（eg：移动、形变、色变等）保持敏感。在界面中，适当的加入一些过渡效果，能让界面保持生动，同时也能增强用户和界面的沟通。 - Adding: 新加入的信息元素应被告知如何使用，从页面转变的信息元素需被重新识别。 - Receding: 与当前页无关的信息元素应采用适当方式移除。 - Normal: 指那些从转场开始到结束都没有发生变化的信息元素。 -
- --- ## 在视图变化时保持上下文 diff --git a/docs/spec/typography.md b/docs/spec/typography.md index bb527e639f..6f6b9ce621 100644 --- a/docs/spec/typography.md +++ b/docs/spec/typography.md @@ -3,10 +3,10 @@ - category: 设计基础 - order: 1 ---- - 良好的排版规范能大大提升用户的视觉体验。 +--- + ## 行高和段落 考虑到阅读的舒适度和节奏感，句子和段落间需要合适的间距。行距決定了段落中各行文字的垂直距离，通过字体本身行高来控制，我们行高默认为字号的 1.5 倍。段落间距決定了段落上下的间距，一般为字号的一倍宽。 diff --git a/package.json b/package.json index 6d769c3157..10916d248c 100644 --- a/package.json +++ b/package.json @@ -104,7 +104,7 @@ "less-loader": "^2.2.0", "lesshint-antd": "^1.2.1", "lodash": "^4.1.0", - "nico-jsx": "~0.8.2", + "nico-jsx": "~0.9.0", "postcss-loader": "^0.8.0", "pre-commit": "1.x", "querystring": "^0.2.0", diff --git a/site/static/style.less b/site/static/style.less index 670ad2c343..f2b599664c 100644 --- a/site/static/style.less +++ b/site/static/style.less @@ -711,7 +711,7 @@ footer ul li > a { .toc { font-size: 14px; - margin: 20px 0; + margin: 36px 0 24px; background: #fbfbfb; border-left: 2px solid #eee; } From e1f27bbe4d9259250dd7d65ce9ab4d7606a65058 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=84=B6=E5=88=99?= Date: Mon, 14 Mar 2016 16:18:30 +0800 Subject: [PATCH 70/86] upgrade treeSelect --- components/tree-select/demo/checkable.md | 2 ++ components/tree-select/index.jsx | 5 ++++- components/tree-select/index.md | 1 + package.json | 2 +- 4 files changed, 8 insertions(+), 2 deletions(-) diff --git a/components/tree-select/demo/checkable.md b/components/tree-select/demo/checkable.md index 154b0fb90e..12657c4d20 100644 --- a/components/tree-select/demo/checkable.md +++ b/components/tree-select/demo/checkable.md @@ -8,6 +8,7 @@ ````jsx import { TreeSelect } from 'antd'; +const SHOW_PARENT = TreeSelect.SHOW_PARENT; const treeData = [{ label: '节点一', @@ -54,6 +55,7 @@ const Demo = React.createClass({ onChange: this.onChange, multiple: true, treeCheckable: true, + showCheckedStrategy: SHOW_PARENT, searchPlaceholder: '请选择', style: { width: 300, diff --git a/components/tree-select/index.jsx b/components/tree-select/index.jsx index f261129d82..850274f496 100644 --- a/components/tree-select/index.jsx +++ b/components/tree-select/index.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import TreeSelect, { TreeNode } from 'rc-tree-select'; +import TreeSelect, { TreeNode, SHOW_ALL, SHOW_PARENT, SHOW_CHILD } from 'rc-tree-select'; import classNames from 'classnames'; const AntTreeSelect = React.createClass({ @@ -42,4 +42,7 @@ const AntTreeSelect = React.createClass({ }); AntTreeSelect.TreeNode = TreeNode; +AntTreeSelect.SHOW_ALL = SHOW_ALL; +AntTreeSelect.SHOW_PARENT = SHOW_PARENT; +AntTreeSelect.SHOW_CHILD = SHOW_CHILD; export default AntTreeSelect; diff --git a/components/tree-select/index.md b/components/tree-select/index.md index c5bfe4ef0a..2ecb4cd2be 100644 --- a/components/tree-select/index.md +++ b/components/tree-select/index.md @@ -34,6 +34,7 @@ | size | 选择框大小，可选 `large` `small` | String | default | | showSearch | 在下拉中显示搜索框 | boolean | false | | disabled | 是否禁用 | boolean | false | +| showCheckedStrategy | `TreeSelect.SHOW_ALL`: 显示所有选中节点(包括父节点). `TreeSelect.SHOW_PARENT`: 只显示父节点(当父节点下所有子节点都选中时). 默认只显示子节点. | enum{TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD } | TreeSelect.SHOW_CHILD | | treeDefaultExpandAll | 默认展开所有树节点 | bool | false | | treeCheckable | 显示checkbox | bool | false | | filterTreeNode | 是否根据输入项进行筛选，返回值true | function(treeNode) | - | diff --git a/package.json b/package.json index 73d5e20b74..188748d19a 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,7 @@ "rc-time-picker": "~1.1.0", "rc-tooltip": "~3.3.1", "rc-tree": "~1.1.0", - "rc-tree-select": "~1.2.2", + "rc-tree-select": "~1.4.1", "rc-trigger": "~1.2.0", "rc-upload": "~1.8.0", "rc-util": "~3.1.2", From 4d7d49c3d0f130828ae7ddefa58a45c0e8d442f7 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 14 Mar 2016 16:31:42 +0800 Subject: [PATCH 71/86] update pictures --- docs/spec/alignment.md | 6 +++--- docs/spec/proximity.md | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/spec/alignment.md b/docs/spec/alignment.md index 06bae6f17d..2bd1f8f0e2 100644 --- a/docs/spec/alignment.md +++ b/docs/spec/alignment.md @@ -12,8 +12,8 @@ ## 文案类对齐 -推荐示例 -不推荐示例 +推荐示例 +不推荐示例 如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点。 @@ -21,7 +21,7 @@ ## 表单类对齐 -冒号对齐示例 +冒号对齐示例 冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。 diff --git a/docs/spec/proximity.md b/docs/spec/proximity.md index 2208bf02df..0c9d6daaca 100644 --- a/docs/spec/proximity.md +++ b/docs/spec/proximity.md @@ -10,7 +10,7 @@ ## 纵向间距关系 -纵向间距示例 +纵向间距示例 通过『小号间距』、『中号间距』、『大号间距』这三种规格来划分信息层次。 From 04be1c439013f86ba1938fc4df68a79bb3b0d8eb Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 14 Mar 2016 16:53:52 +0800 Subject: [PATCH 72/86] update site style --- site/static/style.less | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/site/static/style.less b/site/static/style.less index c414a1b947..574f8ffa96 100644 --- a/site/static/style.less +++ b/site/static/style.less @@ -341,6 +341,7 @@ footer { position: relative; z-index: 1; color: #666; + box-shadow: 0 1000px 0 1000px #fff; } footer ul { @@ -474,6 +475,7 @@ footer ul li > a { overflow: hidden; padding: 24px 0 0; margin-bottom: 24px; + min-height: 400px; position: relative; } @@ -482,7 +484,8 @@ footer ul li > a { margin-left: 219px; padding: 0 40px 120px; background: #fff; - min-height: 500px; + min-height: 400px; + min-height: 80vh; overflow: hidden; } From 0212a73ef9e904cc018524bd03560021ac59be2e Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 14 Mar 2016 16:53:52 +0800 Subject: [PATCH 73/86] update site style --- site/static/style.less | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/site/static/style.less b/site/static/style.less index f2b599664c..7b843e43bf 100644 --- a/site/static/style.less +++ b/site/static/style.less @@ -341,6 +341,7 @@ footer { position: relative; z-index: 1; color: #666; + box-shadow: 0 1000px 0 1000px #fff; } footer ul { @@ -474,6 +475,7 @@ footer ul li > a { overflow: hidden; padding: 24px 0 0; margin-bottom: 24px; + min-height: 400px; position: relative; } @@ -482,7 +484,8 @@ footer ul li > a { margin-left: 219px; padding: 0 40px 120px; background: #fff; - min-height: 500px; + min-height: 400px; + min-height: 80vh; overflow: hidden; } From b79c4b18836f038665b103cff2820ee801a77acb Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 14 Mar 2016 17:11:41 +0800 Subject: [PATCH 74/86] fix img style in doc --- site/static/style.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/site/static/style.less b/site/static/style.less index 7b843e43bf..4479f40205 100644 --- a/site/static/style.less +++ b/site/static/style.less @@ -1187,8 +1187,9 @@ a.entry-link:hover .anticon-smile { .preview-image-boxes { float: right; - margin: 0 0 70px 20px; + margin: 0 0 70px 28px; width: 616px; + clear: both; } .preview-image-boxes + .preview-image-boxes { From 0e9edf7a12e8108628bbac9f8466290d924615f4 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 14 Mar 2016 17:12:34 +0800 Subject: [PATCH 75/86] bump beta for tree select --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 188748d19a..cc92a184f6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "0.12.10", + "version": "0.12.11-beta", "title": "Ant Design", "description": "一个 UI 设计语言", "homepage": "http://ant.design/", From bc644e54cb91449163d470edb6c28beb2e8fa2f2 Mon Sep 17 00:00:00 2001 From: hi-caicai Date: Mon, 14 Mar 2016 17:14:29 +0800 Subject: [PATCH 76/86] update docs --- docs/spec/direct.md | 2 +- docs/spec/invitation.md | 4 ++-- docs/spec/lightweight.md | 2 +- docs/spec/reaction.md | 6 +++--- docs/spec/stay.md | 8 ++++---- docs/spec/transition.md | 2 +- 6 files changed, 12 insertions(+), 12 deletions(-) diff --git a/docs/spec/direct.md b/docs/spec/direct.md index 19cbc621d7..fd93bfda58 100644 --- a/docs/spec/direct.md +++ b/docs/spec/direct.md @@ -39,7 +39,7 @@
-更多有关『页内编辑』的模式，可查看[『模式』-『表格』-『交互』](../pattern/table#模块编辑)中的内容。 +更多有关『页内编辑』的模式，可查看[『模式／表格／交互』](../pattern/table#模块编辑)中的内容。
diff --git a/docs/spec/invitation.md b/docs/spec/invitation.md index 468dde619e..fdf94fd946 100644 --- a/docs/spec/invitation.md +++ b/docs/spec/invitation.md @@ -12,9 +12,9 @@ 邀请就是引导用户进入下一个交互层次的提醒和暗示，通常包括意符（eg：实时的提示信息）和可供性，以表明在下一个界面可以做什么。当可供性中可感知的部分（Perceived Affordance）表现为意符时，人机交互的过程往往更加自然、顺畅。 -> 意符（Signifiers）：一种额外的提示，告诉用户可以采取什么行为，以及应该怎么操作；必须是可感知（eg：视觉、听觉、触觉等）。——摘自《设计心理学 1 》 +> ** 意符（Signifiers）** ：一种额外的提示，告诉用户可以采取什么行为，以及应该怎么操作；必须是可感知（eg：视觉、听觉、触觉等）。——摘自《设计心理学 1 》 ->可供性（Affordance）：也被翻译成『示能』，由 James J. Gibson 提出，定义为物品的特性与决定物品用途的主体能力之间的关系；其中部分可感知（此部分定义为 Perceived Affordance），部分不可感知。——摘自《设计心理学 1 》 +> ** 可供性（Affordance）** ：也被翻译成『示能』，由 James J. Gibson 提出，定义为物品的特性与决定物品用途的主体能力之间的关系；其中部分可感知（此部分定义为 Perceived Affordance），部分不可感知。——摘自《设计心理学 1 》
diff --git a/docs/spec/lightweight.md b/docs/spec/lightweight.md index c7f9cae7a5..6853ce0e83 100644 --- a/docs/spec/lightweight.md +++ b/docs/spec/lightweight.md @@ -8,7 +8,7 @@ 根据费茨法则（Fitts's Law）所描述的，如果用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作。通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互。 -> 注：费茨法则：到达目标的时间是到达目标的距离与目标大小的函数，具体：。其中：1.设备当前位置和目标位置的距离（D）；2.目标的大小（W）。距离越长，所用时间越长；目标越大，所用时间越短。 +> 注：** 费茨法则 ** ：到达目标的时间是到达目标的距离与目标大小的函数，具体：。其中：1.设备当前位置和目标位置的距离（D）；2.目标的大小（W）。距离越长，所用时间越长；目标越大，所用时间越短。
diff --git a/docs/spec/reaction.md b/docs/spec/reaction.md index 4275dac348..dc53c18125 100644 --- a/docs/spec/reaction.md +++ b/docs/spec/reaction.md @@ -12,7 +12,7 @@ 虽然反馈太多（准确的说，错误的反馈太多）是一个问题，但是反馈太少甚至没有反馈的系统，则让人感觉迟钝和笨拙，用户体验更差。 -> 牛顿第三定律：当两个物体互相作用时，彼此施加于对方的力，其大小相等、方向相反。——摘自《维基百科》 +> ** 牛顿第三定律 ** ：当两个物体互相作用时，彼此施加于对方的力，其大小相等、方向相反。——摘自《维基百科》
@@ -37,7 +37,7 @@
-微调搜索：随着用户调整搜索条件，实时调整搜索结构。具体可见：[『模式』－『高级搜索』](../pattern/advanced-search)。 +微调搜索：随着用户调整搜索条件，实时调整搜索结构。具体可见：[『模式／高级搜索』](../pattern/advanced-search)。
@@ -53,7 +53,7 @@
-渐进式展现：在必要的时候提供必要的提示，而不是一股脑儿显示所有提示，导致界面混乱，增加认知负担。案例详见[『足不出户』-『渐进式展现』](../spec/stay#流程处理)。 +渐进式展现：在必要的时候提供必要的提示，而不是一股脑儿显示所有提示，导致界面混乱，增加认知负担。案例详见[『足不出户／渐进式展现』](../spec/stay#流程处理)。
diff --git a/docs/spec/stay.md b/docs/spec/stay.md index a9009b1134..b8bf749b95 100644 --- a/docs/spec/stay.md +++ b/docs/spec/stay.md @@ -8,9 +8,9 @@ 能在这个页面解决的问题，就不要去其它页面解决，因为任何页面刷新和跳转都会引起变化盲视（Change Blindness），导致用户心流（Flow）被打断。频繁的页面刷新和跳转，就像在看戏时，演员说完一行台词就安排一次谢幕一样。 -> 变换盲视（Change Blindness）：指视觉场景中的某些变化并未被观察者注意到的心理现象。产生这种现象的原因包括场景中的障碍物，眼球运动、地点的变化，或者是缺乏注意力等。——摘自《维基百科》 +> ** 变换盲视（Change Blindness）** ：指视觉场景中的某些变化并未被观察者注意到的心理现象。产生这种现象的原因包括场景中的障碍物，眼球运动、地点的变化，或者是缺乏注意力等。——摘自《维基百科》 ->心流（Flow）：也有别名以化境 (Zone) 表示，亦有人翻译为神驰状态，定义是一种将个人精神力完全投注在某种活动上的感觉；心流产生时同时会有高度的兴奋及充实感。——摘自《维基百科》 +> ** 心流（Flow）：也有别名以化境 ** (Zone) 表示，亦有人翻译为神驰状态，定义是一种将个人精神力完全投注在某种活动上的感觉；心流产生时同时会有高度的兴奋及充实感。——摘自《维基百科》
@@ -68,9 +68,9 @@ 在交互过程中，『覆盖层』可以在当前页面上方显示附加内容和交互链接；『嵌入层』可以在页面内部实现同样效果；而『虚拟页面』不局限机械时代的『页面』，可以利用信息时代的特点构建一种新型『页面』。 -无限加载和分页器，详见[『模式』-『列表』-『显示长列表』](../pattern/list#显示长列表) +无限加载和分页器，详见[『模式／列表／显示长列表』](../pattern/list#显示长列表) -走马灯，详见[『模式』-『列表』-『显示图片』](../pattern/list#显示图片) +走马灯，详见[『模式／列表／显示图片』](../pattern/list#显示图片)
diff --git a/docs/spec/transition.md b/docs/spec/transition.md index c7efc8f275..dcf71a6173 100644 --- a/docs/spec/transition.md +++ b/docs/spec/transition.md @@ -68,7 +68,7 @@ 对象呼出示例 -对象呼出：点击页面中元素，呼出一个新对象 +对象呼出：点击页面中元素，呼出一个新对象。 --- From d03d42bf30f82b04e72b237ac15d37cd7bcb3a67 Mon Sep 17 00:00:00 2001 From: hi-caicai Date: Mon, 14 Mar 2016 17:38:01 +0800 Subject: [PATCH 77/86] update docs --- docs/spec/alignment.md | 4 ++-- docs/spec/lightweight.md | 2 +- docs/spec/stay.md | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/spec/alignment.md b/docs/spec/alignment.md index 2bd1f8f0e2..599550fe85 100644 --- a/docs/spec/alignment.md +++ b/docs/spec/alignment.md @@ -6,7 +6,7 @@ 正如『格式塔学派』中的连续律（Law of Continuity）所描述的，在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息。 -> 格式塔学派（德语：Gestalttheorie）：是心理学重要流派之一，兴起于 20 世纪初的德国，又称为完形心理学；主张人脑的运作原理是整体的，『整体不同于其部件的总和』。——摘自『维基百科』 +> ** 格式塔学派（德语：Gestalttheorie）** ：是心理学重要流派之一，兴起于 20 世纪初的德国，又称为完形心理学；主张人脑的运作原理是整体的，『整体不同于其部件的总和』。——摘自『维基百科』 --- @@ -25,7 +25,7 @@ 冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。 -更多对齐方式，请查看[『模式』-『表单』-『规格』-『对齐方式』](../pattern/form#对齐方式)。 +更多对齐方式，请查看[『模式／表单／规格／对齐方式』](../pattern/form#对齐方式)。 --- diff --git a/docs/spec/lightweight.md b/docs/spec/lightweight.md index b52013fb9e..4a08335a7a 100644 --- a/docs/spec/lightweight.md +++ b/docs/spec/lightweight.md @@ -6,7 +6,7 @@ 根据费茨法则（Fitts's Law）所描述的，如果用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作。通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互。 -> 注：** 费茨法则 ** ：到达目标的时间是到达目标的距离与目标大小的函数，具体：。其中：1.设备当前位置和目标位置的距离（D）；2.目标的大小（W）。距离越长，所用时间越长；目标越大，所用时间越短。 +> ** 费茨法则 ** ：到达目标的时间是到达目标的距离与目标大小的函数，具体：。其中：1.设备当前位置和目标位置的距离（D）；2.目标的大小（W）。距离越长，所用时间越长；目标越大，所用时间越短。 --- diff --git a/docs/spec/stay.md b/docs/spec/stay.md index 0563509afb..f3c9baef63 100644 --- a/docs/spec/stay.md +++ b/docs/spec/stay.md @@ -8,7 +8,7 @@ > ** 变换盲视（Change Blindness）** ：指视觉场景中的某些变化并未被观察者注意到的心理现象。产生这种现象的原因包括场景中的障碍物，眼球运动、地点的变化，或者是缺乏注意力等。——摘自《维基百科》 -> ** 心流（Flow）：也有别名以化境 ** (Zone) 表示，亦有人翻译为神驰状态，定义是一种将个人精神力完全投注在某种活动上的感觉；心流产生时同时会有高度的兴奋及充实感。——摘自《维基百科》 +> ** 心流（Flow）** ：也有别名以化境 (Zone) 表示，亦有人翻译为神驰状态，定义是一种将个人精神力完全投注在某种活动上的感觉；心流产生时同时会有高度的兴奋及充实感。——摘自《维基百科》 --- From ece5b0cfb2b54068ccb11402058c84572a9ae84b Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 14 Mar 2016 18:39:32 +0800 Subject: [PATCH 78/86] Add docs for #1193 --- components/icon/index.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/components/icon/index.md b/components/icon/index.md index a14ca5317e..76b3631177 100644 --- a/components/icon/index.md +++ b/components/icon/index.md @@ -30,6 +30,10 @@ ``` +## 本地部署 + +图标组件使用 [iconfont.cn](http://iconfont.cn)，默认公网可访问。如需本地部署，可参考 [示例](https://github.com/ant-design/antd-init/tree/master/examples/local-iconfont)。 + ## 图标列表 > 点击图标复制代码。 From b798ee75203491d1d1cbc88477f7b024eceb64c0 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 15 Mar 2016 10:57:53 +0800 Subject: [PATCH 79/86] update feature page style in mobile screen --- docs/spec/feature.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/docs/spec/feature.md b/docs/spec/feature.md index 3f4f55a707..89ab8aa485 100644 --- a/docs/spec/feature.md +++ b/docs/spec/feature.md @@ -32,6 +32,16 @@ font-size: 14px; margin-top: 16px; } +@media only screen and (min-width: 320px) and (max-width: 767px) { + .features { + width: 100%; + text-align: center; + margin-bottom: 20px;; + } + .features img { + width: 80%; + } +} --- From 6a158e2f8236cff79e49cb9c6557a6eacdbe6442 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 15 Mar 2016 11:45:50 +0800 Subject: [PATCH 80/86] Fix outdated Copyright --- LICENSE | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/LICENSE b/LICENSE index c208f57b6a..12189b627d 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT LICENSE -Copyright (c) 2015 Alipay.com, https://www.alipay.com/ +Copyright (c) 2015-present Alipay.com, https://www.alipay.com/ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the From d9183853228dd647dc5c43060fa14a54fb7dac1d Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 15 Mar 2016 13:38:56 +0800 Subject: [PATCH 81/86] Fix affix z-index --- style/components/affix.less | 1 + 1 file changed, 1 insertion(+) diff --git a/style/components/affix.less b/style/components/affix.less index c5e8cca7b1..0a56b4143f 100644 --- a/style/components/affix.less +++ b/style/components/affix.less @@ -1,3 +1,4 @@ .ant-affix { position: fixed; + z-index: 10; } From 9f4a7617f036f6488e0a8735abb7b78e0ce0a930 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 15 Mar 2016 14:01:39 +0800 Subject: [PATCH 82/86] update CHANGELOG --- CHANGELOG.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 64cf13f246..2fbd338833 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,19 @@ --- +## 0.12.11 + +`fixing` + +- 全新的设计文档 `语言` 部分。 +- 修复 Popconfirm `onConfirm` 和 `onCancel` 时没有触发 `onVisibleChange` 的问题。 +- TreeSelect 组件补充 `showCheckedStrategy` 属性，支持回填数据的不同展示方式。 +- 补充 Modal `align` 属性的文档。 +- 修复 Menu 菜单 z-index 丢失的问题。 +- Progress 的默认颜色固定，不再随着主色变化。 +- 优化 Button 点击动画在 Chrome 下的效果。 +- 修复一个 Affix 的 `z-index` 太低的问题。 + ## 0.12.10 - 修复 0.12.9 版本 npm 包打包错误的问题。 From 21e8439d41454a1e993d86a1db5c49f45c074f91 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 15 Mar 2016 14:14:57 +0800 Subject: [PATCH 83/86] fix typo --- docs/spec/stay.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/spec/stay.md b/docs/spec/stay.md index f3c9baef63..a9a511a8db 100644 --- a/docs/spec/stay.md +++ b/docs/spec/stay.md @@ -2,7 +2,7 @@ - category: 十大原则 - order: 6 -- subtitle: Stay in the Page +- subtitle: Stay on the Page 能在这个页面解决的问题，就不要去其它页面解决，因为任何页面刷新和跳转都会引起变化盲视（Change Blindness），导致用户心流（Flow）被打断。频繁的页面刷新和跳转，就像在看戏时，演员说完一行台词就安排一次谢幕一样。 From 3259497728a63cfbf4814f3dfb3be54f6e8d0694 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 15 Mar 2016 14:21:48 +0800 Subject: [PATCH 84/86] update devDeps --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c25316d627..68c4ee4168 100644 --- a/package.json +++ b/package.json @@ -94,7 +94,7 @@ "eslint-plugin-react": "^4.0.0", "eslint-tinker": "^0.3.1", "extract-text-webpack-plugin": "^1.0.1", - "gh-pages": "^0.9.0", + "gh-pages": "^0.11.0", "history": "^1.17.0", "instantclick": "^3.1.0", "jest-cli": "~0.8.0", From 1e68c97232e51d4efb3db9e00e0417ffe150be6d Mon Sep 17 00:00:00 2001 From: yiminghe Date: Tue, 15 Mar 2016 15:09:26 +0800 Subject: [PATCH 85/86] upgrade tabs --- package.json | 2 +- style/components/tabs.less | 15 +++++++++------ 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index c25316d627..3a0e8b8ffe 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,7 @@ "rc-steps": "~1.4.1", "rc-switch": "~1.3.2", "rc-table": "~3.11.1", - "rc-tabs": "~5.7.0", + "rc-tabs": "~5.8.0", "rc-time-picker": "~1.1.0", "rc-tooltip": "~3.3.1", "rc-tree": "~1.1.0", diff --git a/style/components/tabs.less b/style/components/tabs.less index b4284b2833..f47ce3481d 100644 --- a/style/components/tabs.less +++ b/style/components/tabs.less @@ -3,13 +3,16 @@ @effect-duration: .3s; .@{tab-prefix-cls} { - outline: none; box-sizing: border-box; position: relative; overflow: hidden; .clearfix; color: @text-color; + &-bar { + outline: none; + } + &-ink-bar { z-index: 1; position: absolute; @@ -32,7 +35,7 @@ } } - &-tabs-bar { + &-bar { border-bottom: 1px solid @border-color-base; margin-bottom: 16px; } @@ -292,7 +295,7 @@ width: auto; } - .@{tab-prefix-cls}-tabs-bar { + .@{tab-prefix-cls}-bar { border-bottom: 0; } @@ -329,7 +332,7 @@ } &-vertical&-left { - .@{tab-prefix-cls}-tabs-bar { + .@{tab-prefix-cls}-bar { float: left; border-right: 1px solid @border-color-split; margin-right: -1px; @@ -356,7 +359,7 @@ } &-vertical&-right { - .@{tab-prefix-cls}-tabs-bar { + .@{tab-prefix-cls}-bar { float: right; border-left: 1px solid @border-color-split; margin-left: -1px; @@ -377,7 +380,7 @@ } } - &-bottom &-tabs-bar { + &-bottom &-bar { margin-bottom: 0; margin-top: 16px; } From 8b5e2ce1e043e6a6cb3f8d67559b585ee1dbb436 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 15 Mar 2016 17:22:39 +0800 Subject: [PATCH 86/86] Add API docs --- components/cascader/index.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/cascader/index.md b/components/cascader/index.md index 3d5462ecbc..1857abff10 100644 --- a/components/cascader/index.md +++ b/components/cascader/index.md @@ -36,3 +36,5 @@ | size | 输入框大小，可选 `large` `default` `small` | string | `default` | | disabled | 禁用 | boolean | false | | allowClear | 是否支持清除 | boolean | true | +| expandTrigger | 次级菜单的展开方式，可选 'click' 和 'hover' | string | 'click' | +| changeOnSelect | 当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的演示 | boolean | false |