Shop
Լողացող առևտրային համաստեղություն սպիտակ մարմարի վրա
Առցանց խանութը գործում է «սպիտակ կտավի» մոդելով, որտեղ ապրանքները ցուցադրվում են որպես մեծ, խիստ կոր պատկերի քարտեր, այլ ոչ թե մանրապատկերների ցանցեր: Ամբողջ ինտերֆեյսը աներևակայելիորեն հարթ է՝ 20-28px շառավղով ամբողջ տարածքում, հաբի ձև ունեցող կառավարման տարրեր և կոմպակտ 16px GT Standard կորպուս՝ խիստ բացասական հետևմամբ, որը տեքստը դարձնում է հստակ և համարձակ: Համակարգի միակ համարձակ շեշտը վառ մանուշակագույնն է (#5433eb), որը հայտնվում է լոգոյում, շրջանաձև որոնման արդյունքների դաշտում և նույն կոճակի վրա որպես երանգավորված ստվեր: Պալիտրա մնացած մասը տաք չեզոք է՝ սպիտակ մակերեսներ, նուրբ սառը մոխրագույն կտավ, նուրբ եզրագծեր և գրեթե սև տեքստ: Խտությունը մնում է կոմպակտ՝ 12px ջրատարներով, բայց հերոսների և կատեգորիաների շերտերը շնչում են 64-80px առատ ուղղահայաց ռիթմի շնորհիվ, ինչը առևտրի փորձը դարձնում է ավելի շատ նման զննարկման, քան կատալոգի:
Առավելագույն լայնությունը 1200px է, կենտրոնացված է #f2f4f5 կիսաթափանցիկ կտավի վրա, ձախ կողմում կա 64px լայնությամբ կողային գոտի, որը պարունակում է միայն նավիգացիոն պատկերակներ: Հիմնական տարրը լրիվ լայնությամբ շերտ է, որի վրա տեղադրված են ապրանքի քարտեր՝ կենտրոնացված մանուշակագույն «խանութի» լոգոյի վերևում, իսկ անմիջապես դրա տակ՝ հաբի տեսքով որոնման գոտի: Կատեգորիայի հաբի տեսակները դասավորված են որոնման գոտու տակ գտնվող մեկ կենտրոնացված շարքով: Բովանդակության բաժինները (կանայք, տղամարդիկ, գեղեցկություն, տուն, երեխա և երեխաներ) հաջորդում են որպես նշանակված շերտեր, որոնցից յուրաքանչյուրը պարունակում է 4-սյունակ ցանց՝ ապրանքի պատկերներով կամ 2-սյունակ «հիմնական տարր և ցանց» կոմպոզիցիա: Ուղղահայաց ռիթմը առատ է՝ 64–80px հիմնական բաժինների միջև: Ստորին մասը էջի ներքևի մասում գտնվող մուգ շերտ է՝ սյունակաձև հղումների խմբերով: Հորիզոնական ապրանքի վահանակների աջ կողմում գտնվող կարուսելի սլաքները ցույց են տալիս գլորվող բովանդակությունը՝ առանց էջերի կետերի:
Լուսանկարչությունը գերիշխող տեսողական տարրն է. սպիտակ ֆոնի վրա լիաէկրան ապրանքի լուսանկարներ, կտրված 1:1 հարաբերակցությամբ, և տաք հողային երանգներով (բեժ, թրծակավ, եղեսպակ, փղոսկր) ապրելակերպի պատկերներ: Ապրանքի պատկերներն ունեն իրենց սեփական գույնը. օգտագործողի ինտերֆեյսը մնում է անգրոմատիկ, ինչը թույլ է տալիս ապրանքի երանգներին ապահովել տեսողական բազմազանություն: Ապրանքանիշի լոգոները հայտնվում են որպես վերադրվող տեքստ մուգ կամ բաց հիմնական պատկերների վրա, այլ ոչ թե որպես առանձին պատկերակներ: Հիմնական կոմպոզիցիայում ապրանքի քարտերը տեղադրված են որպես լողացող, թեթևակի համընկնող համաստեղություն բառային նշանի վերևում: Պատկերակները մինիմալիստական և մոնոխրոմ են (սև ուրվագծեր), բացառությամբ կատեգորիայի պատկերակների, որոնք օգտագործում են մեկ ապրանքանիշի գույն: Ապրանքի պատկերներում չկան նկարազարդումներ, 3D էֆեկտներ կամ գրադիենտներ:
Պալիտրա
Բրենդ
- Shop Violet
#5433eb— Ուղարկման կոճակը, կետավոր տեքստային նշանը և ապրանքանիշի լոգոն միակ շեշտադրումներն են, որոնք ընդգծում են գործողությունն ու անհատականությունը սպիտակ ֆոնի վրա։ - Violet Wash
#c0b5f3— Մանուշակագույն ուղարկելու կոճակի ետևում կիսաթափանցիկ լուսապսակ է, որը պահպանում է իր փայլը՝ առանց երանգը փոխելու։
Չեզոք
- Canvas Mist
#f2f4f5— Էջի ֆոն և լրացուցիչ մակերեսային մշակում՝ բարձրացված քարտերի հետևում։ - Pure White
#ffffff— Հիմնական մակերեսը քարտերի, մուտքագրման դաշտերի, լողացող նշանների և դեղահաբի տեսքով կոճակների համար։ - Ink Black
#000000— Հիմնական տեքստը, վերնագրերը, պատկերակները, նավիգացիոն խորհրդանիշները և ապրանքի քարտերը մութ ռեժիմում։ - Faint Border
#ebebeb— Քարտերի վրա բարակ բաժանարար գծեր, մուտքագրման դաշտերի ուրվագծեր և հաբի տեսքով կոճակների շրջանակներ։ - Muted Gray
#787574— Երկրորդական տեքստ, նավիգացիոն պիտակներ, պատկերակների ուրվագծեր, երբ դրանք ակտիվ չեն - Cool Stone
#cccccc— Տեղապահներ, անջատված վիճակներ և ոչ ակտիվ պատկերակների ֆոններ
Տպագրություն
11-ից մինչև 16px · 4 քայլ
- GT Standard — փոխարինում: Inter · ուրվագծեր 400 · Հիմնական տառատեսակը բոլոր չափերի համար՝ թե՛ հիմնական տեքստի, թե՛ վերնագրերի համար: GTStandard-MRegular-ը 16px/-0.031em չափսի հիմնական տառատեսակն է հիմնական տեքստի, կոճակների և պիտակների համար: GTStandard-MSemibold-ը 20px/-0.05em չափսի է մի քանի մեծ վերնագրերի համար, իսկ GTStandard-MMedium-ը 11–12px չափսի է միկրոմակարդակների համար: Տառատեսակի յուրաքանչյուր տարբերակ ցուցադրվում է 400 օպտիկական կշռով՝ տառատեսակի հիերարխիան ձեռք է բերվում նուրբ գրադիենտների և խիտ բացասական տառերի միջև հեռավորության միջոցով, այլ ոչ թե թավ հակադրության միջոցով: Սա ստորագրության ոճ է. Shop-ը չի օգտագործում թավ տառատեսակներ, այլ ձևավորում է տեքստը՝ տառերի միջև հեռավորության միջոցով:
- Shopify Sans — փոխարինում: Inter · ուրվագծեր 400, 700 · Պահված է համակարգային մակարդակի հաղորդագրությունների համար, ինչպիսիք են հավելվածի բեռնման պաստառները և cookie-ի համաձայնության տեքստը։
Ժամանակահատվածներ և ձև
| Նպատակ | Նշանակություն |
|---|---|
| Խտություն | միջին |
| Հիմնական քայլ | 12px |
| Կոճակի շառավիղ | 9999px |
| Քարտի շառավիղ | 28px |
| Ստվերներ | մեղմ ստվերներ |
| Բաժինների միջև | 64px |
| Էջի լայնությունը | 1200px |
Արհեստական բանականությունը կկառուցի ձեր կայքը Shop ոճով և կլրացնի այն
- Լրացրեք ապրանքներով և գրառումներով՝ հղումով - Instagram, TikTok, Facebook:
- Տեղափոխեք բովանդակությունը ձեր հին կայքից՝ պարզապես նշեք հասցեն։
- Ժամանակակից դիզայն լավագույն շարժիչի վրա՝ React ( Next.js)՝ սերվերի ռենդերինգով և SEO օպտիմիզացիայով՝ անմիջապես։
- Լիովին ավտոմատացված SEO օպտիմալացում որոնման արդյունքների և նեյրոնային ցանցերի առաջարկությունների համար։
Նմանատիպ ոճեր
- Cursor — Հարմարավետ մագաղաթի արհեստանոց, լուսավորված ծխացող ածուխներով
- Slush — փչովի տիեզերք՝ պատրաստված պաստելային թղթի վրա պատրաստված պիտակներից
- MindMarket — Հարմարավետ հեքիաթային գիրք կրեմագույն թղթի վրա՝ բարեկամական խմբագրական կտավ, որտեղ արևով ողողված, պիտակի պես փափուկ մակերեսի վրա համակեցության մեջ են Ինտերի մեծ վերնագրերը և կտրված թղթե կերպարները։
- Airbnb — Հանգիստ սպիտակ պատկերասրահի պատ՝ մեկ մարջանագույն կարմիր էջանիշով
- Superr — Տաք դպրոցական տետր՝ կեսօրվա մեղմ լույսի ներքո։ Կրեմագույն էջ, նարնջագույն մարկեր՝ առանց կափարիչի, և լամինացված անվանական պիտակների մի կույտ, որոնք սպասում են պոկվելուն։
- Apple (España) — Թանգարանի պատկերասրահը, մեղմ ցերեկային լույսի ներքո, միասնական, գրավիչ, անկշիռ սպիտակ տարածք է, որտեղ յուրաքանչյուր ցուցանմուշ լուսավորված է թեթևակի երանգավորված պատի ֆոնին տեղադրված լուսարձակով։
- Lamborghini — Սև թափքի գույնը ցուցասրահում, լուսարձակների տակ՝ մեկ դեղին մեքենա
- Amplemarket — Արևով ողողված աշխատավայր՝ ցրված կոնֆետիով
- Getharvest — Ոսկե ժամին սեղան՝ տաք կրեմագույն կտավ, կտավի վրա կախված սպիտակ բացիկներ և մեկ վառ նարնջագույն բոց։
- Agence Foudre — Ամսագրի շապիկի էջը նուրբ վարդագույն գույնի է, որը հիշեցնում է շրթներկ։
- Drive Capital — Ռետրո ճանապարհորդության պաստառ տաք թղթի վրա
- Apple (España) — սպիտակ պատկերասրահի ցուցափեղկ