Guidelines
UI Design Styles
பயனர் இடைமுக வடிவமைப்பு பாணிகள்
Design system specifications and tokens for modern visual styles: Modern Minimal, Neumorphism, Glassmorphism, and Neubrutalism. Addresses visual aesthetics, tactile parameters, color contrast safety, and bilingual typography protection under complex layers.
நவீன பயனர் இடைமுக வடிவமைப்பு பாணிகளுக்கான கோட்பாடுகள். நிழல்களின் அளவுகள், வண்ண முரண்பாடு மற்றும் தமிழ் எழுத்துக்கள் சிக்கலான அடுக்குகளில் சிதையாமல் வடிவமைக்கும் முறைகள்.
1. நவீன எளிமைப் பாணி (Modern Minimal)
நவீன எளிமைப் பாணி என்பது தமிழ் வடிவமைப்பு அமைப்பின் (TamilDS) முதன்மை அடித்தளமாகும். இது செயல்பாட்டின் தெளிவில் மட்டுமே கவனம் செலுத்துகிறது.
விளக்க அடுக்கு விதிகள்:
- வெற்று இடங்கள் (Whitespace): வடிவமைப்புப் பிரிவுகளுக்கு இடையே குறைந்தபட்சம்
24px (1.5rem)வெற்று இடைவெளியைப் பராமரிக்கவும். - மென்மையான வளைவுகள்: பொத்தான்கள் மற்றும் கார்டுகளுக்கு
rounded-md (6px to 8px)விளிம்பு வளைவை மட்டுமே பயன்படுத்தவும். - W3C வண்ண முரண்பாடு (WCAG 1.4.3 & 1.4.6): முதன்மை உரைக்கும் பின்னணிக்கும் இடையே குறைந்தபட்சம்
4.5:1(AA) முரண்பாடும், உயர் முரண்பாட்டுப் பயன்முறையில்7:1(AAA) முரண்பாடும் இருக்க வேண்டும். கண்பார்வை கூச்சத்தைத் தவிர்க்க தூய கருப்பு (#000) மற்றும் தூய வெள்ளை (#FFF) பயன்பாட்டைக் குறைக்கவும்.
அலங்கார வரம்புகள்:
- மெல்லிய எல்லைகள்: எல்லைக் கோடுகள் அதிகபட்சமாக
1px var(--border)மட்டுமே இருக்க வேண்டும். - எழுத்துத் தடிமன்: உடல் உரைகளுக்கு Regular தடிமனையும், தலைப்புகளுக்கு Medium/Semi-bold தடிமனையும் பயன்படுத்தவும்.
- நிஜப் புகைப்படங்கள்: தட்டையானStock வெக்டர்களைத் தவிர்த்து, வெளிறிய பின்னணியுள்ள நிஜப் புகைப்படங்களைப் பயன்படுத்தவும்.
2. இருண்ட-ஒளி நிழல் பாணி (Neumorphism)
இருண்ட-ஒளி நிழல் பாணி (Neumorphism) இரு வேறுபட்ட நிழல்களைப் பயன்படுத்தி ஒரு தட்டையான பொருள் பின்னணியில் இருந்து மேலே நீண்டு இருப்பது போன்ற அல்லது உள்ளே குழிந்து இருப்பது போன்ற தோற்றத்தை உருவாக்குகிறது.
தமிழ்நாடு அரசு பரிந்துரைக்கும் நிழல் சூத்திரங்கள்:
- பின்னணி வண்ணம்:
#E8F1FAஅல்லது பிராண்டின் மென்மையான வண்ண பின்னணிகளை மட்டுமே பயன்படுத்த வேண்டும். - மேல்நோக்கிய ஒளி நிழல்:
box-shadow: -8px -8px 20px #FFFFFF(100% அடர்த்தி) - மேல்நோக்கிய இருள் நிழல்:
box-shadow: 8px 8px 20px #C6DBF1(40% அடர்த்தி) - உள்நோக்கிய ஒளி நிழல்:
box-shadow: inset -4px -4px 20px #FFFFFF - ஒளி மூலத்தின் கோணம்: மெய்நிகர் ஒளி மூலத்தின் கோணம் சரியாக
135 டிகிரி(மேல்-இடது) ஆக இருக்க வேண்டும். - தொடர்பு பின்னூட்டம்: அழுத்தப்பட்ட பொத்தான்கள் மேல்நோக்கிய நிழல்களில் இருந்து உள்நோக்கிய குழிந்த நிழல்களுக்கு மாற வேண்டும்.
- முரண்பாட்டுக் கொள்கை: இந்த பாணியில் விளிம்பு முரண்பாடு குறைவாக இருப்பதால், முதன்மைப் பொத்தான்கள், உள்ளீடுகள் போன்ற கூறுகளுக்கு இதைப் பயன்படுத்தக் கூடாது.
3. கண்ணாடிப் பாணி (Glassmorphism)
கண்ணாடிப் பாணி (Glassmorphism) பின்னணி மங்கலாக்கம் (Background blur) மற்றும் அரை ஊடுருவல் ஓரங்களைப் பயன்படுத்தி, திரையில் பனி படர்ந்த கண்ணாடித் தாள்கள் மிதப்பது போன்ற பிரத்யேக தோற்றத்தை அளிக்கிறது.
மங்கலாக்க மற்றும் எல்லை விதிகள்:
- மங்கலாக்க அளவு: பின்னணி மங்கலாக்கத்தை
backdrop-filter: blur(16px)என்ற வரம்பில் அமைக்கவும். - கண்ணாடி விளிம்புகள்:
1pxதடிமனில்border-white/20(ஒளி தீம்) அல்லதுborder-white/10(இருள் தீம்) பயன்படுத்தவும். - இரைச்சல் மேலடுக்கு (Noise): வண்ணங்கள் சிதையாமல் தடுக்க மென்மையான இரைச்சல் மேலடுக்கை (1% - 2%) சேர்க்கவும்.
வாசிப்புப் பாதுகாப்பு:
- பின்புல அட்டை: வெள்ளை உரையை நேரடியாகக் கண்ணாடிப் பின்னணியில் வைக்காமல், உரைக்குக் கீழே குறைந்தபட்சம் 75% அடர்த்தி கொண்ட பின்னணி அட்டையை அமைக்கவும்.
- அடுக்குகளின் வரம்பு: ஒன்றின் மேல் ஒன்றாக அதிகபட்சம்
இரண்டு கண்ணாடி அடுக்குகளைமட்டுமே பயன்படுத்த வேண்டும். - வடிவமைப்பின் அளவு: உரை நீளத்திற்கு ஏற்ப கண்ணாடி அடுக்குகள் விரிவடைய வேண்டும்; நிலையான உயர வரம்புகளைத் தவிர்க்கவும்.
4. புதிய முரட்டுப் பாணி (Neubrutalism)
புதிய முரட்டுப் பாணி (Neubrutalism) தடிமனான கருப்பு எல்லைக் கோடுகள், நேரடி நிழல்கள் மற்றும் பிரகாசமான வண்ணங்களைப் பயன்படுத்துகிறது.
தமிழ் வடிவமைப்பு அமைப்பின் முரட்டுப் பாணி சூத்திரங்கள்:
- தடிமனான எல்லைக் கோடுகள்: கூறுகளுக்குச் சுற்றிலும்
2pxஅல்லது4pxதடிமனான தூய கருப்பு எல்லைக் கோடுகளை (border-2 border-black) பயன்படுத்தவும். - தட்டையான நேரடி நிழல்கள்: மங்கலான நிழல்களைத் தவிர்த்து, 100% அடர்த்தி கொண்ட தட்டையான கருப்பு நிழல்களைப் (
shadow-[4px_4px_0px_#000000]) பயன்படுத்தவும். - பிரகாசமான வண்ணங்கள்: மஞ்சள் (
#FFDE4D) அல்லது ஆரஞ்சு போன்ற பிரகாசமான வண்ணங்களுடன் தூய கருப்பு உரையைக் கலந்து பயன்படுத்தவும். - கண் சோர்வு தவிர்த்தல்: முற்றிலும் அடர்த்தியான வண்ணங்களைத் (எ.கா.
#FF0000) தவிர்த்து, அவற்றின் வண்ணச் செறிவை 10% குறைத்துப் பயன்படுத்தவும். - சாய்வு வரம்புகள் (Rotation): கார்டுகளைச் சாய்வாக வடிவமைக்கும்போது
2 டிகிரிக்குமேல் சாய்வைத் தவிர்க்கவும் (எ.கா.-rotate-1அல்லதுrotate-1).
5. தமிழ் எழுத்து வடிவப் பாதுகாப்பு விதிகள்
இந்த மாறுபட்ட பாணிகளில் தமிழ் எழுத்துக்களைப் பயன்படுத்தும்போது கீழ்க்கண்ட விதிகளைப் பின்பற்ற வேண்டும்:
- இருண்ட-ஒளி நிழல் பாதுகாப்பு: மென்மையான நிழல் குறியீடுகள் தமிழ் எழுத்துக்களை மங்கலாக்கிவிடும். எனவே தமிழ் உரைக்குக் கீழே எப்போதும் தட்டையான, உயர் முரண்பாடு கொண்ட பின்னணிகளையே பயன்படுத்த வேண்டும்.
- கண்ணாடியின் பின்புறப் பாதுகாப்பு: கண்ணாடியின் பின்புறம் இருக்கும் வண்ணத் திட்டுகள் தமிழ் மாத்திரைகளைச் சிதைப்பதைத் தடுக்க, உரை அமையும் பகுதிகளில் நிலையான பின்புல அடர்த்தியை உறுதி செய்யவும்.
- முரட்டுப் பாணி விளிம்பு பாதுகாப்பு: தடிமனான கருப்பு எல்லைக் கோடுகள் தமிழ் எழுத்துக்களின் மேல்/கீழ் பகுதிகளைத் தொட்டுவிடக் கூடாது. எனவே, புதிய முரட்டுப் பாணி பொத்தான்களில்
line-height: 1.8மற்றும் செங்குத்தானpy-3இடைவெளிப் பாதுகாப்பை வழங்கவும். - எழுத்துருத் தேர்வு: உடல் உரைகளுக்கு Noto Sans Tamil எழுத்துருவைப் பயன்படுத்தவும். சிக்கலான அடுக்குக் கார்டுகளில் அலங்கார எழுத்துக்களைத் தவிர்க்கவும்.
செய்ய வேண்டியவை / தவிர்க்க வேண்டியவை
கூறுகளுக்கு 100% அடர்த்தி கொண்ட தட்டையான கருப்பு நிழல்களைப் பயன்படுத்துவது முரட்டுப் பாணியின் வலிமையை வெளிப்படுத்தும்.
தடிமனான எல்லைக் கோடுகள் கொண்ட பொத்தான்களுக்கு மென்மையான மங்கலான நிழல்களைப் பயன்படுத்தக் கூடாது. இது வடிவமைப்பு முரண்பாட்டை ஏற்படுத்தும்.
கண்ணாடித் திரைகளின் மேல் உள்ள தமிழ் உரைக்குக் கீழே குறைந்தபட்சம் 75% அடர்த்தி கொண்ட இருண்ட பின்னணி அட்டைகளை அமைப்பது வாசிப்புத் திறனைக் காக்கும்.
அரை ஊடுருவும் கண்ணாடிப் பலகையின் மேல் வெள்ளை நிற தமிழ் உரையை நேரடியாக வைக்கக் கூடாது. பின்புல வெளிச்சம் உரை வடிவங்களை மறைக்கும்.