Merge branch 'new-design-language' of github.com:ant-design/ant-design into new-design-language

This commit is contained in:
jljsj 2016-03-10 18:10:33 +08:00
commit f4c2bb36a8
12 changed files with 94 additions and 16 deletions

View File

@ -78,7 +78,10 @@ import 'antd/lib/index.css'; // or 'antd/style/index.less'
## 谁在使用
- 蚂蚁金服
- 阿里巴巴
- 口碑
- 新美大
- 滴滴
> 如果你的公司和产品使用了 Ant Design欢迎到 [这里](https://github.com/ant-design/ant-design/issues/477) 留言。

View File

@ -8,6 +8,10 @@
正如 Alan Cooper 所言『需要在哪里输出就要允许在哪里输入』。这就是直接操作的原理。eg不要为了编辑内容而打开另一个页面应该直接在上下文中实现编辑。
<br>
---
## 页内编辑
<img class="preview-img" align="right" alt="单击编辑示例" description="状态一:普通的浏览模式,不区分可编辑行和不可编辑行;<br>
@ -37,6 +41,10 @@
更多有关『页内编辑』的模式,可查看[『模式』-『表格』-『交互』](../pattern/table#交互)中的内容。
<br>
---
## 利用拖放
<img class="preview-img" align="right" alt="拖放列表示例" description="状态一:鼠标悬停该行时,出现可移动的『图标』;<br>
@ -59,6 +67,9 @@
拖放多个对象(敬请期待)
<br>
---
## 直接选择(敬请期待)

View File

@ -5,15 +5,7 @@
---
<div style="text-align:center;background:#FBFBFB;margin:40px 0;">
<img align="middle" width="600" src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png">
</div>
Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言。
在中台设计中,我们模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界,将进行体验设计和界面设计人员统称为『设计者』,并为其提供一系列工具和服务来支持他们进行业务创新。
## 特性
使 Ant Design 与众不同的一点是,这是一个同时追求『用户』和『设计者』体验的规范,也让三大特性都以人为本。
<div style="margin-left:-40px;margin-right:-40px;">
<div class="col-8 features">
@ -24,7 +16,7 @@ Ant Design 是一个致力于提升『用户』和『设计者』使用体验的
<div class="col-8 features">
<img src="https://os.alipayobjects.com/rmsportal/iJbUiLYpuPBXUhV.png">
<h5>确定</h5>
<div>通过制定通俗而科学的规则、运用面向对象的方法、使用一致的文档沟通机制,给予研发团队一种高确定性、低熵值的研发状态。</div>
<div>制定通俗而科学的规则、运用面向对象的方法、使用一致的文档沟通机制,给予研发团队一种高确定性、低熵值的研发状态。</div>
</div>
<div class="col-8 features">
<img src="https://os.alipayobjects.com/rmsportal/uSOjjlCRjRIhtIY.png">
@ -80,7 +72,7 @@ Ant Design 是一个致力于提升『用户』和『设计者』使用体验的
探索设计规律,并将其抽象成『对象』,增强界面设计的灵活性和可维护性,同时也减少『设计者』的主观干扰,从而降低系统的不确定性。
### 通俗科学的规
### 通俗而科学的设计原
详见[『十大原则』](./principle)。

View File

@ -5,16 +5,21 @@
---
Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言。
<div style="text-align:center;background:#FBFBFB;margin:40px 0;">
<img align="middle" width="600" src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png">
</div>
Ant Design 源自蚂蚁金服体验技术部的中台产品开发。在中台产品设计中,通常有很多类似的页面和控件,不同的产品会出现不同的规范和实现,给设计师和工程师带来很多困扰和重复建设,降低企业中台的整体研发效率。我们的设计师和前端工程师经过大量的项目实践和总结,希望能沉淀出一套企业级的交互视觉规范,统一中台项目的前端 UI 设计,屏蔽各种不必要的设计差异和前端实现成本,解放设计和前端开发资源。
在中台产品的研发过程中,会出现不同的设计规范和实现方式,但其中往往存在很多类似的页面和组件,给设计师和工程师带来很多困扰和重复建设,大大降低了产品的研发效率。我们(蚂蚁金服体验技术部)经过大量的项目实践和总结,沉淀出一个中台设计语言 Ant Design。旨在统一中台项目的前端 UI 设计,屏蔽不必要的设计差异和实现成本,解放设计和前端的研发资源。
整套设计规范还在持续整理和完善中
Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言,模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界,将进行 UE 设计和 UI 设计人员统称为『设计者』,利用统一的规范进行设计赋能,全面提高中台产品体验和研发效率
## 谁在使用
- 蚂蚁金服
- 阿里巴巴
- 口碑
- 新美大
- 滴滴
> 如果你的公司和产品使用了 Ant Design欢迎到 [这里](https://github.com/ant-design/ant-design/issues/477) 留言。

View File

@ -16,6 +16,10 @@
>可供性Affordance也被翻译成『示能』由 James J. Gibson 提出,定义为物品的特性与决定物品用途的主体能力之间的关系;其中部分可感知(此部分定义为 Perceived Affordance部分不可感知。——摘自《设计心理学 1 》
<br>
---
## 静态邀请
指通过可视化技术在页面上提供引导交互的邀请。
@ -42,6 +46,10 @@
>注:保持漫游过程简单,让用户容易退出和重新启动;保持内容简明扼要,与功能密切相关。
<br>
---
## 动态邀请
指以响应用户在特定位置执行特定操作的方式,提供特定的邀请。

View File

@ -10,27 +10,46 @@
> 注:费茨法则:到达目标的时间是到达目标的距离与目标大小的函数,具体:<img src="https://os.alipayobjects.com/rmsportal/wAcbQmeqTWDqsnu.png" width="150" />。其中1.设备当前位置和目标位置的距离D2.目标的大小W。距离越长所用时间越长目标越大所用时间越短。
<br>
---
## 实时可见工具
<img class="preview-img" align="right" alt="实时可见工具示例--摘自知乎" description="状态一:在文案中出现一个相对明显的点击区域;<br>
状态二:鼠标悬停时,鼠标『指针』变为『手型』,底色发生变化,邀请用户点击。<br>
状态三:鼠标点击后,和未点击前有明显的区分。" src="https://os.alipayobjects.com/rmsportal/LjiLNKRAYqrsfLa.png">
如果某个操作非常重要,就应该把它放在界面中,并实时可见。
<br>
---
## 悬停即现工具
<img class="preview-img" align="right" alt="悬停即现工具示例" description="鼠标悬停时,出现操作项。" src="https://os.alipayobjects.com/rmsportal/lmwWqVvUBsaOsyY.png">
如果某个操作不那么重要,或者使用『实时可见工具』过于啰嗦会影响用户阅读时,可以在悬停在该对象上时展示操作项。
<br>
---
## 开关显示工具
<img class="preview-img" align="right" alt="开关显示工具示例" description="用户点击『修改』后Table 中『文本』变成『输入框』,开启编辑功能。" src="https://os.alipayobjects.com/rmsportal/bgTbVqVWJVeIere.png">
如果某些操作只需要在特定模式时显示,可以通过开关来实现。
<br>
---
## 交互中的工具
<img class="preview-img" align="right" alt="推荐示例" description="鼠标悬停时,出现 Tooltips 进行提示,用户点击内容直接复制。" src="https://os.alipayobjects.com/rmsportal/OyrIdrsFqBUiZGv.png" good>
@ -44,6 +63,10 @@
此处也可以运用[『提供邀请』](../spec/invitation) 相关的知识点。
<br>
---
## 可视区域 ≠ 可点击区域
<img class="preview-img" align="right" alt="文字链热区示例" description="当悬浮在 ID 所在的文字链单元格时,鼠标『指针』随即变为『手型』,单击即可跳转。" src="https://os.alipayobjects.com/rmsportal/AOioZkUAdyFamcR.png">

View File

@ -2,6 +2,7 @@
- category: 十大原则
- order: 0
- subtitle: Introduction
---

View File

@ -6,7 +6,7 @@
---
『物理位置的接近意味着存在关联』,也就是说如果信息之间关联性越高,它们之间的距离就应该越接近,也越像一个视觉单元;反之,则它们的距离就应该越远,也越像多个视觉单元。亲密性的根本目的是实现**组织性**,让用户对页面结构和信息层次一目了然。
如果信息之间关联性越高,它们之间的距离就应该越接近,也越像一个视觉单元;反之,则它们的距离就应该越远,也越像多个视觉单元。亲密性的根本目的是实现**组织性**,让用户对页面结构和信息层次一目了然。
## 纵向间距关系

View File

@ -14,11 +14,15 @@
> 牛顿第三定律:当两个物体互相作用时,彼此施加于对方的力,其大小相等、方向相反。——摘自《维基百科》
<br>
---
## 查询模式
自动完成:用户输入时,下拉列表会随着输入的关键词显示匹配项。
<img class="preview-img" align="right" alt="确定类目示例" description="用户所查询的关键词,只会在『问题广场』、『报告广场』、『用户声音』这 3 种类目中出现。" src="https://os.alipayobjects.com/rmsportal/aqLuHYzLAXiMVbo.png">
<img class="preview-img" align="right" alt="确定类目示例" description="用户所查询的关键词,只会在『话题』、『问题』、『文章』这 3 种类目中出现。" src="https://os.alipayobjects.com/rmsportal/aqLuHYzLAXiMVbo.png">
<img class="preview-img" align="right" alt="不确定类目示例" description="用户所查询的关键词,其所属的类目数量不确定,可能 4 个,可能 5 个,可能更多。" src="https://os.alipayobjects.com/rmsportal/XFfjaNslhLTKPBF.png">
@ -35,7 +39,9 @@
微调搜索:随着用户调整搜索条件,实时调整搜索结构。具体可见:[『模式』-『高级搜索』](../pattern/advanced-search)。
<br>
---
## 反馈模式
<img class="preview-img" align="right" alt="实时预览示例" description="根据用户的输入,提供关于密码强度和有效性的实时反馈。

View File

@ -12,6 +12,10 @@
>心流Flow也有别名以化境 (Zone) 表示,亦有人翻译为神驰状态,定义是一种将个人精神力完全投注在某种活动上的感觉;心流产生时同时会有高度的兴奋及充实感。——摘自《维基百科》
<br>
---
## 覆盖层
<img class="preview-img" align="right" alt="推荐示例" description="用户点击『删除』后,直接操作;并出现 Message 告知用户操作成功,并提供用户『撤消』的按钮;用户进行下一个操作或者 1 分钟内不进行任何操作, Message 消失,用户无法再『撤消』。" src="https://os.alipayobjects.com/rmsportal/kOTEwKQBwgjkWEt.png" good>
@ -36,6 +40,10 @@
输入覆盖层:在覆盖层上,让用户直接进行少量字段的输入。
<br>
---
## 嵌入层
<img class="preview-img" align="right" alt="列表嵌入层示例" src="https://os.alipayobjects.com/rmsportal/gfxhzaJdPuNoClu.png">
@ -53,6 +61,10 @@
标签页:将多个平级的信息进行整理和分类了,一次只显示一组信息。
<br>
---
## 虚拟页面
在交互过程中,『覆盖层』可以在当前页面上方显示附加内容和交互链接;『嵌入层』可以在页面内部实现同样效果;而『虚拟页面』不局限机械时代的『页面』,可以利用信息时代的特点构建一种新型『页面』。
@ -65,6 +77,9 @@
伸缩式用户界面(敬请期待)
<br>
---
## 流程处理

View File

@ -20,6 +20,11 @@ video{
}
````
<br>
---
## 在视图变化时保持上下文
<div class="preview-image-boxes cleafix">
@ -69,6 +74,10 @@ video{
视图定位:在视图切换时,保持定位。
<br>
---
## 解释刚刚发生了什么
<div class="preview-image-boxes cleafix">
<span>
@ -109,6 +118,7 @@ video{
对象更改:在列表/表格中,更改了一个对象。
<br>
<div class="preview-image-boxes cleafix">
<span>
<div class="preview-image-box">
@ -122,6 +132,9 @@ video{
弹出框唤起:从页面的某个按钮唤起弹出框时, 弹框从按钮处唤起, 可提示用户弹框与按钮的关第;。
---
## 改善感知性能
当无法有效提升『实际性能』时,可以考虑适当转移用户的注意力,来缩短某项操作的感知时间,改善感知性能。

View File

@ -58,6 +58,7 @@
line-height: 12px;
top: 18px;
right: 18px;
z-index: 1;
&:before {
content: "\e62d";