Առաջնորդության և ինտերակտիվ ազդեցությունները

1) Առաջնորդության դերը UX-ում

Hover/press/focus-ը հետադարձ լեզուն է։ Օգտագործողը պետք է անմիջապես հասկանա

«Սա ինտերակտիվ է»։ (ուղեցույց/105/լուսավորություն),

«Որտե՞ ղ եմ ես»։ (ֆոկուս-ոճ),

«Ի՞ նչ է տեղի ունենալու տեսահոլովակով»։ (վիճակը և afford.ru),

«Արդյո՞ ք դա տեղի ունեցավ»։ (action/pressed և հաջորդ feedback)։

Սկզբունքն այն է, որ էֆեկտները մեծացնում են իմաստը և չեն փոխարինում այն։ Հիմնական տեղեկատվությունը և հասանելիությունը չպետք է թաքնվեն միայն առաջնորդության համար։

2) Պետության և սեմանտիկայի մոդելը

Հիմնական հավաքածուը '"wwww.d.m.ru" hover' me 'focus' action/pressed 'entabled 'loading "(oporational)։

Հղումների համար ավելացնում ենք «visited», անջատիչների համար '«www.ked»։

Տարբերության պահանջները

Տարրերի միջև տեսողական տարբերություն է ձևը/հաստությունը/իկոնիկան, ոչ միայն գույնը։

Տեքստի/սրբապատկերների հակադրությունը ֆոնի վրա ՝ 244։ 5: 1 (սովորական տեքստը), 243:1 (մեծ/ճարպային)։

Ֆոկուսը երևում է առանց առաջնորդության (ստեղնաշար/սկրինիդեր)։

3) Սարքեր և լրատվամիջոցների հարցումներ

Ոչ բոլորն ունեն hover։ Պլանավորել ինտերակտիվ լինել տարբեր տեսակի մուտքագրման համար

css
/ There is an exact pointer and hover (mouse/trackpad )/
@ media (hover: hover) and (pointer: fine) {/hover effects/}

/ No hover or rough pointer (touch/remote control )/
@ media (hover: none), (pointer: coarse) {/alternatives to hover/}

/ Any type of pointer (hybrid devices )/
@ media (any-hover: hover) {/minimal improvements/}

Կանոնները

Tach սարքերի վրա առաջնորդման էֆեկտները քննադատական չեն գործողության հայտնաբերման համար, օգտագործեք ակնհայտ affordances 'գույն/iconka/ramka/հուշում։

Մի թաքցրեք տարհանումը/վերահսկումները միայն «hover» -ի տակ։

4) Տևողությունը և կորերը

Կարճ և կանխատեսելի

Hover: 120-180 ms

Focus: 120-180 ms

Active/Pressed: 80–120 мс

Ripple/ink (եթե օգտագործվում է): 240 ms, 1 ցիկլ

Կորը լռելյայն '"cubic-bezier (0։ 2, 0, 0. 2, 1)`

Action-ը ավելի արագ է ("cubic-bezier (0)։ 4, 0, 1, 1) «, ելքը ավելի մեղմ է (» cubic-bezier (0, 0, 0, 0)։ 2, 1)`).

5) Դիզայնի համակարգը (օրինակ)

json
{
"interactive": {
"duration": { "hover": 160, "focus": 160, "active": 90 },
"easing": { "std": "cubic-bezier(0. 2,0,0. 2,1)", "acc": "cubic-bezier(0. 4,0,1,1)" },
"shadow": { "hover": "var(--elev-2)", "focus": "0 0 0 3px var(--focus-ring)" },
"opacity": { "disabled": 0. 38, "muted": 0. 64 }
}
}

6) Կոճակներ ՝ ստանդարտ քարտ

Ստանիսլավ ՝ ընթերցված թիվ 4 տեքստը։ 5: 1 դեպի ծոց։

Hover: Windows WinL ֆոն 0։ 02–0. 04, թեթև ստվեր, no. ։

Action: նաև WindoL 0-ը։ 02–0. 04, կրճատված ստվեր/ավելացում (scale 0։ 98), տևում է։ 80-100 մզ։

Focus: հակադրական օղակ 2-3 px առանց blur.

Disabled: курсор `not-allowed`/`default`, opacity ≤ 0. 38, ոչ մի hover ազդեցություն։

css
.button {
transition: background-color. 16s var(--ease), transform. 09s var(--ease-acc), box-shadow. 16s var(--ease);
}
@media (hover:hover) and (pointer:fine) {
.button:hover  { background: var(--btn-bg-hover); box-shadow: var(--shadow-hover); }
}
.button:active  { transform: scale(.98); }
.button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.button[disabled] { opacity:.38; pointer-events: none; }

