logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.4
  • Ant Design
    • Introduction
    • Design Values
    • Cases
  • Global Styles
    • Colors
    • Layout
    • Font
    • Icons
    • Dark Mode
    • Shadow
  • Design Patterns
    • Overview
    • Global Rules
      • Feedback
      • Navigation
      • Data Entry
      • Data Display
      • Copywriting
      • Data format
      • Button
      • Data List
    • Principles
      • Proximity
      • Alignment
      • Contrast
      • Repetition
      • Make it Direct
      • Stay on the Page
      • Keep it Lightweight
      • Provide an Invitation
      • Use Transition
      • React Immediately
    • Template Document
      • Visualization Page
      • Detail Page
  • Design Patterns (Research)
    • Overview
    • Template Document
      • Form Page
      • Workbench
      • List Page
      • Result Page
      • Exception Page
    • Global Rules
      • Navigation
      • Message and Feedback
      • Empty Status
  • Visualization
  • Motion
  • Illustrations
Language
Articulate foothold
Concise statement
Use words familiar to the user
Express consistently
Place important information in a prominent position
Express completely and directly
Use words precisely and completely
Tone
Bring each other closer
Be friendly and respectful
Do not be too extreme
Capitalization and punctuation
Uppercase and lowercase
Arabic numbers
Omit unnecessary punctuation
Use exclamation marks with caution

Copywriting

