Projektowanie responsywnego odtwarzacza muzycznego w szkicu (część 2)

Naszym założeniem przy tworzeniu wszystkich ikon jest używanie podstawowych kształtów tak często, jak to możliwe, zamiast niestandardowych elementów wektorowych. Kształty są znacznie łatwiejsze w konfiguracji i modyfikacji, a my nadal będziemy mogli łączyć je w bardziej złożone formy za pomocą operacji logicznych.

Dalsze czytanie na SmashingMag:

• Używanie szkicu do projektowania responsywnych stron internetowych
• Szkic vs. Figma: Rozgrywka
• Projektowanie z rzeczywistymi danymi w szkicu za pomocą wtyczki Craft
• Szkic z Material Design

Siatka bardziej utrudniałaby niż pomagała w tworzeniu ikon, więc możesz ją ukryć za pomocą Ctrl + G .

Zacznijmy od ikony powtarzania w lewym dolnym rogu.

Powtarzaj za mną

Ikona powtarzania jest oparta na prostym prostokącie o wymiarach 22 × 12 pikseli i całkowicie zaokrąglonych rogach. Zmień ponownie wypełnienie na obramowanie, aby ustawić pozycję na „środek”, a grubość na „2. Jako kolor wybierz biały; „Koniec” musi być ustawiony na środkową ikonę w opcjach obramowania. Istnieje również szansa, że ​​będziemy chcieli użyć tych samych właściwości dla innych ikon, więc skonfiguruj styl współdzielony: Kliknij menu rozwijane w Inspektorze z napisem „Brak stylu współdzielonego”, wybierz „Utwórz nowy styl współdzielony” i nazwij to „Ikony”.

Po powiększeniu prostokąta za pomocą Cmd + 2 przejdź do trybu punktów wektora za pomocą Enter . Dodaj pierwszy punkt do prostego odcinka w lewym dolnym rogu, gdzie spotyka się on z krzywą. Skopiuj jego pozycję X w Inspektorze; dodaj kolejny punkt po prawej stronie i wklej tę wartość, ale dodaj „+5”. Zrób to samo dla prostego górnego segmentu, ale po prawej stronie: Dodaj punkt, w którym spotyka się on z krzywą, skopiuj pozycję X , dodaj punkt po lewej stronie, wklej tę wartość i odejmij „-5px”. Teraz ponownie użyj narzędzia Nożyczki, aby wyciąć segmenty między punktami: najpierw w lewym dolnym rogu, a następnie w prawym górnym rogu.

W przypadku strzałek możemy ponownie użyć symbolu „strzałki”: włóż go, odłącz, usuń grupę, ustaw grubość obramowania na „2” i zmień jego rozmiar do wysokości 3 pikseli na płótnie trzymając Shift (tak utrzymanie tego wskaźnika). Na koniec wyrównaj go z dolnym segmentem kształtu podstawowego.

Uwaga: może to wymagać zmiany pozycji Y w odstępach co 0.1 piksela. Najłatwiejszym sposobem jest skupienie się na tym polu wprowadzania, przytrzymanie klawisza Alt i zwiększanie lub zmniejszanie wartości za pomocą klawisza strzałki w up lub down .

Na koniec zduplikuj strzałkę, odwróć ją poziomo i wyrównaj do górnego segmentu. Przenieś wszystkie elementy do grupy „Powtórz”, aby zakończyć tę pierwszą ikonę.

Losowo

Podczas gdy zaczęliśmy od prostokąta dla ikony powtarzania, ikona odtwarzania losowego jest oparta na dowolnym kształcie wektora.

Przesuń płótno nieco w prawo, z dala od pierwszej ikony i naciśnij V , aby przejść do narzędzia Wektor. Ale zanim zaczniesz rysować, ustaw menu rozwijane „Zaokrąglenie” (pod suwakiem narożników w panelu Inspektora) na „Zaokrąglaj do pełnych krawędzi pikseli”, co zapobiegnie tworzeniu punktów z liczbami dziesiętnymi.

