Հիմնական UI / UX նախագծման հայեցակարգի տարբերությունը Wireframe- ի և նախատիպի միջև

«Wireframe» - ի և «նախատիպի» պայմանները մշտապես շփոթում են դիզայներների հետ, չնայած փորձառու դիզայներին, հնարավոր է `թյուրիմացության կամ այլ պատճառներով: Փաստորեն, երկու տերմինի հայեցակարգը բավականին ակնհայտ է և տարբեր: Հիմա եկեք հստակ տարբերենք երկու տերմինները:

Ինչ է Wireframe- ը:

Wireframe- ը դիզայնի ցածր հավատարմություն է, որն ունի 3 պարզ, բայց ուղղակի թիրախ:

1. Ներկայացնում է հիմնական տեղեկատվական խումբը

2. Կազմեք կառուցվածքի և դասավորության ուրվագիծը

3. Օգտագործման միջերեսի տեսլականը և նկարագրությունը

Դա կլինի ձեր արտադրանքի հիմնական կառուցվածքը այն բանից հետո, երբ ճիշտ եք ստեղծել լարային շրջանակ: Justիշտ ինչպես շենքի նախագիծը, այն մանրամասն նկարագրում է հստակ և հատուկ:

Wireframe- ի տեսողական հատկություններ

Wireframe- ն առկա է շատ ակնհայտ տեսողական սահմանափակումներ: Ընդհանուր առմամբ, ավարտելու համար դիզայներներին անհրաժեշտ է օգտագործել միայն գծեր, տուփեր և մոխրագույն գույն (տարբեր գորշ սալը տարբեր մակարդակի մասին է):

Հասարակ վեկտորային գաղտնալսիչ

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

Լայնաշերտի առավելությունը

Wireframe- ի կառուցումը արագ և էժան է, մանավանդ, եթե դուք օգտագործում եք նախատիպացման այսպիսի գործիքներ, ինչպիսիք են UXPin, Mockplus, Balsamiq և Axure: Իհարկե, դուք պետք է օգտագործեք այս նախատիպավորման գործիքները `դա ամենասկզբում կատարելու համար:

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

Ինտերակտիվ մետաղալար

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

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

Wireույց տվեք գաղտնի ծածկագիրը զգուշորեն

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

Սա հավելվածների գործառույթի հոսքի գծապատկեր է, որը գծագրվել է Ֆերնանդո Գիլենի կողմից: Իհարկե, դա անկասկած դիզայնի վաղ տարբերակն է:

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

Ինչ է նախատիպը

Նախատիպի պահանջը ավելի բարձր է, քան wireframe / interactive wireframe- ը, այն պետք է լինի բարձր հավատարմության նախատիպ, որը ինտերակտիվ է և հնարավորինս տեղավորվում է վերջնական օգտվողի միջերեսին:

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

Նախատիպի տեսողական հատկություններ

Անկասկած, նախատիպը պետք է ներառի այն ապրանքի գեղագիտական հատկանիշները, որոնք պետք է ունենան, և փորձեն տեղավորել վերջնական տարբերակը: Ըստ էության, դա ապրանքի մաշկ է, որի մեջ չկա HTML / CSS / JS, և անհրաժեշտ չէ հաշվի առնել սերվերը և տվյալների բազան:

Նախատիպի առավելությունը

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

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

Դիզայնի հոսքը

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

Եթե դուք կարող եք արտադրանքի դիզայնի շարքը կոնկրետացնել համապարփակ և արդյունավետ աշխատանքի հոսքի մեջ, զարմանալի thins տեղի կունենան:

Հուշումներ

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

Լայնաշերտեր պատրաստելիս փորձեք հավաքել մտքեր և կարծիքներ ձեր թիմի և հաճախորդների կողմից և փորձեք դրանք արտացոլել wireframe- ի ձևավորման վրա:

Օգտագործեք ձեր առավել հարմար գործիքը:

UXPin

UXPin- ը ձեզ համար կառուցել է ավելի քան 900 տեսակի տարբեր UI տարրեր `մետաղալարեր և նախատիպեր ստեղծելու համար:

Proto.io- ն

Proto.io- ն նախատիպերի մշակման շատ ուժեղ գործիք է, և այն կարող է արտահանել HTML / CSS կոդ ՝ նախատիպի հիման վրա, իսկ սենսորային էկրանի համար ինտերակտիվ նախատիպ, որը թույլ է տալիս օգտվողներին փորձարկել իրական սարքերում:

Բալսամիկ

Պոպուլա, r երկարատև wireframe գործիք միայն ստատիկ մետաղալարերի համար:

Մոկուպս

Այս գործիքը աջակցում է ուղղակիորեն գաղտնալսումը ցանցին:

Ծաղր

Mockplus- ը `ներառյալ նախատիպավորման բոլոր ներառական գործիքն է` արագ փոխազդեցության, արագ ձևավորման և արագ նախադիտման համար: Այն թույլ է տալիս ստեղծել ծաղրադրություններ բջջային (Android և iOS), Desktop (PC & Mac) և վեբ ծրագրերի համար: Mockplus 3.0- ում այն ավելացրեց արդյունավետ թիմային համագործակցությունը:

Առանցք