Advertisement
  1. Code
  2. Apple Watch

Projektowanie na Apple Watch: projektowanie Glance w Sketchu

by
Read Time:5 minsLanguages:
This post is part of a series called Designing for Apple Watch.
Designing for Apple Watch: Design Guidelines

Polish (Polski) translation by Pawel Barwikowski (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Jeśli to pierwszy raz, kiedy projektujesz na użytek urządzenia do noszenia, możesz zauważyć, że istnieją pewne kluczowe różnice w porównaniu z projektowaniem takiego produktu na potrzeby smartfona czy komputera stacjonarnego.

W ten szybkim poradniku I zwrócę uwagę na te różnice ucząc Cię jednocześnie, w jaki sposób projektować w przypadku Apple Watch.

Zanim zaczniemy

Będziemy projektować Glance na Apple Watch. Dla przypomnienia Glance (spojrzenie) jest pojedynczym ekranem bez elementów interaktywnych. Po prostu wyświetla informacje i można go wykorzystać poprzez stuknięcie do otwarcia odpowiedniej aplikacji Apple Watch.

Użytkownik może uzyskać dostęp do Glance, przesuwając palcem w górę na ekranie zegarka. Użytkownik może również wybrać Glance, które chciałby zobaczyć na swoim Apple Watch. To zależy od tego na co godzi się użytkownik, co oznacza, że musi on wyraźnie wybrać Glances, które chce zobaczyć na swoim urządzeniu. Jest to elegancki i prosty sposób na pokazanie informacji o swoich ulubionych aplikacjach.

Tym, co odróżnia Glance od samej aplikacji jest pojedynczy ekran, który w rezultacie, ładuje się szybciej niż aplikacja. Glance jest także łatwiejszy i szybszy w dostępie niż odpowiednia aplikacja Apple Watch.

Wytyczne dotyczące projektowania

Apple Watch Design GuidelinesApple Watch Design GuidelinesApple Watch Design Guidelines

Projektowanie na Apple Watch oznacza, że trzeba pamiętać o pewnych wytycznych. Jest to podobne do projektowania dla systemu iOS lub Android. Dowiesz się więcej na temat zasad projektowania z wcześniejszego tutorialu z tej serii.

Projektowanie Glance

Wyobraź sobie aplikację Apple Watch, w której użytkownik może z łatwością śledzić swój budżet. W naszym Glance chcemy wyświetlić budżet dzienny, który będzie także wyświetlał ilość pieniędzy, którą udało się użytkownikowi zaoszczędzić dotąd w tym miesiącu. W zależności od tego, jak ktoś wydaje pieniądze w ciągu dnia dzienny budżet się zmniejsza.

Krok 1: Konfigurowanie obszaru roboczego

Otworzyć Sketch i wstaw nowy obszar roboczy. Na liście po prawej stronie przedstawiono różne predefiniowane obszary kompozycji, spośród których możesz dokonać wyboru. W urządzeniach z systemem iOS wybierz opcję Apple Watch 42mm.

Kliknij w obszarze roboczym na liście warstw i wybierz kolor tła za pomocą panelu po prawej stronie. Wybierz czarny (#000000) jako kolor tła. Czarny jest domyślnym kolorem tła dla aplikacji Apple Watch.

Artboard With Black BackgroundArtboard With Black BackgroundArtboard With Black Background

Krok 2: Glance Tytuł

Ze względu na czarny bezel zegarka (pierścień, który znajduje się na kopercie) Apple Watch w naszym projekcie możemy użyć kompozycji od jego brzegu do brzegu, . W przeciwieństwie do typowych aplikacji czy web designu, dodanie marginesów na lewo lub na prawo w Twoim projekcie nie jest konieczne.

Dodaj tytuł, "Budżet", dzięki któremu użytkownik będzie świadomy, jaki Glance ogląda. SF Compact jest domyślną czcionką używaną na Apple Watch. Możesz dowiedzieć się więcej o typografii dla Apple Watch na witrynie programisty firmy Apple. Dla zegarka z kopertą 42mm najlepiej zachować 32pt (dla projektów 72 dpi). Tekst powinien być wyrównany w lewym górnym rogu.

Artboard With Glance TitleArtboard With Glance TitleArtboard With Glance Title

Wreszcie zmień kolor tytułu na jasno szary (#a2a5ae), aby zmniejszyć kontrast czerni i bieli w projekcie. Biały powinien być zarezerwowany dla informacji, które chcemy wyróżnić, takich jak pozostały budżet.

Krok 3: Dzienny Budżet

Najważniejsza cecha twojego Glance polega na wyświetlaniu dziennego budżetu użytkownika. Możemy przedstawić to w formie tekstowej, ale sprawmy, aby nasz projekt był bardziej interesujący. Chciałbym zaprojektować okrągły wykres, który maleje, wraz z tym jak użytkownik wydaje pieniądze.

Najpierw użyj narzędzia owal do stworzenia okręgu o rozmiarze 220 na 220. Wyśrodkuj kształt w obszarze roboczym i ustaw szerokość obramowania na 24. Kliknij ikonę ustawień obok granicy tytuł, aby otworzyć menu Ustawienia obramowania. Ustawić Odstęp na 1000 i Dash na 138. Na koniec wybierz zaokrąglone końcówki. Dobra robota, właśnie utworzyłeś granice pierścienia.

Border RingBorder RingBorder Ring
W menu Ustawienia obramowania można utworzyć granice pierścienia.

Wyłącz kolor wypełnienia okręgu i zmień kolor obramowania na wybrany przez siebie gradient kątowy. Można użyć funkcji Obróć do poruszania kształtem na ekranie, ale nie jest to konieczne dla projektu naszego Glance .

Colored Border RingColored Border RingColored Border Ring
Gradient kątowy jest doskonały do kolorowania granicy pierścienia.

Kliknij prawym przyciskiem myszy na owal na liście warstw i powiel element. Otwórz ustawienia obramowania zduplikowanego kształtu i ustaw Dash na 690. Przenieś powieloną warstwę pod oryginalną, owalną warstwę i, aby ukończyć grafikę, dostosuj kolory gradientu i przeźroczystość. W poniższym przykładzie użyłem kątowego, szaro-czarnego gradientu z obniżoną przeźroczystością.

Completed Border RingCompleted Border RingCompleted Border Ring

Następnie dodaj warstwę tekstową z kopią "Pozostało 14,00 $". Ustaw rozmiar czcionki "$14.00" na 38 pt i rozmiar czcionki "pozostało" na 26 pt. Wyśrodkuj tekst w obszarze roboczym. Nasz Glance powoli zaczyna się układać w całość.

Daily Budget CompletedDaily Budget CompletedDaily Budget Completed

Krok 4: Oszczędzone Pieniądze

Wreszcie musimy także wyświetlić ilość pieniędzy, którą użytkownik zaoszczędził do tej pory w danym miesiącu. Będziemy używać do tego dolnej części Glance, aby dodać te informacje. Ponieważ mamy już element graficzny w centrum naszego Glance, będziemy używać tekstu aby wyświetlić kwotę, którą użytkownik zaoszczędził. Spowoduje to utworzenie dobrze wyważonego i przejrzystego Glance.

Utwórz nową warstwę tekstową i użyj SF Compact jako czcionki lekkiej wadze czcionki. Teraz stworzymy tekst w stopce. Wybierz rozmiar czcionki na 20 pt i ustaw tekst w następujący sposób"265,00$ zaoszczędzone w tym miesiącu". Wyrównaj tekst do lewej w dolnej części obszaru roboczego.

Tym, co jest ważne przy projektowaniu Glance jest to, że na dole twojego projektu pojawi się podział strony. Użytkownik może szybko dokonywać zmiany między Glances z różnych aplikacji. Przenieśmy tekst stopki w górę o 40 punktów, aby dodać na dole jakiś margines.

Ponieważ przenieśliśmy tekst stopki w górę, budżet dzienny jest niewyśrodkowany. Przenieś w górę grupę zawierającą tekst i różne owale o 20 punktów. I gotowe.

Budget SavingsBudget SavingsBudget Savings

Wniosek

Z kilku prostych kształtów i trików stworzyliśmy elegancki Glance na Apple Watch. Jeśli chcieliby Państwo dowiedzieć się więcej o tworzeniu produktów dla Apple Watch, polecam przeczytanie samouczka o wyborze strategii produktowej lub zdobycie dodatkowej wiedzy o wytycznych w zakresie projektowania na Apple Watch.

Jeśli masz jakiekolwiek pytania dotyczące projektowania na Apple Watch, sięgnij do komentarzy lub na Twitter. Dziękujemy za Twój czas.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.