Կայքերի ցանկի 10 փայլուն նորարարական ձևավորում

Բովանդակություն

• 01. The Guardian
• 02. Միջին
• 03. Սվբլեթ
• 04. Twitter
• 05. B&O խաղ
• 06. Խնձոր
• 07. Վիմեո
• 08. Google Plus
• 09. Անփայլ
• 10. հրապարակային տարածք
• Դուր եկավ սա Կարդացեք սրանք:

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

Կանոնավոր, հորիզոնական ընտրացանկերը և փոքր բացվող տուփերը լավ են գործում շատ կայքերի համար: Բայց նավարկության ձևավորումը կարող է իսկական մարտահրավեր դառնալ այն կայքերի համար, որոնք ունեն հսկայական քանակությամբ բովանդակություն կամ շատ տարբեր կատեգորիաներ, որոնցում պետք է հեշտությամբ մուտք գործել:

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

01. The Guardian

Guardian թերթի կայքը ունի մեծ թվով տարբեր կատեգորիաներ, այդ թվում ՝ «Մշակույթ», «Բիզնես» և «Travelամփորդություն», և այս կատեգորիաներից յուրաքանչյուրն ունի մի շարք ենթակատեգորիաներ:

Իրական խնամքն ու ուշադրությունը հրավիրել են դրանցից յուրաքանչյուրի համար նավիգացիայի նախագծման վրա `մատչելի և ակնթարթորեն ինտուիտիվ: Չնայած այսքան շատ տարբեր ենթակատեգորիաներ գոյություն ունեն, բայց դրանք կայքի որևէ վայրից երբեք չեն գերազանցում երկու կտտոց:

Յուրաքանչյուր կատեգորիա, ինչպիսին է «Մշակույթ» -ը, ունի նաև իր գույնը ՝ իր մեջ ներառված ամեն ինչով, օրինակ ՝ «Ֆիլմ» և «Երաժշտություն», համապատասխանաբար գունավորված, ինչը օգնում է կատեգորիաները լավ կապել:

02. Միջին

Medium- ը հրատարակչական նոր հարթակ է, որը կառուցվել է Էվան Ուիլյամսի կողմից, ով ստեղծեց նաև Blogger և Twitter: Յուրաքանչյուր էջի ուշադրությունը կենտրոնացած է բովանդակության վրա, և նա անհավատալիորեն աշխատել է բոլոր շեղումները վերացնելու համար: Նույնիսկ ընտրացանկը թաքնված է վերևի ձախ անկյունում գտնվող պատկերանշանի ետևում: Սլաքը սլաքը ցուցանակի վրա ցույց է տալիս ընտրացանկը ՝ կոկիկորեն խրված:

Medium- ի ընտրացանկի մեկ այլ խելացի հատկություն բացահայտվում է, երբ զննարկչի պատուհանը փոքր է: Փոխանակ լոգոն համընկնելու (իր հետեւում թաքնված ցանկը) տեքստի վրա, այն պարզապես անհետանում է և նորից հայտնվում է միայն այն ժամանակ, երբ ոլորում եք էջի վերև:

03. Սվբլեթ

Svbtle- ը Դասթին Կուրտիսի ստեղծագործությունն է և իրեն անվանում է որպես ամսագրի նոր տեսակ: Այն խելացիորեն միաձուլում է գեղեցիկ ձևավորված CMS բլոգը մի քանի լավագույն հաղորդագրությունների համադրված ընտրության հետ:

Curtis- ը հայտնի է նրանով, որ պատրաստում է օգտագործողների գեղեցիկ փորձեր և ունի մանր, փոքր-ինչ մոլուցք, մանրուքների ուշադրություն: Երբեմն նրա կատարած բարելավումներն այնքան նուրբ են, որ կարող ես չնկատել դրանք, բայց երբ դրանք հայտնվում են, դրանք հաստատ բարելավում են օգտագործողի փորձը:

Svbtle- ի ընտրացանկը դրա հիանալի օրինակն է. Երբ սավառնում եք բացվող պատկերակի վրա, ընտրացանկը ընդլայնվում է այնպես, ինչպես ակնկալում եք: Այնուամենայնիվ, երբ ցուցիչը հեռացնում եք ընտրացանկից, այն մնում է տեղում մեկ կամ երկու վայրկյան. Պարզապես այնքան ժամանակ, որպեսզի կուրսորը հետ տեղափոխեք, եթե այն պատահաբար մի փոքր չափից շատ հեռացնեիք: Թեև դա պարզ է թվում, այն փաստը, որ նա մտածել է ծածկագրման մասին, որը ցույց է տալիս, թե որքան կիրք և ուշադրություն է մանրուքներին իր աշխատանքի մեջ:

04. Twitter

Twitter- ը շրջում է վերոհիշյալ խնդրի շուրջ `ակտիվացնելով բացվող ցանկը: Այստեղ բացասական կողմն այն է, որ ընտրացանկն ակտիվացնելու համար հարկավոր է կտտացնել կարգավորումների պատկերակին. Եթե այն ակտիվանա և բաց մնա հենց դրա վրա սավառնելով, այն անհարմար կերպով կակտիվանա անընդհատ, բայց երբ ընտրվի, այն կմնա մինչև փակ: Խելամտորեն առանձնացված են նաև որոշակի գործողություններ, ինչպիսիք են «Օգնություն» և «Ստեղնաշարի դյուրանցումներ»: Խմբավորելով հարակից բաժինները ՝ ավելի հեշտ կլինի գտնել այն, ինչ փնտրում եք:

05. B&O խաղ

