Apple
Ib chav dawb nrog ib lub khawm xiav xwb
Tus qauv tsim ntawm Apple yog tus qauv ntawm kev txwv: daim ntaub yuav luag dawb, qhov chaw dawb dav, thiab ib qho xim xiav ci ntsa iab uas ua rau txhua qhov kev ua zoo li txhob txwm ua. Lub hom phiaj tseem ceeb yog typography—SF Pro, nrog rau qhov sib nrug ntawm cov ntawv tsis zoo uas txo qis nrog qhov loj zuj zus, ua rau cov ntawv xov xwm pom tseeb yam tsis hnyav dhau. Cov khoom YOG tus qauv tsim: cov duab khoom loj thiab cov duab kev ua neej nyob tseem ceeb, thaum cov ntsiab lus chrome poob rau hauv cov thav duab nyias, kev taw qhia translucent, thiab cov kab me me. Cov ntu hloov pauv tawm tsam keeb kwm yav dhau los grey nrog cov xim puv rau cov ntaub ntawv tshaj tawm, tsim cov suab los ntawm kev hloov pauv hauv qhov ntsuas es tsis yog cov khoom dai kom zoo nkauj.
Cov qauv nplooj ntawv yog ib nplooj ntawv dav tag nrho uas tsis muaj qhov dav tshaj plaws ntawm lub thawv - cov ntu ncab ntug mus rau ntug, nrog cov ntawv thaiv nyob hauv nruab nrab ntawm kwv yees li 980px. Kev taw qhia yog ib qho, ruaj khov thoob ntiaj teb bar nrog ib qho subfolder ntxiv rau txhua yam khoom uas tshwm sim ntawm scroll. Cov qauv tseem ceeb yeej ib txwm nyob hauv nruab nrab: lub npe khoom loj, ib kab lus cim npe ib kab, ob lub khawm tshuaj, tom qab ntawd ib daim duab khoom uas puv qhov viewport seem. Cov ntu raug teeb tsa ntsug nrog lub suab nrov ntsug (64px+ ntawm cov ntu), hloov #f5f5f7 thiab cov keeb kwm yav dhau xim. Nplooj ntawv hauv qab yog ib kab kab rov tav ntawm daim npav kev pabcuam dav tag nrho (Apple TV+, Fitness+, Music, Arcade), txhua daim duab thaiv nrog cov ntawv overlay thiab lub khawm tshuaj. Tsis muaj sidebars, tsis muaj ntau kab ntawv layouts, tsis muaj asymmetrical compositions - txhua yam yog nyob hauv nruab nrab, teeb tsa, thiab symmetrical.
Kev thaij duab yog hom lus pom tseem ceeb. Cov duab khoom raug thaij tawm ntawm keeb kwm yav dhau dawb huv lossis xim grey mos, tsis muaj qhov sib txawv - lub cuab yeej YOG lub hnub qub, cais tawm thiab ci ntsa iab. Cov duab hauv lub neej tau tso tawm hauv cov ntawv dav dav, feem ntau nrog cov khoom txiav nruj. Cov xim gradients (pastel xiav, liab dawb, ntsuab) ua haujlwm ua keeb kwm yav dhau rau cov khoom lag luam, tsis yog kho kom zoo nkauj. Lub cim iconography yog minimalist thiab kab-raws li, 1-2px tuab, hauv tib lub greyscale li cov ntawv nyeem. Tsis muaj duab kos, tsis muaj cov duab abstract, tsis muaj 3D renderings, tsuas yog cov duab khoom lawv tus kheej.
Xim av
Hom
- Apple Blue
#0071e3— Cov nyees khawm ua haujlwm puv nkaus, cov xeev xaiv - tsuas yog xim chromatic sib tham sib siv tsawg tsawg los ua kom txhua qhov tsos muaj lub ntsiab lus. - Link Blue
#0066cc— Cov ciam teb ua haujlwm tseem ceeb, cov kev sib txuas ua ke - xim ntau dua li Apple Blue siv qhov twg cov ntsiav tshuaj puv yuav ci ntsa iab dhau. - Signal Blue
#2997ff— Cov thav duab kho kom zoo nkauj, cov kab kos duab, cov ciam teb cim - xim xiav sib dua hauv lub kaw lus, siv rau huab cua es tsis yog rau kev sib cuam tshuam ntawm tus neeg siv.
Nruab nrab
- Carbon
#1d1d1f— Cov ntawv tseem ceeb, cov ciam teb ntawm lub npe, cov kab navigation, cov ciam teb ntawm daim npav - cov xim number case tseem ceeb yog yuav luag dub nrog me ntsis sov so. - Frost
#f5f5f7— Cov nplooj ntawv canvas, cov ntawv tseem ceeb tom qab, thiab cov ntawv hauv qab yog Apple lub cim xim grey, txias dua li dawb huv me ntsis. - Ice
#f4f8fb— Cov xim pleev rau saum npoo uas qhia tau zoo, cov xim me me, cov ntawv sau rau ntawm keeb kwm yav dhau tsaus ntuj—cov xim xiav me me uas ua rau seem ntawd muaj sia nyob yam tsis ua rau nws sawv tawm. - Smoke
#333333— Cov ntawv nyeem theem ob, kev sau rau hauv navigation, ciam teb ntawm lub pob - Xim nruab nrab uas siv tau ntau yam rau ciam teb thiab cov cim uas xav tau ntau yam xim dua li xim grey nruab nrab. - Graphite
#474747— Cov ntawv qhia kev taw qhia, ciam teb kev taw qhia, ciam teb txuas - nyob hauv qhov chaw nruab nrab ntawm Carbon thiab Pa luam yeeb hauv cov ntsiab lus hierarchy. - Ash
#707070— Cov ntawv hauv qab, cov ciam teb ntawm daim ntawv teev npe, cov ciam teb navigation, cov ntawv hauv lub cev uas tsis muaj suab - Xim grey nruab nrab rau cov ntsiab lus uas yuav tsum muaj tab sis tsis txhob pom tseeb.
Kev sau ntawv
txij li 12 mus rau 56px · 8 kauj ruam
- SF Pro Display — hloov: Inter · cov qauv qhia 400, 600, 700 · Cov ntawv xov xwm thiab cov ntawv loj—40px+ qhov loj siv hom ntawv tso saib rau qhov qhib me dua thiab kev taug qab tsis zoo muaj zog dua; 700 yog tseg rau cov qauv tshaj tawm, thiab 400 yog rau cov npe khoom hauv cov ntsiab lus kho xov xwm.
- SF Pro Text — hloov: Inter · cov qauv qhia 300, 400, 600 · Cov ntawv hauv lub cev, kev taw qhia, cov nyees khawm, cov ntawv me - cov ntawv ua haujlwm; 400 rau cov ntawv hauv lub cev, 300 rau cov ntawv me thiab cov ntawv cim tsim nyog, 600 rau cov ntsiab lus taw qhia thiab cov ntawv khawm; qhov sib nrug ntawm tsab ntawv tsis zoo txo qis raws li qhov loj me (los ntawm -0.022em txog 12px txog -0.01em txog 44px).
Lub sijhawm thiab daim ntawv
| Lub Hom Phiaj | Lub ntsiab lus |
|---|---|
| Qhov Ceev | nruab nrab |
| Kauj ruam yooj yim | 12px |
| Lub vojvoog ntawm lub pob | 980px |
| Lub vojvoog ntawm daim npav | 8px |
| Duab ntxoov ntxoo | tsis muaj ciam teb es tsis yog duab ntxoov ntxoo |
| Nruab nrab ntawm cov ntu | 64px |
| Qhov dav ntawm nplooj ntawv | 1440px |
AI yuav tsim koj lub vev xaib hauv hom ntawv Apple thiab sau nws
- Sau cov khoom thiab cov ntawv tshaj tawm los ntawm qhov txuas - Instagram, TikTok, Facebook.
- Hloov cov ntsiab lus ntawm koj lub xaib qub - tsuas yog qhia qhov chaw nyob xwb.
- Tsim qauv niaj hnub ntawm lub cav zoo tshaj plaws: React ( Next.js) nrog rau kev ua haujlwm ntawm lub server thiab kev ua kom zoo dua SEO tawm ntawm lub thawv.
- Kev ua kom zoo dua SEO tag nrho rau cov txiaj ntsig tshawb nrhiav thiab cov lus pom zoo ntawm neural network.
Cov qauv zoo sib xws
- Ui — daim ntawv qhia kev kho mob ntawm daim ntawv matte
- ElevenLabs — Ib tsab ntawv sau txog duab hauv xim dawb sov so nrog cov ntawv xov xwm me me. Ib phau ntawv sau ua qauv Bauhaus—daim ntawv xim qe qe, kua dub, thiab ib daim xim ntshav thiab txiv kab ntxwv rau kev tso saib cov khoom.
- monopo saigon — Ib qho kua dej, ci ntsa iab tom qab kev ntsiag to ntawm cov ntawv xov xwm - ib lub tsev qiv ntawv monochrome uas ntab saum lub teeb molten
- Awesomic — Cov ntawv xov xwm zinc mesh nrog cov cim kab lus txiv kab ntxwv uas zoo li confetti
- Monad — phau ntawv xov xwm txog kev kho mob ntawm daim ntawv parchment sov
- Dub — Link lub vaj huam sib luag tswj hwm daim ntawv nplej matte
- Seline Analytics — Ib lub rooj tshuaj xyuas ntsiag to ntawm daim ntawv sov
- Ventriloc — Ib daim ntawv sau txog cov ntaub ntawv ntawm daim ntawv sov - ib lub teeb txiv kab ntxwv uas qhia txog qhov tseeb ntawm cov xim monochrome
- Duolingo — Tus mascot hauv chav kawm ua si ntawm daim ntawv dawb
- Stripe — Ib phau ntawv qhia txog nyiaj txiag sau ua xim indigo rau ntawm daim iav frosted
- Notion — Ib phau ntawv sau sov so hauv lub hnub nruab hnub
- Hyer Aviation — Lub caij tsaus ntuj hauv lub cockpit hla daim ntawv parchment. Lub ntuj kaj ntsa iab ntsib lub logo serif loj li lub fuselage, thiab ib qho xim av sov so ua rau lub monochrome tsis zoo nkauj.