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
- Studio — Ib phab ntsa kos duab uas txav mus los. Txhua lub vijtsam sawv cev rau ib qho chaw tso saib uas ntsiag to, xim grey uas cov ntaub ntawv sau ntawv thiab cov haujlwm muaj tswv yim sib tshooj sib tw kom tau kev saib xyuas.
- Mollie — Ib lub txee cashmere, ib daim ntawv teev nyiaj tsaus nti. Tso qhov chaw dawb kom txaus rau kev tsim kho xov xwm nyob ib puag ncig cov ntawv dub, tom qab ntawd txhawb cov ntsiab lus ntsig txog khoom nrog cov mis sov sov, cov xim av espresso, thiab cov duab kov ntawm cov txheej txheem them nyiaj tiag tiag.
- Basis Theory — Cov chaw them nyiaj hauv chav tsim qauv. Daim ntawv dawb, cov txheej txheem pauv nyiaj uas sib tshooj, thiab ib qho khoom tswj hwm turquoise qhia txog kev pom.
- CleanShot X — Ib lub studio uas muaj lub desktop uas muaj teeb xiav. Tsim ib qho chaw dawb ntsiag to nyob ib puag ncig cov ntawv dub me me, tom qab ntawd cia cov kev tswj xiav nplua nuj thiab cov duab Mac uas muaj ntau txheej ua lub hauv paus.
- Modern Treasury — Ib phau ntawv teev nyiaj txiag hauv daim ntawv graph. Tsim cov nplooj ntawv uas zoo li daim ntawv ua haujlwm dawb, ntsiag to, qhov twg cov nyiaj ntsuab tau tso tawm nrog cov kab zoo, cov nodes uas muaj cov cim, thiab cov kev tswj hwm meej, zais cia.
- Basha-Franklin — Ib daim duab gallery gallery hauv qab ib lub lintel dawb. Siv xim sov so #f4ede6, ib lub qauv dub me ntsis, thiab cov kem asymmetrical raws li cov duab uas zoo li ib daim ntawv sau txog kev tsim vaj tsev uas luam tawm.
- Bajgart Office — Phab ntsa chav ua yeeb yam. Siv qhov chaw dawb loj uas cov ntawv sau me me thiab cov ntawv sau ua haujlwm muaj qhov hnyav dua li cov khoom siv interface uas tau plated chrome.
- Heptabase — Lub rooj ua haujlwm uas ci ntsa iab hnub ci. Cov chaw sov so zoo li ntawv, cov tswj xim av daj, thiab cov qhov rai uas ntab rau kev tshawb fawb ua rau muaj kev xav zoo li chaw ua haujlwm uas muaj kev teeb tsa zoo es tsis yog lub vaj huam sib luag tswj software.
- Bejamas — Pajamas—xim av daj los ntawm cov iav dub. Tsim cov nplooj ntawv xov xwm uas nyob ntsiag to, xim grey sib tshuam los ntawm cov vaj huam sib luag dub uas ntxim nyiam qhov twg cov kab ntsuab tsaus ntawm lub teeb sib tshuam ntawm qhov chaw.
- Baba — Cov lus qhia zoo hauv lub hnub ci liab. Tsim cov kab txaij liab dav dav ncig cov ntaub ntawv dawb, liab dawb, thiab xim av dawb, siv cov duab ntawm tib neeg ua lub hauv paus ntawm kev xav.
- Grafana Labs — Chav tswj hwm ntawm Chaw Nres Tsheb Qhia Txog Hnub Tuaj. Ib qho chaw ua haujlwm xim grey-thiab-dawb ntsiag to ua ke nrog qhov dav, plaub xim kab rov tav thiab cov teeb liab xiav meej.
- Kagi — Ib chav nyeem ntawv sib cais. Tsim ib qho chaw dawb qhib ib puag ncig cov ntawv graphite tuab, siv cov xim ntshav me me thiab cov xim pastel sov so los rhuav tshem kev thaj yeeb.