B&O Play- ը, որը Bang & Olufsen- ի աուդիո մասնագետների մի մասն է, ունի մի շարք ապրանքներ, որոնք դուք գուցե չկարողանաք ճանաչել միայն իրենց անունից, բայց գուցե կարողանաք ճանաչել դրանց տեսքից: Օրինակ, A8- ը շատ տարբերվող ոճով բարձրախոսի հանգույց է, որը բոլորովին այլ կերպ է թվում A9- ի, բայց հեշտ կլինի շփոթել այդ երկուսը `ելնելով դրանց անուններից:

Դրան դեմ պայքարելու և նրանց նավարկությունը զննարկիչների համար շատ ավելի ինտուիտիվ և օգտակար դարձնելու համար «Ապրանքներ» բաժնում ընտրացանկին տրվում է շատ ավելորդ տարածություն `յուրաքանչյուր ապրանքի պարզ նկարազարդմամբ: Չնայած B&O Play- ի դեպքում այս մոտեցումը պիտանի չէ յուրաքանչյուր կայքի համար (հատկապես այն ապրանքների լայն տեսականիով), դա հիանալի գաղափար է, որը կատարվել է անթերի:

06. Խնձոր

Apple- ը դիզայնի համաշխարհային առաջատարն է, և զարմանալի չէ, որ նրա կայքը նույնքան գեղեցիկ է պատրաստված, որքան իրենց արտադրանքը: Հիմնական նավարկությունը, ինչպես B&O Play- ն, ցույց է տալիս յուրաքանչյուր ապրանք, ինչպես նաև զվարճալի, սահող անիմացիա յուրաքանչյուրի համար, երբ կտտացնում են նոր բաժին (մեզ համար նրանց համար, ովքեր ունեն ժամանակակից զննարկիչներ):

Նավիգացիայի մեջ յուրաքանչյուր ապրանքի ցուցադրումը `օգտագործելով շատ մանրամասն, բարձրորակ պատկերներ, նշանակում է, որ հեշտ է շրջել առանց մտածելու նույնիսկ:

07. Վիմեո

Տեսանյութերի փոխանակման կայքը Vimeo- ն նախընտրել է մի փոքր ավելի նկարագրություն ներառել իր նավիգացիայի մեջ: «Ստեղծեք» կամ «Դիտեք» վրայով սավառնելը հանգեցնում է մի շարք այլ տարբերակների, ինչպիսիք են «Վիդեո դպրոցը»: Քանի որ շատերին անծանոթ կլինի Vimeo- ի վիդեո դպրոցը, նրանք մի փոքր վերնագիր են ավելացրել ՝ ասելով ՝ «Իմացեք, թե ինչպես ավելի լավ տեսանյութեր պատրաստել», որն արագ և հակիրճ բացատրում է, թե ինչ է պատահելու նախքան կտտացնելը:

08. Google Plus

Google Plus- ը, որոնման հսկայի մրցակիցը Facebook- ի համար, ունի գեղեցիկ մշակված նավարկություն, որն անցնում է զննարկիչի ձախ կողմից ուղղահայաց ներքև: Ուղղահայաց ընտրացանկը օգնում է տարածք ազատել ամենակարևոր վերնագրի համար ՝ միևնույն ժամանակ հեշտացնելով յուրաքանչյուր բաժնի մատչելիությունը:

Սրբապատկերներից յուրաքանչյուրը կարող է նաև հարմարեցվել ՝ քաշվելով և դիրքում ընկնելուց հետո, այնպես որ, եթե դուք ավելի շատ խաղերի երկրպագու եք, քան լուսանկարներ, ազատ եք վերադասավորելու նավիգացիան ձեր սրտով:

09. Անփայլ

Threadless, բազմաշերտ մարզաշապիկների ընկերությունը, որը սիրված է դիզայնի և արվեստի բազմության կողմից, իր նավիգացիայում օգտագործում է մեծ, համարձակ պատկերներ:

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

Նրանք ուշադիր ուսումնասիրել են օգտագործման այս դեպքերից յուրաքանչյուրը և յուրաքանչյուր բաժին խմբավորել են «Դարձնել», «Ընտրել», «Խաղալ» և «Խանութ» - ում, և հետո սավառնելն այս ընտրանքների վրա հանգեցնում է յուրաքանչյուրի տակ գտնվող գեղեցիկ ձևավորված ընտրանքների:

10. հրապարակային տարածք

Squarespace- ը հոստինգի և CMS պլատֆորմ է, որն օգնում է մարդկանց հարմարավետորեն բացել իրենց սեփական կայքերը: Վերնագրի համար կայքը օգտագործում է մեծ, առաջատար պատկերներ, բայց կայքում դրանք այնքան շատ բաժիններ ունեն, որ բոլորն ընդգրկելով բացվող նավարկության մեջ մթագնում են պատկերները և թվում է, որ դրանք խառնաշփոթ են:

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

ԲառերԱլեքս Բլեք

Ալեքսը գրում է PrintExpress.co.uk- ի համար: Ազատ ժամանակ նա սիրում է ուսումնասիրել վեբ և տպագրության ձևավորում և սովորում է ծածկագրել: Նրան կարող եք հետեւել @iamalexblack կայքում:

Դուր եկավ սա Կարդացեք սրանք:

• Ինչպես ստեղծել ծրագիր
• WordPress- ի փայլուն ձեռնարկի ընտրություն
• Ստեղծեք անթերի տրամադրության տախտակ այս օգտակար խորհուրդներով

Գտա՞ք մտածված ձևավորված, գեղեցիկ ձևավորված և էլեգանտ ընտրացանկի ընտրանքների օրինակներ, որոնք պետք է ներառվեն մեր հավաքածուի մեջ: Մենք կցանկանայինք լսել, թե ինչ եք գտել մեկնաբանություններում: