Zyski:
- Możliwość tworzenia solidnego kodu interfejsu dla Jetpack Compose i SwiftUI według celu, komponentu, czterech stanów (ładowanie/pusty/błąd/pełny), systemu projektowania i dostępności
- Możliwość stworzenia interfejsu otwartego dla wszystkich użytkowników poprzez zdefiniowanie od początku dostępności, z właściwym oznakowaniem, wystarczającym kontrastem i odpowiednim dotykiem.
- Możliwość tworzenia spójnych, wielojęzycznych i gotowych interfejsów z jasnymi/ciemnymi motywami poprzez odczytywanie kolorów i przestrzeni z motywu centralnego
O sukcesie aplikacji mobilnej w dużej mierze decyduje jej interfejs użytkownika (UI – ekrany, które użytkownik widzi i dotyka) oraz doświadczenie użytkownika (UX – płynność i przyjemność korzystania z aplikacji). Użytkownik nie widzi złego kodu, ale czuje zły interfejs w pierwszej sekundzie. Sztuczna inteligencja odgrywa dwie potężne role w rozwoju interfejsu: z jednej strony generuje pomysł na projekt, przepływ i tekst (pisanie UX); Z drugiej strony bezpośrednio konwertuje ten projekt na działający kod interfejsu. W tej jednostce nauczymy się tworzyć szybkie, dostępne i spójne interfejsy z AI, koncentrując się na nowoczesnych narzędziach interfejsu deklaratywnego Jetpack Compose (Android) i SwiftUI (iOS). „Deklaratywny” oznacza, że zamiast wyjaśniać krok po kroku, jak narysować ekran, opisujesz „tak powinien wyglądać ekran w tej sytuacji”; Narzędzie zajmie się resztą.
Od projektu do kodu: właściwa kolejność
Namawianie sztucznej inteligencji, aby „zrobiła piękny ekran”, jest niejasne, ponieważ „pięknego” nie da się zmierzyć. Dobre generowanie interfejsu przebiega według następującej kolejności:
- Cel i treść. Co robi ekran, jakie informacje pokazuje, co zrobi użytkownik?
- Lista komponentów. Części takie jak tytuł, lista, przycisk, pole formularza.
- Sytuacje. Ładowanie, pusty (brak danych), błąd, pełny — cztery podstawowe stany ekranu.
- System projektowania. Kolor, typografia, zasady odstępów; ogólnie zgodne z Wytycznymi dotyczącymi interfejsu ludzkiego z Materiału 3 (Android) lub iOS.
- Dostępność. Etykiety czytnika ekranu, odpowiedni kontrast, rozmiar docelowy dotyku.
- Kod. Powiedziawszy to wszystko, generacja widoku Composable lub SwiftUI.
Najczęściej pomijanym krokiem jest krok trzeci. Programiści biorą pod uwagę tylko stan „pełny”; podczas gdy w prawdziwej aplikacji użytkownik najczęściej spotyka się z sytuacjami „ładowania” i „błędów”. Wydrukowanie wszystkich czterech stanów do AI jest sekretem solidnego interfejsu.
Wskazówka: na końcu monitu dodaj „wygeneruj ładowanie, opróżnienie, błąd i pełne oddzielnie”. To jedno zdanie sprawia, że Twój interfejs jest gotowy na realny świat i znacząco zmniejsza ilość błędów na etapie QA (testowania jakości).
Dostępność nie podlega negocjacjom
Dostępność – możliwość korzystania z aplikacji przez użytkowników z niepełnosprawnością wzrokową, słuchową czy ruchową – to zarówno odpowiedzialność etyczna, jak i sklepowa oraz oczekiwanie prawne. W razie potrzeby sztuczna inteligencja tworzy dostępny kod; Jeśli nie jest to pożądane, zwraca interfejs o niskim kontraście bez znaczników. Trzy praktyczne zasady: nadaj każdemu elementowi interaktywnemu znaczącą etykietę dla czytnika ekranu (contentDescription / accessibilityLabel), odpowiedni kontrast kolorów między tekstem a tłem (co najmniej współczynnik 4,5:1) i rozmiar docelowy dotyku co najmniej 48x48 dp/44x44 pt. Zapytaj AI o te rzeczy wyraźnie.
Uwaga: sztuczna inteligencja może również dodać długi znacznik dostępności do ikony dekoracyjnej; Przytłacza to użytkownika czytnika ekranu niepotrzebnymi gadaniami. Elementy o charakterze czysto dekoracyjnym powinny być „ukryte przed dostępnością” (umożliwić pominięcie przez czytnik ekranu). Przejrzyj wyprodukowane etykiety: pozwól przemówić znaczącemu, niech dekoracyjny milczy.
Spójność: system projektowania i temat
W zastosowaniach profesjonalnych nie stosuje się przypadkowych kolorów i odstępów; opiera się na systemie projektowania (standardowy zestaw kolorów, czcionek, odstępów i komponentów). Jeśli podasz AI wartości motywu (kolor główny, kolor dodatkowy, promień narożnika, skala typografii), wszystkie ekrany będą wyglądać spójnie. Jeśli tego nie zrobisz, każdy ekran będzie miał inny odcień niebieskiego, a aplikacja będzie wyglądać na zaśmieconą. Najskuteczniejszym sposobem jest najpierw poproszenie sztucznej inteligencji o wygenerowanie pliku motywu/tokenów projektu, a następnie powiązanie wszystkich ekranów z tym motywem.
Temat
słabe podejście
Mocne podejście
Kolor
Ręcznie oznacz kolorami każdy ekran
Temat centralny, ekrany odczytywane z tematu
sytuacje
Tylko „pełny” ekran
Ładowanie/pusty/błąd/pełne cztery stany
dostępność
Dodano później
Jest to określone w pozwie od początku
tekst
osadzone w kodzie
Oddzielne źródło, przystosowane do wielu języków
trzy mini etui
Przypadek 1 — Zapisano pustą sprawę. Zespół aplikacji z wiadomościami zlecił AI wydrukowanie poszczególnych stanów ekranu. Dzięki ekranowi „stanu gotowości” („Nie zapisano jeszcze żadnych wiadomości”) 70% uczestników testów z użytkownikami nie opuściło aplikacji na pustym ekranie; W poprzedniej wersji pusty ekran pozostawał biały, a użytkownicy myśleli, że jest „zepsuty” i odchodzili. Mała kopia zwiększyła wskaźnik retencji.
Przypadek 2 – Odrzucenie kontrastu. Jeden zespół zgłosił się do App Store z ekranami z tekstem w kolorze jasnoszarym, czyli kolorze marki. Firma Apple wydała ostrzeżenie dotyczące dostępności ze względu na niski kontrast. Kiedy sztucznej inteligencji powiedziano, aby „zwiększyła kontrast tekstu i tła powyżej 4,5:1”, kolory stały się ciemniejsze i problem został rozwiązany. Gdyby o to proszono od początku, nie byłoby opóźnień.
Przypadek 3 – Szum na etykiecie dekoracyjnej. Tester z wadą wzroku zgłosił, że każda ikona ozdoby („linia”, „kropka”, „cień”) została odczytana na głos na ekranie wygenerowanym przez sztuczną inteligencję, przez co ekran nie nadawał się do użytku. Czytnik ekranu stał się płynny, gdy elementy dekoracyjne zostały ukryte przed dostępnością. Lekcja: dostępność oznacza „właściwe tagi”, a nie „zbyt wiele tagów”.
Słaba zachęta/silna zachęta
Słaby monit: „Zaprojektuj ekran profilu”.
Potężny monit: „Wygeneruj ekran profilu użytkownika dla iOS/SwiftUI. Treść: awatar, imię i nazwisko, adres e-mail, przycisk „Edytuj profil”, lista ustawień. Statusy: ładowanie (szkielet), błąd (przycisk ponawiania), pełny. Projekt: niematerialny, zgodny z iOS HIG; kolory systemowe, typ dynamiczny. Dostępność: etykieta dostępu dla każdego elementu, ukryte ikony dekoracyjne, cel dotykowy min. 44 pkt. Czytaj wartości motywu z osobnego pliku, nie osadzaj kodu koloru na Najpierw narysuj drzewo komponentów, a następnie wyeksportuj kod.
Szablony do kopiowania
Szablon generowania ekranu: „Wygeneruj [nazwę ekranu] dla [platforma/narzędzie]. Treść: [elementy]. Akcje użytkownika: [akcje]. Wygeneruj osobno cztery stany: ładowanie, pusty, błąd, pełny. System projektowania: [Materiał 3 / iOS HIG], czytaj z tokenów motywu. Dostępność: etykiety, kontrast >=4,5:1, standard dotykowy.”
Szablon motywu/systemu projektu: „Utwórz centralną definicję motywu dla mojej aplikacji ([Utwórz motyw / strukturę tokena projektu w SwiftUI]): – Kolor podstawowy [szesnastkowo], dodatkowy [szesnastkowo], kolor błędu, kolor powierzchni – Skala typografii (tytuł, treść, opis) – Skala odstępów (4,8,16,24) – Standard promienia narożnika Dodano obsługę jasnych i ciemnych motywów.
Szablon audytu dostępności: „Sprawdź ten kod ekranu pod kątem dostępności:1) Czy są jakieś nieoznakowane elementy interaktywne?2) Czy współczynniki kontrastu są odpowiednie?3) Czy elementy dotykowe są wystarczająco duże?4) Czy elementy dekoracyjne są ukryte przed czytnikiem ekranu? Zaproponuj poprawki dla każdego problemu. [kod]”
Projekt do szablonu kodu: „Opisuję następujący projekt: [opis ekranu lub zrzut ekranu]. Przetłumacz to na kod [Compose/SwiftUI]. Zachowaj odstępy i wyrównanie zgodnie z projektem, ale dodaj wszystkie cztery stany”.
Typowe błędy
- Myślę tylko o całej sytuacji. W większości przypadków prawdziwy użytkownik widzi ekran ładowania/błędu.
- Osadzanie koloru i spacji w kodzie. Jeśli temat nie jest centralny, spójność zostaje utracona, a utrzymanie staje się trudne.
- Dostępność zostawmy na koniec. Dodanie go później jest kosztowne; Jeśli zostaniesz o to poproszony od początku, jest to bezpłatne.
- Nadmierne etykietowanie. Odczytanie elementów dekoracyjnych również zakłóca działanie czytnika ekranu.
- Osadzanie tekstu w kodzie. Gdy wymagana jest obsługa wielu języków, konieczna jest ręczna zmiana każdego ekranu; Trzymaj teksty oddzielnie.
- Oczekuję dokładnej kopii ze zrzutu ekranu. Projekt AI produkuje ok. Precyzja pikseli jest ustawiana ręcznie.
Podsumowując
Sztuczna inteligencja jest potężna w tworzeniu interfejsów, ale wymaga wskazówek. Prawidłowa kolejność: cel, komponenty, cztery stany (ładowanie/pusty/błąd/pełny), system projektowania, dostępność, następnie kod. Dostępność nie podlega negocjacjom i oznacza „właściwą etykietę”, a nie „zbyt wiele etykiet”. Aby zachować spójność, czytaj kolory i odstępy z motywu centralnego, nie osadzaj ich w kodzie. Silna wola definiuje to wszystko od początku; Tym samym interfejs jest gotowy na realny świat, akceptację sklepu i wszystkich użytkowników.
Zadanie aplikacji
Korzystając z „szablonu generowania ekranu” dla ekranu ustawień, poproś sztuczną inteligencję o kod Compose lub SwiftUI i poproś o wszystkie cztery stany. Następnie sprawdź ten sam kod za pomocą „szablonu kontroli dostępności”. Znajdź i napraw co najmniej jedno ulepszenie dostępności (brakująca etykieta, niski kontrast lub mały cel dotykowy) i zanotuj, który stan (ładowanie/pusty/błąd) Twoim zdaniem będzie pojawiał się najczęściej w rzeczywistym użyciu.
lista kontrolna
- [ ] W monicie wyjaśniłem cel i elementy wyświetlacza
- [ ] Cztery stany (ładowanie/pusty/błąd/pełny) zostały wygenerowane osobno
- [ ] Kolor i przestrzeń odczytałem z motywu centralnego, nie osadziłem tego w kodzie.
- [ ] Od początku chciałem etykiet dostępności i kontrastu
- [ ] Sprawdziłem, że elementy dekoracyjne są ukryte przed czytnikiem ekranu
- [ ] Trzymałem teksty oddzielnie, przygotowane na wiele języków