Տարբերակ 3.0. Վերանայելով, թե ինչպես պետք է աշխատի էջերի կառուցիչը

Հեղինակ՝

բաժնում՝

,

version-3-0-rethinking-how-a-page-builder-should-workԱրդեն 10 ամիս է անցել այն պահից, երբ մենք Page Builder Sandwich-ը ներկայացրինք հանրությանը: Այժմ մենք ունենք շուրջ 6,000 ակտիվ տեղադրում, և դա բավականին մեծ ձեռքբերում է մեզ համար: Դրա շնորհիվ մենք նաև հսկայական քանակությամբ կարծիքներ ենք ստացել՝ ինչպես դրական, այնպես էլ բացասական: Սակայն ընդհանուր կարծիքն այն է, որ մարդիկ վայելում են, թե որքան հեշտ է կառուցել դասավորություններ և ստեղծել իրենց բովանդակությունը՝ համեմատած շուկայում եղած այլ էջ կառուցիչների հետ:

Մեր ստացած արձագանքների մեծ մասը նոր գործառույթների հարցումներ էին, և վերջին մի քանի ամիսների ընթացքում մենք ավելացրել ենք այդ գործառույթներից շատերը: Բայց քանի որ շարունակում էինք դա անել, այդ ընթացքում սկսեցինք նաև դանդաղորեն փոխել օգտատիրոջ ինտերֆեյսը: Եվ, հետևաբար, մենք փոխում էինք նաև օգտատիրոջ փորձառությունը… դեպի վատը: Սակայն հասել էր մի կետի, երբ մենք պետք է վերաիմաստավորեինք ինտերֆեյսը, քանի որ այն պարզապես այլևս սահուն չէր աշխատում, և տարբեր գործառույթները նույնպես չէին համադրվում դրա հետ:

Նախկին ինտերֆեյսը

PBS-ի նախորդ տարբերակներում մենք ցանկանում էինք, որ ամեն ինչ լինի կոճակների տեսքով: Ինչո՞ւ: Որովհետև կոճակները հեշտ է օգտագործել: Դուք պարզապես… սեղմում եք դրանց վրա: Տեսուչի (վերևի նկարի կողային վահանակի) ավելի հին տարբերակներում կոճակին սեղմելը մեծացնում էր արժեքը, իսկ shift+սեղմումը՝ փոքրացնում այն: Դա բավականին հեշտ է հնչում: Բայց կարուսելների, ներդիրների, քարտեզների և այլ նոր տարրերի ու գործառույթների ավելացմամբ, այդ բոլոր կոճակները վերածվեցին տարբեր դիզայնով տարբեր պատկերակների խառնաշփոթի և սկսեցին ավելի շատ հիերոգլիֆների նմանվել, քան լավ ինտերֆեյսի: Սա փորձառու օգտատերերի համար խնդիր չէր, բայց բավականին վախեցնող է նայելը, եթե նոր եք PBS-ում:

Հաջորդը՝ տեսուչում ի հայտ եկան մի քանի խնդիրներ: Սկզբնական գաղափարն այն էր, որ ամեն ինչ պարզ և հասանելի լինի տեսուչի ներսում: Եվ ամեն ինչ ասելով՝ ես նկատի ունեի ամեն ինչ՝ տեքստը վերնագրերի վերածելուց մինչև ֆոնի գույների, տառատեսակի գույների փոփոխություն և այլն: Սակայն իր ներկայիս վիճակում տեսուչն այժմ պարունակում է բազմաթիվ տարբերակներ, որոնք կստիպեն ձեզ մշտապես օգտագործել մկնիկի անիվը՝ վեր ու վար ոլորելու համար: Բավականին տարբեր այն տեսուչից, որը ես նախկինում հույս ունեի ստեղծել օգտատերերի համար:

Վերջապես, վերջերս մենք ներկայացրինք շորթկոդերի քարտեզագրում ձեր սիրելի փլագինների համար. Այս գործառույթը մեզանից պահանջեց ստեղծել տեքստային դաշտեր, թվային սահիչներ, նշավանդակներ և լրացուցիչ նոր տարբերակների տեսակներ, որոնք անհրաժեշտ են ձեր շորթկոդերի խմբագրման փորձառությունն ավելի հաճելի դարձնելու համար: Սկզբում դա լավ գաղափար էր, և այո, այն ավելի հեշտացրեց շորթկոդերի կառավարումը ձեզ համար: Բայց կրկին, այս գործառույթը շեղվեց մեր «միայն կոճակներ» ինտերֆեյսից: Հետադարձ հայացք գցելով՝ իսկապես անհնար էր միայն կոճակներ օգտագործել շորթկոդերի ատրիբուտները փոխելու համար: Այժմ, վերջին տարբերակում, մենք ունեցանք կառավարման 2 տեսակ՝ կոճակները և շորթկոդերի դաշտերը:

