Które narzędzia są najlepsze dla programisty interfejsu użytkownika?

Najlepsza odpowiedź

Projektanci interfejsu użytkownika:

Szkic

Rozpocznij

System: Mac

Zalety: Całkowicie do projektowania „interfejsu”

Sketch to lekkie, łatwe w użyciu narzędzie do projektowania wektorowego, które sprawia, że ​​projektowanie interfejsu użytkownika jest prostsze i bardziej wydajne . Platforma upraszcza funkcje używane w programach Photoshop i Illustrator, zaprojektowane specjalnie do projektowania UX / UI. Przed Sketch, projektanci musieli przełączać się między Photoshopem a Illustratorem, aby uzyskać określone funkcje, takie jak wektorowe i inne efekty fotograficzne. Teraz Sketch pozwala użytkownikom pozbyć się nadmiernej funkcjonalności i skupić się na doświadczeniu użytkownika / projekcie interfejsu użytkownika, aby uzyskać jak najwięcej z projektu interfejsu użytkownika. Jedną z najlepszych funkcji Sketch jest możliwość instalowania wtyczek , aby zrekompensować funkcje nie zawarte w oprogramowaniu.

Jednak nawet jeśli jest to jedno z najbardziej praktycznych narzędzi do projektowania interfejsów użytkownika aplikacji na Androida, wsparcie Sketch dla podglądu strony Androida w czasie rzeczywistym nie jest zbyt efektywne. Użytkownicy muszą pobrać SkalaPreview i dopiero po serii uciążliwych operacji mogą przeglądać rzeczywisty projekt interfejsu Androida po stronie telefonu.

iDoc

System: Mac i Windows

Zaleta: Projekt współpracy online i projekt przekazania dla projektantów i programistów interfejsu użytkownika

Jako zupełnie nowe narzędzie do współpracy i przekazywania, iDoc ma potężne wtyczki, które obsługują importowanie plików z Photoshop, Adobe XD i Sketch . Za pomocą wtyczek iDoc może generować specyfikacje i zasoby automatycznie do użytku projektanta interfejsu użytkownika. Aby przekształcić statyczne pliki projektowe w interaktywne i animowane prototypy hi-fi, po prostu prześlij pliki do modułu prototypowego iDoc.

Invision – internetowe narzędzie do prototypowania, które sprawia, że ​​projekt staje się szybko dostępny

Koszt: Bezpłatnie za 1 projekt (15 $ / mies. Za 3 projekty | 25 $ / mies. Za nieograniczone projekty | 99 $ / mies. Dla zespołów)

Kompatybilność: Mac i Windows

Funkcje :

  • Dzięki InVision projektanci mogą przesyłać swoje pliki projektowe i dodawać animacje, gesty i przejścia, aby przekształcić swoje statyczne ekrany w klikalne, interaktywne prototypy. Wysoka wierność w mniej niż 5 minut.
  • Obsługuje pliki w formacie PNG, JPG, GIF, AI i PSD. Aplikacja InVision doskonale nadaje się do współpracy nad szkicami projektów i zbierania opinii od współpracowników i klientów.
  • Magiczny nowy projekt do przepływu pracy programistycznej. Twórz arkusze stylów, otrzymuj kompozycje idealne do pikseli, omawiaj wyzwania projektowe, eksportuj adaptacyjnie i generuj rzeczywisty kod dla dowolnego elementu projektu.

Figma

Cena – za darmo użytkowanie

– 12 USD na osobę na grupę / miesiąc

Wprowadzenie: Figma to pierwsze narzędzie do projektowania interfejsów naprawdę współpraca w czasie. Posiada trzy godne pochwały funkcje: współpracę w czasie rzeczywistym, sieci wektorowe i kontrolę wersji. Po prostu Figma jest jak szkic oparty na przeglądarce z współpracą w czasie rzeczywistym .

Osobiste doświadczenie: Początkowo byłem sceptyczny co do Figmy doświadczenie użytkownika, ponieważ jest to narzędzie do projektowania interfejsu oparte na przeglądarce. Jednak później okazało się, że jest ono nadal bardzo czułe w użyciu. Co więcej, narzędzia przeglądarki mają tę zaletę, że odbiorca nie musi niczego instalować, wystarczy otworzyć przeglądarkę na komputerze, aby wziąć udział w projekcie. Pliki Figma są dostępne na komputery Mac, Windows, Linux i urządzenia mobilne (tylko do przeglądania).

Odpowiedź

Jeśli programista powiedział mi „nie”, najpierw zapytałbym dlaczego i spróbuję zrozumieć powód, dla którego mówią nie. Jeśli okaże się, że istnieje lepszy sposób podejścia do wyzwania projektowego, byłbym bardziej niż chętny do zmiany projektu.

Jednak programiści są na ogół zdolni do kodowania dowolnej funkcji i projektowania Projektanci interfejsu użytkownika wymyślić. Jak zauważył William Hurley w tej odpowiedzi, prawie wszystko jest możliwe, jeśli chodzi o oprogramowanie.

Zapytałem programistów, czy „funkcja x” jest możliwa lub czy projekt można zakodować tak, aby działał i nigdy nie powiedziano mi „nie”.

Biorąc to pod uwagę, celem projektanta interfejsu użytkownika powinno nie być wykonać złożony projekt. Celem powinno być uczynienie interfejsu tak prostym i intuicyjnym dla użytkownika, jak to tylko możliwe.

Z tego powodu korzystałem z zasad Google Material Design w moich ostatnich projektach (zobacz 5 ważnych i praktycznych powodów, dla których warto używać Material Design ).

Jest to kilka korzyści:

  • Znajomość dla użytkowników – Gmail, YouTube, Evernote, Buzzfeed i wiele innych aplikacji korzysta z Material Design, więc istnieje większa szansa, że ​​użytkownicy Twojej aplikacji będą zaznajomieni z tym, jak interfejs wygląda i działa.
  • Istniejące frameworki – powstało wiele frameworków zawierających gotowe komponenty do wykorzystania przez programistów, na przykład Materializacja CSS , Materiał AngularJS i Material-UI . Pomaga to projektantom zobaczyć, co jest łatwo dostępne dla programistów i wykorzystać te komponenty w swoich projektach.
  • Szybsze podejmowanie decyzji – Gdy programiści i projektanci mogą pracować z tą samą paletą komponentów, co przyspiesza proces projektowania i rozwoju.

Oto świetny film o tym, jak Google sprawiło, że ich mnóstwo aplikacji wygląda i działa spójnie, jeszcze przed ich wydaniem Wygląd materiału. Stosując zasady, których używali kiedyś i teraz, projektanci mogą tworzyć lepsze interfejsy i praktycznie wyeliminować „nie” ze słownictwa programistów.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *