8 przydatnych wskazówek dotyczących lepszego UX we Flutterze

May 07 2023
Ludzkość zawsze zwraca uwagę na złożone sprawy, ale przeważnie niewielkie ulepszenia robią różnicę.
Twoja aplikacja może działać idealnie — szalenie szybko, bez wyjątków, bez błędów, bez awarii — zgodnie z oczekiwaniami. Ale jeśli nie zapewnisz użytkownikom płynnego, pomocnego działania, Twój produkt będzie zwykłą aplikacją, a nie niesamowitą.

Twoja aplikacja może działać idealnie — szalenie szybko, bez wyjątków, bez błędów, bez awarii — zgodnie z oczekiwaniami. Ale jeśli nie zapewnisz użytkownikom płynnego, pomocnego działania, Twój produkt będzie zwykłą aplikacją, a nie niesamowitą. Co gorsza, użytkownicy mogą być niezadowoleni z doświadczenia i z czasem zwariować.
(Na przykład nie zamykanie klawiatury po kliknięciu przycisku wyszukiwania).

Wyróżnijmy więc nasze aplikacje!

1. Spraw, aby przewijane widżety były zawsze przewijane.

BouncingScrollFizyka jest świetna! Ale jeśli nie mamy wystarczającej liczby elementów, aby wyjść poza widok, w ogóle się nie odbije. Właściwie to ma sens.

Ale co jeśli chcemy odświeżyć listę?

Aby stworzyć efekt odbijania/przewijania niezależnie od rozmiaru elementów, powinniśmy użyć z nim AlwaysScrollableScrollPhysics .

zawsze przewijalny

2. Autofokus po otwarciu

Czasami chcemy użyć strony tylko do wypełnienia pola tekstowego.

Może to być pole wyszukiwania lub wiadomość e-mail. Chcemy skupić się na nim, gdy tylko się otworzy, ponieważ wiemy, że użytkownik w końcu go skoncentruje, więc po co przeszkadzać użytkownikowi, zmuszając go do wykonania dodatkowego kroku, jakim jest dotknięcie pola tekstowego?

automatyczne ustawianie ostrości na otwarte

3. Upewnij się, że pole tekstowe jest widoczne.

Załóżmy, że mamy formularz i musimy zweryfikować niektóre dane wejściowe. Użytkownik kliknie przycisk przesyłania, ale poczekaj, przycisk nie działa, ponieważ niektóre pola nie zostały zweryfikowane.

Użytkownik może tego nie zrozumieć, ponieważ w danym momencie te pola nie są widoczne na ekranie. Może to powodować pewne niesatysfakcjonujące doświadczenia.

Ale bez obaw, zapobieganie temu jest całkiem proste! W takim razie zobaczmy jak!

upewnij się, że pole tekstowe jest widoczne

4. Podczas wprowadzania lub wysyłania skoncentruj się na następnym widgecie.

Ten jest całkiem prosty. Wpisałeś swoje imię i chcesz przejść do drugiego pola tekstowego po wejściu. Tego oczekuje się od wszystkich i oni też powinni to dostać!

następnie skup się na wejściu

Zauważyłem też coś: wiele osób używa do tego FocusNode. Nie ma nic złego w FocusNode, ale tak naprawdę tego też nie potrzebujemy. Możemy po prostu ustawić textInputAction i gotowe! Korzystanie z FocusNode to dodatkowy krok, którego nie potrzebujemy.

5. Zapamiętaj pozycję przewijania.

Załóżmy, że przewijałeś stronę i kliknąłeś kartę, aby zobaczyć szczegóły lub przełączyłeś się na inną kartę. Następnie ponownie wróć do listy, ale widzisz, że pozycja została zresetowana i trzeba było zacząć od nowa! Co za katastrofa!

zapamiętaj pozycję przewijania

6. Stuknij ponownie, aby wyjść.

Użytkownicy Androida mogą przypadkowo kliknąć przycisk Wstecz, gdy są na stronie głównej, a aplikacja natychmiast przejdzie w tło.

Czy byłoby to dla nich dobre doświadczenie?

Zostawię cię z tym pytaniem i pokażę, jak łatwo możesz temu zapobiec!

(Przepraszam za zły przykład, byłem zbyt leniwy, aby przełączyć się na emulator Androida, aby zademonstrować sprawę z fizycznym przyciskiem wstecz).

dotknij ponownie, aby wyjść

7. Nie skupiaj się na przewijaniu.

Wpisaliśmy, weszliśmy i chcemy, żeby klawiatura zostawiła nas samych z treścią. To wszystko, czego chcemy! Proszę, nie szczędź nam tego!

nie skupiaj się na przewijaniu

8. Nie skupiaj się na nagrywaniu na zewnątrz.

Jeśli nie chcemy doprowadzać użytkowników do szału, powinniśmy również pozwolić im zamykać klawiaturę, gdy stukają poza polem tekstowym.

nie skupiaj się na stukaniu na zewnątrz

W końcu

Nie ma magii, to tylko małe szczegóły.

Zwracaj uwagę na drobne szczegóły, a ludzie pomyślą, że jesteś magikiem!

- Magik

Projekt Github

Weź to i zostaw oklaski!

Dziękuję za przeczytanie!

Myślę, że rozszerzę ten artykuł w cykl.

Możesz mnie śledzić i być na bieżąco z nowymi częściami!

Nie zapomnij kliknąć przycisku i życzę miłego dnia!