Apple
Жалгыз көк өчүргүчтүү ак бөлмө
Apple компаниясынын дизайны – бул чектөөнүн үлгүсү: дээрлик ак полотно, кенен ак мейкиндик жана ар бир аракетти атайылап жасалгандай сездирген бир гана ачык көк түс. Негизги басым типографияга багытталган — SF Pro, өлчөмү чоңойгон сайын азайып бараткан терс тамгалардын аралыгы менен, өтө оор болбостон, башкы беттерге архитектуралык тактык берет. Продукция – бул дизайн: чоң продукциянын сүрөттөрү жана жашоо образынын сүрөттөрү басымдуулук кылат, ал эми хром элементтери жука алкактарга, тунук навигацияга жана назик сызыктарга айланат. Бөлүктөр ачык боз фондо кезектешип, жарнамалык материалдар үчүн толук түстүү блоктор менен кооздолгон, декоративдик элементтердин ордуна масштабдын өзгөрүшү аркылуу ритмди жаратат.
Барактын жайгашуусу – бул контейнердин максималдуу туурасы бекитилбеген толук туурасы бар баракча — бөлүмдөр четинен четине чейин созулуп, текст блоктору болжол менен 980 пиксель аралыкта жайгашкан. Навигация – бул жылдырууда пайда болгон ар бир продукт үчүн кошумча кошумча папкасы бар бирдиктүү, бекитилген глобалдык тилке. Негизги жайгашуу ар дайым борбордо жайгашкан: чоң продукттун аталышы, бир саптуу ураан, эки баскыч, андан кийин калган көрүү терезесин толтурган продукттун сүрөтү. Бөлүмдөр #f5f5f7 жана түстүү фондор менен кезектешип, кең вертикалдуу ритм (бөлүмдөрдүн ортосунда 64 пиксель+) менен тигинен тизилген. Төмөнкү барак – толук туурасы бар кызмат карталарынын (Apple TV+, Fitness+, Music, Arcade) бир горизонталдуу катары, ар бири катмарлуу тексти жана баскычы бар сүрөт блогу. Каптал тилкелер жок, көп тилкелүү мазмун жайгашуусу жок, асимметриялык композициялар жок — баары борборлоштурулган, тизилген жана симметриялуу.
Фотография - бул басымдуулук кылган визуалдык тил. Продукциянын сүрөттөрү таза ак же жумшак боз фондо, эч кандай контекстсиз тартылат — түзмөк жылдыз, обочолонгон жана жарыктандырылган. Жашоо образындагы сүрөттөр толук туурасындагы баннерлерде, көбүнчө тыгыз кесилген объектилер менен көрсөтүлөт. Түс градиенттери (пастель көк, кызгылт, жашыл) продукт бөлүмдөрү үчүн фон катары кызмат кылат, декорация катары эмес. Иконография минималисттик жана сызыктарга негизделген, калыңдыгы 1-2 пиксель, текст менен бирдей боз түстө. Продукциянын сүрөттөрүнөн башка иллюстрациялар, абстракттуу графика, 3D рендерингдер жок.
Түстөр палитрасы
Бренд
- Apple Blue
#0071e3— Толтурулган аракет баскычтары, тандалган абалдар - ар бир көрүнүштү маңыздуу кылуу үчүн сейрек колдонулган жалгыз интерактивдүү хроматикалык түс. - Link Blue
#0066cc— Белгиленген аракет чек аралары, камтылган шилтемелер - толтурулган планшет өтө жаркыраган жерде Apple Blue колдонулганга караганда каныккан түс. - Signal Blue
#2997ff— Декоративдик алкактар, сүрөт контурлары, сүрөтчөлөрдүн чек аралары - системадагы эң ачык көк түс, колдонуучунун өз ара аракеттенүүсү үчүн эмес, атмосфера үчүн колдонулат.
Нейтралдуу
- Carbon
#1d1d1f— Негизги текст, аталыш чек аралары, навигация сызыктары, карта чек аралары - басымдуу сыя түсү дээрлик кара, бир аз жылуулук менен. - Frost
#f5f5f7— Барактын холстунун түсү, негизги тексттин фоны жана төмөнкү колонтитулдун бети Apple компаниясынын өзгөчө ачык боз түсүндө, таза ак түскө караганда бир аз муздакыраак. - Ice
#f4f8fb— Беттин экспрессивдүү толтурулушу, назик өңдөр, караңгы фондо баскычтуу текст — бөлүктү өзгөчөлөнтпөстөн, аны жандандырган назик көк түс. - Smoke
#333333— Кошумча текст, навигацияны толтуруу, баскычтын чек аралары - Орточо боз түскө караганда көбүрөөк кескиндикти талап кылган чек аралар жана сүрөтчөлөр үчүн ар тараптуу нейтралдуу түс. - Graphite
#474747— Навигация тексти, навигация чек аралары, шилтеме чек аралары - элементтер иерархиясында көмүртек менен түтүндүн ортосундагы аралык абалды ээлейт. - Ash
#707070— Төмөнкү колонтитулдун тексти, тизменин чек аралары, навигациянын чек аралары, үнсүз негизги текст - Бар болушу керек, бирок көрүнүктүү болбошу керек болгон мазмун үчүн орточо боз түс.
Типография
12ден 56 пикселге чейин · 8 кадам
- SF Pro Display — алмаштыруу: Inter · контурлар 400, 600, 700 · Аталыштар жана чоң текст — 40 пикселден ашык өлчөмдөр тар диафрагма жана күчтүү терс көзөмөлдөө үчүн дисплей форматын колдонот; 700 жарнама макеттери үчүн, ал эми 400 редакциялык мазмундагы өнүмдөрдүн аталыштары үчүн сакталган.
- SF Pro Text — алмаштыруу: Inter · контурлар 300, 400, 600 · Негизги текст, навигация, баскычтар, субтитрлер — жумушчу шрифт; Негизги текст үчүн 400, субтитрлер жана квалификациялуу энбелгилер үчүн 300, навигация элементтери жана баскыч тексти үчүн 600; терс тамгалардын аралыгы өлчөмгө пропорционалдуу түрдө азаят (-0.022emден 12pxке чейин -0.01emден 44pxке чейин).
Интервалдар жана форма
| Максаты | Мааниси |
|---|---|
| Тыгыздык | орточо |
| Негизги кадам | 12px |
| Баскычтын радиусу | 980px |
| Картанын радиусу | 8px |
| Көлөкөлөр | көлөкөлөрдүн ордуна чек аралар жок |
| Бөлүмдөрдүн ортосунда | 64px |
| Барактын туурасы | 1440px |
Жасалма интеллект сиздин веб-сайтыңызды Apple стилинде куруп, аны толтурат
- Instagram, TikTok, Facebook шилтемелери аркылуу өнүмдөр жана посттор менен толтуруңуз.
- Эски сайтыңыздан мазмунду өткөрүп бериңиз — жөн гана даректи көрсөтүңүз.
- Эң мыкты кыймылдаткычтагы заманбап дизайн: серверди рендеринг жана SEO оптималдаштыруу менен React ( Next.js).
- Издөө натыйжалары жана нейрон тармактарынын сунуштары үчүн толугу менен автоматташтырылган SEO оптималдаштыруу.
Окшош стилдер
- Studio — Кыймылдагы галерея дубалы. Ар бир экран тынч, боз көргөзмө бетин билдирет, анда типографиялык материалдар жана бири-бирине дал келген чыгармачыл эмгектер көңүл буруу үчүн атаандашат.
- Mollie — Кашемир эсептегичи, кара китеп. Кара тексттин айланасында редакциялык дизайн үчүн жетиштүү ак орун калтырыңыз, андан кийин продуктка байланыштуу пункттарды жылуу кремдер, эспрессо күрөң түстөгү коктейльдөр жана чыныгы төлөм ыкмаларынын тактилдик сүрөттөрү менен бекемдеңиз.
- Basis Theory — Дизайн студиясындагы төлөм терминалдары. Ак техникалык кагаз, бири-бирине дал келген тунук транзакция катмарлары жана бир көгүш түстөгү башкаруу элементи визуалдык багытты аныктайт.
- CleanShot X — Көк жарык менен жарыктандырылган рабочий стол менен кооздолгон студия. Компакттуу кара тексттин айланасында тынч ак мейкиндик түзүңүз, андан кийин бай көк башкаруу элементтери жана катмарлуу Mac продуктуларынын сүрөттөрү борбордук орунду ээлесин.
- Modern Treasury — Графикалык кагаздагы казыналык китеп. Акча агымдары майда сызыктар, белгиленген түйүндөр жана так, жашыруун башкаруу элементтери менен көрсөтүлгөн тынч, ак операциялык баракчага окшош барактарды түзүңүз.
- Basha-Franklin — Ак линтелдин астындагы галерея торчосу. Басылган архитектуралык портфолио сыяктуу көрүнгөн сүрөттөргө негизделген жылуу #f4ede6 түсүн, назик кара түзүлүштү жана асимметриялык мамычаларды колдонуңуз.
- Bajgart Office — Редакциялык галереянын дубалы. Хром менен капталган интерфейс элементтерине караганда, назик сериф шрифттери жана портфолио фрагменттери көбүрөөк визуалдык салмакка ээ болгон чоң ак мейкиндикти колдонуңуз.
- Heptabase — Күн нуру тийген стол. Жылуу, кагаз сымал беттер, көмүр түстүү башкаруу элементтери жана изилдөө үчүн калкып жүрүүчү терезелер программалык камсыздоону башкаруу панелинин ордуна уюшкандыктагы жумуш мейкиндигинин сезимин жаратат.
- Bejamas — Пижама — кара айнек аркылуу өткөн кислоталуу акиташ. Тынч, ачык боз редакциялык барактарды бүдөмүк жашыл жарык сызыктары бетин кесилишкен жердеги кызыктуу кара панелдер менен үзгүлтүккө учуратат.
- Baba — Кызыл күн нурунда кам көрүү боюнча эскертүүлөр. Адамдардын сүрөттөрүн эмоционалдык борбор катары колдонуп, ак, кызгылт жана каймак түстөгү маалымат беттеринин айланасына кең кызыл баяндоочу тилкелерди түзүңүз.
- Grafana Labs — Sunrise Signal Station башкаруу бөлмөсү. Тынч боз жана ак жумушчу мейкиндик кең, төрт түстүү горизонт градиенти жана так көк интерфейс сигналдары менен айкалышкан.
- Kagi — Өзүнчө окуу залы. Тынчтыкты бузуу үчүн ачык кызгылт көк түстөгү акценттерди жана жылуу пастел беттерин колдонуп, коюу графит текстинин айланасында ачык ак мейкиндик түзүңүз.