ant-design/docs/spec/lightweight.en-US.md
偏右 84e3aa2a37 New design docs (#5370)
* refactor design documentations

* update color document

* Add icon

* Fix images in documentation

* fix some documentation style

* Finish icon doc

* Add copywriting doc

* Add layout.md and navigation.md

* Add more docs

* Fix error color

* improve markdown doc width

* update some details

* fix doc detail

* Add motion.md
2017-03-17 18:56:37 +08:00

4.0 KiB
Raw Blame History

category order title
Principles 6 Keep it Lightweight

Fittss 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 users interaction. Putting tools in context makes for lightweight interaction.

** Fitts's Law **: The 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

example of Always-Visible Tools, from Zhihu

If an action is critical, expose it directly in the interface and keep it always visible.



Hover-Reveal Tools

example of 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.



Toggle-Reveal Tools

example of 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.



Interaction in Context

good example good example bad example

If the actions are secondary or alternative, hide Contextual Tools in the user flow, in order to keep visual clutter to a minimum, reduce the load of cognition burden and bring a surprise.

Some relative knowledge of Providing an Invitation can also be applied.



Visible Area ≠ Clickable Area

example of hypertext hot spot

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 button hot spot

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.