Advanced UI Essentials

உரைகளுக்கோ அல்லது பின்னணிக்கோ #000000 என்ற தூய கருப்பு நிறத்தைப் பயன்படுத்தக் கூடாது. இது கண்களைச் சோர்வடையச் செய்யும். அதற்குப் பதிலாக அடர் சாம்பல் நிறங்களைப் (உம்: #0F172A) பயன்படுத்தவும்.

வண்ணங்களைத் தேர்ந்தெடுக்கும்போது HSL முறையைப் பின்பற்றுங்கள். Hue-ஐ நிலையாக வைத்துக்கொண்டு, Lightness-ஐ 10% முதல் 95% வரை மாற்றியமைப்பதன் மூலம் சிறப்பான வண்ணத் தொகுப்பை உருவாக்கலாம்.

தலைப்புகளுக்கும் பத்திகளுக்கும் இடையிலான எழுத்து அளவை ஒரு குறிப்பிட்ட கணித விகிதத்தின்படி (உம்: 1.25) பெருக்கி அமைக்கவும் (16px, 20px, 25px, 31px). தோராயமாக அளவுகளைத் தேர்ந்தெடுக்கக் கூடாது.

சிறிய எழுத்துக்களுக்கு அதிக வரி இடைவெளி (150%) தேவை. ஆனால், பெரிய தலைப்பு எழுத்துக்களுக்கு குறைவான வரி இடைவெளி (110%-120%) கொடுக்கப்பட வேண்டும். இல்லையெனில் வரிகள் தனித்துப் போய்த் தோன்றும்.

வெளிச்சமான நிறங்கள் இருண்ட பின்னணியில் கண்களை உறுத்தும். எனவே, டார்க் மோடில் நிறத்தின் செறிவை (Saturation) 20% குறைத்து, வெளிச்சத்தை (Lightness) 10% கூட்ட வேண்டும். இது WCAG AA (4.5:1) அளவுகோலை எட்ட உதவும்.

பொத்தான்களின் கிடைமட்ட இடைவெளி (X-padding), செங்குத்து இடைவெளியைப் போலச் சரியாக 2 மடங்காக இருக்க வேண்டும் (உம்: 12px Y, 24px X). சின்னம் இருந்தால், அந்தப் பக்கத்தில் 1.5 மடங்கு இடைவெளி விட வேண்டும்.

அனைத்து அசைவுகளுக்கும் ஒரே நேர அளவை (300ms) பயன்படுத்தக் கூடாது. வண்ண மாற்றங்கள் விரைவாகவும் (150ms), திரையில் நகரும் கூறுகள் சற்று மெதுவாகவும் (250ms) இயல்பான பெளதீக அசைவுகள்போல் இருக்க வேண்டும். முக்கியமாக, W3C prefers-reduced-motion விதியைப் பயன்படுத்தி, அசைவுகளை விரும்பாத பயனர்களுக்கு அனிமேஷன்களை நிறுத்த வேண்டும்.

மொபைல் திரைகளில் தொடும் பகுதிகள் குறைந்தபட்சம் 44x44px ஆக இருக்க வேண்டும். சிறிய லிங்க்குகளுக்கு, கண்களுக்குத் தெரியாத பேடிங் கொடுத்து தொடு பரப்பை விரிவாக்க வேண்டும்.

கீழே மட்டும் கோடு போட்ட உள்ளீட்டுப் பெட்டிகள் பயனர்களைக் குழப்பலாம். நான்கு பக்கமும் எல்லையுள்ள செவ்வகப் பெட்டிகளையே பயன்படுத்தவும்; தட்டச்சு செய்யும் போது 2px தடிமனான எல்லை தெரிய வேண்டும்.

கீபோர்டு பயனர்களுக்காக, ஒரு கூறு தேர்ந்தெடுக்கப்படும்போது அதைச் சுற்றித் தெளிவாகத் தெரியும் வண்ணம் (2px தடிமன், 2px இடைவெளியுடன்) ஒரு குவிய வளையத்தை அமைக்க வேண்டும். இது WCAG 2.4.11 (3:1 contrast) விதியைப் பூர்த்தி செய்ய வேண்டும்.

பொத்தான்களை முடக்கும்போது (Disabled) அதன் ஒளிவுத்தன்மையை 20% ஆகக் குறைப்பது வாசிப்பைக் கடினமாக்கும். அதற்குப் பதிலாகப் பின்னணியை வெளிறிய சாம்பல் நிறத்திற்கும், உரையை அடர் சாம்பல் நிறத்திற்கும் மாற்ற வேண்டும்.

அனைத்து சின்னங்களும் 24x24px என்ற நிலையான கட்டமைப்புக்குள் இருக்க வேண்டும். சதுர வடிவச் சின்னங்கள் பெரியதாகத் தோன்றும் என்பதால், வட்ட வடிவச் சின்னங்களை 1-2px பெரிதாக்கிச் சீரமைக்க வேண்டும்.

இடைவெளி என்பது வெறும் காலி இடம் அல்ல. தொடர்புடைய கூறுகளுக்கு இடையே குறைந்த இடைவெளியும் (8px), தொடர்பற்ற கூறுகளுக்கு இடையே அதிக இடைவெளியும் (32px) இருக்க வேண்டும்.

சுழலும் லோடிங் வட்டங்கள், பயனர்களுக்குக் காத்திருப்பு நேரத்தை அதிகமாக உணரச் செய்யும். அதற்குப் பதிலாக, இடமிருந்து வலமாக நகரும் Skeleton லோடிங் அனிமேஷனைப் பயன்படுத்தவும்.

ஒரே நேரத்தில் 20 தேர்வுகளைத் திரையில் காட்டுவது பயனரைக் குழப்பமடையச் செய்யும். மிகவும் அவசியமான 3-5 தேர்வுகளை மட்டும் காட்டிவிட்டு, மீதமுள்ளவற்றை "Advanced Settings" என்ற பிரிவுக்குள் மறைத்து வைக்கவும்.