Co to jest Wireframe

---

Co to jest Wireframe?

Wireframe to szkice ekranów systemu, czasem nazywane planem budowy lub szkieletem. Są tworzone w celu przedstawienia i wyjaśnienia klientów idei projektu systemu, co w końcu prowadzi do porozumienia się w sprawie zaproponowanych pomysłów.

Wireframe pokazuje „wystarczająco dużo” informacji związanych z zaproponowaną funkcją. Każdy wireframe składa się z podstawowych elementów graficznych, które reprezentują elementy ekranu lub ich miejsca zastępcze. Wireframe przedstawia układ ekranu i sposób ułożenia treści na ekranie. Skupia się na tym, co robi ekran i jak użytkownicy będą interaktywne z systemem, by zrealizować swoje potrzeby, a nie na tym, jak naprawdę będzie wyglądał ostateczny ekran.

Zanim przejdziemy dalej, zajrzyjmy na wireframe stworzony na podstawie youtube.com

Jak widać, wireframe jest tylko taki prosty i bezpośredni. Każdy może go zrozumieć bez trudności. Pomaga zespołowi programistycznemu łatwo wyjaśnić, jak użytkownicy będą interaktywne z witryna internetową.

Wireframe to tylko szkic

Wireframe to tylko wersja niskiej wierności interfejsu użytkownika i nie ma za zadanie być przedstawieniem rzeczywistego ekranu. Wireframe ma służyć do pokazania funkcjonalności, interakcji użytkownika i przejść między ekranami, bez wyraźnego określenia, jak mają wyglądać elementy ekranu i jak mają się zachowywać, aby osiągnąć najwyższą użyteczność.

Przykłady wireframe

Oto przykład wireframe dla strony głównej:

Oto kilka przykładów wireframe dla aplikacji Android:

Oto przykład wireframe dla aplikacji iPad:

Oto przykład wireframe dla aplikacji iPhone:

Na końcu, oto przykład wireframe dla aplikacji stacjonarnej:

Zalety używania wireframe

Uproszczenie interfejsu użytkownika

Klienci mogą nie rozumieć technicznych żargonów projektowania ekranu, takich jak suwak, pudełko z odwróceniem, bootstrap itp. Wireframe składa się z podstawowych elementów graficznych, które każdy może zrozumieć, pomagając klientom zrozumieć, jak będą działać funkcje i jak mogą interaktywne z systemem, by osiągnąć swoje cele.

Wczesne rozważanie użyteczności

Doświadczenie użytkownika (UX) to ważna kwestia w każdym oprogramowaniu obecnie. Użycie wireframe w zbieraniu wymagań przesuwa rozważania dotyczące doświadczenia użytkownika na początek projektu. Bez tworzenia prototypów ani rysowania rzeczywistych projektów ekranów, użytkownicy mogą nadal doświadczyć, jak system będzie działać.

Efektywne pod względem kosztów

Tworzenie kompletnych, wysokiej jakości projektów ekranów zajmuje czas i specjalistyczne umiejętności, co kończy się dużymi kosztami. Wykresy przewidywane to szybki i tanio sposób tworzenia podstawowych szkiców ekranów. Ułatwiają również dostosowanie lub nawet całkowite przebudowanie szkiców, co jest proste i tanie.

Chętniejsze wprowadzanie zmian

Zmiany projektu są nieuniknione. Problem z potwierdzaniem idei projektu za pomocą kompletnego mockupu lub prototypu systemu polega na tym, że już wykonano znaczną część pracy, a ponowne jej wykonanie wiąże się z dużym nakładem pracy, co oznacza dodatkowy czas, wysiłek i koszty. W takiej sytuacji klienci i zespół programistyczny są mniej skłonni wyrażać obawy i prosić o zmiany. Z drugiej strony, tworzenie i poprawianie wireframe zajmuje znacznie mniej czasu. Wszyscy będą chętniej prosić o zmiany i je wprowadzać.

Zaangażowani klienci

Ponieważ wireframe są surowe i luźne, dają klientom miejsce na rozważania i wyrażanie swoich sugestii. A ponieważ czas na poprawę wireframe jest krótki, klienci aktywnie uczestniczą w udzielaniu opinii, co sprawia, że są bardziej skłonni zaakceptować ostateczny projekt.

