Jak zaimplementować doskonały projekt interfejsu użytkownika w systemie iOS?

Prawdopodobnie słyszałeś zwrot „projekt z doskonałymi pikselami” niezliczoną ilość razy, nawet nie zastanawiając się, co to znaczy lub co powinno oznaczać. W ostatnich miesiącach jest szansa, że ​​słyszeliście o upadku koncepcji projektowania w pikselach, ale jest mały problem z tymi twierdzeniami, zwłaszcza jeśli chodzi o projektowanie interfejsu użytkownika iOS.

Mianowicie, definicja doskonałego projektu w pikselach nie jest wyryta w kamieniu, jak większość wytycznych dotyczących interfejsu użytkownika iOS. Ludzie różnie to interpretują, stąd problem – doskonałość pikseli może wydawać się przejściowa, ale inni będą nadal stosować tę zasadę przez kolejne lata, choć pod inną nazwą. To głównie problem z nomenklaturą.

Co to jest projekt interfejsu użytkownika w pikselach?

Ponieważ nie ma jasnej definicji perfekcji w pikselach, moje rozumienie koncepcji projektowania w pikselach polega na tym, że robi się wszystko, aby zmaksymalizować ostrość i wierność. Po zaimplementowaniu projekt wygląda identycznie na każdym wyświetlaczu iPhone'a, bez żadnych artefaktów ani problemów.

Stworzenie doskonałego co do piksela interfejsu użytkownika aplikacji na iOS oznacza, że ​​tworzysz projekt z myślą o pikselach i implementujesz dokładnie ten sam projekt na ekranie, aż do każdego piksela w przywoływanym projekcie, jednocześnie upewniając się, że jest on responsywnie dostosowany do innych urządzeń.

Ale dlaczego projekt jest idealny do pikseli?

Projektanci UI dokładają wszelkich starań, aby tworzyć interfejsy, które są łatwe do zrozumienia i interakcji. Zawodowym obowiązkiem dewelopera jest poszanowanie pracy projektanta i zaimplementowanie interfejsu dokładnie tak, jak został dostarczony.

W przypadku aplikacji niedoskonałych co do piksela użytkownicy prawdopodobnie nie napotkają żadnych znaczących problemów, które uniemożliwiłyby im korzystanie z aplikacji i korzystanie z niej, ale aplikacje z idealną jakością pikseli zdecydowanie wyglądają ostrzej, czyściej i bardziej spójnie.

Ze względu na wysoce konkurencyjny charakter Apple App Store, każdy kawałek dopracowania, który poprawia ogólny wygląd i wrażenia użytkownika, jest mile widziany. Może pomóc wyróżnić Twoją aplikację i sprawić, że będzie bardziej widoczna, a tym samym bardziej opłacalna.

Ten krótki przewodnik projektowania interfejsu użytkownika w systemie iOS przeprowadzi Cię przez proces od podstawowego etapu projektowania do wdrożenia, z perspektywy projektanta i programisty.

Tworzenie projektu interfejsu użytkownika iOS

Zacznijmy. Aplikacje z doskonałymi pikselami oczywiście zaczynają się jako projekty z doskonałymi pikselami, a wszyscy wiemy, skąd one pochodzą w dzisiejszych czasach.

Niezbędne narzędzia do projektowania interfejsu iOS

Myślę, że mam rację mówiąc, że Sketch stał się de facto standardem dla webowych i mobilnych projektantów UI/UX. Chociaż Adobe XD jest rozwijającą się alternatywą, pozostaje w tyle za Sketchem pod względem popularności.

Następnie wybierzemy rozmiar obszaru roboczego. W dzisiejszych czasach mamy urządzenia z systemem iOS o różnych rozmiarach ekranu i współczynnikach proporcji i musimy wybrać jeden rozmiar, aby stworzyć nasz projekt. Dzięki Auto Layout bezproblemowo dopasuje się do innych rozmiarów wyświetlacza. W razie potrzeby możesz utworzyć różne warianty układu dla różnych klas rozmiarów .

Jedyne prawdziwe pytanie brzmi: w jaki sposób projektant powinien dzielić się z deweloperem informacjami na temat dostosowywania projektów do różnych wyświetlaczy?

Na szczęście nie ma potrzeby zapisywania specyfikacji dla każdej z nich, ponieważ zajmie się tym wtyczka Auto Layout dla Sketch. Projektant musi jedynie ustawić żądany układ automatyczny, wyeksportować do różnych rozmiarów ekranu za pomocą jednego kliknięcia, a programista zrozumie, jak umieścić ograniczenia układu i upewnić się, że wszystko wygląda dobrze, czy to na iPhonie X, czy na starym, dobrym iPhonie 5.

Uwaga: Od wersji 44 zespół Sketch znacznie poprawił kontrolę zmiany rozmiaru, dając użytkownikom więcej możliwości i kontroli nad tym, jak powinny zachowywać się warstwy, gdy ich rozmiar nadrzędny zostanie zmieniony.

