ant-design/484ec217-async.49a15b82.js

(("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd=("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd||[]).push([["484ec217"],{"484ec217":function(e,a,t){"use strict";t.d(a,"__esModule",{value:!0}),t.d(a,"default",{enumerable:!0,get:function(){return d;}});var s=t("777fffbe"),o=t("f19d2b93"),l=s._(t("75f4da45")),i=s._(t("97c488ea")),r=s._(t("c96b0d01")),n=t("5b220c3d"),c=t("9c86e52a"),h=t("dd46a9b6"),d=function(){return(0,o.jsx)(c.DumiPage,{children:(0,o.jsx)(n.Suspense,{fallback:(0,o.jsx)(r.default,{}),children:(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)("div",{className:"markdown",children:[(0,o.jsx)("p",{children:h.texts[0].value}),(0,o.jsxs)("blockquote",{children:[(0,o.jsx)("img",{src:"https://os.alipayobjects.com/rmsportal/wAcbQmeqTWDqsnu.png",width:"150"}),h.texts[1].value]}),(0,o.jsx)("hr",{}),(0,o.jsxs)("h2",{id:"always-visible-tools",children:[(0,o.jsx)(i.default,{"aria-hidden":"true",tabIndex:"-1",href:"#always-visible-tools",sourceType:"a",children:(0,o.jsx)("span",{className:"icon icon-link"})}),"Always-Visible Tools"]})]}),(0,o.jsxs)(l.default,{children:[h.texts[2].value,(0,o.jsx)("img",{className:"preview-img",alt:"example of Always-Visible Tools, from Zhihu",description:"Status No.1: A clear clickable area makes it easier to highlight the button on the page.<br>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.<br>Status No.3: The style of the button obviously changes once clicked.",src:"https://gw.alipayobjects.com/zos/rmsportal/ofpeZpgdrqXcRpTlVXTp.png"})]}),(0,o.jsxs)("div",{className:"markdown",children:[h.texts[3].value,(0,o.jsx)("br",{}),(0,o.jsx)("hr",{}),(0,o.jsxs)("h2",{id:"hover-reveal-tools",children:[(0,o.jsx)(i.default,{"aria-hidden":"true",tabIndex:"-1",href:"#hover-reveal-tools",sourceType:"a",children:(0,o.jsx)("span",{className:"icon icon-link"})}),"Hover-Reveal Tools"]})]}),(0,o.jsxs)(l.default,{children:[h.texts[4].value,(0,o.jsx)("img",{className:"preview-img",alt:"example of Hover-Reveal Tools",description:"On mouse hover, the tools are revealed.",src:"https://gw.alipayobjects.com/zos/rmsportal/XzKWrNfqIMNnIrwWNJYg.png"})]}),(0,o.jsxs)("div",{className:"markdown",children:[(0,o.jsx)("p",{children:h.texts[5].value}),(0,o.jsx)("br",{}),(0,o.jsx)("hr",{}),(0,o.jsxs)("h2",{id:"toggle-reveal-tools",children:[(0,o.jsx)(i.default,{"aria-hidden":"true",tabIndex:"-1",href:"#toggle-reveal-tools",sourceType:"a",children:(0,o.jsx)("span",{className:"icon icon-link"})}),"Toggle-Reveal Tools"]})]}),(0,o.jsxs)(l.default,{children:[h.texts[6].value,(0,o.jsx)("img",{className:"preview-img",alt:"example of Toggle-Reveal Tools",description:"The table reveals an input box from the text only when the edit mode is turned on for the area.",src:"https://gw.alipayobjects.com/zos/rmsportal/iLilpTYKqogBNlwpmVGw.png"})]}),(0,o.jsxs)("div",{className:"markdown",children:[(0,o.jsx)("p",{children:h.texts[7].value}),(0,o.jsx)("br",{}),(0,o.jsx)("hr",{}),(0,o.jsxs)("h2",{id:"visible-area--clickable-area",children:[(0,o.jsx)(i.default,{"aria-hidden":"true",tabIndex:"-1",href:"#visible-area--clickable-area",sourceType:"a",children:(0,o.jsx)("span",{className:"icon icon-link"})}),"Visible Area \u2260 Clickable Area"]})]}),(0,o.jsxs)(l.default,{children:[h.texts[8].value,(0,o.jsx)("img",{className:"preview-img",alt:"example of hypertext hot spot",description:"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.",src:"https://gw.alipayobjects.com/zos/rmsportal/lhOpWlaOzwsuHGxqHgPg.png"})]}),(0,o.jsxs)("div",{className:"markdown",children:[(0,o.jsx)("p",{children:h.texts[9].value}),(0,o.jsx)("br",{})]}),(0,o.jsxs)(l.default,{children:[h.texts[10].value,(0,o.jsx)("img",{className:"preview-img",alt:"example of button hot spot",description:"Move the mouse near the button and activate the hover state.",src:"https://gw.alipayobjects.com/zos/rmsportal/BlUnqNCHsgUnhnRjMTnX.png"})]}),(0,o.jsxs)("div",{className:"markdown",children:[(0,o.jsx)("p",{children:h.texts[11].value}),(0,o.jsx)("blockquote",{children:(0,o.jsx)("p",{children:h.texts[12].value})})]})]})})});};},dd46a9b6:function(e,a,t){"use strict";t.d(a,"__esModule",{value:!0}),t.d(a,"texts",{enumerable:!0,get:function(){return s;}}),t("27cca69b");let s=[{value:"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.",paraId:0},{value:"\n**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.\n",paraId:1},{value:"\n  ",paraId:2},{value:"\nIf an action is critical, expose it directly in the interface and keep it always visible.\n",paraId:1},{value:"\n  ",paraId:3},{value:"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.",paraId:4},{value:"\n  ",paraId:5},{value:"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.",paraId:6},{value:"\n  ",paraId:7},{value:"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.",paraId:8},{value:"\n  ",paraId:9},{value:"Increase the clickable hot spot to strengthen the responsiveness rather than increase the size of the button.",paraId:10},{value:"Note that it is especially suited for Mobile.",paraId:11}];}}]);