ant-design/docs/spec/lightweight.en-US.md
zombieJ c80136a9a7
New Component: Typography (#14250)
* text with prefix

* add edit style

* support editable

* enhance accessibility & type experience

* optimize IME case

* support copy

* add locale

* add secondary & disabled

* add ellipsis shadow text

* split to 3 components

* update snapshot

* update desc

* change lines also need update ellipsis

* skip aria when is in ellipsis

* add ResizeObserver in _util

* update snapshot

* move TestBase into test file

* update test case

* update doc

* fix typo

* important => level

* use rows

* update demo cols to 1

* fix cssText not work in firefox

* update doc

* add miss point

* support extendable

* update snapshot

* fix doc

* copyable support string

* update snapshot

* update doc

* update doc desc

* adjust style

* full test

* reset after test

* rename

* update snapshot

* fix compile

* adjust style

* update desc

* update prefixCls

* update margin

* adjust

* nest wrap of tag content

* adjust style

* update comment

* rm %

* one more thing

* tmp of measure

* merge string as children

* update snapshot

* update testcase

* remove comment

* use internal variable for configProvider passing

* update snapshot

* use expandable instead of extendable

* less variable it

* update demo

* update less

* adjust code & mark style

* remove mark padding

* update measure logic

* support nest element style

* use childNode.textContent to fix react 15 error

* update css

* popout Typography

* add link style

* adjust doc

* use ellipsis instead of rows & expandable

* update doc

* update doc

* update doc & style

* fix typo

* add css ellipsis support

* client render

* update snapshot

* enhance copyable

* support onExpand

* update test case

* add test of css ellipsis

* fix logic in react 15

* rename onChange -> onSave

* use tagName of article

* fix lint
2019-02-19 11:42:05 +08:00

3.0 KiB

category order title
Principles 7 Keep it Lightweight

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 **: 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.



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.