Teraz kliknij, aby dodać punkt, a następnie przytrzymaj Shift (aby ograniczyć ruch do osi poziomej), przesuń się nieco w prawo i wykonaj kolejne kliknięcie. Naciśnięcie Escape zatrzyma proces rysowania i pozwoli ponownie skupić się na pierwszym punkcie jednym kliknięciem. Podobnie jak w przypadku ikony powtarzania, skopiuj jej pozycję X w Inspektorze, ponownie naciśnij Escape , wybierz drugi punkt, ustaw jego pole X i wstaw tam wartość, ale dodaj „+5”. Naciśnięcie klawisza Enter przesunie punkt o 5 pikseli w prawo od drugiego punktu.

Kontynuuj tworzenie kształtu wektorowego: Wstaw trzeci punkt w prawym górnym rogu jednym kliknięciem. Naciśnij Escape , ponownie ustaw drugi punkt, skopiuj jego pozycję „X”, wstaw go w trzecim punkcie, ale dodaj „+10”. Skopiuj także pozycję Y — ale dla kontrastu odejmij tutaj 10 pikseli, aby przesunąć punkt w górę. W przypadku ostatniego punktu musisz ponownie ograniczyć ruch do osi poziomej za pomocą Shift i kliknięcia w prawo. Przesuń ten jeden o 7 pikseli na osi X od trzeciego punktu. Po zakończeniu naciśnij dwukrotnie klawisz Escape .

Możesz także najpierw wstawić wszystkie punkty instynktownie, a później dopasować ich współrzędne.

Nadaj tej linii taki sam wygląd jak ikona powtarzania; wspólny styl, który ustawiliśmy wcześniej, umożliwia to. Otwórz menu rozwijane "Brak współdzielonego stylu" w Inspektorze i wybierz "Ikony".

Oprócz zaokrąglonych końców, dwa punkty środkowe również muszą być lekko zaokrąglone. Wybierz wszystkie punkty za pomocą Cmd + A , będąc nadal w trybie punktów wektorowych, i zmień narożniki na „1”. Skopiuj strzałkę skierowaną w prawo z ikony powtarzania i wyrównaj ją z wektorem w prawym górnym rogu. Umieść je w grupie i zduplikuj i odwróć w pionie, aby utworzyć drugą strzałkę. Upewnij się, że proste segmenty są na tej samej wysokości.

Musimy nieco zmodyfikować drugą strzałkę, aby łamała się tam, gdzie spotyka się z drugą. W tym celu ponownie wejdź w tryb punktów wektora dla linii, dodaj punkt przed i za przecięciem i wytnij go nożyczkami. Zaufaj swojemu poczuciu proporcji tutaj. Na koniec umieść te dwie grupy w nadrzędnej grupie „Potasuj” i ciesz się, że ukończyłeś drugą ikonę.

Mój absolutny faworyt

Trzecia ikona, która pozwala na wybranie ulubionej piosenki, jest dość prosta. Możesz nie zdawać sobie z tego sprawy, ale to serce zrobione z prostego koła. Musimy tylko trochę dostosować jego punkty i zmienić typy punktów. Utwórz go obok ikony odtwarzania losowego o średnicy 20 pikseli i nadaj mu ten sam wspólny styl „Ikony”, co poprzednie ikony.

Teraz do punktów: Przejdź do trybu punktów wektora i zmień typ punktu najniższego punktu (powinien być już wybrany) na „Prosto” za pomocą 1 na klawiaturze lub wybierając odpowiednią opcję w Inspektorze. Otóż ​​to! Przejdź do najwyższego punktu, naciskając dwukrotnie klawisz Tab , przesuń go o około 7 pikseli w dół za pomocą klawisza strzałki i zmień typ punktu na „Odłączony” za pomocą 3 , co pozwala dostosować punkty kontrolne wektora (uchwyty wystające poza punkt ) osobno. Wybierz lewy, przesuń go w górę o 6 pikseli, a także o 1 piksel w prawo. Zrób to samo dla prawego punktu kontrolnego, ale zamiast tego przesuń go o 1 piksel w lewo.

