Dowiedz się, jak tworzyć prototypy lub szkielety witryn w programie Adobe Muse.

Uwaga:

Do programu Adobe Muse nie są już dodawane nowe funkcje, a jego obsługa zostanie wycofana 26 marca 2020 r. Aby uzyskać szczegółowe informacje i pomoc, zobacz stronę na temat wycofania usługi Adobe Muse.

Program Adobe Muse jest nie tylko intuicyjny w obsłudze, ale także ułatwia tworzenie prototypów projektów, które można przeglądać w Internecie. Dzięki możliwości tworzenia witryn testowych można udostępniać łącza potencjalnym klientom, pozwalając im przeglądać prototypy w Internecie za pomocą przeglądarek, w których będzie wyświetlana finalna wersja witryny. W ten sposób mogą oni zobaczyć, jak będzie wyglądać ostateczna wersja witryny.

fig01.wireframe.b720
Prototypy zawierają elementy zastępcze dla faktycznych obiektów na stronie.

Czytaj dalej, aby dowiedzieć się, jak projektować prototypy, przygotowywać ustrukturyzowane widoki planowania i tworzyć elementy zastępcze używane w witrynie. Po zakończeniu opracowywania zawartości można zastąpić elementy zastępcze faktycznymi składnikami strony.

Praca z prototypami

Prototypy prezentują układy stron witryny i umożliwiają klikanie łączy w celu sprawdzenia jej funkcjonalności. Przyjrzawszy się prototypom, odwiedź finalną, aktywną wersję witryny i przeanalizuj różnice. Zwróć uwagę na elementy zastępcze, które w finalnej wersji witryny zostały zamienione na grafiki.

Jeśli chcesz zobaczyć, jak powstały prototypy, pobierz przykładowe pliki (plik ZIP, 4,5 MB). Rozpakuj archiwum ZIP, a następnie otwórz folder i odszukaj plik KevinsKoffeeKartWire.muse. Kliknij go dwukrotnie, aby otworzyć prototypy w programie Adobe Muse. W widoku Planowanie przyjrzyj się organizacji stron w poziomy tworzące mapę witryny. Kliknij dwukrotnie każdą ze stron, aby przyjrzeć się jej dokładnie w widoku Projektowanie.

Program Adobe Muse zapewnia wiele funkcji ułatwiających tworzenie prototypów.

  • W widoku Projektowanie znajduje się opcjonalna siatka kolumnowa, która ułatwia wyrównywanie elementów układu.
  • Elastyczne narzędzia do rysowania umożliwiają tworzenie zastępczych kształtów dla grafik.
  • Panel Zasoby zapewnia funkcje umożliwiające aktualizowanie elementów zastępczych.
  • Podczas publikowania lub eksportu witryny program Adobe Muse optymalizuje pliki obrazów i tworzy z nich plasterki.
  • Nagłówki tekstowe i style akapitowe ułatwiają tworzenie struktury stron i formatowanie tekstu.
  • Polecenie Umieść umożliwia zapisanie loga klienta bezpośrednio z przeglądarki, a następnie umieszczenie go w pliku programu Adobe Muse.
fig02.wireframe.b720
Aby szybko opatrzyć prototyp symbolami identyfikacji marki, wybierz polecenie Plik > Umieść.

Projektowanie prototypów do zatwierdzenia przez klienta

Po spotkaniu z klientem możesz utworzyć prototyp witryny, który przedstawi rozmieszczenie i funkcjonalność elementów stron bez grafik i formatowania tekstu. Celem prototypu jest przedstawienie surowego „szkieletu” stron i stworzenie symulacji witryny bez rozpraszających kolorów i zawartości graficznej. Prostokąty pełnią rolę elementów zastępczych i są umieszczone w miejsce obrazów, a czcionki odręczne lub ogólne symbolizują obszary zawartości tekstowej na stronie.

Prototypy zapewniają następujące korzyści:

  • umożliwiają klientom skupienie się na strukturze witryny i zrozumienie układów stron;
  • stanowią interaktywny interfejs, który usprawnia sprawdzanie i zatwierdzanie witryn;
  • służą jako narzędzie komunikacji objaśniające projekt i funkcjonalność witryny.

