Jaka jest różnica między modelami szkieletowymi a makietami?

Chciałbym poznać różnicę między Wireframes a makietami. Mam nadzieję na zrozumienie różnicy lub definitywne zrozumienie, że oba są takie same.

Przejrzałem go, ale nie mogłem zrozumieć, na czym dokładnie polega różnica, byłbym wdzięczny, gdyby ktoś mógł mi to zwięźle wyjaśnić.

Model szkieletowy dotyczy funkcjonalności. Może to być naprawdę prosty szkic, który pokazuje, jakie rzeczy możesz zrobić w swoim projekcie. Na przykład model szkieletowy witryny pokaże nawigację, główne przyciski, kolumny, rozmieszczenie różnych elementów. Możesz to potraktować jako plan strony internetowej.

Makieta jest realistyczne przedstawienie tego, co dany produkt będzie wyglądał w tym przypadku: na stronie internetowej. Ostateczny wynik może wyglądać dokładnie tak samo, jak makieta, lub stanowić jego odmianę po zmianach wersji. Podczas gdy niektórzy wolą rysować makiety za pomocą oprogramowania graficznego, inni robią to bezpośrednio w HTML / CSS.

Korzystam z Balsamiq dla makiet i Photoshop / Illustrator lub HTML + CSS (w zależności od złożoności) dla makiet.

Przykład szkieletu:

Modele szkieletowe to podstawowe kształty lub linie używane do oznaczania pozycji i / lub tylko rozmiaru. Celem dowolnej konstrukcji szkieletowej jest „dopasowanie” elementów do układu, a nie wskazywanie, w jaki sposób elementy mogą faktycznie pojawić się w ostatecznym projekcie, tylko tam, gdzie będą się znajdować.

Makiety są zbudowane na ramkach i idą dalej, aby pokazać ogólne aspekty wyglądu projektu, w tym wybór typu, wybór kolorów itp. Celem makiety jest pokazanie, jak najbliżej, w jaki sposób będą renderowane wszystkie ostateczne wyglądy.

Popieram szczegółową odpowiedź @Yisela, również w celu dodania tej wizji przedstawionej w następnej prezentacji

Oto krótkie streszczenie artykułu Marcina Tredera :

Model szkieletowy

Model szkieletowy jest reprezentacją projektu w niskiej wierności. Powinien wyraźnie pokazywać:

1. • Główne grupy treści (co?)

2. • Struktura informacji (gdzie?)

3. • Opis i podstawowa wizualizacja interakcji użytkownik - interfejs (jak?)

4. Potraktuj je jako kręgosłup swojego projektu i pamiętaj, że szkielety powinny zawierać reprezentację każdego ważnego elementu produktu końcowego.

makieta

1. Makieta to statyczna reprezentacja projektu od średniej do wysokiej wierności. Bardzo często makieta jest projektem wizualnym
2. Reprezentuje strukturę informacji, wizualizuje treść i demonstruje podstawowe funkcje w sposób statyczny
3. Zachęca ludzi do przeglądu wizualnej strony projektu

Modele szkieletowe służą do definiowania frameworku, hierarchii informacji, demonstrowania przepływu pracy, dostarczania szczegółowych informacji na temat tego, co jest na ekranie oraz opisu działania komponentu (adnotacja). W zależności od złożoności aplikacji lub witryny szkielety powinny być budowane na podstawie innego dostarczanego wymagania; modele procesów. Modele szkieletowe mogą być używane do wywoływania wymagań od klienta i ostatecznie potwierdzania wymagań przez klienta. Modele szkieletowe to wizualny model struktury witryny lub aplikacji. Nie określają czcionki, która będzie używana, wypełnienia, koloru, stylu itp. Nie mają skali i nie mają tonów ani gradientów. Wszystko to należy przekazać klientowi, aby zrozumiał proces i kontekst dostarczanego modelu szkieletowego w połączeniu z innymi elementami wymaganymi.

Makieta jest zwykle tworzona w Photoshopie i chociaż jest oparta na strukturze lub strukturze potwierdzonego dostarczanego modelu szkieletowego, jest odrębna do dostarczenia, z odrębnym harmonogramem i procesem zatwierdzania. Makiety lub kompozycje, określają styl wizualny lub ton interfejsu. Po zaakceptowaniu makiety przekładają się na szereg dodatkowych wymagań lub produktów roboczych, takich jak kod CSS, przewodniki po stylach, zasoby graficzne itp.

Modele nigdy nie będą makietami. Makiety mogą być wykorzystane jako szkielety, ale miałoby to wpływ na wszelkie wymagane zmiany i znacząco wpłynęłoby na budżet.

Źródło: 15 lat jako projektant komunikacji, główny UX, analityk biznesowy w środowisku korporacyjnym opracowującym witryny i aplikacje. I ukochany BABOK

Nie mam jeszcze reputacji, aby komentować odpowiedź Dave'a Kaye, więc musiałem odpowiedzieć bezpośrednio. Warto zwrócić uwagę na jego odpowiedź w porównaniu z genialną odpowiedzią Rachuru.

W interpretacji współczesnych fraz laika może / powinna być;

