Plug2Go: 3D uzlādes ceļvedis elektroauto uzlādes tīklam
Plug2Go ļauj autovadītājiem Moldovā uzlādēt elektroauto bez konta izveides, un uzņēmums vēlējās lapu, kas parāda katru soli, pirms vadītājs nonāk pie stacijas. Mēs izstrādājām tās dizainu un izveidojām to kā vienu ar ritināšanu vadītu three.js ainu: Plug2Go staciju, kas Blender veidota pēc klienta rasējumiem, četrus savienotāju veidus, automašīnu un telefonu – visus modelējām paši. Katrs ritināšanas žests pārvieto kameru uz nākamo soli, no stacijas atrašanas un pieslēgšanas līdz apmaksai telefonā un aizbraukšanai, rumāņu un angļu valodā.
Skaitļi runā paši par sevi
- 100Dators
PageSpeed rādītāji
- Pirmā satura attēlošana
- 0,5 s izturēts
- Lielākā satura attēlošana
- 0,5 s izturēts
- Kopējais bloķēšanas laiks
- 7 ms izturēts
- Kumulatīvā izkārtojuma nobīde
- 0,000 izturēts
- Ātruma indekss
- 0,7 s izturēts
Uzlādes stacijas apskate pa daļām
Apmeklētāji ritina cauri stacijai pa vienai daļai: savienotāji, QR kodi, stacijas ID, instrukcija un atbalsta tālrunis. Katra daļa paceļas no stacijas un izgaismojas Plug2Go zilganzaļajā krāsā, kamēr pārējā aina satumst, un kartīte blakus pastāsta, kam šī daļa paredzēta. Telefonā kartīte saīsinās līdz daļas nosaukumam, bet apraksts pāriet tekstā zem tās.
Galvenie fakti
- Mūsu dizains un izstrāde: viena ar ritināšanu vadīta aina uz three.js, Lenis un Vite, bez satura vadības sistēmas
- Staciju, četrus savienotāju veidus, automašīnu un telefonu mēs modelējām ar Blender Python, un katra uzdruka uz stacijas ir milimetra robežās no klienta rasējuma
- Viens ritināšanas žests ir viens solis: kamera slīd starp 18 pieturām un apstājas katrā, bet ar ieslēgtu kustību samazināšanu tā pārlec
- Telefonā redzami īstie Plug2Go lietotnes ekrāni, renderēti no klienta Figma faila, sinhroni ar stacijas ekrānu
- Modeļi saspiesti ar meshopt un bezzudumu WebP no 3,2 MB līdz 1,5 MB, un automašīna ielādējas tikai tad, kad apmeklētājs pamet pirmo ekrānu
- Rumāņu un angļu valoda ar pārslēgu, pārbaudīta ar 151 testu un pārlūka pārbaudēm Chromium un Safari dzinējā iPhone un iPad izmēros, viss teksts ar WCAG AA kontrastu
