logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.27.0
  • 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
Always-Visible Tools
Hover-Reveal Tools
Toggle-Reveal Tools
Visible Area ≠ Clickable Area

Keep it Lightweight

contributors
    • Stay on the PageProvide an Invitation

    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
    X
    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
    WeaveFox logoWeaveFox-AI Development with WeaveFox 🦊
    xtech logoAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Ant Design Community

    Fitts's Law is an ergonomic principle that ties the size of a target and its contextual proximity to ease of use. In other words, if a tool is close at hand and large enough to target, then we can improve the user's interaction. Putting tools in context makes for lightweight interaction.

    Fitts's Law:fittsThe time to acquire a target is a function of the distance to and size of the target. It is proportional to the distance to the target and inversely proportional to the width of the target.

    Always-Visible Tools

    If an action is critical, expose it directly in the interface and keep it always visible.
    example of Always-Visible Tools, from Zhihu
    Preview
    example of Always-Visible Tools, from Zhihu
    Status No.1: A clear clickable area makes it easier to highlight the button on the page.
    Status No.2: As hovering over the button, the mouse pointer turns into a hand symbol, and the fill color of the button changes to a dark color, which provides a clear call to action.
    Status No.3: The style of the button obviously changes once clicked.

    Hover-Reveal Tools

    Instead of making Contextual Tools always visible, we can show them on demand. One way to do this is to reveal the tools when the user pauses the mouse over an object.
    example of Hover-Reveal Tools
    Preview
    example of Hover-Reveal Tools
    On mouse hover, the tools are revealed.

    Toggle-Reveal Tools

    Toggle a tool mode for an area or page when the actions are not the main flow. The tools to accomplish this are revealed on the activation of the toggle.
    example of Toggle-Reveal Tools
    Preview
    example of Toggle-Reveal Tools
    The table reveals an input box from the text only when the edit mode is turned on for the area.

    Visible Area ≠ Clickable Area

    The clickable area of hypertext is affected by the length of the string in a cell. The whole cell can be set to a hot spot in order to be triggered easier.
    example of hypertext hot spot
    Preview
    example of hypertext hot spot
    When hovering on the cell in which the hypertext is positioned, the mouse turns from a cursor to a hand symbol. Click it and jump to another page.

    Increase the clickable hot spot to strengthen the responsiveness rather than increase the size of the button.
    Note that it is especially suited for Mobile.
    example of button hot spot
    Preview
    example of button hot spot
    Move the mouse near the button and activate the hover state.