Skip to main content
View Categories

Szablony UX i paleta kolorów — wygląd stron programu

szablon UX przechowuje ustawienia wyglądu interfejsu, które można ponownie zastosować na zgodnych stronach. Paleta kolorów zawiera nazwane definicje kolorystyczne wykorzystywane w miejscach konfiguracji udostępniających taki wybór. Nie należy mylić szablonu UX z szablonem wiadomości lub dokumentu.

1. Zakres szablonu UX #

Definicja szablon UX zawiera Nazwa, Klasa, Typ strony, Zastosowanie, Treść oraz Czy domyślny. To zakres dopasowania szablonu, a nie tylko jego opis.

Lista wyboru szablonu dla strony jest ograniczana do zgodnego typu strony, klasy obiektów i zastosowania interfejsu. szablon przygotowany dla zestawienia jednej klasy nie staje się automatycznie wariantem wszystkich zestawień. Definicje dla kartoteki i strony mogą mieć różny zakres.

Przygotowując zmianę, sprawdź kartotekę i stronę, na których pracujesz. Osobne zastosowania interfejsu mogą korzystać z innych szablonów.

2. Zapis wyglądu i zapis jako nowy szablon #

  1. Włącz tryb konstruktora i otwórz stronę, której wygląd chcesz skonfigurować.
  2. Kliknij ikonę pędzla Edytor graficzny w prawym górnym rogu strony. W otwartym panelu wybierz zakres Główne okno, Kartoteka albo Strona, zależnie od tego, co chcesz zmienić.
  3. Ustaw dostępne właściwości wyglądu.
  4. Aby zachować dotychczasowy wariant, użyj funkcji zapisania jako nowy szablon i nadaj odrębną nazwę.
  5. Przypisz nowy wariant do właściwej strony i sprawdź go po ponownym otwarciu.
Edytor graficzny BS4 Core z ustawieniami zawartości sekcji formularza.
Edytor graficzny w zakresie „Strona”. Dla sekcji formularza można ustawić kolory, cień, zaokrąglenie, ramkę i wewnętrzne odstępy.

Zapis istniejącego szablonu zmienia jego wspólną definicję. Może więc wpłynąć na inne miejsca korzystające z tego samego wariantu. Zapis jako nowy szablon jest właściwy, gdy chcesz utworzyć odrębny wygląd dla wybranego zastosowania.

Menu szablonu UX z poleceniami Zapisz, Zapisz jako i Ustaw jako domyślny.
Menu „szablon” zawiera osobne polecenia „Zapisz” i „Zapisz jako”. Wybrany wariant jest już domyślny, dlatego polecenie „Ustaw jako domyślny” jest nieaktywne.

Nie kopiuj dowolnego kodu HTML do pola „Treść” w oczekiwaniu, że stanie się kompletnym wyglądem strony. Zapis zawiera konfigurację używaną przez mechanizm layoutu; najbezpieczniej budować go właściwym edytorem.

Formularz samouczka w BS4 Core po zastosowaniu jasnego szablonu UX.
Przykład zastosowania szablonu „BS4 Light – formularze” na stronie samouczka: biała sekcja, subtelna ramka, zaokrąglone narożniki i czytelne odstępy.

3. Co oznacza „Czy domyślny” #

Po oznaczeniu szablonu jako domyślnego program usuwa tę flagę z innych szablonów o tej samej klasie, typie strony i zastosowaniu. W takim zakresie pozostaje jeden domyślny wariant.

Ustawienie domyślności ma szerszy skutek niż przypisanie wariantu do jednej strony. Przed zmianą sprawdź strony korzystające z ustawień domyślnych oraz te, które mają własny, jawnie wybrany szablon.

4. Paleta kolorów #

Jak otworzyć konfigurację: w głównym oknie programu kliknij Opcje (strzałka w prawym górnym rogu), następnie Administrator. W otwartej kartotece wybierz Superadministrator. Poniższe ścieżki dotyczą interfejsu stacjonarnego i konta z odpowiednimi uprawnieniami administracyjnymi.

W sekcji Wygląd kliknij Paleta kolorów, następnie Dodaj nowe. Aby edytować istniejącą definicję, użyj ikony w kolumnie Kartoteka jej wiersza. Nadaj własnej pozycji jednoznaczną nazwę.

W podstawowym formularzu definicji Paleta kolorów uzupełnia się Nazwa i Kolor. Informację Systemowy można sprawdzić w kolumnie zestawienia; nie musi być dostępna do edycji w formularzu. Wybór z palety ma sens tam, gdzie dane ustawienie interfejsu odwołuje się do palety. Dodanie koloru nie przemalowuje automatycznie całego programu.

Definicja koloru może zawierać konfigurację stylu, a nie tylko pojedynczy zapis #RRGGBB. Przykładowo kreator treści szablonu odczytuje z niej backgroundColor. Przy ręcznej edycji nie zastępuj istniejącej struktury samym kodem koloru, jeśli dana kontrolka oczekuje konfiguracji.

Pozycje oznaczone Systemowy = Tak są chronione przed standardowym usuwaniem. Własny wariant nazwij jednoznacznie, np. „Obsługa — niebieski”, i sprawdź, gdzie faktycznie jest używany. Modyfikacja wspólnego koloru może oddziaływać na wiele elementów korzystających z tej definicji.

Definicja własnego koloru w palecie BS4 Core.
Przykład własnej definicji „Instrukcja — obsługa niebieska”. pole „Kolor” pokazuje podglądy Text i Button z ikonami pędzla.

W polu Kolor kliknij ikonę pędzla przy podglądzie Text lub Button. W zakładce Base edytora kliknij próbkę Tekst albo Tło. Selektor pozwala wskazać barwę, wpisać kod HEX i ustawić przezroczystość. Zamknij edytor krzyżykiem i użyj Zapisz lub Zapisz i zamknij okno w definicji koloru.

Edytor koloru tła z selektorem HEX i przezroczystości.
Po kliknięciu pędzla i próbki „Tło” można wybrać barwę lub wpisać kod HEX. Suwak pod paskiem barw służy do ustawienia przezroczystości.

5. Przykład: wariant wyglądu zestawienia zgłoszeń #

  1. Otwórz zestawienie zgłoszeń i zapisz jego aktualny wygląd jako nowy szablon UX „Zgłoszenia — obsługa”.
  2. Dostosuj wygląd w edytorze. W miejscach udostępniających paletę wybierz przygotowane kolory.
  3. Sprawdź zgodność klasy, typu strony i zastosowania.
  4. Najpierw zastosuj wariant na wybranej stronie.
  5. Po sprawdzeniu czytelności rozważ ustawienie jako domyślny, jeśli ma obowiązywać w całym zgodnym zakresie.

Zweryfikuj podpisy, kontrast, zaznaczenia oraz wygląd dłuższych danych. Zmiana layoutu nie nadaje uprawnień i nie zastępuje konfiguracji kolumn ani filtrów.

Leave a Reply