Szkielety

Modele szkieletowe to prosty sposób wizualizacji projektu aplikacji, strony internetowej lub mapowania elementów nowego projektu. Tworząc prosty zarys, łatwo jest zwizualizować sposób łączenia poszczególnych elementów i wskazać potencjalne problemy z doświadczeniem użytkownika.

S1_2–3_columns_filled_templates_app_wireframe_001S1_2–3_columns_filled_templates_app_wireframe_001
S1_2–3_columns_filled_templates_app_wireframe_001S1_2–3_columns_filled_templates_app_wireframe_001

60 mln użytkowników na całym świecie zaufało Miro

Szkielety służą do przedstawienia ogólnej struktury strony lub aplikacji w uproszczonej formie i tworzenia spójnych układów, które spełniają potrzeby użytkowników. Skorzystaj z narzędzia do tworzenia szkieletów, aby w łatwy sposób dostosować je do potrzeb przyszłych projektów.

Co to jest szkielet?

Szkielet jest wizualnym diagramem, który przedstawia ogólny zarys projektu lub technologii. Czasami jest nazywany schematem strony lub szkicem ekranu oraz pokazuje, jak elementy odnoszą się do siebie i jak są zorganizowane. Tworzenie szkieletów jest procesem wyższego poziomu. Projektanci doświadczeń użytkownika (UX) często używają go do tworzenia map projektu i układu swojej pracy bez wprowadzania zbyt wielu szczegółów. Jest to pierwszy etap procesu projektowania, zanim zostanie on uzupełniony o więcej szczegółów. Oprócz projektu i układu szkielety zawierają następujące informacje:

Struktura strony

Szkielet przedstawia strukturę strony lub aplikacji mobilnej. Pomaga projektantom określić, gdzie powinny znaleźć się poszczególne elementy i jak będzie wyglądał ogólny projekt.

Architektura informacji

W ramach struktury projektanci muszą również zaplanować, gdzie znajdą się poszczególne elementy strony — jest to tak zwana architektura informacji. Projektanci mogą określić, gdzie te elementy powinny się znaleźć w strukturze strony.

Ruch użytkownika

Projektanci doświadczeń użytkownika muszą rozważyć, w jaki sposób użytkownicy będą poruszać się po stronie. Tutaj pomocne może być utworzenie szkieletu strony. Tworzenie szkieletu strony skłania projektantów do spojrzenia na treść z perspektywy użytkownika. W rezultacie mają oni większe szanse na stworzenie strony lub aplikacji przyjaznej użytkownikowi.

Funkcjonalność

Programiści używają szkieletu do wizualizacji funkcjonalności aplikacji przed przejściem do fazy projektu technicznego. Mogą zobaczyć, jak ma działać i jakich zasobów potrzebują, aby to osiągnąć.

Jak wykorzystuje się szkielety?

Chociaż większość szkieletów jest używana do przedstawiania technologii i oprogramowania, mają one również inne cele, które obejmują zarządzanie projektami i rozwój produktu. Aby wyjaśnić sposób stosowania różnych szkieletów, przedstawiamy kilka najczęściej spotykanych przykładów szkieletów (plus kilka darmowych szablonów do wykorzystania):

Czym jest tworzenie szkieletów doświadczenia użytkownika?

Szkielet projektu doświadczenia użytkownika (zwany również diagramem przepływu użytkownika) skupia się na tym, jak użytkownik porusza się po danym produkcie lub usłudze. Diagram przedstawia ścieżki, którymi podąża użytkownik i sposób wchodzenia w interakcje z produktem lub usługą podczas wykonywania określonego zadania.

Co to są szkielety o niskiej dokładności?

