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 உகப்பாக்கம் மற்றும் நியூரல் நெட்வொர்க் பரிந்துரைகள்.
ஒத்த பாணிகள்
- Studio — இயங்கும் ஒரு கலைக்கூடச் சுவர். ஒவ்வொரு திரையும் ஓர் அமைதியான, சாம்பல் நிறக் கண்காட்சித் தளத்தைக் குறிக்கிறது; அங்கு அச்சுக்கலைப் பொருட்களும், ஒன்றோடொன்று மேற்பொருந்தும் படைப்புகளும் கவனத்தை ஈர்க்கப் போட்டியிடுகின்றன.
- Mollie — காஷ்மீர் நிற கவுண்டர், அடர் நிற கணக்குப் புத்தகம். கருப்பு எழுத்துக்களைச் சுற்றி தலையங்க வடிவமைப்பிற்காகப் போதுமான வெள்ளை இடத்தை விட்டு, பின்னர் இதமான கிரீம், எஸ்பிரெசோ பழுப்பு நிறங்கள் மற்றும் உண்மையான பணம் செலுத்தும் முறைகளின் தொட்டுணரக்கூடிய புகைப்படங்கள் மூலம் தயாரிப்பு தொடர்பான அம்சங்களை வலுப்படுத்துங்கள்.
- Basis Theory — வடிவமைப்பு கூடத்தில் உள்ள பணம் செலுத்தும் முனையங்கள். வெள்ளை நிற தொழில்நுட்பத் தாள், ஒன்றன் மேல் ஒன்று படியும் ஒளி ஊடுருவும் பரிவர்த்தனை அடுக்குகள், மற்றும் ஒரேயொரு நீலப்பச்சை நிறக் கட்டுப்பாட்டுக் கூறு ஆகியவை காட்சித் திசையை வரையறுக்கின்றன.
- CleanShot X — நீல நிற ஒளியுடன் கூடிய டெஸ்க்டாப்பைக் கொண்ட ஒரு ஸ்டுடியோ. கச்சிதமான கருப்பு எழுத்துக்களைச் சுற்றி ஒரு அமைதியான வெள்ளை வெளியை உருவாக்குங்கள், பின்னர் அடர் நீல நிறக் கட்டுப்பாடுகளையும் அடுக்குகளாக உள்ள மேக் தயாரிப்புப் படங்களையும் மைய இடத்தைப் பிடிக்க விடுங்கள்.
- Modern Treasury — வரைபடத் தாளில் ஒரு கருவூலப் பேரேடு. அமைதியான, வெள்ளை நிற செயல்பாட்டுத் தாளைப் போன்ற பக்கங்களை உருவாக்குங்கள்; அதில் பணப் புழக்கங்கள் மெல்லிய கோடுகள், பெயரிடப்பட்ட கணுக்கள் மற்றும் துல்லியமான, மறைக்கப்பட்ட கட்டுப்பாடுகளுடன் காட்டப்படும்.
- Basha-Franklin — வெள்ளை நிலைக்கதவின் கீழ் ஒரு காட்சிக்கூடக் கட்டமைப்பு. இதமான #f4ede6 சாயலையும், நுட்பமான கருப்புக் கட்டமைப்பையும், அச்சிடப்பட்ட கட்டிடக்கலைத் தொகுப்பு போலத் தோற்றமளிக்கும் புகைப்படங்களை அடிப்படையாகக் கொண்ட சமச்சீரற்ற தூண்களையும் பயன்படுத்துங்கள்.
- Bajgart Office — தலையங்கப் படத்தொகுப்புச் சுவர். பளபளப்பான இடைமுகக் கூறுகளை விட, நுட்பமான செரிஃப் எழுத்துருக்களும் படைப்புத் தொகுப்புத் துண்டுகளும் அதிகக் காட்சி முக்கியத்துவத்தைக் கொண்டிருக்கும் ஒரு பெரிய வெள்ளை வெளியைப் பயன்படுத்துங்கள்.
- Heptabase — சூரிய ஒளி படும் மேசை. கதகதப்பான, காகிதம் போன்ற மேற்பரப்புகள், கரிய நிறக் கட்டுப்பாடுகள் மற்றும் ஆய்வுக்கான மிதக்கும் சாளரங்கள் ஆகியவை, ஒரு மென்பொருள் கட்டுப்பாட்டுப் பலகத்தைப் போன்ற உணர்வைத் தராமல், ஒழுங்கமைக்கப்பட்ட ஒரு பணிச்சூழல் என்ற உணர்வை உருவாக்குகின்றன.
- Bejamas — பைஜாமாக்கள்—கருப்புக் கண்ணாடி வழியே தெரியும் புளிப்புச் சுண்ணாம்பு. அமைதியான, வெளிர் சாம்பல் நிற தலையங்கப் பக்கங்களை உருவாக்குங்கள்; அவற்றின் இடையே, மங்கலான பச்சை நிற ஒளிக்கீற்றுகள் மேற்பரப்பைக் குறுக்கிடும் வசீகரிக்கும் கருப்புப் பட்டைகள் தென்படும்.
- Baba — சிவப்பு சூரிய ஒளியில் பராமரிப்புக் குறிப்புகள். மக்களின் புகைப்படங்களை உணர்ச்சி மையமாகப் பயன்படுத்தி, அந்தரங்கமான வெள்ளை, இளஞ்சிவப்பு மற்றும் கிரீம் நிறத் தகவல் பரப்புகளைச் சுற்றி அகலமான சிவப்பு நிறக் கதைப் பட்டைகளை உருவாக்குங்கள்.
- Grafana Labs — சன்ரைஸ் சிக்னல் ஸ்டேஷனின் கட்டுப்பாட்டு அறை. அமைதியான சாம்பல் மற்றும் வெள்ளை நிறப் பணிச்சூழல், அகன்ற நான்கு வண்ண அடிவான வண்ணச் சரிவு மற்றும் துல்லியமான நீல இடைமுக சமிக்ஞைகளுடன் இணைந்துள்ளது.
- Kagi — ஒரு தனி வாசிப்பு அறை. அடர்த்தியான கிராஃபைட் எழுத்துக்களைச் சுற்றி ஒரு திறந்த வெள்ளை வெளியை உருவாக்குங்கள்; அதன் அமைதியைக் குலைக்க, மென்மையான ஊதா நிறத் தீற்றல்களையும் இதமான பாஸ்டல் வண்ணப் பரப்புகளையும் பயன்படுத்துங்கள்.