Koło już przypomina serce; wystarczy lekko dostosować pozostałe punkty po lewej i prawej stronie. Przejdź w lewo, naciskając ponownie klawisz Tab . Wymaga to punktu „asymetrycznego”; naciśnij 4 , aby zmienić na ten typ. Dzięki tej regulacji jesteśmy w stanie przesunąć górny punkt kontrolny tylko o wycięcie w górę, niezależnie od jego odpowiednika. To sprawia, że ​​serce jest nieco bardziej zakrzywione u góry. Powtórz to samo dla punktu wektora po prawej stronie (naciśnij Tab jeszcze dwa razy, aby go zaznaczyć) i prawie skończyliśmy. Wszystko, co musimy zrobić, to zmienić nazwę kształtu na „Ulubiony”. To był wiatr!

Podgłośnij

Dobrze, że mogliśmy się trochę zrelaksować przy ulubionej ikonie, ponieważ ikona głośności wymaga więcej uwagi. Składa się z dwóch prostokątów na kształt głośnika — jednego zmodyfikowanego do trójkąta — i kilku kółek na fale dźwiękowe, które w większości zostaną usunięte.

Utwórz pierwszy prostokąt o wymiarach 12 × 10 pikseli. Powiel go, przytrzymaj Alt (aby zmienić jego rozmiar od środka), chwyć środkowy uchwyt dolnej strony płótna i przeciągnij go w dół, aż będzie miał wysokość 16 pikseli. Zmodyfikuj go do trójkąta skierowanego w lewo, tak jak zrobiliśmy to w przypadku ikony tyłu: Wejdź w tryb punktu wektora i wstaw punkt pośrodku lewej strony, przytrzymując Cmd . Następnie wybierz punkty powyżej i poniżej i usuń je.

Po wyjściu z trybu punktów wektora trójkąta zaznacz go razem z prostokątem i zastosuj operację Union Boolean (za pomocą Alt + Cmd + U ). Spowoduje to utworzenie kształtu głośnika, który możesz ustawić na dobrze znany styl warstw „Ikony”. Spłaszczenie go za pomocą „Warstwa” → „Ścieżki” → „Spłaszcz” z paska menu przekształci go w pojedynczy kształt i pozwoli zmienić narożniki wszystkich punktów w trybie punktów wektorowych na „1”. Spowoduje to jednak usunięcie operacji logicznej, a wraz z nią możliwość modyfikowania poszczególnych kształtów, więc najpierw utwórz kopię zapasową i ukryj ją. Chociaż generalnie jest to dobry pomysł przed spłaszczeniem dowolnego kształtu, ta kopia zapasowa będzie potrzebna później również w innym celu.

Następnie fale dźwiękowe: Dodaj pierwszy okrąg o średnicy 18 pikseli i użyj tego samego stylu warstwy, co w przypadku kształtu głośnika. Wybierz go razem z kształtem głośnika i wyśrodkuj je na obu osiach, ale przesuń kółko kolejno o 3 piksele w prawo. Powiel go dla drugiej fali dźwiękowej, przytrzymaj Shift i Alt , chwyć narożny uchwyt i przeciągnij go od środka, aż kształt będzie miał średnicę 28 pikseli.

Teraz potrzebujemy szablonu, aby dodać kilka punktów do kół. Może być oparty na trójkącie z kształtu głośnika, którego kopię wykonaliśmy wcześniej: skopiuj, wklej i przenieś z ukrytej grupy, aby to pokazać; umieść go również na górze listy warstw, Ctrl + Alt + Cmd + up arrow . Zanim przejdziemy dalej, ukryj spłaszczony kształt głośnika za pomocą Shift + Cmd + H , ponieważ w kolejnych krokach potrzebujemy niezakłóconego widoku kół. Teraz zmień szerokość nowego trójkąta na 25px w panelu Inspektora; wysokość można pozostawić bez zmian. Ustawienie nieprzezroczystości na 50% sprawi, że kółka będą prześwitywać.

