基础

在界面中,我们需要通过对话的方式与用户产生共鸣。 精准、清晰的语言会更容易让用户理解,合适的语气更容易让用户建立信任感。因此在界面设计时,文案也应当被重视。 在使用和书写文案时有以下几点需要注意:

  • 从用户角度出发
  • 表述一致
  • 重要的信息放在显著位置
  • 专业、精准、完整
  • 精简、友好、正面

在界面中,文案是我们与用户沟通的基础,语言文字的表述也需要精心推敲,仔细设计。清晰、准确、简洁的文案设计能够让界面拥有更好的可用性,同时让用户体验更加友好。

在表述内容时,关注点应该是用户和他们能用你的产品做什么,而不是你和你的产品在为他们做什么,所以内容表述的立足点很重要。

既然以用户为中心,文案就应该尽量以用户为主体来写作。

注:当用户向后台反馈问题、提出建议或申诉时,使用『我们』是合理的语境,例如『我们将会审核你的申诉』。

正确示范:浏览不同的仓库,了解更多有价值的内容

错误示范:为了让你了解更多有价值的内容,我们提供了不同仓库供你浏览。(侧重在『我们』为用户提供了什么,而不是以用户视角的关注点为中心。)

省略无用词汇,不重复用户已知事实;在绝大多数交互场景下,都无需界面描述出全部的细节。

尽量提供简短、易于快速获取的内容。

正确示范:保存

错误示范:保存修改内容

使用简单、直接、易于理解的词汇,让内容和指示更容易被用户接受和理解。

间接、暧昧模糊的说法,生僻和过于『文雅』的用词,会增加用户的认知负荷,所以应当尽量避免使用这类用户无法识别的词汇。

正确示范:付款成功

错误示范:资金流出成功

  • 描述同一个事物的词汇要保持统一;
  • 上下文的语法、语种、语序要保持统一;
  • 操作的名称和目标页面标题的名称保持一致。

让用户第一眼看到最重要的内容,不用到段落中寻找。

注:如考虑安全性问题时,隐私信息也可调整为『点击后可见』的方式。

图标 + 文字

你可以在a.dropdown-item内添加i图标

在界面中,我们需要通过对话的方式与用户产生共鸣。 精准、清晰的语言会更容易让用户理解,合适的语气更容易让用户建立信任感。因此在界面设计时,文案也应当被重视。 在使用和书写文案时有以下几点需要注意:

  • 从用户角度出发
  • 表述一致
  • 重要的信息放在显著位置
  • 专业、精准、完整
  • 精简、友好、正面

在界面中,文案是我们与用户沟通的基础,语言文字的表述也需要精心推敲,仔细设计。清晰、准确、简洁的文案设计能够让界面拥有更好的可用性,同时让用户体验更加友好。

在表述内容时,关注点应该是用户和他们能用你的产品做什么,而不是你和你的产品在为他们做什么,所以内容表述的立足点很重要。

既然以用户为中心,文案就应该尽量以用户为主体来写作。

注:当用户向后台反馈问题、提出建议或申诉时,使用『我们』是合理的语境,例如『我们将会审核你的申诉』。

正确示范:浏览不同的仓库,了解更多有价值的内容

错误示范:为了让你了解更多有价值的内容,我们提供了不同仓库供你浏览。(侧重在『我们』为用户提供了什么,而不是以用户视角的关注点为中心。)

省略无用词汇,不重复用户已知事实;在绝大多数交互场景下,都无需界面描述出全部的细节。

尽量提供简短、易于快速获取的内容。

正确示范:保存

错误示范:保存修改内容

使用简单、直接、易于理解的词汇,让内容和指示更容易被用户接受和理解。

间接、暧昧模糊的说法,生僻和过于『文雅』的用词,会增加用户的认知负荷,所以应当尽量避免使用这类用户无法识别的词汇。

正确示范:付款成功

错误示范:资金流出成功

  • 描述同一个事物的词汇要保持统一;
  • 上下文的语法、语种、语序要保持统一;
  • 操作的名称和目标页面标题的名称保持一致。

让用户第一眼看到最重要的内容,不用到段落中寻找。

注:如考虑安全性问题时,隐私信息也可调整为『点击后可见』的方式。

自适应标签页

你可以在ul.nav上添加.nav-fill设置导航区域宽度100%并平均划分每个标签宽度

Ant Design 将色彩体系解读成两个层面:系统级色彩体系和产品级色彩体系。

系统级色彩体系主要定义了蚂蚁中台设计中的基础色板、中性色板和数据可视化色板。 产品级色彩体系则是在具体设计过程中,基于系统色彩进一步定义符合产品调性以及功能诉求的颜色。

Ant Design 的设计团队倾向于采用 HSB 色彩模型进行设计,该模型更便于设计师在调整色彩时对于颜色有明确的心理预期, 同时也方便团队间的沟通。

Ant Design 系统级色彩体系同样源于『自然』的设计价值观。设计师通过对自然场景的抽象捕捉,结合蚂蚁的技术基因, 形成了特有的 12 色。进一步又通过大量的观察,捕捉不同色彩在自然光下的变化规律,借助美术中素描的思路,对 12 个颜色进行了衍生。 在中性色板的定义上,则是平衡了可读性、美感以及可用性得出的。

Ant Design 的基础色板共计 120 个颜色,包含 12 个主色以及衍生色。这些颜色基本可以满足中后台设计中对于颜色的需求。

圆角按钮

