Projektowanie dla WATCH

W związku ze zbliżającą się premierą Apple najnowsze i jaskrawą produktu, Apple obserwować (się mylić, ci oglądać) istnieje wiele projektantów tam chyba poczuć nowe zabawki, aby wyjść z Cupertino.  Istnieją pewne nowe sposoby interakcji z urządzeniem; jak Apple, siły menu dotykowego i cyfrowego korony, a także wiele elementów interfejsu użytkownika, które mogą być już znane, takie jak przyciski, style tekstu i przełączniki, Boże mój!

 Przed przystąpieniem do sprawdzania elementów interfejsu użytkownika, znajdujących się na pierwszej okładce Jabłko oglądać let ' s pewne podstawy, które należy mieć na uwadze przy projektowaniu nowego urządzenia.  W chwili pisania artykułu Apple obserwować jeszcze nie wyszedł, więc jeśli masz jakieś wskazówki, uwagi lub poprawki, proszę dać mi znać w Twitterze lub w komentarzach.

Fizyczna Przywiązanie

 Po pierwsze, Apple obserwować fizycznie podłączony do użytkownika. Pamiętać o tym związku i jak to zrobi użytkownicy czują się przy współpracy z interfejsem.

 Co sądzicie zamiarach firmy Apple w odniesieniu do emocji swoich użytkowników, Apple obserwować? Jeśli ta reklama odpowiada treści strategia Apple, wtedy emocje wyraża radość, podniecenie, dreszczyk emocji i cud, cały czas przekazując poczucie personalizacji z wykorzystaniem różnych zakresów zegarka, kolorów i obserwować osoby.  Jak można wyrazić te same uczucia z projektowania aplikacji patrzeć? W jaki sposób fakt, że zegar dołączający użytkownikowi zmienić sposób, użytkownik może czuć się o projektowaniu aplikacji?

 Zachować to proste

 Apple watch nie jest tak potężny, jak swój nowy smartfon.  Przy projektowaniu dla web i mobile czasami winny w użyciu dość obrazu za jeden mniejszy.  W przypadku Apple watch, musimy pamiętać, aby zachować rzeczy, jak wiatr, jak to możliwe, przecież zbędne kilobajtach naprawdę zrobić różnicę.

 Хреновей urządzeń w sieci (na niskich końcowych komórkowych) mają podobne cechy do najnowszych technologii (smart-zegarek). Projekt dla wszystkich, zawsze.

 — Todd Parker (@toddmparker) 19 marca 2015

Użytkownicy nie chcą powoli i niemrawo doświadczenie.  Korzystanie z dużych obrazów i animacji nie tylko stworzyć złe wrażenie użytkownika, może również sprawić, że twoja aplikacja odrzucone, kiedy przyjdzie na to czas wysłać go do firmy Apple.

Wszelkie iOS #applewatch deweloperów, że istnieją aplikacje, zatwierdzonego za dużo animacji - mój dużo i się martwić o odmowie https://t.co/5tmnBY3Qm4

— Henry tonę (@archtrainer) 3 kwietnia 2015 roku

Zapytaj siebie: "moje animacje naprawdę konieczne?"  Animacja jest zła, jeśli powodują opóźnienia, niezależnie od ich ulepszanie.  Pamiętaj, że budujesz coś dla komputera, wielkości znaczka pocztowego, który ma również bezprzewodowego przepływu danych z telefonu. Istnieje wąskie gardło.

Udawaj, że można zbudować stronę na początku lat 90-tych, który musi przenieść swoje dane przez modem 14.4 do użytkownika na komputerze z procesorem 386 i 2 MB pamięci ram.  Nie stosować niestandardowe czcionki, animacje i duże biblioteki JavaScript, w tej sytuacji? Zachować rzeczy lekkie. Zbudować dla prędkości i szanuj czas swoich użytkowników. Oprzeć się pokusie, aby olśnić. Zapisz interakcji znaczące. Nie używać zbędnych animacji.  Pij dużo wody. Bądź miły i уважительны do otoczenia.  Słuchaj swojej matki.

 "Jeśli mierzysz interakcji z aplikacji iOS w ciągu kilku minut, można spodziewać się interakcji z aplikacji WatchKit, Aby być mierzone w sekundach. Tak trzymać interakcji krótko i interfejsy prostego". – Zobacz Zasady Interfejsu Użytkownika Od Apple

