Jak przygotować własną bibliotekę UI do szybkiego prototypowania?
Poziom trudności: Łatwy (1/6)
Platforma: MAC/PC
Cześć!
Dziś chciałabym Wam pokazać, w jaki sposób stworzyć i edytować podstawowe elementy biblioteki UI na potrzeby modelu szkieletowego ekranu logowania, a w konsekwencji przyszłej aplikacji w AdobeXD. Zapraszam!
Na potrzeby tego tutorialu postanowiłam wybrać makietę dla iPad 12 i przygotować tutorial na przykładzie widoku logowania aplikacji na ekranie tabletu.
Zawsze rozpoczynam pracę od zapisania pracy pod nową nazwą jako lokalny dokument na komputerze lub jako Cloud Documents na serwerze chmury Adobe. Taka praktyka pomaga mi w przyszłości z łatwością odnaleźć projekty, które są dla mnie ważne w danym momencie.
Poza odtwarzaniem formatu (iPad) modelu szkieletowego przyszłej aplikacji, dodaję okno, w którym umieszczę szkieletowe elementy biblioteki UI. Dzięki nim z łatwością będę mogła przenosić kolejne kompozycje na prototyp ekranu logowania. Po lewej stronie interfejsu Adobe XD znajduje się panel do nawigowania. W pionowym panelu wybieram przedostatnią ikonę, reprezentującą Artboard (A). W ten sposób po prawej stronie interfejsu Adobe XD otworzyłam wybór dodatkowego formatu dla utworzenia tablicy, na której będę umieszczać kolejne elementy biblioteki. Po dodaniu któregokolwiek formatu mogę edytować jego wielkość i zmienić nazwę, na przykład na „Wireframe”. To będzie kojarzyć się bezpośrednio z tym projektem.
Tym razem w kolumnie pionowej zaznaczam ikonę litery T, pod którą kryje się Text (T), i na tablicy tworzę pierwszą kategorię – „Fonts Style”. Następnie po prawej stronie interfejsu dobieram interesujący mnie font, w tym przypadku Segoe UI, który wykorzystam w przyszłości w makiecie. Nadaje jej rozmiar i charakter. Na tablicy opisuję ją według jej właściwości. W kolejnym kroku dodałam ten sam tekst, ale nadaje mu zróżnicowane style i wielkości. W ten sposób stworzyłam zestaw fontów do wyboru na potrzeby prototypowania szkieletu aplikacji.
Kolejny krok to tworzenie komponentów na bazie zgrupowanych elementów. Zaznaczam wszystkie zróżnicowane linijki fontów i prawym przyciskiem myszy zaznaczam opcję Group. W ten sposób jestem pewna, że do listy Character Styles dodałam wszystkie interesujące mnie formaty i style.
W panelu górnym wybieram zakładkę Design, a następnie rozwijam opcję Character Styles. Odnosi się ona do wielkości i stylu fontu, który zamierzam wykorzystywać w prototypie szkieletowym interfejsu aplikacji. Zaznaczając jeden z utworzonych tekstów, a następnie klikając na ikonę + w zakładce Character styles dodaję nowe charaktery stylu do biblioteki, którą wykorzystam w prototypie.
Podobnie tworzę resztę elementów. W tutorialu wykorzystałam elementy, które nazwałam „Components”, „Text Area” oraz „Icons”. Komponenty stworzyłam przy pomocy kształtów dostępnych po lewej stronie interfejsu, a konkretnie Rectange i Ellipse, oraz zaimportowanych z grafik (dostępnych na moim dysku komputera).
W panelu Design otworzyłam kolejną zakładkę – Components – i zaznaczyłam wybraną grupę elementów, które zamieniłam na złożony komponent. Po zaznaczeniu, podobnie jak powyżej, grupy elementów, które mnie interesują, aby stworzyć przycisk, wciskam ikonę + po prawej stronie, na panelu Components. Na koniec zmieniam nazwę komponentu na „large primary button”, aby łatwo było mi rozpoznać konkretne kompozycje biblioteki w przyszłości. Wykorzystam go w modelu szkieletowym aplikacji.
Podobnie robię z innymi elementami. Z wybranej grupy elementów, które w przyszłości zastąpią „logo”, tworzę komponent po lewej stronie interfejsu, a następnie, po zaznaczeniu prawym klawiszem myszki, przeciągam na ekran logowania modelu szkieletowego mojej przyszłej aplikacji.
Tak sformułowane elementy biblioteki UI wykorzystałam w szkielecie aplikacji na iPad. Po zaznaczeniu prawym przyciskiem jednego z fontów dodanych do biblioteki Character Styles wybieram opcję Highlight on canvas, sprawdzam, do których miejsc biblioteki i prototypu została przeniesiona ta sama kompozycja.
Oto model szkieletowy aplikacji na bazie wcześniej utworzonych komponentów. Tak zbudowany szkielet z wykorzystaniem prostej biblioteki UI pozwala modyfikować dowolnie spersonalizowane informacje w makiecie aplikacji.
Jeżeli jest coś jeszcze, co ciekawi Cię na temat tego, w jaki sposób tworzę makiety moich przyszłych prototypów, zapraszam do kontaktu z wydawnictwem – z chęcią przygotuję kolejny tutorial, który odpowie na Twoje pytania!