Konfigurowanie swojego projektu

Brzmi świetnie, ale nadal nie wybraliśmy rozmiaru, którego użyjemy do stworzenia naszego projektu. Według statystyk Davida Smitha na iOS, 57% wszystkich użytkowników iPhone'a polega na 4,7-calowym wyświetlaczu, wprowadzonym w iPhone'ie 6/6s, a następnie używanym w iPhone'ie 7, a nawet niedawno wprowadzonym iPhone'ie 8.

Jestem pewien, że wszyscy już znacie 4,7-calowe wyświetlacze Apple, ale jeśli nie jesteś fanem liczb, mówimy o wyświetlaczach 750 x 1334 pikseli z 326 pikselami na cal (PPI). To jest standardowy wyświetlacz Retina i w kodzie będziemy mieli połowę rozdzielczości. Dlatego proponuję zacząć od 375x667 pikseli.

Następnie musimy mieć pewność, że nasz projekt interfejsu użytkownika iOS maksymalizuje ostrość. Aby osiągnąć ten cel, musisz włączyć dopasowanie pikseli :

Oto przykład prostego prostokąta z dopasowaniem pikseli i bez niego:

Użyj Round: Full Pixels podczas edycji obiektów wektorowych:

To oczywiście tylko podstawy, a aby bliżej przyjrzeć się perfekcyjnym elementom interfejsu iOS w Sketchu, powinieneś zapoznać się z oficjalnym samouczkiem.

Zachęcamy do korzystania ze złożonych animacji wektorowych, ponieważ programista może je łatwo odtworzyć za pomocą biblioteki Lottie. Możesz odtwarzać animacje Adobe After Effects na urządzeniu mobilnym bez żadnych artefaktów skalowania. Po prostu udostępnij programiście plik JSON i to wszystko.

W miarę możliwości korzystaj z profilu kolorów sRGB. Jeśli sRGB nie wystarcza na wyświetlaczach z szeroką gamą kolorów, będziesz musiał zapewnić kolory lub zasoby graficzne (jeden sRGB, a drugi z osadzonym profilem kolorów). Szczegółowe informacje na temat profili kolorów są dostępne w wytycznych Apple HID, jeśli ich potrzebujesz.

Niestandardowy kod zapewniający doskonałe wyniki w pikselach

Świetnie! Teraz wiemy wystarczająco dużo, aby stworzyć projekt idealny do pikseli; jak dzielimy się tym z deweloperem? Oczywiście musimy sięgnąć do naszego zestawu narzędzi.

Wybór odpowiednich narzędzi

Istnieją niezwykle przydatne narzędzia do dzielenia się pracą projektanta z programistami - Zeplin. Wystarczy go użyć, a programista będzie miał prawie wszystkie niezbędne informacje, aby upewnić się, że projekt interfejsu użytkownika działa: zasoby graficzne, czcionki i kolory użyte w projekcie, tekst i wiele więcej. Prawie jedyną rzeczą, którą projektant może potrzebować w tym momencie, są pliki czcionek, na wypadek gdyby używali czcionek, które nie są zawarte w iOS.

Kolejnym fajnym narzędziem jest PaintCode, który może generować kod z obrazów wektorowych. PaintCode wykorzystuje ścieżki SVG i dane kolorów do generowania klas Swift lub ObjC. Dzięki PaintCode możesz używać wyrażeń, zmiennych itp. do tworzenia pasywnych/aktywnych stanów przycisków, stanów góra/dół, tekstu dynamicznego, animacji ze zmiennych i wielu innych.

Oczywiście będziesz musiał polegać na Xcode i kilku standardowych narzędziach programistycznych iOS, ale zajmiemy się tym później.

Jest to niezwykle przydatne, jeśli musisz dynamicznie aktualizować tylko określoną część zasobu projektu, np. zmienić kolor bazowy tła gradientowego na ikonie czatu. A jako wygodny bonus, Twoja aplikacja straci na wadze.

Ok, programista w końcu ma wszystko, czego potrzebuje, więc jak idealnie zaimplementować projekt w pikselach (przepraszam za grę słów)?

Konfigurowanie i synchronizowanie narzędzi

Z Zeplinem powinieneś dostać prawie wszystko, czego potrzebujesz, pod warunkiem, że projektant skonfiguruje wszystko poprawnie. Jeśli coś zostanie przeoczone lub niejasne, Zeplin zapewnia skuteczną funkcję komentarzy, pozwalającą projektantowi i programiście szybko zidentyfikować i rozwiązać potencjalne problemy. Nawet jeśli wszystko jest zrobione poprawnie, komentarze można wykorzystać do opinii i drobnych ulepszeń.

