வடிவமைப்பு அமைப்பு

ஸ்காட்டெல்லோ சூடான, திறமையான மற்றும் தயாரிப்பு-மையமாக உணர வேண்டும். விருப்பமான தோற்றம் ஒளி, தாராளமான, வட்டமான மற்றும் தலையங்கமாக உள்ளது: தெளிவான உள்ளடக்கம் முதலில், பின்னர் நுட்பமான பிராண்ட் நிறம், மென்மையான பரப்புகள் மற்றும் அமைதியான இயக்கம் ஆகியவை தயாரிப்பை அலங்கார இரைச்சலாக மாறாமல் பதிலளிக்கக்கூடியதாக உணரவைக்கிறது.

சந்தைப்படுத்தல் இறங்கும் பக்கம் தற்போதைய காட்சி திசைக்கான தெளிவான பொது குறிப்பு ஆகும். தயாரிப்பு பரப்புகள் பகிரப்பட்ட வடிவமைப்பு டோக்கன்களை முடிந்தவரை மீண்டும் பயன்படுத்த வேண்டும் மற்றும் மேற்பரப்பு வெளிப்படையாக பிராண்ட் அல்லது சந்தைப்படுத்தல் சார்ந்ததாக இருக்கும்போது மட்டுமே மேலும் வெளிப்படையானதாக மாற வேண்டும்.

லோகோ மற்றும் பிராண்ட் சொத்துக்கள்

ஒரு முகவர், ஒருங்கிணைப்பு அல்லது உருவாக்கப்பட்ட பக்கத்திற்கு மறுபயன்பாட்டு பிராண்ட் குறி தேவைப்படும்போது பொது ஆவண சொத்து URL இலிருந்து ஸ்காட்டெல்லோ லோகோவை பயன்படுத்தவும்:

• SVG லோகோ: https://docs.scoutello.com/img/scoutello-logo.svg
• PNG லோகோ: https://docs.scoutello.com/img/scoutello-logo.png

திரை அளவுகள் முழுவதும் கூர்மையான ரெண்டரிங்கிற்கு SVG பதிப்பை விரும்பவும். ஒரு கருவி அல்லது இலக்கு SVG ஐ கையாள முடியாதபோது PNG பதிப்பைப் பயன்படுத்தவும். குறிப்பைச் சுற்றி போதுமான தெளிவான இடத்தை வைத்திருங்கள், அதை நீட்டுவதையோ அல்லது நிறத்தை மாற்றுவதையோ தவிர்க்கவும், மேலும் மாறுபாட்டைப் பாதுகாக்கும் வெள்ளை, சூடான கிரீம் அல்லது பிற அமைதியான பரப்புகளில் வைக்கவும்.

பிராண்ட் வண்ணங்கள்

முதன்மை நிறம்: #ff8d49

ஸ்காட்டெல்லோ உச்சரிப்பு நிறத்திற்கு முதன்மை ஆரஞ்சு நிறத்தைப் பயன்படுத்தவும்: முதன்மை செயல்களுக்கான அழைப்புகள், கவனம் செலுத்திய நிலைகள், செயலில் உள்ள வழிசெலுத்தல், சிறிய ஐகான் பின்னணிகள், சிறப்பம்ச உரை, மென்மையான ஒளிகள் மற்றும் சூடான சாய்வுகள். தயாரிப்பு குறியீட்டில் இது --primary: 24 100% 64% மற்றும் bg-primary, text-primary, border-primary/15, மற்றும் shadow-primary/10 போன்ற டெயில்விண்ட் வகுப்புகளுக்கு பொருந்துகிறது.

இரண்டாம் நிலை நிறம்: #145466

இரண்டாம் நிலை ஆழமான டீலை ஒரு அடித்தள நிறமாகப் பயன்படுத்தவும். இது முதன்மை ஆரஞ்சு, இருண்ட செயல்களுக்கான அழைப்பு பேனல்கள், காட்சி ஆழம் மற்றும் எப்போதாவது உயர்-முக்கியத்துவம் வாய்ந்த பிராண்ட் தருணங்களுடன் சாய்வுகளில் சிறப்பாக செயல்படுகிறது. இது இயல்புநிலை செயல் நிறமாக முதன்மை ஆரஞ்சை மாற்றக்கூடாது.

