Skip to content

Commit 12a7c87

Browse files
hi-caicaihi-caicai
committed
update v1.0
1 parent 527277c commit 12a7c87

File tree

9 files changed

+297
-235
lines changed

9 files changed

+297
-235
lines changed

‎.gitignore

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
node_modules
2-
2+
.DS_Store

‎README.md

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,31 @@
11
![](https://t.alipayobjects.com/images/T1yplhXkhiXXXXXXXX.png)
22

3-
### Ant-UX
3+
### [Ant-UX](http://ux.ant.design/)
44

5-
#### 这是一套页面逻辑原型，它可以帮助你快速创建页面之间的逻辑图,了解用户流量
5+
#### 这是一套制作页面逻辑的素材库，当你在产品设计初期，可以用它来绘制页面与页面之间的逻辑图，帮助你了解产品架构，业务流程
66

77
配合工具: OmniGraffle ,Sketch
88

9-
- OmniGraffle 可以用来绘制图表，流程图，组织结构图以及插图，也可以用来组织头脑中思考的信息，组织头脑风暴的结果，绘制心智图，作为样式管理器，或设计网页或PDF文档的原型。
10-
它具有采用拖放的所见即所得界面。所谓的 "Stencils" 一组用于拖放的形状—可以作为 OmniGraffle 的插件使用，用户也可以创建自定义的 Stencils。
11-
- Sketch 是一个矢量设计软件，可以快速投入UI设计当中
9+
- OmniGraffle 可以用来绘制图表，流程图，组织结构图以及插图，也可以用来组织头脑中思考的信息，组织头脑风暴的结果，绘制心智图，作为样式管理器，或设计网页或PDF文档的原型。它具有采用拖放的所见即所得界面。所谓的 "Stencils" 一组用于拖放的形状—可以作为 OmniGraffle 的插件使用，用户也可以创建自定义的 Stencils。
1210

13-
### 使用方式
14-
15-
首先你需要 [下载](http://ux.ant.design) 我们的最新版本控件，然后点击导入到你的OmniGraffle中，这样你就可以在你的项目里调用这套控件，通过简单的拖拽就可以形成一张页面逻辑图
16-
如果不会操作OmniGraffle ，可以看这里的[初级教程](http://beforweb.com/node/202)，非常简单就能上手
11+
- Sketch 是一个矢量设计软件，可以帮助你快速投入UI设计当中
1712

18-
### 演示图
13+
### 使用方式
1914

15+
- 1.获取我们的[最新版本](https://github.com/ant-design/ant-ux/releases)
16+
- 2.点击文件导入到你的 OmniGraffle 中（如果没有 OmniGraffle 请先安装～）
17+
- 3.创建白板，在右侧素材库里调用 Ant-UX
2018

19+
通过简单的拖拽，即可完成一个产品的逻辑图，如果不会操作 OmniGraffle ，可以看这里的 [初级教程](http://beforweb.com/node/202)，非常简单就能上手
2120

2221
### 更新日记
2322

24-
目前版本：v0.6
23+
目前版本：v1.0
24+
25+
- v1.0
26+
+ 增加了两个典型页面
27+
+ 增加一个附加元素
28+
+ 增加 Sketch 版本
2529

2630
- v0.6
2731
- 修改“附加模块”名称，改为“附加元素”
@@ -59,11 +63,12 @@
5963

6064
### 规范
6165

62-
- 初步规范参考控件描述
66+
- 初步规范参考素材描述
6367
- 详细规范待补充
6468

6569
### 历史版本
6670

71+
- v1.0 2016.04.23
6772
- v0.6 2015.11.13
6873
- v0.5 2015.9.17
6974
- v0.4 2015.9.09
@@ -75,4 +80,4 @@
7580

7681
我们不提供复杂页面模版，简单化主要为了解决设计师或工程师快速创建页面逻辑图.
7782
我们希望大家一起能参与到这个控件库的维护和升级，这样能帮助到很多的人。
78-
如果遇到问题 @CaiCai
83+
如果遇到问题 @[CaiCai](https://github.com/hi-caicai)

‎app.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
* Module dependencies
33
*/
44
var express = require('express');
5-
65
var app = express();
76
var options = {
87
dotfiles: 'ignore',

‎gulpfile.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,5 +21,12 @@ gulp.task('js', function() {
2121
gulp.src('views/public/js/*.js')
2222
.pipe(gulp.dest('./public/js/'));
2323
});
24+
gulp.task('watch', function(){
25+
gulp.watch('views/public/css/*.css', ['css']);
26+
gulp.watch('views/public/js/*.js', ['js']);
27+
gulp.watch('./views/*.jade', ['jade']);
28+
// Other watchers
29+
})
2430

2531
gulp.task('site', ['jade','css','js']);
32+

‎index.html

Lines changed: 72 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,47 +2,95 @@
22
<html>
33
<meta charset="utf-8">
44
<head>
5-
<title>Ant-UX</title>
5+
<title>Ant-UX </title>
6+
<meta name="description" content="A Sitemap Template">
7+
<meta name="keywords" content="CaiCai,UI,UX,Dribbble,Ant Design,User flow,">
8+
<meta name="author" content="CaiCai,[email protected]">
69
<link rel="stylesheet" type="text/css" href="public/css/style.css">
710
</head>
811
<body>
912
<div class="main">
10-
<div class="part_1">
11-
<div class="ux">
12-
<div class="logo"><img src="https://t.alipayobjects.com/images/rmsweb/T1MXJiXaNlXXXXXXXX.svg" alt=""></div>
13-
<div class="pic"><img src="https://t.alipayobjects.com/images/rmsweb/T1xFtiXm8mXXXXXXXX.svg" alt=""></div>
13+
<div class="group_one">
14+
<div class="header">
15+
<div class="nav"><a href="https://github.com/ant-design/ant-ux">Github</a><a href="https://github.com/ant-design/ant-ux/releases">Release</a><a href="https://github.com/ant-design/ant-ux/issues">Feedback </a><a href="https://github.com/ant-design/ant-ux/wiki/Ant-UX">Wiki </a></div>
16+
<div class="github">
17+
<iframe src="https://ghbtns.com/github-btn.html?user=ant-design&amp;repo=ant-ux&amp;type=star&amp;count=true" frameborder="0" scrolling="0" width="170px" height="20px"> </iframe>
18+
</div>
1419
</div>
15-
</div>
16-
<div class="part_2">
17-
<div class="download">
18-
<div class="version">
19-
<h2>Ant-UX Beta</h2>
20-
<p>配合工具:<a href="http://downloads2.omnigroup.com/software/MacOSX/10.10/OmniGraffle-6.4.1.dmg">OmniGraffle</a></p>
20+
<div class="group_one_left">
21+
<div class="logo"><img src="https://os.alipayobjects.com/rmsportal/mMkrSOGsJezFCdg.svg"></div>
22+
<div class="description">
23+
<p>We make a sitemap template for ux design. It will be used in OmniGrafffle or Sketch .</p>
2124
</div>
22-
<div class="update"><a href="https://github.com/ant-design/ant-ux/releases" class="btn btn-1 btn-a remove"><span>下载最新版本</span></a></div>
25+
<div class="btn"><a href="https://github.com/ant-design/ant-ux/releases/download/1.0/Ant_UX_OG.zip">OmniGraffle</a></div>
26+
<div class="btn2"><a href="https://github.com/ant-design/ant-ux/releases/download/1.0/Ant_UX_Sketch.zip">Sketch Version</a></div>
2327
</div>
28+
<div class="group_right"><img src="https://os.alipayobjects.com/rmsportal/NlpPBNdvzYdFGMF.svg"></div>
2429
</div>
25-
<div class="part_3">
26-
<div class="instructions">
30+
<div class="group_two">
31+
<div class="cando">
2732
<div class="title">
28-
<h1>如何使用</h1>
29-
<p>下载最新组件后, 导入 OmniGraffle, 通过简单的拖拽, 即可连接页面与页面, 帮你梳理 页面逻辑 <a href="https://github.com/ant-design/ant-ux/wiki/Ant-UX">了解更多</a></p>
30-
<div class="video">
31-
<video id="example_video" controls="" preload="auto" width="960" height="540" poster="https://t.alipayobjects.com/images/rmsweb/T13aViXjxaXXXXXXXX.svg" data-setup="{'example_option':true}" class="video-js vjs-default-skin">
32-
<source src="https://t.alipayobjects.com/images/rmsweb/L1JFJiXbXlXXXXXXXX.mov">
33-
</video>
33+
<h2>What you can do with Ant UX? </h2>
34+
<p>It can improve the efficiency of your work .</p>
35+
</div>
36+
<div class="module">
37+
<div class="user_module"><img src="https://os.alipayobjects.com/rmsportal/kiOTnzaQzUTwNbJ.svg">
38+
<p>User Flow</p>
39+
</div>
40+
<div class="user_module"><img src="https://os.alipayobjects.com/rmsportal/RKbkoWGTkPPjXFS.svg">
41+
<p>Product architecture</p>
42+
</div>
43+
<div class="user_module"><img src="https://os.alipayobjects.com/rmsportal/XmYjEBwcNnDCxjq.svg">
44+
<p>Logic diagram</p>
3445
</div>
3546
</div>
47+
</div>
48+
</div>
49+
<div class="group_two">
50+
<div class="cando_2">
51+
<div class="title">
52+
<h2>How to use it ? </h2>
53+
<p>Use the Ant UX , you must have OmniGraffle or Sketch .</p>
54+
</div>
55+
<div class="window">
56+
<video id="example_video" controls="" preload="auto" width="960" height="540" poster="https://os.alipayobjects.com/rmsportal/rsMrkeBBgzXEeYg.svg" data-setup="{'example_option':true}" class="video-js vjs-default-skin">
57+
<source src="https://os.alipayobjects.com/rmsportal/WNzOmBEAtyRXbjV.mov">
58+
</video>
59+
</div>
60+
</div>
61+
</div>
62+
<div class="group_two">
63+
<div class="cando">
3664
<div class="title">
37-
<h1>教程</h1>
38-
<p>OmniGraffle 是一款很棒的线框图工具, 虽然它不是很完美的做到对交互原型设计的支持, 但是在做页面逻辑这块, 它可算得上是一把手, 如果对 OmniGraffle 不了解, 可以看这里这篇 <a href="http://beforweb.com/node/202">教程</a>, 很容易上手.</p>
65+
<h2>Available platforms </h2>
66+
<p>OmniGraffle , Sketch , Illustrator</p>
67+
</div>
68+
<div class="module">
69+
<div class="user_module_2"><img src="https://os.alipayobjects.com/rmsportal/syLZAuwKbORBnWE.svg">
70+
<p style="color:#D9D9D9;padding-top:15px;">Sketch</p>
71+
</div>
72+
<div class="user_module_2"><img src="https://os.alipayobjects.com/rmsportal/BbsbhocYmJrPkfK.svg">
73+
<p>OmniGraffle</p>
74+
</div>
75+
<div class="user_module_2"><img src="https://os.alipayobjects.com/rmsportal/QKInwlVfFmavoTn.svg">
76+
<p style="color:#D9D9D9;padding-top:15px;">Illustrator</p>
77+
</div>
3978
</div>
79+
</div>
80+
</div>
81+
<div class="group_two">
82+
<div class="cando_3">
4083
<div class="title">
41-
<h1>反馈和吐槽</h1>
42-
<p>如果遇到问题, 欢迎 <a href="https://github.com/hi-caicai">@CaiCai</a>, 或者到我们的 <a href="https://github.com/ant-design/ant-ux/issues">仓库 </a>提需求</p>
84+
<h2>If you have any questions</h2>
85+
</div>
86+
<div class="feed">
87+
<div class="btn"> <a href="https://github.com/ant-design/ant-ux/issues">Seed Feedback</a></div>
4388
</div>
4489
</div>
4590
</div>
91+
<div class="footer">
92+
<div class="footer_nav"><a href="https://www.caicai.me">CaiCai@2016 </a><a href="http://ant.design">Ant Design</a><a href="https://github.com/ant-design/ant-ux">Github</a><a href="https://github.com/ant-design/ant-ux/releases">Release</a><a href="https://github.com/ant-design/ant-ux/issues">Feedback </a><a href="https://github.com/ant-design/ant-ux/wiki/Ant-UX">Wiki </a></div>
93+
</div>
4694
</div>
4795
</body>
4896
</html>

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"private": "true",
55
"main": "app.js",
66
"scripts": {
7-
"start": "node app.js",
7+
"start": "node app.js&gulp watch ",
88
"build": "gulp site"
99
},
1010
"repository": {
@@ -14,6 +14,7 @@
1414
"dependencies": {
1515
"express": "^3.0.0",
1616
"gulp": "^3.9.0",
17+
"gulp-cssmin": "^0.1.7",
1718
"gulp-jade": "^1.1.0",
1819
"gulp-styl": "~1.1.0",
1920
"gulp-watch": "^4.3.5",

‎public/css/style.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)