Adobe Experience Porady, wskazówki i techniki projektowania
Kiedy Adobe wprowadziło Experience Design jako Public Preview, firma dokonała dwóch niesamowitych wyczynów w tym samym czasie. Najpierw stworzyli przestrzeń na rozwijającym się rynku oprogramowania do prototypowania. Po drugie, stworzyli użytkownikom możliwość pracy z "pracą w toku" i pozwalają użytkownikom wpływać na ten postęp. Teraz, gdy aplikacja była dostępna przez kilka miesięcy, pomyślałem, że nadszedł czas, aby podzielić się sztuczkami, wskazówkami i technikami Experience Design.
Ale najpierw możesz się zastanawiać, co rozumie się przez oprogramowanie do prototypowania. Do głównych graczy w tej przestrzeni należą Proto.io, Principle, UXPin, Atomic.io, Experience Design i InVision. W przeciwieństwie do takich aplikacji jak Sketch 3, Photoshop i Illustrator, w których tworzone są projekty statyczne, te edytory graficzne wprowadzają interaktywność, ruch i inne funkcje wspólne dla dzisiejszej mobilnej i internetowej przestrzeni projektowej.
Wraz ze wzrostem mobilności i nieuniknionym, laserowym skupieniem się na użytkowniku, projektant nie wystarczy już do zrobienia kilku szkiców, zebrania kilku kompilacji, a następnie zwolnienia projektu lub przesłania go na serwer WWW. Przepływ pracy UI / UX zasadniczo zmienił sytuację. Każdy etap procesu, od identyfikacji użytkownika, szkiców, makiet, makiet i prototypów, jest teraz przedmiotem szeroko zakrojonych testów.
Jest to ostatni etap - prototypowanie - w którym punkty bólu są odkrywane i naprawiane zanim projekt przejdzie do końcowej produkcji. W tym miejscu decydująca jest interaktywność, ruch, przejścia między ekranami i rozmieszczenie wszystkiego na ekranie. Problemy i problemy nie mogą być po prostu pokazane jako statyczny obraz lub wyjaśnione werbalnie. W końcu te produkty są dla prawdziwych ludzi. Zamiast przenosić to wszystko do kodu, proces tworzenia prototypów jest coraz częściej przeprowadzany przez oprogramowanie graficzne zaprojektowane specjalnie do tego celu. Łatwiej jest naprawić błąd, zamienić obraz, przepisać tekst, przesunąć przycisk itd. Za pomocą edytora wizualnego, zamiast ciągle przepisywać i debugować kod.
W rzeczywistości to oprogramowanie stało się kluczowym elementem dzisiejszego środowiska projektowania i rozwoju "Rapid Prototyping".
Mając to na uwadze, bawmy się z Experience Design.
02 z 07Utwórz pin docelowy za pomocą prostego kręgu w Adobe Experience Design
Jednym ze schludnych aspektów XD jest wykorzystanie narzędzi do rysowania wektorowego. Nie możesz znaleźć ikony? Nie ma problemu. Skręć swój własny. Oto jak:
- Wybierz Narzędzie Elipsa i, naciskając klawisze Option / Alt-Shift, narysuj okrąg.
- Po zaznaczeniu koła ustaw Wypełnij kolor do FF0000 i Granica do "none" we właściwościach.
- Kliknij dwukrotnie okrąg, aby wyświetlić punkty kontrolne. Przeciągnij dolną kotwicę w dół.
- Kliknij dwukrotnie wybrany punkt kontrolny, a krzywe zostaną zastąpione liniami.
- Narysuj kolejne małe kółko z białym wypełnieniem i bez stoke. Przesuń go na pozycję i wybierz pinezkę i okrąg. W panelu Wyrównanie u góry właściwości kliknij przycisk Centrum poziome i zostanie utworzony kod PIN.
Stwórz rozmycie tła w Adobe Experience Design
Często zdarza się, że tekst lub inna treść pojawia się na obrazie tła. Problem polega na tym, że obraz, częściej niż nie, przytłacza treść nad nim. Jednym ze sposobów rozwiązania tego problemu jest zamazanie obrazu tła. Możesz rozmazać obraz w programie Photoshop lub innym oprogramowaniu do edycji grafiki, ale jest to trochę nieefektywne, zwłaszcza że XD może teraz obsłużyć to zadanie. Oto jak:
- Utwórz nowy obszar roboczy i dodaj obraz tła.
- Wybierz narzędzie Prostokąt and narysuj prostokąt nad obrazem. Po wybraniu Rectangle ustaw opcję Fill to White, a Stroke to None.
- Po wybraniu Rectangle wybierz Rozmycie tła w panelu właściwości. Trzy suwaki to Wielkość rozmycia, Jasność i Krycie. Oto, co robią:
- Ilość rozmycia: Reguluje rozmycie obrazu pod kształtem. Maksymalna wartość to +50.
- Jasność: Dopasowuje podświetlenia i cienie na obrazie. Minimalna wartość to -50, a maksymalna to +50.
- Nieprzezroczystość: Wpływa na przezroczystość kształtu i widoczność obrazu pod jego kształtem. Wartości mieszczą się w zakresie od 0% do 100%.
Jeśli naprawdę chcesz "zmienić rzeczy", zmień kolor kształtu i graj za pomocą wartości Krycie, aby zmienić "wygląd" obrazu.
04 z 07Utwórz Scrim w Adobe Experience Design
Powszechnym problemem projektowym są elementy elementów interfejsu, które muszą być wspólnym kolorem, ale są tracone po umieszczeniu na obrazie tła lub jednolitym kolorze. Rozwiązaniem jest siatka. Scrim to nieco nieprzezroczysty gradient umieszczony między elementem interfejsu a tłem. Jest to łatwe do osiągnięcia w XD. Oto jak:
- Utwórz swój obszar roboczy na XD, dodaj obraz, skopiuj i wklej elementy interfejsu z odpowiednich Zestaw UI - plik> Otwórz zestaw interfejsu użytkownika … - do obszaru roboczego. Na powyższym zdjęciu zdjęcie utrudnia wyświetlanie paska stanu i paska aplikacji.
- Wybierz narzędzie Prostokąt i narysuj prostokąt. W panelu Właściwości wybierz Wypełnij i wybierz Gradient z rozwijanego menu w Próbniku kolorów. Ustaw kolory gradientu na Czarno-biały. Ustaw wartość A - Krycie- do 60% i Biała wartość A do 0%.
- Po wybraniu Rectangle wybierz Obiekt> Ułóż> Wyślij do tyłu. Elementy interfejsu są teraz widoczne na obrazie.
Utwórz awatar obrazka w Adobe Experience Design
Typowy wzór wzorcowy znajduje się w aplikacjach do czatu, w których ludzie rozmawiają ze sobą, a obraz rozmówcy pojawia się na ekranie. Te awatary to zazwyczaj obrazy, które zostały zamaskowane. Zadanie to jest proste w XD. Oto jak:
- Zaczynasz od zdjęcia i koła lub innego kształtu na obszarze roboczym. Możesz wypełnić okrąg dowolnym kolorem. To, czego nie musisz robić, to dodać kolor obrysu. Zniknie, gdy stworzysz efekt, więc po co zawracać sobie głowę. Jeśli chcesz zasiać okrąg, skopiuj go do schowka.
- Przesuń kółko na obraz i wybierz zarówno obraz, jak i okrąg. Wybrane obiekty bota, wybierz Obiekt> Maskuj za pomocą kształtu. Po zwolnieniu myszy zostanie utworzony Avatar. Stamtąd możesz zmienić jego rozmiar.
- Jeśli chcesz dodać obrys, wklej okrąg znajdujący się w schowku do obszaru roboczego. Po wybraniu kopii wyłącz wypełnienie Właściwości i dodaj kolor i szerokość obrysu. Aby wyrównać je, wybierz oba obiekty i kliknij przyciski Wyśrodkuj wyrównanie w opcjach Wyrównanie u góry panelu właściwości.
- Jeśli chcesz przenieść zdjęcie w masce, kliknij dwukrotnie maskę. Spowoduje to wyświetlenie obrazu i kształtu maski. Kliknij obraz i przeciągnij go na pozycję. Po zwolnieniu myszy obraz znajdzie się w nowej pozycji wewnątrz maski.
Graj w Adobeboard Design Artboards
Obszary robocze Experience Design nie tylko służą do umieszczania treści. Oni też mogą być manipulowani. Oto kilka rzeczy, które możesz zrobić:
- Jeśli potrzebujesz wersji krajobrazu i portretu obszaru roboczego, zduplikuj obszar roboczy i, przy wybranym duplikacie, kliknij przycisk poziomości w panelu Właściwości. Obszar roboczy zmieni się na orientację poziomą. Jeśli obszar roboczy zawiera treść, kliknij nazwę obszaru roboczego, a właściwości obszaru roboczego zostaną wyświetlone w panelu właściwości.
- Aby dodać niestandardowy kolor do obszaru roboczego i projektu do tego celu, wybierz obszar roboczy i kliknij układ koloru Wypełnienie w sekcji Wygląd w panelu Właściwości. Wprowadź heksadecymalną wartość koloru i kliknij znak +. Kolor zostanie dodany jako kolor niestandardowy. Aby zastosować ten kolor w innym miejscu, wybierz obiekt i kliknij układ Niestandardowy kolor, aby zastosować kolor.
- Obszary robocze można przewijać w pionie. Aby to zrobić, wybierz obszar roboczy i zmień jego wysokość na panelach Właściwości lub przeciągając dół obszaru roboczego w dół. W obszarze Przewijany panelu właściwości wybierz pionowy z menu rozwijanego i wprowadź wysokość ekranu dla ekranu. Ta przerywana niebieska linia pokazuje dół widocznego obszaru. Aby przetestować, kliknij przycisk Odtwórz i przewiń dalej. Aby wyłączyć przewijanie, wybierz opcję Brak w menu rozwijanym Przewijanie.
Edytuj zestaw mobilnego interfejsu użytkownika w Adobe Experience Design
Experience Design zawiera zestaw UI do tworzenia interfejsów iOS, Androida i Windows. Kiedy po raz pierwszy je otworzysz, możesz pomyśleć, że są całkiem dobrze ustawione. Niezupełnie - każdy z fragmentów w tych zestawach jest w pełni edytowalny. Dowiedzmy się, budując szkielet systemu Android.
- Zaczynasz od wybrania narzędzia Obszar roboczy i wybrania Android Mobile w sekcji Google panelu Właściwości.
- Wybierz Plik> Otwórz zestaw interfejsu użytkownika> Materiał Google. Spowoduje to otwarcie zestawu interfejsu Material Design UI. Wybierz lupę i markizę ton Przewodnik po ekranie przewodników. Lubię zaczynać od tego, ponieważ daje mi wskazówki dotyczące prawidłowego umieszczania elementów interfejsu na ekranie. Jeśli klikniesz na jeden z niebieskich pasków, zobaczysz, że jest zablokowany. Kliknij blokadę dołączoną do każdego z nich, aby ją odblokować. Zaznacz obszar artystyczny i skopiuj zaznaczenie do schowka. Wróć do dokumentu i wklej ekran do swojego obszaru roboczego.
- Kliknij raz pasek aplikacji znajdujący się u góry obszaru roboczego. Zwróć uwagę, jak możesz to wybrać. WcześniejszeWybierz polecenie Obiekt> Rozmiedź> Przesuń na wierzch. Twój wybór znajduje się teraz powyżej Przewodników ekranowych. To powinno Ci powiedzieć, że każdy z elementów na ekranie może być edytowany.
- Kliknij dwukrotnie pasek stanu u góry i w panelu Właściwościet the Fill color to 455A64. Kliknij dwukrotnie pasek aplikacji i ustaw jego wypełnienie na 607D8B. To powinno Ci powiedzieć, że każdy element w zestawie UI może być edytowany zgodnie ze specyfikacjami kolorystycznymi projektu.
- A co z ikonami? Oto jak zmienić ich kolor. Kliknij dwukrotnie serce aby go wybrać. Jeśli spojrzysz na panel Właściwości, możesz założyć, że nie możesz edytować zaznaczenia. Nie do końca. Kliknij dwukrotnie serce jeszcze raz. Właściwości otwierają się i zmieniasz kolor wypełnienia na FF0000. Powtórz ten podwójnie podwójny trik dla pozostałych ikon i tekstu.