1. Modele szkieletowe są „projektem”
2. Makiety to „renderowane dema”

Rzeczywista terminologia pochodzi z lat 80-tych. W tamtym czasie nie dysponowałeś mocą obliczeniową do tworzenia zdjęć w czasie rzeczywistym, ale mogłeś oglądać „szkielety” grafiki unoszące się na ekranie w czasie rzeczywistym. Właściwe „demo” wymagało nocnego renderowania itp.

W tych czasach „szkielet” reprezentuje szkieletowy „projekt”, a przy dobrym iteracyjnym procesie projektowania ludzie powinni generować makiety z szkieletu, uzyskiwać informacje zwrotne i przekazywać je z powrotem, aby ulepszyć projekt szkieletu.

Niestety w dzisiejszych czasach klienci mają do dyspozycji wiele programów, które pozwalają im projektować makiety, które nie używają niczego, co jest bezpośrednio użyteczne przez programistów. Często ich projekty są budowane przez innych, więc makieta jest ulepszana prywatnie, a nie przekazywana programistom, aby wzięli udział w wielkich projektach.

Myślę, że właśnie to Dave był nieco bardziej uprzejmy, mówiąc o :-)

Keith

Mówiąc prosto:

Model szkieletowy: szkielet / struktura

Makiety : aspekt skórny / wizualny

Jak zauważyli niektórzy, obecnie szkielety zyskują na znaczeniu, a makiety łączą się w prototypy.

Muszę dodać jeden punkt, którego ludzie nie wyrazili ... wszystkie te odpowiedzi zawierają przyzwoity opis techniczny, ale w środowisku pracy różnice nie zawsze są tak wyraźne. Niektóre firmy mogą dodawać funkcjonalność do makiety, a niektóre mogą stawiać wysokie wymagania projektowe w modelu szkieletowym. Byłbym ostrożny, aby zbytnio nie wpaść w odpowiedź na to, co „powinno” być, ponieważ pierwsza firma, do której się wybierasz, może zrobić coś, co nie jest jedną z tych rzeczy!

Zgodnie z moją wiedzą ekrany makiet są ostateczną reprezentacją interfejsu użytkownika, wyglądu i działania. Jaki będzie normalny przepływ i jaki będzie przepływ alternatywny. Myślę, że może to być rodzaj prototypu internetowego, tworzonego głównie w HTML i CSS. Robimy wtedy głównie w fazie HLD, aby pokazać i uzyskać akceptację od klienta.

Modele szkieletowe jako porównania koncentrują się bardziej jak schemat blokowy, na którym znajduje się ogólny opis. Jeśli nie reprezentuje kilku szczegółowych opisów, takich jak to, co dzieje się po kliknięciu wydarzenia, zmień wydarzenie i podobne rzeczy. Są one w większości wykonywane przez SA / BA, a makiety są wykonywane przez projektantów / programistów. Co więcej, niektórzy ludzie dołączają specyfikacje techniczne do szkieletów, takich jak DB zaangażowanych w ten konkretny interfejs użytkownika.

Ale znowu zależy to od projektu do projektu. W naszym przypadku szkielety są źródłem prawdy.

To właśnie rozumiem jako różnicę w nich

Model szkieletowy może być makietą. Makieta może być uważana za szkielet. Chociaż czasem są to oddzielne rzeczy (jak stwierdzili inni), tak samo często nie są oddzielnymi rzeczami.

Kiedyś można rozważyć szkielety, co stworzyłby Visio. A makiety byłyby tym, co stworzyłby PhotoShop.

Ale dziś, dzięki szerokiej gamie narzędzi, którymi dysponujemy, często są one tym samym faktycznym dokumentem. Na początku mogą zaczynać się od szkieletów (czysto układ i funkcja), ale z czasem stają się coraz bardziej szczegółowe do tego stopnia, że ​​można je uznać za makietę. A jeśli używasz interaktywnego narzędzia, takiego jak Axure, w pewnym momencie można uznać go za prototyp.

Jest to spektrum z dużym nakładaniem się.

Modele szkieletowe

Kiedy zamierzasz zaprojektować aplikację mobilną lub aplikację internetową, najpierw potrzebujesz szkicu, jak będzie wyglądać każda strona. Opierając się wyłącznie na koncepcjach biznesowych, projektant może zdefiniować przepływ aplikacji i pierwszą wersję projektu, która ma szkic tego, jak będzie wyglądać, jakie przyciski będą tam, jakie pola będą, itp. To jest szkielet przeznaczona dla.

Makiety

Makiety to bardziej żywe obrazy. Są bardziej atrakcyjne wizualnie, mają kolory, czcionki, motywy, przyciski, logo itp. Na tym etapie w projekcie określa się etykiety pól, notatek, rodzajów czcionek, menu nawigacji itp. Jest to dokładna reprezentacja tego, jak będzie wyglądać aplikacja mobilna lub jak będą wyglądały strony internetowe.

Szczegółowe porównanie między modelami szkieletowymi i makietami można znaleźć w tym informacyjnym artykule: Różnica między modelami szkieletowymi, makietami i prototypami