მიკრორაიონი და ფიტბეკი

1) რა არის მიკროტალღური მოქმედება

მიკრო ეფექტურობა - მოკლე ციკლები „სიგნალი - პასუხი“, რომელიც დაადასტურებს, რომ სისტემამ მოისმინა მომხმარებელი და მიდის შედეგამდე.

1. ტრიგერი (კლიშე, სვიპი, ფოკუსი, სისტემური მოვლენა).

2. წესები (როგორც იცვლება).

3. ფიდბეკი (ვიზუალური/ხმის/ტაქტილური/ტექსტური).

4. ციკლი/მეტა წესები (გამეორება, გადინება, undo/redo).

მიზანი: გაურკვევლობისა და შემეცნებითი დატვირთვის შემცირება ამოცანისგან ყურადღების გარეშე.

2) დიზაინის პრინციპები

მნიშვნელობა> ეფექტი. ეფექტი განმარტავს რა მოხდა და რა შემდეგ.
მყისიერი. პირველი პასუხი არის 100 ms (ღილაკები/კონცენტრატორები).
ნათჟრთნა. გამორჩეული მდგომარეობები: hover/focus/pressed/disabled/loading.
დაზოგვა. მინიმალური თვისებები, მოკლე ხანგრძლივობა, „ფეიერვერკის“ გარეშე.
თანმიმდევრულობა. იგივე მოქმედებები იგივე სიგნალებია.
ხელმისაწვდომობა. ფიდბეკი ხედავს, გვესმის და კითხულობს ეკრანზე; არსებობს მოძრაობის/ხმის ალტერნატივა.

3) ტაიმინგი და მრუდი

Hover/Focus: 120-180 ms

Pressed/Toggle: 80–120 мс

Toast/Tooltip: შეყვანა 180-240 ms, გამომავალი 120-160 ms

ინლაინ მონიტორინგი: 100 ms ევრო ფოკუსის დაკარგვის შემდეგ

ნაგულისხმევი მრუდი: 'cubic-bezier (0. 2, 0, 0. 2, 1)`; პრესისთვის - დაჩქარებული 'cubic-bezier (0. 4, 0, 1, 1)`.

4) მიკროტალღების კატალოგი

4. 1 ღილაკები და კონცენტრატორები

დაუყოვნებლივი პასუხი: ვიზუალური „ნაჭერი “/დეპრესია + მდგომარეობა„ busy “ქსელის მოთხოვნით.
ოპტიმისტური განახლება: ჩვენ დაუყოვნებლივ ვცვლით UI- ს, შეცდომით ვბრუნდებით (undo- სთან ერთად).
ორმაგი დაწკაპუნების დებაუნსი: გადაკეტეთ განმეორება პასუხამდე/timeout.

4. 2 ფორმების ინტეგრაცია

მოვალეობის შემსრულებელი blur ველში; შეტყობინებები მოკლე და კონსტრუქციულია („მინიმუმ 8 სიმბოლო“).
სტატუსის ხატი + ფერი + ტექსტი (არა ერთი ფერი).
პაროლებისთვის - „ძალის“ მყისიერი ინდიკატორი (არ ერევა შესვლას).

4. 3 სადღეგრძელო/ბანერები/სნეკბარები

გამოიყენეთ არა ბლოკირების მტკიცებულებები.
ხანგრძლივობა 2-5 წმ, პაუზა hover/focus, Undo ღილაკი, სადაც შესაფერისია.
არ დახუროთ მნიშვნელოვანი შინაარსი და CTA.

4. 4 წინსვლა და ჩონჩხი

თუ პროცესის სიგრძე ცნობილია, პროგრესირებადი; თუ არა, სპინერის ნაცვლად სკელეტონი.
Layout- ის გარეშე: ფიქსი. ბლოკის სიმაღლეები.

4. 5 ბეიჯი/მრიცხველები

ციფრების კონტრასტი 4. 5:1; მაქსიმუმ 99/999 „99 +“ შემცირებით.
ანიმაცია - მოკლე ნაბიჯები 40-60 ms ბრძოლებით, განლაგების „დარტყმის“ გარეშე.

4. 6 Tooltip/Help

გამოჩენა hover/focus; ხელმისაწვდომობა 'aria-describedby' საშუალებით.
კრიტიკული ინფორმაციის აკრძალვა მხოლოდ tooltip- ში.

5) შეცდომები, ცარიელი მდგომარეობა, უნდო

შეცდომა: გულწრფელი ტექსტი, მიზეზისა და მოქმედების ახსნა („განმეორება“, „ბარათის შეცვლა“).
ცარიელი მდგომარეობა: რა არის ეს და როგორ უნდა დაიწყოს; ილუსტრაცია ყრუ, ტექსტის კონტრასტია AA/AAA.
Undo window: 5-10 წმ შექცევადი მოქმედებებისთვის (მოცილება, ტყვიამდე განაკვეთის გაუქმება).

6) მულტიმოდური ფიტბეკი

ხმა: მშვიდი, მოკლე, ერთი ნიმუში ღონისძიების ტიპზე (წარმატება/შეცდომა/ყურადღება); გამორთეთ პარამეტრებში.
ვიბრო/ჰაპტიკა: მსუბუქი პასუხი პრესაზე/წარმატებაზე; ჩვენ პატივს ვცემთ 'prefers-reduced-motion' და სისტემის შეზღუდვებს.
ვიზუალური: მხოლოდ „ტრანსფორმირება/კონტროლი“, მძიმე ბლურ/ჩრდილების გარეშე მასივებზე.

7) წვდომა (A11y)

': focus-visible' კლავიატურისთვის; ფოკუსის ბეჭედი ბლურის გარეშე.
Scrinrider: 'role = „status “/“ alert“ სადღეგრძელოებისთვის; ცოცხალი რეგიონები 'aria-live = "polite/assertive" ".
ხმის/მოძრაობის ალტერნატივა; 'prefers-reduced-motion: reduce'.
ტექსტის და ხატების კონტრასტი - WCAG- ის მიხედვით (ჩვეულებრივი 4. 5:1).

8) შესრულება

რეაგირება 100 ms ევროზე: ვიზუალური პასუხი ქსელში.
ანიმაცია 'ტრანსფორმაცია/ანაზღაურება'; თავიდან აიცილეთ 'height/left/box-shadow' მრავალი ელემენტი.
ქსელის ეფექტები - პრეფექტურითა და ოპტიმისტიკით; retrai idempotent.

9) მიკროტალღების ნიშნები (დიზაინის სისტემა)

json
{
"micro": {
"duration": { "hover": 160, "focus": 160, "press": 90, "toastIn": 220, "toastOut": 140 },
"easing":  { "std": "cubic-bezier(0. 2,0,0. 2,1)", "acc": "cubic-bezier(0. 4,0,1,1)" },
"toast":  { "timeoutMs": 3500, "pauseOnHover": true },
"badge":  { "max": 99, "emphasisStepMs": 50 }
}
}

10) Snippets განხორციელება

html
<div id="toast" role="status" aria-live="polite" hidden></div>
<script>
const toast = (msg, {undo, timeout=3500}={})=>{
const el = document. getElementById('toast');
el. innerHTML = undo? '$ {msg} <button> Undo </button>': msg;
el. hidden = false;
let t = setTimeout(close, timeout);
el. onmouseenter = () => clearTimeout(t);
el. onmouseleave = () => t = setTimeout(close, timeout);
if (undo) el. querySelector('button'). onclick = ()=>{ undo(); close(); };
function close(){ el. hidden = true; el. innerHTML=''; }
};
</script>

js const rules = { password: v => v.length>=8         "Minimum 8 characters"};
document. querySelectorAll('[data-validate]'). forEach(i=>{
i.addEventListener('blur', e=>{
const rule = rules[e. target. name]; if (!rule) return;
const ok = rule(e. target. value);
e. target. dataset. state = ok===true? 'ok': 'err';
e. target. nextElementSibling. textContent = ok===true? '': ok;
});
});

js export const haptic = type => {
if (!('vibrate' in navigator)) return;
if (type==='success') navigator. vibrate(10);
if (type==='error') navigator. vibrate([20,40,20]);
};

css
.button{ transition: transform. 09s cubic-bezier(.4,0,1,1), box-shadow. 16s cubic-bezier(.2,0,.2,1); }
.button:active{ transform: scale(.98); }
.input[data-state="err"]{ outline: 2px solid var(--role-danger); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (prefers-reduced-motion: reduce){ { animation:none! important; transition-duration:.01ms! important; } }

11) მეტრიკა და ხარისხის კონტროლი

INP p75 <200 ms, Long Tasks- ის წილი <5%.
First User Feedback (კლიკი - ვიზუალური პასუხი) 100 ms.
ოპტიმისტური მოქმედებების წილი უკან დახევით <3% (წინააღმდეგ შემთხვევაში - უნდობლობა).
UX გამოკითხვები: შეცდომების ცნობების გაგება, მტკიცებულებების ხილვა.

QA ჩეკის სია

• თითოეულ ინტერაქტიულობას აქვს 'პრესა/busy/disabled'.
• შეცდომებს თან ახლავს ტექსტი და მოქმედებები (Retry/Undo).
• სადღეგრძელოები ხელმისაწვდომია SR- ით და არ ბლოკავს საკვანძო შინაარსს.
• ინტეგრაცია არ ერევა დანერგვაში; შეტყობინებები სპეციფიკურია.
• მხარი დაუჭირა prefers-reduced-motion '; ხმა/ვიბრაცია გამორთულია.
• არ არის ნახტომი layout და strob; ანიმაცია 'ტრანსფორმაცია/opacity'.

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

განაკვეთი/შეძენა: მყისიერი 'პრესა' busy ', სადღეგრძელო „ჩვეულებრივ“ Undo- სთან (თუ რეგულაცია საშუალებას გაძლევთ), პირადობის გასაღებები; დაგვიანებით> 1 გვ - „ჩვენ ველოდებით დადასტურებას“....
Spin/Reveal: მოკლე პრეს-ფიტბეკი, გლუვი დასაწყისი/გაჩერება უსასრულო მოციმციმე გარეშე; მოგება - ზრდა - 500 ms + კითხვის ტექსტი (AAA).
ლაივ კოეფიციენტები: ბრძოლების განახლებები, ვიზუალური დარტყმა (ისარი/სისქე) „ნახტომი“ გარეშე.
გადახდები/დასკვნები: ეტაპობრივი პროგრესი (ICC - გადამოწმება - გადახდა), უარის თქმის მიზეზების გამჭვირვალე ტექსტები.
პასუხისმგებელი თამაში: შეტყობინებები ყურადღების გარეშე; ყველაზე მაღალი კონტრასტი, რომელიც აშკარაა CTA „ლიმიტის დაყენება“.

13) ანტი შაბლონები

დაელოდეთ ქსელის პასუხს, სანამ დაწკაპუნებით გამოეხმაურებით.
„ფერი ფორმის გარეშე“: მდგომარეობა განსხვავდება მხოლოდ ელფერით.
გაუთავებელი პულსაცია/მოციმციმე, მკვეთრი ბგერები გამორთვის გარეშე.
Tooltip კრიტიკული შინაარსით, კლავიატურისგან მიუწვდომელი.
სპინერი სიცარიელეში> 1-2 პროგრესის/ჩონჩხის გარეშე.
თხელი ჩრდილები/ბლური ასობით ელემენტზე (ფეხები სუსტი მოწყობილობებზე).

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

„Micro-tokens“: „duration/easing“, სადღეგრძელოების/საყრდენების/მოვალეობის შემსრულებლების პრესეტები.
„Patterns“: ღილაკები, ფორმები, სადღეგრძელოები, პროგრესი, inline შეცდომები, undo.
„A11y & Motion“: წესები SR/HC/reduced-motion; ARIA- ს მაგალითები.
„Do/Don 't“: მოკლე კლიპები ტაიმინგებით, INP/First Feedback ნომრებით.

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

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