mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-26 04:00:13 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity
5b8ebdc337
ant-design/docs/spec/illustration.zh-CN.md
二货爱吃白萝卜 cbcfd38ca7
docs: v5 site upgrade (#38328) 
* build: try to use dumi as doc tool

* docs: migrate demo structure to dumi way

* refactor: use type export & import

* docs: migrate demo previewer to dumi

* docs: create empty layout & components

* docs: apply custom rehype plugin

* docs: create empty extra pages

* docs: Add Banner component

* chore: move theme tsconfig.json

* docs: home page init

* docs: migrate header (#37896)

* docs: header

* docs: update

* docs: home init

* clean up

* test: fix site lint

* chore: tsc ignore demo

* chore: dumi demo migrate script

* chore: cards

* docs: home layout

* docs: Update locale logic

* docs: fix getLink logic

* chore: fix ci (#37899)

* chore: fix ci

* ci: remove check-ts-demo

* ci: preview build

* test: ignore demo.tsx

* chore: update script

* test: update snapshot

* test: update node and image test

* chore: add .surgeignore

* docs: layout providers (#37908)

* docs: add components sidebar (#37923)

* docs: sidebar

* docs: update docs title

* docs: update design doc

* chore: code clean

* docs: handle changelog page

* docs: add title

* docs: add subtitle

* docs: active header nav

* chore: code clean

* docs: overview

* chore: code clean

* docs: update intl (#37918)

* docs: update intl

* chore: code clean

* docs: update favicons

* chore: update testPathIgnorePatterns

* chore: code clean

* chore: code clean

* chore: copy 404.html (#37996)

* docs: Home page theme picker

* chore: Update migrate script

* docs: home page update

* docs: theme editor style

* docs: theme lang

* chore: update migrate.js

* docs: fix demo (#38094)

* chore: update migrate.js

* docs: update md

* docs: update demo

* test: fix snapshot

* chore: move debug to code attr in migrate script

* chore: update md

Co-authored-by: PeachScript <scdzwyxst@gmail.com>

* feat: overview page

* feat: Migrate `404` page (#38118)

* feat: migrate IconSearch component (#37916)

* feat<site/IconSearch>: copy IconDisplay from site to .dumi

* feat<site/IconSearch>: change docs of icon

* feat<site/IconSearch>: tweak

* feat<site/IconSearch>: use useIntl instead of injectIntl

* feat<site/IconSearch>: fix ts type error

* feat<site/IconSearch>: use intl.formatMessage to render text

* docs: Adjust home btn sizw

* docs: Update doc

* feat: v5 site overview page (#38131)

* feat: site

* fix: fix

* feat: v5 site overview page

* fix: fix path

* fix: fix

* fix: fix

* docs: fix margin logic

* feat: v5 site change-log page (#38137)

* feat: v5 site change-log page (#38162)

* docs: site redirect to home pag

* docs: theme picker

* docs: use react-intl from dumi (#38183)

* docs: Theme Picker

* docs: update dumi config

* docs: home back fix

* docs: picker colorful

* docs: locale of it

* docs: update components desc

* docs: site of links

* docs: update components list

* docs: update desc

* feat: Migrate `DemoWrapper` component (#38166)

* feat: Migrate `DemoWrapper` component

* feat: remove invalid comments and add comment for `key` prop

* docs: FloatButton pure panel

* chore: update demo

* chore: update dumi config

* Revert "chore: update demo"

This reverts commit 028265d3ba.

* chore: test logic adjust to support cnpm modules

* chore: add locale alias

* docs: /index to /

* docs: add locale redirect head script

* chore: adjust compact

* docs: fix missing token

* feat: compact switch

* chore: code clean

* docs: update home

* docs: fix radius token

* docs: hash of it

* chore: adjust home page

* docs: Add background map

* docs: site theme bac logic

* docs: avatar

* docs: update logo color

* docs: home banner

* docs: adjust tour size

* docs: purepanl update

* docs: transfooter

* docs: update banner gif

* docs: content (#38361)

* docs: title & EditButton

* docs: content

* chore: fix toc

* docs: resource page

* docs: transform resource data from hast

* docs: filename & Resource Card

* chore: enable prerender

* chore: remove less

* docs: toc style

* chore: fix lint

* docs: fix Layout page

* docs: fix CP page

* chore: update demos

* docs: workaround for export dynamic html

* chore: enable demo eslint

* docs: table style

* fix: header shadow

* chore: update snapshot

* fix: toc style

* docs: add title

* docs: Adjust site

* feat: helmet

* docs: site css

* fix: description

* feat: toc debug

* docs: update config-provider

* feat: use colorPanel

* fix: colorPanel value

* feat: anchor ink ball style

* feat: apply theme editor

* fix: code block style

* chore: update demo

* chore: fix lint

* chore: code clean

* chore: update snapshot

* feat: ts2js

* chore: description

* docs: site ready for ssr

includes:
- move client render logic to useEffect in site theme
- extract antd cssinjs to a single css file like bisheng
- workaround to support react@18 pipeableStream for emotion

* chore: bump testing lib

* docs: font size of title

* chore: remove react-sortable-hoc

* chore: update snapshot

* chore: update script

Co-authored-by: PeachScript <scdzwyxst@gmail.com>
Co-authored-by: MadCcc <1075746765@qq.com>
Co-authored-by: zqran <uuxnet@gmail.com>
Co-authored-by: TrickyPi <530257315@qq.com>
Co-authored-by: lijianan <574980606@qq.com>
2022-11-09 12:28:04 +08:00

105 lines
6.4 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
order: 5
title: 图形化
---
<div style="text-align:center;">
<img alt="General" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*WzMpTIP8R6gAAAAAAAAAAABkARQnAQ" />
</div>
## 项目背景
图形化是品牌识别度的关键核心元素，在互联网产品，线下物料中使用中无处不在。与单纯的文案信息不同，图形化在直观描述固有信息的同时塑造情感背景，使用户更具沉浸感和共情性。提升产品用户体验的同时来完成商业目标。图形化的风格缤纷复杂，插画师的个人风格明显，不同的设计师在图形化的工作协同中，风格很难复现，而单纯由一名插画师去完成整体业务的图形化也存在一定风险。所以图形化体系在保持品牌一致性和提升工作效率，规避风险上显得尤为重要。
<div style="text-align:center;">
<img alt="Background" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*rSUBTL8hv9sAAAAAAAAAAABkARQnAQ" />
</div>
## 设计原则
从最底层的设计价值观到最上层的设计方法，HiTu 沿袭了 Ant Design 的 ETCG 的设计思路，将图形化资产组件化，分可形成模板，合则可拼搭成案例。为设计值提供强大的灵活性和定制性。
<div style="text-align:center;">
<img alt="Design principle" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*WKEzS5-_zYAAAAAAAAAAAABkARQnAQ" />
</div>
#### HiTu 金字塔模型
基于科技，确定，自然，未来的四层品牌策略，我们将抽象的概念具象化。代表的技术底层的科技能力为产品，体验和未来提供技术支撑和可能性。所以图例一一对应，我们具象化了人物和产品，体验及未来之间的关系。他们之间不同的组合方式可以满足不同的业务场景诉求。
<div style="text-align:center;">
<img alt="Pyramid model" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*gCoSS5DaCNEAAAAAAAAAAABkARQnAQ" />
</div>
## 颜色
### 海兔色板
<img class="preview-img no-padding" align="right" description="海兔色板" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*5ZE6RrjW-jQAAAAAAAAAAABkARQnAQ" />
海兔的色彩配色体系是基于 Ant Design 色板的场景应用，与 UI 色彩体系的应用会有所不同。图形化的配色体系会相对更加的灵活可变。基于 Ant Design 的基础色板我们进行了明度的调整，扩大图形化设计的宽容度，使用选择时候更加高效易用，由于是出自 Ant Design 的色彩体系，和其他 UI 资产完美兼容。
### 海兔默认资产颜色
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*0Dv9Rrp7GtMAAAAAAAAAAAAAARQnAQ" />
通过搜资调研，我们发现在企业级产品中。色彩的使用上蓝色，白色会占很大的比重。我们选取了色板中最具科技感，且代表着探索，钻研感的极客蓝作为我们的主色。
<br />
<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*U5L-RKWlmJcAAAAAAAAAAABkARQnAQ" />
基于 Adobe Color 的三元取色工具，和 3D 立体马赛克球，结合我们自己的海兔色板。可以轻松得到了我们默认版本的基础色板。
<br />
# 设计资产
### 人物组件
<img class="preview-img" align="right" alt="基于自然的人物头身比例" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*rm9JRIqTmPgAAAAAAAAAAABkARQnAQ" />
基于自然的设计原则，我们不推荐使用 Q 版卡通和过于夸张艺术化的设计风格。相比之下，接近自然真人头人比例的风格更是我们所推荐的。
<br />
<img class="preview-img" align="right" alt="9 种常见职业角色设计" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Zt7BSI2OL7gAAAAAAAAAAABkARQnAQ" />
同时，我们结合情感化设计，将 9 种常见的职业角色进行人物设计。结合职业本身的一些特质，我们也赋予了他们不同气质特质，来满足各种业务场景的使用。
<br />
<img class="preview-img" align="right" alt="角色设计人物分解" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*jUujRJBxU-sAAAAAAAAAAABkARQnAQ" />
<img class="preview-img" align="right" alt="HiTu 骨骼系统" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*C3NCT6QHU9QAAAAAAAAAAABkARQnAQ" />
<img class="preview-img" align="right" alt="人物姿态复用" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*NZuwQp_vcIQAAAAAAAAAAABkARQnAQ" />
有了基础的人物设计，我们将人物进行分解，然后搭配设计好的骨骼系统。来为人物增加各种姿态动作的复用和延展。
<br />
### 元素组件
<img class="preview-img" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ph0YSZmq-ekAAAAAAAAAAABkARQnAQ" />
<img class="preview-img" align="right" alt="根据业务场景设计的元素组件" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Z8oxS5ym3PIAAAAAAAAAAABkARQnAQ" />
记忆点源于与众不同，专业感源于整齐划一。元素组件指代的是业务场景中一些业务元素，状态元素图形化的世界缤纷多变，我们希望在保持统一性的同时不去限时设计者的创意空间，元素组件的设计上，我们为了保持一定的韵律感，推荐设计师在 1024\*1024 的网格中绘制组件，且圆角的大小保持 8 的倍数关系。
<br />
# 设计应用
<img class="preview-img" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*puHVQJEe-oIAAAAAAAAAAABkARQnAQ" />
<img class="preview-img" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*W-PzSadIFeAAAAAAAAAAAABkARQnAQ" />
<img class="preview-img" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*OJoaQ77tczIAAAAAAAAAAABkARQnAQ" />
<img class="preview-img" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*IySSSoBaGPYAAAAAAAAAAABkARQnAQ" />
有了丰富的资产组件，我们应该如何使用呢？在 HiTu 的设计使用指引中，我推荐设计者在使用资产的过程中构建 Z 轴向的空间概念，将整幅画面拆分成前景，中景以及背景三个层次，在组件的排放时候，前景凸显重要的元素（如人，核心元素组件等），中间交代所处环境，背景则渲染烘托氛围，在颜色的使用和透明上也是前景的饱和度和透明度最高，逐级降低。
<br />
Reference in New Issue View Git Blame Copy Permalink