Szkielety o niskiej dokładności są często spotykane przy tworzeniu aplikacji. Pozwalają twórcom aplikacji i projektantom stron internetowych szybko nakreślić zarys projektów, co pomaga im zwizualizować działanie poszczególnych elementów z perspektywy najwyższego poziomu. Te diagramy są jak schemat, więc nie zawierają zbyt wielu szczegółów. Jeśli chcesz utworzyć diagram z większą ilością szczegółów, rozważ użycie szkieletów o dużej dokładności. Szkielet o dużej dokładności jest kompletną wizualną reprezentacją struktury. Zawiera więcej szczegółów technicznych, zazwyczaj można go klikać i reaguje na działania użytkownika. Zapewnia projektantom ostateczny wgląd w projekt i jego działanie, co sprawia, że jest pomocny podczas testów z prawdziwymi użytkownikami. Zazwyczaj pierwszym krokiem w procesie projektowania jest wykonanie szkieletu o niskiej dokładności. Projektanci przechodzą do szkieletu o wysokiej dokładności, gdy szkielet o niskiej dokładności zostanie zaakceptowany, aby dopracować szczegóły.

Co to jest szkielet aplikacji?

Szkielet aplikacji przedstawia wszystkie elementy interfejsu aplikacji mobilnej. Zespoły używają takich szkieletów we wczesnych fazach tworzenia aplikacji, aby określić jej przepływ, funkcjonalność i wygląd. Szkielet aplikacji zazwyczaj zawiera interaktywne funkcje, dzięki czemu jest świetnym sposobem na wizualizację sposobu interakcji użytkowników z samą aplikacją. Podobnie jak w przypadku szkieletu doświadczenia użytkownika, projektanci analizują kluczowe elementy z perspektywy użytkownika. Jeśli czegoś brakuje lub są obszary do poprawy, projektanci mogą wprowadzić zmiany przed wdrożeniem.

Co to jest szkielet witryny internetowej?

Szkielet witryny internetowej porządkuje elementy wizualne na każdej stronie witryny. Zawiera on więcej szczegółów niż zwykły szkielet o niskiej dokładności, stanowiąc tym samym prototyp ostatecznego projektu. Daje projektantom możliwość dokładnego przyjrzenia się, jak będzie wyglądał interfejs użytkownika i jak użytkownicy będą z nim współdziałać. Jest to również pomocne narzędzie do wykrywania obszarów wymagających poprawy. Projektanci mogą zobaczyć witrynę z perspektywy prawdziwego użytkownika, co pozwala im wskazać wszelkie błędy techniczne lub usterki, które mogłyby wpłynąć na doświadczenie użytkownika. Projektanci mogą również znaleźć luki w istniejącej witrynie, które należy wypełnić nowymi elementami — na przykład brakujący przycisk wezwania do działania lub dodatkowa grafika. Dzięki znalezieniu tych luk w diagramie projektanci mogą dodać brakujące informacje zanim strona zostanie uruchomiona.

Co to jest szkielet rozwoju produktu?

Pomimo że szkielety są zwykle używane do tworzenia map oprogramowania i technologii, kierownicy produktu mogą je również wykorzystywać do ulepszania swoich produktów. Kierownicy produktu używają makiet do przedstawiania swojej wizji rozwoju produktu. Obejmuje to ich logikę, wymagania techniczne, zasoby i nowe funkcje. Dobrym przykładem jest tu szablon w postaci drzewa produktu, które można przycinać (Prune the Product Tree Template). Ta stworzona przez Luke'a Hohmanna metodologia pomaga kierownikom produktu i programistom organizować i nadawać priorytety prośbom o dodanie funkcji. Jest to kolejny format planu rozwoju produktu, który pomaga zespołom ds. produktu zastanawiać się nad sposobem rozwoju i kształtowania nowego lub istniejącego produktu.

Co to jest szkielet w zarządzaniu projektem?

W zarządzaniu projektami szkielet przedstawia szczegóły zbliżającego się projektu. Zapewnia, że wszyscy interesariusze mają te same informacje:

Jaki jest cel projektu?

