Browse Source

docs: improve some details about new site (#38635)

* docs: fix some issues

* docs: fix edit button

* docs: fix edit button
pull/38638/head
afc163 2 years ago
committed by GitHub
parent
commit
dc6bcc8acb
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 10
      .dumi/pages/index/components/BannerRecommends.tsx
  2. 5
      .dumi/theme/common/EditButton.tsx
  3. 4
      .dumi/theme/common/ExternalLinkIcon.jsx
  4. 6
      .dumi/theme/common/GlobalStyles.tsx
  5. 22
      docs/spec/values.en-US.md
  6. 16
      docs/spec/values.zh-CN.md

10
.dumi/pages/index/components/BannerRecommends.tsx

@ -1,7 +1,7 @@
import * as React from 'react';
import type { Extra, Icon } from './util';
import useSiteToken from '../../../hooks/useSiteToken';
import { Col, Row, Card, Typography } from 'antd';
import { Col, Row, Card, Typography, Skeleton } from 'antd';
import { css } from '@emotion/react';
const useStyle = () => {
@ -36,7 +36,7 @@ export interface BannerRecommendsProps {
export default function BannerRecommends({ extras = [], icons = [] }: BannerRecommendsProps) {
const style = useStyle();
const first3 = extras.slice(0, 3);
const first3 = extras.length === 0 ? Array(3).fill(null) : extras.slice(0, 3);
const { token } = useSiteToken();
return (
@ -53,8 +53,10 @@ export default function BannerRecommends({ extras = [], icons = [] }: BannerReco
}}
>
{first3.map((extra, index) => {
const icon = icons.find(icon => icon.name === extra.source);
if (!extra) {
return <Skeleton />;
}
const icon = icons.find((icon) => icon.name === extra.source);
return (
<a key={index} href={extra.href} target="_blank" css={style.card}>
<Typography.Title level={5}>{extra.title}</Typography.Title>

5
.dumi/theme/common/EditButton.tsx

@ -4,7 +4,7 @@ import { EditOutlined } from '@ant-design/icons';
import { css } from '@emotion/react';
import useSiteToken from '../../hooks/useSiteToken';
const branchUrl = 'https://github.com/ant-design/ant-design/edit/next/';
const branchUrl = 'https://github.com/ant-design/ant-design/edit/master/';
export interface EditButtonProps {
title: React.ReactNode;
@ -21,7 +21,8 @@ const useStyle = () => {
a& {
display: inline-block;
text-decoration: none;
margin-inline-start: 8px;
margin-inline-start: 4px;
vertical-align: -2px;
${iconCls} {
display: block;

4
.dumi/theme/common/ExternalLinkIcon.jsx

@ -1,8 +1,8 @@
import React from 'react';
import Icon from '@ant-design/icons';
const SVGIcon = () => (
<svg viewBox="0 0 1024 1024" width="1em" height="1em">
const SVGIcon = ({ color = 'currentColor' }) => (
<svg viewBox="0 0 1024 1024" width="1em" height="1em" fill={color}>
<path d="M853.333 469.333A42.667 42.667 0 0 0 810.667 512v256A42.667 42.667 0 0 1 768 810.667H256A42.667 42.667 0 0 1 213.333 768V256A42.667 42.667 0 0 1 256 213.333h256A42.667 42.667 0 0 0 512 128H256a128 128 0 0 0-128 128v512a128 128 0 0 0 128 128h512a128 128 0 0 0 128-128V512a42.667 42.667 0 0 0-42.667-42.667z" />
<path d="M682.667 213.333h67.413L481.707 481.28a42.667 42.667 0 0 0 0 60.587 42.667 42.667 0 0 0 60.586 0L810.667 273.92v67.413A42.667 42.667 0 0 0 853.333 384 42.667 42.667 0 0 0 896 341.333V170.667A42.667 42.667 0 0 0 853.333 128H682.667a42.667 42.667 0 0 0 0 85.333z" />
</svg>

6
.dumi/theme/common/GlobalStyles.tsx

@ -203,7 +203,7 @@ const GlobalStyles = () => {
.markdown hr {
clear: both;
height: 1px;
margin: 56px 0;
margin: 24px 0;
background: ${token.colorSplit};
border: 0;
}
@ -1067,7 +1067,7 @@ const GlobalStyles = () => {
width: 16px;
height: 16px;
margin-left: 16px;
color: ${token.colorText}-secondary;
color: ${token.colorTextSecondary};
cursor: pointer;
transition: all 0.24s;
@ -1099,7 +1099,7 @@ const GlobalStyles = () => {
transition: transform 0.24s;
&:hover {
transform: scale(1.2);
transform: scale(1.1);
}
&${iconCls}-check {

22
docs/spec/values.en-US.md

@ -20,8 +20,8 @@ Here are four design values of Ant Design:
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.
- **Natural user cognition:** 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.
- **Natural user behavior:** 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.
- **Natural user cognition**: 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.
- **Natural user behavior**: 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.
> To get to know the past and present of natural values, [please move to the column](https://zhuanlan.zhihu.com/p/44809866).
@ -33,11 +33,11 @@ The light-speed iteration of the digital world makes products more complex. Howe
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 interfaces created by Ant Design should be high certainty and low cooperative entropy.
- **Designer certainty:** Enterprise products are made by collaboration. 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 should be provided with simplified design rules, components and patterns so they can reduce the cooperative entropy and a more efficient design process.
- **Keep restraint:** Don't make a decision before you figure it out. Designers should focus on the most 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 system. For example, color value conversion and spacing typesetting.
- **Modular design:** Encapsulating 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 existing 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 products. In addition to considering the consistency of a single product design, good certainty is required to be maintained across products, terminals, and systems. Consistent appearance and interaction, maintaining a familiarity to user, can reduce the difficulty of learning, cognitive and operating costs, and improve work efficiency.
- **Designer certainty**: Enterprise products are made by collaboration. 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 should be provided with simplified design rules, components and patterns so they can reduce the cooperative entropy and a more efficient design process.
- **Keep restraint**: Don't make a decision before you figure it out. Designers should focus on the most 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 system. For example, color value conversion and spacing typesetting.
- **Modular design**: Encapsulating 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 existing 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 products. In addition to considering the consistency of a single product design, good certainty is required to be maintained across products, terminals, and systems. Consistent appearance and interaction, maintaining a familiarity to user, can reduce the difficulty of learning, cognitive and operating costs, and improve work efficiency.
## Meaningful
@ -47,8 +47,8 @@ Interfaces are the medium of interaction between users and the system. They are
A product or function is created by a designer not because of the designer's needs, but to carry a user's work mission. Product design should be user-centered to promote the achievement of the user's mission. Simultaneously, based on "nature" and "certainty" design values, we should regard user's human needs and create 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.
- **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
@ -58,5 +58,5 @@ A product or function is created by a designer not because of the designer's nee
The growth of enterprise product's 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.
- **Value connection:** The growth of products depends on the expansion and deep use of users, while the growth of users depends on the growth of product functions. Designers should establish system design thinking, understand the value of product functions, explore user needs in different scenarios, and establish a connection between value and needs. Let product value be discovered and help users build more effective and efficient ways of working.
- **Man-Computer Symbiosis:** More connections between product functions and user requirements make human-computer interaction closer and users and system are growing together. When designing products, users and systems should not be separated from each other. They should be considered as a dynamic group to ensure that they are flexible, inclusive and full of vitality.
- **Value connection**: The growth of products depends on the expansion and deep use of users, while the growth of users depends on the growth of product functions. Designers should establish system design thinking, understand the value of product functions, explore user needs in different scenarios, and establish a connection between value and needs. Let product value be discovered and help users build more effective and efficient ways of working.
- **Man-Computer Symbiosis**: More connections between product functions and user requirements make human-computer interaction closer and users and system are growing together. When designing products, users and systems should not be separated from each other. They should be considered as a dynamic group to ensure that they are flexible, inclusive and full of vitality.

16
docs/spec/values.zh-CN.md

@ -20,8 +20,8 @@ Ant Design 设计价值观为设计者提供评价设计好坏的内在标准,
数字世界的光速迭代使得产品日益复杂,而人类意识和注意力资源有限。面对这种设计矛盾,追求「自然」交互将是 Ant Design 持之以恒的方向。
- **感知自然**认知心理学所述,约 80% 外界信息通过视觉通道获取。界面设计中最重要的视觉要素,包括布局、色彩、插画、图标等,应充分汲取自然界规律,从而降低用户认知成本,带来真实流畅的感受。在一些场景下,适时加入听觉、触觉等其它感知通道,能创造更丰富自然的产品体验。
- **行为自然**在与系统的互动中,设计者应充分理解用户、系统角色、任务目标间的关系,场景化组织系统功能和服务。同时辅以行为分析、人工智能、传感器、元数据等策略,提供主动式服务,帮助用户决策、减少操作,从而节约用户脑力和体力,让人机交互行为更自然。
- **感知自然**认知心理学所述,约 80% 外界信息通过视觉通道获取。界面设计中最重要的视觉要素,包括布局、色彩、插画、图标等,应充分汲取自然界规律,从而降低用户认知成本,带来真实流畅的感受。在一些场景下,适时加入听觉、触觉等其它感知通道,能创造更丰富自然的产品体验。
- **行为自然**在与系统的互动中,设计者应充分理解用户、系统角色、任务目标间的关系,场景化组织系统功能和服务。同时辅以行为分析、人工智能、传感器、元数据等策略,提供主动式服务,帮助用户决策、减少操作,从而节约用户脑力和体力,让人机交互行为更自然。
> 想了解自然价值观的前世今生,[请移步至专栏](https://zhuanlan.zhihu.com/p/44809866)。
@ -33,11 +33,11 @@ Ant Design 设计价值观为设计者提供评价设计好坏的内在标准,
界面是用户与系统交互的媒介,是手段而非目的。在追求「自然」交互基础上,通过 Ant Design 创造的产品界面应是高确定性、低合作熵的状态。
- **设计者确定**企业级产品都是分工合作的产物,参与者越多合作熵越高,这是一切设计工作低效、产品系统不易维护的来源。通过探索设计规律、模块化设计思路,来为设计者提供足够精简的设计规则、组件、模式等,赋能设计者、降低合作熵。
- **设计者确定**企业级产品都是分工合作的产物,参与者越多合作熵越高,这是一切设计工作低效、产品系统不易维护的来源。通过探索设计规律、模块化设计思路,来为设计者提供足够精简的设计规则、组件、模式等,赋能设计者、降低合作熵。
- 保持克制: 能做,但想清楚了不做。设计者应当聚焦在最有价值产品功能打磨,并用尽可能少的设计元素将其表达。正如 Antoine de St.Exupery 所说:完美不在于无以复加,而在于无可删减,万事莫不如此。
- 面向对象的方法: 探索设计规律,并将其抽象成「对象」,增强界面设计的灵活性和可维护性,同时也减少「设计者」的主观干扰,从而降低系统的不确定性。例如:色值换算、间距排版。
- 模块化设计: 将复杂或者重复出现的局部封装成模块,提供有限接口与其他模块互动,最终全面减少系统的复杂度,进而增进可靠性以及可维护性。设计者可运用现有的组件/模板或者自行抽象可复用的组件/模板,节约无谓的设计且保持系统一致性,让「设计者」把创造力专注在最需要的地方。
- **用户确定**用户日常工作是通过诸多企业级产品的协同来完成的,除了考虑单一产品的设计一致性,更应当在跨产品、跨终端、跨系统间保持良好的确定性。一致的外观和交互,保持面向用户的熟悉感,能提升易学性,降低认知和操作成本,提升工作效率。
- **用户确定**用户日常工作是通过诸多企业级产品的协同来完成的,除了考虑单一产品的设计一致性,更应当在跨产品、跨终端、跨系统间保持良好的确定性。一致的外观和交互,保持面向用户的熟悉感,能提升易学性,降低认知和操作成本,提升工作效率。
## 意义感
@ -47,8 +47,8 @@ Ant Design 设计价值观为设计者提供评价设计好坏的内在标准,
一个产品或功能被设计者创造出来不只是用户的需要,而更多是承载用户的某个工作使命。产品设计应充分站在工作视角,促成用户使命的达成;同时,在「自然」、「确定」之上,兼顾用户的人性需求,为工作过程创造富有意义感的人机交互。
- **结果的意义:明确目标,即时反馈**洞悉工作目标,根据使用流程拆解明确的子目标,让每个交互行为都围绕着主目标的达成;为每个行为,辅以恰当、即时的反馈,让用户对操作结果了然于胸。此外,可通过情感化设计,适度安抚用户负面情感,强化用户正面情感。
- **过程的意义:挑战适中,全情投入**调整不同场景下的工作难度,让功能适时适地触发,以匹配用户能力;如无必要,勿增实体,不分散用户注意力,让用户专注于任务达成,而非界面。让当下的工作既不过于简单,亦不过于复杂,挑战适中,并随着用户能力的成长提出更高的挑战,能让用户持续沉浸在工作的心流中,获得富有成就感的工作体验。
- **结果的意义:明确目标,即时反馈**洞悉工作目标,根据使用流程拆解明确的子目标,让每个交互行为都围绕着主目标的达成;为每个行为,辅以恰当、即时的反馈,让用户对操作结果了然于胸。此外,可通过情感化设计,适度安抚用户负面情感,强化用户正面情感。
- **过程的意义:挑战适中,全情投入**调整不同场景下的工作难度,让功能适时适地触发,以匹配用户能力;如无必要,勿增实体,不分散用户注意力,让用户专注于任务达成,而非界面。让当下的工作既不过于简单,亦不过于复杂,挑战适中,并随着用户能力的成长提出更高的挑战,能让用户持续沉浸在工作的心流中,获得富有成就感的工作体验。
## 生长性
@ -58,5 +58,5 @@ Ant Design 设计价值观为设计者提供评价设计好坏的内在标准,
企业级产品功能的增长与用户系统角色的演变相生相伴。设计者应为自己创造的产品负责,提升功能、价值的可发现性。用发展的眼光做设计,充分考虑人、机两端的共同生长。
- **价值连接**产品的增长依赖于用户的群体扩大和深度使用,而用户的成长又依赖于产品功能的壮大。设计者应建立系统设计思维,洞悉产品功能的价值,探索用户在不同场景下的需求,在价值和需求间建立连接。让产品价值被发现,帮助用户建立更有效、更高效的工作方式。
- **人机共生**产品功能和用户需求的更多连接,让人机互动更加紧密,用户和系统共生。产品设计时,不应将用户和系统独立开来,应作为一个动态发展的共同体来思考,确保其足够的灵活、包容,充满生命力。
- **价值连接**产品的增长依赖于用户的群体扩大和深度使用,而用户的成长又依赖于产品功能的壮大。设计者应建立系统设计思维,洞悉产品功能的价值,探索用户在不同场景下的需求,在价值和需求间建立连接。让产品价值被发现,帮助用户建立更有效、更高效的工作方式。
- **人机共生**产品功能和用户需求的更多连接,让人机互动更加紧密,用户和系统共生。产品设计时,不应将用户和系统独立开来,应作为一个动态发展的共同体来思考,确保其足够的灵活、包容,充满生命力。

Loading…
Cancel
Save