Program Adobe Muse służy nie tylko do tworzenia witryn internetowych, ale także prototypów projektów. W mgnieniu oka można utworzyć testowy adres URL i wysłać go klientowi, co upraszcza proces zatwierdzania. To jednak nie jedyna zaleta tworzenia prototypów w programie Adobe Muse.

Pod względem tworzenia prototypów program Adobe Muse wyprzedza o krok pozostałe narzędzia do projektowania, ponieważ funkcje edycji obrazów w połączeniu z edytowalnymi stylami akapitowymi ułatwiają projektantom aktualizowanie pliku .muse i konwertowanie zatwierdzonych prototypów na finalne, aktywne witryny. Zamiast czekać na decyzję klienta, a następnie pozbywać się prototypów i zaczynać projekt od nowa, możesz natychmiast rozpocząć aktualizowanie zatwierdzonych prototypów i dodawać do nich zawartość, tworząc w ten sposób finalną wersję witryny. W miarę postępu prac możesz opublikować dowolną liczbę witryn testowych, prezentując poszczególne etapy powstawania projektu i udostępniać łącza klientom.

Za pomocą prototypów możesz budować witryny, przestrzegając poniższego obiegu pracy.

  • Tworzysz prototyp i publikujesz go jako darmową wersję testową.
  • Klient sprawdza witrynę, przeglądając poszczególne strony.
  • Klient przesyła uwagi lub prosi o wyjaśnienie kwestii projektowych.
  • Po dokonaniu niezbędnych korekt klient zatwierdza prototypy.
  • Aktualizujesz prototyp witryny, dodając grafikę i kolory.
  • Aktualizujesz style akapitowe, aby sformatować istniejącą zawartość tekstową.
  • Klient sprawdza zaktualizowaną wersję witryny i prosi o dodatkowe zmiany.
  • Wprowadzasz je.
  • Klient zatwierdza ostateczną wersję.
  • Aktualizujesz zawartość, konfigurujesz domenę i uruchamiasz witrynę.

Analizowanie struktury witryny w widoku Planowanie programu Adobe Muse

Aby zobaczyć strony witryny w hierarchii wyznaczającej poszczególne poziomy nawigacji, otwórz plik .muse prototypów w programie Adobe Muse i przeanalizuj go. Po otwarciu projektu pojawia się widok Planowanie, w którym są widoczne wszystkie strony witryny.

fig03.wireframe.b720
Strony prototypu widoczne w widoku Planowanie.

Zwróć uwagę, że istnieją dwa poziomy (nadrzędny i podrzędny) przedstawiające hierarchię mapy witryny. W dowolnym momencie tworzenia lub konserwacji witryny możesz kliknąć i przeciągnąć te strony, aby zmienić ich położenie w strukturze.

Aby utworzyć nowe strony:

  1. Kliknij symbol plusa (+) na prawo lub poniżej istniejących stron, a następnie kliknij pole nazwy, aby ją zmienić.

    Nazwy powinny mieć charakter opisowy.

  2. Kliknij prawym przyciskiem myszy miniaturę strony i w menu kontekstowym wybierz odpowiednią opcję, aby ją powielić, usunąć albo zmienić jej nazwę.

    Możesz także umieścić kursor na stronie i kliknąć X w prawym górnym rogu jej miniatury, aby ją usunąć.

  3. Jeśli postępujesz według instrukcji w samouczku, spróbuj dodać, przesunąć lub usunąć strony, aby zmodyfikować mapę witryny. Jeśli chcesz przywrócić pierwotną postać prototypu, wybierz polecenie Edycja > Cofnij.

    Widok Planowanie jest intuicyjny w obsłudze, a program Adobe Muse monitoruje wszystkie nazwy stron i zachowuje łącza wyświetlane w widżetach menu. Wszelkie dokonywane zmiany są automatycznie aktualizowane, aby zapewnić spójność łączy.

Tworzenie elementów zastępczych o wspólnych atrybutach za pomocą stylów graficznych

Podobnie jak programy Adobe Illustrator i Adobe Photoshop program Adobe Muse umożliwia tworzenie stylów graficznych, gdy wymagane jest zachowanie spójnego wyglądu, i stosowanie tego wyglądu wobec innych elementów. To przydatna funkcja w kontekście tworzenia prototypów (oraz projektowania witryn), ponieważ umożliwia zmianę istniejącego stylu graficznego w celu szybkiego zaktualizowania wszystkich elementów, wobec których został zastosowany. Istniejące style można także kopiować w celu tworzenia ich odmian.

