Կրիպտո կազինո
Torrent Gear
Ինչպե՞ ս են կազինոն հարմարվում էկրաններին
1) Ինչո՞ ւ է հարմարվողականությունը կարևոր
Խաղացողները գալիս են տարբեր սարքերով '4։ Յոթ ռուսական սմարթֆոններ, 6։ Յոթ հազար ֆիբլետներ, պլանշետներ 8-13 ռուբլիներ, ծալովի (foldables), desktops և հեռուստացույց։ Առանց հարմարվելու, դուք կորցնում եք ընթերցանությունը, արագությունը և փոխարկումը 'տոմսարկղը կոտրվում է, արցունքները «ձեռք են բերվում», կոճակները չեն մտնում «մեծ մատի գոտի», իսկ նախկին սեղանները բավարար տեղ չունեն զբոսաշրջիկների համար։
2) Ցանցեր, բրեյքպոինտներ և մասշտաբներ
Վերը նշված brekpoints (ուղեցույցներ)
XS: 350px - կոմպակտ սմարթֆոններ
SM: 241-240px - սմարթֆոնների մեծամասնությունը
MD: 351-768px - մեծ սմարթֆոններ/փոքր պլանշետներ (դիմանկարը)
LG: 769-1024px - պլանշետներ/փոքր նոութբուքեր
XL: 1025-1440px - desktop
2XL: > 1440px - լայն մոնիտորներ/հեռուստացույց
Ցանցը
Սմարթֆոնները ՝ 4-6 զանգեր, 8px քայլ։
Պլանշետներ ՝ 8-12 զանգեր, 8-12px քայլ։
Desktop: 12-24 սյունակներ, 12-16px քայլ։
Օգտագործեք fluid-layout (clamp () լայնության և տպագրության համար '"font-size: clamp (14px, 1։ 6vw, 18px)`.
Խաղերի քարտերը
XS/SM: 2 սյունակներ (քարտը 156-180px)։
MD: 3-4 սյունակներ։
LG/XL: 5-8 զանգեր «շարքերով» պրովայդերների/ժանրերի վրա։
Պահպանեք շապիկների գործակիցը 16: 9 կամ 1:1 (փղերի համար), խուսափեք «խաչմերուկից» գերազանցությունից։
3) «Մեծ մատի գոտիները» և կլիկաբելությունը
Հիմնական CTA (Դեպոզիտ, Խաղալ, Շարունակել) - աջ կողմում սմարթֆոնների (աջ) կամ կենտրոնից։- Թաչի նվազագույն նպատակը 44-44pt iOS/48 no dp Android-ն է։
- Նպատակների միջև առնվազն 8px է։
- Կրիտիկական գործողությունները (ելույթի/տոկոսադրույքի ապացույց) երկու շագանակագույն են նեղ էկրանների վրա։
4) vs Landshaft դիմանկարը
Դիմանկարը (լռելյայն Ալթայլայի համար)
Արցունքները «շրջանակի» մեջ 16: 9, վահանակը պատրաստված է ներքևից, սվայպերը փոխելու համար։
Լոբբին «քարտերի պատը» + ներքևի նավարկումը (հինգ կետեր առավելագույնը)։
Լանդշաֆտը
Մենք ավելացնում ենք խաղի կտավը։ Ռուսական վահանակներ պատմության և չաթի համար խաղերում։- Տոմսարկղում երկշաբաթյա ձև է 'ձախ կողմում մեթոդներ/գումարներ, աջ կողմում հաստատումը։
- UX-ի համար արեք անհատական ռեժիմներում k-կողմնորոշում (105-սեղաններ, տեսահոլովակներ)։
5) Ծալովի սարքեր և պլանշետներ
Foldables (դասավորություն/գիրք)
Օգտագործեք wwww.segments: «ներքին» էկրանի վրա ցույց տվեք երկու վահանակ (խաղը + լոբբի/չաթ/առաքելություն)։
Հետևեք hinge-gutter (հանգույց), դուք չեք կարող կոճակներ դնել դրա տակ։
Պլանշետներ
Ձախ պերմանենտային սայդբարը (ռոտացիա/ֆիլտրեր), իրավունք 'բովանդակություն։- Ռուսական խաղերում «երեք պանելնիկ» 'տեսահոլովակ, դրույքաչափեր, վիճակագրություններ։
6) Ապահով տարածքներ, կտրվածքներ և վահանակներ
Օգտագործեք safe-area insets (iOS) և «env (safe-area-inset-)» կտրելու/կլոր անկյունները։- Android-ում հաշվի առեք gesture navigation (ներքևի սվայպ) 'մի թաքցրեք CTA-ը հենց տարածքում։
- Donald Tramp/PVA-ում տվեք «viewox-fit = cover»։
7) Խաղերի մասշտաբը 'արցունքներ, ֆուտբոլ, մինի խաղեր
Արցունքները (Canvas/WinGL/iframe)
Aspect-ratio (օրինակ, 16/9) և «object-fit: intain»։
DPI հարմարեցումը 'render devicePixelRatio 1-2 (որակի և մարտկոցի հավասարակշռություն)։
UI շերտերը rem/տրամաբանական միավորներ են, ոչ թե «նկարի պիքսել»։
Մոսկվա-կազինո
Վիդեո հոսքը հարմարեցրեք մինչև 240p 35720p, կախված լայնությունից։
Կոդավորման վահանակը ճկուն է 'կոմպակտ չիպեր/ցանցեր, ամբողջական սեղան' պլանշետի/դիսկոտեի վրա։- Չաթ/պատմությունը սլայդեր է կամ կողային վահանակ։
Մինի-խաղեր/ջեքպոտներ/սկրետներ
One-hand ռեժիմի աջակցությունը, մեծ կոճակները, «փոքր հարվածներից» հրաժարվելը։
8) Կասա և ձևեր տարբեր անկյուններում
Սմարթֆոնը 'գայթակղիչ վարպետը (մեթոդը հաստատվում է ռուսական ապացույցը)։- Պլանշետ/desktop: split-form (մեթոդներ ձախ, մանրամասները աջ)։
- Ստեղնաշար 'սեղմեք բովանդակությունը ֆոկուսով։ Արձանագրեք CTA ստեղնաշարի վրա։
- Մուտքագրման և բեռնաթափման դիմակները, Apple System/Google System-ը ռուսական երկխոսություններ են, որպեսզի չխախտեն։
9) Տպագրություն և հակադրություն
Հիմնական չափը ՝ 16px (SM) 3818px (MD) 2420px (LG +), «clamp ()» միջոցով։
Միջտարածաշրջանային թիվ 1։ 4, WCAG AA/AAA հակադրություն տեսահոլովակների վրա տեքստի համար։
Վերնագրերը և հաշվարկման թվերը պլանշետային թվեր են (tabular lining) կայուն լայնության համար։
10) Արտադրողականություն և չափումներ (WineWeb Vitals)
LCP: <2. 5 c Altaile (կրիտիկական շապիկների նախնական բեռնումը/Arr Shell)։
CLS: <0. 1 (տեղադրեք բարձրություն բաների/պատկերների համար)։
INP/TBT 'նվազագույնի հասցրեք արգելափակող JS, ծույլ բեռնեք պրովայդերներին։- Գծապատկերներ ՝ SyPP/AVIF, հարմարվողական «www.cset/sizes», cashing և Worker PWA-ի համար։
11) Հասանելիությունը և միջազգայնացումը
Տեքստի չափը մեծացված է (respultuser font size)։- Էկրանի ընթերցումներ ՝ aria-105 կոճակների համար/տոմսարկղեր, ֆոկուս-թակարդներ մոդելներում։
- RTL-լեզուները ինտերֆեյսի հացահատիկ են, դասընթացը/արժույթը։
- Ծաղիկներ (կարմիր/կանաչ) - կրկնօրինակեք սրբապատկերները/ստորագրությունները։
12) Նավիգացիոն փամփուշտները դելոնալներով
Սմարթֆոնը 'bott.ru-nav 355 կետեր + «Պրոֆիլ/Հավասարակշռություն» գլխարկի մեջ։
Պլանշետ 'պերմանենտ ձախ nav-rail։- Desktop 'վերին ընտրացանկը + ֆիլտրերը ձախ։
- Արագ գործողությունները (Դեպոզիտ, Ընտրված, Որոնում) միշտ 60-100px սահմաններում են մեծ մատից։
13) Anti-Werles, pop-up և «գովազդը»
Մեկ մոդելային պատուհան մեկ անգամ, հարմարվողական բարձրությունը (90vh syle)։
Առանց layout shift-ի, ձայնագրեք բարձրությունը, օգտագործեք skeleton։- Մի՛ արգելափակեք զննարկչի ժեստերն ու կոճակները։
14) Պիքսելների և իկոնկայի խտությունը
Սրբապատկերների փաթեթները ՝ 1x/2x/3x; SVG-ն այնտեղ, որտեղ հնարավոր է։
Բարակ գծերը (hair.ru) - 241px տրամաբանական (հաշվի առնել DPR)։
Խաղերի և պրովայդերների սկրինշոտները ռետինի որակ են ագրեսիայի հետ։
15) PWA/վեբ բեռնարկղերը և Donald Tramp-ը
Manifest: «wwww.play = standalone», iconces 512 +, սպլաշ էկրանը թեմայի տակ։
«viewox-fit = cover», անվտանգ տարածքներ, www.shell։- Բելգիայում արգելեք կամայական սխեմաները/ներարկումները, միացրեք SSL pinning-ը national կեղևում (եթե օգտագործվում է)։
16) Բովանդակության բլոկները և առաջարկությունները չափերով
Հիրո-բաններ
SM '32-40vh բարձրությունը, մեկ CTA։
LG +: 30-49vh, երկու CTA + պրոմո տեքստը 2 սյունակում։
Խաղերի ցուցակները '6-12 քարտեր էկրանի վրա, «անսահման ժապավեն»' 20-30։
Մոսկվա-Վիջը 'առնվազն 320-180 Altaile-ում, 640 հազար 360 պլանշետում։
17) Դիզայնի չեկի թուղթը նախքան վերանորոգումը
1. Ստուգված են XS 242XL բրեյքպոինտները, դիմանկարը/լանդշաֆտը, split-screen։
2. CTA-ն «մեծ մատի գոտու» ներսում, նպատակները 44-44pt։
3. Արցունքները/բջիջները մեծանում են asport-ratio, առանց UI կտրելու։
4. Կասան աշխատում է մեկ էջում (altaile) և split ռեժիմում (պլանշետ/desktop)։
5. Notchi/կտրվածքներ և safe-area հաշվարկվում են, «viewox-fit = cover»։
6. Web Vitals-ը կանաչ գոտում։ չկա կտրուկ CLS բանկերից/տառատեսակներից։
7. Հակադրությունները և չափերը WCAG-ով; ընթերցողների հասանելիությունը։
8. Lokali/RTL, արժույթը և երկար տողերը չեն կոտրում ցանցը։
9. PWA: manifest, SW, ofline-fallback, ռետինի պատկերակներ։
10. Foldables/պլանշետների թեստը 'երկու վահանակ, hinge-gutter-ը վերացված է։
18) Հաճախակի սխալներ և արագ ֆիքսումներ
«Ռետինային» բարձրությունը առանց սահմանափակումների օգտագործեք «asport-ratio» և բեռնարկղերը։- CTA-ն հենց ծայրում է ավելացնում «safe-area» և ներքին նահանջները։
- Փոքր չիպերը, որոնք ավելացնում են 44-49dp, ավելացրեք հակադրությունը։
- Ցատկող լոգարիթմները ամրացրեք բարձրությունը, բարձրացրեք տառատեսակները։
- FPS-ի անկումը փղերի մեջ նախատեսվում է կրճատել DPR ռենդերը մինչև 1։ 5-2, սահմանափակեք անիմացիաները, օգտագործեք DiGL օպտիմիզացիան։
19) FAQ
Արդյո՞ ք պլանշետների համար պետք է առանձին մոդելներ անենք։- Այո, պլանշետներում աճում է «դատարկ»։ օգտագործեք երկու-երեք պանի լեյաուտ։
- Fluid-մոտեցումը լավ է, բայց կոնտենտային կոտրվածքները (վահանակներ, կոլոնիկներ, նավիգացիայի տեսակը) պահանջում են հստակ brekpoints։
- Առանձին fullscreen-շագանակագույն ֆլոուն, CTA ներքևում, ստեղնաշարի վրա ամրագրումը։
- Դինամիկորեն փոխել որակը լայնությամբ։ 16:9; չաթ և տոկոսադրույքները '105/ստորին վահանակներում, կախված կողմնորոշումից։
Կազինոյի հարմարեցումը տարբեր պոլիգոնալների համար համակարգային աշխատանք է ցանցերի, բրեյքպոինտների, անվտանգ գոտիների և արտադրողականության հետ, գումարած փղերի և խաղային նվագախմբի համար։ Պահպանելով փամփուշտները (մեծ մատի գոտիներ, asport-ratio, split վահանակներ պլանշետներում, PWA-best practics) և վերահսկելով մետրերը, դուք ստանում եք արագ, կարդացված և փոխարկելի արտադրանք ցանկացած էկրանին '4-ից։ Յոթ հազար սմարթֆոն մինչև 27 հազար դիսկոտոպ և ծալովի սարքեր։