Apple
Սպիտակ սենյակ՝ մեկ կապույտ անջատիչով
Apple-ի դիզայնը զսպվածության մոդել է՝ գրեթե սպիտակ կտավ, առատ սպիտակ տարածություն և մեկ վառ կապույտ շեշտադրում, որը յուրաքանչյուր գործողություն դարձնում է մտածված։ Հիմնական ուշադրությունը կենտրոնացած է տպագրության վրա՝ SF Pro, բացասական տառերի միջև տարածությամբ, որը նվազում է չափի մեծացման հետ, վերնագրերին հաղորդում է ճարտարապետական պարզություն՝ առանց չափազանց ծանր լինելու։ ԱՊՐԱՆՔԸ ԴԻԶԱՅՆՆ Է՝ գերակշռում են մեծածավալ ապրանքային լուսանկարները և կենսակերպի պատկերները, մինչդեռ քրոմապատ տարրերը նահանջում են բարակ շրջանակների, կիսաթափանցիկ նավիգացիայի և նուրբ գծերի մեջ։ Բաժինները հերթագայում են բաց մոխրագույն ֆոնի վրա՝ գովազդային նյութերի համար նախատեսված լիագույն բլոկներով, ստեղծելով ռիթմ՝ մասշտաբի փոփոխությունների միջոցով, այլ ոչ թե դեկորատիվ տարրերի։
Էջի դասավորությունը լիալայնությամբ էջ է՝ առանց ֆիքսված առավելագույն կոնտեյների լայնության. բաժինները ձգվում են եզրից եզր, տեքստային բլոկները կենտրոնացված են մոտավորապես 980px-ով: Նավիգացիան մեկ, ֆիքսված գլոբալ գոտի է՝ յուրաքանչյուր ապրանքի համար լրացուցիչ ենթապանակով, որը հայտնվում է գլորման ժամանակ: Հիմնական դասավորությունը միշտ կենտրոնացված է՝ մեծ ապրանքի անվանում, մեկ տողանոց կարգախոս, երկու դեղահաբերի կոճակներ, ապա ապրանքի պատկեր, որը լցնում է մնացած դիտման պատուհանը: Բաժինները դասավորված են ուղղահայաց՝ առատ ուղղահայաց ռիթմով (բաժինների միջև 64px+), հերթագայելով #f5f5f7 և գունավոր ֆոններ: Ներքևի էջը լիալայնությամբ ծառայությունների քարտերի մեկ հորիզոնական շարք է (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-ից մինչև 56px · 8 քայլ
- SF Pro Display — փոխարինում: Inter · ուրվագծեր 400, 600, 700 · Վերնագրերը և մեծ տեքստը՝ 40px+ չափսերով, օգտագործում են ցուցադրման ձևաչափ՝ ավելի նեղ ապերտուրայի և ավելի ուժեղ բացասական հետևման համար. 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:
- Տեղափոխեք բովանդակությունը ձեր հին կայքից՝ պարզապես նշեք հասցեն։
- Ժամանակակից դիզայն լավագույն շարժիչի վրա՝ React ( Next.js)՝ սերվերի ռենդերինգով և SEO օպտիմիզացիայով՝ անմիջապես։
- Լիովին ավտոմատացված SEO օպտիմալացում որոնման արդյունքների և նեյրոնային ցանցերի առաջարկությունների համար։
Նմանատիպ ոճեր
- Studio — Շարժվող պատկերասրահի պատ։ Յուրաքանչյուր էկրան ներկայացնում է լուռ, մոխրագույն ցուցահանդեսային մակերես, որտեղ տպագրական նյութերը և համընկնող ստեղծագործական աշխատանքները մրցում են ուշադրության համար։
- Mollie — Քաշմիրե սեղան, մուգ գրանցամատյան: Սև տեքստի շուրջ թողեք բավարար սպիտակ տարածք խմբագրական դիզայնի համար, այնուհետև ընդգծեք ապրանքին վերաբերող կետերը տաք կրեմներով, էսպրեսո բրաուններով և իրական վճարման մեթոդների շոշափելի լուսանկարներով:
- Basis Theory — Վճարային տերմինալներ դիզայն ստուդիայում: Սպիտակ տեխնիկական թուղթը, փոխկապակցված կիսաթափանցիկ գործարքային շերտերը և մեկ փիրուզագույն կառավարման տարրը սահմանում են տեսողական ուղղությունը:
- CleanShot X — Կապույտ լուսավորությամբ աշխատասեղանով ստուդիա։ Ստեղծեք հանգիստ սպիտակ տարածություն կոմպակտ սև տեքստի շուրջ, այնուհետև թողեք, որ հարուստ կապույտ կառավարման տարրերը և շերտավորված Mac արտադրանքի պատկերները դառնան կենտրոնական տեղ։
- Modern Treasury — Գանձապետարանի գրանցամատյան գրաֆիկական թղթի վրա: Ստեղծեք էջեր, որոնք նման են լուռ, սպիտակ գործառնական թերթիկի, որտեղ դրամական հոսքերը ցուցադրվում են նուրբ գծերով, պիտակավորված հանգույցներով և ճշգրիտ, թաքնված կառավարման տարրերով:
- Basha-Franklin — Սպիտակ շեմի տակ պատկերասրահի ցանց։ Օգտագործեք տաք #f4ede6 երանգ, նուրբ սև կառուցվածք և ասիմետրիկ սյուներ՝ հիմնված լուսանկարների վրա, որոնք նման են տպագիր ճարտարապետական պորտֆոլիոյի։
- Bajgart Office — Խմբագրական պատկերասրահի պատ։ Օգտագործեք մեծ սպիտակ տարածք, որտեղ նուրբ սերիֆ տառատեսակները և պորտֆոլիոյի բեկորները ավելի մեծ տեսողական կշիռ ունեն, քան քրոմապատ ինտերֆեյսի տարրերը։
- Heptabase — Արևի լույսով լուսավորված սեղան։ Տաք, թղթանման մակերեսները, ածխի գույնի կառավարման վահանակները և հետազոտության համար նախատեսված լողացող պատուհանները ստեղծում են կազմակերպված աշխատանքային տարածքի զգացողություն, այլ ոչ թե ծրագրային ապահովման կառավարման վահանակի։
- Bejamas — Գիշերային հագուստ՝ թթվային կրաքարի երանգ սև ապակու միջով։ Ստեղծեք հանգիստ, բաց մոխրագույն խմբագրական էջեր, որոնք ընդհատվում են գրավիչ սև վահանակներով, որտեղ լույսի մշուշոտ կանաչ շերտերը հատվում են մակերեսին։
- Baba — Խնամքի նշումներ կարմիր արևի լույսի ներքո: Ստեղծեք լայն կարմիր պատմողական շերտեր մտերիմ սպիտակ, վարդագույն և կրեմագույն տեղեկատվական մակերեսների շուրջ՝ օգտագործելով մարդկանց լուսանկարները որպես հուզական կենտրոն:
- Grafana Labs — Արևածագի ազդանշանային կայանի կառավարման սենյակը։ Հանգիստ մոխրագույն-սպիտակ աշխատանքային տարածքը համակցվում է լայն, չորս գույնի հորիզոնի գրադիենտի և ճշգրիտ կապույտ ինտերֆեյսի ազդանշանների հետ։
- Kagi — Առանձին ընթերցասրահ։ Ստեղծեք բաց սպիտակ տարածք համարձակ գրաֆիտային տեքստի շուրջ՝ օգտագործելով նուրբ մանուշակագույն շեշտադրումներ և տաք պաստելային մակերեսներ՝ անդորրը խախտելու համար։