From abf215a982786f374fcfaa8719cfad7c15c4972d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 26 Dec 2019 15:27:52 +0800 Subject: [PATCH] docs: Update 4.0 site (#20290) * init recommend block * init design pages * home frames * add background banner * hello, Hitu makes the animation * add media query * add images * update types * add declare * preload support * update ignore * additional ignore site Home lint * update ignore * add hover effect * adjust alt of bannber * adjust lang & card shadow * fix typo * adjust desc * hitu in english * article add link * Certainty is hitu * Meaning Hitu * Growth with Hitu * Natural Hitu * slow down of Natural * adjust speed of icons * New Meaning animation * adjust animation duration * update card link * update link * values doc * replace images * faster Growth * update values * fix lint * all slow down * adjust padding * update icons * adjust margin * update images * adjust montion * adjust by designer * update pages * update design prod * update articles * update site style * update doc * update images * update style * lint fix * adjust liner color * github text color update * adjust margin of title * mobile design * update design sub card * update style * less lint * update images * design card auto height * update img * update logo transition * adjust card style * adjust style to fix 184 * adjust nav style * category it * slow down of logo * update style * hide video link * hitu article * use img of hitu * update docs * style lint * update Hitu layout doc * update images * speed up logo * update link * clean up * clean up * update doc * adjust doc * update images --- .eslintignore | 1 + .gitignore | 6 +- components/spin/index.en-US.md | 2 +- .../table/__tests__/Table.filter.test.js | 25 +- docs/spec/alignment.en-US.md | 3 +- docs/spec/alignment.zh-CN.md | 3 +- docs/spec/colors.en-US.md | 2 +- docs/spec/colors.zh-CN.md | 2 +- docs/spec/contrast.en-US.md | 3 +- docs/spec/contrast.zh-CN.md | 3 +- docs/spec/copywriting.md | 7 +- docs/spec/direct.en-US.md | 3 +- docs/spec/direct.zh-CN.md | 3 +- docs/spec/download.en-US.md | 18 +- docs/spec/download.zh-CN.md | 18 +- docs/spec/feedback.en-US.md | 3 +- docs/spec/feedback.zh-CN.md | 3 +- docs/spec/font.en-US.md | 2 +- docs/spec/font.zh-CN.md | 2 +- docs/spec/icon.en-US.md | 2 +- docs/spec/icon.zh-CN.md | 2 +- docs/spec/illustration.en-US.md | 6 + docs/spec/illustration.zh-CN.md | 106 ++++ docs/spec/introduce.en-US.md | 18 +- docs/spec/introduce.zh-CN.md | 13 +- docs/spec/invitation.en-US.md | 3 +- docs/spec/invitation.zh-CN.md | 3 +- docs/spec/layout.en-US.md | 2 +- docs/spec/layout.zh-CN.md | 2 +- docs/spec/lightweight.en-US.md | 3 +- docs/spec/lightweight.zh-CN.md | 3 +- docs/spec/motion.en-US.md | 2 +- docs/spec/motion.zh-CN.md | 2 +- docs/spec/navigation.en-US.md | 3 +- docs/spec/navigation.zh-CN.md | 3 +- docs/spec/overview.en-US.md | 2 +- docs/spec/overview.zh-CN.md | 2 +- docs/spec/proximity.en-US.md | 3 +- docs/spec/proximity.zh-CN.md | 3 +- docs/spec/reaction.en-US.md | 3 +- docs/spec/reaction.zh-CN.md | 3 +- docs/spec/repetition.en-US.md | 3 +- docs/spec/repetition.zh-CN.md | 3 +- docs/spec/stay.en-US.md | 3 +- docs/spec/stay.zh-CN.md | 3 +- docs/spec/transition.en-US.md | 3 +- docs/spec/transition.zh-CN.md | 3 +- docs/spec/values.en-US.md | 54 +- docs/spec/values.zh-CN.md | 50 +- docs/spec/visual.en-US.md | 2 +- docs/spec/visual.zh-CN.md | 6 +- package.json | 1 + site/bisheng.config.js | 17 +- site/theme/en-US.js | 52 +- site/theme/static/common.less | 16 +- site/theme/static/header.less | 68 +++ site/theme/static/home.less | 470 ------------------ site/theme/static/preview-img.less | 1 + site/theme/template/Content/MainContent.jsx | 13 +- site/theme/template/Home/Banner.jsx | 133 ----- .../template/Home/Banner/Background.less | 35 ++ .../theme/template/Home/Banner/Background.tsx | 186 +++++++ site/theme/template/Home/Banner/Logo.less | 43 ++ site/theme/template/Home/Banner/Logo.tsx | 114 +++++ site/theme/template/Home/Banner/index.less | 90 ++++ site/theme/template/Home/Banner/index.tsx | 49 ++ site/theme/template/Home/BannerImage.jsx | 257 ---------- .../template/Home/DesignPage/Certainty.tsx | 61 +++ .../theme/template/Home/DesignPage/Growth.tsx | 101 ++++ .../Home/DesignPage/InteractiveIcon.tsx | 45 ++ .../template/Home/DesignPage/Meaningful.tsx | 86 ++++ .../template/Home/DesignPage/Natural.tsx | 124 +++++ .../theme/template/Home/DesignPage/index.less | 175 +++++++ site/theme/template/Home/DesignPage/index.tsx | 284 +++++++++++ site/theme/template/Home/MorePage.less | 64 +++ site/theme/template/Home/MorePage.tsx | 82 +++ site/theme/template/Home/Page1.jsx | 321 ------------ site/theme/template/Home/Page2.jsx | 14 +- site/theme/template/Home/RecommendPage.less | 104 ++++ site/theme/template/Home/RecommendPage.tsx | 94 ++++ site/theme/template/Home/index.jsx | 85 ---- site/theme/template/Home/index.less | 42 ++ site/theme/template/Home/index.tsx | 78 +++ site/theme/template/Home/util.jsx | 58 --- site/theme/template/Home/util.tsx | 15 + site/theme/template/Layout/Footer.d.ts | 4 + site/theme/template/Layout/Footer.jsx | 51 +- site/theme/template/Layout/Header.jsx | 33 +- site/theme/template/utils.d.ts | 12 + site/theme/template/utils.jsx | 62 ++- site/theme/zh-CN.js | 50 +- typings/custom-typings.d.ts | 2 + 92 files changed, 2487 insertions(+), 1533 deletions(-) create mode 100644 docs/spec/illustration.en-US.md create mode 100644 docs/spec/illustration.zh-CN.md delete mode 100644 site/theme/template/Home/Banner.jsx create mode 100644 site/theme/template/Home/Banner/Background.less create mode 100644 site/theme/template/Home/Banner/Background.tsx create mode 100644 site/theme/template/Home/Banner/Logo.less create mode 100644 site/theme/template/Home/Banner/Logo.tsx create mode 100644 site/theme/template/Home/Banner/index.less create mode 100644 site/theme/template/Home/Banner/index.tsx delete mode 100644 site/theme/template/Home/BannerImage.jsx create mode 100644 site/theme/template/Home/DesignPage/Certainty.tsx create mode 100644 site/theme/template/Home/DesignPage/Growth.tsx create mode 100644 site/theme/template/Home/DesignPage/InteractiveIcon.tsx create mode 100644 site/theme/template/Home/DesignPage/Meaningful.tsx create mode 100644 site/theme/template/Home/DesignPage/Natural.tsx create mode 100644 site/theme/template/Home/DesignPage/index.less create mode 100644 site/theme/template/Home/DesignPage/index.tsx create mode 100644 site/theme/template/Home/MorePage.less create mode 100644 site/theme/template/Home/MorePage.tsx delete mode 100644 site/theme/template/Home/Page1.jsx create mode 100644 site/theme/template/Home/RecommendPage.less create mode 100644 site/theme/template/Home/RecommendPage.tsx delete mode 100644 site/theme/template/Home/index.jsx create mode 100644 site/theme/template/Home/index.less create mode 100644 site/theme/template/Home/index.tsx delete mode 100644 site/theme/template/Home/util.jsx create mode 100644 site/theme/template/Home/util.tsx create mode 100644 site/theme/template/Layout/Footer.d.ts create mode 100644 site/theme/template/utils.d.ts diff --git a/.eslintignore b/.eslintignore index 5b7a025679..0290b8510e 100644 --- a/.eslintignore +++ b/.eslintignore @@ -6,6 +6,7 @@ components/**/*.jsx # Docs templates site/theme/template/IconDisplay/*.js site/theme/template/IconDisplay/*.jsx +site/theme/template/Home/**/*.jsx typings es/**/* lib/**/* diff --git a/.gitignore b/.gitignore index 2213de4801..d9c5d644af 100644 --- a/.gitignore +++ b/.gitignore @@ -38,8 +38,12 @@ components/**/*.jsx !components/**/__tests__/**/*.js !components/**/__tests__/**/*.js.snap /.history +*.tmp + # Docs templates site/theme/template/IconDisplay/*.js site/theme/template/IconDisplay/*.jsx site/theme/template/IconDisplay/fields.js -*.tmp + +site/theme/template/Home/**/*.jsx + diff --git a/components/spin/index.en-US.md b/components/spin/index.en-US.md index c500f16b80..0fc83d632b 100644 --- a/components/spin/index.en-US.md +++ b/components/spin/index.en-US.md @@ -25,4 +25,4 @@ When part of the page is waiting for asynchronous data or during a rendering pro - `Spin.setDefaultIndicator(indicator: ReactNode)` - You can define default spin element globally. \ No newline at end of file + You can define default spin element globally. diff --git a/components/table/__tests__/Table.filter.test.js b/components/table/__tests__/Table.filter.test.js index 4bedd60370..fadab37cb8 100644 --- a/components/table/__tests__/Table.filter.test.js +++ b/components/table/__tests__/Table.filter.test.js @@ -21,7 +21,10 @@ describe('Table.filter', () => { { text: 'Title', value: 'title', - children: [{ text: 'Designer', value: 'designer' }, { text: 'Coder', value: 'coder' }], + children: [ + { text: 'Designer', value: 'designer' }, + { text: 'Coder', value: 'coder' }, + ], }, ], onFilter: filterFn, @@ -468,7 +471,10 @@ describe('Table.filter', () => { // }); describe('should support value types', () => { - [['Light', 93], ['Bamboo', false]].forEach(([text, value]) => { + [ + ['Light', 93], + ['Bamboo', false], + ].forEach(([text, value]) => { it(`${typeof value} type`, () => { const onFilter = jest.fn(); const filters = [{ text, value }]; @@ -552,7 +558,10 @@ describe('Table.filter', () => { title="name" dataIndex="name" key="name" - filters={[{ text: 'Jack', value: 'Jack' }, { text: 'Lucy', value: 'Lucy' }]} + filters={[ + { text: 'Jack', value: 'Jack' }, + { text: 'Lucy', value: 'Lucy' }, + ]} filteredValue={filters.name} onFilter={filterFn} /> @@ -591,7 +600,10 @@ describe('Table.filter', () => { title: 'Name', dataIndex: 'name', key: 'name', - filters: [{ text: 'Jack', value: 'Jack' }, { text: 'Lucy', value: 'Lucy' }], + filters: [ + { text: 'Jack', value: 'Jack' }, + { text: 'Lucy', value: 'Lucy' }, + ], onFilter: filterFn, filteredValue: ['Jack'], }, @@ -621,7 +633,10 @@ describe('Table.filter', () => { columns: [ { ...column, - filters: [{ text: 'Jack', value: 'Jack' }, { text: 'Lucy', value: 'Lucy' }], + filters: [ + { text: 'Jack', value: 'Jack' }, + { text: 'Lucy', value: 'Lucy' }, + ], }, ], onChange: handleChange, diff --git a/docs/spec/alignment.en-US.md b/docs/spec/alignment.en-US.md index 319a4cd9ef..7968665d06 100644 --- a/docs/spec/alignment.en-US.md +++ b/docs/spec/alignment.en-US.md @@ -1,5 +1,6 @@ --- -category: Principles +category: Design Patterns +type: Principles order: 2 title: Alignment --- diff --git a/docs/spec/alignment.zh-CN.md b/docs/spec/alignment.zh-CN.md index 78f11cb80a..a13b52679e 100644 --- a/docs/spec/alignment.zh-CN.md +++ b/docs/spec/alignment.zh-CN.md @@ -1,5 +1,6 @@ --- -category: 原则 +category: 设计模式 +type: 原则 order: 2 title: 对齐 --- diff --git a/docs/spec/colors.en-US.md b/docs/spec/colors.en-US.md index e6c51796c9..9e85783025 100644 --- a/docs/spec/colors.en-US.md +++ b/docs/spec/colors.en-US.md @@ -1,5 +1,5 @@ --- -category: Visual +category: Global Style order: 0 title: Colors --- diff --git a/docs/spec/colors.zh-CN.md b/docs/spec/colors.zh-CN.md index f0f0acc54c..3ad6946817 100644 --- a/docs/spec/colors.zh-CN.md +++ b/docs/spec/colors.zh-CN.md @@ -1,5 +1,5 @@ --- -category: 视觉 +category: 全局样式 order: 0 title: 色彩 --- diff --git a/docs/spec/contrast.en-US.md b/docs/spec/contrast.en-US.md index e74d249ea2..d6c6da2244 100644 --- a/docs/spec/contrast.en-US.md +++ b/docs/spec/contrast.en-US.md @@ -1,5 +1,6 @@ --- -category: Principles +category: Design Patterns +type: Principles order: 3 title: Contrast --- diff --git a/docs/spec/contrast.zh-CN.md b/docs/spec/contrast.zh-CN.md index 068da2b918..75583561c3 100644 --- a/docs/spec/contrast.zh-CN.md +++ b/docs/spec/contrast.zh-CN.md @@ -1,5 +1,6 @@ --- -category: 原则 +category: 设计模式 +type: 原则 order: 3 title: 对比 --- diff --git a/docs/spec/copywriting.md b/docs/spec/copywriting.md index 37403d33a5..8e7e160da0 100644 --- a/docs/spec/copywriting.md +++ b/docs/spec/copywriting.md @@ -1,7 +1,10 @@ --- category: - zh-CN: 模式 - en-US: Patterns + zh-CN: 设计模式 + en-US: Design Patterns +type: + zh-CN: 全局规则 + en-US: Global Rules order: 6 title: zh-CN: 文案 diff --git a/docs/spec/direct.en-US.md b/docs/spec/direct.en-US.md index 36c9a40271..7cf68b3326 100644 --- a/docs/spec/direct.en-US.md +++ b/docs/spec/direct.en-US.md @@ -1,5 +1,6 @@ --- -category: Principles +category: Design Patterns +type: Principles order: 5 title: Make it Direct --- diff --git a/docs/spec/direct.zh-CN.md b/docs/spec/direct.zh-CN.md index 969c6d2ecd..0375816056 100644 --- a/docs/spec/direct.zh-CN.md +++ b/docs/spec/direct.zh-CN.md @@ -1,5 +1,6 @@ --- -category: 原则 +category: 设计模式 +type: 原则 order: 5 title: 直截了当 --- diff --git a/docs/spec/download.en-US.md b/docs/spec/download.en-US.md index aa80e17503..8d9f88f706 100644 --- a/docs/spec/download.en-US.md +++ b/docs/spec/download.en-US.md @@ -9,7 +9,7 @@ Please find below some of the design resources and tools about Ant Design that w
- +
@@ -20,7 +20,7 @@ Please find below some of the design resources and tools about Ant Design that w
- +
Mobile Components @@ -29,7 +29,7 @@ Please find below some of the design resources and tools about Ant Design that w
- +
Ant Design Pro @@ -38,7 +38,7 @@ Please find below some of the design resources and tools about Ant Design that w
- +
Ant Design Library @@ -47,7 +47,7 @@ Please find below some of the design resources and tools about Ant Design that w
- +
@@ -59,7 +59,7 @@ Please find below some of the design resources and tools about Ant Design that w
- +
@@ -70,7 +70,7 @@ Please find below some of the design resources and tools about Ant Design that w
- +
Ant UX @@ -79,7 +79,7 @@ Please find below some of the design resources and tools about Ant Design that w
- +
Ant Design Prototype (xiaopiu) @@ -100,7 +100,7 @@ Please find below some of the design resources and tools about Ant Design that w
- +
diff --git a/docs/spec/download.zh-CN.md b/docs/spec/download.zh-CN.md index cd2216974d..fb1d85acaf 100644 --- a/docs/spec/download.zh-CN.md +++ b/docs/spec/download.zh-CN.md @@ -11,7 +11,7 @@ title: 设计资源
- +
@@ -22,7 +22,7 @@ title: 设计资源
- +
Mobile Components @@ -31,7 +31,7 @@ title: 设计资源
- +
Ant Design Pro @@ -40,7 +40,7 @@ title: 设计资源
- +
Ant Design Library @Axure @@ -49,7 +49,7 @@ title: 设计资源
- +
@@ -61,7 +61,7 @@ title: 设计资源
- +
@@ -72,7 +72,7 @@ title: 设计资源
- +
Ant UX @@ -81,7 +81,7 @@ title: 设计资源
- +
Ant Design 原型（xiaopiu） @@ -90,7 +90,7 @@ title: 设计资源
- +
diff --git a/docs/spec/feedback.en-US.md b/docs/spec/feedback.en-US.md index 080d8255f5..362f98fb39 100644 --- a/docs/spec/feedback.en-US.md +++ b/docs/spec/feedback.en-US.md @@ -1,5 +1,6 @@ --- -category: Patterns +category: Design Patterns +type: Global Rules order: 11 title: Feedback --- diff --git a/docs/spec/feedback.zh-CN.md b/docs/spec/feedback.zh-CN.md index 8b53862661..08682852f9 100644 --- a/docs/spec/feedback.zh-CN.md +++ b/docs/spec/feedback.zh-CN.md @@ -1,5 +1,6 @@ --- -category: 模式 +category: 设计模式 +type: 全局规则 order: 11 title: 反馈 --- diff --git a/docs/spec/font.en-US.md b/docs/spec/font.en-US.md index 5b55b94917..86c7c6db33 100644 --- a/docs/spec/font.en-US.md +++ b/docs/spec/font.en-US.md @@ -1,5 +1,5 @@ --- -category: Visual +category: Global Style order: 3 title: Font --- diff --git a/docs/spec/font.zh-CN.md b/docs/spec/font.zh-CN.md index 90ae481f4e..079e9bb820 100644 --- a/docs/spec/font.zh-CN.md +++ b/docs/spec/font.zh-CN.md @@ -1,5 +1,5 @@ --- -category: 视觉 +category: 全局样式 order: 3 title: 字体 --- diff --git a/docs/spec/icon.en-US.md b/docs/spec/icon.en-US.md index b53730975c..35f457859d 100644 --- a/docs/spec/icon.en-US.md +++ b/docs/spec/icon.en-US.md @@ -1,5 +1,5 @@ --- -category: Visual +category: Global Style order: 4 title: Icons --- diff --git a/docs/spec/icon.zh-CN.md b/docs/spec/icon.zh-CN.md index 7886463468..c764f8db27 100644 --- a/docs/spec/icon.zh-CN.md +++ b/docs/spec/icon.zh-CN.md @@ -1,5 +1,5 @@ --- -category: 视觉 +category: 全局样式 order: 4 title: 图标 --- diff --git a/docs/spec/illustration.en-US.md b/docs/spec/illustration.en-US.md new file mode 100644 index 0000000000..1465784275 --- /dev/null +++ b/docs/spec/illustration.en-US.md @@ -0,0 +1,6 @@ +--- +order: 5 +title: Illustration +--- + +### Translation is in progress diff --git a/docs/spec/illustration.zh-CN.md b/docs/spec/illustration.zh-CN.md new file mode 100644 index 0000000000..db47ce1d31 --- /dev/null +++ b/docs/spec/illustration.zh-CN.md @@ -0,0 +1,106 @@ +--- +order: 5 +title: 插画 +--- + +# HiTu 图形化 + +
+ General +
+ +## 项目背景 + +图形化是品牌识别度的关键核心元素，在互联网产品，线下物料中使用中无处不在。与单纯的文案信息不同，图形化在直观描述固有信息的同时塑造情感背景，使用户更具沉浸感和共情性。提升产品用户体验的同时来完成商业目标。图形化的风格缤纷复杂，插画师的个人风格明显，不同的设计师在图形化的工作协同中，风格很难复现，而单纯由一名插画师去完成整体业务的图形化也存在一定风险。所以图形化体系在保持品牌一致性和提升工作效率，规避风险上显得尤为重要。 + +
+ Background +
+ +## 设计原则 + +从最底层的设计价值观到最上层的设计方法，HiTu 沿袭了 Ant Design 的 ETCG 的设计思路，将图形化资产组件化，分可形成模板，合则可拼搭成案例。为设计值提供强大的灵活性和定制性。 + +
+ Design principle +
+ +#### HiTu 金字塔模型 + +基于科技，确定，自然，未来的四层品牌策略，我们将抽象的概念具象化。代表的技术底层的科技能力为产品，体验和未来提供技术支撑和可能性。所以图例一一对应，我们具象化了人物和产品，体验及未来之间的关系。他们之间不同的组合方式可以满足不同的业务场景诉求。 + +
+ Pyramid model +
+ +## 颜色 + +### 海兔色板 + + + +海兔的色彩配色体系是基于 Ant Design 色板的场景应用，与 UI 色彩体系的应用会有所不同。图形化的配色体系会相对更加的灵活可变。基于 Ant Design 的基础色板我们进行了明度的调整，扩大图形化设计的宽容度，使用选择时候更加高效易用，由于是出自 Ant Design 的色彩体系，和其他 UI 资产完美兼容。 + +### 海兔默认资产颜色 + + + +通过搜资调研，我们发现在企业级产品中。色彩的使用上蓝色，白色会占很大的比重。我们选取了色板中最具科技感，且代表着探索，钻研感的极客蓝作为我们的主色。 + +
+ + + +基于 Adobe Color 的三元取色工具，和 3D 立体马赛克球，结合我们自己的海兔色板。可以轻松得到了我们 Dedult 版本的基础色板。 + +
+ +# 设计资产 + +### 人物组件 + +基于自然的人物头身比例 + +基于自然的设计原则，我们不推荐使用 Q 班卡通和过于夸张艺术化的设计风格。相比之下，接近自然真人头人比例的风格更是我们所推荐的。 + +
+ +9 种常见职业角色设计 + +同时，我们结合情感化设计，将 9 种常见的职业角色进行人物设计吗。结合职业本身的一些特质，我们也赋予了他们不同气质特质，来满足各种业务场景的使用。 + +
+ +角色设计人物分解 + +HiTu 骨骼系统 + +人物姿态复用 + +有了基础的人物设计，我们将人物进行分解，然后搭配设计好的骨骼系统。来为人物增加各种姿态动作的复用和延展。 + +
+ +### 元素组件 + + + + + +记忆点源于与众不同，专业感源于整齐划一。元素组件指代的是业务场景中一些业务元素，状态元素图形化的世界缤纷多变，我们希望在保持统一性的同时不去限时设计者的创意空间，元素组件的设计上，我们为了保持一定的韵律感，推荐设计师在 1024\*1024 的网格中绘制组件，且圆角的大小保持 8 的倍数关系。 + +
+ +# 设计应用 + + + + + + + + + +有了丰富的资产组件，我们应该如何使用呢？在 HiTu 的设计使用指引中，我推荐设计者在使用资产的过程中构建 Z 轴向的空间概念，将整幅画面拆分成前景，中景以及背景三个层次，在组件的排放时候，前景凸显重要的元素（如人，核心元素组件等），中间交代所处环境，背景则渲染烘托氛围，在颜色的使用和透明上也是前景的饱和度和透明度最高，逐级降低。 + +
diff --git a/docs/spec/introduce.en-US.md b/docs/spec/introduce.en-US.md index b55e7a93bc..011265b869 100644 --- a/docs/spec/introduce.en-US.md +++ b/docs/spec/introduce.en-US.md @@ -5,22 +5,26 @@ title: Introduction ---
- +
-In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development. After massive project practice and summaries, Ant Design, a design language for background applications, is refined by Ant UED Team, which aims to uniform the user interface specs for internal background projects, lower the unnecessary cost of design differences and implementation and liberate the resources of design and front-end development. +Ant's enterprise-level products are an enormous and complex system with a large number and complex functions. Designers and developers often need to respond fast due to frequent changes and concurrency. Meanwhile, there are many similar pages and components in these products. Some stable and highly reusable content can obtain through abstraction. -Ant Design which is specially created for internal desktop applications, is committed to improving the experience of users and product designers. User interface designers and user experience designers, collectively, are considered as product designers, and the boundaries of product managers, interaction designers, visual designers, front-end developers and develop engineers are blurred. Taking advantage of unitary specifications, Ant Design makes design and prototype more simple and accessible for all project members, which comprehensively promotes experience and development efficiency of background applications and products. +With the trend of commercialization, more and more enterprise-level products begin to pursue a better user experience. With such an ultimate goal, we (Ant Financial User Experience Department) have gradually polished a design system(Ant Design) for enterprise-level products through a huge quantity of project practices and summaries. Based on the four design values of 『 natural 』, 『certain』, 『meaningful』, and 『growing』, through modular solutions, reduce redundant production costs and allow designers to focus on better user experience. --- ## Guidelines and Resources -We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently. +We provide comprehensive design guidelines, best practices, design resources, and design tools to help designers produce high-quality product prototypes. -- [Principles](/docs/spec/proximity) -- [Patterns](/docs/pattern/navigation) -- [Resource Download](/docs/resource/download) +- [Design value](/docs/spec/values) +- [Design pattern](/docs/spec/overview) +- [Visualization](/docs/spec/visual) +- [Illustration](/docs/spec/illustration) +- [Design resources](/docs/spec/download) +- [Sketch toolbox](http://kitchen.alipay.com/) +- [Articles](/docs/spec/article) ## Front-end Implementation diff --git a/docs/spec/introduce.zh-CN.md b/docs/spec/introduce.zh-CN.md index 6576d3b1c8..9e0ac5759a 100644 --- a/docs/spec/introduce.zh-CN.md +++ b/docs/spec/introduce.zh-CN.md @@ -5,23 +5,26 @@ title: 介绍 ---
- +
-蚂蚁的企业级产品是一个庞大且复杂的体系。这类产品不仅量级巨大且功能复杂，而且变动和并发频繁，常常需要设计与开发能够快速的做出响应。同时这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。 +蚂蚁的企业级产品是一个庞大且复杂的系统，数量多且功能复杂，而且变动和并发频繁，常常需要设计者与开发者能快速做出响应。同时这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。 -随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标，我们（蚂蚁金服体验技术部）经过大量的项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系 Ant Design。基于『确定』和『自然』的设计价值观，通过模块化的解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。 +随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标，我们（蚂蚁金服体验技术部）经过大量项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系 —— Ant Design。基于『自然』、『确定性』、『意义感』、『生长性』四大[设计价值观](/docs/spec/values)，通过模块化解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。 --- ## 设计资源 -我们提供完善的设计原则、最佳实践和设计资源文件（[Sketch](https://ant.design/docs/spec/download-cn) 和 [Axure](https://ant.design/docs/spec/download-cn)），来帮助业务快速设计出高质量的产品原型。 +我们提供完善的设计指引、最佳实践、设计资源和设计工具，来帮助设计者快速产出高质量产品原型。 -- [设计原则](/docs/spec/proximity) +- [设计价值观](/docs/spec/values) - [设计模式](/docs/spec/overview) +- [可视化](/docs/spec/visual) +- [插画](/docs/spec/illustration) - [设计资源](/docs/spec/download) - [Sketch 工具集](http://kitchen.alipay.com/) +- [文章](/docs/spec/article) ## 前端实现 diff --git a/docs/spec/invitation.en-US.md b/docs/spec/invitation.en-US.md index 657de7538d..48914cc0fc 100644 --- a/docs/spec/invitation.en-US.md +++ b/docs/spec/invitation.en-US.md @@ -1,5 +1,6 @@ --- -category: Principles +category: Design Patterns +type: Principles order: 8 title: Provide an Invitation --- diff --git a/docs/spec/invitation.zh-CN.md b/docs/spec/invitation.zh-CN.md index 343005abc6..d2ffd80e8e 100644 --- a/docs/spec/invitation.zh-CN.md +++ b/docs/spec/invitation.zh-CN.md @@ -1,5 +1,6 @@ --- -category: 原则 +category: 设计模式 +type: 原则 order: 8 title: 提供邀请 --- diff --git a/docs/spec/layout.en-US.md b/docs/spec/layout.en-US.md index 44289469d7..5be533409c 100644 --- a/docs/spec/layout.en-US.md +++ b/docs/spec/layout.en-US.md @@ -1,5 +1,5 @@ --- -category: Visual +category: Global Style order: 2 title: Layout --- diff --git a/docs/spec/layout.zh-CN.md b/docs/spec/layout.zh-CN.md index 28d1dd4300..c1399a1f10 100644 --- a/docs/spec/layout.zh-CN.md +++ b/docs/spec/layout.zh-CN.md @@ -1,5 +1,5 @@ --- -category: 视觉 +category: 全局样式 order: 2 title: 布局 --- diff --git a/docs/spec/lightweight.en-US.md b/docs/spec/lightweight.en-US.md index f7d678ebcc..d56b0addf0 100644 --- a/docs/spec/lightweight.en-US.md +++ b/docs/spec/lightweight.en-US.md @@ -1,5 +1,6 @@ --- -category: Principles +category: Design Patterns +type: Principles order: 7 title: Keep it Lightweight --- diff --git a/docs/spec/lightweight.zh-CN.md b/docs/spec/lightweight.zh-CN.md index 6fd4fc8486..5875acfb73 100644 --- a/docs/spec/lightweight.zh-CN.md +++ b/docs/spec/lightweight.zh-CN.md @@ -1,5 +1,6 @@ --- -category: 原则 +category: 设计模式 +type: 原则 order: 7 title: 简化交互 --- diff --git a/docs/spec/motion.en-US.md b/docs/spec/motion.en-US.md index 960ec8041b..6e9f32c29b 100644 --- a/docs/spec/motion.en-US.md +++ b/docs/spec/motion.en-US.md @@ -1,5 +1,5 @@ --- -order: 5 +order: 4 title: Motion --- diff --git a/docs/spec/motion.zh-CN.md b/docs/spec/motion.zh-CN.md index f9cb9fc0b1..117ad9297c 100644 --- a/docs/spec/motion.zh-CN.md +++ b/docs/spec/motion.zh-CN.md @@ -1,5 +1,5 @@ --- -order: 5 +order: 4 title: 动效 --- diff --git a/docs/spec/navigation.en-US.md b/docs/spec/navigation.en-US.md index cf7259dc52..c17ac26e31 100644 --- a/docs/spec/navigation.en-US.md +++ b/docs/spec/navigation.en-US.md @@ -1,5 +1,6 @@ --- -category: Patterns +category: Design Patterns +type: Global Rules order: 8 title: Navigation --- diff --git a/docs/spec/navigation.zh-CN.md b/docs/spec/navigation.zh-CN.md index 8987818240..147595d7b4 100644 --- a/docs/spec/navigation.zh-CN.md +++ b/docs/spec/navigation.zh-CN.md @@ -1,5 +1,6 @@ --- -category: 模式 +category: 设计模式 +type: 全局规则 order: 8 title: 导航 --- diff --git a/docs/spec/overview.en-US.md b/docs/spec/overview.en-US.md index 7a27aaf9f9..f9f7766d3b 100644 --- a/docs/spec/overview.en-US.md +++ b/docs/spec/overview.en-US.md @@ -1,5 +1,5 @@ --- -category: Patterns +category: Design Patterns order: 0 title: Overview --- diff --git a/docs/spec/overview.zh-CN.md b/docs/spec/overview.zh-CN.md index c0f282c8fb..fe84988563 100644 --- a/docs/spec/overview.zh-CN.md +++ b/docs/spec/overview.zh-CN.md @@ -1,5 +1,5 @@ --- -category: 模式 +category: 设计模式 order: 0 title: 概览 --- diff --git a/docs/spec/proximity.en-US.md b/docs/spec/proximity.en-US.md index 932b773103..f44f6bd244 100644 --- a/docs/spec/proximity.en-US.md +++ b/docs/spec/proximity.en-US.md @@ -1,5 +1,6 @@ --- -category: Principles +category: Design Patterns +type: Principles order: 1 title: Proximity --- diff --git a/docs/spec/proximity.zh-CN.md b/docs/spec/proximity.zh-CN.md index 2fb4013280..8cbafba142 100644 --- a/docs/spec/proximity.zh-CN.md +++ b/docs/spec/proximity.zh-CN.md @@ -1,5 +1,6 @@ --- -category: 原则 +category: 设计模式 +type: 原则 order: 1 title: 亲密性 --- diff --git a/docs/spec/reaction.en-US.md b/docs/spec/reaction.en-US.md index 3c806d34bf..f6225ca974 100644 --- a/docs/spec/reaction.en-US.md +++ b/docs/spec/reaction.en-US.md @@ -1,5 +1,6 @@ --- -category: Principles +category: Design Patterns +type: Principles order: 10 title: React Immediately --- diff --git a/docs/spec/reaction.zh-CN.md b/docs/spec/reaction.zh-CN.md index 29e9da531b..f5d115a6fc 100644 --- a/docs/spec/reaction.zh-CN.md +++ b/docs/spec/reaction.zh-CN.md @@ -1,5 +1,6 @@ --- -category: 原则 +category: 设计模式 +type: 原则 order: 10 title: 即时反应 --- diff --git a/docs/spec/repetition.en-US.md b/docs/spec/repetition.en-US.md index a680087cdb..fabee96f65 100644 --- a/docs/spec/repetition.en-US.md +++ b/docs/spec/repetition.en-US.md @@ -1,5 +1,6 @@ --- -category: Principles +category: Design Patterns +type: Principles order: 4 title: Repetition --- diff --git a/docs/spec/repetition.zh-CN.md b/docs/spec/repetition.zh-CN.md index 1afbefb69d..a32d089c06 100644 --- a/docs/spec/repetition.zh-CN.md +++ b/docs/spec/repetition.zh-CN.md @@ -1,5 +1,6 @@ --- -category: 原则 +category: 设计模式 +type: 原则 order: 4 title: 重复 --- diff --git a/docs/spec/stay.en-US.md b/docs/spec/stay.en-US.md index 6d7682f4ad..3ef6f7b867 100644 --- a/docs/spec/stay.en-US.md +++ b/docs/spec/stay.en-US.md @@ -1,5 +1,6 @@ --- -category: Principles +category: Design Patterns +type: Principles order: 6 title: Stay on the Page --- diff --git a/docs/spec/stay.zh-CN.md b/docs/spec/stay.zh-CN.md index f5a3efeb74..ce65a24a2f 100644 --- a/docs/spec/stay.zh-CN.md +++ b/docs/spec/stay.zh-CN.md @@ -1,5 +1,6 @@ --- -category: 原则 +category: 设计模式 +type: 原则 order: 6 title: 足不出户 --- diff --git a/docs/spec/transition.en-US.md b/docs/spec/transition.en-US.md index be1c6f3b75..4ff8e9595e 100644 --- a/docs/spec/transition.en-US.md +++ b/docs/spec/transition.en-US.md @@ -1,5 +1,6 @@ --- -category: Principles +category: Design Patterns +type: Principles order: 9 title: Use Transition --- diff --git a/docs/spec/transition.zh-CN.md b/docs/spec/transition.zh-CN.md index 55abed57ec..e45067aa0b 100644 --- a/docs/spec/transition.zh-CN.md +++ b/docs/spec/transition.zh-CN.md @@ -1,5 +1,6 @@ --- -category: 原则 +category: 设计模式 +type: 原则 order: 9 title: 巧用过渡 --- diff --git a/docs/spec/values.en-US.md b/docs/spec/values.en-US.md index 414477a00f..8d8a88d8a2 100644 --- a/docs/spec/values.en-US.md +++ b/docs/spec/values.en-US.md @@ -4,33 +4,59 @@ order: 1 title: Design Values --- -Ant Design provides a practical evaluation of better design for both designers of Ant Design and designers who are using it. At the same time, it builds a foundation for design principles and design patterns which could provide guideline and general solutions for specified design goal. +Ant Design Design values provide internal criteria for designers to evaluate design quality, inspire and arouse ant design's design principles and patterns, which in turn leads to providing guidance and general solutions for specific design problems.
- + General
-Here is our design values: +On the persistence of "design values", there are 4 features make Ant Design out of the ordinary: -## Nature +## Natural
- Nature + Natural
-As a part of nature, it will have deep influence on user behavior, and designers should draw inspiration from it and apply it to our daily design work. We have started exploring and will pursue nature as our future direction. +The light-speed iteration of the digital world makes products more complex. However, human consciousness and attention resources are limited. Facing this design contradiction, the pursuit of "natural" interaction will be the consistent direction of Ant Design. -- The visual system plays the most important role in human perception and cognition. By refining the objective laws in nature and applying it to the interface design, a more layered product experience is created. In addition, hearing systems or tactile systems could be added in future to bring more dimensions and more real product experience. See visual language. -- In the real product design, a series of methods such as behavior analysis, artificial intelligence and sensors could be applied to assist users to make effective decisions and reduce extra operations of users, so as to save users' mental and physical resources and make human-computer interaction more natural. +- **Perception of nature:** according to cognitive psychology, about 80% of external information is obtained through visual channels. The most important visual elements in the interface design, including layout, colors, illustrations, icons, etc., should fully absorb the laws of nature, thereby reducing the user's cognitive cost and bringing authentic and smooth feelings. In some scenarios, opportunely adding other sensory channels such as hearing, touch can create a richer and more natural product experience. +- **Act of nature:** In the interaction with the system, the designer should fully understand the relationship between users, system roles, and task objectives, and also contextually organize system functions and services. At the same time, a series of methods such as behavior analysis, artificial intelligence and sensors could be applied to assist users to make effective decisions and reduce extra operations of users, to save users' mental and physical resources and make human-computer interaction more natural. -## Certainty +> To get to know the past and present of natural values, [please move to the column](https://zhuanlan.zhihu.com/p/44809866). + +## Certain
- Certainty + Certain
-The designers needs to make better design decisions and create a high-definition and low-entropy atmosphere for developer team. Meanwhile, different designers could produce the same design output which fit business needs based on the same understanding of business requirements and design system. +Interfaces are the medium of interaction between users and the system. They are the means rather than the purpose. Based on the pursuit of "natural" interaction, the product interface created by Ant Design should be high certainty and low cooperative entropy. -- **Keep restraint:** Don't make decision until we have to. Designers should focus on the valuable product features using minimal design elements to express. As Antoine de St.Exupery said: [“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.”](https://www.goodreads.com/quotes/19905-perfection-is-achieved-not-when-there-is-nothing-more-to) -- **Object-oriented:** Explore design rules and abstract them as "objects" to enhance the flexibility and maintainability of user interface design while reducing designer's subjective judgement and uncertainty of real world system. For example: color value conversion, spacing typesetting. -- **Modular:** Encapsulate the complex or reusable parts could provide limited interfaces to interact with other modules, ultimately reducing overall system complexity, resulting in better reliability and maintainability. Designers can use existed resources or abstract their own reusable resources, save unnecessary and low additional design to keep their focus on where creativity most needed. +- **Designer certainty:** Enterprise-level products are the product of divide and conquer. The more participants, the higher the entropy of cooperation. This is why low-efficiency design and difficult maintenance of the product system exists. By exploring the design rules and modular design ideas, designers are provided with simplified design rules, components and patterns to empower designers and reduce the cooperative entropy. + - **Keep restraint:** Don't make a decision until we have to Designers should focus on valuable product features using minimal design elements to express. As Antoine de St. Exupery said: “Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.” + - **Object-oriented:** Explore design rules and abstract them as "objects" to enhance the flexibility and maintainability of user interface design while reducing the designer's subjective judgment and uncertainty of the real-world system. For example color value conversion, spacing typesetting. + - **Modular design:** Encapsulate the complex or reusable parts could provide limited interfaces to interact with other modules, ultimately reducing overall system complexity, thereby improving reliability and maintainability. Designers can use existed resources or abstract their reusable resources to save the unnecessary and low additional design to keep their focus on where creativity is most needed. +- **User certainty:** User's daily work is completed through the collaboration of enterprise-level products. In addition to considering the design consists of a single product, good certainty is required to be maintained across products, terminals, and systems. Consistent appearance and interaction, maintaining a user-oriented familiarity, can reduce the difficulty of learning, cognitive and operating costs, and improve work efficiency. + +## Meaningful + +
+ Meaningful +
+ +A product or function created by the designer is not only the needs of the user but carries a mission from the user. Product design should be based on the perspective of work to promote the achievement of the user's mission. Simultaneously, based on "nature" and "certainty", it regards the user's human needs and creates meaningful human-computer interaction for the work process. + +- **Meaning of result:** **Clear goals, immediate feedback.** Understand the objectives, clearly disassemble the sub-objectives according to the use process, and let each interaction revolve around the achievement of the main objectives. Provide appropriate and immediate feedback for each action, so that users can understand the operation results. Besides, emotional design can be used to pacify users' negative emotions and enhance users' positive emotions. +- **Meaning of process:** **Moderate challenge, full devotion.** Adjust the difficulty of work in different scenarios, make the function trigger at the right time to match the user's skill. If not necessary, do not add entities. Do not distract users, let users focus on task achievement, rather than the interface. Let the current work be neither to simple nor too complex. The challenges are moderate, but higher challenges are raised as the user's capabilities grow. It allows users to continue to immerse themselves in the flow of work and gain fulfilling work experience. + +## Growing + +
+ Growing +
+ +The growth of enterprise-level product capabilities is accompanied by the evolution of user system roles. Designers should be responsible for the products they create and improve the discoverability of functions and values. Designers should design with the vision of development and consider the common growth of both ends of humans and computers. + +- **Meaning of result:** Clear goals, immediate feedback. Understand the objectives, clearly disassemble the sub-objectives according to the use process, and let each interaction revolve around the achievement of the main objectives. Provide appropriate and immediate feedback for each action, so that users can understand the operation results. Besides, emotional design can be used to pacify users' negative emotions and enhance users' positive emotions. +- **Meaning of process:** Moderate challenge, full devotion. Adjust the difficulty of work in different scenarios, make the function trigger at the right time to match the user's skill. If not necessary, do not add entities. Do not distract users, let users focus on task achievement, rather than the interface. Let the current work be neither to simple nor too complex. The challenges are moderate, but higher challenges are raised as the user's capabilities grow. It allows users to continue to immerse themselves in the flow of work and gain fulfilling work experience. diff --git a/docs/spec/values.zh-CN.md b/docs/spec/values.zh-CN.md index adea25ce92..6702242e9d 100644 --- a/docs/spec/values.zh-CN.md +++ b/docs/spec/values.zh-CN.md @@ -4,35 +4,59 @@ order: 1 title: 设计价值观 --- -设计价值观为 Ant Design 的设计者以及基于 Ant Design 进行产品设计的设计者，提供评价设计好坏的内在标准，并提供有效的设计实践所遵循的规则。同时，它启示并激发了设计原则和设计模式，为具体的设计问题提供向导和一般解决方案。 +Ant Design 设计价值观为设计者提供评价设计好坏的内在标准，启示并激发了 Ant Design 设计原则和设计模式，进而为具体设计问题提供向导和一般解决方案。
- 总概 + 总概
-在『设计价值观』的坚持上，Ant Design 有两点与众不同： +在『设计价值观』的坚持上，Ant Design 有四点与众不同： ## 自然
- 自然 + 自然
-作为一份子，自然界的方方面面都会对用户行为产生深远影响，设计者应该从其中汲取灵感，并运用到当下的设计工作中。我们已做了部分探索，并将追求『自然』作为我们未来持之以恒的方向。 +数字世界的光速迭代使得产品日益复杂，而人类意识和注意力资源有限。面对这种设计矛盾，追求「自然」交互将是 Ant Design 持之以恒的方向。 -- 在行为的执行中，利用[行为分析](https://zhuanlan.zhihu.com/p/41952711)、人工智能、[传感器](https://zhuanlan.zhihu.com/p/52648777)、[元数据](https://zhuanlan.zhihu.com/p/43613398)等一系列方式，辅助用户有效决策、减少用户额外操作，从而节省用户脑力和体力，让人机交互行为更自然。 -- 在感知和认知中，视觉系统扮演着最重要的角色，通过提炼自然界中的客观规律并运用到界面设计中，从而创建更有层次产品体验；同时，适时加入听觉系统、触觉系统等，创建更多维、更真实的产品体验。详见视觉语言 +- **感知自然：**认知心理学所述，约 80% 外界信息通过视觉通道获取。界面设计中最重要的视觉要素，包括布局、色彩、插画、图标等，应充分汲取自然界规律，从而降低用户认知成本，带来真实流畅的感受。在一些场景下，适时加入听觉、触觉等其它感知通道，能创造更丰富自然的产品体验。 +- **行为自然：**在与系统的互动中，设计者应充分理解用户、系统角色、任务目标间的关系，场景化组织系统功能和服务。同时辅以行为分析、人工智能、传感器、元数据等策略，提供主动式服务，帮助用户决策、减少操作，从而节约用户脑力和体力，让人机交互行为更自然。 > 想了解自然价值观的前世今生，[请移步至专栏](https://zhuanlan.zhihu.com/p/44809866)。 -## 确定 +## 确定性
- 确定 + 确定
-『设计者』需要做出更好的设计决策，给予研发团队一种高确定性、低熵值的研发状态。同时，不同设计者在充分理解业务述求后，基于 Ant Design 体系都会有相同且符合当前业务特性的设计产出。 +界面是用户与系统交互的媒介，是手段而非目的。在追求「自然」交互基础上，通过 Ant Design 创造的产品界面应是高确定性、低合作熵的状态。 -- **保持克制：** 能做，但想清楚了不做。设计者应当聚焦在最有价值产品功能打磨，并用尽可能少的设计元素将其表达。正如 Antoine de St.Exupery 所说：完美不在于无以复加，而在于无可删减，万事莫不如此。 -- **面向对象的方法：** 探索设计规律，并将其抽象成『对象』，增强界面设计的灵活性和可维护性，同时也减少『设计者』的主观干扰，从而降低系统的不确定性。例如：色值换算、间距排版。 -- **模块化设计：** 将复杂或者重复出现的局部封装成模块，提供有限接口与其他模块互动，最终全面减少系统的复杂度，进而增进可靠性以及可维护性。设计者可运用现有的组件/模板或者自行抽象可复用的组件/模板，节约无谓的设计且保持系统一致性，让『设计者』把创造力专注在最需要的地方。 +- **设计者确定：**企业级产品都是分工合作的产物，参与者越多合作熵越高，这是一切设计工作低效、产品系统不易维护的来源。通过探索设计规律、模块化设计思路，来为设计者提供足够精简的设计规则、组件、模式等，赋能设计者、降低合作熵。 + - 保持克制： 能做，但想清楚了不做。设计者应当聚焦在最有价值产品功能打磨，并用尽可能少的设计元素将其表达。正如 Antoine de St.Exupery 所说：完美不在于无以复加，而在于无可删减，万事莫不如此。 + - 面向对象的方法： 探索设计规律，并将其抽象成『对象』，增强界面设计的灵活性和可维护性，同时也减少『设计者』的主观干扰，从而降低系统的不确定性。例如：色值换算、间距排版。 + - 模块化设计： 将复杂或者重复出现的局部封装成模块，提供有限接口与其他模块互动，最终全面减少系统的复杂度，进而增进可靠性以及可维护性。设计者可运用现有的组件/模板或者自行抽象可复用的组件/模板，节约无谓的设计且保持系统一致性，让『设计者』把创造力专注在最需要的地方。 +- **用户确定：**用户日常工作是通过诸多企业级产品的协同来完成的，除了考虑单一产品的设计一致性，更应当在跨产品、跨终端、跨系统间保持良好的确定性。一致的外观和交互，保持面向用户的熟悉感，能提升易学行，降低认知和操作成本，提升工作效率。 + +## 意义感 + +
+ 意义感 +
+ +一个产品或功能被设计者创造出来不只是用户的需要，而更多是承载用户的某个工作使命。产品设计应充分站在工作视角，促成用户使命的达成；同时，在「自然」、「确定」之上，兼顾用户的人性需求，为工作过程创造富有意义感的人机交互。 + +- **结果的意义：\*\***明确目标，即时反馈。\*\*洞悉工作目标，根据使用流程拆解明确的子目标，让每个交互行为都围绕着主目标的达成；为每个行为，辅以恰当、即时的反馈，让用户对操作结果了然于胸。此外，可通过情感化设计，适度安抚用户负面情感，强化用户正面情感。 +- **过程的意义：\*\***挑战适中，全情投入。\*\*调整不同场景下的工作难度，让功能适时适地触发，以匹配用户能力；如无必要，勿增实体，不分散用户注意力，让用户专注于任务达成，而非界面。让当下的工作既不过于简单，亦不过于复杂，挑战适中，并随着用户能力的成长提出更高的挑战，能让用户持续沉浸在工作的心流中，获得富有成就感的工作体验。 + +## 生长性 + +
+ Growth +
+ +企业级产品功能的增长与用户系统角色的演变相生相伴。设计者应为自己创造的产品负责，提升功能、价值的可发现性。用发展的眼光做设计，充分考虑人、机两端的共同生长。 + +- **价值连接：**产品的增长依赖于用户的群体扩大和深度使用，而用户的成长又依赖于产品功能的壮大。设计者应建立系统设计思维，洞悉产品功能的价值，探索用户在不同场景下的需求，在价值和需求间建立连接。让产品价值被发现，帮助用户建立更有效、更高效的工作方式。 +- **人机共生：**产品功能和用户需求的更多连接，让人机互动更加紧密，用户和系统共生。产品设计时，不应将用户和系统独立开来，应作为一个动态发展的共同体来思考，确保其足够的灵活、包容，充满生命力。 diff --git a/docs/spec/visual.en-US.md b/docs/spec/visual.en-US.md index 252a2529ac..e0870e5052 100644 --- a/docs/spec/visual.en-US.md +++ b/docs/spec/visual.en-US.md @@ -1,5 +1,5 @@ --- -order: 4 +order: 3 title: Visualization --- diff --git a/docs/spec/visual.zh-CN.md b/docs/spec/visual.zh-CN.md index b29ef2a35e..a07196868e 100644 --- a/docs/spec/visual.zh-CN.md +++ b/docs/spec/visual.zh-CN.md @@ -1,5 +1,5 @@ --- -order: 4 +order: 3 title: 可视化 --- @@ -9,7 +9,7 @@ title: 可视化 ## 设计资源 -我们提供完善的设计原则 & 指引和设计资源文件（Sketch），此外还提供了一份完整的图表用法说明，来帮助用户快速理解图表并设计出高质量的可视化图表。 +AntV 提供完善的设计原则 & 指引和设计资源文件（Sketch），此外还提供了一份完整的图表用法说明，来帮助用户快速理解图表并设计出高质量的可视化图表。 - [设计原则](https://antv.vision/zh/docs/specification/principles/basic) - [设计资源](https://antv.vision/zh/docs/specification/resources) @@ -17,7 +17,7 @@ title: 可视化 ## 前端实现 -我们基于原生 JavaScipt 封装了一套 AntV 的组件库，其包含高交互基础图表库 G2Plot，专注解决流程与关系分析的图表库 G6，适于移动端应用的图表库 F2 等，也欢迎社区其他框架的实现版本。 +AntV 基于原生 JavaScipt 封装了一套 AntV 的组件库，其包含高交互基础图表库 G2Plot，专注解决流程与关系分析的图表库 G6，适于移动端应用的图表库 F2 等，也欢迎社区其他框架的实现版本。 - [G2 可视化引擎](https://g2.antv.vision/zh) - [G2Plot 开箱即用的图表库](https://g2plot.antv.vision/zh) 🔥 diff --git a/package.json b/package.json index 6313596266..2869427407 100644 --- a/package.json +++ b/package.json @@ -139,6 +139,7 @@ "devDependencies": { "@ant-design/bisheng-plugin": "^2.0.1", "@ant-design/colors": "^3.2.2", + "@ant-design/hitu": "^0.0.0-alpha.13", "@ant-design/tools": "^8.0.4", "@packtracker/webpack-plugin": "^2.0.1", "@qixian.cs/github-contributors-list": "^1.0.3", diff --git a/site/bisheng.config.js b/site/bisheng.config.js index 6b6cb3409a..946a4ff4c5 100644 --- a/site/bisheng.config.js +++ b/site/bisheng.config.js @@ -42,18 +42,17 @@ module.exports = { themeConfig: { categoryOrder: { 'Ant Design': 0, - 原则: 1, - Principles: 1, - 视觉: 2, - Visual: 2, - 模式: 3, - Patterns: 3, + 全局样式: 1, + 'Global Style': 1, + 设计模式: 2, + 'Design Patterns': 2, 其他: 6, Other: 6, Components: 100, 组件: 100, }, typeOrder: { + // Component General: 0, Layout: 1, Navigation: 2, @@ -70,6 +69,12 @@ module.exports = { 反馈: 5, 其他: 6, 废弃: 7, + + // Design + 原则: 1, + Principles: 1, + 全局规则: 2, + 'Global Rules': 2, }, docVersions: { '0.9.x': 'http://09x.ant.design', diff --git a/site/theme/en-US.js b/site/theme/en-US.js index 03d4719f4b..4083faa8ee 100644 --- a/site/theme/en-US.js +++ b/site/theme/en-US.js @@ -30,32 +30,34 @@ module.exports = { 'app.demo.riddle': 'Open in Riddle', 'app.home.slogan': "The world's second most popular React UI framework", 'app.home.introduce': - 'A design system with values of Nature and Determinacy for better user experience of enterprise applications', - 'app.home.design-language': 'Design Language', - 'app.home.solution': 'Solution', - 'app.home.components-explain': - 'Based on the Ant Design language, we have provided a suite of out-of-the-box with high quality for developing and serving enterprise background applications, including the official React UI library and Angular, Vue implementations', - 'app.home.product-pro-slogan': 'Out-of-the-box front-end / Design solution', - 'app.home.product-mobile-slogan': - "antd-mobile is the implementation of Ant Design's mobile specification", - 'app.home.product-landing-slogan': - 'Landing Pages templates and specifications based of Ant Design language', - 'app.home.product-antv-slogan': - 'Simple, professional, with unlimited possibilities for data visualization solutions', - 'app.home.tool-title': 'Tools & Resources', - 'app.home.tool-package-title': 'Ant Design Resources', - 'app.home.tool-package-content': 'Ant Design Resources Download', - 'app.home.tool-library-title': 'Axure Library', - 'app.home.tool-library-content': 'Beautifully visual Axure library', - 'app.home.tool-kitchen-title': 'Kitchen', - 'app.home.tool-kitchen-content': 'A Sketch tools for designers', - 'app.home.getting-started': 'Getting Started', + 'Enterprise-level product design system to create an efficient and enjoyable work experience.', 'app.home.recommend': 'Recommend', - 'app.home.recommend.yuque': 'Yuque, our favorite documentation tool', - 'app.home.recommend.antv.g2plot': 'G2Plot, the new charting library', - 'app.home.more': 'Learn more', - 'app.home.more-mobile-react': 'Ant Design Mobile of React', - 'app.home.more-mobile-angular': 'Ant Design Mobile of Angular', + 'app.home.popularize': 'Popularize', + 'app.home.design-and-framework': 'Design language and framework', + 'app.home.design-values': 'Design values', + 'app.home.design-values-description': + 'This is an internal criterion for Ant Design to evaluate good design. Based on the assumption that "everyone pursues pleasure at work", we have added the two values of "Sense of Meaning" and "Growth" on the basis of "Determinism" and "Nature" to guide each designer to do better Judgment and decision making.', + 'app.home.certainty': 'Certain', + 'app.home.meaningful': 'Meaningful', + 'app.home.growth': 'Growing', + 'app.home.natural': 'Natural', + 'app.home.design-guide': 'Design guide', + 'app.home.components': 'components', + 'app.home.detail': 'Detail', + 'app.home.global-style': 'Global style', + 'app.home.design-patterns': 'Design patterns', + 'app.home.more': 'Learn More', + 'app.home.play-video': 'Play video', + 'app.home.getting-started': 'Getting Started', + 'app.home.design-language': 'Design Language', + 'app.home.product-antv-slogan': 'A new generation of data visualization solution', + 'app.home.product-pro-slogan': 'Out-of-box UI solution for enterprise applications', + 'app.home.product-mobile-slogan': 'Mobile UI components with Ant Design', + 'app.home.product-hitu': 'Hitu', + 'app.home.product-hitu-slogan': 'A new generation of graphical solutions', + 'app.home.product-kitchen-slogan': 'A Sketch toolset to enhance designers', + 'app.home.product-icons-slogan': 'A set of premium icons', + 'app.home.view-more': 'More articles', 'app.footer.repo': 'GitHub Repository', 'app.footer.awesome': 'Awesome Ant Design', 'app.footer.course': 'Ant Design Practical Tutorial', diff --git a/site/theme/static/common.less b/site/theme/static/common.less index e0f9e37975..7f6a40e62a 100644 --- a/site/theme/static/common.less +++ b/site/theme/static/common.less @@ -58,7 +58,7 @@ a { text-overflow: ellipsis; } - .ant-menu-item-group-title { + > .ant-menu-item-group > .ant-menu-item-group-title { margin-top: 16px; margin-bottom: 16px; font-size: 13px; @@ -77,10 +77,22 @@ a { > .ant-menu-item, > .ant-menu-submenu > .ant-menu-submenu-title, > .ant-menu-item-group > .ant-menu-item-group-title, - > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item { + > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item, + &.ant-menu-inline > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item { padding-left: 40px !important; } + // Nest Category > Type > Article + &.ant-menu-inline { + .ant-menu-item-group-title { + padding-left: 56px; + } + + .ant-menu-item-group-list > .ant-menu-item { + padding-left: 80px !important; + } + } + .ant-menu-item-group:first-child { .ant-menu-item-group-title { margin-top: 0; diff --git a/site/theme/static/header.less b/site/theme/static/header.less index 6dd9dbaea8..8874aa0425 100644 --- a/site/theme/static/header.less +++ b/site/theme/static/header.less @@ -1,3 +1,5 @@ +@import '../../../components/style/themes/default.less'; + @header-height: 64px; @menu-item-border: 2px; @@ -25,6 +27,66 @@ .ant-menu-item-active .header-link { color: @primary-color; } + + // ===================== Home Page ===================== + &.home-header { + position: absolute; + top: 0; + right: 0; + left: 0; + max-width: 1200px; + margin-right: auto; + margin-left: auto; + background: transparent; + box-shadow: none; + + #logo { + padding-left: 0; + } + + .ant-menu { + background: transparent; + } + + .header-lang-button { + margin-right: 0; + } + + // Adjust github button style + .github-btn { + float: right; + height: auto; + margin: 20px 0 0 16px; + + .gh-btn { + height: auto; + padding: 1px 4px; + background: transparent; + border: 0; + + .gh-ico { + width: 20px; + height: 20px; + margin: 0; + } + + .gh-text { + display: none; + } + } + + .gh-count { + height: auto; + padding: 4px 8px; + font-weight: normal; + background: #fff; + + &:hover { + color: #1890ff; + } + } + } + } } #logo { @@ -149,3 +211,9 @@ font-size: 12px; } } + +@media (max-width: @screen-sm-min) { + .github-btn { + display: none; + } +} diff --git a/site/theme/static/home.less b/site/theme/static/home.less index 0b1437cbfe..73f8c847f0 100644 --- a/site/theme/static/home.less +++ b/site/theme/static/home.less @@ -1,472 +1,2 @@ @home-bg-color: #2f54eb; @home-text-color: #314659; - -.home-page-wrapper { - position: relative; // will-change: transform; - width: 100%; - padding: 0; - overflow: hidden; - color: @home-text-color; - font-family: Avenir, @font-family, sans-serif; - - .page { - position: relative; - width: 100%; - max-width: 1200px; - margin: auto; - padding: 0 24px; - h2 { - margin: 140px auto 100px; - color: @home-text-color; - font-weight: 400; - font-size: 38px; - line-height: 46px; - text-align: center; - } - h1, - h2, - h3, - h4, - p { - will-change: transform; - } - } -} - -.banner-bg { - &-wrapper { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - overflow: hidden; - } - - position: absolute; - bottom: -200px; - left: 0%; - width: 120%; - height: 200px; - background: @home-bg-color; - transform: rotate(-4deg); - transform-origin: 0; -} - -.banner { - display: flex; - align-items: center; - height: 576px; - &-wrapper { - position: relative; - z-index: 1; - overflow: initial; - } - .text-wrapper { - width: 54%; - min-width: 420px; - max-width: 560px; - min-height: 400px; - color: @home-text-color; - > * { - will-change: transform; - } - h1 { - margin: 8px 0 28px; - font-weight: 600; - font-size: 68px; - font-family: Avenir, @font-family, sans-serif; - line-height: 76px; - letter-spacing: 0; - } - p { - color: @home-text-color; - font-size: 20px; - line-height: 40px; - } - } - - .img-wrapper { - position: absolute; - right: 0; - bottom: 26px; - width: 46%; - max-width: 482px; - - img { - max-width: 100%; - } - } - - .banner-btns { - display: flex; - align-items: center; - min-width: 520px; - margin-top: 24px; - - .banner-btn { - display: inline-block; - height: 40px; - padding: 0 24px; - font-size: 16px; - font-family: Avenir, @font-family, sans-serif; - line-height: 40px; - text-align: center; - text-decoration: none; - border: 1px solid @home-bg-color; - border-radius: 6px; - } - - .banner-btn.components { - color: #fff; - background: @home-bg-color; - } - - .banner-btn.language { - color: @home-bg-color; - } - } - - .banner-promote { - max-width: 100%; - margin: 48px 0 24px 0; - - .ant-divider-inner-text { - padding: 0 12px; - color: rgba(0, 0, 0, 0.25); - font-weight: normal; - font-size: 12px; - } - - a { - color: @home-text-color; - font-size: 16px; - transition: all 0.3s; - - .anticon { - position: relative; - left: 0; - transition: all 0.3s; - } - - &:hover { - color: @home-bg-color; - - .anticon { - left: 4px; - } - } - - img { - position: relative; - top: -1px; - width: 24px; - height: 24px; - margin-right: 8px; - } - } - } -} - -svg { - display: block; - g { - transform-origin: 50%; - transform-box: fill-box; - } -} - -/** page1 **/ - -.page1 { - min-height: 784px; - background: @home-bg-color; - background: linear-gradient(to bottom, rgba(47, 84, 235, 1) 0%, rgba(58, 64, 212, 1) 100%); - h2 { - color: #fff !important; - } - &-block { - position: relative; - z-index: 1; - display: block; - max-width: 160px; - margin: auto; - text-align: center; - h3 { - color: #fff; - font-weight: 400; - font-size: 20px; - } - p { - color: #fff; - } - &:hover .page1-image { - box-shadow: 0 6px 10px rgba(5, 26, 180, 0.35); - transform: translateY(-4px); - } - } - &-image { - display: flex; - align-items: center; - justify-content: center; - width: 120px; - height: 120px; - margin: 46px auto 40px; - background: #fff; - border-radius: 100%; - transition: transform 0.45s @ease-out, box-shadow 0.45s @ease-out; - img { - display: block; - } - } - &-point-wrapper { - position: absolute; - top: 0; - right: 0; - left: 0; - margin: auto; - overflow: inherit !important; - } -} - -/** page2 **/ - -.page2 { - min-height: 1110px; - padding-top: 1px; - overflow: initial; - background: #eff3f6; - .page { - position: relative; - z-index: 1; - h2 { - margin-bottom: 112px; - } - } - &-content { - background: @home-bg-color; - box-shadow: 0 12px 20px #d8e0e6; - } - &-components, - &-product { - min-height: 670px; - } - &-components { - position: initial; - padding: 56px; - color: #fff; - line-height: 32px; - background: @home-bg-color; - h3 { - margin: 0 auto 32px; - color: #fff; - font-size: 28px; - } - .components-button-wrapper { - position: absolute; - bottom: 48px; - left: 56px; - a { - display: block; - margin-top: 16px; - color: #fff; - line-height: 1.5em; - } - } - } - &-product { - padding: 48px 56px; - background: #fff; - .product-block { - margin-bottom: 24px; - color: @home-text-color; - &:last-child { - margin-bottom: 0; - .block-text-wrapper { - padding-bottom: 0; - border-bottom: none; - } - } - .block-text-wrapper { - position: relative; - padding-bottom: 24px; - border-bottom: 1px solid @site-border-color-split; - h4 { - position: relative; - display: inline-block; - margin-bottom: 8px; - font-size: 20px; - line-height: 28px; - white-space: nowrap; - .new { - position: absolute; - top: 50%; - right: 0; - display: inline-block; - padding: 0 2px; - color: #fff; - font-size: 12px; - line-height: 16px; - background: #f5222d; - border-radius: 4px; - transform: translate(~'calc(100% + 4px)', -50%); // 手机回行处理 - } - } - p { - margin-bottom: 16px; - line-height: 24px; - } - .more { - display: inline-block; - color: @home-bg-color; - line-height: 22px; - vertical-align: top; - i { - font-size: 12px; - vertical-align: middle; - } - } - .more-mobile-react, - .more-mobile-angular { - display: block; - margin-top: 8px; - color: @home-bg-color; - } - } - .block-image-wrapper { - display: flex; - align-items: center; - height: 104px; - img { - display: block; - max-width: 80%; - } - &.right { - justify-content: flex-end; - float: right; - } - } - } - - a.product-block:hover { - h4 { - color: @home-bg-color; - } - } - } -} - -.parallax-bg { - position: absolute; - top: 0; - left: 0; - z-index: 2; - width: 100%; - height: 100%; - pointer-events: none; - &.bottom { - z-index: 0; - } - &.top { - display: flex; - justify-content: center; - margin-top: 220px; - svg { - overflow: inherit; - } - } -} - -/** page3 **/ - -.page3 { - min-height: 556px; - &-block { - padding: 24px 12px; - a { - display: flex; - justify-content: center; - color: @home-text-color; - } - &:hover { - h3 { - color: @home-bg-color; - } - } - } - &-img-wrapper, - &-text-wrapper { - display: inline-block; - } - &-text-wrapper { - margin-top: 2px; - // max-width: 182px; - margin-left: 32px; - line-height: 24px; - h3 { - margin-bottom: 4px; - font-size: 20px; - line-height: 28px; - } - } - .parallax-bg.top { - margin: 0; - } -} - -/** video **/ - -.new-version-video { - position: fixed; - top: 0; - left: 0; - z-index: 9999; - width: 100vw; - height: 100vh; - background: #fbfbfb; - .vidoe-wrap { - width: 100%; - background: url('https://gw.alipayobjects.com/zos/rmsportal/gEeRuETmbpAYRaeilexm.jpg') repeat-x; - background-size: cover; - video { - display: block; - } - } -} - -.banner-1024 { - display: block; - cursor: pointer; - transition: all 0.4s; - - &:hover { - transform: translateY(-16px) scale(1.01); - } -} - -.github-btn-large { - height: 40px; - font-family: Avenir, @font-family, sans-serif; - line-height: 40px; - - .gh-btn, - .gh-count { - height: 40px; - padding: 9px; - background: transparent; - } - - .gh-count { - margin-left: 10px; - - &::after { - border-width: 7px 6px 7px 0; - } - } -} - -@supports (-moz-appearance: meterbar) { - .en-us .banner-btn { - line-height: 38px !important; - } -} diff --git a/site/theme/static/preview-img.less b/site/theme/static/preview-img.less index d7e0fc5da4..f54cb5e4af 100644 --- a/site/theme/static/preview-img.less +++ b/site/theme/static/preview-img.less @@ -128,6 +128,7 @@ padding-bottom: 24px; img { display: inline; + max-width: 100%; } } .slick-dots { diff --git a/site/theme/template/Content/MainContent.jsx b/site/theme/template/Content/MainContent.jsx index 791db5d9c7..bad639f51a 100644 --- a/site/theme/template/Content/MainContent.jsx +++ b/site/theme/template/Content/MainContent.jsx @@ -126,7 +126,18 @@ class MainContent extends Component { if (menuItem.children) { return ( - {menuItem.children.map(child => this.generateMenuItem(false, child, footerNavIcons))} + {menuItem.children.map(child => { + if (child.type === 'type') { + return ( + + {child.children + .sort((a, b) => a.title.charCodeAt(0) - b.title.charCodeAt(0)) + .map(leaf => this.generateMenuItem(false, leaf, footerNavIcons))} + + ); + } + return this.generateMenuItem(false, child, footerNavIcons); + })} ); } diff --git a/site/theme/template/Home/Banner.jsx b/site/theme/template/Home/Banner.jsx deleted file mode 100644 index 91e98dc4c0..0000000000 --- a/site/theme/template/Home/Banner.jsx +++ /dev/null @@ -1,133 +0,0 @@ -import React from 'react'; -import TweenOne from 'rc-tween-one'; -import QueueAnim from 'rc-queue-anim'; -import ScrollParallax from 'rc-scroll-anim/lib/ScrollParallax'; -import { Link } from 'bisheng/router'; -import { FormattedMessage, useIntl } from 'react-intl'; -import GitHubButton from 'react-github-button'; -import { Button, Divider } from 'antd'; -import { RightOutlined } from '@ant-design/icons'; -import BannerImage from './BannerImage'; -import * as utils from '../utils'; - -const loop = { - duration: 3000, - yoyo: true, - repeat: -1, -}; - -const Banner = ({ isMobile }) => { - const { locale } = useIntl(); - const isZhCN = locale === 'zh-CN'; - return ( - - ); -}; - -export default Banner; diff --git a/site/theme/template/Home/Banner/Background.less b/site/theme/template/Home/Banner/Background.less new file mode 100644 index 0000000000..625f620d0d --- /dev/null +++ b/site/theme/template/Home/Banner/Background.less @@ -0,0 +1,35 @@ +@import '../../../../../components/style/themes/default.less'; + +.home-banner-background { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + + > * { + width: 100%; + height: 100%; + vertical-align: top; + } + + > img { + display: block; + } + + > svg { + display: none; + } +} + +@media (min-width: @screen-sm-min) { + .home-banner-background { + > img { + display: none; + } + + > svg { + display: block; + } + } +} diff --git a/site/theme/template/Home/Banner/Background.tsx b/site/theme/template/Home/Banner/Background.tsx new file mode 100644 index 0000000000..697916f9f7 --- /dev/null +++ b/site/theme/template/Home/Banner/Background.tsx @@ -0,0 +1,186 @@ +import * as React from 'react'; +import Hitu from '@ant-design/hitu'; +import './Background.less'; + +const RANDOM_OFFSET = 20; +const TOTAL_FRAMES = 500; + +function randomFrames(x: number, y: number): any[] { + const common = { x, y, cubic: Hitu.CUBIC_EASE_IN_OUT }; + + return [ + { + frame: 0, + ...common, + }, + { + frame: TOTAL_FRAMES / 2, + ...common, + x: x - Math.random() * RANDOM_OFFSET * 2 + RANDOM_OFFSET, + y: y - Math.random() * RANDOM_OFFSET * 2 + RANDOM_OFFSET, + }, + { + frame: TOTAL_FRAMES, + ...common, + }, + ]; +} + +const ShadowSize = 30; + +// =================================== Circle 1 =================================== +const CircleSize1 = 140; +const Circle1 = () => ( + + + + + + + +); +Circle1.width = (CircleSize1 + ShadowSize) * 2; +Circle1.height = (CircleSize1 + ShadowSize) * 2; + +// =================================== Circle 2 =================================== +const CircleSize2 = 200; +const Circle2 = () => ( + + + + + + + +); +Circle2.width = (CircleSize2 + ShadowSize) * 2; +Circle2.height = (CircleSize2 + ShadowSize) * 2; + +// ==================================== Rect 1 ==================================== +const ReactSize1 = 90; +const React1 = () => ( + + + + + + + +); +React1.width = (ReactSize1 + ShadowSize) * 2; +React1.height = (ReactSize1 + ShadowSize) * 2; + +// ================================== Diamond 1 =================================== +const DiamondSize1 = 180; +const Diamond1 = () => { + const start = ShadowSize; + const center = ShadowSize + DiamondSize1; + const end = ShadowSize + DiamondSize1 * 2; + + return ( + + + + + + + + + ); +}; +Diamond1.width = (DiamondSize1 + ShadowSize) * 2; +Diamond1.height = (DiamondSize1 + ShadowSize) * 2; + +export default function Background() { + const [circleFrames, setCircleFrames] = React.useState(randomFrames(550, 200)); + const [circle2Frames, setCircle2Frames] = React.useState(randomFrames(0, 448)); + const [reactFrames, setReactFrames] = React.useState(randomFrames(1400, 300)); + const [diamondFrames, setDiamondFrames] = React.useState(randomFrames(1100, 0)); + + return ( +
+ background + { + if (frame === 0) { + setCircleFrames(randomFrames(550, 200)); + setCircle2Frames(randomFrames(0, 448)); + setReactFrames(randomFrames(1400, 300)); + setDiamondFrames(randomFrames(1100, 0)); + } + }} + shapes={[ + { + type: 'shape', + source: Circle1, + frames: circleFrames, + }, + { + type: 'shape', + source: Circle2, + frames: circle2Frames, + }, + { + type: 'shape', + source: React1, + frames: reactFrames, + }, + { + type: 'shape', + source: Diamond1, + frames: diamondFrames, + }, + ]} + /> +
+ ); +} diff --git a/site/theme/template/Home/Banner/Logo.less b/site/theme/template/Home/Banner/Logo.less new file mode 100644 index 0000000000..227c55158e --- /dev/null +++ b/site/theme/template/Home/Banner/Logo.less @@ -0,0 +1,43 @@ +@import '../../../../../components/style/themes/default.less'; + +.home-card-logo { + position: relative; + display: inline-block; + max-width: 490px; + margin: 0 32px; + cursor: pointer; + + .home-card-logo-icon { + position: absolute; + top: -35px; + left: 334px; + display: none; + width: 64px; + height: 64px; + } + + .home-banner-mini { + display: block; + max-width: 100%; + } + .home-banner-normal { + display: none; + } +} + +@media (min-width: @screen-sm-min) { + .home-card-logo { + height: 90px; + vertical-align: top; + + .home-banner-mini { + display: none; + } + .home-banner-normal { + display: block; + } + .home-card-logo-icon { + display: block; + } + } +} diff --git a/site/theme/template/Home/Banner/Logo.tsx b/site/theme/template/Home/Banner/Logo.tsx new file mode 100644 index 0000000000..e26bb65f46 --- /dev/null +++ b/site/theme/template/Home/Banner/Logo.tsx @@ -0,0 +1,114 @@ +import * as React from 'react'; +import Hitu from '@ant-design/hitu'; +import { HiTuRefObject } from '@ant-design/hitu/lib/HiTu'; +import './Logo.less'; +import { preLoad } from '../util'; + +const ICON_IMAGES = [ + 'https://gw.alipayobjects.com/zos/basement_prod/fef2f3d5-9326-48e3-a8f3-a99584efd425.svg', + 'https://gw.alipayobjects.com/zos/basement_prod/95736b64-de90-4fcd-bae9-a827091a247d.svg', + 'https://gw.alipayobjects.com/zos/basement_prod/7002f57b-bf16-4640-8373-2c4cfcfa7f8c.svg', + 'https://gw.alipayobjects.com/zos/basement_prod/29aa8cd8-de97-42b8-a370-f901be43e18a.svg', + 'https://gw.alipayobjects.com/zos/basement_prod/d7bc5cdf-07f9-4ddf-8135-78d3cc6ca009.svg', + 'https://gw.alipayobjects.com/zos/basement_prod/8737ccb7-3b5d-40ca-ae36-6a904047caa4.svg', + 'https://gw.alipayobjects.com/zos/basement_prod/1fdf5981-2d9d-4315-bb84-4590d5c5b989.svg', + 'https://gw.alipayobjects.com/zos/basement_prod/b9d17ebc-2af1-4926-ba1b-c1376ddaa479.svg', + 'https://gw.alipayobjects.com/zos/basement_prod/dcb1b8f8-becd-4f90-ba32-574260a7b18d.svg', + 'https://gw.alipayobjects.com/zos/basement_prod/ba0958ce-b194-4910-84de-7e3274742dbb.svg', + 'https://gw.alipayobjects.com/zos/basement_prod/ad510b94-5f85-4b30-b929-2e3a34ad673c.svg', + 'https://gw.alipayobjects.com/zos/basement_prod/43d010fa-71ac-44e3-8475-bb77d95c331c.svg', +]; + +preLoad(ICON_IMAGES); + +const AntDesign = () => ( + + + +); + +AntDesign.width = 32; +AntDesign.height = 32; + +const ICONS = ICON_IMAGES.map(href => { + function Icon() { + return ( + + {/* Image size will follow outer svg size, let's cut to half here */} + + + ); + } + + Icon.width = 32; + Icon.height = 32; + + return Icon; +}); + +export default function Logo() { + const hituRef = React.useRef(null); + const [loop, setLoop] = React.useState(false); + const [iconIndex, setIconIndex] = React.useState(-1); + const Icon = ICONS[iconIndex] || AntDesign; + + return ( +
{ + setLoop(true); + if (hituRef.current) { + hituRef.current.triggerMotion(true); + } + }} + onMouseLeave={() => { + setLoop(false); + }} + > + Ant Design + Ant Design + { + if (frame === 5) { + const newIndex = (iconIndex + 1) % ICONS.length; + setIconIndex(newIndex); + } + }} + shapes={[ + { + type: 'shape', + source: Icon, + frames: [ + { + frame: 0, + x: 32, + y: 32, + scaleX: 1, + scaleY: 1, + opacity: 1, + cubic: Hitu.CUBIC_EASE, + }, + ], + }, + ]} + /> +
+ ); +} diff --git a/site/theme/template/Home/Banner/index.less b/site/theme/template/Home/Banner/index.less new file mode 100644 index 0000000000..c54fc14d91 --- /dev/null +++ b/site/theme/template/Home/Banner/index.less @@ -0,0 +1,90 @@ +@import '../../../../../components/style/themes/default.less'; + +@home-color: #0170fe; + +.home-banner { + position: relative; + height: 512px; + overflow: hidden; + background: radial-gradient(rgba(255, 255, 255, 0.5), rgba(235, 245, 255, 0.58)), + linear-gradient(150deg, #fbfcfd, #f8fcff); + + &-holder { + position: relative; + z-index: 1; + margin-top: 160px; + } + + &-content { + margin: 0 auto; + padding: 0 16px; + font-size: 14px; + text-align: center; + + p { + margin: 16px 0 0; + font-weight: lighter; + } + + .banner-video { + display: none; + margin: 20px auto 0; + color: @home-color; + } + + &-operations { + margin-top: 72px; + white-space: nowrap; + + button { + height: auto; + margin: 0 8px; + padding: 8px 24px; + font-size: 14px; + border-color: @home-color; + + &:hover { + border-color: @home-color; + } + + &.ant-btn-primary { + background: @home-color; + } + + &:not(.ant-btn-primary) { + color: @home-color; + } + } + } + } +} + +@media (min-width: @screen-sm-min) { + .home-banner { + height: 448px; + + &-holder { + margin-top: 130px; + } + + &-content { + font-size: 16px; + + p { + margin-top: 24px; + } + + .video { + margin: 8px auto; + } + + &-operations { + margin-top: 40px; + + button { + font-size: 16px; + } + } + } + } +} diff --git a/site/theme/template/Home/Banner/index.tsx b/site/theme/template/Home/Banner/index.tsx new file mode 100644 index 0000000000..46188f33fe --- /dev/null +++ b/site/theme/template/Home/Banner/index.tsx @@ -0,0 +1,49 @@ +import * as React from 'react'; +import { Button } from 'antd'; +import { Link } from 'bisheng/router'; +import { FormattedMessage, useIntl } from 'react-intl'; +import { PlayCircleFilled } from '@ant-design/icons'; +import Background from './Background'; +import { getLocalizedPathname } from '../../utils'; +import Logo from './Logo'; + +import './index.less'; + +export default function Banner() { + const { locale } = useIntl(); + const isZhCN = locale === 'zh-CN'; + + return ( +
+ + +
+
+
+ +
+