துணை வண்ணங்கள்:

• சூடான கிரீம் பின்னணிகள்: #fff8f1, #fff4ea, #fcf6f1, மற்றும் மென்மையான orange-50 / amber-50 பரப்புகள்.
• தயாரிப்பு நியூட்ரல்கள்: வெள்ளை அட்டைகள், இருண்ட முன்புற உரை, சுமார் 70-75% ஒளிபுகாநிலையுடன் மந்தமான உரை மற்றும் ஒளி எல்லைகள்.
• மூன்றாம் நிலை நீலம்: hsl(205 100% 51%) ஒரு துணை டோக்கனாக கிடைக்கிறது, ஆனால் ஆரஞ்சு மற்றும் டீல் பிராண்ட் ஜோடியாக அங்கீகரிக்கப்படுவதை உறுதிசெய்ய கவனமாக பயன்படுத்தப்பட வேண்டும்.

காட்சி நடை

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

பயன்படுத்தவும்:

• வட்டமான அட்டைகள் மற்றும் பேனல்கள், பெரும்பாலும் rounded-2xl முதல் rounded-[2rem] வரை.
• மென்மையான எல்லைகள் border-primary/10, border-primary/15, ring-black/5, மற்றும் ஒளி நியூட்ரல் எல்லைகள் போன்றவை.
• கனமான வண்ணத் தொகுதிகளுக்குப் பதிலாக அடுக்கப்பட்ட வெள்ளை அல்லது கிரீம் பரப்புகள்.
• மென்மையான நிழல்கள் shadow-sm, shadow-lg, shadow-2xl shadow-primary/10, அல்லது தனிப்பயன் குறைந்த ஒளிபுகா நிழல்கள் போன்றவை.
• சந்தைப்படுத்தல் மற்றும் அம்சக் கதைசொல்லலுக்காக, குறிப்பாக பெரிய தயாரிப்பு ஸ்கிரீன் ஷாட்கள் அல்லது UI மாதிரிக்காட்சிகள்.
• சிறிய பிராண்ட் தருணங்கள் ஆரஞ்சு சிறப்பம்ச உரை, ஐகான் சிப்ஸ், வளையங்கள், ஒளிகள் மற்றும் சாய்வு CTAs போன்றவை.

தவிர்க்கவும்:

• சத்தமான முழு-பக்க ஆரஞ்சு பின்னணிகள்.
• சாதாரண கட்டுப்பாடுகளுக்கு டீலை அதிகமாகப் பயன்படுத்துதல்.
• அடர்த்தியான, இறுக்கமான தளவமைப்புகள்.
• கடுமையான நிழல்கள், கூர்மையான செவ்வகங்கள் அல்லது குளிர் மோனோக்ரோம் டாஷ்போர்டுகள்.
• வாசிப்பு அல்லது பணி நிறைவுக்குப் போட்டியிடும் அலங்கார இயக்கம்.

அச்சுக்கலை

சந்தைப்படுத்தல் தளம் பயன்படுத்துகிறது:

• Space Grotesk landing-display வகுப்பு வழியாக காட்சி தலைப்புகளுக்கு.
• சந்தைப்படுத்தல் உடல் உரைக்கு Manrope.

பகிரப்பட்ட பயன்பாடு மற்றும் ஆவண பரப்புகள் கணினி-சீரமைக்கப்பட்ட UI அச்சுக்கலையைப் பயன்படுத்துகின்றன, தற்போது Inter க்கு நெருக்கமாக உள்ளன. பாணி இலக்கு பரப்புகளில் சீரானது: நம்பிக்கையான தலைப்புகள், இறுக்கமான தலைப்பு கண்காணிப்பு, படிக்கக்கூடிய உடல் உரை மற்றும் தாராளமான வரி உயரம்.

தலைப்பு வழிகாட்டுதல்:

• சந்தைப்படுத்தல் பக்கங்களில் பெரிய, சமச்சீர் தலைப்புகளைப் பயன்படுத்தவும்.
• முதன்மை ஆரஞ்சு நிறத்துடன் முக்கியமான சொற்றொடரை மட்டும் சிறப்பிக்கவும்.
• max-w-* மற்றும் text-balance கிடைக்கும் இடங்களில் வரி நீளத்தைக் கட்டுப்படுத்தவும்.

