Շարժական շարժական նախատիպավորման գործնական ուղեցույց

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

• Մարտավարական նախատիպավորում
• Ուրվագիծ
• Բջջային կաղապարներ
• Ուրվագծեր և անխնա խմբագրում
• Փոքր էկրանին տվյալների արտապատկերում
• Թղթի նախատիպավորում
• Թղթի նախատիպավորման հիմունքներ
• Թղթի նախատիպավորում և սենսորային էկրաններ
• Ինտերակտիվ սարքի նախատիպավորում
• Էկրանի շարժական նախատիպը
• Բջջային զննարկչի նախատիպ
• Շարժական նախատիպ `ներկայացման ծրագրակազմի օգտագործմամբ
• Հարթակին հատուկ նախատիպ
• Սարքի նախատիպավորման սովորական գործիքների դրական և բացասական կողմերը
• Էկրանի նախատիպի հիմունքները

Սա խմբագրված հատված է 6-րդ գլխից Բջջային սահման. Բջջային փորձի ձևավորման ուղեցույց, հրատարակվել է Rosenfeld Media- ի կողմից:

Անկախ «ինչու» -ի ձեր հատուկ նախատիպի համար, ձեր բջջային UX նախագծի համար նախատիպի ճիշտ մեթոդ ընտրելը շատ նման է լավ գիրք ընտրելուն: Կան անթիվ ընտրանքներ ընտրելու համար, ուստի ինչպե՞ս եք ճիշտ ընտրել: Ինքներդ ձեզ հարցնելը. «Ինչպիսի՞ գրքի տրամադրություն ունեմ», նախատիպավորման ճիշտ մեթոդը պարզելու առաջին քայլը ենթադրում է հարցնել. «Ո՞ր տեսակի դիզայնի ուսումնասիրությունն եմ սկսելու»: Ի տարբերություն ճիշտ ընտրելու ընթերցանության նյութեր գրքերի անհամար ժանրերից, նախատիպերի շարժական մեթոդները սովորաբար ընկնում են երկու հիմնական ժանրերի ՝ «մարտավարական» (որին կանդրադառնանք ստորև նշված հատվածում) և «փորձառական» նախատիպավորում:

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

Մարտավարական նախատիպավորում

Երեք տակտիկական նախատիպավորման մեթոդները, որոնց ես անընդհատ դիմում եմ և, որոնք ապացուցել են, որ ամենաարժեքավորն են, հետևյալն են.

• Ուրվագիծ
• Թղթի նախատիպավորում
• Ինտերակտիվ ներ-սարքի նախատիպավորում

Ուրվագիծ

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

Բջջային կաղապարներ

Չե՞ք կարողանում նկարել: Խնդիր չկա. Բջջային ծրագրակազմի հարթակներից շատերն ունեն տրաֆարետներ, որոնք կարելի է ձեռք բերել առցանց: Այս տրաֆարետները փրկարար են, եթե դուք ինքնագիտակցված եք ուրվագծելու ձեր ունակությունների մասին: Համեմատաբար ցածր ֆինանսական ներդրումների համար դրանք օգտակար են յուրաքանչյուրի համար, ով ցանկանում է արագ շարժական գաղափարները թղթին հանձնել:

Ուրվագծեր և անխնա խմբագրում

Ձեր գաղափարները շուտ ուրվագծելը և հաճախ դա կարևոր քայլ է ինտուիտիվ ինտերֆեյս ստեղծելու համար, որոնք «խոսում են իրենց ուժը»: Mediumանկացած միջավայրի համար ինտուիտիվ ինտերֆեյսը վաղուց արդեն հանդիսանում է օգտագործողի լավ փորձի բնութագիրը: Այնուամենայնիվ, բջջային դիզայնի բնորոշ ճանաչողական սահմանափակումները էլ ավելի կարևորում են ինտուիտիվ ինտերֆեյսերի ստեղծումը: Հիանալի շարժական միջերեսները նման են լուսային անջատիչի կամ զամբյուղի: Նրանք խոսում են իրենց ուժի մասին:

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

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

Փոքր էկրանին տվյալների արտապատկերում

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

Թղթի նախատիպավորում

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

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

Թղթի նախատիպավորման հիմունքներ

Թղթի նախատիպերը հիանալի միջոց են ձեր նախագծման գաղափարների մշակման հիանալի միջոց ձեր նախագծման գործընթացում: Ստորև նկարագրված քայլերը կօգնեն ձեզ հեշտությամբ ստեղծել թղթի նախատիպեր:

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

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

3. Որոշեք էկրանի հոսքը / հաջորդականությունը. Պատկերացրեք էկրանի անհատական ​​դասավորությունները և այդ էկրանների հոսքը: Դա նույնականացնելու գործընթացն է, թե ինչն է ուր գնում և ինչ կտեսնեն օգտվողները, երբ նրանք նայում են ձեր ստեղծած համակարգով: Այս գործընթացը կօգնի ձեզ բացահայտել առաջնային և երկրորդային նավիգացիոն տարրերը և ինչպես առավել արդյունավետ կերպով քարտեզագրել հիմնական փոխազդեցությունների հիմքում ընկած համակարգը:

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

5. Վերցրեք ձեր նախատիպը փորձարկման համար. Երբ ստեղծեք բոլոր տարրերը, վերցրեք ձեր նախատիպը փորձարկման համար գործընկերների կամ ընկերների հետ: Բացահայտեք, թե ինչն է գործում, և ինչը հետագա ճշգրտման կամ փոփոխությունների կարիք ունի:

Թղթի նախատիպավորում և սենսորային էկրաններ

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

Ինտերակտիվ սարքի նախատիպավորում

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

• Էկրանի շարժական նախատիպը
• Բջջային զննարկչի նախատիպ
• Շարժական նախատիպ `ներկայացման ծրագրակազմի օգտագործմամբ
• Հարթակի հատուկ նախատիպը

