Pro- ի ուղեցույցը UI նախագծման համար

Հեղինակ: Randy Alexander
Ստեղծման Ամսաթիվը: 25 Ապրիլ 2021
Թարմացման Ամսաթիվը: 16 Մայիս 2024
Anonim
Google Ձևաթղթերի ամբողջական ուղեցույց - առցանց հետազոտություն և տվյալների հավաքագրման գործիք:
Տեսանյութ: Google Ձևաթղթերի ամբողջական ուղեցույց - առցանց հետազոտություն և տվյալների հավաքագրման գործիք:

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

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

Երբ գիտաֆանտաստիկ ֆիլմեր էի նայում, նայում էի միջերեսներին: Եվ երբ ես խաղում էի տեսախաղեր, ես դիտում էի ընտրացանկերի ձևավորման եղանակը: Եթե ​​այս հատկություններից որևէ մեկը ձեզ ծանոթ է թվում, դուք, միգուցե, հոգու խորքում նույնպես լինեք UI դիզայներ:

Ես թողեցի իմ գործակալական աշխատանքը և ստեղծեցի իմ սեփական ընկերությունը: LinkedIn- ի իմ էջում ես փորձեցի ամփոփել իմ նոր կարիերայի նպատակը. Արդեն չորս տարի է, ինչ ես սկսել եմ աշխատել որպես ազատ գործարար, և իմ ճանապարհը չի դադարել: Այս օրերին ես օգնում եմ գործարկել մի փոքր UI դիզայնի ընկերություն, որը կոչվում է Մոնո, Վերջերս մենք ողջունեցինք մեր թիմի չորրորդ անդամին:


Այս հոդվածում ես ուզում եմ նկարագրել, թե ինչպիսին է UI դիզայներ լինելը, ներառյալ, թե կոնկրետ ինչ է պահանջում աշխատանքը, որտեղ գտնել ուսման լավագույն ռեսուրսները և ինչպես կատարելագործվել ձեր արհեստի մեջ:

Ի՞նչ է անում UI դիզայները:

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

Հաճախորդի հետ շփում

Հաճախորդի հետ կապը ամբողջությամբ վերաբերում է հաճախորդի խնդիրը հասկանալուն: Նպատակը `հասկանալ ձեր հաճախորդի բիզնեսը, այնպես որ ծրագրի սկիզբը սովորաբար շատ խոսակցություններ է: Հաճելի է, երբ սկսում եք չափազանց շատ բան չգիտեք ձեր հաճախորդի տիրույթի մասին. Դուք կարող եք թարմ կերպով նայել նրանց բիզնեսին, մինչ նախատեսում եք նախագծային հնարավոր լուծումներ:


Որպեսզի լինեք UI- ի լավ դիզայներ, դուք պետք է ի վերջո կարողանաք մտածել ձեր հաճախորդի բիզնեսի հետ միասին: Օրինակ, ձեր հաճախորդը կարող է լինել ավիացիայի ոլորտում: Նրանց համար աշխատելը, ի վերջո, ձեզ բավականին լավատեղյակ կդարձնի այդ արդյունաբերության մասին: Այսպիսով, ձեր սեփական երջանկության խորհուրդն այստեղ այն ճյուղերն են, որոնց համար աշխատում եք իմաստուն կերպով, որպեսզի չհայտնվեք, որ փորձագետ լինեք մի բանի համար, որը ձեզ չի հետաքրքրում կամ հետաքրքրություն չունի:

Aրագրի ընթացքում հաղորդակցությունը չի դադարում: Որպես դիզայներ ՝ դուք անընդհատ ներկայացնելու եք ձեր աշխատանքը: Մեր ընկերությունում մենք հեռավոր թիմ ենք, ուստի շատ անձամբ հանդիպումներ չենք ունենում: Փոխարենը, մենք մեծապես օգտագործում ենք էկրանի համօգտագործումը վիդեոկոնֆերանսի միջոցով: Skype- ի և Slack- ի նման հաղորդակցման գործիքներ օգտագործվում են ամեն օր:

Օգտակար է համատեղել սինքրոն և ասինխրոն կապի մեթոդները: Aանգը հիանալի է, եթե արագորեն շատ տեղեկատվության կարիք ունեք, բայց պետք է միաժամանակ լինեք: Մենք կարծում ենք, որ Slack- ը մեր «վիրտուալ ջրային հովացուցիչն է» և օգտագործում ենք Basecamp- ը `բարդ նախագծային նախագծեր կառավարելու համար: Երբ մենք նախատիպեր ենք նախագծում ՝ օգտագործելով HTML և CSS, մենք օգտագործում ենք GitHub Issues ՝ ուղղակիորեն քննարկելու կոդը:


Հետազոտություն

Ինչպես հաճախորդների հետ շփումը, այնպես էլ շատ ուսումնասիրություններ կանեք: Սա կարող է ներառել դաշտային ուսումնասիրություններ, հաճախորդի հետ սեմինարներ, մրցույթի վերլուծություն կամ ռազմավարության սահմանում. Էապես, ամեն ինչի մասին, ինչը կօգնի ձեզ հասկանալ առկա խնդիրը:

Հետազոտությունն այն է, ինչը տեղեկացնում է ձեր դիզայնի ընտրության մասին: Դա մի ժամանակ կարդացել եք հոդված, կամ այդ նոր բան, որը Apple- ը նոր է թողարկել: Երբ ժամանակն է բացատրել, թե ինչու եք որոշակի դիզայն ընտրել, ձեր հետազոտությունը ձեզ աջակցում է:

Հետազոտությունները կարող են շատ լայն լինել: Ես հաճախ նոր սարքեր եմ ստուգում հետազոտական ​​նպատակներով կամ գրանցվում եմ նոր վեբ հավելվածում ՝ դրա ինտերֆեյսը ուսումնասիրելու համար:

Դիզայն և նախատիպավորում

Որպես դիզայներ, դուք հավանաբար ձեր ժամանակի մեծ մասը կանցկացնեք դիզայնի և նախատիպային աշխատանքների վրա: UI նախագծման նախագիծը կարող է առաջ շարժվել ցանկացած քանակի ձևերով ՝ ուրվագծերից, մանրամասն ձևավորումից, ծածկագրում:

Ձեր կողմից օգտագործվող մեթոդը մեծապես կախված է նախագծի տեսակից: Ի՞նչ եք նախագծում: Դա վեբ կայք է, կամ նախընտրում եք այն անվանել ծրագիր: Այն օգտագործում է հայրենի տեխնոլոգիա: Դա վերափոխո՞ւմ է, թե՞ զրոյից եք սկսում:

Մեր ընկերությունում ֆիքսված գործընթաց չկա, բայց նախագծերի մեծ մասը հետևում է նույն կոպիտ կարգին. Դրանք սկսվում են ուրվագծերից և մետաղալարերից, անցնում են մանրամասն տեսողական և փոխազդեցության ձևավորմանը և ավարտվում նախատիպով:

Որպես դիզայներներ, մենք շատ ժամանակ ենք ծախսում `մտածելով մեր գործիքների մասին: Չնայած հոյակապ գործիքները կարևոր են, դրանք ամենակարևորը չեն: Adobe Creative Suite- ի և Sketch- ի նման հավելվածների գրագետ օգտագործման ունակ լինելը համարժեք է մատիտ նկարելու կամ նկարելու համար վրձին օգտագործելու կարողությանը: Դուք դեռ պետք է նկարը պատրաստեք:

Ասել է թե ՝ գործիքների հանդեպ առողջ հետաքրքրությունը լավ բան է: Ես սիրում եմ փորձել նոր գործիքներ, որոնք կարող են օգնել ինձ ավելի արդյունավետ լինել: Վեկտորների խմբագրման իմ սիրած գործիքը Illustrator- ն է, բայց իմ տեսողական ձևավորման աշխատանքների մեծ մասն այս օրերին կատարվում է Sketch- ում: Թիմի մյուս անդամները անցել են ավելի նոր գործիքների, ինչպիսիք են Affinity Designer- ը:

Գործիքները շատ անձնական ընտրություն են: Քանի դեռ մենք կարող ենք հեշտությամբ աշխատել միասին, յուրաքանչյուր մարդ ազատ է ընտրել իր սեփականը: Որպեսզի ավելի հեշտ լինի հաճախորդների հետ խոսել մեր նմուշների մասին, մենք նախատիպեր ենք պատրաստում InVision– ի միջոցով: Սակայն ավելի առաջադեմ նախատիպավորման համար մենք օգտագործում ենք HTML և CSS: Ձեզ անհրաժեշտ գործիքը կախված է այն գործից, որը ցանկանում եք կատարել դրա հետ:

Մշակողի հաղորդակցություն

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

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

Ավանդական մոտեցումն է ՝ էկրանի դիզայնի կողքին ակտիվներ հասցնելը: Էկրանի ձևավորումները կարող են օգտագործվել ՝ տեսնելու համար, թե ինչպիսին կլինի դիզայնը ընդհանուր առմամբ, մինչդեռ ակտիվները պատրաստ են օգտագործման PNG և SVG պատկերակների, այնպես որ մշակողները ստիպված չեն գործ ունենալ գրաֆիկական խմբագրիչի հետ:

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

Վեբ և հարազատ հավելվածներ

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

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

Համացանցի համար UI- ի մի քանի ուղեցույց կա: Կարելի է պնդել, որ համացանցը տարբեր ոճերի հալման կաթսա է: Եթե ​​դուք պատրաստում եք մի բան, որն ավելի շատ նման է հավելվածի, քան կայքի, պետք է իմանաք լայնորեն օգտագործված շրջանակների մասին, ինչպիսիք են Bootstrap- ը և ZURB Foundation- ը: Շրջանակը սկսում է պարզել, թե ինչպես պետք է լինեն իրերը, քանի որ դուք չեք ցանկանում անիվը նորից հորինել: Եվ դա, հավանաբար, լավ բան է:

Մեր ընկերությունում մենք սիրում ենք օգտագործել Bootstrap: Այն ապահովում է խելամիտ լռելյայն չափսեր UI ընդհանուր տարրերի համար, ինչպիսիք են կոճակները, տվյալների աղյուսակները և մոդալները:

Վեբ ձևավորման մեջ դուք ավելի շատ կաշկանդված եք ոստայնի տեխնիկական կարողություններով: Նախկինում այն ​​էր, որ դժվար կլիներ պարզ տեսողական ծաղկեփնջեր իրականացնել, ինչպիսին կլորացված անկյուններն էին կայքում: Այս օրերը վաղուց անցել են. Դուք այժմ ազատ եք նկարելու օգտվողի միջերեսները ՝ շատ ստվերներով, անցումներով, անիմացիաներով և նույնիսկ 3D- ով:

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

Վեբ սահմանափակումներ

Շուտով դուք կիմանաք, որ ձեր սովորած բոլոր հիանալի հնարքները չեն աջակցվում յուրաքանչյուր զննարկչում, և սա է ոստայնի համար դիզայնի իրականությունը: Լավ է հետևել հայտնի սկզբունքներին, ինչպիսիք են պրոգրեսիվ ընդլայնումը, որտեղ հնարավորության դեպքում բեռնում ես ուժեղացված բովանդակություն, բայց նաև մտածում, թե ինչպես է բովանդակությունը դեգրադացվում:

Վերջերս հայտնի է դարձել «մանանեխ կտրելը»: BBC- ի վեբ թիմի կողմից չեմպիոն դառնալը `սա ներառում է տարբերակել« լավ »և« վատ »դիտարկիչներից և սահմանափակ փորձ տրամադրել« վատ »դիտարկիչներին: Այնուամենայնիվ, այն իսկապես աշխատում է միայն բովանդակության կայքերի համար:

Երբ խոսքը վերաբերում է հավելվածի նման փորձերին, շատերը զարգացումը դյուրին դարձնելու համար սահմանափակում են աջակցությունը միայն մի քանի առաջատար զննարկիչներին: Lyավոք, սա մեզ հետ է բերում 1996-ի իրավիճակը, երբ բովանդակությունը դիտելու համար անհրաժեշտ է որոշակի զննարկիչ:

Ձեր հմտությունների կատարելագործում

Այսպիսով, ինչպե՞ս եք տեղեկանում արագ զարգացող վեբ արդյունաբերության հետ և բարելավում ձեր հմտությունների քանակը: Եկեք նայենք ձեր հմտությունները խթանելու մի քանի տարբեր մեթոդների ...

Պլատֆորմային գիտելիքներ

Դիզայների զինանոցի հիմնական մասը պլատֆորմային գիտելիքներն են: Դուք պետք է իմանաք տարբեր գործառնական համակարգերի և այն մասին, թե ինչպես են մարդիկ դրանք օգտագործում: Որպես դիզայներներ, մենք հակված ենք Mac- ների օգտագործմանը, բայց հետո հեշտ է մոռանալ, որ այնտեղի մարդկանց մեծամասնությունն օգտագործում է Windows արկղեր ՝ իրենց աշխատանքն ավարտին հասցնելու համար:

Գում եմ, որ ինչ-որ բան իսկապես կարող ես հասկանալ, եթե այն ինքդ օգտագործես: Նախագծելու համար նախընտրում եմ օգտագործել իմ Mac- ը, բայց շատ ժամանակ եմ ծախսում ՝ զանազան այլ հարթակների էվոլյուցիայի վրա հասնելու համար: Ես ունեմ Windows- ի մի քանի օրինակ, որոնք տեղադրված են իմ Mac- ի վրա `որպես վիրտուալ մեքենաներ: Ես զբաղված եմ եղել Windows 10-ի նոր կառուցվածքների փորձարկմամբ `օգտագործելով Microsoft’s Insider ծրագիրը` UI- ի տարբեր փոփոխությունները ստուգելու համար:

Ես նաև պարբերաբար գնում եմ նոր սարքավորումներ `ստուգելու, թե ինչպես է դա գործում: Ես գնել եմ Apple Watch պարզապես պլատֆորմը փորձարկելու համար: Դրանից հետո ես վաճառեցի այն, քանի որ զգում էի, որ դա այդքան շատ բան չի ավելացնում իմ կյանքում:

Դրանից բացի, ոստայնը կարող է դիտվել որպես սեփական գործառնական համակարգ: Այն անընդհատ զարգանում է, ամեն շաբաթ զննարկչի յուրաքանչյուր վաճառողին ավելանում են նոր գործառույթներ: Չափազանց արժանի է իմանալ զննարկիչների տեխնիկական ասպեկտների մասին, հատկապես CSS- ի և գրաֆիկական հնարավորությունների վերաբերյալ: Դուք պետք է իմանաք, թե ինչ են SVG- ն ու WebGL- ը, և ինչպես կարող եք օգտագործել Web Animations API- ն:

Յուրաքանչյուր պլատֆորմ ժամանակի ընթացքում զարգանում է, և որպես օգտագործողի ինտերֆեյսի դիզայներ `ձեր խնդիրն է` մշտապես տեղյակ լինել: Ի վերջո, այն ամենը, ինչ դուք նախագծում եք, մեկուսացված չի ապրում, բայց ավելի մեծ ծրագրային էկոհամակարգի մի մասն է:

Վերադարձեք հիմունքներին

