Pierwsze kroki z wireframing przy użyciu Balsamiq

Modelowanie szkieletowe można idealnie zdefiniować jako czynność polegającą na wizualizacji układu ekranu. Na rynku dostępnych jest obecnie wiele narzędzi do wireframingu, ale najłatwiejszym i najszerzej stosowanym jest Balsamiq – nasz temat na dziś. Ale zanim to nastąpi, najpierw zrozummy, dlaczego potrzebujemy szkieletu?
Jeśli chodzi o tworzenie oprogramowania, ważne jest, aby wiedzieć, jak będzie wyglądał produkt końcowy, jeszcze przed jego rozpoczęciem. Ta wstępna wizualizacja produktu służy jako wskazówka dla wszystkich interesariuszy oraz pomaga uniknąć wszelkich niejasności, które mogą pojawić się w przyszłości.
W dawnych czasach do wywoływania wymagań oprogramowania używano akapitów tekstów.

Jednak te fragmenty tekstu nie wystarczyły do ​​uruchomienia wizualizacji – ponieważ każda osoba czytająca wymagania wizualizowałaby ją w sposób, który może różnić się od pozostałych. Ta niejednoznaczność prowadzi do wielu pomyłek i skutkuje stratą czasu, pieniędzy i wysiłków. Aby pomóc sprawie, pojawia się wireframing. Ze względu na łatwość, jaką wnosi do całego procesu rozwoju.

W tym artykule pomożemy Ci zrozumieć pytania takie jak:

• • Co to jest Balsamiq?

• • Jak zacząć?

• Jak wyeksportować ostateczny szkielet/makietę?

Co to jest Balsamiq?

W zasadzie wireframing można wykonać na serwetce za pomocą długopisu. W końcu to tylko szkic. Jednak jeśli chodzi o współpracę i dzielenie się nią z profesjonalistami, lepszym pomysłem jest przejście na jedno z wielu narzędzi obecnych obecnie na rynku. Jednym z takich narzędzi jest Balsamiq – jest prosty w użyciu i zapewnia wiele funkcji do zbudowania użytecznego szkieletu.
Balsamiq to doskonałe narzędzie, które spełnia wszystkie wymogi wireframingu i współpracy. Posiada unikalny zestaw funkcji, które umożliwiają szybkie tworzenie szkieletów, uzyskiwanie informacji zwrotnych w czasie rzeczywistym, włączanie tych informacji zwrotnych i ulepszanie szkieletów. To ostatecznie dostosowuje cały zespół do funkcjonalności aplikacji w zakresie układu.
Dzięki Balsamiq współpraca ze zdalnymi członkami zespołu jest również bardzo prosta, ponieważ można eksportować szkielety w formatach PNG lub PDF, co zapewnia elastyczność podczas udostępniania szkieletów.
10 najbardziej efektywnych narzędzi do tworzenia szkieletów

Pierwsze kroki z Balsamiq

Balsamiq jest dostępny dla systemów Windows i Mac OS i można go pobrać online . Po pobraniu narzędzia i otwarciu go zobaczysz ekran taki jak:

Jak pokazano na powyższym zrzucie ekranu, interfejs użytkownika Balsamiq jest podzielony na cztery następujące części.

• • Nawigator

• • Biblioteka interfejsu użytkownika

• • Inspektor

• Przestrzeń/obszar szkieletu

Sekcja podświetlona na czerwono służy do przełączania między inspektorem sekcji a informacjami o projekcie. Funkcje są zawarte w bibliotece UI, przyjrzyjmy się jej dogłębnie.

Biblioteka interfejsu użytkownika

Biblioteka interfejsu użytkownika jest podzielona na kategorie na podstawie różnych elementów ekranu.
Zapoznajmy się z różnymi kategoriami elementów ekranu dostępnych w Balsamiq.

• • Wszystkie – Kliknięcie tego przycisku spowoduje wyświetlenie wszystkich elementów interfejsu użytkownika oferowanych przez Balsamiq. Przewijanie w poziomie pozwoli Ci je przeglądać lub używać.

• • Zasoby — Ta sekcja zawiera elementy, które możesz przesłać, a później wykorzystać w swoich makietach.

• • Duży — obejmuje to dość większe elementy ekranu, takie jak symbole zastępcze, okno przeglądarki, iPhone i iPad.

• • Przyciski – Ta sekcja zawiera wszystkie kontrolki przycisków, które będą potrzebne w modelu szkieletowym, takie jak – przyciski akcji, pola wyboru itp.

• • Wspólne — ta sekcja zawiera kształty używane do oznaczania najczęstszych interakcji.

• • Kontenery — zawiera opcje takie jak Window, FieldSet, Browser itp. Jak sama nazwa wskazuje, zawiera Window, FieldSet, Browsers itp.

• • Formularze — ta kategoria zawiera wszystkie kontrolki związane z formularzami, takie jak elementy wejściowe, przyciski opcji, przycisk przesyłania itp.

