Command Palette

Search for a command to run...

Foundations

Motion System

இயக்க அமைப்பு

Tamil DS uses a restrained, purposeful motion system. It establishes spatial relationships, provides tactile feedback on user actions, and ensures responsive screen-to-screen transitions.

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

வடிவமைப்பு கொள்கைகள்

கட்டுப்பாடு மற்றும் நோக்கம்

அசைவூட்டங்கள் பயனரின் கவனத்தைத் திசைதிருப்பவோ அல்லது பணிச் செயல்முறையை மெதுவாக்கவோ கூடாது.

இயற்பியல் இசைவு

கூறுகள் உண்மையான பொருள்களைப் போலச் செயல்படுகின்றன. பெரிய பெட்டிகள் மெதுவாக நகரும், திரைக்குள் வரும் உறுப்புகள் விரிவடையும்.

அணுகல்தன்மைக்கு முன்னுரிமை

அசைவுகளைக் குறைக்க விரும்பும் பயனர்களுக்கு முன்னுரிமை வழங்கப்படுகிறது. இதில் அளவை மாற்றுதல் மற்றும் நகர்த்தல்கள் தவிர்க்கப்படும்.

முடுக்க வளைவுகள் (Easing Curves)

ஒரு கூறு எவ்வாறு வேகமெடுக்கிறது மற்றும் வேகம் குறைகிறது என்பதை இந்த வளைவுகள் தீர்மானிக்கின்றன. தொழில்துறை தரநிலை வடிவமைப்பு வழிகாட்டுதல்களின்படி மூன்று முக்கிய வளைவுகளைத் தமிழ் வடிவமைப்பு அமைப்பு பயன்படுத்துகிறது:

பரிந்துரைக்கப்படும் நிலையான வளைவு

வலியுறுத்தப்பட்டது - Emphasized (Standard)

திரையில் ஓரிடத்திலிருந்து மற்றோர் இடத்திற்கு நகரும் கூறுகளுக்குப் பயன்படும். மெதுவாகத் தொடங்கி, இடையில் வேகமெடுத்து, இறுதியில் மிக மெதுவாக முடியும்.

ease-emphasized / cubic-bezier(0.2, 0, 0, 1)
முன்னோட்டமிட அட்டை மீது நகர்த்தவும்
உள்வரும் கூறுகள் (Entrance)

வேகம் குறையும் நிலை - Decelerate (Incoming)

உரையாடல் பெட்டிகள் (Dialogs) மற்றும் மெனுக்கள் போன்ற புதிதாகத் தோன்றும் கூறுகளுக்குப் பயன்படும். முழு வேகத்தில் தோன்றி மெதுவாக நிற்பது போல் அமையும்.

ease-decelerate / cubic-bezier(0.05, 0.7, 0.1, 1)
முன்னோட்டமிட அட்டை மீது நகர்த்தவும்
வெளியேறும் கூறுகள் (Exit)

வேகமெடுக்கும் நிலை - Accelerate (Outgoing)

திரையை விட்டு வெளியேறும் கூறுகளுக்குப் பயன்படும். மெதுவாகத் தொடங்கி மிக வேகமாக வெளியேறும்.

ease-accelerate / cubic-bezier(0.3, 0, 0.8, 0.15)
முன்னோட்டமிட அட்டை மீது நகர்த்தவும்

கால அளவு அளவுகோல் (Duration Scale)

கால அளவுகள் கூறுகளின் அளவு மற்றும் அவை கடக்கும் தூரத்தின் அடிப்படையில் விகிதாசாரப்படி அமைய வேண்டும்.

குறுகியது (50ms - 200ms)தொட்டுணரக்கூடிய பதில்கள், சுவிட்சுகள்

duration-short-1

50ms

duration-short-2

100ms

duration-short-3

150ms

duration-short-4

200ms

நடுத்தரம் (250ms - 400ms)உரையாடல்கள், சுருங்கும் பெட்டிகள்

duration-medium-1

250ms

duration-medium-2

300ms

duration-medium-3

350ms

duration-medium-4

400ms

நீண்டது (450ms - 500ms+)முழுத்திரை தள மாற்றங்கள்

duration-long-1

450ms

duration-long-2

500ms

அணுகல்தன்மை மற்றும் குறைக்கப்பட்ட அசைவூட்டம்

அசைவூட்டங்கள் சில பயனர்களுக்குக் குழப்பம் அல்லது உடல் அசௌகரியத்தை ஏற்படுத்தக்கூடும். சாதன அமைப்புகளில் அசைவுகளைக் குறைக்கத் தேர்வு செய்யும் பயனர்களுக்குத் தமிழ் வடிவமைப்பு அமைப்பு தானாகவே மதிப்பளிக்கிறது.

பயனர்களின் இந்தத் தெரிவு @media (prefers-reduced-motion: reduce) என்ற CSS ஊடக வினவல் (Media query) மூலம் அறியப்பட்டு, பெரிய அளவிலான நகர்வுகள் மற்றும் அளவு மாற்றங்கள் அணைக்கப்படும். இதற்கு மாற்றாக மங்கலான ஒளி மங்கல் (Opacity fade) மூலம் நிலைகள் காட்டப்படும்.

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}