Zobacz mnie na GoldenLine
ThinkLab: moja firma

MOJE KSIĄŻKI - AUTOR

Użyteczność w praktyceM. Kasperski, A. Boguska-Torbicz Projektowanie stron WWW. Użyteczność w praktyce, Helion 2008.

Moja książkaM. Kasperski, Sztuczna Inteligencja, Helion 2003.

REDAKTOR MERYTORYCZNY

UmysłD. Casacuberta, Umysł. Czym jest i jak działa, Świat Książki 2007.

100 sposobów...T. Stafford, M. Webb, 100 sposobów na zgłębienie tajemnic umysłu, Onepress 2006.

Istota inteligencjiJ. Hawkins, S. Blakeslee, Istota inteligencji, Onepress 2005.

Blog > Komentarze do wpisu

Mockup Screen: prototypy w stylu Apple Newton

Jedno z pierwszych pytań projektanta interfejsów i stron WWW dotyczy wyboru narzędzi do swojej pracy. Jakie narzędzia dostępne są w ogóle? Które warto wybrać? Wybór przychodzi z czasem.

Na rynku nie ma zbyt wielu aplikacji, które można by użyć w ramach prac z zakresu prototypowania. Można co prawda prototypować nawet przy pomocy tak powszednich programów jak MS Word czy MS PowerPoint, ale efekty pozostawiają wiele do życzenia. Stąd jednym z głównych tematów książki "Prototypowanie: metody i narzędzia", będzie właśnie przegląd dostępnego oprogramowania, ułatwiającego życie projektantom. Dzisiaj o jednym z takich programów.

 

***

Mockup Screen to wyjątkowo proste narzędzie autorstwa chorwackiego programisty Igora Ješe, które wychodząc z założenia "Sketch Screens in Minutes" doczekało się wzmianki m.in w Gui Design for Dummies, a i chłopcy z Microsoft zauważyli je na rynku. Mockup Screen jest tak prosty, że podręcznik użytkownika liczy sobie ledwie 12 stron html, w związku z czym opanowanie obsługi tego programu nie powinno zająć więcej, niż kilkanaście minut. Także cena jest przyjazna - 79$ za licencję na jedno stanowisko.

Mockup Screen: splash.

 

W Mockup Screen mamy do czynienia z pracą na scenariuszach, na które składają się pojedyncze makiety poszczególnych stanów interfejsu / strony WWW (rysunek niżej).

Mockup Screen.

 

Wybierając z menu opcję New Screen i klikając na nowo powstałą pustą makietę przechodzimy do widoku tworzenia pojedynczej strony, na której będzie znajdował się nasz interfejs bądź schemat strony internetowej. Piszę schemat, bo w Mockup mamy do czynienia z grafiką dwubitową - wszystkie elementy naszego interfejsu będą czarnobiałe. Ma to swoje wady, ale ma też zalety - tego rodzaju makiety mają swój niezaprzeczalny charakter, zbliżony do tego, jaki możemy znaleźć w ramach pierwszego interfejsu PDA Apple Newton.

 

Fragment makiety wykonanje w Mockup Screen.

Newton OS GUI.

Rysunek 3. Fragment makiety wykonanej w Mockup Screen (u góry) oraz graficzny interfejs Newton OS. Prawda, że podobne?

 

Podczas procesu rysowania interfejsu mamy do wykorzystania biblioteki podstawowych elementów GUI, które zostały pogrupowane w następujący sposób:

  • elementy internetowe (web elements): text link, image, horizontal line,
  • elementy tekstowe (text elements): simple text, multiline text, float text,
  • standardowe elementy (standard elements): button, field, dropdown, checkbox, list, radio button, table, tree (drzewo przydatne przy wizualizacji map WWW), frame, tabs (układ zakładek),
  • grupy ikon (icon groups): emotikony, strzałki, symbole i inne znaki specjalne.

Dodatkowo dysponujemy funkcją tranfsormacji, dzięki czemu jednym kliknięciem możemy zmienić dowolny element interfejsu w każdy inny - chociażby button zamienić w dropdown.

 

Okno edycji makiety.

Rysunek 4. Okno edycji makiety. Widoczne gotowe biblioteki elementów GUI.

 

Oczywiście elementom interaktywnym interfejsu, który wykonujemy, możemy nadać zmienne - tytuły zakładkom, przypisać funkcję do buttonu (Anuluj, OK, Wyślij, etc.), widoczny stan dropdowna czy pól logowania się, itd. Chociaż należy zaznaczyć, że i tak nie użyczymy żadnej interaktywności naszych wygenerowanych makiet, ze względu na fakt, że program eksportuje pliki do formatów .GIF i .JPG.

Fragmenty makiet z Mockup.

 

Na koniec zapisujemy nasze efekty pracy + możemy wyeksportować cały scenariusz do pliku .html, w którym zawarte będą poszczególne makiety, jakie wykonaliśmy.

To wszystko. Prościej już nie można.

***

Wersja 30-dniowa programu: pobierz.

niedziela, 02 września 2007, marekkasperski

Polecane wpisy

  • Definicja UX: Przez wskazanie... Feature na rynku nieruchomości

    Wstęp [można pominąć] 0.1. User Experience to nie jest ' wziu-wziu ' w HTML5. To nawet nie jest front-end. Sorry , nie przekonacie mnie w licznych rozmowach;

  • Z półki projektanta: Koszyk

    Krótki komiks o projektowaniu. *** To jest koszyk na zakupy. To jest ładny koszyk na zakupy, jednak pełni taką samą rolę jak zwyczajny koszyk. Dla sklepu (a

  • Polski Internet śpi

    Nie wiem, czy to za sprawą globalnych dużych graczy, którzy (pod względem zasięgu) przejęli polskich użytkowników, a z nimi polskie budżety marketingowe, ale wy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
2007/09/03 11:53:42
Czesc, spojrz na to: dub.washington.edu/denim/

Pozdrawiam,
-
2007/09/03 11:57:08
Dzięki! Dzisiaj w nocy wpadłem na tę stronę, ale widzę, że będę musiał się baczniej przyglądnąć temu projektowi.
-
Gość: vbert, *.petrus.pl
2007/10/11 11:37:36
Szkoda, że brak wersji dla Linuxa :(