Prvi koraci: Facebook Messenger Design Kit za skicu

Želite li dizajnirati svoj vlastiti Facebook Messenger dodatak ili chatbot? Facebook je objavio svoj prvi komplet dizajna platforme usmjeren prema tome da programerima pruži kompletan set sredstava za Messenger u travnju 2017. Ovo je najopsežniji dizajnerski komplet za platformu i pomoći će vam da vašim dizajnom postigne realni osjećaj. Preuzmite ga sada ovdje.

Danas ću vam pokazati kako mijenjati projekte pomoću SketchApp-a i dizajnerskog kompleta za Facebook messenger. Dizajn igra jednu od najvažnijih uloga u razvoju proizvoda kao što je Facebook Messenger. Vizualno privlačni fontovi, boje i simboli koriste se za privlačenje korisnika i pozivanje na njih da se uključe u ne-ljudske botove i entitete. Skočimo pravo u udžbenik i započnite s dizajniranjem.

Pregled

Za početak trebate preuzeti aplikaciju Sketch koju možete pronaći ovdje.

Otvorite aplikaciju Sketch, a zatim s popisa opcija odaberite Messenger Design Platform Kit. Ovo bi vas trebalo dovesti do zaslona dobrodošlice koji pruža kratak pregled imovine koja se nalazi u kompletu.

Otkrićete da je kit podijeljen u četiri različita dijela jezgre. Svaki odjeljak pruža različit temeljni dio glasničkog dizajna. Djeluju zajedno kako bi pružili kohezivno iskustvo, zato je važno da shvatite što svaki od njih radi kako biste ih mogli učinkovito povezati.

Dotaknut ću se sljedeće četiri kategorije i pružiti nekoliko najboljih praksi koje ćete uzeti u obzir prilikom izmjene svake opcije.

-Konverzija i proširenja -Bugovi -popisi -tipovi

Proširenja

Odjeljak za razgovore i proširenja dizajnerskog kompleta korisniku omogućuje stvaranje okvira za doživljaj dizajna glasnika. Korisnici mogu odabrati između četiri različita spremnika za proširenja koji će sadržavati odabrano proširenje.

Razmišljajte o proširenjima kao malim dodacima postojećem Facebook messenger proizvodu. Proširenja su način da pregledate web mjesto ili dodate mogućnost koja inače ne bi postojala vašem messengeru. Važni su u Messenger dizajnu jer daju zaseban identitet proizvodu koji koristi međusobnu platformu.

Postoje dva različita produžna spremnika od kojih svaki pruža drugačiji pogled.

Root View - pruža korijenski prikaz proširenja i prikazuje ikonu proširenja na lijevoj strani.

Subview - U subviewu tipka za povratak zamijenit će ikonu proširenja.

Obje su opcije dostupne za iOS i Android.

Odabir korijenskog pogleda i podgleda je dobro polazište prilikom rada na dizajniranju proširenja za Facebook.

Boc Niti

Možda biste željeli stvoriti vlastiti Facebook chatbot umjesto nastavka. Komplet za dizajn glasnika također uključuje mnoštvo različitih pogleda posvećenih isključivo chatbotovima.

Ti će pogledi djelovati slično kao i proširenja u pružanju osnovnog okvira za vaš chatbot razgovor.

Poručni mjehurići

Mjehurići poruka sljedeći su korak za stvaranje vlastitog dizajna glasnika. Zamislite mjehuriće poruka kao sastavne blokove sa svakim dodavanjem ključnog utjecaja razgovoru.

Napravimo nekoliko koraka unatrag i razmislimo o normalnom razgovoru putem teksta. Ako koristite iOS uređaj, vjerojatno znate ta pravila dizajna.

Zeleni mjehurići chata = Poruka poslana primatelju koji nije iOS uređaj

Plavi mjehurići chata = Poruka poslana primatelju iOS uređaja

Svijetlo sivi mjehurići = Poruke koje primamo ili s iOS-a ili Android-a.

Slična pravila vrijede i kod dizajniranja razgovora optimiziranog za Facebook messenger. Jedina mala razlika je što u ovom slučaju nema zelenih mjehurića za razgovor. Dubinsko istraživanje dizajnerskog kompleta pružit će vam priliku za razmjenu glazbe, restorana i još više putem chat balona.

tipke

Gumbi igraju vrlo važnu ulogu u izradi vašeg dizajna glasnika. Odabir pogrešnih gumba može zbuniti korisnike i dovesti ih do pogrešnih pretpostavki da su pritisnuli gumb na koji nisu.

Najbolje korisničko iskustvo stvara jasan put kroz razgovor do željene akcije ili događaja. Vaš dizajn glasnika trebao bi najbolje koristiti gumbe i održavati organizirani pristup.

Općenito slijede pravila

Svijetlo plava = zadano (neispisano)

Tamno plava = pritisnuta

Siva = Onemogućeno / Opcija je već odabrana

arena

Odmah izvucite svoj mobilni telefon i otvorite aplikaciju za kontakte koja je izvorno za vaš uređaj. Što primjećujete na popisu? Neki će vidjeti fotografije prikazane pored svakog kontakta, dok će druge imati samo tekst. Imena će biti podebljana i kategorizirana prema njihovom odnosu prema vama, vlasniku uređaja. Važno je moći razlikovati ljude ili stavke unutar popisa u svom dizajnu glasnika.

Dizajn kit sadrži pojedinačne ćelije tablice kao i neke dovršene popise koji vam mogu pomoći da stignete na odredište jednostavnim uređivanjem teksta rezerviranog mjesta.

Stilovi

I na kraju, stil igra vrlo važnu ulogu u kreiranju vašeg dizajna glasnika. Želite stvoriti nešto što će lijepo teći i relativno lako biti vidljivo. Dizajn kit sadrži popis standardnih fontova, veličina i boja s kojima radite prilikom vlastitog uređivanja. Ona služi kao referentna točka kako bi se osiguralo da vaše proširenje ili chatbot bude u skladu s brendiranjem Facebookova Messengera.

Evo nekoliko važnih boja, fontova i veličine teksta koji će vam pomoći u održavanju robne marke glasnika u vašem dizajnu.

Izrada videozapisa vašeg dizajna s Botsociety

Nakon što ste uspješno dovršili svoj dizajn Facebook messengera koristeći pribor za dizajn platforme, možda ćete otkriti da svoj dizajn želite testirati sami. Botsociety pruža način stvaranja interaktivnog prototipa koji simulira stvarni razgovor s korisnikom i korisnikom. Tada možete podijeliti videozapis koji će simulirati razgovor između korisnika i robota koji ste upravo dizajnirali.

Za početak, idite na Botsociety i napravite novi model. Ako želite pokazati svoje proširenje za glasnik, najbolje je odabrati gornju opciju za proširenje glasnika.

Postavite svoje razgovorno iskustvo tako da provjerite jesu li ljudi koji sudjeluju u razgovoru pravilno označeni. Nastavite tako da započnete izrađivati ​​svoj model dok se maketa ne podudara sa iskustvom koje želite proizvesti.

Kad završite. Gledajte svoj make-up u akciji odabirom zelenog gumba za reprodukciju koji se nalazi u gornjem desnom kutu. Tako ćete stvoriti podijelivi videozapis cjelokupne interakcije korisnika s vašim chatbotom ili Facebookovim modelom proširenja. Da biste saznali kako izraditi vlastiti prototip chatbota, pogledajte ovaj korisni vodič.

To je sve za sada. Obavezno budite praćeni za korisnije vodiče i nove ideje koje će vam pomoći da vaš dizajn glasnika pređete na novu razinu. Slobodno nam postavite bilo kakva pitanja koja imate u komentarima ispod i sretan dizajn!

Izvorno objavljeno na blogu Botsociety.