Բեռնվում է

Smartbet

Անիմացիոն կայք ընկերության և նրա պրոդուկտների համար՝ սպորտ, խաղեր, հարթակային լուծումներ և ծառայություններ

2021 թվականի օգոստոսից հոկտեմբեր Smartbet-ում աշխատել եմ որպես UI ծրագրավորող՝ դիզայներների և ծրագրավորողների թիմում։ Դիզայներները տրամադրել էին հաստատված մակետները, իսկ ես իրականացրել եմ կայքի բոլոր էջերի UI-ը՝ ներառյալ ադապտիվ տարբերակները։

Բացի էջերից, ստեղծել եմ բազմակի օգտագործման SCSS կառուցվածք՝ ատոմային մոտեցմամբ, BEM-ով և ոճավորման թոքեններով, ինչպես նաև իրականացրել եմ JavaScript անիմացիաներն ու անցումները էջերի և պրոդուկտային բաժինների միջև։

Դերը՝
UI ծրագրավորողԸնկերության աշխատակից
Աշխատանքների շրջանակը՝
Կայքի բոլոր էջերըԱդապտիվ UISCSS կառուցվածք և թոքեններԱնիմացիաներ և անցումներ
Թիմը՝
Դիզայներներ և ծրագրավորողներ
Տեխնոլոգիաներ՝
HTMLCSSSCSSJavaScript

Ինչ էր ներառում աշխատանքը

Smartbet-ի կայքում ներկայացված են պրոդուկտների տարբեր ուղղություններ՝ սպորտային, խաղային և հարթակային, ինչպես նաև լուծումներ, վճարման եղանակներ, մատակարարներ և տեղեկություններ ընկերության մասին։ Դիզայնն արդեն հաստատված էր։ Իմ խնդիրն էր յուրաքանչյուր էջ վերածել գործող, ադապտիվ և անիմացիոն ինտերֆեյսի։

  1. Նախապատմություն

    Պատրաստ մակետները պետք էր իրականացնել Front-end-ում։ Կայքը ներառում էր՝

    • Սպորտային պրոդուկտներ
    • Խաղային պրոդուկտներ
    • Հարթակային գործիքներ
    • Լուծումներ, վճարման եղանակներ և մատակարարներ
    • Ընկերության էջեր

  2. UI-ի հիմքը

    Բազմակի օգտագործման SCSS կառուցվածք՝ ատոմային մոտեցմամբ, BEM անվանակոչմամբ և ոճավորման թոքեններով. բոլոր էջերը հիմնվում էին ընդհանուր կանոնների վրա։

  3. Պրոդուկտների էջեր

    Իրականացրել եմ սպորտային, խաղային և հարթակային բաժինների բոլոր հաստատված մակետները։

    Պրոդուկտների յուրաքանչյուր ուղղությունն ունի իր վիզուալ թեման՝ կայքի միասնական կառուցվածքի շրջանակում։

  4. Անիմացիաներ

    JavaScript անիմացիաներն ու անցումները համաժամանակյա փոխում են վերնագրերը, պատկերները և բաժինների գունային շեշտադրումները՝ էջերից կամ պրոդուկտներից մյուսին անցնելիս։

  5. Լրացուցիչ բաժիններ՝ տարբեր էկրանների համար

    Ծառայություններ, լուծումներ, մատակարարներ, վճարման եղանակներ և ընկերության էջեր՝ փուլերով հայտնվող բովանդակությամբ։

    Բոլոր էջերը հարմարեցված են տարբեր էկրանների, իսկ նավիգացիան, տառատեսակներն ու UI լուծումները պահպանել են միասնականությունը։

  6. Ինչ փոխվեց

    • Կայքի բոլոր էջերի UI-ը իրականացվեց
    • Էջերի անիմացիոն վիճակներ և անցումներ պրոդուկտային ուղղությունների միջև
    • Ոճավորման միասնական, բազմակի օգտագործման համակարգ ամբողջ կայքի համար

  7. Ինչ է ցույց տալիս նախագիծը

    • Ամբողջ կայքի UI-ի պատասխանատվություն՝ առանց Backend-ի կամ պրոդուկտի դիզայնի
    • Բազմակի օգտագործման ոճավորման համակարգ և բարդ անիմացիաներ
    • Ճշգրիտ համագործակցություն դիզայներների հետ՝ վիզուալ առումով բարդ, բազմաբաժին կայքի վրա աշխատելիս

Սկզբունքներ

Մոտեցումներ, որոնց հետևել եմ յուրաքանչյուր էջում։

  • Դիզայնի ճշգրիտ իրականացում

    Հաստատված մակետները ճշգրիտ վերածվել են գործող էջերի։

  • Բազմակի օգտագործում

    Ատոմային/BEM ոճավորում և թոքեններ՝ ընդհանուր բոլոր էջերի համար։

  • Հետևողական անիմացիա

    Անցումները պահպանում են միասնական տրամաբանություն պրոդուկտային տարբեր ուղղությունների միջև։

  • Ադապտիվ կառուցվածք

    Նույն փորձառությունը՝ տարբեր չափերի էկրաններին։

  • Վիզուալ միասնականություն

    Նավիգացիան, տառատեսակներն ու UI լուծումները համահունչ են միմյանց։

Մանրամասն

Ծրագրավորման հինգ մաս և դրանց իրականացման մոտեցումները։

1. Անցումներ պրոդուկտների միջև

Մի պրոդուկտից մյուսին անցնելիս միաժամանակ փոխվում են վերնագրերը, պատկերներն ու բաժինների գունային շեշտադրումները։

Այս անցումները JavaScript-ով իրականացրել եմ այնպես, որ հեռացող և հայտնվող բովանդակությունը շարժվի համաժամանակյա։

2. Պրոդուկտների տարբեր վիզուալ ինքնություններ

Սպորտային, խաղային և հարթակային բաժիններն ունեն իրենց վիզուալ թեմաները։

Միևնույն ժամանակ կառուցվածքը ընդհանուր է. նավիգացիան ու դասավորությունը մնում են ծանոթ, փոխվում են գույներն ու պատկերները։

3. Շարժման մեջ գտնվող առաջին էկրան

Գլխավոր էջի առաջին էկրանին, հիմնական բովանդակության կողքին, անընդհատ շարժվում և ձևը փոխում է վիզուալ օբյեկտը։

4. Ամբողջ էկրանով մենյու

Ամբողջ էկրանով մենյուն խմբավորված է ըստ պրոդուկտների կատեգորիաների և բացվում ու փակվում է անիմացիայով։

5. Բովանդակության փուլային հայտնվելը

Ծառայությունների նկարազարդումները, աջակցության տեղեկությունները, մատակարարների և վճարման եղանակների ցանցերը հայտնվում են փուլերով, ոչ թե միանգամից։

Նմանատիպ խնդի՞ր ունեք

Պատմեք՝ ինչ եք ստեղծում։ Կպատասխանեմ երկու աշխատանքային օրվա ընթացքում։

Սկսել նախագիծ

Նոր կայք, պրոդուկտի ինտերֆեյս, դիզայն համակարգ կամ գործող լուծման բարելավում։

Սկսել նախագիծ