To pozwala nam wejść w tryb punktów wektorowych dla obu okręgów jednocześnie i dodać punkty, w których nakładają się na trójkąt. Tylko upewnij się, że jest wyrównany do lewej z wewnętrznym okręgiem. Resztę można wyciąć za pomocą narzędzia Nożyczki po wyjściu z trybu punktów wektorowych. Niestety musisz to zrobić dla każdego kręgu osobno. Następnie możesz usunąć trójkąt, ale ponownie pokaż kształt głośnika. Zakończ ikonę, umieszczając wszystkie jej części w nowej grupie „Głośność”.

Pokaż mi więcej

Po tylu pracy znów zasługujemy na przerwę. Na szczęście dla nas pozostała ikona „więcej” składa się z nie więcej niż trzech kropek.

Jednym ze sposobów byłoby utworzenie trzech okręgów z przesunięciem, ale zastosujemy nieco inne podejście i zamiast tego zastosujemy opcje obramowania. Ma to tylko niewielką wadę: kropki nie będą w 100% okrągłe, ale przy rzeczywistym (pomniejszonym) rozmiarze ikony prawie tego nie zauważysz.

Zacznij od poziomej linii (naciśnij L ), która ma 23 piksele i ma nałożoną 6-pikselową ramkę. Aby uzyskać kolor, ponownie użyj bieli. Otwórz opcje obramowania i zwróć uwagę na pola „Dash” i „Gap”. Pozwalają tworzyć linie przerywane lub kropkowane, z których skorzystamy. Jako myślnik wstaw „1” dla odstępu „8”. Voila, po ustawieniu końcówek na zaokrąglone otrzymasz trzy kropki! Po prostu zmień nazwę na „Więcej” i skończyliśmy wszystkie pięć ikon.

Niestety, gdy wrócisz do pełnego widoku za pomocą Cmd + 1 , zobaczysz, że ikony są rozrzucone na dole odtwarzacza muzyki. Zaprowadźmy porządek do tego bałaganu.

Pokaż siatkę ponownie (za pomocą Ctrl + G ) i użyj jej, aby wyrównać ikonę „powtórz” o 3 jednostki siatki od lewej i dolnej krawędzi. Zablokuj go za pomocą Shift + Cmd + L . Przejdź do ikony „więcej” i ustaw ją w odległości 3 jednostek od prawej krawędzi obszaru roboczego. W tej chwili wyrównanie w pionie nie ma znaczenia. Teraz wybierz wszystkie ikony (lub ich grupy) na liście warstw, w tym zablokowaną; wybierz „Wyrównaj środek” prawym przyciskiem myszy, aby wyrównać je wszystkie do zablokowanego elementu, i kliknij „Rozłóż w poziomie” z tego samego menu, aby równomiernie rozmieścić je od siebie. Pamiętaj, aby zachować ikony wybrane do następnego kroku.

Sprawy wyglądają znacznie lepiej z rozmieszczeniem ikon; jednak nadal są dość widoczne. Aby temu zaradzić, umieść je wszystkie w grupie „Ikony” (i przenieś ją na dół listy warstw) i ustaw krycie na 30% za pomocą 3 . Miły! W przypadku ikon mamy jeszcze jedną rzecz do zrobienia: Ulubiona ikona powinna reprezentować wybrany stan, a zatem mieć ten sam jasny kolor co wskaźnik postępu. Powiel i przenieś go z grupy, zmień jego nazwę na „Ulubione wyróżnienie” i przypisz odpowiedni kolor z „Kolory dokumentu”.

Po zakończeniu tej ostatniej czynności odtwarzacz muzyki jest gotowy. Do tej pory wykonałeś świetną robotę, ale co, jeśli chcemy używać odtwarzacza dla różnych rozmiarów lub szerokości urządzeń?

Pozwól, że pokażę Ci, jak sprawić, by projekt był responsywny za pomocą funkcji „Zmiana rozmiaru grupy” programu Sketch.

Od stałego do płynnego

Wymogiem dla tej funkcji jest posiadanie grupy nadrzędnej, która zawiera wszystkie utworzone do tej pory elementy. Wybierz je za pomocą Cmd + A , utwórz nadrzędną grupę za pomocą Cmd + G i zmień jej nazwę na „Kontener”.

Jeśli spróbujesz teraz zmienić rozmiar tej grupy, wynik nie będzie przyjemny, ponieważ wszystkie warstwy po prostu się rozciągną. Przy domyślnym ustawieniu menu rozwijanego „Zmiana rozmiaru” w panelu Inspektora zarówno rozmiar, jak i odstępy elementu będą zależne od grupy nadrzędnej.

Jeśli zmienimy to ustawienie dla niektórych obiektów, zaczniemy widzieć początkowe wyniki. Wybierz na przykład grupę „Przycisk Wstecz” i ustaw ją na „Przypnij do rogu”; zatrzyma to zmianę rozmiaru elementów, ale zachowa tę samą odległość od najbliższej krawędzi grupy nadrzędnej. Zrób to samo dla grupy „Przycisk listy” i spróbuj teraz zmienić rozmiar grupy „Kontener”. Te dwa elementy wykażą lepsze zachowanie.

Kontynuujmy okładkę. Ponieważ Sketch nie może jednocześnie zmienić rozmiaru warstwy i zachować jej proporcje, po prostu wyśrodkujemy element. Można to osiągnąć na dwa sposoby:

• Pierwszym z nich jest „unoszenie się w miejscu”. Zachowuje to rozmiar obiektu, ale ustawia odstępy względem grupy nadrzędnej. Dzięki temu nadaje się również do centrowania elementu.
• Drugi sposób to właściwość „Pin to corner”, którą już znamy.

Uwaga: jest jedno zastrzeżenie dla obu opcji warstw obrazu. Element nie może być mniejszy niż pojemnik; w przeciwnym razie zostanie zgnieciony. Na szczęście dla nas jest sposób, aby to naprawić: Zmień na wypełnienie deseniem. Aby to zrobić, skopiuj warstwę obrazu za pomocą Cmd + C , dodaj wypełnienie do warstwy, wprowadź jego opcje, przejdź do przedostatniego typu wypełnienia („Wypełnienie wzoru”), kliknij obszar podglądu po lewej stronie w oknie dialogowym i wklej obraz za pomocą Cmd + V . Teraz obraz zostanie przycięty, gdy pojemnik się skurczy.

Kolejnym dużym zadaniem jest wskaźnik postępu. To wymaga więcej uwagi; jednak przy kilku sprytnie rozmieszczonych podgrupach nie będzie to wcale problem. W obecnym stanie nie możemy osiągnąć tego, co mamy na myśli — paski powinny zmienić rozmiar wraz z grupą nadrzędną, ale zachować oryginalne odstępy. Ponadto okrągły wskaźnik i aktualny czas odtwarzania muszą być zgodne z pozycją kolorowego paska. Całkowity czas należy jednak przypiąć do prawej krawędzi.

Zanim zaczniemy dodawać wymagane podgrupy, możemy ustawić samą grupę „Wskaźnik postępu” na „Zmień rozmiar obiektu”; to zachowa odstępy elementu, ale zmieni szerokość względem grupy nadrzędnej. Teraz wybierz dwa paski („Pasek” i „Postęp paska”), utwórz z nich nową grupę „Bars” i ustaw ją na „Zmień rozmiar obiektu”. Powinien również zawierać grupę „Wskaźnik” (zawierającą okrągły wskaźnik i warkocz komety); zmień go z kolei na „Pływ w miejscu”. To ustawienie zapewnia, że ​​wskaźnik podąża za kolorowym paskiem. To samo dotyczy grupy „Czas postępu”. Podsumowując, przypnij całkowity czas do prawej krawędzi za pomocą „Przypnij do rogu”. Spróbuj jeszcze raz: zmień rozmiar pojemnika i zobacz, jak magia rozwija się na twoich oczach.