contributors
  • Data DisplayData format

    Resources

    Ant Design X
    Ant Design Charts
    Ant Design Pro
    Pro Components
    Ant Design Mobile
    Ant Design Mini
    Ant Design Web3
    Ant Design Landing-Landing Templates
    Scaffolds-Scaffold Market
    Umi-React Application Framework
    dumi-Component doc generator
    qiankun-Micro-Frontends Framework
    Ant Motion-Motion Solution
    China Mirror 🇨🇳

    Community

    Awesome Ant Design
    Medium
    Twitter
    yuque logoAnt Design in YuQue
    Ant Design in Zhihu
    Experience Cloud Blog
    seeconf logoSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTech logoMore Products

    yuque logoYuQue-Document Collaboration Platform
    AntV logoAntV-Data Visualization
    Egg logoEgg-Enterprise Node.js Framework
    Kitchen logoKitchen-Sketch Toolkit
    Galacean logoGalacean-Interactive Graphics Solution
    xtech logoAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Ant Design Community

    In the interface, we need to resonate with users through dialogue. Accurate and clear words are easy to understand, and a suitable tone can build a sense of trust easily. Therefore, in the interface design, copywriting should be taken seriously. There are some points to note when using and writing copy:

    • Consider from the user's point of view
    • Express consistently
    • Place important information in prominent positions
    • Professional, accurate and complete
    • Concise, friendly and positive

    Language

    In the interface, copywriting is the basis of our communication with users. Therefore, the expression of words should be carefully deliberate and designed. With clear, accurate, and concise copywriting, the user experience can be more user-friendly.

    Articulate foothold

    Correct Example
    Preview
    Correct Example
    Wrong Example
    Preview
    Wrong Example

    When expressing content, the focus should be on users -- what they can do with your product? Not what you and your product are doing for them. The foothold of content representation is very important. Since it is user-centred design, copywriting should be user-centred as much as possible.

    Note: Use "we" to communicate with users when they are reporting questions, suggestions or complaints to the systems, such as "We will consider your complaint.".

    Concise statement

    Correct Example
    Preview
    Correct Example
    Wrong Example
    Preview
    Wrong Example

    Omit useless words and do not repeat facts known to users. In most situations, there is no need for the interface to describe all the details. Try to provide short and accessible content.

    Use words familiar to the user

    Correct Example
    Preview
    Correct Example
    Wrong Example
    Preview
    Wrong Example
    Stand from the user's point of view and say what the user is familiar with.

    Use simple, direct and easy-to-understand words. Indirect, ambiguous, obscure, and overly "refined" copywriting will increase user's cognitive load.

    Express consistently

    Correct Example
    Preview
    Correct Example
    The word order is the same on the same page and in the same area.
    Wrong Example
    Preview
    Wrong Example
    Inconsistent word orders will take users' more effort to comprehend.
    The operation name and the target page title should be the same.
    Preview
    The operation name and the target page title should be the same.
    • Use consistent words that describe the same thing;
    • Use consistent grammar, language and word orders of the context;
    • Use consistent operation names and page titles.

    Place important information in a prominent position

    Correct Example
    Preview
    Correct Example
    Put important information first in a limited space (or make it more visible with highlights, blank space, etc.).
    Wrong Example
    Preview
    Wrong Example
    The content that the user cares most is hidden in the paragraph, which is not easy to find out.

    Let users see the most important content at first glance.

    Note: When considering security issues, private information can be adjusted to "visible after click".

    Express completely and directly

    Correct Example
    Preview
    Correct Example
    Users can learn about the benefits of the settings.
    Wrong Example
    Preview
    Wrong Example
    Users can't get the meaning of the settings.

    When we want the user to take an action, we should focus on what the user can get and how he/she feels. Telling users the purpose or importance of the action can make them more willing to perform it.


    Correct Example
    Preview
    Correct Example
    Compared to "failure", "unable to complete" is a more objective result and easier for users to accept. Users need to know what to do next in the event of a problem.
    Wrong Example
    Preview
    Wrong Example
    Do not inform users "failure" coldly for abnormal situations.

    Error reporting is a common feature in the UI, and it is an important part of user experience. When the user inputs  the wrong content, your error message should be consistent with the user's cognition, and expressed in an easy-to-understand way.

    Use words precisely and completely

    Correct Example
    Preview
    Correct Example
    Complete expression.
    Wrong Example
    Preview
    Wrong Example
    Incomplete, ambiguous, or too colloquial.

    Use general basic words normatively. Spell correctly, express completely. Professional terms should be accurate, according to industry standards; the expression of time must be clear.


    Correct Example
    Preview
    Correct Example
    The expression of time is accurate and complete.
    Wrong Example
    Preview
    Wrong Example
    The description of time is not a specific "day" or "month", which confuses users.

    Tone

    Language defines content, while emotions and atmosphere are expressed more in tone. The same content can be expressed in different tones to different users. Take an example, to professional operators and new users, we should use different copywriting.

    Bring each other closer

    Correct Example
    Preview
    Correct Example
    Wrong Example
    Preview
    Wrong Example

    Don't refer to the user by using "my" and "your" in the same phrase.

    Note: To avoid confusing the users, don't mix first person("I", "me", or "my") and second person("you", "your") in the same sentence.

    Be friendly and respectful

    Correct Example
    Preview
    Correct Example
    Guide the user to enter the content correctly.
    Wrong Example
    Preview
    Wrong Example
    「can't」, 「don't」 make user feel a sense of command and pressure.

    Give users support and encouragement, not commands or pressure. If you want to keep your users, don't blame them when things go wrong. Focus on solving problems, not blaming.

    Do not be too extreme

    Correct Example
    Preview
    Correct Example
    Wrong Example
    Preview
    Wrong Example
    "Never" is too absolute and makes users feel uncomfortable.

    Don't use too absolute expression that will make the user uncomfortable.

    Capitalization and punctuation

    Uppercase and lowercase

    Correct Example
    Preview
    Correct Example
    Wrong Example
    Preview
    Wrong Example

    When using the full name of the product, capitalize the first letter of each word. Write the abbreviations of product names in capital, such as ESC, SLB, etc.

    People are much more used to reading words in lowercase letters, those are what our brains find easiest to scan and instantly absorb. Please avoid capitalizing whole words or phrases.


    Correct Example
    Preview
    Correct Example
    Wrong Example
    Preview
    Wrong Example

    Use the correct case.


    Recommend
    Preview
    Recommend
    Not recommend
    Preview
    Not recommend

    Use sentence capital case in headlines, titles, labels, menu items, buttons, etc.

    Arabic numbers

    Correct Example
    Preview
    Correct Example
    Wrong Example
    Preview
    Wrong Example

    Users perceive numbers faster. Numbers transmit information more effectively than words.

    Omit unnecessary punctuation

    To help users scan the text more efficiently, unnecessary periods can be omitted. No need to use punctuation when the following elements appear alone:

    • Label
    • Title
    • Tips under the input box
    • Text in tooltip component
    • Sentences in the table

    Correct Example
    Preview
    Correct Example
    Wrong Example
    Preview
    Wrong Example

    The following elements need to be punctuated when they appear separately:

    • Multiple sentences or paragraphs
    • Any sentence before a link

    Use exclamation marks with caution

    Correct Example
    Preview
    Correct Example
    Wrong Example
    Preview
    Wrong Example

    The exclamation mark will make the tone appear too excited, and it will easily make the atmosphere too tense.

    Note: When expressing greetings or congratulations to the user, use "!" is reasonable, such as" Welcome back to the community! ".