Kolor i typografia

 Użycie koloru i czcionki ma znaczenie w brandingu aplikacji, ale istnieją pewne kluczowe kwestie, o których warto pamiętać.

 Kolor

  "Kolor pomaga zapewnić wizualną ciągłość i marki dla twojej aplikacji." – Zobacz Zasady Interfejsu Użytkownika Od Apple

• Używać czarnego tła. Użyj czarny jako tło.  To będzie połączone z fizyczną ramka ekranu i zapisywać iluzję bez krawędzi ekranu.  Nie należy stosować jasne tła.
• Użyj kontrastującym kolorze teksu.  Pamiętaj, że zegar nie jest używane przez dłuższy okres czasu, użytkownicy powinni mieć możliwość zapoznania się szybko i łatwo treść.
  
• Uważaj daltonizmu.

Typografia

 Dla wszystkich oznacza użycie niestandardowych czcionek, ale należy pamiętać, że czcionki systemowej został zaprojektowany, aby dobrze pracować na tego nowego urządzenia.

 "Przede wszystkim tekst musi być czytelny.  Jeśli użytkownicy nie mogą czytać słowa w swojej aplikacji, niezależnie od tego, jak piękna typografia." – Zobacz Zasady Interfejsu Użytkownika Od Apple

Zalety czcionki systemowej (San Francisco) obejmują:

• Конденсированные symbole zajmują mniej przestrzeni poziomej.
• W dużych ilościach znajdują się one bardziej luźno i mają duże otwory symbol.
  
• Interpunkcja dostaje proporcjonalnie więcej, gdy czcionka jest coraz mniej.
  

Style Tekstu

 Style tekstu semantycznego opisu planowanego wykorzystania czcionek.  Przykładami są takie rzeczy, jak nagłówek, ciało itp.  Jesteś prawdopodobnie zna z HTML-odpowiedniki i tym podobne.  Jeśli korzystasz z wbudowanych stylów tekstu, otrzymasz bezpłatny dynamiczny rodzaj wsparcia, który automatycznie reaguje na ustawienia dostępu użytkowników.  Jeśli używasz niestandardowe czcionki, trzeba zrobić trochę pracy, aby podjąć funkcji.

Przestrzeń

Apple watch-to mniej, niż smartfon, to oczywiste. Wszystkie dostępnego miejsca trzeba korzystać mądrze, aby zrobić interakcji użytkowników będzie robić jak najbardziej przyjemny. Trzymaj przyciski są duże, więc łatwo komunikować się z nimi. Rozważyć sposoby korzystania z dotykowego menu Force dodatkowych opcji.  Oprzeć się pokusie, aby wyświetlić logo w aplikacji, istnieją inne sposoby, aby marka twojej aplikacji za pomocą kolorów i obrazów, która jest znaczące i контекстуальной.

"Przestrzeń na Apple watch na wagę złota, a każde pojawienie się logo zajmuje przestrzeń od treści, które użytkownicy chcą widzieć." – Zobacz Zasady Interfejsu Użytkownika Od Apple

Apple watch ma opaskę na krawędziach, który dodaje fizyczny dodatku do projektu.  Dlatego nie trzeba dodawać pola na krawędziach ekranu.

 To wygląda trochę dziwnie na początku, kiedy rozwój w Xcode, jak nie zobaczysz takiego wcięcia na krawędziach, ale utrzymać go w myślach do swoich projektów:

Rozmiar Ekranu

 Aplikacje wyświetlają ten sam interfejs na oba rozmiary Apple watch (38 mm i 42 mm), dlatego z pomocą jednostkach względnych można zezwolić na elementy, aby rosnąć i kurczyć, aby wypełnić dostępną przestrzeń na obu wymiarach. Ekran jest zawsze w trybie portretowym: wysokość jest większa niż szerokość.

