Specyfikacja Material Design od Google została pierwotnie skierowana na platformę Android jako sposób na zaproponowanie spójności projektu na platformie.
01 z 06Jak stworzyć kartę Material Design w Adobe Experience Design CC
Gdy projektanci zaczęli go przeglądać i rozumieli myślenie stojące za tym, Material Design po cichu stał się jedną z najbardziej wpływowych filozofii wizualnych w projektowaniu stron internetowych i mobilnych. Wszystko, co musisz zrobić, aby zobaczyć, co robimy, to zrobić wyszukiwanie materiałów na Pinterest, a zobaczysz setki przykładów i eksperymentów na urządzeniach, tabletach, a nawet stronach internetowych.
Fascynujący aspekt Material Design polega na tym, że Google myśli o tym, jak aplikacje powinny wyglądać i działają na urządzeniach mobilnych, ale koncepcje są stosowane na dowolnym ekranie o dowolnym rozmiarze na dowolnej platformie. Jak stwierdza Google w pierwszym akapicie specyfikacji, "Rzuciliśmy wyzwanie sobie, aby stworzyć wizualny język dla naszych użytkowników, który syntetyzuje klasyczne zasady dobrego projektowania z innowacją i możliwością technologii i nauki. To jest materialny projekt. Ta specyfikacja jest żywym dokumentem, który zostanie zaktualizowany, gdy będziemy nadal rozwijać założenia i specyfikę projektowania materiałów ".
Materiałem, o którym mówiono ogólnie, jest papier i cechą charakterystyczną Material Design jest karta. Pomyśl o karcie indeksu na powierzchni i jesteś na dobrej drodze. Karta jest elementem zawierającym zdjęcia, filmy, linki tekstowe itd., Ale tam, gdzie różnią się one od większości projektów interaktywnych, koncentrują się na jednym temacie. Karty mają zaokrąglone rogi, zawierają słabe cienie wskazujące, że znajdują się nad powierzchnią i jeśli wszystkie są na tej samej płaszczyźnie, określa się je jako "kolekcję".
W tym "Jak" stworzymy kartę na podstawie specyfikacji. Zamiast tworzyć kartę z różnymi narzędziami do obrazowania i rysowania, przyjdziemy do niej z innej strony. Zamierzamy użyć narzędzi w Adobe Experience Design, który jest obecnie dostępny tylko w publicznym systemie Macintosh i jest bezpłatny. Możesz pobrać go tutaj.
Zacznijmy.
02 z 06Tworzenie obszaru roboczego prototypu w Adobe Experience Design CC
Nie ma ewidentnego sposobu na utworzenie ekranu Androida z ekranu startowego w Experience Design CC (XD). To, co robiliśmy, gdy otwieramy XD, to wybrać opcję iPhone 6, a gdy otworzy się interfejs, wybieramy narzędzie Artboard na dole paska narzędzi i wybieramy Android Mobile z wyborów w panelu Właściwości po prawej stronie. Następnie przełączamy się do narzędzia wyboru, klikamy raz na nazwę obszaru iPhone'a i usuwamy obszar roboczy. Już nie.
W obecnej wersji XD znajduje się mała strzałka obok iPhone'a 6, która po kliknięciu otwiera rozwijane menu. Z tego miejsca wybierzesz wersję Androida na urządzenia mobilne i wybrany obszar roboczy Android Mobile otworzy się w interfejsie.
Aby upewnić się, że mamy odpowiednią przestrzeń na ekranie dla karty, zwykle udajemy się do Szkicu 3 i kopiujemy i wklejamy Pasek stanu, Pasek nawigacji i pasek aplikacji z Szablonu Material Design do obszaru roboczego. Szkic 3.2 zawiera szablon Material DesignPlik> Nowy z szablonu> Projekt materiału) i kolejny naprawdę dobry darmowy jest od Kyle'a Ledbettera, który można uzyskać tutaj. Jeśli nie masz Sketcha, możesz je skopiować i wkleić z naklejonych XD naklejek Plik> Otwórz zestaw interfejsu użytkownika> Materiał Google. Możesz także pobrać je z Google do wykorzystania w Photoshopie, Illustratorze, After Effects i Sketch.
03 z 06Dodanie karty Material Design do arkusza roboczego Adobe XD CC
Jedną z najbardziej przydatnych funkcji XD jest włączenie zestawów UI dla Apple iOS, Google Material i Microsoft Windows. Pod wieloma względami dodają słowo "Rapid" do terminu "Rapid Prototyping", a także ułatwiają pracę projektanta, ponieważ często elementy interfejsu użytkownika nie muszą być stale odtwarzane w aplikacji Design, takiej jak Photoshop, Illustrator lub Naszkicować.
Elementem, którego potrzebowaliśmy, była karta. Aby do niego dotrzeć, wybraliśmy Plik> Otwórz zestaw interfejsu użytkownika> Materiał Google i zestaw został otwarty jako nowy dokument. Potrzebny element został znaleziony w kategorii Karty.
Uwielbiamy to, że są zgodne ze specyfikacją Material Design zawartą w specyfikacjach Content Blocks, a także specyfikacjami formatowania tekstu i odstępów określonymi w specyfikacji Typography.
Styl karty, który chcieliśmy, to ten w lewym dolnym rogu. Po prostu zaznaczamy je myszą i kopiujemy do schowka. Niestety, XD nie zawiera interfejsu z kartami otwartych dokumentów. Co robimy, przesuń nieco okno otwartego dokumentu, aby odsłonić to, nad którym pracujemy, wybierz je i wklej. Innym sposobem szybkiego przełączania się między otwartymi dokumentami XD jest naciśnij Command- '.
04 z 06Jak edytować materiałowy element projektu w Adobe Experience Design CC
Kiedy karta w XD pojawia się ze schowka, nie baw się dobrze z nią. Pierwszą rzeczą, którą musisz zrobić to Rozgrupuj kartę ponieważ potrzebujesz dostępu do bitów i elementów tworzących kartę. Aby to zrobić, wybierz kartę i wybierz Obiekt> Rozgrupuj lub naciśnij Shift-Command-G.
Twoja karta składa się teraz z trzech części:
- Jasnoszare pudełko dla obrazu.
- Średnio szare pudełko na tekst
- Back box używany jako tło.
Pierwszym krokiem jest usunięcie jasnoszarego pudełka. Jego jedynym celem jest działanie jako element zastępczy obrazu, który sprawia, że jeśli wybierzesz, opcjonalne.
Pole z tekstem jest w rzeczywistości ciemnoszare z 50% kryciem. To pole może być używane jako tło tekstowe i można zmienić kolor i przezroczystość pudełka.
Choć nie jest to od razu oczywiste, jasnoszare pudełko jest zgodne ze specyfikacją Material Design, ponieważ jego górne rogi są zaokrąglone o 2 piksele. Miej to na uwadze, jeśli dodajesz obraz. Potrzebne będą również zaokrąglone rogi, które można dodać do aplikacji do obrazowania lub XD.
Widząc, jak jest to stan spoczynku karty, również potrzebuje cienia. Specyfikacja wyraźnie pokazuje spoczynkową wysokość karty 2 piksele. Aby dodać to, wybierz czarny kształt tła i ustaw wartości Y i B (Rozmycie) na 2 w panelu właściwości.
05 z 06Jak dodać obraz do karty Material Design w Adobe XD CC
Znając kartę ma 344 piksele szerokości, a obszar obrazu ma 150 pikseli wysokości ( połowa wysokości jasnoszarego pudełka ) Otworzyliśmy obraz w Photoshopie, przycięliśmy go do rozmiaru i zapisaliśmy za pomocą opcji @ 2x w Photoshopie Eksportuj jako Okno dialogowe. Obraz został zaimportowany do Adobe XD.
Następnie przeciągnęliśmy jasnoszare okienko nad obrazem na stole montażowym i wybraliśmy Obiekt> Maska z kształtem. Rezultatem był obraz zbierający zaokrąglone narożniki kształtu. Następnie przenieśliśmy obraz do jego ostatecznej pozycji.
Po umieszczeniu obrazu zmieniliśmy kolor tła w polu Medium gray, zmieniliśmy tekst i kolor tekstu linku.
06 z 06Korzystanie z funkcji Adobe XD CC Grid
Po wypełnieniu karty należy ją teraz odpowiednio umieścić zgodnie ze specyfikacją Material Design. Oznacza to, że po obu stronach karty jest 8 pikseli, a karta musi znajdować się 8 pikseli poniżej paska aplikacji. Aby to zrobić, kliknij raz nazwę obszaru roboczego, a następnie w panelu Właściwości wybierz polecenie Siatka. Siatka pojawia się nad obszarem roboczym.
Domyślny rozmiar siatki to 8 pikseli, które mają taki sam rozmiar siatki dla Material Design. Jeśli potrzebujesz innego rozmiaru, zmień wartość w polu Grid. Jeśli chcesz zmienić kolor siatki, kliknij układ kolorów i wybierz kolor z wynikowego próbnika kolorów.
Po wyświetleniu siatki kliknij kartę i ustaw ją w końcowej pozycji.
Aby zakończyć, wybraliśmy kartę, kliknęliśmy przycisk Powtórz Grid i zmieniliśmy odstępy między kartami na 8 pikseli.