Aby za pomocą stylów graficznych stosować atrybuty wobec kształtów i tworzyć elementy zastępcze dla obrazów w prototypie:

  1. W widoku Projektowanie za pomocą narzędzia Prostokąt narysuj na stronie trzy prostokąty.

  2. Zaznacz jeden z prostokątów, a następnie zmień kolor jego obrysu i wypełnienia oraz krycie, po czym dodaj jakiś efekt, np. cień.

  3. Podczas gdy prostokąt jest zaznaczony, kliknij polecenie Utwórz nowy styl graficzny u dołu panelu Style graficzne. Styl bazuje na formatowaniu zaznaczonego prostokąta. Kliknij dwukrotnie nowy styl graficzny, aby nadać mu opisową nazwę.

  4. Zaznacz jeden z pozostałych prostokątów i zastosuj wobec niego ten sam styl graficzny, klikając jego nazwę. Powtórz ten krok dla trzeciego prostokąta, tak aby wszystkie trzy miały ten sam styl.

  5. Zaznacz jeden z prostokątów i nieznacznie zmień jego styl. Zwróć uwagę, że w panelu Style graficzne obok nazwy edytowanego stylu pojawia się symbol plusa (+).

  6. Kliknij prawym przyciskiem nazwę stylu w panelu Style graficzne i wybierz polecenie Zmień definicję stylu. Dwa pozostałe prostokąty zaktualizują się zgodnie z nowym stylem, a symbol plusa (+) zniknie.

  7. Za pomocą stylów graficznych możesz szybko formatować kształty, tworzyć spójne prototypy i aktualizować zasoby witryny na prośbę klienta.

Tworzenie witryn o zdefiniowanej strukturze i formatowanie tekstu za pomocą stylów akapitowych

Podczas tworzenia prototypu witryny za pomocą narzędzia Tekst możesz tworzyć ramki tekstowe i umieszczać w nich tekst zastępczy (lorem ipsum), który później zamienisz na właściwy. Jeśli klient ma witrynę, możesz kopiować z niej tekst za pomocą przeglądarki i wklejać go do ramek tekstowych. Po utworzeniu elementów tekstowych możesz sformatować tekst za pomocą panelu Tekst.

Style akapitowe umożliwiają definiowanie tekstu nagłówka i znaczników akapitowych w celu utworzenia struktury zawartości tekstowej na stronie:

  1. W widoku Projektowanie za pomocą narzędzia Tekst narysuj na stronie ramkę tekstową. Wpisz lub wklej tekst do ramki.

  2. Za pomocą panelu Tekst lub opcji w panelu sterowania w górnej części przestrzeni roboczej ustaw opcje formatowania, w tym czcionkę, jej wielkość i kolor oraz inne właściwości.

  3. Kliknij polecenie Utwórz nowy styl akapitowy u dołu panelu Style akapitowe, aby utworzyć nowy styl. Kliknij dwukrotnie nazwę nowego stylu, aby zmienić ją na opisową.

  4. Kliknij styl prawym przyciskiem myszy i wybierz Opcje stylu. Za pomocą menu Znacznik akapitu ustaw dla stylu określony znacznik, np. P, H1, H2 lub H3.

    fig04.wireframe.b720
    Kliknij prawym przyciskiem myszy nazwę stylu w panelu Style akapitowe, a następnie w oknie Opcje stylu przypisz styl do nagłówka lub znacznika akapitu.

  5. Utwórz kilka dodatkowych ramek tekstowych. Zwróć uwagę, że jeśli klikniesz nazwę stylu akapitowego gdy jest zaznaczona ramka tekstowa, formatowanie zostanie zastosowane wobec zaznaczonej ramki. Jeśli później zaznaczysz jedną z ramek z zastosowanym stylem akapitowym i zmienisz ją, obok nazwy stylu w panelu Style akapitowe pojawi się symbol plusa (+). Oznacza to, że styl uległ zmianie podobnie jak w przypadku stylu graficznego.

  6. Aby automatycznie zaktualizować wszystkie ramki za pomocą tego samego stylu, kliknij nazwę stylu prawym przyciskiem myszy w panelu Style akapitowe i wybierz polecenie Zmień definicję stylu.

    Jak widać na tym prostym przykładzie możesz tworzyć różne kontenery tekstowe i stosować wobec nich określone style w celu zachowania spójności projektu. Gdy później zaktualizujesz prototypy, aby utworzyć wersję finalną, z łatwością zaktualizujesz style w oparciu o sugestie klienta. Tworzenie ustrukturyzowanych stron internetowych z kontenerami tekstowymi jest zalecane, ponieważ usprawnia pozycjonowanie witryny.