Nawigacja

W aplikacji WatchKit można spotkać dwie zupełnie różne schematy nawigacji:

Hierarchiczna

 "Hierarchiczna" - to szablon nawigacyjny, który zawiera wykaz pionowego przewijania, aby użytkownik mógł zrobić jeden wybór (kliknięcie) na ekranie, aż do osiągnięcia pożądanego celu.

Strony

"Strony" - to poziomego przewijania styl nawigacji, która wskazuje na bieżącą stronę serią punktów wzdłuż dolnej części ekranu oglądać.

 Nie można połączyć te dwa systemy w tej samej aplikacji, ale można wyświetlić "licznikach arkusze", niezależnie od rodzaju nawigacji.

Arkusze Robocze

 Można wymyślić режимный arkusz jak mapa, która daje użytkownikowi możliwość, aby wykonać zadanie.  Modal arkuszy zawiera jeden ekran lub kilku ekranów wyświetlanych na stronie układu.  Jedyna różnica między tymi dwoma jest dodanie punktu obrotu w dolnej części strony-interfejs.

 Nie dodać przycisk Zamknij, aby twój режимный arkusz, jak jest jeden w lewej górnej części ekranu domyślnego.  On zawsze jest biały, chociaż można zmienić tekst z bliskiej anulować lub jeszcze coś dodać więcej sensu.  Użytkownik może również zamknąć modalne arkusz, przesuwając od lewej krawędzi ekranu.

Wszelkie przyciski, które zostały dodane na modalnych arkuszy musi wykonać czynność, są one przeznaczone dla i zamknąć modalne arkusz, więc użytkownik nie musi wykonywać tę dodatkową operację. Firma Apple oferuje nie dodać drugi modalne interfejs z pierwszego–trzeba robić, więc to może być przyczyną odmowy przy wysyłaniu aplikacji.  Jeśli Apple ostrzega przed czymś lepiej słuchać, jeśli masz ważny powód, aby tego nie zrobić.

 Interakcja

 Tam może być więcej możliwości interakcji użytkownika z aplikacją w przyszłych pokoleniach (na przykład, multi-touch i nowe gesty), ale teraz to jest jedyny sposób.

•  Jednokrotne naciśnięcie - służy do takich rzeczy, jak naciśnięcie przycisku i wybór.
•  Społeczeństwa gestów - pionowy przesuń palcem, aby przesunąć hiearchial ekrany, poziome machnięcia, aby poruszać się po stronie ekranu, lewą krawędź przewijania w poziomie, aby powrócić do poprzedniego ekranu.  Nie ma sposobu, aby to zrobić przesuwając pracy poza przejścia pomiędzy stronami lub w pionie tabeli.
•  Siła dotyku - kliknij na zegar, aby otworzyć menu, związane z bieżącym ekranem.
• Pokrętło Digital Crown - koło boku zegarka może służyć w aplikacji pozwala na pionowe przewijanie tylko.

Spogląda

 Wygląd interfejsu opisano Apple jako "dodatkowy sposób dla użytkownika, aby wyświetlić informacje z aplikacji".  Myślę, że informacje można szybko na jednym ekranie, jak tym razem. Twoich danych użytkowników chcesz obejrzeć często? Pomyśleć o tworzeniu "rzut oka", aby wyświetlić te informacje.

 Poglądy są zbudowane z wielu gotowych szablonów do górnej i dolnej części ekranu.  Poglądy nie przewijać przez użytkownika i otwórz aplikację do odpowiedniego ekranu, gdy użytkownik kliknie na jeden.  Poglądy nie są wiążące i nie wymagają.

 Grupy są kontenerami dla obiektów w aplikacji, można o nich myśleć jak się trochę jak ДИВС w HTML.  Grupy mają wcięcia domyślne, które można zmienić lub usunąć, jeśli chcesz. Mają domyślny wygląd, ale są atrybuty dla ustawienia instalacji, promień krzywizny, rozmiar, odstępy i tło.  Możesz ustawić grupę dla układu elementów w poziomie lub w pionie, można zagnieździć grup wewnątrz innych grup, aby tworzyć bardziej skomplikowane układy.

