From 33f2863e68f1e4bd21060ea6f8eb09dfd9a37d35 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 12 Jan 2016 15:51:44 +0800 Subject: [PATCH] update new design spec style --- components/icon/index.md | 1 - docs/pattern/advanced-search.md | 19 ++++++----- docs/pattern/complex-table.md | 16 +++++----- docs/pattern/form.md | 38 +++++++++++----------- docs/pattern/index.md | 2 +- docs/pattern/list.md | 22 ++++++------- docs/pattern/navigation.md | 21 +++++++------ docs/pattern/table.md | 36 ++++++++++----------- docs/practice/cases.md | 56 ++++++++++++++++++++++++++++++--- docs/react/getting-started.md | 2 +- docs/react/introduce.md | 2 +- docs/resource/download.md | 23 ++++++++++---- docs/resource/reference.md | 18 ++++++++--- scripts/demo.js | 6 ++-- scripts/home.js | 4 +-- site/static/style.css | 33 ++++++++++++++----- site/templates/layout.html | 8 ++--- 17 files changed, 195 insertions(+), 112 deletions(-) diff --git a/components/icon/index.md b/components/icon/index.md index 9188c162e..288a253c6 100644 --- a/components/icon/index.md +++ b/components/icon/index.md @@ -50,7 +50,6 @@ ul.anticons-list { margin: 20px 0; list-style: none; - width: 120%; overflow: hidden; } ul.anticons-list li { diff --git a/docs/pattern/advanced-search.md b/docs/pattern/advanced-search.md index 86f7c049b..16a33ec7d 100644 --- a/docs/pattern/advanced-search.md +++ b/docs/pattern/advanced-search.md @@ -11,33 +11,36 @@ ### 交互 - +交互示例 常规型常和表格搭配使用，适合在搜索条件多以及搜索值个数不确定的场景中。 -“高级搜索”功能一般开放给中间用户／专家用户使用，一般通过点击“高级搜索”触发；如果非常高频使用，可以默认展开“高级搜索”。 +『高级搜索』功能一般开放给中间用户／专家用户使用，一般通过点击高级搜索』触发；如果非常高频使用，可以默认展开『高级搜索』。
- +交互示例 -当已经输入了值的“高级搜索”被隐藏时，需要展示检索条件和值。 +当已经输入了值的『高级搜索』被隐藏时，需要展示检索条件和值。 ### 排列规则 - +排列示例 搜索条件的排布顺序需要和表格中的标题顺序，尽可能保持一致；如果非常高频使用的搜索条件，可以放在最前面。 ### 规格 - +规格示例 - +规格示例 - 横向排版 + 在一行不要放置 3 列以上的输入框；标签和输入框应该落在栅格上。 + - 纵向排版 + 使用 `16px` 作为间距。 @@ -45,7 +48,7 @@ ### 交互 - +交互示例 字段型一般会出现在主搜索框底部，适合搜索条件和值都比较少的场景中。 diff --git a/docs/pattern/complex-table.md b/docs/pattern/complex-table.md index 8b71d2633..2c4e103a7 100644 --- a/docs/pattern/complex-table.md +++ b/docs/pattern/complex-table.md @@ -1,4 +1,4 @@ -# 复杂数据表格 +# 表格：复杂数据 - category: 5 - order: 5 @@ -11,42 +11,42 @@ ### 多列数据 - +多列数据示例 通过按钮，可实现更多列数据的加载以及左右切换。
- +自定义列示例 提供用户自定义列的功能，方便用户查看需要的列。
- +横向滚动示例 固定表头列，通过横向滚动条来查看剩余内容。 ### 带图标的表格 - +带图标表格示例 通过图标强化信息的传递，适用在表达数据变化趋势。 ### 带图表的表格 - +带图表表格示例 通过图表来强化信息的传递，适用在表达数据变化趋势。 ### 二维表格 - +二维表格示例 横向和纵向各一个标题来展现数据。 ### 小表格 - +小表格示例 适用在卡片、弹出框等空间较小的场景中。 diff --git a/docs/pattern/form.md b/docs/pattern/form.md index a0eece9a0..ac865a1b5 100644 --- a/docs/pattern/form.md +++ b/docs/pattern/form.md @@ -25,14 +25,14 @@ ## 内容 - +结构示例 通常表单会有四个部分组成。 1. 标签 2. 输入框 -3. 动作 -4. 校验反馈 +3. 校验反馈 +4. 动作 > 注：`*` 表明该项为必填项。 @@ -70,20 +70,20 @@
-不禁用示例 +不禁用示例 当输入框非常多时（尤其是输入项中交叉了必填项和非必填项），整个反馈链路冗长又复杂，禁用规则难以被识别，容易引起困惑。 ### 结构化的格式 -输入格式化的数据 +结构化的格式示例 用户对输入的内容很熟悉，且系统不希望接受任何偏离期望的格式。 ### 输入提示 & 输入提醒 -输入提示 -输入提醒 +输入提示示例 +输入提醒示例 输入提示：不希望在标签上放置太多文字进行解释，同时只有标签又会引起误解。 @@ -91,16 +91,16 @@ ### 密码加强计 -密码强度 +密码强度示例 提供关于密码强度和有效性的及时反馈，适用在注册页面时的密码输入框。 ### 校验 -输入时的实时校验 -输入框失去焦点后的校验 + + -点击『提交』后，系统将处理结果直接在页面上进行反馈（统计错误数量和标记错误内容）。 + 通过不同的『校验』规则和形式进行反馈，避免用户在点击提交后才刚刚开始『校验』，让用户提前纠正错误。 @@ -121,8 +121,8 @@ ### 输入框宽度 -正确示例 -错误示例 +正确示例 +错误示例 当内容可预知，可以根据内容长短进行定义其落在多少个栅格上。 @@ -130,23 +130,21 @@ ### 对齐方式 -间隔示例 - 无论左对齐、右对齐还是顶部对齐，都有其优缺点和应用场景，所以正确的解决方案取决于具体目标和制约因素，诸如：希望用户加快或者降低填写速度（有时设计者希望用户深思熟虑每个输入）、屏幕显示的限制、本地化考虑等多种因素。
-右对齐（推荐） +右对齐（推荐） 右对齐（推荐）。 -- 优点：减少垂直空间。 +- 优点：节约垂直空间。 - 缺点：降低可读性；标签长度和输入框弹性小。 - 场景：既要减少垂直空间，又要加快填写速度。
-顶部对齐 +顶部对齐 顶部对齐。 @@ -156,10 +154,10 @@
-左对齐 +左对齐 左对齐。 -- 优点：容易浏览；减少垂直空间。 +- 优点：文字开头按阅读视线对齐，方便阅读；节约垂直空间。 - 缺点：填写速度慢；标签长度和输入框弹性小。 - 场景：希望用户放慢速度，仔细思考表单中的每个输入框。 diff --git a/docs/pattern/index.md b/docs/pattern/index.md index 35a6a74c7..4f064c76e 100644 --- a/docs/pattern/index.md +++ b/docs/pattern/index.md @@ -6,4 +6,4 @@ --- -占位。 +敬请期待。 diff --git a/docs/pattern/list.md b/docs/pattern/list.md index 216a703ce..068e32bf2 100644 --- a/docs/pattern/list.md +++ b/docs/pattern/list.md @@ -17,14 +17,10 @@ ### 显示详情信息 -气泡显示示例 +气泡显示示例 气泡显示：用户鼠标点击／悬停某个链接或内容时，在悬浮层上显示该条列表项少量的详情信息。 -使用“点击”触发时，应当保证激活／禁用的对称性，即在哪里打开，就在哪里关闭；另外。也支持用户点击空白区域关闭。 - -使用“悬停”触发时，移入时设计约 0.5 秒的延时，然后激活详情气泡；移出时，立即关闭详情气泡。 -
列表嵌入示例1 @@ -37,43 +33,43 @@
- +弹出层显示示例 弹出层显示：用户通过点击，在弹出框中查看该列表项的详情信息，但是当前列表项的上下文关系会被打断。
- +双面板选择器示例 双面板选择器：用户通过点击，在列表的一侧（一般为右侧）查看该列表项大量的详情信息。
- +单窗口深入示例 单窗口深入：用户通过点击，在当前页查看大量的详情信息。此模式打破了整个列表项的上下文关系，适用在详情信息之间完全无关，或者屏幕空间实在狭小（eg：移动应用），又或者列表和内容可能非常多的应用场景中。 ### 显示更多文本 - +宽行示例 宽行：使某些列表项可以扩展为多行文本行来显示足够的文本内容。
- +对等网格示例 对等网格：以网格或者矩阵的方式排列内容元素，其中每个元素都有相仿的视觉重量。 ### 显示图片 - +走马灯示例 走马灯：以一维的形式来显示图片，可用户主动触发或者系统自动播放。
- +缩略图网格示例 缩略图网格：以二维的形式来展现图片/Icon，具有强烈的视觉效果，可以吸引用户注意。 @@ -85,7 +81,7 @@
- + 无限加载：当用户加载到第一段内容的最下方，通过监听滚轮事件或者用户点击按钮，继续加载下一段内容。 diff --git a/docs/pattern/navigation.md b/docs/pattern/navigation.md index 5d663e96c..83a41c420 100644 --- a/docs/pattern/navigation.md +++ b/docs/pattern/navigation.md @@ -44,7 +44,7 @@ --- - +结构示例 导航的结构由以下几部分组成。 @@ -53,8 +53,7 @@ 3. 登陆工具 4. 面包屑（可选） -> 注： -> 1. 尽可能不使用面包屑，尤其是当前页面的导航能清晰的告诉用户他在哪里时； +> 1. 尽可能不使用面包屑，尤其是当前页面的导航能清晰的告诉用户他在哪里时。 > 2. 面包屑可以分为这几类： > - 路径型：是一个动态显示用户到达页面经过的途径。 > - 位置型：位置型是固定的，显示了页面在网站结构中的位置。 @@ -64,7 +63,9 @@ 一级类目 -多级类目展开 +二级类目 + +三级类目及以上 我们定义了不同类目层级所对应的导航样式。 @@ -73,19 +74,19 @@ --- -顶部导航结构 +结构示例 结构如右图所示： -1. 产品 Logo 和名称。 -2. 业务类目。 -3. 登陆工具。 -4. 面包屑（可选）。 +1. 产品 Logo 和名称 +2. 业务类目 +3. 登陆工具 +4. 面包屑（可选）
二级类目 -四级类目 +三级类目及以上 不同类目层级。 diff --git a/docs/pattern/table.md b/docs/pattern/table.md index 56c390601..3af1d5a08 100644 --- a/docs/pattern/table.md +++ b/docs/pattern/table.md @@ -9,21 +9,21 @@ ## 内容 - +结构示例 通常表格的组成元素以及相关元素会有，这几部分组成。 1. 按钮组 2. 搜索条件 -3. 筛选 -4. 排序 +3. 排序 +4. 筛选 5. 状态点 6. 单行操作 7. 分页器／无限加载（可选） ### 筛选 - +筛选示例 当该列选项有限，用户又希望只查看一个或者多个值时，可考虑使用。 @@ -35,7 +35,7 @@ ### 更多操作 -依次分别为：完整内容、暂时不可用、没有该权限。 +更多操作示例 该项暂时不可用时，直接灰化该操作；用户没有该权限时，直接隐藏该操作。 @@ -43,10 +43,10 @@ 名称跳转示例 -把ID、名称等唯一性的表格项处理成文字链，点击后跳转至详情。 +把 ID、名称等唯一性的表格项处理成文字链，点击后跳转至详情。 - 优点：节省空间； -- 缺点：可发现性较低；点击区域受到内容限制，可能出现不易点击的情况 +- 缺点：可发现性较低；点击区域受到内容限制，可能出现不易点击的情况。
@@ -69,11 +69,11 @@ ### 全选数据 - +状态一 - +点击 Table 顶部的复选框，出现『Alert』 - +点击『选择全部』 当使用了分页器，又想实现全选数据的功能，可以结合『Alert』来实现。 @@ -93,33 +93,33 @@ ### 固定按钮组 -顶部固定按钮 +顶部固定示例 -底部固定按钮 +底部固定示例 -用在表格行数很多时（一般多于20行），又想对表格数据进行频繁的操作时，尤其适用在无限加载的表格中。 +用在表格行数很多时（一般多于 20 行），又想对表格数据进行频繁的操作时，尤其适用在无限加载的表格中。 ### 某一项内容过长 - +气泡显示示例 某一项内容过长／不确定长度，既不希望用户在列表和详情之间来回跳转，又不希望不确定的数据撑爆表格时。 ### 模块编辑 - +模块编辑示例 适用在易读性高于易编辑性时；适用在有一定数量的项需要编辑时。 ### 直接编辑 - +直接编辑示例 适用在易编辑性高于易读性时。 ### 悬浮层编辑 - +悬浮层编辑示例 悬浮层会遮挡部分页面，适用在上下文对编辑任务不那么重要时。 @@ -149,7 +149,7 @@ ### 对齐方式 - +对齐示例 数值右对齐（带小数则按小数点对齐），其余左对齐。 diff --git a/docs/practice/cases.md b/docs/practice/cases.md index bdfe7cc79..bdb1086f6 100644 --- a/docs/practice/cases.md +++ b/docs/practice/cases.md @@ -7,7 +7,7 @@ Ant Design 是面向中后台的 UI 设计语言。 -从 2015 年 4 月起，Ant Design 在蚂蚁金服中后台产品线迅速推广，对接多条业务线，覆盖系统 40 个以上。定位于中后台业务的 Ant Design 兼顾专业和非专业的设计人员，具有学习成本低、上手速度快、实现效果好等特点，并且提供从设计到前端实现的全链路生态，可以大大提升设计和开发的效率。 +从 2015 年 4 月起，Ant Design 在蚂蚁金服中后台产品线迅速推广，对接多条业务线，覆盖系统 40 个以上。定位于中后台业务的 Ant Design 兼顾专业和非专业的设计人员，具有学习成本低、上手速度快、实现效果好等特点，并且提供从界面设计到前端开发的全链路生态，可以大大提升设计和开发的效率。 ## 最佳实践 @@ -19,7 +19,7 @@ Ant Design 是面向中后台的 UI 设计语言。 -是面向金融机构深度定制的行业云计算服务；助力金融机构向新金融转型升级，推动平台、数据和技术方面的能力全面对外开放。 +金融云是面向金融机构深度定制的行业云计算服务；助力金融机构向新金融转型升级，推动平台、数据和技术方面的能力全面对外开放。 立即访问 @@ -31,7 +31,9 @@ Ant Design 是面向中后台的 UI 设计语言。 -OceanBase是 一款真正意义上的云端分布式关系型数据库，而 OceanBase Cloud Platform（云平台）是以 OceanBase 数据库为基础的云服务，可以帮助用户快速创建、使用 OB 服务。 +OceanBase 是一款真正意义上的云端分布式关系型数据库，而 OceanBase Cloud Platform（云平台）是以 OceanBase 数据库为基础的云服务，可以帮助用户快速创建、使用 OB 服务。 + +立即访问 --- @@ -43,7 +45,9 @@ OceanBase是 一款真正意义上的云端分布式关系型数据库，而 Oce -体验平台是将用户与公司所有的接触点包括来电咨询／微博等渠道数据，通过数据挖掘和体验同学运营的方式推送给公司内部的业务团队／产品经理，推动体验问题解决，实现良性运转流。 +体验平台是收集用户与公司所有的接触点（包括来电咨询／微博等渠道）的数据，通过数据挖掘和体验同学运营的方式推送给公司内部的业务团队／产品经理，并推动体验问题解决，从而实现良性运转流。 + +立即访问 --- @@ -53,7 +57,9 @@ OceanBase是 一款真正意义上的云端分布式关系型数据库，而 Oce -AntV 是把这几年来数据图形组在探索数据可视化过程中有价值的东西沉淀、总结出来，并用分享给所有需要数据可视理论的人。 +AntV 将数据图形小组近几年在探索数据可视化过程中取得的成果进行总结和沉淀，并分享给所有需要数据可视理论的人。 + +立即访问 + + diff --git a/docs/react/getting-started.md b/docs/react/getting-started.md index 5066c080a..cb91b7e4e 100644 --- a/docs/react/getting-started.md +++ b/docs/react/getting-started.md @@ -9,7 +9,7 @@ Ant Design React 致力于提供给程序员**愉悦**的开发体验。 ## 第一个例子 -最简单的试用方式参照以下 JSFiddle 演示, 也推荐 Fork 本例来进行 `Bug Report`, 注意不要在实际项目中这样使用。 +最简单的试用方式参照以下 JSFiddle 演示，也推荐 Fork 本例来进行 `Bug Report`，注意不要在实际项目中这样使用。 - [antd JSFiddle](http://jsfiddle.net/0dso5y0x/) diff --git a/docs/react/introduce.md b/docs/react/introduce.md index 82aacb497..8e7dcbfc3 100644 --- a/docs/react/introduce.md +++ b/docs/react/introduce.md @@ -27,7 +27,7 @@ ## 特性 -- Designed as Ant Design, 提炼和服务企业级中后台产品的交互语言和视觉风格。 +- Designed as Ant Design，提炼和服务企业级中后台产品的交互语言和视觉风格。 - [React Component](http://react-component.github.io/badgeboard/) 上精心封装的高质量 UI 库。 - 基于 npm + webpack + babel 的工作流，支持 ES2015。 diff --git a/docs/resource/download.md b/docs/resource/download.md index 600de1fc7..2f89c6047 100644 --- a/docs/resource/download.md +++ b/docs/resource/download.md @@ -8,7 +8,7 @@ 这里提供 Ant Design 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。 - + Axure Components 一套强大的 Ant Design 的 Axure 部件库 @@ -22,7 +22,7 @@ - + Axure Box 强大的 Ant Design 组件拼装方式 @@ -38,16 +38,19 @@