Ponad wzgórzem

Dla porównania, adaptacja kolejnych warstw tekstowych jest dość prosta. Grupę tytułu utworu, a także zawartą w nim warstwę tekstową, można ustawić na właściwość „Zmień rozmiar obiektu”. Zapewni to zachowanie odstępów i odsłanianie coraz większej ilości tekstu w miarę powiększania rodzica, ale gradient będzie nadal zakrywał właściwą część. Drugą warstwę tekstową można ponownie wyśrodkować za pomocą opcji „Pływ w miejscu”.

To ustawienie odgrywa również dużą rolę w przypadku pozostałych elementów, ponieważ zarówno kontrolki, jak i ikony na dole powinny zachować względny odstęp od krawędzi kontenera (w stosunku do siebie), ale ich rozmiar powinien pozostać nienaruszony. Zastosuj „Pływ w miejscu” do wszystkich wymienionych elementów (lub ich symboli lub grup). W przypadku ikon musimy wprowadzić kilka dodatkowych zmian: Chcemy przypiąć dwie zewnętrzne ikony do zewnętrznych krawędzi kontenera. Najprostszym sposobem jest ustawienie grupy „Ikony” na „Zmień rozmiar obiektu”. Pozwoli to zachować odległość do krawędzi obszaru roboczego, ale zmieni rozmiar grupy w stosunku do szerokości obszaru roboczego.

Podświetlona ikona „Ulubione” wymaga specjalnego traktowania. Obecnie nie jest powiązany z grupą „Ikony”; a przeniesienie go do tej grupy dałoby mu 30% krycia. Rozwiązaniem jest utworzenie nowej grupy „Ikona zewnętrzna”, która zawiera zarówno tę podświetloną ikonę, jak i grupę „Ikony”. Ustaw go na „Zmień rozmiar obiektu”.

Teraz mamy w pełni responsywny odtwarzacz muzyki!

Jeśli chcesz przełączyć się na zupełnie inny typ urządzenia — powiedzmy iPhone SE — wybierz obszar roboczy i wybierz „Skaluj…” z „Edytuj” na pasku menu (lub naciśnij Cmd + K ): Wprowadzanie „320px” dla „Szerokość” przeskaluje wszystkie elementy proporcjonalnie. Stamtąd szerokość iPhone'a 6 jest już tylko o krok: ustaw szerokość obszaru roboczego na 375 pikseli, wybierz grupę „Kontener” i wprowadź szerokość 100% w panelu Inspektor. Zobaczysz, że wszystkie elementy reagują poprawnie.

Wniosek

Mam nadzieję, że podobała Ci się druga część samouczka i dowiedziałeś się więcej o efektywnym korzystaniu ze Sketcha do projektowania aplikacji mobilnych. W komentarzach poniżej możesz zadawać pytania lub wspomnieć o alternatywnych podejściach do tworzenia określonej części odtwarzacza muzycznego. Możesz również skontaktować się ze mną na Twitterze (@SketchTips) lub odwiedzić mój mały projekt poboczny, SketchTips, gdzie dostarczam więcej świetnych wskazówek dotyczących korzystania ze Sketch.

Od redakcji: _Christian Krammer jest projektantem stron internetowych i profesjonalistą w zakresie aplikacji Sketch, który napisał The Sketch Handbook , naszą nową książkę o rozbijaniu. Jeśli chcesz opanować wszystkie zawiłe, zaawansowane aspekty Sketch, polecamy ci tę książkę. Jest wypełniony praktycznymi przykładami i samouczkami w 12 rozdziałach i jest dostępny zarówno w wersji drukowanej, jak i w formie e-booka._