உடல் உரை வழிகாட்டுதல்:

• பத்திகளை அமைதியாகவும் நேரடியாகவும் வைத்திருங்கள்.
• விளக்கங்களுக்கு மந்தமான முன்புற உரையைப் பயன்படுத்தவும், பொதுவாக text-foreground/70 அல்லது text-foreground/75.
• படிக்கக்கூடிய பிரிவுகள், குறுகிய பத்திகள் மற்றும் தெளிவான லேபிள்களை விரும்பவும்.

தளவமைப்பு மற்றும் இடைவெளி

தளவமைப்புகள் விசாலமானதாகவும் நிலையானதாகவும் உணர வேண்டும். இறங்கும் பக்கம் max-w-7xl கொள்கலனைப் பயன்படுத்துகிறது, இது பதிலளிக்கக்கூடிய கிடைமட்ட திணிப்பு மற்றும் பெரிய செங்குத்து பிரிவுகளுடன் உள்ளது.

பொதுவான வடிவங்கள்:

• பிரிவு திணிப்பு py-16, py-20, அல்லது முக்கிய சந்தைப்படுத்தல் பிரிவுகளுக்கு பெரியது.
• சீரான இடைவெளிகளுடன் பதிலளிக்கக்கூடிய கட்டங்களில் ஒழுங்கமைக்கப்பட்ட அட்டைகள்.
• ஒரு வலுவான இடது உள்ளடக்க நெடுவரிசை மற்றும் வலதுபுறத்தில் தயாரிப்பு ஸ்கிரீன் ஷாட்கள் அல்லது சாதன அமைப்புகளுடன் ஹீரோ பிரிவுகள்.
• பரந்த தயாரிப்பு வாக்குறுதிகளுக்கான மையப்படுத்தப்பட்ட பிரிவு தலைப்புகள்; கதை அல்லது பணிப்பாய்வு பிரிவுகளுக்கான இடது-சீரமைக்கப்பட்ட தலைப்புகள்.
• பெரிய திரைகளில் பல-நெடுவரிசைகளாக மாறுவதற்கு முன்பு சுத்தமாக அடுக்கும் மொபைல்-முதல் தளவமைப்புகள்.

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

கூறுகள் மற்றும் பரப்புகள்

ஸ்காட்டெல்லோ பரப்புகள் தொட்டுணரக்கூடிய ஆனால் இலகுவாக உணர வேண்டும்:

• பொத்தான்கள்: முக்கிய சந்தைப்படுத்தல் CTAs க்கான வட்டமான மாத்திரைகள்; மற்ற இடங்களில் நிலையான தயாரிப்பு பொத்தான்கள்.
• அட்டைகள்: வெள்ளை அல்லது கிரீம், வட்டமான, எல்லையிடப்பட்ட மற்றும் லேசாக உயர்த்தப்பட்டவை.
• ஐகான்கள்: ஆரஞ்சு-வண்ண சிப்ஸ்களில் சிறிய, எளிய வரி ஐகான்கள்.
• புள்ளிவிவரங்கள் மற்றும் நம்பிக்கை கூறுகள்: ஆரஞ்சு-வண்ண எல்லைகள் அல்லது சாய்வுகளுடன் கட்டுப்படுத்தப்பட்ட அட்டைகள்.
• படிவங்கள்: தெளிவான லேபிள்கள், நேரடி உதவி உரை மற்றும் மொபைல் பயன்பாட்டிற்கான போதுமான இடைவெளி.
• ஸ்கிரீன் ஷாட்கள்: பெரிய, கூர்மையான மற்றும் லேசாக உயர்த்தப்பட்டவை. தயாரிப்பின் உறுதியான ஆதாரமாக அவற்றைப் பயன்படுத்தவும்.

தயாரிப்பு UI ஐ உருவாக்கும்போது, தனிப்பயன் ஒரு-முறை ஸ்டைலிங்கிற்குப் பதிலாக ஏற்கனவே உள்ள பகிரப்பட்ட UI கூறுகள் மற்றும் டோக்கன்களிலிருந்து தொடங்கவும். சந்தைப்படுத்தல் UI ஐ உருவாக்கும்போது, அவை பொருந்தும் இடங்களில் இறங்கும் primitives மற்றும் இறங்கும் வகுப்புகளைப் பயன்படுத்தவும்.