7) Հղումներ և տեքստային գործողություններ

Տարբերությունը միայն գույնով չէ 'ընդգծել լռելյայն կամ hover/focus։

Առաջնորդության համար 'ընդգծման պարամետրեր (108/108 set), երանգի հեշտ փոփոխություն։

«Visited» -ը նույն պալիտրա մեկ այլ երանգ է, հակադրությունը պահպանված է։

css a { text-decoration: underline; text-underline-offset:.12em; }
@media (hover:hover) and (pointer:fine) {
a:hover { text-underline-offset:.2em; }
}
a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

8) Քարտեր, ցուցակներ, աղյուսակներ

Քարտերը

Hover: փափուկ ստվեր/լուսավորություն, www.'pointer 'միայն եթե ամբողջ քարտը կլիկաբալ է։

Action 'կարճ ավելցուկ, վերնագրի լուսավորություն։

Ֆոկուս 'տեսանելի օղակ քարտի շուրջ, ոչ միայն ներսում։

Աղյուսակի տողերը

Hover-ֆոն NoL 0-ի հետ։ 02–0. 04; ակտիվ տողը պարզ շրջանակ է։

Գծային կտորները թույլատրվում են միայն afford.ru-ի դեպքում (iconca «Express», հուշում)։

Ցուցակները

Ջանասիրաբար սահմանափակեք «անտառը» կասկադային ուշացումներից 'առավելագույնը 6-8 տարրեր (stagger 20-30 ms)։

9) Ձևեր և մուտքային դաշտեր

Դաշտերի մոտ 'բարակ լուսավորություն (NoL 240։ ե.), առանց բլոկի չափի փոփոխության։

Ֆոկուս 'հակաբիոտիկ օղակ + շրջանակի գույնի փոփոխություն; placeholder մնում է տարբեր (363: 1)։

Սխալ 'գույնը + իկոնկա/տեքստ; կարճ «shake» թույլատրելի է 366 px, 140 ms, մեկ անգամ։

10) Իկոնկի և փոքր նպատակներ

Ավելացրեք կլիկի գոտին 32-32 (desktop )/40-40 (mobile), նույնիսկ եթե իկոն ինքն է 20-24 px։

Hover 'անթափանցելիության/ծոցի/հաստության փոփոխությունը, ոչ ավելի քան 1-2 հատկություններ։

Action: հակիրճ «scale 0»։ 98.

Focus: օղակը կլիկի գոտու բեռնարկղով։

11) Հասանելիություն (A1y) և ստեղնաշար

Աջակցեք 'focus-visible' (մկների համար focus-stille-ը չի ցույց տալիս, ստեղնաշարի համար ցույց ենք տալիս)։

Այն տարրերը, որոնք ստեղծում են hover-հուշումներ, պետք է ունենան մոտավոր (նույն բովանդակությունը հայտնվում է Tab/Enter կլավիչով)։

Aria-ատրիբուտներ. Ինտերակտիվները ունեն «role», «aria-pressed »/« aria-expanded »/« aria-current» իրավիճակում։

Eurofers-reduced-motion: Մենք փոխարինում ենք մասշտաբը/շարժումը նվազագույն (opacity/www.l), մենք անջատում ենք իմպուլսացիան։

css
@media (prefers-reduced-motion: reduce) {
{ transition-duration:.01ms! important; animation: none! important; }
}

12) Արտադրողականություն

Animiruret միայն «opacity» և «transform»; խուսափեք «width/height/left/top», ծանր blur/teney բազմաթիվ տարրերի վրա։

Չափավոր օգտագործեք «will-change»; հեռացրեք անցումն ավարտելուց հետո։

Ցուցակներում/բրազիլացիները նվազագույն էֆեկտներ են, առանց «գլոբալ» repaint։

13) Hover-intent և «լիպտություն»

Դիսկոտոպի վրա նվազեցրեք կեղծ hover-stugers։

Ձգձգման շեմը 80-120 մզ է մինչև բարդ tooltip/ընտրացանկը։

Դասընթացի «լիպտությունը» 'եթե օգտագործողը շարժվում է կետից մինչև մենյու անկյան տակ, տալիս ենք 200-300 մզ «միջանցք» (Fitault եռանկյուն)։

Մենք փոխարինում ենք hover-ը press-ին կամ ակնհայտ կոճակը «դեռ»։

14) Tooltip/ընտրացանկը/dropdauns/

Բացահայտումը 'hover-intent (desktop )/press (tach), 112 - հեռանալու/blur/ESC։

Դիրքը 'աղբյուրին, սլաքը հավասար է։ max-width և փոխանցումները ներառված են։

Հասանելիություն ՝ "role =" tooltip ", մենք կապում ենք" aria-describedby "; ընտրացանկի համար '"role =" mult "' + սլաքների կառավարումը։

15) iGaming հատկությունները

Գործակիցները/առաջնորդները 'hover-ը փակցնում է տողը/բջիջը, բայց չի փոխում դիրքի մետրերը (առանց «ցատկելու»)։

Մրցույթների/բոնուսների քարտերը. Hover կարող է «վերակենդանացնել» շրջանակը/իկոնկան, բայց տեքստային CTA-ն և պայմանները մնում են կարդալու (414։ 5:1).

Պատասխանատու ծանուցումներ (18 +, լիմիտներ) 'առանց շեղման ազդեցությունների։ երբ առաջնորդվում է, միայն ընդգծում է հղումները և հստակ ֆոկուսը։

Փոխանցման/գնման կոճակները 'active-feedback-ը պարտավոր է (տեսողական սեղմում/ավելացում) և ուղարկելուց հետո անիմաստ ազդանշան։

16) Ինտերֆեյսի բաղադրատոմսերի օրինակներ

Կոճակը-CTA (light/dark)

css
.cta {
background: var(--role-primary);
color: var(--on-primary);
transition: background-color. 16s var(--ease), transform. 09s var(--ease-acc), box-shadow. 16s var(--ease);
}
@media (hover:hover) and (pointer:fine) {
.cta:hover { background: var(--role-primary-hover); box-shadow: var(--elev-2); }
}
.cta:active { transform: scale(.98); }
.cta:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); }

Քարտը

css
.card { transition: box-shadow. 16s var(--ease), border-color. 16s var(--ease); }
@media (hover:hover) and (pointer:fine) {
.card:hover { box-shadow: var(--elev-2); border-color: var(--border-strong); }
}
.card:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); }

Աղյուսակի տողը

css
.table tr { transition: background-color. 12s var(--ease); }
@media (hover:hover) and (pointer:fine) {
.table tr:hover { background: var(--row-hover); }
}
.table tr:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }

17) Anti-patterna

Թաքցնել քննադատական գործողությունները/ընտրացանկը միայն hover-ի համար։

Փոխեք չափսերը/դասավորությունները առաջնորդելիս (layout)։

Օպորան միայն գույնի համար է, որ տարբերվում է վիճակից։

Չափումը, անսահման զարկերակները, «թթվային» գլոուն տեքստերում։

Focus-2019-ի բացակայությունը կամ նրանց անտեսանելիությունը մութ թեմայի վրա։

Հեղեղել «pointer» -ը ոչ ինտերակտիվ տարրերի վրա։

18) QA-chek-թերթ

Հասանելիություն

• Բոլոր ինտերակտիվները հասնում են ստեղնաշարի; ֆոկուսը տեսնում ենք։
• Hover-բովանդակությունը հասանելի է «focus '/' aria»։
• Տեքստի և սրբապատկերների հակադրությունը համապատասխանում է WCAG-ին։

Վարք

• Hover/action/wwww.abled/visited տարբերվում են ձևից և տոնից։
• Ոչ մի արձագանք> 120 մզ։
• Տաչի վրա կա hover այլընտրանք։

Պերֆորանսը

• Անիմացվում են միայն «transform »/« opacity»։
• Դժվար բլուր/ստվեր չկա բազմաթիվ տարրերի վրա։
• Երկար ցուցակների վրա էֆեկտները կրճատվում են։

19) Մոսկվա դիզայնի համակարգում

Հիմնական բաղադրիչների (կոճակներ, հղում, քարտեր, դաշտեր, աղյուսակների տողեր)։

Երկարությունների/կորերի/ստվերների հոսանքները և light/dark-ի օրինակը։

«Hover vs Touch» բաժինը 'այլընտրանքների և օրինակների կանոնները։

«Do/Don 't» կարճ տեսահոլովակներով և հակադրության ցուցանիշներով։

Live ռեզյումե

Առաջնորդման ազդեցությունը ինտերֆեյսի լեզվի օժանդակ, բայց քննադատական մասն է։ Արեք դրանք հակիրճ և կանխատեսելի, աջակցեք ստեղնաշարին և տնակին, տրամադրեք հակադրություն և տեսանելի ֆոկուս, միայն էժան հատկություններ։ Այդ ժամանակ ինտերակտիվ ակտիվությունը մեծացնում է գործողությունների պարզությունն ու արագությունը և չի խանգարում դրանց։