728 x 90

Projektowanie aplikacji dla iPhoneX

Projektowanie aplikacji dla iPhoneX

Inna rozdzielczość, inne proporcje ekranu? Jak żyć? Jak teraz projektować aplikacje dla iPhone? Apple udostępniło krótki film, w których mówią o podstawowych zasadach.

Film można obejrzeć na stronach developer.apple.com, a poniżej możecie przeczytać o podanych tam wskazówkach.

  1. Obrazy.
    iPhoneX korzysta z assetów w rozmiarze @3x, czyli tak jak iPhone Plus
    Polecane jest korzystanie z assetów w formacie PDF
  2. Rozdzielczość ekranu.
    Logiczne rozmiary to 375 punktów na 812 punktów, co odpowiada logicznej szerokości ekranu 4.7 cala, dzięki czemu nie będzie zmian w zakresie elementów aplikacji widocznych w poziomie. Dodatkowa wysokość ekranu (145 punktów) pozwoli na wyświetlenie większej ilości treści.
  3. Zaokrąglenia.
    Developerzy powinni zadbać o odpowiednie rozciągnięcie treści, dbając jednak o to, żeby nie została przycięta przez zaokrąglone rogi oraz wycięcie na sensory.
  4. Pasek dolny.
    Należy wziąć pod uwagę, że podczas pracy na ekranie będzie pojawiał się pasek sygnalizujący możliwość powrotu do ekranu głównego, i odpowiednio pominąć ten fragment ekrany przy projektowaniu interaktywnych elementów aplikacji. Sam pasek powinien być zawsze dobrze widoczny, dlatego należy unikać umieszczania również tam elementów wizualnych. Jeżeli aplikacja wymaga przewijania treści, to można włączyć tryb ochrony krawędzi, który pozwoli na uniknięcie przypadkowego użycia paska dolnego: zadziała dopiero za drugim (czyli zamierzonym) razem. Będzie to jednak prowadziło do niespójnego UX, więc powinno być wykorzystywane tylko w wyjątkowo ważnych przypadkach.
    Podsumowując, na pasku przechwycone będą tylko machnięcia w górę. Inne gesty zostaną przesłane do Waszej aplikacji.
  5. Co mamy z marszu.
    Wszystkie paski nawigacji, toolbary i tabbary zostaną przeskalowane poprawnie automatycznie, co jest sporym udogodnieniem.
  6. Auto Layout.
    Korzystanie z Auto Layout pozwoli również zminimalizować problem dostosowania aplikacji do telefonu.
  7. Korzystanie w poziomie.
    Użycie marginesów (Safe Area Guide) do projektowania aplikacji usunie potrzebę pilnowania wycięcia. Treść (np. tabelek) będzie umieszczona sensownie między odpowiednimi marginesami.
  8. Layout tworzony samodzielnie.
    Jeśli nie korzystamy z domyślnych kontrolek, będzie trzeba samodzielnie postarać się, aby treści nie były obcinane w rogach i pod sensorami. Jednocześnie trzeba zadbać o dobre przygotowanie obrazów, tak aby wyświetlały się prawidłowo na wszystkich proporcjach ekranu iPhone (Safe Area Guide pomoże).
  9. Pasek statusu.
    Pasek statusu jest wyższy. Dobrą wiadomością jest to, że nie będzie zmieniał wysokości tak jak na innych urządzeniach.
  10. Rozmieszczenie kontrolek.
    Trzeba się starać, żeby w obu poziomych położeniach ekranu kontrolki były odsunięte tak samo od krawędzi. Oznacza to, że dół telefonu należy również traktować jako obszar zakazany tak jak obszar sensorów. Prowadzić to będzie do bardziej spójnego interfejsu aplikacji.

 

Więcej do poczytania:

1 comment

Leave a Comment

Your email address will not be published. Required fields are marked with *

Cancel reply

1 Comment

Inne artykuły

Ostatnie artykuły

Nasze szkolenia

iOS11 Design Patterns: szkolenie w Warszawie, 22-24.09.2017


Python – i Ty możesz programować: szkolenie dla nauczycieli, w pażdzierniku 2017 w Toruniu


Od zera do Apple kodera – szkolenie dla początkujących, 6-8 10 2017 w Warszawie

Zapraszamy na UMK