Dla kierownika projektu (i zespołu projektowego) ważne jest, aby zrozumieć, dlaczego w ogóle projekt jest realizowany. Czy chodzi o dotarcie do szerszej grupy odbiorców? Aby wprowadzić na rynek nowy produkt? Aby ulepszyć wewnętrzny proces? Niezależnie od tego, jaki jest cel, powinien on być zawarty w szkielecie.

Jaki jest cel?

Oprócz celu projektu kierownicy projektów muszą mieć cel podczas tego etapu planowania projektu. W ten sposób kierownicy projektu mogą zapewnić, że wszystkie zadania i działania są zgodne z celem projektu.

Czy projekt przyniesie wymierne rezultaty?

Jeśli tak, to kierownicy projektu muszą to odnotować w szkielecie projektu. Dzięki temu zespół projektowy będzie wiedział, czego może się spodziewać na koniec projektu.

Po udostępnieniu szkieletu projektu odpowiednim osobom do podpisu, kierownik projektu przełoży szczegóły projektu na format o większej ilości szczegółów i strukturze, taki jak plan działania produktu lub przestrzeń robocza produktu.

Szkielet a makieta: Jaka jest różnica?

Szkielety i makiety są często używane zamiennie, ale nie są tym samym.

L1_1–2_columns_filled_templates_app_wireframe_001L1_1–2_columns_filled_templates_app_wireframe_001
L1_1–2_columns_filled_templates_app_wireframe_001L1_1–2_columns_filled_templates_app_wireframe_001

Szkielet to schemat na najwyższym poziomie, który ilustruje strukturę witryny internetowej, aplikacji lub projektu. Nie zawiera on żadnych wzorów ani dużej ilości szczegółów. Po prostu odwzorowuje strukturę i kluczowe elementy. Makieta jest szkieletem o dużej dokładności. Jest to wizualny diagram z dużo większą ilością szczegółów niż szkielet o niskiej dokładności. Na przykład zawiera wszystkie elementy projektu i jest interaktywny. • Szkielet: Prosty schemat, który przedstawia w zarysie strukturę produktu lub usługi. • Makieta: Szczegółowy i interaktywny diagram, który pokazuje, jak będzie wyglądał gotowy produkt lub usługa. Podczas tworzenia planu działania nowego oprogramowania lub wprowadzania na rynek nowego produktu pierwszym krokiem jest wykonanie szkieletu o niskiej dokładności. Jest to dobry punkt wyjścia, aby zorientować się w sytuacji i świetny sposób na współpracę z członkami zespołu w zakresie tego, co się sprawdza, a co nie. Ale jeśli od razu przejdziesz do tworzenia makiety, możesz zmarnować swój czas — zwłaszcza jeśli są elementy, które musisz zmienić. Warto zacząć od małej skali i dopiero potem ją rozbudowywać. Po zatwierdzeniu wstępnego szkieletu można zacząć myśleć o dodaniu większej ilości szczegółów i elementów projektu wizualnego, aby utworzyć makietę. Jeśli aktualizujesz istniejącą platformę, możesz zacząć od makiety. W końcu jest już uruchomiona, więc możesz użyć istniejącego projektu jako punktu odniesienia, aby wskazać obszary do poprawy.

Jak zrobić szkielet?

Niezależnie od tego, czy tworzysz mapę złożonego projektu, czy prostej witryny internetowej, korzystanie z narzędzi do tworzenia szkieletów (takich jak Miro) ułatwia proces tworzenia. Nasza platforma do współpracy jest intuicyjna, łatwa w użyciu i zapewnia elastyczność, której potrzebujesz, aby sprawdzić, co działa, a co nie Wykonaj następujące proste czynności, aby utworzyć udany szkielet z Miro.

1. Wybierz swój szkielet

Do wyboru masz różne rodzaje szkieletów, więc zacznij od wybrania odpowiedniego dla siebie. Omówiliśmy już kilka najbardziej popularnych formatów, ale to od Ciebie zależy, czy znajdziesz strukturę, która najlepiej sprawdzi się dla Ciebie i Twojego zespołu. Oto kilka rzeczy, które warto rozważyć podczas podejmowania tej decyzji: Co chcesz utworzyć? Czy chcesz przedstawić zarys interfejsu użytkownika? Aplikacji mobilnej? Strony internetowej? Produktu? Wyraźnie określ, co próbujesz przedstawić, aby wybrać szablon, który jest odpowiedni do tego, czego potrzebujesz. Czy potrzebujesz informacji na najwyższym poziomie czy wielu szczegółów? Jeśli szukasz czegoś z dużą ilością szczegółów, potrzebujesz szczegółowego szkieletu. Jeśli chcesz czegoś prostego, co pozwoli Ci zacząć, wystarczy Ci szkielet o niewielkiej ilości szczegółów. Kiedy już wiesz, jaki typ szkieletu chcesz utworzyć, przejdź do naszych szablonów szkieletów. Wszystkie te szablony są darmowe, łatwe w użyciu i gotowe do użycia. Wystarczy wybrać odpowiedni dla siebie i można od razu zaczynać.

2. Dostosuj układ

Wszystkie szablony Miro są gotowe do użycia, dzięki czemu możesz natychmiast zacząć tworzyć swój diagram szkieletowy. Ale czasami możesz chcieć edytować naszą strukturę lub dostosować ją do swojego biznesu. W takim przypadku z pomocą przychodzą nasze konfigurowalne funkcje. Dzięki Miro można dodawać nowe kształty, kolory, czcionki, wykresy — wszystko, czego potrzebujesz, aby utworzyć strukturę szkieletową, która doskonale reprezentuje Twoje plany.

3. Dodaj dokumenty pomocnicze lub łącza

Jeśli używasz diagramu szkieletowego po raz pierwszy, pomaga to zapewnić kontekst dla tego, jak wyobrażasz sobie ostateczny projekt. Tu właśnie przydadzą się dokumenty pomocnicze i łącza. Na przykład warto zamieścić łącze do strony internetowej, która ma podobną strukturę do tego, co zamierzasz osiągnąć lub do aplikacji mobilnej głównego konkurenta. Jeśli chodzi o udostępnienie diagramu zespołowi projektowemu, wszystkie te informacje zapewnią mu głębszy wgląd w to, jak wyobrażasz sobie produkt końcowy. Możesz również dodać wewnętrzne i zewnętrzne łącza, aby zapewnić dodatkowy kontekst, a także ręcznie przesłać pliki pomocnicze i ilustracje.

4. Udostępnij szkielet zainteresowanym stronom

Kiedy projekt jest gotowy, udostępnij go zainteresowanym stronom, aby uzyskać informacje zwrotne i informować o wszystkim na bieżąco. Możesz zorganizować sesję burzy mózgów, aby przedyskutować ich opinie w warunkach współpracy, lub odbyć rozmowę telefoniczną w celu omówienia spraw w czasie rzeczywistym. Po zapoznaniu się z opiniami i wprowadzeniu odpowiednich zmian można zrobić jedną z dwóch rzeczy: 1. Uruchomić nowy projekt lub platformę 2. Utworzyć bardziej szczegółowy szkielet o dużej dokładności Wybór zależy od Ciebie, w zależności od tego, co próbujesz utworzyć i ile szczegółów potrzebujesz przed uruchomieniem.

Użyj Miro, aby utworzyć następny plan

Dzięki Miro nie potrzebujesz żadnego doświadczenia w projektowaniu, aby utworzyć szkielet. Nasze narzędzie do tworzenia szkieletów i kolekcja szablonów do tworzenia szkieletów pozwalają tworzyć prototypy o niewielkiej ilości szczegółów dla aplikacji, stron internetowych, ekranów produktów i projektów — wszystko to w ciągu kilku minut.