+ +

+ + + + + +
+ + + + + + +
+
+
+
+ ); +} diff --git a/site/theme/template/Home/BannerImage.jsx b/site/theme/template/Home/BannerImage.jsx deleted file mode 100644 index a40daa7a90..0000000000 --- a/site/theme/template/Home/BannerImage.jsx +++ /dev/null @@ -1,257 +0,0 @@ -import React from 'react'; -import TweenOne from 'rc-tween-one'; -import PathPlugin from 'rc-tween-one/lib/plugin/PathPlugin'; -import moment from 'moment'; - -TweenOne.plugins.push(PathPlugin); -const duration = 7000; -const ease = 'easeInOutSine'; -const p = - 'M123.5,89.5 C148,82.5 239.5,48.5 230,17.5 C220.5,-13.5 127,6 99.5,13.5 C72,21 -9.5,56.5 1.5,84.5 C12.5,112.5 99,96.5 123.5,89.5 Z'; -const easePath = - 'M0,100 C7.33333333,89 14.3333333,81.6666667 21,78 C25.3601456,75.6019199 29.8706084,72.9026327 33,70 C37.0478723,66.2454406 39.3980801,62.0758689 42.5,57 C48,46.5 61.5,32.5 70,28 C77.5,23.5 81.5,20 86.5,16 C89.8333333,13.3333333 94.3333333,8 100,0'; -const loop = { - yoyo: true, - repeat: -1, - duration, - ease, -}; -const animate = { - path: { - path: { x: p, y: p }, - duration: 5000, - repeat: -1, - ease: TweenOne.easing.path(easePath, { lengthPixel: 400 }), - }, - rotate: { - ...loop, - rotate: 15, - }, - rotateR: { - ...loop, - rotate: -15, - }, - yGroup: { - ...loop, - y: 24, - }, - track: { - ...loop, - rotate: 15, - }, - rotateY: { - ...loop, - y: 24, - rotate: 15, - }, - y: { - ...loop, - y: 15, - duration: 3000, - }, - yR: { - ...loop, - y: -15, - duration: 3000, - }, -}; - -function TweenOneG(props) { - return ; -} - -export default function BannerImage() { - if (moment().format('YYYY-MM-DD') === '2018-10-24') { - return ( - - 1024 - - ); - } - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -} diff --git a/site/theme/template/Home/DesignPage/Certainty.tsx b/site/theme/template/Home/DesignPage/Certainty.tsx new file mode 100644 index 0000000000..f06817a2aa --- /dev/null +++ b/site/theme/template/Home/DesignPage/Certainty.tsx @@ -0,0 +1,61 @@ +import * as React from 'react'; +import Hitu from '@ant-design/hitu'; +import { Shape, FrameInfo } from '@ant-design/hitu/lib/interface'; +import InteractiveIcon from './InteractiveIcon'; + +function Rect() { + return ; +} + +Rect.width = 14; +Rect.height = 14; + +function getFrames(x: number, y: number): FrameInfo[] { + const delay = (x + y) * 5 + 1; + + const position = { + x: x * (14 + 12) + 21, + y: y * (14 + 12) + 21, + }; + + return [ + { + frame: 0, + rotate: 0, + ...position, + }, + { + frame: delay, + rotate: 0, + ...position, + cubic: Hitu.CUBIC_EASE, + }, + { + frame: 15 + delay, + scaleX: 1.3, + scaleY: 1.3, + cubic: Hitu.CUBIC_EASE, + }, + { + frame: 30 + delay, + scaleX: 1, + scaleY: 1, + }, + ]; +} + +const shapes: Shape[] = []; + +for (let x = 0; x < 4; x += 1) { + for (let y = 0; y < 4; y += 1) { + shapes.push({ + type: 'shape', + source: Rect, + frames: getFrames(x, y), + }); + } +} + +export default function Certainty() { + return ; +} diff --git a/site/theme/template/Home/DesignPage/Growth.tsx b/site/theme/template/Home/DesignPage/Growth.tsx new file mode 100644 index 0000000000..18a4fff7d9 --- /dev/null +++ b/site/theme/template/Home/DesignPage/Growth.tsx @@ -0,0 +1,101 @@ +import * as React from 'react'; +import Hitu from '@ant-design/hitu'; +import { Shape, FrameInfo } from '@ant-design/hitu/lib/interface'; +import InteractiveIcon from './InteractiveIcon'; + +function Arrow() { + return ( + + ); +} + +Arrow.width = 84; +Arrow.height = 70; + +function Rect() { + return ; +} + +Rect.width = 10; +Rect.height = 10; + +const rectShared: Partial = { + originX: 0, + originY: 1, + y: 98, +}; + +const rectDistance = Rect.width + 9; +function getRectFrames(scaleY: number, index: number): FrameInfo[] { + const delay = index * 3; + + return [ + { + frame: 0, + scaleY, + ...rectShared, + x: 18 + rectDistance * index, + cubic: Hitu.CUBIC_EASE, + }, + { + frame: 1 + delay, + scaleY: 0, + cubic: Hitu.CUBIC_EASE, + }, + { + frame: 30 + delay, + scaleY: scaleY * 1.05, + }, + { + frame: 40 + delay, + scaleY: scaleY * 0.95, + }, + { + frame: 50 + delay, + scaleY, + }, + ]; +} + +const shapes: Shape[] = [ + { + type: 'shape', + source: Arrow, + frames: [ + { + frame: 0, + originX: 0, + originY: 0, + x: 20, + y: 12, + opacity: 1, + cubic: Hitu.CUBIC_EASE, + }, + { + frame: 1, + y: 17, + opacity: 0, + }, + { + frame: 30, + y: 12, + opacity: 1, + }, + ], + }, +]; + +[1.2, 2.1, 3.1, 4.5, 6].forEach((scaleY, index) => { + shapes.push({ + type: 'shape', + source: Rect, + frames: getRectFrames(scaleY, index), + }); +}); + +export default function Meaningful() { + return ; +} diff --git a/site/theme/template/Home/DesignPage/InteractiveIcon.tsx b/site/theme/template/Home/DesignPage/InteractiveIcon.tsx new file mode 100644 index 0000000000..479ce6b3b4 --- /dev/null +++ b/site/theme/template/Home/DesignPage/InteractiveIcon.tsx @@ -0,0 +1,45 @@ +import * as React from 'react'; +import Hitu, { HiTuRefObject } from '@ant-design/hitu'; +import { Shape } from '@ant-design/hitu/lib/interface'; + +const HOVER_LOOP = false; + +export interface InteractiveIconProps { + shapes: Shape[]; + debug?: boolean; + frames?: number; +} + +export default function InteractiveIcon({ shapes, debug, frames }: InteractiveIconProps) { + const hituRef = React.useRef(null); + const [loop, setLoop] = React.useState(false); + + return ( + { + if (HOVER_LOOP) { + setLoop(true); + } + + if (hituRef.current) { + hituRef.current.triggerMotion(true); + } + }} + onMouseLeave={() => { + setLoop(false); + }} + > + + + ); +} diff --git a/site/theme/template/Home/DesignPage/Meaningful.tsx b/site/theme/template/Home/DesignPage/Meaningful.tsx new file mode 100644 index 0000000000..d1cb1bdf4e --- /dev/null +++ b/site/theme/template/Home/DesignPage/Meaningful.tsx @@ -0,0 +1,86 @@ +import * as React from 'react'; +import Hitu from '@ant-design/hitu'; +import { Shape } from '@ant-design/hitu/lib/interface'; +import InteractiveIcon from './InteractiveIcon'; + +function Heart() { + return ( + + ); +} + +Heart.width = 26; +Heart.height = 24; + +function Circle() { + return ; +} + +Circle.width = 72; +Circle.height = 72; + +const center = { x: 60, y: 60 }; + +const shapes: Shape[] = [ + { + type: 'shape', + source: Circle, + frames: [ + { + frame: 0, + scaleX: 1.3, + scaleY: 1.3, + opacity: 0.4, + ...center, + }, + { + frame: 20, + scaleX: 1.5, + scaleY: 1.5, + opacity: 0, + }, + { + frame: 21, + scaleX: 1, + scaleY: 1, + opacity: 0, + }, + { + frame: 40, + scaleX: 1.3, + scaleY: 1.3, + opacity: 0.4, + }, + ], + }, + { + type: 'shape', + source: Circle, + frames: [ + { + frame: 0, + scaleX: 1, + scaleY: 1, + ...center, + }, + ], + }, + { + type: 'shape', + source: Heart, + frames: [ + { + frame: 0, + ...center, + cubic: Hitu.CUBIC_EASE, + }, + ], + }, +]; + +export default function Meaningful() { + return ; +} diff --git a/site/theme/template/Home/DesignPage/Natural.tsx b/site/theme/template/Home/DesignPage/Natural.tsx new file mode 100644 index 0000000000..07f1a35a07 --- /dev/null +++ b/site/theme/template/Home/DesignPage/Natural.tsx @@ -0,0 +1,124 @@ +import * as React from 'react'; +import Hitu, { Shape } from '@ant-design/hitu'; +import InteractiveIcon from './InteractiveIcon'; + +const CenterLeaf = () => ( + + + +); +CenterLeaf.width = 40; +CenterLeaf.height = 52; + +const LeftLeaf = () => ( + + + + +); +LeftLeaf.width = 38; +LeftLeaf.height = 38; + +const RightLeaf = () => ( + + + +); +RightLeaf.width = 38; +RightLeaf.height = 38; + +const shapes: Shape[] = [ + { + type: 'shape', + source: CenterLeaf, + frames: [ + { frame: 0, originY: 1, x: 60, y: 62, rotate: 0 }, + { frame: 30, rotate: -7 }, + { frame: 60, rotate: 9 }, + { frame: 90, rotate: -7 }, + { frame: 120, rotate: 0 }, + ], + }, + { + type: 'shape', + source: LeftLeaf, + frames: [ + { + frame: 0, + originX: 1, + originY: 1, + x: 56, + y: 96, + cubic: Hitu.CUBIC_EASE_IN_OUT, + }, + { + frame: 30, + rotate: -4, + + cubic: Hitu.CUBIC_EASE_IN_OUT, + }, + { + frame: 60, + rotate: 6, + cubic: Hitu.CUBIC_EASE_IN_OUT, + }, + { + frame: 90, + rotate: -4, + }, + { + frame: 120, + rotate: 0, + }, + ], + }, + { + type: 'shape', + source: RightLeaf, + frames: [ + { + frame: 0, + originX: 0, + originY: 1, + x: 64, + y: 96, + }, + { + frame: 30, + rotate: -4, + cubic: Hitu.CUBIC_EASE_IN_OUT, + }, + { + frame: 60, + rotate: 6, + cubic: Hitu.CUBIC_EASE_IN_OUT, + }, + { + frame: 90, + rotate: -4, + }, + { + frame: 120, + rotate: 0, + }, + ], + }, +]; + +export default function Natural() { + return ; +} diff --git a/site/theme/template/Home/DesignPage/index.less b/site/theme/template/Home/DesignPage/index.less new file mode 100644 index 0000000000..574301f45a --- /dev/null +++ b/site/theme/template/Home/DesignPage/index.less @@ -0,0 +1,175 @@ +@import '../../../../../components/style/themes/default.less'; + +.design-card { + position: relative; + min-height: 278px; + padding: 32px 40px; + color: #697b8c; + line-height: 2; + background: rgba(0, 0, 0, 0.1); + + &.main-card { + background-image: url(https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*i1EySrFVZvAAAAAAAAAAAABkARQnAQ); + background-size: cover; + } + + h3, + h4 { + color: #0d1a26; + } + + a { + color: #2f54eb; + } + + .design-card-detail { + position: absolute; + bottom: 0; + left: 0; + } + + .design-values { + text-align: center; + + img { + display: block; + display: none; + width: 56px; + height: 56px; + margin: 20px auto 0; + } + + h4 { + margin-top: 18px; + font-weight: normal; + } + } + + &.sub-card { + padding: 0; + + .card-info { + display: flex; + flex-direction: column; + padding: 40px 0 32px 40px; + + ul { + margin-top: auto; + + li { + margin-top: 16px; + + a { + color: #2f54eb; + } + } + } + } + } +} + +.design-mini-panel { + .ant-card-meta-title { + color: #0d1a26; + font-weight: 400; + font-size: 20px; + } + + .ant-card-body { + padding: 16px 20px 20px 20px; + } + + .ant-card-meta-description { + color: #697b8c; + } +} + +@media (min-width: @screen-sm-min) { + .design-card { + &.sub-card { + background-image: none !important; + } + } +} + +@media (max-width: @screen-sm-min) { + .design-card { + height: 478px; + padding: 24px 16px; + + &.main-card { + height: auto; + padding-bottom: 16px; + background-image: url(https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*a8u5Q4QIJzcAAAAAAAAAAABkARQnAQ); + } + + h3.ant-typography { + margin-bottom: 16px; + font-size: 18px; + } + + .design-card-detail { + position: relative; + display: block; + margin-top: 12px; + line-height: 22px; + } + + .design-values { + img { + display: block; + } + + svg { + display: none; + } + + h4 { + margin-top: 8px; + } + } + + &.sub-card { + padding: 0; + line-height: 1.5; + background-repeat: no-repeat !important; + background-position: left 50% bottom 0% !important; + background-size: contain !important; + + h3.ant-typography { + margin-bottom: 4px; + } + + .card-info { + padding: 24px 16px 0; + } + + ul { + margin-top: auto; + + li { + margin-top: 12px; + } + } + } + + .design-card-img-col { + display: none; + } + } + + .design-mini-panels { + margin-top: -23px !important; + + .design-mini-panel { + .ant-card-body { + padding: 16px 16px 20px; + + .ant-card-meta-title { + margin-bottom: 4px; + font-size: 18px; + } + } + } + } +} diff --git a/site/theme/template/Home/DesignPage/index.tsx b/site/theme/template/Home/DesignPage/index.tsx new file mode 100644 index 0000000000..07c30c3405 --- /dev/null +++ b/site/theme/template/Home/DesignPage/index.tsx @@ -0,0 +1,284 @@ +import * as React from 'react'; +import { Row, Col, Typography, Card } from 'antd'; +import { RightOutlined } from '@ant-design/icons'; +import { FormattedMessage, useIntl } from 'react-intl'; +import { Link } from 'bisheng/router'; +import { getLocalizedPathname } from '../../utils'; +import './index.less'; +import Certainty from './Certainty'; +import Meaningful from './Meaningful'; +import Growth from './Growth'; +import Natural from './Natural'; + +const { Title } = Typography; + +interface PanelProps { + img: string; + title: React.ReactNode; + description: string; + href?: string; + link?: string; +} + +const MINI_LIST: PanelProps[] = [ + { + img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ZhzDQLMyYlYAAAAAAAAAAABkARQnAQ', + title: 'AntV', + description: 'app.home.product-antv-slogan', + href: 'https://antv.vision', + }, + { + img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*I-ygS5prYksAAAAAAAAAAABkARQnAQ', + title: 'Ant Design Pro', + description: 'app.home.product-pro-slogan', + href: 'https://pro.ant.design/', + }, + { + img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*mb-WQILTlSEAAAAAAAAAAABkARQnAQ', + title: 'Ant Design Mobile', + description: 'app.home.product-mobile-slogan', + href: 'https://mobile.ant.design/', + }, + { + img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*PrLWSpmWZmIAAAAAAAAAAABkARQnAQ', + title: , + description: 'app.home.product-hitu-slogan', + link: '/docs/spec/illustration', + }, + { + img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*MaL2SYtHPuMAAAAAAAAAAABkARQnAQ', + title: 'Kitchen', + description: 'app.home.product-kitchen-slogan', + href: 'https://kitchen.alipay.com/', + }, + { + img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*T_HeSIJ30IIAAAAAAAAAAABkARQnAQ', + title: 'Icons', + description: 'app.home.product-icons-slogan', + link: '/components/icon/', + }, +]; + +const MiniPanel = ({ + title, + img, + description, + href, + link, + isZhCN, +}: PanelProps & { isZhCN: boolean }) => { + let content = ( + } + > + } /> + + ); + + if (href) { + content = ( + + {content} + + ); + } else if (link) { + content = {content}; + } + + return ( + + {content} + + ); +}; + +export default function DesignPage() { + const { locale } = useIntl(); + const isZhCN = locale === 'zh-CN'; + + return ( +
+ {/* ***************************** Group 1 ***************************** */} + + {/* *********************** Design Values *********************** */} + +
+ + <FormattedMessage id="app.home.design-values" /> + + + + + + + + + + + + + + + certainty + +

+ +

+ + + meaningful + +

+ +

+ + + growth + +

+ +

+ + + natural + +

+ +

+ + + + +
+ + + {/* *********************** Design Guides *********************** */} + +
+ + + + <FormattedMessage id="app.home.design-guide" /> + + +
    +
  • + + + + +
    • +
  • + + + + +
    • +
+ + + design guide + + +
+ + + {/* ************************* Component ************************* */} + +
+ + + + <FormattedMessage id="app.home.components" /> + + + + + + components + + +
+ + + + {/* ***************************** Group 2 ***************************** */} + + {MINI_LIST.map(panel => ( + + ))} + +
+ ); +} diff --git a/site/theme/template/Home/MorePage.less b/site/theme/template/Home/MorePage.less new file mode 100644 index 0000000000..df2b877607 --- /dev/null +++ b/site/theme/template/Home/MorePage.less @@ -0,0 +1,64 @@ +@import '../../../../components/style/themes/default.less'; + +.more-card { + .ant-card-cover { + padding: 24px 24px 0 24px; + } + + .ant-card-body { + color: #314659; + } + + .ant-card-meta-detail { + display: flex; + flex-direction: column; + min-height: 170px; + + .ant-card-meta-title { + margin-bottom: 16px; + color: #0d1a26; + font-weight: 400; + white-space: normal; + text-overflow: initial; + word-break: break-word; + } + + .ant-card-meta-description { + flex: auto; + color: #697b8c; + } + } + + .more-card-source { + float: right; + + > img { + vertical-align: baseline; + } + } +} + +@media (max-width: @screen-sm-min) { + .more-card { + .ant-card-cover { + margin-bottom: 12px; + padding: 16px 16px 0 16px; + + img { + height: 184px; + } + } + + .ant-card-meta-title { + font-size: 18px; + } + + .ant-card-body { + padding: 16px; + + .ant-card-meta-detail { + min-height: 150px; + } + } + } +} diff --git a/site/theme/template/Home/MorePage.tsx b/site/theme/template/Home/MorePage.tsx new file mode 100644 index 0000000000..59ffea71ed --- /dev/null +++ b/site/theme/template/Home/MorePage.tsx @@ -0,0 +1,82 @@ +import * as React from 'react'; +import { Card, Row, Col } from 'antd'; +import './MorePage.less'; + +interface MoreProps { + title: string; + description: string; + date: string; + img: string; + source: 'zhihu' | 'yuque'; + href: string; +} + +const SourceImages = { + zhihu: 'https://gw.alipayobjects.com/zos/basement_prod/5f4e1fd0-d255-4309-b181-a3715a720ebe.svg', + yuque: 'https://gw.alipayobjects.com/zos/basement_prod/53e7a5b8-c9f4-45a4-8378-cbf50f2dd0d0.svg', +}; + +const MORE_LIST: MoreProps[] = [ + { + title: 'Ant Design 1.0 背后的故事：把艺术变成技术', + description: '本文将跟大家分享 Ant Design 1.0 诞生背后的故事，还原 3-4 年前那些事、那些人。', + img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Cu8LRZW_AqgAAAAAAAAAAABkARQnAQ', + date: '2019-11-07', + source: 'yuque', + href: 'https://www.yuque.com/lyndon/daylesson/xw45g0', + }, + { + title: '「人机自然交互」Ant Design 设计价值观解析', + description: '为何选择「自然」作为设计价值观？本文会详细阐述这背后的思考和实践。', + img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*V-w4Q6EvVWsAAAAAAAAAAABkARQnAQ', + date: '2019-09-26', + source: 'zhihu', + href: 'https://zhuanlan.zhihu.com/p/44809866', + }, + { + title: 'Ant Design 色板生成算法演进之路', + description: + '「确定」 作为设计价值观之一，在调色板中发挥得淋漓尽致，既做到设计有迹可循，也提高代码的可维护性。', + img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*2iP4TLjiZMwAAAAAAAAAAABkARQnAQ', + date: '2018-03-13', + source: 'zhihu', + href: 'https://zhuanlan.zhihu.com/p/32422584', + }, + { + title: '2019，优雅的 AntV 来了', + description: + '对可视化系统而言，设计正是把不确定的海量、高维、非结构化的数据用准确、有效的方式传递。', + img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*_9JJSpF6T6oAAAAAAAAAAABkARQnAQ', + date: '2019-11-25', + source: 'zhihu', + href: 'https://zhuanlan.zhihu.com/p/93620507', + }, +]; + +const MoreCard = ({ title, description, date, img, source, href }: MoreProps) => { + return ( + + + } className="more-card"> + +
+ {date} + + {source} + +
+ + + + ); +}; + +export default function MorePage() { + return ( + + {MORE_LIST.map(more => ( + + ))} + + ); +} diff --git a/site/theme/template/Home/Page1.jsx b/site/theme/template/Home/Page1.jsx deleted file mode 100644 index 349405b412..0000000000 --- a/site/theme/template/Home/Page1.jsx +++ /dev/null @@ -1,321 +0,0 @@ -import React from 'react'; -import { TweenOneGroup } from 'rc-tween-one'; -import QueueAnim from 'rc-queue-anim'; -import { Row, Col } from 'antd'; -import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack'; -import { Link } from 'bisheng/router'; -import { FormattedMessage } from 'react-intl'; -import * as utils from '../utils'; - -const page1Data = [ - { - img: 'https://gw.alipayobjects.com/zos/rmsportal/URIeCOKLMAbRXaeXoNqN.svg', - name: '设计价值观', - nameEn: 'Design Values', - to: '/docs/spec/values', - svgBg: ( - - - - - - - - - - - - - - - - - ), - }, - { - img: 'https://gw.alipayobjects.com/zos/rmsportal/qXncdwwUTTgUFnsbCNCE.svg', - name: '视觉', - nameEn: 'Visual', - to: '/docs/spec/colors', - svgBg: ( - - - - - - - - - - - - - - - ), - }, - { - img: 'https://gw.alipayobjects.com/zos/rmsportal/YFXXZocxAgjReehpPNbX.svg', - name: '可视化', - nameEn: 'Visualization', - to: '/docs/spec/visual', - svgBg: ( - - - - - - - - - - - - - - - ), - }, - { - img: 'https://gw.alipayobjects.com/zos/rmsportal/VPuetGsvJuYBwoDkZWFW.svg', - name: '动效', - nameEn: 'Animation', - to: '/docs/spec/motion', - svgBg: ( - - - - - - - - - - - - - - - ), - }, -]; - -const getTransformXY = t => { - const s = t.replace(/[a-z()]/g, '').split(','); - return { - x: s[0], - y: s[1], - }; -}; - -const svgToXY = page1Data.map(item => { - const c = item.svgBg.props.children; - return c.map(child => { - const p = child.props; - const trnasformXY = p.transform ? getTransformXY(p.transform) : {}; - return { - x: parseFloat(p.x || p.cx || trnasformXY.x), - y: parseFloat(p.y || p.cy || trnasformXY.y), - }; - }); -}); - -export default class Page1 extends React.PureComponent { - state = { - hoverKey: null, - }; - - leave = { - opacity: 0, - duration: 300, - x: 100, - y: 150, - ease: 'easeInBack', - }; - - onMouseOver = key => { - this.setState({ - hoverKey: key, - }); - }; - - onMouseOut = () => { - this.setState({ - hoverKey: null, - }); - }; - - getEnter = (i, e) => { - const ii = e.index; - const r = Math.random() * 2 - 1; - const y = Math.random() * 10 + 10; - const delay = Math.round(Math.random() * (ii * 30)); - const pos = svgToXY[i][ii]; - return [ - { x: 100, y: 150, duration: 0 }, - { - delay, - opacity: 1, - x: pos.x, - y: pos.y, - ease: 'easeOutBack', - duration: 300, - }, - { - y: r > 0 ? `+=${y}` : `-=${y}`, - duration: Math.random() * 1000 + 2000, - yoyo: true, - repeat: -1, - }, - ]; - }; - - getSvgChild = child => - child.map((item, i) => { - const props = { ...item.props }; - if (item.type === 'g') { - props.transform = null; - } else { - ['x', 'y', 'cx', 'cy'].forEach(str => { - if (str in props) { - props[str] = null; - } - }); - } - return {React.cloneElement(item, props)}; - }); - - render() { - const { locale, isMobile } = this.props; - const { hoverKey } = this.state; - const isZhCN = locale === 'zh-CN'; - const children = page1Data.map((item, i) => { - const isHover = item.nameEn === hoverKey; - return ( - - this.getEnter(i, e)} - leave={this.leave} - {...item.svgBg.props} - component="svg" - resetStyle={false} - exclusive - > - {(isMobile || isHover) && this.getSvgChild(item.svgBg.props.children)} - - { - this.onMouseOver(item.nameEn); - }} - onMouseLeave={this.onMouseOut} - > -
- icon -
-

