Wybór ikon: od intencji do konsekwentnego zestawu
Wybieranie ikon przez przewijanie katalogu sprzyja przypadkowym decyzjom. Lepsza kolejność to: nazwać funkcję, ustalić kontekst, wypisać dwa lub trzy symbole, sprawdzić ich dostępność w używanym wydaniu, a potem przetestować z odbiorcą. Dzięki temu interfejs pozostaje spójny nawet wtedy, gdy biblioteka oferuje wiele wariantów.
Nazwij czynność albo informację
Zamiast wpisywać w wyszukiwarkę „ładna ikona konta”, zapisz: „otwiera ustawienia profilu bieżącego użytkownika”. Dla statusu: „zamówienie zostało wysłane”. Dla nawigacji: „przechodzi do poprzedniego kroku formularza”. Jedno zdanie oddziela znaczenie od wyglądu.
Następnie zdecyduj, czy symbol jest funkcjonalny, informacyjny czy dekoracyjny. Funkcjonalny uruchamia działanie, informacyjny wnosi treść, a dekoracyjny tylko wspiera prezentację już wyrażonego tekstu. Ta klasyfikacja wpływa na opis dostępności.
Szukaj po synonimach, ale oceniaj w języku użytkownika
Nazwa ikony w bibliotece jest technicznym identyfikatorem. Może nie odpowiadać dokładnie polskiemu słowu na przycisku. Szukaj po funkcji i bliskich pojęciach, lecz ostatecznie pytaj, co odbiorca odczyta z kształtu.
Symbol dyskietki bywa rozumiany jako zapis dzięki konwencji, choć nie przedstawia współczesnej czynności. Trzy kropki zwykle sugerują dalsze opcje, ale bez kontekstu nie mówią, czego dotyczą. Kosz może oznaczać usunięcie, a nie archiwizację. Gdy skutek jest istotny, dodaj tekst i odpowiednie potwierdzenie.
Sprawdź rodzinę, styl i dostępność w planie
Ta sama nazwa może występować w kilku stylach, a nie każdy styl jest dostępny w używanym zestawie. Zapisz pełną kombinację, nie tylko potoczną nazwę. Przykład dokumentacji powinien obejmować identyfikator, rodzinę, styl, źródło, rolę w interfejsie i tekst dostępny.
Przed implementacją otwórz stronę szczegółów ikony w oficjalnym katalogu dla właściwej wersji. Sprawdź, czy wybrany wariant należy do Free, Pro lub innego zakresu oraz czy jego nazwa nie została zmieniona. Aliasy pomagają zgodności, ale nowy kod warto opierać na aktualnym identyfikatorze wskazanym w dokumentacji.
Buduj zestaw, nie zbiór pojedynczych decyzji
Ustal zasady grubości, wielkości, wyrównania i odstępu od tekstu. Jeśli podobne działania używają różnych rodzin bez powodu, interfejs wygląda niespójnie. Jeśli wszystkie ikony mają tę samą szerokość kontenera, listy i przyciski mogą być łatwiejsze do skanowania.
Stwórz tabelę projektu: funkcja, widoczna etykieta, ikona, wariant, kolor, stan, dostępna nazwa i miejsce użycia. Dodawanie nowej ikony powinno oznaczać aktualizację tej tabeli. Duplikaty znaczeń staną się widoczne od razu.
Nie opieraj stanu tylko na kolorze lub kształcie
Ikona może wspierać sukces, ostrzeżenie lub błąd, ale obok powinna znaleźć się jasna wiadomość. Zielony znaczek bez tekstu może być niewidoczny dla części odbiorców albo niejednoznaczny. Połączenie symbolu, komunikatu i poprawnej semantyki daje więcej niż coraz bardziej ozdobny wariant.
W przyciskach przełączających stan dostępna nazwa lub stan programowy musi aktualizować się wraz z interfejsem. Serce wypełnione i puste może być czytelne wizualnie, ale czytnik powinien otrzymać informację „Dodaj do ulubionych” albo „Usuń z ulubionych” zgodnie z aktualnym działaniem.
Ikony marek traktuj osobno
Logo platformy lub usługi powinno reprezentować właśnie tę markę. Nie używaj go jako ogólnego symbolu rozmowy, płatności czy aparatu. Sprawdź wytyczne właściciela znaku dotyczące koloru, pola ochronnego, modyfikacji i kontekstu. Dostępność grafiki w bibliotece nie oznacza automatycznej zgody na sugerowanie partnerstwa.
W dokumentacji projektu oznacz ikony marek oddzielną kategorią i podaj docelowy link lub działanie. Ułatwia to audyt przy zmianie nazwy usługi lub jej zasad identyfikacji.
Wykonaj test bez ikon
Tymczasowo ukryj symbole. Czy nadal wiadomo, do czego służą kontrolki i co oznaczają komunikaty? Jeśli nie, sprawdź, czy problem rozwiązuje widoczna etykieta, lepszy nagłówek lub tekst stanu. Następnie włącz ikony i zapytaj, czy przyspieszają rozpoznanie, czy tylko zwiększają gęstość.
Po wyborze przejdź do Wdrożenie Font Awesome. Jeśli ikona jest jedyną treścią kontrolki, obowiązkowo skorzystaj z Dostępne przyciski z ikonami: od wyglądu do zrozumiałej nazwy.