你可以在ul.nav上添加.nav-pills设置使用圆角按钮作为标签页

在界面中,我们需要通过对话的方式与用户产生共鸣。 精准、清晰的语言会更容易让用户理解,合适的语气更容易让用户建立信任感。因此在界面设计时,文案也应当被重视。 在使用和书写文案时有以下几点需要注意:

  • 从用户角度出发
  • 表述一致
  • 重要的信息放在显著位置
  • 专业、精准、完整
  • 精简、友好、正面

在界面中,文案是我们与用户沟通的基础,语言文字的表述也需要精心推敲,仔细设计。清晰、准确、简洁的文案设计能够让界面拥有更好的可用性,同时让用户体验更加友好。

在表述内容时,关注点应该是用户和他们能用你的产品做什么,而不是你和你的产品在为他们做什么,所以内容表述的立足点很重要。

既然以用户为中心,文案就应该尽量以用户为主体来写作。

注:当用户向后台反馈问题、提出建议或申诉时,使用『我们』是合理的语境,例如『我们将会审核你的申诉』。

正确示范:浏览不同的仓库,了解更多有价值的内容

错误示范:为了让你了解更多有价值的内容,我们提供了不同仓库供你浏览。(侧重在『我们』为用户提供了什么,而不是以用户视角的关注点为中心。)

省略无用词汇,不重复用户已知事实;在绝大多数交互场景下,都无需界面描述出全部的细节。

尽量提供简短、易于快速获取的内容。

正确示范:保存

错误示范:保存修改内容

使用简单、直接、易于理解的词汇,让内容和指示更容易被用户接受和理解。

间接、暧昧模糊的说法,生僻和过于『文雅』的用词,会增加用户的认知负荷,所以应当尽量避免使用这类用户无法识别的词汇。

正确示范:付款成功

错误示范:资金流出成功

  • 描述同一个事物的词汇要保持统一;
  • 上下文的语法、语种、语序要保持统一;
  • 操作的名称和目标页面标题的名称保持一致。

让用户第一眼看到最重要的内容,不用到段落中寻找。

注:如考虑安全性问题时,隐私信息也可调整为『点击后可见』的方式。

图标 + 文字

你可以在a.dropdown-item内添加i图标

在界面中,我们需要通过对话的方式与用户产生共鸣。 精准、清晰的语言会更容易让用户理解,合适的语气更容易让用户建立信任感。因此在界面设计时,文案也应当被重视。 在使用和书写文案时有以下几点需要注意:

  • 从用户角度出发
  • 表述一致
  • 重要的信息放在显著位置
  • 专业、精准、完整
  • 精简、友好、正面

在界面中,文案是我们与用户沟通的基础,语言文字的表述也需要精心推敲,仔细设计。清晰、准确、简洁的文案设计能够让界面拥有更好的可用性,同时让用户体验更加友好。

在表述内容时,关注点应该是用户和他们能用你的产品做什么,而不是你和你的产品在为他们做什么,所以内容表述的立足点很重要。

既然以用户为中心,文案就应该尽量以用户为主体来写作。

注:当用户向后台反馈问题、提出建议或申诉时,使用『我们』是合理的语境,例如『我们将会审核你的申诉』。

正确示范:浏览不同的仓库,了解更多有价值的内容

错误示范:为了让你了解更多有价值的内容,我们提供了不同仓库供你浏览。(侧重在『我们』为用户提供了什么,而不是以用户视角的关注点为中心。)

省略无用词汇,不重复用户已知事实;在绝大多数交互场景下,都无需界面描述出全部的细节。

尽量提供简短、易于快速获取的内容。

正确示范:保存

错误示范:保存修改内容

使用简单、直接、易于理解的词汇,让内容和指示更容易被用户接受和理解。

间接、暧昧模糊的说法,生僻和过于『文雅』的用词,会增加用户的认知负荷,所以应当尽量避免使用这类用户无法识别的词汇。

正确示范:付款成功

错误示范:资金流出成功

  • 描述同一个事物的词汇要保持统一;
  • 上下文的语法、语种、语序要保持统一;
  • 操作的名称和目标页面标题的名称保持一致。

让用户第一眼看到最重要的内容,不用到段落中寻找。

注:如考虑安全性问题时,隐私信息也可调整为『点击后可见』的方式。

自适应标签页

你可以在ul.nav上添加.nav-fill设置导航区域宽度100%并平均划分每个标签宽度

Ant Design 将色彩体系解读成两个层面:系统级色彩体系和产品级色彩体系。

系统级色彩体系主要定义了蚂蚁中台设计中的基础色板、中性色板和数据可视化色板。 产品级色彩体系则是在具体设计过程中,基于系统色彩进一步定义符合产品调性以及功能诉求的颜色。

Ant Design 的设计团队倾向于采用 HSB 色彩模型进行设计,该模型更便于设计师在调整色彩时对于颜色有明确的心理预期, 同时也方便团队间的沟通。

Ant Design 系统级色彩体系同样源于『自然』的设计价值观。设计师通过对自然场景的抽象捕捉,结合蚂蚁的技术基因, 形成了特有的 12 色。进一步又通过大量的观察,捕捉不同色彩在自然光下的变化规律,借助美术中素描的思路,对 12 个颜色进行了衍生。 在中性色板的定义上,则是平衡了可读性、美感以及可用性得出的。

Ant Design 的基础色板共计 120 个颜色,包含 12 个主色以及衍生色。这些颜色基本可以满足中后台设计中对于颜色的需求。