Բեռնվում է

Benzeen Auto Parts

UI և ինտերակտիվ տարրերի ծրագրավորում ավտոպահեստամասերի առցանց խանութի համար՝ զուգահեռ զարգացող դիզայնով

Benzeen Auto Parts-ը Լոս Անջելեսում գործող ավտոպահեստամասերի առցանց վաճառքի բիզնեսի նախագիծ էր, որի վրա 2019 թվականին աշխատել եմ TCO-ի միջոցով։ Դիզայներները շարունակում էին նոր էջեր պատրաստել և գործողները թարմացնել ծրագրավորման ընթացքում։

Իրականացրել եմ ամբողջ կայքի ինտերֆեյսը՝ ներառյալ ինտերակտիվ վարքը, անիմացիաները և JavaScript տրամաբանության մի մասը, ինչպես նաև ներդրել եմ Google AMP։ Սա իմ առաջին e-commerce նախագիծն էր՝ առանց ավանդական CMS-ի։

Դերը՝
UI ծրագրավորողTCO-ի միջոցով
Աշխատանքների շրջանակը՝
Բոլոր էջերի UI-ըԻնտերակտիվություն և անիմացիաներJavaScript տրամաբանությունGoogle AMP
Տեխնոլոգիաներ՝
AngularSass/SCSSBEMJavaScriptGoogle AMP

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

Անհատական e-commerce մշակում, ոչ թե պատրաստի CMS ձևանմուշ։ Նոր էջերի մակետները ստացվում էին կայքի ծրագրավորման ընթացքում։

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

    Angular-ով անհատական e-commerce նախագիծ՝ առանց CMS-ի։ Էջերի նոր կոնցեպտներն ու դիզայնի փոփոխությունները հայտնվում էին ծրագրավորումն սկսելուց հետո։

  2. Կառուցվածք և ընդհանուր ոճավորում

    Նախ մշակել եմ էջերի կառուցվածքն ու ընդհանուր ոճավորումը՝ օգտագործելով Sass/SCSS և BEM մեթոդաբանությունը։

  3. Դիզայներների հետ զուգահեռ

    Իրականացրել և թարմացրել եմ էջերը մակետների փոփոխություններին զուգընթաց՝ աշխատելով դիզայնի թիմի հետ։

  4. Առցանց խանութ

    Ամբողջ խանութի ինտերֆեյսը՝ որոնում ըստ մեքենայի մակնիշի, նոր ապրանքներ, առկա պահեստամասեր, ապրանքի էջեր, գնային հարցումներ և օգտատիրոջ հաշիվ։

  5. Ինտերակտիվություն և AMP

    Կայքի անիմացիաներն ու JavaScript տրամաբանությունը, ինչպես նաև Google AMP-ի ներդրումը աջակցվող բջջային բովանդակության համար։

  6. Ինչ փոխվեց

    • Կայքի բոլոր էջերի ինտերֆեյսը իրականացվեց
    • Ինտերակտիվ վարք և անիմացիաներ
    • Google AMP-ի ներդրում

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

    • Ոչ ստանդարտ առցանց խանութի ամբողջական UI իրականացում
    • Սերտ համագործակցություն դիզայներների հետ՝ մակետների փոփոխությունների ընթացքում
    • Անիմացիաներ և Angular-ով՝ առանց CMS-ի, նախագծի փորձ

Սկզբունքներ

Ինչպես էր ծրագրավորումը համընթաց գնում փոփոխվող դիզայնին։

  • Աշխատել համահունչ

    Դիզայնն ու իրականացումը համահունչ էին մնում պահանջների փոփոխությանը զուգընթաց։

  • Կառուցվածքային ոճավորում

    BEM-ն ու SCSS-ն օգնում էին նոր էջերը ներդնել գոյություն ունեցող համակարգում։

  • Մտածված մանրամասներ

    Ինտերակտիվ մանրամասները մշակված էին նպատակային, ոչ թե թողնված պատահականության։

  • Միասնական խանութ

    Մեծածավալ ինտերֆեյսը ամբողջ կայքում պահպանում էր միասնականությունը։

Մանրամասն

Աշխատանքի երկու ուղղություն և դրանց իրականացման մոտեցումները։

1. Անընդհատ փոփոխվող դիզայն

Նոր էջերը շարունակում էին նախագծվել, երբ կայքի ծրագրավորումն արդեն ընթացքի մեջ էր։

Կառուցվածքային Sass/BEM լուծումների վրա հիմնված փուլային իրականացումը թույլ էր տալիս նոր և թարմացված էջերը ներառել արդեն գոյություն ունեցող կառուցվածքում։

2. Google AMP

Google AMP-ը ներդրել եմ աջակցվող բջջային բովանդակության համար՝ հիմնական Angular տարբերակին զուգահեռ։

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

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

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

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

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