Էկրանի շարժական նախատիպը

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

Բջջային զննարկչի նախատիպ

Browserննարկչի նախատիպը պարզապես նախատիպ է, որը տրամադրվում է ձեր բջջային սարքի զննարկչի միջոցով, որն օգտագործում է HTML և զննարկչի վրա հիմնված այլ ծրագրեր, ինչպիսիք են JavaScript- ը: Էկրանները կարող են ստեղծվել HTML- ի միջոցով, ինչը, հնարավոր է, հիանալի տարբերակ է, հատկապես, եթե դուք բջջային կայք եք կառուցում և տիրապետում եք HTML- ի: Այնուամենայնիվ, նրանց համար, ովքեր քիչ են ծանոթ ընդարձակ նշագրմանը, Դուք կարող եք հեշտությամբ վերբեռնել էկրանի դասավորության մի շարք կապված պատկերային քարտեզներ և դրանք դիտել ձեր հեռախոսի զննարկչի միջոցով:

Շարժական նախատիպ `ներկայացման ծրագրակազմի օգտագործմամբ

Նախատիպերի ստեղծումը `ներկայացման ծրագրակազմի միջոցով, ինչպիսիք են Apple Keynote- ը կամ Microsoft PowerPoint- ը, բջջային սարքի վրա ինտերակտիվության և անցումների նախատիպի արդյունավետ միջոց է: Կարող եք հեշտությամբ ներբեռնել պլատֆորմի բաղադրիչները ցանցից, կառուցել ձեր նախատիպը ՝ շնորհանդեսային ծրագրակազմի միջոցով, ճշգրտելով ծրագրում ներառված փոխազդեցություններն ու անցումները, և ֆայլը ներբեռնել ձեր շարժական սարքում:

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

Keynotopia- ն առասպելական ռեսուրս է Keynote նախատիպերի համար: Կայքի ստեղծող Ամիր Խելլան հավաքել է ձևանմուշների իսկապես օգտակար հավաքածու, որոնք պարունակում են ստանդարտ կառավարման և վիջեթների համապարփակ հավաքածու: Պարզապես քաշեք այս տեսողական տարրերը տեղում ՝ կառուցելու համար այն մակարտակները, որոնք կգործարկվեն շարժական սարքի վրա: Travis Isaacs- ը նաև ստեղծել է հիանալի առցանց ռեսուրս `Keynote- ի նման ներկայացման ծրագրակազմով նախատիպեր ստեղծելու համար: Նրա կայքը ՝ Keynote Kungfu, մեծ ռեսուրսներ է պարունակում սարքում նախատիպեր ստեղծելու համար:

Հարթակին հատուկ նախատիպ

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

Սարքի նախատիպավորման սովորական գործիքների դրական և բացասական կողմերը

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

Էկրանի նախատիպի հիմունքները

Ես գծագրող եմ, ոչ թե կոդավորող, այնպես որ էկրանին նախատիպավորումը սարքում նախատիպավորման իմ սիրած մեթոդն է: Չնայած այն հիանալի չէ էկրանների միջեւ մանրակրկիտ փոխազդեցություն և անցումներ արտահայտելու համար, դա սարքի վրա ձեր աշխատանքը արագ գործադրելու հեշտ միջոց է: Ահա այն հիմունքները, ինչպես նկարագրված է Դիեգո Պուլիդոյի կողմից UX Magazine- ի կողմից հրապարակված իր հոդվածում.

1. Էսքիզների էկրանի դասավորություններ.

2. Scanննել կամ լուսանկարել ուրվագծերը.

3. Ֆայլերի չափագրման ցանկացած անհրաժեշտ ճշգրտում կատարեք.

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

5. Ներմուծեք ֆայլերը շարժական սարքի լուսանկարների պատկերասրահում.

6. Կտտացրեք և սահեցրեք հեռու ՝

Սա խմբագրված հատված է 6-րդ գլխից Բջջային սահման. Բջջային փորձի ձևավորման ուղեցույց, հրատարակվել է Rosenfeld Media- ի կողմից: Խնդրում ենք օգտագործել NETMAG12 զեղչի ծածկագիրը, որը հարմար է Rosenfeld Media- ից գնված բոլոր ապրանքների 20% զեղչի համար