სახელმძღვანელო ეფექტები და ინტერაქტიულობა

1) სახელმძღვანელო როლი UX- ში

• „ეს ინტერაქტიულია?“ (სახელმძღვანელო/კურსორი/განათება),
• „სად ვარ?“ (ფოკუსის სტილი),
• „რა მოხდება დაწკაპუნებით?“ (მდგომარეობა და მხარდაჭერა),
• „მოხდა თუ არა მოქმედება?“ (აქტიური/პრესა და შემდგომი feedback).

პრინციპი: ეფექტები აძლიერებს მნიშვნელობას და არ შეცვლის მას. ძირითადი ინფორმაცია და მოქმედების წვდომა არ უნდა იმალებოდეს მხოლოდ ხელმძღვანელობის მიღმა.

2) სახელმწიფო მოდელი და სემანტიკა

ძირითადი ნაკრები: 'default' - 'hover' 'focus' 'active/pressed' „disabled“ 'loading' (სურვილისამებრ).
ბმულებისთვის, ჩვენ დავამატებთ „ვიზიტს“, კონცენტრატორებისთვის - „შემოწმებული“.

• სახელმწიფოებს შორის - ვიზუალური განსხვავება ფორმა/სისქე/ხატი და არა მხოლოდ ფერი.
• ტექსტის/ხატის კონტრასტი ფონზე: 4 ევრო. 5:1 (ჩვეულებრივი ტექსტი), ევრო 3:1 (დიდი/ცხიმოვანი).
• ფოკუსი ჩანს სახელმძღვანელოს გარეშე (კლავიატურა/სკრინრიდი).

3) მოწყობილობები და მედია მოთხოვნები

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/}

