23Jul
Pencil to narzędzie wireframingowe, za pomocą którego możemy szkicować makiety interfejsu użytkownika naszej aplikacji. Wspaniałą cechą Pencil jest to, że jest lekki, łatwy w użyciu i ściśle zintegrowany z Firefoksem. Na dodatek jest to bezpłatna aplikacja open source! Na końcu artykułu przedstawimy proste demo dotyczące korzystania z Ołówka, aby stworzyć szkielet typu Brizzly.
Dlaczego tworzymy szkielety?
Model szkieletowy jest szkicem idei układu strony. Model szkieletowy koncentruje się na projektowaniu informacji strony, aby upewnić się, że projekt pasuje do potrzeb użytkownika. Model szkieletowy składa się zazwyczaj z różnych kształtów( takich jak pudełka, owale i diamenty), które reprezentują elementy treści, funkcjonalne i nawigacyjne. Te kształty wyświetlają ich położenie na stronie.
Na początku może wydawać się stratą czasu, tworząc szorstkie szkice strony. Rama z drutu jest ważna, aby użytkownicy mogli skupić się na elemencie ważności na Twojej stronie. Tworzenie wstępnego szkicu strony bez fantazyjnych elementów wizualnych przesuwa uwagę użytkownika na ważne elementy, takie jak rozmiar, układ i rozmieszczenie składników strony. Zaczniemy lepiej rozumieć, czego naprawdę potrzebuje klient i czego nie potrzebuje, kiedy użytkownik zaczyna skupiać się na ważnych elementach strony. Tworzenie ramki drucianej pozwala Tobie i Twoim użytkownikom efektywnie współpracować i wcześnie identyfikować potencjalne problemy projektowe.
Pierwsze kroki z ołówkiem
Pobierz Ołówek ze strony dodatku Ołówek. Po zainstalowaniu Ołówka jest dostępny z "Narzędzi" & gt;"Szkicowanie ołówkiem".
Tak właśnie wygląda Brizzly. Jest to całkiem fajna aplikacja internetowa, która agreguje Facebooka i Twittera na jednej stronie.
Jest to wynik końcowy ramy drucianej. Główne kształty w tym modelu krawędziowym to prostokąty, pola tekstowe i tabulatory. W następnej sekcji artykułu podam prosty przykład tworzenia każdego kształtu.
Tworzenie prostokąta
Pierwszym krokiem tworzenia kształtu ramki z drutu jest przeciągnięcie kształtu z menu "Kolekcje kształtów" na płótno.
Zmień rozmiar prostokąta na odpowiednią szerokość i wysokość.
Możemy dostosować tekst, obramowanie i kolor tła dowolnego kształtu w Ołówku. Kliknij prawym przyciskiem prostokąt i wybierz "Właściwości", aby otworzyć okna Właściwości. To jest ekran właściwości tła. Ustaw kolor tła prostokąta na biały( #FFFFFF).
Kliknij kartę "Obramowanie" i dostosuj właściwości obramowania. Ustaw kolor ramki na czarny( # 000000) i zmień grubość ramki na 1.
Ekran właściwości tekstu pozwala dostosować typ, rozmiar, styl, wagę, kolor, jasność i krycie tekstu.
Tworzenie zakładek
Karty ekranu głównego, szkicu i rysunku to trzy karty ułożone jedna na drugiej. Przeciągnij trzy "Panel zakładek" do prostokąta. Zmień rozmiar każdej karty, tak aby każda karta wyświetlała się obok siebie.
Otwórz ekran właściwości tekstu, aby dostosować kolor czcionki w zakładkach "Obrazy" i "Robocza".Ustaw go na szary( # 989898).
Tworzenie tekstu
Przeciągnij kształt "Tekst" na płótno, aby utworzyć każde z menu. Możemy dostosować wygląd tekstu, otwierając okno właściwości tekstu.
Przydatne wskazówki dotyczące zmiany koloru
Kolor jest jednym z najważniejszych elementów dostarczania przyjemnego modelu krawędziowego. Najbardziej precyzyjnym sposobem zmiany koloru kształtu jest określenie kodu HTML koloru. Wykreślenie kodu HTML dla określonego koloru może być trudne. Możemy użyć arkusza oszukującego w kolorze HTML z w3cschools.com, aby wyszukać odpowiedni kod HTML dla określonego koloru.
Chcemy również użyć colorzilla do wybrania kolorów z ekranu i użycia go w Ołówku. Kliknij ikonę zakraplacza w lewym dolnym rogu przeglądarki Firefox, aby wybrać kolor na ekranie. Możemy także otworzyć próbnik kolorów ColorZilla, klikając dwukrotnie ikonę kropli ocznych. Po prostu skopiuj kod szesnastkowy do kolorowego kodu HTML ołówka.
Wniosek
Ołówek jest łatwym w użyciu narzędziem do modelowania szkieletowego. Ołówkowa integracja z Firefoksem pozwala nam korzystać z innych wtyczek Firefox, aby pomóc w tworzeniu lepszych szkieletów
Links
Pobierz Ołówek
Pobierz Colorzilla
W3C HTML Kolorowy Arkusz