Այն, ինչի հետ մենք այսօր պայքարում ենք, այնքան էլ տարբեր չէ այն բանից, ինչի հետ պայքարում էինք 20 տարի առաջ: Գրքերում կան մի շարք լավ խորհուրդներ: Սկսնակների համար փորձեք ensiveեյսոն Ֆրիդի և Մեթյու Լինդերմանի պաշտպանական ձևավորումը համացանցի համար, և Սթիվ Քրուգը `Մի ստիպիր ինձ մտածել:

Եթե ​​չգիտեք այնպիսի հասկացությունների մասին, ինչպիսիք են մոդելությունն ու մատչելիությունը, ապա պետք է կարդաք: Դուք պետք է կարողանաք բացատրել, թե ինչ է Fitts- ի օրենքը: Գեստալտի մոտակա՞ն օրենքը: Սա UI դիզայնի հացն ու կարագն է:

Ոգեշնչվեք խաղերից և ֆիլմերից

Որպես UI դիզայներ ՝ ես ոգեշնչման այլ աղբյուրների եմ դիմում ՝ իմ աշխատանքը կատարելու համար: Ես շատ ոգեշնչում եմ գտնում խաղերում: Որոշ խաղեր շատ բարդ են, և UI դիզայներները ստիպված են եղել լուծել նույն բարդ ինտերֆեյսի խնդիրները, ինչ UI դիզայները աշխատում է բիզնեսի նախագծերի վրա:

Խաղերը կարող են նաև նշանակել միտումները: Colin McRae Rally- ի ընտրացանկում հայտնաբերված մինիմալիզմը հիշեցնում է iOS7- ի ուղղությունը: Ինչ-որ իմաստով, UI անիմացիայի դիզայնը, որն այժմ գերժամանակակից է, հայտնվում էր խաղերում տարիներ ու տարիներ առաջ: Սքեուոմորֆիզմից անցումը դեպի մերկ, ֆունկցիոնալ միջերեսներ և «հարթ դիզայն» ակնհայտ է նաև խաղերում: Համեմատեք 2006-ի մոռացումը 2011-ի Skyrim- ի հետ: Երկու խաղերն էլ նույն շարքի RPG են, բայց տարբերությունը ցնցող է:

Marvel- ի ֆիլմերում ֆուտուրիստական ​​միջերեսները, ինչպիսիք են Iron Man- ը, նույնպես ոգեշնչում են ինձ համար: Դրանք ճշգրիտ օգտագործելի օրինակներ չեն, բայց ինձ ստիպում են ավելի շատ մտածել ընդհանուր առմամբ համակարգչի մասին: Մենք ուզում ենք էկրանների ապագա՞, թե՞ էկրաններն անհետանան: Սա, հավանաբար, լավ հարց է `դիզայներներով լի պանդոկում տեղադրելու համար:

Դուք աճում եք որպես դիզայներ քրտնաջան աշխատանքի, համառության, ձեր հասակակիցների հետ խոսելու և ահավոր շատ բան կարդալու միջոցով: Մոտ մեկ տարի առաջ New York Times- ում կարդացի մի կտոր այն մարդկանց մասին, ովքեր արդեն 80 տարեկան են, և շարունակում են կատարելագործել իրենց արհեստը: Ես զգում եմ, որ միայն սկսում եմ: Իսկ դու?

Հետաքրքիր Հրատարակություններ
Գրաֆիկական դիզայներները փչացնու՞մ են ոստայնը:
Կարդալ Ավելին

Գրաֆիկական դիզայներները փչացնու՞մ են ոստայնը:

Սադրիչ վերնագրով հոդվածում Գրաֆիկական դիզայներները ոչնչացնում են ոստայնը, Nոն Նաթթոնը պնդում է, որ դիզայներները հիմնականում մեղավոր են կայքերի ավելի ուռճացման մեջ: Համացանցի առաջին օրերին նա ասաց, որ ...
Լավագույն շարժական տպիչները 2021 թ
Կարդալ Ավելին

Լավագույն շարժական տպիչները 2021 թ

Լավագույն շարժական տպիչները կարող են փրկել կյանքը, երբ տեղափոխման ընթացքում անհրաժեշտ է տպել փաստաթղթեր, լուսանկարներ կամ արվեստի գործեր: Գրասենյակային տպիչից փոքր, լավ դյուրակիր տպիչը պետք է լինի այն...
Dunny- ի 15 զարմանահրաշ դիզայն լավագույն նկարիչներից
Կարդալ Ավելին

Dunny- ի 15 զարմանահրաշ դիզայն լավագույն նկարիչներից

Նապաստակը վինիլային խաղալիք է, որը հիմնված է նապաստակի նման բնույթի վրա ՝ հարթ դեմքով, երկար ականջներով և կարճ ձեռքերով և ոտքերով: Որպես դատարկ կտավ օգտագործվող այս խաղալիքները դարձել են ավելի մեծ ժող...