Կան ևս մի քանի պատճառներ, որոնք ստիպեցին մեզ որոշել, որ մեր ինտերֆեյսն այլևս արդյունավետ չէր (կամ հարմար չէր մեր կարիքներին), բայց վերը նշված կետերը հիմնականներն են: Մի բան, այնուամենայնիվ, միշտ հստակ էր. մենք գիտեինք, որ պետք է թարմացնենք ինտերֆեյսը:

Սահմանելով, թե ինչպես պետք է իդեալականում աշխատի էջ կառուցիչը

Անմիջապես գործի անցնելու և ամեն ինչ փոխելու փոխարեն՝ մենք հարյուր քայլ հետ գնացինք՝ դիտարկելու էջ կառուցիչի ողջ փորձառությունը: Մենք ցանկանում էինք նոր շունչ հաղորդել ինտերֆեյսին: Անկեղծ ասած, մենք չէինք ցանկանում այն վերակառուցել տարեցտարի: Դա սպառիչ է և միանշանակ էական օգուտ չի բերում WordPress համայնքին: Այս անգամ մենք որոշեցինք գործել դանդաղ և զգուշորեն: Մենք ուսումնասիրել ենք Page Builder Sandwich-ի յուրաքանչյուր անկյունը և այն, ինչ նրան դարձնում է լավ էջ կառուցիչ, և ի վերջո ամբողջ խմբագրման փորձառությունը ձևակերպեցինք մի քանի հիմնական հայեցակարգերի մեջ:

Հիմնական հայեցակարգ #1. Մուտքագրում անմիջապես ձեր բովանդակության մեջ՝ փոփոխություններ կատարելու համար

Էջ կառուցիչ տեղադրելու հիմնական պատճառներից մեկը WordPress-ի backend տեքստային խմբագրիչի սահմանափակումներից դուրս գալն է: Բանն այն չէ, որ backend խմբագրիչը լավը չէ, բայց ձեր վեբ էջերը ստեղծելիս այն անմիջապես ցույց չի տալիս, թե ինչ տեսք կունենա ձեր էջը կայքի այցելուների համար, ոչ էլ թույլ է տալիս ձեր բովանդակությունը դասավորել մեկ սյունակից բացի այլ կերպ: Այնտեղ դուք կարող եք տեսնել միայն ձեր տեքստը և որոշ պատկերներ, բայց ոչ ավելի բարդ տարրեր (օրինակ՝ հետադարձ կապի ձևաթղթեր): Կարող եք ավելացնել շորթկոդեր, այո, բայց դրանք չեն երևա իրենց վերջնական տեսքով*:

* Կան ուրիշների կողմից ստեղծված փլագիններ սա լուծելու համար, ինչպիսին է Shortcake UI-ն, բայց դա էական չէ:

Ահա թե որտեղ են հայտնվում frontend էջ կառուցիչները: Նրանք խմբագրման փորձառությունը backend-ից բերում են frontend՝ թույլ տալով ձեզ խմբագրել ձեր կայքը հենց այնպես, ինչպես այն կտեսնեն ձեր այցելուները. Ինչպես Փիփինը կձևակերպեր՝ այն, ինչ տեսնում եք, այն էլ ստանում եք (WYSIWYG):

Frontend խմբագրիչ լինելու մեկ այլ առավելությունն այն է, որ այն թույլ է տալիս խմբագրել ձեր տեքստն անմիջապես: Վերնագրեր և պարբերություններ մուտքագրելը տալիս է սովորական տեքստային խմբագրիչ օգտագործելու հեշտությունը կայքի կառուցման գործընթացում: Կոճակները և ներդիրների պիտակները նույնպես պետք է փոփոխելի լինեն՝ պարզապես դրանց վրա սեղմելով և մուտքագրելով:

Սա այն ոլորտն է, որտեղ մյուս էջ կառուցիչների մեծ մասը լավ արդյունք չի ցուցաբերում: Նրանց մեծ մասը ստիպում է ձեզ մուտքագրել տեքստային դաշտի ներսում՝ ամեն ինչ խմբագրելու համար: Կրկին, սա չպետք է լինի իրական frontend էջ կառուցիչներում: Տեքստն անմիջապես մուտքագրելը և խմբագրելը եղել է Page Builder Sandwich-ի ուժեղ կողմը դեռ 2-րդ տարբերակից, և մենք համոզվեցինք, որ դա պահպանվի նաև 3-րդ տարբերակում:

Հիմնական հայեցակարգ #2. Մկնիկի օգտագործումը արագ ճշգրտումների համար

Մկնիկը հզոր գործիք է, որը հաճախ անտեսվում է էջ կառուցիչներում: Հաճախ էջ կառուցիչներն այն օգտագործում են, որպեսզի թույլ տան մարդկանց քաշել տարրերը և տեղադրել տարբեր տեղերում, կամ սեղմել կոճակների կամ մուտքագրման դաշտերի վրա: Թեև սա նորմալ է, բայց էջերի կառուցման տեսանկյունից մկնիկով կարող եք շատ ավելին անել:

Նախ՝ մկնիկը որպես էջը խմբագրելու գործիք օգտագործելիս կա հիանալի տեսողական հետադարձ կապ, հատկապես այնպիսի վիզուալ հատկություններ կարգավորելիս, ինչպիսիք են լուսանցքները (margins), ներքին հեռավորությունները (paddings) և չափսերը: Այժմ տարրերը կարգավորելը դառնում է բնական փորձառություն:

PBS-ի 3-րդ տարբերակում դուք կկարողանաք կարգավորել մի շարք բաներ՝ օգտագործելով ձեր մկնիկը: Կարող եք կարգավորել առանձին տարրերի միջև լուսանցքները/հեռավորությունները, ձեր սյունակների ներքին հեռավորությունները, ինչպես նաև պատկերների, պատկերակների և քարտեզների չափերը: Մենք նաև թվային արժեքները փոխելու կոճակները փոխարինել ենք սահիչներով:

Հիմնական հայեցակարգ #3. Տեքստի ոճավորումը պետք է լինի հեշտ

Եթե մի քայլ հետ գնաք ձեր մոնիտորից, կնկատեք, որ այն ամենը, ինչ ավելացնում եք ձեր վեբ էջերում, մեծ մասամբ տեքստային բովանդակություն է: Այո, դրանց ուղեկցելու համար մենք ունենք պատկերներ և պատկերակներ, և վերջին շրջանում հակված ենք ավելի մեծ պատկերներ ավելացնել մեր կայքերում: Բայց կարևոր բովանդակության մեծ մասը տեքստ է՝ վերնագրեր, կետանշված ցուցակներ, պարբերություններ, մեջբերումներ և այլն: Դրան զուգահեռ կարևոր է, թե ինչպես ենք ոճավորում մեր տեքստը՝ մեր դիզայնին համապատասխանեցնելու համար: Մենք կա՛մ փոխում ենք դրանց չափերն ու գույները, կա՛մ դարձնում թավ կամ շեղ: Սա արվում է, որպեսզի մեր բովանդակությունն ավելի ընթեռնելի, տեղին և գրավիչ լինի մեր ընթերցողների համար:

Քանի որ մենք հաճախ ենք ոճավորում տեքստը, ոճերը փոխելու հնարավորություն տվող կոճակները պետք է շատ հասանելի լինեն: Դրանք չպետք է թաքնված լինեն բացվող պատուհանի մեջ, որը նախ պետք է բացել: Էջ կառուցիչների մեծ մասը տառապում է այս հիվանդությամբ: Որպեսզի նրանց օգտատիրոջ ինտերֆեյսը պիտակավորվի որպես «առանց ավելորդությունների», նույնիսկ ամենաշատ օգտագործվող տարբերակները թաքցվում են տեսադաշտից:

Սա լուծելու համար մենք ուսումնասիրեցինք ամենից հաճախ օգտագործվող տեքստային խմբագրիչները: Նկատեցինք, որ դրանք սովորաբար ունենում են բազմաթիվ կոճակներով տող էկրանի վերևի մասում, որոնք օգտագործվում են տեքստը ձևաչափելու համար, և նույն դասավորությունը կրկնօրինակեցինք 3-րդ տարբերակի համար: Այժմ մենք ունենք տեքստի ոճավորման բոլոր կոճակների մի տող, որը մշտապես առկա է ձեր էկրանի վերևում: Սա ոճավորումը դարձնում է իսկապես արագ և լիովին բնական տեքստի խմբագրման ժամանակ:

Հիմնական հայեցակարգ #4. Ոճավորման առաջադեմ տարբերակները պետք է լինեն ճկուն, բայց հեշտ հասկանալի

Էջ կառուցիչի գլխավոր նպատակն այն է, որ այն պետք է թույլ տա մարդկանց հեշտությամբ ստեղծել ապշեցուցիչ դիզայներ: Դա նշանակում է, որ մենք պետք է տրամադրենք բազմաթիվ տարբեր կարգավորումներ և տարբերակներ՝ առանց բարդ ուսուցման շեմ ստեղծելու: Լուսանցքները, ներքին հեռավորությունները կարգավորելը և տեքստը ոճավորելը հիանալի են, բայց դրանց հնարավորությունները սահմանափակ են: Գործն ավարտին հասցնելու համար ձեզ անհրաժեշտ կլինեն շատ ավելի բարդ տարբերակներ, ինչպիսիք են ֆոնային պատկերները, նախշերը, եզրագծերը, ֆիքսված ֆոները և այլն: Այդ բոլոր տարբեր կարգավորումները կուտակելը կարող է մի փոքր ծանրաբեռնող լինել, ուստի մենք պարզեցրել ենք դրանցից մի քանիսը և կազմակերպել կատեգորիաներում՝ 3-րդ տարբերակում ամեն ինչ ավելի մատչելի դարձնելու համար:

Հիմնական հայեցակարգ #5. Շորթկոդերի աջակցություն

Վերջապես, չմոռանանք, որ մեր էջ կառուցիչը հիմնված է WordPress-ի վրա: Մենք պետք է ընդունենք հարթակը և դրա հնարավորությունները, այլ ոչ թե սահմանափակենք կամ շեղվենք դրանցից: Մի հսկայական հնարավորություն, որը տրամադրում է WordPress-ը, շորթկոդերն են: Դա չի նշանակում, որ ամբողջ բովանդակությունը պետք է կազմված լինի շորթկոդերից՝ դա քաոսային կլիներ, այլ մենք պարզապես պետք է համատեղելի լինենք դրանց հետ: Բազմաթիվ փլագիններ և թեմաներ օգտագործում են շորթկոդեր, և մեծ կորուստ կլիներ, եթե անտեսեինք դրանք բոլորը: Փաստորեն, շորթկոդերը օգտատերերին տալիս են առավելագույն ճկունություն, երբ խոսքը վերաբերում է էջեր ստեղծելուն:

Մի քանի շաբաթ առաջ մենք ներկայացրինք մեր շորթկոդերի քարտեզագրման համակարգը, և դրա շնորհիվ մենք քարտեզագրել ենք հարյուրավոր շորթկոդեր հարյուրավոր փլագիններից: Մենք առաջնահերթություն ենք տվել WordPress-ի փլագինների գրացուցակում ամենատարածված փլագիններին, այնպես որ մեծ է հավանականությունը, որ դուք կհանդիպեք դրանց ձեր սեփական կայքերում: Սա միայն ավելի է հզորացել 3-րդ տարբերակում, և մենք կշարունակենք բարելավել այն հետագայում:

Եզրակացություն

Մենք վերցրել ենք վերը նշված բոլոր կարևոր հատկանիշները և ներդրել դրանք Page Builder Sandwich-ի 3-րդ տարբերակում: Սա լավագույն էջ կառուցիչն է, որը մենք մինչ այժմ ստեղծել ենք WordPress-ի համար: Այն ավելի ինտուիտիվ է և ավելի բնական օգտագործման մեջ, աշխատում է ավելի արագ, ավելի հեշտ է օգտագործել և ավելի հարմարավետ է, քան երբևէ:

Եթե ունեք որևէ մտքեր էջ կառուցիչի կարևոր գործառույթի վերաբերյալ, տեղեկացրեք մեզ՝ մեկնաբանություն թողնելով ստորև: