iPhone X zmienił fundamentalnie projektowanie aplikacji. Dzięki swojemu unikalnemu formatowi i nowym elementom interfejsu użytkownika, projektanci muszą wykazać się większą elastycznością i kreatywnością, aby tworzyć imponujące aplikacje. W tym przewodniku krok po kroku wyjaśniono, jak możesz wykorzystać Sketch, aby dostosować swoje projekt do wymagań iPhone'a X.
Najważniejsze spostrzeżenia
- Wysokość ekranu iPhone'a X wynosi 812 pikseli, co tworzy miejsce na nowe elementy UI.
- Nawigacja i pasek kart są wyższe i wymagają dostosowania układu.
- Ważne jest, aby uwzględnić Safe Area, aby upewnić się, że żadne treści nie wpadają w zaokrąglony obszar ekranu.
- Home Indicator to nowy element interfejsu, który musi być uwzględniony w projekcie.
Przewodnik krok po kroku
Rozpocznij od stworzenia nowego projektu iPhone'a X w Sketch. Naciśnij A, aby dodać nowy element, a następnie kliknij na projekt iPhone'a X.
Szerokość pozostaje na poziomie 375 pikseli, podczas gdy wysokość ustawiona jest na 812 pikseli. Daje ci to więcej miejsca na projektowanie interfejsu użytkownika. Pamiętaj, że zaokrąglone narożniki ekranu są ważne dla układu.
Skopiuj kontroler Home i dostosuj projekt. Zaleca się, aby nie używać standardowych bibliotek, lecz specyficznej biblioteki iPhone'a X dla dokładniejszej adaptacji. Przejdź do ustawień w Sketch i aktywuj bibliotekę iOS 11, jeśli nie jest już aktywna.
Dodaj standardowy pasek nawigacji, aby interfejs był spójny. Upewnij się, że wysokość paska nawigacji wynosi 88 pikseli w porównaniu do 44 pikseli iPhone'a 8.
Znajdź Status Bar w bibliotece iOS 11 i dodaj go również. Powinien być umieszczony na górnej krawędzi ekranu.
To samo dotyczy Tab Bar: Wybierz wersję z trzema kartami z biblioteki iOS 11 i upewnij się, że ma wysokość 83 pikseli, aby dobrze pasowała do układu.
Upewnij się, że żadne elementy w projekcie nie wystają do zaokrąglonego obszaru. W programowaniu nazywa się to Safe Area Layout Guide – to przestrzeń, której potrzebujesz do bezpiecznego widoku.
Dodaj Home Indicator jako niezbędny element swojego projektu. Powinien być umieszczony na środku dolnej krawędzi.
Po dodaniu podstawowych elementów możesz skopiować cały sekcję i wkleić ją w wybrane miejsce. Pamiętaj o dostosowaniu odstępów po skopiowaniu.
Powtórz ten proces dla kontrolera czatu. Stwórz kopię projektu i nadaj jej odpowiednią nazwę.
Zamień ikony dla kart i dostosuj ich wygląd. Ważne jest, aby starannie dobierać odpowiednią symbolikę i teksty.
Zwróć uwagę na odstępy, zwłaszcza między bąbelkami czatu a Tab Bar. Utrzymuj odstęp 16 pikseli, aby zapewnić harmonijne połączenie elementów.
Te kroki pokazują, jak szybko możesz dostosować swój projekt do nowego formatu. Jeśli pojawią się wątpliwości, nie ma problemu, aby po prostu dalej dopracować projekt.
W następnej lekcji dowiesz się, jak pracować z dodatkowymi efektami w obszarze profilu, w tym jak korzystać z efektów rozmycia.
Podsumowanie – Efektywne projektowanie iPhone'a X w Sketch
Dostosowanie swoich projektów do iPhone'a X otwiera nowe możliwości. Dzięki właściwemu zrozumieniu nowych formatów ekranów i elementów UI, możesz tworzyć imponujące interfejsy użytkownika.
Najczęściej zadawane pytania
Jakie jest wymiary wysokości ekranu iPhone'a X?Wysokość ekranu iPhone'a X wynosi 812 pikseli.
Jak dostosować pasek kart?Pasek kart powinien mieć wysokość 83 piksele, aby dobrze funkcjonować w układzie.
Na co powinienem zwrócić uwagę przy projektowaniu?Zwracaj uwagę na Safe Area i upewnij się, że elementy nie wystają w zaokrąglone obszary.
Jak wprowadzam zmiany w Sketch?Skopiuj istniejące elementy kontrolera i dostosuj je za pomocą biblioteki iOS 11.
Czy muszę dostosować pasek nawigacji?Tak, pasek nawigacji ma wysokość 88 pikseli i powinien być dostosowany dla wizualnej spójności.