Jak skutecznie używać wireframe?

Użycie wireframe może przynieść wiele korzyści zarówno zespołowi programistycznemu, jak i klientom, ale tylko wtedy, gdy używasz go mądrze i odpowiednio. Typowym błędem jest traktowanie wireframe jako zastępcy projektu ekranu. To sprawia, że produkcja i doskonalenie stają się trudne i kosztowne, zmniejszając użyteczność wykresów przewidywanych. W tej sekcji przejdziemy przez niektóre skuteczne wskazówki dotyczące tworzenia wireframe.

1. Wireframe ma być prosty i wystarczający. Ma być prosty, aby mógł być szybko i łatwo wytworzony, a także nie powinien budzić wahania co do jego odrzucenia i ponownego wykonania. Niska jakość prezentacji sprawia, że jest bardziej kompleksowa i komunikatywna. Dlatego nie warto spędzać zbyt dużo czasu na ulepszaniu rysunku, wyrównywaniu elementów lub używaniu atrakcyjnej typografii itp.
2. W wireframe zamiast pokazywać rzeczywisty tekst, możemy zastąpić dużą ilość tekstu (rzeczywisty kontekst) miejscem zastępczym. Ma to na celu uniknięcie niepotrzebnego zużycia czasu na przygotowywanie treści oraz zapobieganie rozproszeniu czytelników przez treść tekstu. Jednak jeśli konieczne jest wyświetlanie tekstu, możesz rozważyć umieszczenie tam tekstu zastępczego. Na internetie łatwo znaleźć generator tekstu zastępczego.
3. Użycie adnotacji pomaga Ci opisać element (np. „Logo firmy”) lub wyjaśnić coś związana z jego zachowaniem (np. „Ukryj się za 5 sekund”). Użyj jej, jeśli to konieczne. Ale znowu, nie próbuj dokumentować każdego elementu szkicu. Powinieneś używać adnotacji tylko wtedy, gdy jest to konieczne.
   
4. Szkice mogą być rysowane ręcznie, ale zazwyczaj tworzymy je za pomocą oprogramowania, aby nasza praca była bardziej efektywna i łatwiejsza w zarządzaniu. Ponadto niektóre programy do tworzenia szkiców oferują funkcje, których nie da się osiągnąć za pomocą papieru i ołówka. Oto trzy z nich:
   1. Stan – narzędzie do tworzenia szkiców w Visual Paradigm obsługuje koncepcję stanu, która pozwala tworzyć szkice potomne na podstawie istniejącego. Nie tylko oszczędza Ci czas przy tworzeniu przepływu ekranów z sekwencją podobnych szkiców potomnych, ale również znacznie ułatwia ich dopracowanie (gdy dokonujemy zmian w początkowym stanie szkicu, zmiany te będą również odzwierciedlone we wszystkich szkicach potomnych)
   2. Storyboard – storyboard przedstawia przepływ ekranów dla określonego scenariusza. Ułatwia zarządzanie szkicami i znacznie ułatwia prezentację.
      
   3. Zarządzanie szkicami za pomocą historii użytkownika – historia użytkownika to narzędzie agilne do zapisywania obaw i wymagań użytkownika. Włączenie szkiców do scenariusza historii użytkownika pokazuje, jak użytkownik będzie używał funkcji w części swojej pracy opisanej w tej historii użytkownika. Ponadto, gdy programista zacznie implementować historię użytkownika, może sprawdzić szkic, aby zrozumieć oczekiwania użytkownika.
      

Visual Paradigm dostarcza wszystkie narzędzia i elementy szkiców, które potrzebujesz do rysowania szkiców stron internetowych, szkiców aplikacji na komputer stacjonarny, szkiców aplikacji na Androida i szkiców aplikacji na iOS (iPhone i iPad). Obsługuje równieżagilną metodologię tworzenia oprogramowania i narzędzia do projektowania UX, które obejmująnarzędzie do historii użytkownika, rozwój w sprintach, storyboard, itp.