Uwaga:

Podczas projektowania stron z jednolitym kolorem tła ustaw zgodny kolor wypełnienia ramek tekstowych. Ułatwia to programowi Adobe Muse publikowanie zawartości tekstowej. Jeśli wypełnienia tła jest nieznane, opublikowany tekst nie wygląda na dokładnie wygładzony, ponieważ program Adobe Muse ustawia przezroczyste tło ramki tekstowej. Jeśli jednak tło strony stanowi gradient lub obraz, pozostaw kolor wypełnienia ramek jako Brak.

Aktualizowanie obrazów zastępczych za pomocą finalnych grafik witryny

Po zatwierdzeniu prototypu przez klienta możesz szybko zaktualizować witrynę o faktyczne pliki obrazów.

  1. Zaznacz na stronie obraz zastępczy.

  2. Otwórz panel Zasoby, aby odszukać zaznaczony element.

  3. Kliknij element prawym przyciskiem myszy. W zależności od sposobu tworzenia prototypu w menu kontekstowym masz do wyboru dwie opcje aktualizacji pliku obrazu.

    Jeśli plik utworzono w programie Adobe Photoshop lub Adobe Fireworks, a następnie umieszczono na stronie, możesz wybrać opcję Edytuj oryginał, aby edytować plik w programie, w którym powstał. Po zapisaniu pliku głównego i powrocie do programu Adobe Muse umieszczone instancje pliku zostaną automatycznie zaktualizowane w witrynie.

    Jeśli obrazy zastępcze zostały utworzone w programie Adobe Muse za pomocą narzędzia Prostokąt, możesz wybrać opcję Łącz ponownie wszystkie instancje, a następnie otworzyć folder na dysku komputera, aby zamienić element zastępczy na docelową grafikę.

    fig05.wireframe.b720
    Kliknij prawym przyciskiem myszy nazwę zasobu i wybierz opcję Edytuj oryginał, aby otworzyć plik główny w programie do edycji, w którym został utworzony.

  4. Powtórz te kroki, aby zamienić wszystkie elementy zastępcze na stronie na docelowe pliki obrazów.

    Uwaga:

    Po kliknięciu nazwy zasobu prawym przyciskiem myszy w panelu Zasoby możesz także wybrać opcję Przejdź do zasobu. To polecenie powoduje, że program Adobe Muse otwiera stronę zawierającą dany zasób, co pozwala na jego szybką aktualizację.

Dostęp do zoptymalizowanych plików obrazów wygenerowanych przez program Adobe Muse

Poza możliwością publikowania witryn tworzonych w programie Adobe Muse na serwerze hostującym można je także eksportować w całości, aby utworzyć folder z obrazami.

  1. Wybierz polecenie Plik > Eksportuj jako HTML.

    Zostanie wyświetlone okno Eksportuj do HTML.

  2. Wybierz lokalizację na swoim komputerze, do której chcesz wyeksportować pliki witryny i kliknij OK.

Po wykonaniu tej czynności program Adobe Muse wyeksportuje pliki i zapisze je we wskazanym folderze lokalnym. Przejdź do folderu i otwórz folder obrazów, aby uzyskać dostęp do zoptymalizowanych wersji plików. Obrazy te możesz wykorzystać w biuletynach, aplikacjach mobilnych, na stronach serwisów społecznościowych i w innych projektach.

Ta zawartość jest licencjonowana na warunkach licencji Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Posty z serwisów Twitter™ i Facebook nie są objęte licencją Creative Commons.

Informacje prawne   |   Zasady prywatności online