{isZhCN ? item.name : item.nameEn}

- - - ); - }); - return ( -
-
-

- -

- - - {children} - - -
-
- ); - } -} diff --git a/site/theme/template/Home/Page2.jsx b/site/theme/template/Home/Page2.jsx index 89e0463299..e2e3314bf8 100644 --- a/site/theme/template/Home/Page2.jsx +++ b/site/theme/template/Home/Page2.jsx @@ -139,11 +139,21 @@ export default function Page2({ isMobile, locale }) { const mobileContent = (

{item.slogan}

- + - + diff --git a/site/theme/template/Home/RecommendPage.less b/site/theme/template/Home/RecommendPage.less new file mode 100644 index 0000000000..51aa41dbd6 --- /dev/null +++ b/site/theme/template/Home/RecommendPage.less @@ -0,0 +1,104 @@ +@import '../../../../components/style/themes/default.less'; + +.recommend-block { + position: relative; + display: block; + height: 192px; + overflow: hidden; + border-radius: 2px; + + img { + width: 100%; + height: 100%; + vertical-align: top; + background-clip: cover; + } + + &::before { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: linear-gradient( + rgba(0, 0, 0, 0) 0%, + rgba(0, 0, 0, 0, 0.25) 30%, + rgba(0, 0, 0, 0.5) 100% + ); + content: ''; + pointer-events: none; + } + + .recommend-popularize { + position: absolute; + top: 0; + left: 0; + padding: 0 8px; + color: #314659; + line-height: 28px; + background: #ffd75a; + border-radius: 0 0 4px 0; + } + + .recommend-content { + position: absolute; + right: 0; + bottom: 0; + left: 0; + padding: 0 20px 24px; + transform: translateY(100%); + transition: transform 0.3s; + + .ant-typography { + margin: 0; + color: #fff; + } + + h4 { + position: absolute; + top: 0; + right: 0; + left: 0; + padding: 0 20px 24px; + transform: translateY(-100%); + transition: padding 0.3s; + } + + p { + color: rgba(255, 255, 255, 0.85); + opacity: 0; + transition: opacity 0.3s, margin 0.3s; + } + } +} + +@media (max-width: @screen-sm-min) { + .recommend-block { + h4.ant-typography { + padding: 0 16px 16px; + font-size: 18px; + } + } +} + +@media (min-width: @screen-sm-min) { + .recommend-block { + &-main { + height: 408px; + } + + &:hover { + .recommend-content { + transform: translateY(0); + + h4 { + padding-bottom: 8px; + } + + p { + opacity: 1; + } + } + } + } +} diff --git a/site/theme/template/Home/RecommendPage.tsx b/site/theme/template/Home/RecommendPage.tsx new file mode 100644 index 0000000000..6d7bd82535 --- /dev/null +++ b/site/theme/template/Home/RecommendPage.tsx @@ -0,0 +1,94 @@ +import * as React from 'react'; +import classNames from 'classnames'; +import { FormattedMessage } from 'react-intl'; +import { Row, Col, Typography } from 'antd'; +import './RecommendPage.less'; + +const { Title, Paragraph } = Typography; + +interface Recommend { + title: string; + img: string; + href: string; + popularize?: boolean; + description: string; +} + +const LIST: Recommend[] = [ + { + title: '语雀·我们都喜欢的文档工具', + description: + '「语雀」致力于打造新一代 Office，是一个「专业的云端知识库」。在阿里内部已是 10 万员工进行文档编写、知识沉淀的标配。', + img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*2_q2TZo-_zoAAAAAAAAAAABkARQnAQ', + href: 'https://www.yuque.com/dashboard', + popularize: true, + }, + { + title: 'AntV·让数据栩栩如生', + description: + 'AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。', + img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*6C3USLyLwh4AAAAAAAAAAABkARQnAQ', + href: 'https://antv.vision/zh', + }, + { + title: 'Kitchen·让你的设计秀色可餐', + description: '一款为设计者提升工作效率的 Sketch 工具集', + img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*2b-XQJuyRSwAAAAAAAAAAABkARQnAQ', + href: 'https://kitchen.alipay.com/', + }, +]; + +interface RecommendBlockProps extends Recommend { + main?: boolean; + img: string; + href: string; +} + +const RecommendBlock = ({ + main, + title, + popularize, + description, + img, + href, +}: RecommendBlockProps) => { + return ( + + {title} + {popularize && ( + + + + )} +
+ {title} + {description} +
+ + ); +}; + +export default function RecommendPage() { + return ( + + + + + + + + + + + + + + + + ); +} diff --git a/site/theme/template/Home/index.jsx b/site/theme/template/Home/index.jsx deleted file mode 100644 index 5d4fdde001..0000000000 --- a/site/theme/template/Home/index.jsx +++ /dev/null @@ -1,85 +0,0 @@ -import React from 'react'; -import { injectIntl } from 'react-intl'; -import { Helmet } from 'react-helmet-async'; -import PropTypes from 'prop-types'; -import Banner from './Banner'; -import Page1 from './Page1'; -import Page2 from './Page2'; -import Page3 from './Page3'; -import Footer from '../Layout/Footer'; - -// To store style which is only for Home and has conflicts with others. -function getStyle() { - return ` - .main-wrapper { - padding: 0; - } - #header { - box-shadow: none; - max-width: 1200px; - width: 100%; - margin: 20px auto 0; - padding: 0 24px; - } - #header, - #header .ant-select-selection, - #header .ant-menu { - background: transparent; - } - #header #logo { - padding: 0; - } - #header #nav .ant-menu-item { - border-color: transparent; - } - #header #nav .ant-menu-submenu { - border-color: transparent; - } - #header #nav .ant-menu-item.hide-in-home-page { - display: none; - } - #header .ant-row > div:last-child .header-lang-button { - margin-right: 0; - } - .rc-footer-container { - max-width: 1200px; - padding: 80px 0; - } - - .rc-footer-bottom-container { - max-width: 1200px; - } - - .rc-footer-columns { - justify-content: space-around; - } - `; -} - -// eslint-disable-next-line react/prefer-stateless-function -class Home extends React.Component { - static contextTypes = { - isMobile: PropTypes.bool.isRequired, - }; - - render() { - const { intl } = this.props; - const { isMobile } = this.context; - const childProps = { ...this.props, isMobile, locale: intl.locale }; - return ( - <> -