
Apple
ஒற்றை நீல நிற சுவிட்ச் கொண்ட ஒரு வெள்ளை அறை
ஆப்பிளின் வடிவமைப்பு ஒரு கட்டுக்கோப்பான மாதிரியாகும்: கிட்டத்தட்ட வெள்ளை நிறத் தளம், தாராளமான வெள்ளை இடைவெளி, மற்றும் ஒவ்வொரு செயலையும் திட்டமிட்டது போல் உணரவைக்கும் ஒரு தனித்துவமான, துடிப்பான நீல நிறத் தொடுப்பு. இதன் முதன்மைக் கவனம் எழுத்துரு வடிவமைப்பில் உள்ளது—SF Pro, இதில் எழுத்துகளின் அளவு அதிகரிக்கும்போது குறையும் எதிர்மறை எழுத்து இடைவெளி, தலைப்புகளுக்கு அதிக பாரமின்றி ஒரு கட்டமைப்புத் தெளிவை அளிக்கிறது. தயாரிப்பே வடிவமைப்பாக உள்ளது: பெரிய தயாரிப்புப் புகைப்படங்களும் வாழ்க்கைமுறைப் படங்களும் ஆதிக்கம் செலுத்துகின்றன, அதே நேரத்தில் குரோம் கூறுகள் மெல்லிய சட்டங்கள், ஒளிபுகும் வழிசெலுத்தல் மற்றும் நுட்பமான கோடுகளுக்குள் பின்வாங்குகின்றன. விளம்பரப் பொருட்களுக்கான முழு வண்ணத் தொகுதிகளுடன், வெளிர் சாம்பல் பின்னணியில் பிரிவுகள் மாறி மாறி வருகின்றன; இது அலங்காரக் கூறுகளுக்குப் பதிலாக, அளவுகளில் ஏற்படும் மாற்றங்கள் மூலம் ஒரு தாளகதியை உருவாக்குகிறது.
பக்க தளவமைப்பு என்பது நிலையான அதிகபட்ச உள்ளடக்க அகலம் இல்லாத ஒரு முழு அகலப் பக்கமாகும்—பிரிவுகள் விளிம்பிலிருந்து விளிம்பு வரை நீண்டுள்ளன, மேலும் உரைத் தொகுதிகள் சுமார் 980px அளவில் மையப்படுத்தப்பட்டுள்ளன. வழிசெலுத்தல் என்பது ஒரு ஒற்றை, நிலையான உலகளாவிய பட்டையாகும், மேலும் ஸ்க்ரோல் செய்யும்போது தோன்றும் ஒவ்வொரு தயாரிப்புக்கும் ஒரு கூடுதல் துணை கோப்புறை உள்ளது. முக்கிய தளவமைப்பு எப்போதும் மையப்படுத்தப்பட்டுள்ளது: ஒரு பெரிய தயாரிப்புப் பெயர், ஒரு ஒற்றை வரி வாசகம், இரண்டு பில் பொத்தான்கள், பின்னர் மீதமுள்ள காட்சிப் பகுதியை நிரப்பும் ஒரு தயாரிப்புப் படம். பிரிவுகள் தாராளமான செங்குத்துத் தாளத்துடன் (பிரிவுகளுக்கு இடையில் 64px+) செங்குத்தாக அடுக்கப்பட்டுள்ளன, மேலும் #f5f5f7 மற்றும் வண்ணப் பின்னணிகள் மாறி மாறி வருகின்றன. கீழ்ப்பக்கம் என்பது முழு அகல சேவை அட்டைகளின் (Apple TV+, Fitness+, Music, Arcade) ஒற்றை கிடைமட்ட வரிசையாகும், ஒவ்வொன்றும் மேலடுக்கு உரை மற்றும் ஒரு பில் பொத்தானுடன் கூடிய ஒரு புகைப்படத் தொகுதியாகும். பக்கப் பட்டிகள் இல்லை, பல-பத்தி உள்ளடக்க தளவமைப்புகள் இல்லை, சமச்சீரற்ற அமைப்புகள் இல்லை—எல்லாம் மையப்படுத்தப்பட்டு, அடுக்கப்பட்டு, சமச்சீராக உள்ளன.
புகைப்படக்கலையே இங்கு பிரதானமான காட்சி மொழியாகும். தயாரிப்புப் புகைப்படங்கள், எந்தவொரு சூழலும் இல்லாமல், முற்றிலும் வெள்ளை அல்லது மென்மையான சாம்பல் நிறப் பின்னணியில் எடுக்கப்படுகின்றன—அந்தச் சாதனமே தனித்து ஒளியூட்டப்பட்டு, நட்சத்திரமாகத் திகழ்கிறது. வாழ்க்கைமுறைப் புகைப்படங்கள் முழு அகலப் பதாகைகளில் காட்டப்படுகின்றன, பெரும்பாலும் நெருக்கமாக வெட்டப்பட்ட பொருட்களுடன் அவை இடம்பெறுகின்றன. வண்ணச் சரிவுகள் (வெளிர் நீலம், இளஞ்சிவப்பு, பச்சை) தயாரிப்புப் பிரிவுகளுக்கு அலங்காரமாக அல்லாமல், ஒரு பின்னணியாகச் செயல்படுகின்றன. படக்குறியீடுகள் மிகக்குறைந்த கூறுகளைக் கொண்டதாகவும், 1-2 பிக்சல் தடிமன் கொண்டதாகவும், உரையின் அதே சாம்பல் நிறத்தில் அமைந்ததாகவும் உள்ளன. தயாரிப்புப் புகைப்படங்களைத் தவிர, வேறு எந்த விளக்கப்படங்களோ, அருவ வரைபடங்களோ, முப்பரிமாணப் படைப்புகளோ பயன்படுத்தப்படவில்லை.
வண்ணத் தட்டு
பிராண்ட்
- Apple Blue
#0071e3— நிரப்பப்பட்ட செயல்பாட்டுப் பொத்தான்கள், தேர்ந்தெடுக்கப்பட்ட நிலைகள் - ஒவ்வொரு தோற்றத்தையும் அர்த்தமுள்ளதாக்குவதற்காக, அளவோடு பயன்படுத்தப்படும் ஒரே ஊடாடும் வண்ணமே இந்த ஊடாடும் வண்ணம். - Link Blue
#0066cc— சிறப்பித்துக் காட்டப்பட்ட செயல்பாட்டு எல்லைகள், உட்பொதிக்கப்பட்ட இணைப்புகள் - வண்ணம் தீட்டப்பட்ட டேப்லெட் மிகவும் பகட்டாகத் தோன்றும் இடங்களில், ஆப்பிள் நீலத்தை விட அடர்த்தியான நிறம் பயன்படுத்தப்பட்டுள்ளது. - Signal Blue
#2997ff— அலங்கார சட்டங்கள், படங்களின் வெளிக்கோடுகள், ஐகான் ஓரங்கள் - இவை அனைத்திலும், பயனர் ஊடாட்டத்திற்காக அன்றி, ஒரு சூழலை உருவாக்குவதற்காகப் பயன்படுத்தப்படும் மிகவும் இலேசான நீல நிறமாகும்.
நடுநிலை
- Carbon
#1d1d1f— முக்கிய உரை, தலைப்பு ஓரங்கள், வழிசெலுத்தல் கோடுகள், அட்டை ஓரங்கள் ஆகியவற்றில், லேசான வெதுவெதுப்புச் சாயலுடன் கூடிய ஏறக்குறைய கருப்பு நிறமே பிரதானமாகப் பயன்படுத்தப்பட்டுள்ளது. - Frost
#f5f5f7— பக்கத் திரை, முதன்மை உரைப் பின்னணி மற்றும் அடிக்குறிப்புப் பகுதி ஆகியவை, தூய வெள்ளையை விடச் சற்று குளிர்ச்சியான, ஆப்பிளின் தனித்துவமான வெளிர் சாம்பல் நிறத்தில் உள்ளன. - Ice
#f4f8fb— உணர்வுகளை வெளிப்படுத்தும் மேற்பரப்பு நிரப்பல்கள், நுட்பமான வண்ணங்கள், அடர் பின்னணியில் பொத்தான் எழுத்து—பிரிவைத் தனித்துக் காட்டாமல் அதற்குப் புத்துயிர் அளிக்கும் ஒரு நுட்பமான நீல நிறம். - Smoke
#333333— துணை உரை, வழிசெலுத்தல் நிரப்பு, பொத்தான் ஓரங்கள் - மிதமான சாம்பல் நிறத்தை விட அதிக எடுப்பான தோற்றம் தேவைப்படும் ஓரங்கள் மற்றும் சின்னங்களுக்கான, பலவிதமாகப் பயன்படுத்தக்கூடிய ஒரு நடுநிலை நிறம். - Graphite
#474747— வழிசெலுத்தல் உரை, வழிசெலுத்தல் எல்லைகள், இணைப்பு எல்லைகள் - இவை கூறு படிநிலையில் கார்பன் மற்றும் ஸ்மோக் ஆகியவற்றுக்கு இடையில் ஓர் இடைநிலை இடத்தைப் பெறுகின்றன. - Ash
#707070— அடிக்குறிப்பு உரை, பட்டியல் ஓரங்கள், வழிசெலுத்தல் ஓரங்கள், மங்கலான உள்ளடக்க உரை - இருக்க வேண்டிய ஆனால் பிரதானமாகத் தெரிய வேண்டியதில்லாத உள்ளடக்கத்திற்கு ஏற்ற மிதமான சாம்பல் நிறம்.
அச்சுக்கலை
12 முதல் 56px வரை · 8 படிகள்
- SF Pro Display — மாற்று: Inter · வெளிப்புறங்கள் 400, 600, 700 · தலைப்புகள் மற்றும் பெரிய எழுத்துக்கள்—40px+ அளவுகள்—குறுகிய துளை மற்றும் வலுவான நெகட்டிவ் டிராக்கிங்கிற்கான ஒரு காட்சி வடிவமைப்பைப் பயன்படுத்துகின்றன; 700 என்பது விளம்பர தளவமைப்புகளுக்கும், 400 என்பது தலையங்க உள்ளடக்கத்தில் உள்ள தயாரிப்புப் பெயர்களுக்கும் ஒதுக்கப்பட்டுள்ளது.
- SF Pro Text — மாற்று: Inter · வெளிப்புறங்கள் 300, 400, 600 · உள்ளடக்க உரை, வழிசெலுத்தல், பொத்தான்கள், துணைத் தலைப்புகள் — செயல்படும் எழுத்துரு; உள்ளடக்க உரைக்கு 400, துணைத் தலைப்புகள் மற்றும் தகுதிபெற்ற லேபிள்களுக்கு 300, வழிசெலுத்தல் கூறுகள் மற்றும் பொத்தான் உரைக்கு 600; எதிர்மறை எழுத்து இடைவெளி அளவிற்கு ஏற்ப விகிதாசாரமாகக் குறைகிறது (12px-க்கு -0.022em முதல் 44px-க்கு -0.01em வரை).
இடைவெளிகள் மற்றும் வடிவம்
| நோக்கம் | பொருள் |
|---|---|
| அடர்த்தி | சராசரி |
| அடிப்படை படி | 12px |
| பொத்தான் ஆரம் | 980px |
| அட்டை ஆரம் | 8px |
| நிழல்கள் | நிழல்களுக்குப் பதிலாக எல்லைகள் இல்லை |
| பிரிவுகளுக்கு இடையில் | 64px |
| பக்க அகலம் | 1440px |
செயற்கை நுண்ணறிவு உங்கள் வலைத்தளத்தை Apple பாணியில் உருவாக்கி, அதை நிரப்பும்.
- Instagram, TikTok, Facebook இணைப்புகளின் வழியாக தயாரிப்புகளையும் பதிவுகளையும் நிரப்பவும்.
- உங்கள் பழைய தளத்திலிருந்து உள்ளடக்கத்தை மாற்றவும்—முகவரியைக் குறிப்பிட்டால் போதும்.
- சிறந்த இன்ஜினான React ( Next.js)-இல், சர்வர் ரெண்டரிங் மற்றும் உள்ளமைக்கப்பட்ட SEO மேம்படுத்தலுடன் கூடிய நவீன வடிவமைப்பு.
- தேடல் முடிவுகளுக்கான முழுமையாகத் தானியங்குபடுத்தப்பட்ட SEO உகப்பாக்கம் மற்றும் நியூரல் நெட்வொர்க் பரிந்துரைகள்.
ஒத்த பாணிகள்
- Ui — மேட் காகிதத்தில் மருத்துவத் திட்டம்
- ElevenLabs — மென்மையான தலைப்புகளுடன், இதமான கிரீம் வண்ணங்களில் அமைந்த ஒரு புகைப்படக் கட்டுரை. ஒரு பௌஹாஸ் பாணி நோட்டுப்புத்தகம்—முட்டை ஓட்டு நிறக் காகிதம், கருப்பு மை, மற்றும் பொருளைக் காட்சிப்படுத்த ஒற்றை ஊதா மற்றும் ஆரஞ்சு வண்ண அலங்காரம்.
- monopo saigon — தலையங்க மௌனத்திற்குப் பின்னால் ஒரு திரவ, வானவில் போன்ற ஒளிர்வு—உருகிய ஒளியில் மிதக்கும் ஓர் ஒற்றை வண்ணத் தலையங்கக் காட்சியகம்.
- Awesomic — காகிதத் துண்டுகளை நினைவூட்டும் ஆரஞ்சு நிற நிறுத்தற்குறிகளுடன் கூடிய தலையங்க துத்தநாக வலை.
- Monad — வெதுவெதுப்பான தோல் காகிதம் குறித்த தலையங்க தொழில்நுட்ப இதழ்
- Dub — லிங்கின் மேட் அரிசி காகித கட்டுப்பாட்டுப் பலகம்
- Seline Analytics — சூடான காகிதத்தில் ஒரு அமைதியான பகுப்பாய்வு அட்டவணை
- Ventriloc — சூடான காகிதத்தில் உள்ள தரவுகளின் ஒரு தலையங்க கண்காணிப்பகம் - ஒற்றை நிறத் துல்லியத்தை எடுத்துக்காட்டும் ஒரு தனி ஆரஞ்சு நிறத் தீக்கனல்.
- Duolingo — வெள்ளைக் காகிதத்தில் விளையாட்டுத்தனமான வகுப்பு சின்னம்
- Stripe — உறைந்த கண்ணாடியில் கருநீல மையில் எழுதப்பட்ட ஒரு கணக்குப் புத்தகம்
- Notion — நண்பகல் வெயிலில் ஒரு சூடான காகித நோட்டுப்புத்தகம்
- Hyer Aviation — காக்பிட்டில், காகிதத்தோலின் மீது அந்திப் பொழுது. வெளிறிய விடியல் வானம், விமானத்தின் உடல் அளவுள்ள செரிஃப் சின்னத்தைச் சந்திக்கிறது; ஒற்றை வண்ணக் கட்டுப்பாட்டை ஒரு இதமான களிமண் நிறத் தீற்றல் உடைக்கிறது.