Oto niektóre z górnej i dolnej grupy szablony dla wygaszacza ekranu:

Powiadomienia

Powiadomienia są wyświetlane dla użytkownika w dwóch różnych formach: w skrócie-patrz i słuchaj.

W Skrócie-Patrz Powiadomienia

 Tymi poinformować użytkownika, że aplikacja jest informacją i daje tytuł.  Jeśli użytkownik szybko obniża ich na nadgarstku lub nie z kranu, powiadomienie bez satysfakcji. Użytkownik nie musi ręcznie wchodzić w interakcje z informacją, aby go usunąć.  Projekt z krótkim-zobacz ogłoszenia na podstawie szablonu i zawiera ikonę aplikacji, nazwa programu i tytuł wiersza. Zachowaj swoją nagłówek wiersza, jak krótki i rzeczowy, jak to możliwe.

Od Dawna Oglądam Powiadomienia

 Zapewniają one bardziej szczegółowo o alercie i bardziej konfigurowalny w swoim wyglądzie. Podstawowa struktura jest taka sama dla wszystkich aplikacji i obejmuje skrzydła w którego górnej części wyświetlana jest ikona i nazwa aplikacji, treści użytkownika aplikacji, do czterech przycisków i, w końcu, zwolnić przycisk na dole.

Elementy interfejsu użytkownika

Z tymi podstawami trwale utrzymują się w twoim umyśle, przyjrzyjmy się różne elementy interfejsu użytkownika Apple obserwować.

 "Jak ci projekt elementów graficznych aplikacji, pamiętaj, że każdy niestandardowy element powinien wyglądać i funkcjonować sam w sobie, ale także musi wyglądać, jak należy się z innymi elementami w aplikacji, czy są one na zamówienie lub standardowe." – Zobacz Zasady Interfejsu Użytkownika Od Apple

Animacje

Dynamiczne animacje muszą być przekazywane z iPhone prowadzi do nieuniknionego opóźnienia. Aplikacja Zegar, być może, zostały odrzucone z powodu silnego uzależnienia od animacji, więc używaj ich tylko do transmisji danych o stanie i informacji zwrotnej z użytkownikiem.  Nieodpłatne korzystanie z animacji nie jest zalecane (nawet jeśli animacja-to zabawne życie, jak tańczy dziecko).  Sklep pre-renderowane animacje za pośrednictwem sekwencji statycznych obrazów, w swoje narzędzia WatchKit zestaw aplikacji, tak, że mogą one być przedstawiane użytkownikowi szybko zamiast przenosić z telefonu.

Przyciski

 Użyć ikony zamiast tekstu przyciski umieszczone obok siebie i nie więcej niż trzy obok siebie (Apple twierdzi, że w jednym przypadku nie używać więcej niż dwa przyciski obok siebie, i w drugim przypadku korzystać z nie więcej niż trzech).

 To może wydawać się oczywiste, ale pamiętaj, że oglądać ekrany małe, aby zapisać swoje przyciski jak można–nie duże, nie jest to trudne dla użytkowników, aby kliknąć na przycisk. Przyciski mogą mieć obraz lub kolor tła, a także różnych kolorów dla tekstu.  Mogą one zawierać etykietę lub grupę obiektów i będzie mieć zaokrąglone rogi (domyślny promień zaokrąglenia być 6 punktów).

 Otwórz Menu Grupy

 Dotykowego menu Force pokazuje dodatkowe menu kontekstowego bieżącego ekranu (jeśli jest zainstalowany) do czterech działaniach.  Wyświetli działania z góry na dół, od lewej do prawej, w zależności od zamówienia, zostaną one dodane do menu. Oni nie są przewijane.