• • Ikony — zawiera zestaw ikon, których można użyć do oznaczenia określonej operacji. Na przykład ikona dyskietki zamiast przycisku zapisu itp. Balsamiq oferuje ogromną kolekcję darmowych ikon, które można wykorzystać do różnych działań.

• • iOS — zawiera elementy sterujące interfejsu użytkownika specyficzne dla systemu iOS.

• • Układ − Układy są niezwykle ważne, gdy trzeba przedstawić podstawową stronę/funkcję. Ta kategoria obejmuje większość układów, takich jak zakładki pionowe / poziome, akordeony itp.

• • Markup – Służy do dodawania komentarza do określonej kontrolki w modelu szkieletowym. Zawiera również objaśnienia używane do pokazania łączności w wielu scenariuszach.

• • Media − W tej sekcji dostępne są wszystkie kontrolki interfejsu użytkownika związane z mediami, które pomagają w wyświetlaniu obrazu/wideo/dźwięku w modelu szkieletowym.

• • Symbole — Jest to zbiór komponentów wielokrotnego użytku, które mogą skrócić czas tworzenia wspólnych komponentów.

• Tekst − Jak sama nazwa wskazuje, zawiera wszystkie kontrolki interfejsu użytkownika związane z tekstem. W tej kategorii dostępne są takie funkcje, jak blok tekstu, pole kombi, pasek łączy itp.

Znajomość tych komponentów w połączeniu z faktem, że Balsamiq umożliwia łatwe przeciąganie i upuszczanie komponentów, pomoże Ci szybko i skutecznie tworzyć wybrane modele szkieletowe.
Którego z tych narzędzi do zarządzania produktami już używasz?

Załóżmy teraz, że dla swojej witryny stworzyłeś szkielet tych czterech stron — Strona główna, Produkty i usługi, Kontakt z nami i O nas. Teraz musimy wykonać kolejne ważne zadanie, które sprawi, że nasz szkielet będzie wyglądał bardziej jak pełnoprawna strona internetowa, a mniej jak szkic. W tym celu musimy połączyć nasze strony, ponieważ idealnie byłoby, gdyby były one połączone na stronie internetowej. Łączenie pomaga również w łatwym przechodzeniu tam iz powrotem między modelami szkieletowymi.

Łączenie stron

Ten krok pomoże Twojemu szkieletowi wyświetlać się w kolejności – tak jak na każdej stronie internetowej. Aby skorzystać z tej nawigacji, kliknij pasek łączy w prawym górnym rogu .
Najpierw zacznijmy od połączenia strony głównej ze stroną Produkty i usługi:

• • Przejdź do strony głównej

• Kliknij pasek linków w prawym górnym rogu

Zapoznaj się z panelem właściwości

Zaznaczona na zielono sekcja pokazuje różne makiety, które utworzyłeś do tej pory. Zacznijmy od podlinkowania strony głównej. Kliknij menu rozwijane, aby zobaczyć listę dostępnych makiet. Pokaże się lista jak poniżej:

Z wyświetlonej listy rozwijanej wybierz Produkty i usługi, aby utworzyć łącze od strony głównej do produktów i usług. Podobnie powtórz tę samą procedurę dla pozostałych stron.
Sztuka podejmowania decyzji: dla menedżerów, liderów i ludzi zajmujących się produktami

Eksportowanie szkieletu

Utworzony właśnie model szkieletowy na nic się nie przyda, jeśli nie możesz go zaprezentować klientowi/użytkownikowi końcowemu w bardziej popularnym formacie, takim jak PDF lub PNG. W tym celu Balsamiq umożliwia łatwe eksportowanie makiet w jednym z tych formatów.
W tym przykładzie eksportujemy naszą makietę w formacie PDF. W tym celu kliknij menu Projekt, a następnie kliknij Eksportuj do PDF.
Otrzymasz ekran podobny do pokazanego poniżej:

Zaznacz pole wyboru – „Pokaż wskazówki dotyczące linków”.
Następnie kliknij Eksportuj do PDF . Wyświetli się wyskakujące okienko, w którym możesz określić lokalną lokalizację, do której chcesz wyeksportować plik PDF. Postęp zostanie pokazany na pasku postępu, jak poniżej.

Po zakończeniu eksportu pojawi się okno potwierdzenia. Po kliknięciu pola będziesz mógł wyświetlić plik PDF wraz ze wszystkimi skonfigurowanymi nawigacjami.
Tworzenie minimalnych opłacalnych produktów – ile to za dużo?

Podsumowanie…
Nie można zaprzeczyć, jak ważne jest tworzenie szkieletów w dzisiejszym świecie tworzenia aplikacji. Oferują wiele funkcji, które w efekcie zmniejszają ogólne obciążenie pracą – absolutnie nie brakuje narzędzi do tworzenia szkieletów, ale Balsamiq jest jednym z niewielu narzędzi, które spełnią Twoje wszechstronne wymagania!

Ucz się kursów MBA online z najlepszych światowych uniwersytetów. Zdobywaj programy Masters, Executive PGP lub Advanced Certificate Programy, aby przyspieszyć swoją karierę.