Jednak, jak wszyscy wiemy, sprawy nie zawsze idą zgodnie z planem, więc czasami programista będzie musiał wybrać kolor, nawet jeśli projektant dostarczył paletę kolorów używaną w aplikacji.

Aby zrobić to poprawnie, musisz zsynchronizować swoje narzędzia:

• Ustaw profil kolorów wyświetlacza na sRGB: przejdź do Preferencje systemowe - Wyświetlacze - Kolor i wybierz sRGB IEC61966-2.1 .

• W cyfrowym mierniku kolorów lub dowolnym innym narzędziu do wybierania kolorów wybierz wyświetlanie w sRGB .

• Sprawdź, czy profil kolorów w palecie kolorów Xcode jest ustawiony na Device RGB.

Uwaga: obrazy mogą mieć osadzony profil kolorów. Jeśli tak jest, będziesz musiał dostosować swoje narzędzia do tego profilu, jeśli chcesz pobrać właściwy kolor z tego obrazu. Na szczęście powinien to być wyjątek i nie powinieneś mieć takich przypadków zbyt często.

W Xcode 9 pamiętaj, aby w razie potrzeby zachować dane wektorowe . Chociaż zwiększy to rozmiar aplikacji, pozwoli to również na użycie obrazu dla dowolnego rozmiaru ekranu. Jednak w systemie iOS 10 i wcześniejszych wersjach mobilnego systemu operacyjnego Apple obrazy nie będą skalowane przy użyciu dodatkowych danych wektorowych.

Zamiast tego starsze wersje systemu operacyjnego będą używać starszych mechanizmów skalowania i pozostawią rozmazany obraz podczas skalowania poza oryginalny rozmiar. Możesz sprawdzić oficjalną dokumentację Apple, aby uzyskać dodatkowe informacje na temat tego konkretnego problemu.

Na koniec deweloper będzie musiał upewnić się, że rozmiary i odległości są jak najbardziej zgodne z oryginalnym projektem. Jeśli w Zeplinie pojawią się jakieś wątpliwe informacje, możesz mierzyć odległości między różnymi elementami interfejsu iOS z różnymi regułami ekranowymi. Jednym z nich jest xScope, ekranowa linijka z wieloma praktycznymi funkcjami.

Ożyw projekt interfejsu użytkownika iOS

Jeśli chodzi o implementację projektu interfejsu użytkownika w systemie iOS, istnieje kilka podejść do wyboru: Storyboard, XIB i niestandardowy kod.

• Scenorys — wizualizuje ekrany i nawigację między nimi, ale nie ma opcji dziedziczenia projektu z jednego kontrolera w drugim.

• XIBs — wizualizacja jednego ekranu lub jego części, łatwa do dziedziczenia. Przed Xcode 9 nie było opcji korzystania z górnych/dolnych prowadnic układu, podczas gdy w Xcode 9 możemy użyć Safe Area .

• Kod — zdecydowanie najbardziej elastyczna opcja, ale nie zapewnia natychmiastowej wizualizacji.

W przypadku scenorysów musisz podzielić projekt na przepływy, np. LoginFlow.storyboard, SettingsFlow.storyboard lub NewsFeedFlow.storyboard. W ten sposób utrzymasz lekkie scenorysy.

Grupuj elementy interfejsu użytkownika w bloki. Upraszcza to obsługę wszystkich ograniczeń. Nie bądź leniwy i ułóż nazwane widoki w kolejności, ponieważ pojawiają się na ekranie od góry do dołu. Pamiętaj, że dolna część będzie wyświetlana nad górną. Pomoże to szybciej znaleźć różne widoki.

Zobacz poniższy przykład dla elementów niezgrupowanych i zgrupowanych:

Jeśli masz wiele obiektów wyrównanych do lewej/prawej, nie wyrównuj ich do krawędzi z przesunięciem. Lepszym podejściem jest wyrównanie do poprzedniego elementu lub zaimplementowanie specjalnego _ffset view_ z ograniczeniem szerokości. Jeśli będziesz musiał zmienić przesunięcie w przyszłości, to nieco ułatwi to zadanie.

Aby użyć kolorów w IB, możesz przygotować paletę na dole Xcode Color Picker.

Uwaga: jeśli minimalna wersja aplikacji na iOS to 11, możesz użyć opcji „Nazwane kolory” w Katalogu zasobów.

Zawijanie

Otóż ​​to. Teraz wystarczy wysłać wynik do zespołu QA, sprawdzić, czy wszystko jest w porządku i voila! Nasza idealna do pikseli aplikacja jest gotowa.

Celem tego artykułu było dostarczenie liniowego i prostego przykładu projektowania interfejsu użytkownika systemu iOS z doskonałymi pikselami, aby uzyskać najlepsze wyniki w jak najkrótszym czasie. Współpraca między projektantami interfejsu użytkownika a programistami nie zawsze jest taka prosta i bezproblemowa, ale to temat na inny artykuł.