Działania menu (przyciski) wymaga obrazy i napisy. Obraz musi być tego samego koloru z przezroczystym tłem. Używać wagi linii, które nadają się do wielkości urządzenia i trudności ikony, Między w 4px i 9рх zgodnie z Apple.

 Pamiętaj, siła menu kontekstowe dotyku, jak to nowy i ciekawy sposób interakcji z urządzeniem. Zamiast dodać więcej przycisków w interfejsie, można wykorzystać moc menu kontekstowe depresją.

Ikony

 Ikony w formacie PNG kręgi.  Możesz utworzyć je jako kolory indeksowane aby zapisać kosmos, 24 bit i brak przejrzystości. Ikony nie jest tekst na ekranie zegar.

 Pobierz Apple obserwować ikonę szablon do wykorzystania we własnych projektach.

 Rozmiary ikon dla aplikacji, narzędzia WatchKit na Apple watch:

Rozmiary ikon do wykorzystania przez firmę Apple Watch na iPhone:

Zdjęcia

Użyć tego samego obrazu dla wszystkich rozmiarów ekranu. Szybkość i skuteczność, niezwykle ważne jest, aby zmniejszyć swoje zdjęcia jak najwięcej.  Spróbuj zapisać swoje pliki PNG z kolorami indeksowania na stałe czarne tło zamiast przezroczystego tła. Utworzyć wszystkie aktywa obrazu jak @2x zasobów; nie ma potrzeby, aby stworzyć nie-Retina obrazu.

Kompresować pliki PNG z narzędziami, jak tinypng, pngout i pngcrush. ImageOptim-jest to świetny darmowy program dla użytkowników komputerów Mac.

Karty

Mapy są statyczne screeny lokalizacji i nie są interaktywne. Klikając na mapie przeniesie użytkownika w aplikacji mapy.

Tagi

Etykieta-to fantazyjny sposób na powiedzenie "statyczna linia tekstu".  Nie przewiduje bezpośredniej interakcji z użytkownikiem, chociaż to mogą być aktualizowane programowo i może obejmować kilka wierszy.

Separator

 Separator jest prosty i cenny element interfejsu użytkownika: linia podziału zawartości.

 Suwaki

Suwaki pozwalają użytkownikom na wprowadzanie zmian, klikając na obrazek po lewej stronie i po prawej stronie. Jeśli nie dostarczysz domyślnych obrazów-to plus (+) i minus (-)

Przełączniki

Przełączniki dać użytkownikowi możliwość wybrać jeden z dwóch wariantów. Włączone lub wyłączone, tak lub nie, itp Stylistycznie będą ci znane z iOS i zawsze zawierają etykietę.

Stoły

 W tabeli przedstawiono szeregi danych w jednej kolumnie, że użytkownik może przewijać w pionie. Trzymaj stoły mniej niż 20 wierszy, jak to trudno przewinąć.  Jeśli masz więcej niż 20 wierszy, można dać użytkownikowi możliwość pobrać jeszcze.  W tabeli zmienia się dynamicznie na podstawie liczby wierszy, które zawierają. W rezultacie, tabel ignorować wszelkie ograniczenia wysokości nałożonych na nich grup. Apple zaleca, aby nie noclegów stołów w grupach.

Na Zakończenie

 Zobacz firmy Apple, jest to nowa platforma, która będzie nadal rozwijać się jako projektanci i programiści z nim grać i tworzyć niesamowite nowe doświadczenia. Pomysły związane z urządzenia dołączony do użytkownika i może zebrać serca i inne informacje, będzie nadal się rozwijać.  Jeśli masz nowe pomysły, jak lepiej pracować i tworzyć nowe ciekawe interakcje z tymi systemami, daj nam znać!

Dodatkowe Zasoby

•  Szablon Apple obserwować Photoshop szablon ikonę Apple obserwować aplikacja

• ПСД układy broni narodów
• 3D-рендеров z przezroczystym tłem
• Apple obserwować graficzny zestaw
• Apple watch zestaw interfejsu użytkownika .szkic zasobów