• სენსორული მოწყობილობებზე სახელმძღვანელო ეფექტები არ არის კრიტიკული მოქმედების გამოსავლენად - გამოიყენეთ აშკარა affordances: ფერი/ხატი/ჩარჩო/მინიშნება.
• ნუ დაიმალებით ნავიგაცია/კონტროლი მხოლოდ „ჰოვერის ქვეშ“.

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)`

აქტიური - უფრო სწრაფად ('cubic-bezier (0. 4, 0, 1, 1) '), გასასვლელი უფრო რბილია (' cubic-bezier (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) ღილაკები: საცნობარო ნიმუში

Default: წაკითხული ტექსტი 4. 5:1 შევსებამდე.
Hover: - fona 0. 02–0. 04, მსუბუქი ჩრდილი, კურსორი 'pointer'.
Actival: კიდევ - IL 0. 02–0. 04, შემცირებული ჩრდილი/დეპრესია (სკალი 0. 98), გრძელდება. 80-100 ms.
Focus: კონტრასტული რგოლი 2-3 px ბლურის გარეშე.
Disabled: курсор `not-allowed`/`default`, opacity ≤ 0. 38, არა ჰოვერის ეფექტები.

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.
სახელმძღვანელოსთვის: ხაზის გაძლიერება (სისქე/ოფსეტი), ტონის მარტივი ცვლილება.
'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: რბილი ჩრდილი/ჩარჩოს განათება, კურსორი 'pointer' მხოლოდ იმ შემთხვევაში, თუ მთელი ბარათი არის დაწკაპუნებული.
• აქტიური: მოკლე დეპრესია, სათაურის განათება.
• Focus: ხილული რგოლი ბარათის გარშემო, არა მხოლოდ შიგნით.

• Hover-fon with Seagull 0. 02–0. 04; აქტიური სტრიქონი არის მკაფიო ჩარჩო.
• სტრიქონის დაწკაპუნება დასაშვებია მხოლოდ აშკარა affordance- ით (ხატი „“, მინიშნება).

• ფრთხილად შეიზღუდეთ კასკადის შეფერხებების „ხე“ - მაქსიმუმ 6-8 ელემენტი (stagger 20-30 ms).

9) ფორმები და ველები

მინდვრებში Hover: თხელი ჩარჩო განათება (SL ~ 0. 05), ბლოკის ზომის შეცვლის გარეშე.
Focus: კონტრასტული რგოლი + ჩარჩოს ფერის შეცვლა; placeholder რჩება გამორჩეული (3:1).
შეცდომა: ფერი + ხატი/ტექსტი; მოკლე „shake“ დასაშვებია 6 px, 140 ms ერთხელ.

10) ხატები და მცირე მიზნები

გაზარდეთ დაწკაპუნების ზონა 32 × 32 (desktop )/40 × 40 (მობილური), თუნდაც თავად ხატი 20-24 px.
Hover: გაუმჭვირვალე/შევსების/სისქის შეცვლა, არაუმეტეს 1-2 თვისებებისა.
აქტიური: მოკლე „snap“ სკალ 0-ზე. 98.
Focus: კლიკის ზონის კონტეინერის რგოლი.

11) წვდომა (A11y) და კლავიატურა

მხარი დაუჭირეთ ': focus-visible' (ჩვენ არ ვაჩვენებთ ფოკუს სტილს თაგვისთვის, ჩვენ ვაჩვენებთ კლავიატურას).
Hover მინიშნებების შემქმნელ ელემენტებს უნდა ჰქონდეთ ეკვივალენტი აქცენტით (იგივე შინაარსი ჩნდება Tab/Enter კლავიშის მიხედვით).
Aria ატრიბუტები: ინტერაქტივებს აქვთ 'role', 'aria-pressed '/' aria-expanded '/' aria-current' სიტუაციაში.
Prefers-reduced-motion: შეცვალეთ მასშტაბები/ცვლა მინიმუმამდე, გამორთეთ პულსაცია.

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

12) პროდუქტიულობა

ანიმაცია მხოლოდ 'opacity' და 'ტრანსფორმაცია "; თავიდან აიცილეთ 'width/height/left/top', მძიმე blur/ჩრდილები მრავალ ელემენტზე.
ზომიერად გამოიყენეთ 'will-change'; ამოიღეთ გადასვლის დასრულების შემდეგ.
სიებზე/ცხრილებზე - მინიმალური ეფექტები, „გლობალური“ შეცდომის გარეშე.

13) Hover-intent და „წებოვანი“

• რთული tooltip/მენიუს ჩვენებამდე 80-120 ms შეფერხების ბარიერი.
• კურსორის „წებოვანი“: თუ მომხმარებელი მოძრაობს წერტილიდან მენიუში კუთხეში, ჩვენ ვაძლევთ 200-300 ms „დერეფანს“ (სამკუთხედი Fitts).
• აპარატზე - შეცვალეთ ჰოვერი პრესით ან აშკარა ღილაკით „კიდევ“.

14) tooltip/მენიუ/dropdowns

აღმოჩენა: hover-intent (desctop )/press (tach), დახურვა - მოვლის/blur/ESC.
პოზიცია - წყაროსთან, მსროლელი გაათანაბრეს; max width და ტრანსფერები შედის.
წვდომა: 'role = „tooltip“', ჩვენ ვუკავშირებთ 'aria-describedby'; მენიუთვის - 'role = „mene“' + ისრის კონტროლი.

15) iGaming სპეციფიკა

კოეფიციენტები/ლიდერები: ჰოვერი ხაზს უსვამს ხაზს/უჯრედს, მაგრამ არ ცვლის პოზიციონირების მეტრიკებს („ნახტომი“ გარეშე).
ტურნირების/პრემიების ბარათები: ჰოვერს შეუძლია „გააცოცხლოს“ ჩარჩო/ხატი, მაგრამ ტექსტური CTA და პირობები წაკითხულია (4 ევრო). 5:1).
პასუხისმგებელი შეტყობინებები (18 +, ლიმიტები): ყურადღების გარეშე; როდესაც მითითებულია, დასაშვებია მხოლოდ კავშირების ხაზგასმა და მკაფიო ხრიკი.
განაკვეთების/შესყიდვების ღილაკები: აქტიური feedback სავალდებულოა (ვიზუალური დაჭერით/დეპრესია) და ერთმნიშვნელოვანი დისაბლაცია გაგზავნის შემდეგ.

16) ინტერფეისის რეცეპტების მაგალითები

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) ანტი შაბლონები

კრიტიკული მოქმედებების/მენიუს დამალვა მხოლოდ ჰოვერისთვის.
ზომების/განლაგების შეცვლა ხელმძღვანელობის დროს (გადახტომა).
მხარდაჭერა მხოლოდ ფერია სახელმწიფოების განასხვავებლად.
ციმციმება, გაუთავებელი პულსაცია, „მჟავა“ glow ტექსტებზე.
ფოკუსის სტილის არარსებობა ან მათი უხილავი ბნელ თემაზე.
'pointer' კურსორის გადატანა არაინტრაქტულ ელემენტებზე.

18) QA ჩეკის სია

წვდომა

• ყველა ინტერაქტიული მიღწევა კლავიატურაზე; ფოკუსი ვხედავთ.
• Hover შინაარსი ხელმისაწვდომია 'focus '/' aria' მიხედვით.
• ტექსტისა და ხატების კონტრასტი შეესაბამება WCAG- ს.

ქცევა

• Hover/active/disabled/vited განასხვავებს ფორმასა და ტონს.
• პასუხის შეფერხება არ არსებობს> 120 ms.
• tach- ზე არის ალტერნატივა hover.

შესრულება

• ანიმაცია ხდება მხოლოდ 'ტრანსფორმაციით '/' opacity'.
• არ არსებობს მძიმე ბლურ/ჩრდილები მრავალ ელემენტზე.
• გრძელი სიებზე ეფექტები მინიმუმამდეა შემცირებული.

19) დოკუმენტაცია დიზაინის სისტემაში

სახელმწიფო ცხრილი ძირითადი კომპონენტებისთვის (ღილაკები, ბმულები, ბარათები, ველები, ცხრილების ხაზები).
ხანგრძლივობის/მრუდი/ჩრდილების ნიშნები და შუქის/ხმის კოდის მაგალითი.
განყოფილება „Hover vs Touch“: ალტერნატივის წესები და მაგალითები.
„Do/Don 't“ მოკლე კლიპებითა და კონტრასტით.

მოკლე რეზიუმე

სახელმძღვანელო ეფექტები არის ინტერფეისის ენის დამხმარე, მაგრამ კრიტიკული ნაწილი. გააკეთეთ ისინი მოკლე და პროგნოზირებადი, შეინარჩუნეთ კლავიატურა და კონტეინერი, უზრუნველყოთ კონტრასტი და ხილული ხრიკი, მხოლოდ იაფი თვისებები. შემდეგ ინტერაქტიულობა აძლიერებს მოქმედებების სიცხადესა და სიჩქარეს და არ ერევა მათ.