இயக்கம்

இயக்கம் இடைமுகத்தை பிஸியாக இல்லாமல் மெருகூட்டப்பட்டதாக உணரவைக்க வேண்டும். இறங்கும் பக்கம் குறுகிய வெளிப்பாடு அனிமேஷன்கள், சாதன உயர்வு விளைவுகள், ஒளி பூக்கும் விளைவுகள் மற்றும் சிறிய ஹோவர் லிஃப்ட்களைப் பயன்படுத்துகிறது.

விருப்பமான இயக்கம்:

• மென்மையான ஒளிபுகாநிலையுடன் 12-24px இலிருந்து மேலே வெளிப்படுத்தவும்.
• ஹோவர் அட்டைகள் சில பிக்சல்கள் மட்டுமே உயரும்.
• நிழலை சற்று உயர்த்தி ஆழமாக்கும் CTA ஹோவர் நிலைகள்.
• கதை ஸ்கேனிங்கை ஆதரிக்கும் இடங்களில் வரிசைப்படுத்தப்பட்ட பிரிவு நுழைவுகள்.

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

குரல் மற்றும் உள்ளடக்க வடிவமைப்பு

காட்சி அமைப்பு நேரடி, உறுதியான நகலுடன் சிறப்பாக செயல்படுகிறது. ஸ்காட்டெல்லோவில் ஒரு நிறுவனம் எதை வெளியிடலாம், நிர்வகிக்கலாம் அல்லது தானியக்கமாக்கலாம் என்பதை விளக்கும் மொழியை விரும்பவும்.

பயன்படுத்தவும்:

• தயாரிப்பு-குறிப்பிட்ட பெயர்ச்சொற்கள்: இறங்கும் பக்கங்கள், டைல்ஸ், சுற்றுப்பயணங்கள், நிகழ்வுகள், நிறுவனங்கள், டாஷ்போர்டு, விருந்தினர்கள், QR குறியீடுகள், மொழிபெயர்ப்புகள்.
• விருந்தினர் அனுபவங்களை ஆபரேட்டர் பணிப்பாய்வுகளுடன் இணைக்கும் விளைவு-நோக்குடைய விளக்கங்கள்.
• ஜெர்மன் மற்றும் பிற உள்ளூர்மயமாக்கப்பட்ட நகல்களில் பாலின-நடுநிலை மொழி.

தவிர்க்கவும்:

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

நடைமுறை விதிகள்

• #ff8d49 ஐ முக்கிய பிராண்ட் உச்சரிப்பாகவும் #145466 ஐ இரண்டாம் நிலை அடித்தள நிறமாகவும் பயன்படுத்தவும்.
• தயாரிப்பு பரப்புகளில் கடின-குறியிடப்பட்ட வண்ணங்களுக்குப் பதிலாக டோக்கனைஸ் செய்யப்பட்ட வகுப்புகளை (primary, secondary, foreground, muted, border) பயன்படுத்தவும்.
• சந்தைப்படுத்தல் பக்கங்களை சூடான, விசாலமான, வட்டமான, ஸ்கிரீன் ஷாட்-வழிநடத்தும் மற்றும் லேசாக அனிமேஷன் செய்யப்பட்டதாக வைத்திருங்கள்.
• டாஷ்போர்டு மற்றும் செயல்பாட்டு பரப்புகளை அமைதியாகவும், தேவைப்படும் இடங்களில் மட்டுமே அடர்த்தியாகவும், மேலும் பணி-மையமாகவும் வைத்திருங்கள்.
• தயாரிப்பு ஏற்கனவே பிராண்டிங் கட்டுப்பாடுகளை வெளிப்படுத்தும் இடங்களில் வாடிக்கையாளர்-உரிமையுள்ள விருந்தினர் அனுபவங்கள் நிறுவன பிராண்டிங்கை ஆதரிக்கட்டும், ஆனால் ஸ்காட்டெல்லோ-உரிமையுள்ள பரப்புகளை இந்த அமைப்புடன் சீரமைக்கவும்.

தொடர்புடைய கருத்துக்கள்: வழிகள் மற்றும் பரப்புகள், இறங்கும் பக்கங்கள் மற்றும் டைல்ஸ், உலாவி-முதல் விருந்தினர் அனுபவங்கள்.