#Frontend – Interfejs graficzny aplikacji

W ten weekend postanowiłem trochę odpocząć i nie uczyłem się nic nowego. Zająłem się więc wyglądem strony. Jak już wcześniej pisałem, wykorzystam SemanticUI. Jest w nim sporo elementów, które świetnie nadają się do tworzenia interfejsów, dla tego typu aplikacji.

Na mojej stronie, w projektach, można znaleźć screen z interfejsem aplikacji (może być już zaktualizowany), który wykonałem kilka miesięcy temu. Był on stworzony od podstaw, bez korzystania z frameworków CSS. Dzielił się on na sidebar, z nawigacją, oraz nagłówek, w którym mieściły się informacje o użytkowniku i opcje. Stwierdziłem jednak po czasie, że ta wersja nie jest do końca optymalna.

Bardzo lubię korzystać z możliwie najprostszych rozwiązań, lubię minimalizm. Stwierdziłem, że podział strony, który zastosowałem w poprzedniej wersji, jest bezsensowny. Takie rozłożenie, na dwie sekcje nawigacyjne sprawił, że marnowane było sporo miejsca.

W nowej wersji połączyłem menu boczne z górnym, w jeden element. Nowy interfejs składa się z sidebara z nawigacją i innymi opcjami, oraz głównej sekcji aplikacji. Dzięki takiemu rozwiązaniu, użytkownik nie jest zmuszany, do szukania opcji po całej stronie, a jedynie w sekcji bocznej. Również sam rozkład jest bardziej czytelny i zasadny.

Jeśli chodzi o główną sekcje, póki co zaprojektowałem jedynie widok dokumentów. Stałym elementem każdej strony będą tzw. breadcrumbs, czyli ścieżka witryny, w górnej części. Mam nadzieję, że pozwolą one na łatwiejszą nawigację. Moim zdaniem interfejs jest teraz prosty i czytelny. Oczywiście nie zabrakło róznież linków do bloga, githuba i strony konkursu. Tutaj screen z aktualnej wersji:

ui

W aplikacji nie będę stosował typowego RWD. Jeśli ktoś będzie korzystał z tej aplikacji na urządzeniach mobilnych, to mało prawdopodobne, że będzie to telefon komórkowy, a myślę, że na większych wyświetlaczach nie powinno być większych problemów.

Jedyne, co będę chciał zrobić w kierunku dostosowania interfejsu do wielkości ekranu, to dostosowanie ilości wyświetlanych pozycji na stronę. Przy pomocy JS, chcę sprawdzać wysokość okna i wg. tego ustalić ilość wyświetlanych elementów na pojedynczej stronie. Może to nie być łatwe, ponieważ czasem wiersze mogą się rozszerzać przez dużą ilość treści i może być ciężko obliczeniem wysokości pojdynczej pozycji.

Pomyślę jeszcze o kilku innych rozwiązaniach, póki co, to tyle w dzisiejszym wpisie. W tym tygodniu będę zajmował się dalszym tworzeniem API. Chcę szybko przebrnąć przez backend, ponieważ sporo czasu może mi pochłonąć tworzenie frontendu w Angularze 2, a muszę wyrobić się w terminie.

Pozdrawiam!
MTK

Proudly powered by WordPress | Theme: Baskerville 2 by Anders Noren.

Up ↑