[essos]

Jakiej wielkości ikony powinno sie stosować w menu nawigacyjnym i w top app bar w aplikacjach mobilnych?

Z tego co czytam w material design, to ogolnie ikony powinny miec wymiary 24x24, ale nie wiem wlasciwie czego to ma dotyczyć, bo takiej wielkosci ikony wydają sie za duze do menu i do top app bar

#ui #ux

[MatthewDuchovny]

24px to wielkość kwadratowego kontwnera w którym są ikony. Nigdy nie powinniśmy dodawać ikon bez kontenerów bo będą wyglądały na za duże i nie będą dopasowane wielkością optyczną do reszty ikon z zestawu.

[essos]

@MatthewDuchovny: O coś takiego chodzi? Ikony mają sie stykać z "kontenerem" na wysokośc i szerokość, czy wystarczy sama wysokość? Ponizej np. dwie pierwsze nie stykają sie po bokach z kontynerem,tylko na wysokość, a dwie od prawej juz na obu płaszczyznach. Nie wiem czy tak moze byc

[essos]

@MatthewDuchovny: Przy okazji, byłbym wdzięczny jakbys mi powiedzial, czy te ikonki w menu są ok. To ogolnie moja pierwsza apka i nie umiem sobie sam odpowiedziec na to pytanie

- Pierwsza zakładka (explore) to wyswietlana lista projektów wyjazdowych typu erasmus itp (z treścią zaczerpnięta z grup facebookowych)
- Druga (follow) to zakładka na ktorej mozna byłoby subskrybować albo folołować(nie wiem ktore okreslenie lepsze) grupy facebookowe z ktorych wyświetlalyby sie listy projektów

[essos]

@MatthewDuchovny: Jeszcze raz, bo zauwazylem ze ikona "favorites" byla nizej od reszty. Przy okazji zwiekszylem tez delikatnie plusik przy ikonie "follow". żeby troszke bardziej odroznić ją od "explore"

[MatthewDuchovny]

@essos: to jest tak, że w ogóle nie powinny się stykać. 1-2 px to tzw. safe area której nie powinno się przekraczać (poza małymi wyjątkami). Więc ikony mogą w środku mieć różną wielkość bo są dopasowane optycznie.
Np. kwadrat wielkości 20px x 20px będzie wyglądał na większy od koła 20px x 20px.

Zobacz sobie materiał design icons i pobierz jak SVG.

Dodaję przykładowy template/grid od Material design.

[MatthewDuchovny]

@essos: polecam ten artykuł na początek. Ładnie podsumowuje główne zasady: https://www.designsystems.com/iconography-guide/

[essos]

@MatthewDuchovny: Dzięki.
Ogolnie zorzumialem ze musi byc konterne ktorego po prostu nie mozna przekraczać z marginesem 1-2px. Wg. material design 24x24px, ale czy j est cos co wyznacza minimalną wielkosć w tym kontenerze?
Np. na ponizszym przykladzie z material desing 3. Kontener ma 24x24px, a sama ikonka 14x12. I jak pracowalem chwile na stażu z programistą od ktorego niczego sie nie nauczyłem, to chcial zebym korzystal z material design, i np.

[MatthewDuchovny]

@essos: czasami zależy od tego gdzie ikonapierwotnie ma być używana. Np. Chevron down też jest mniejsza ale główna zasada jest taka, że grubość linii to są dokładnie 2px.
Ikony ustawia się tak aby optycznie wyglądały mniej więcej tak samo jeśli chodzi o ich "ciężar" wizualny.

[essos]

Czyli jeśli linie w ikonach paska nawigacji powinny mieć grubość 2px, tzn. ze nie moge wykonywać takich zabiegow jak ponizej, gdzie przy "follow" nieco zmniejszylem ikonke od "explore", przez co zmniejszyla sie tez grubość lini

I czy nawet jesli nie chcialbym sie wzorowac na material design, to tez nie powinienem czegos takiego robić?

[essos]

@MatthewDuchovny: Tak to mniej wiecej powinno sie robić? Linie tutaj mają 2px

[MatthewDuchovny]

@essos: w 95% grubość linii powinna zostać. Pamiętaj o Pixel grid. O wycentrowanie elementów np. plusa w okręgu

[MatthewDuchovny]

W materiał design icon czasami robią wyjątek. Pobierz sobie SVG z takimi przykładami i zobacz jak "wybrnęli"

[essos]

Spróbowalem nalozyc na siatke kilka ikon ktore mam na jednym widoku ekranu w aplikacji i zastanawiam sie czy ma to sens. Chcialem je poustawiac tak, zeby byly maksymalnie duze, ale przy tym aby nie wychodziły poza te zaciemnione kwadraty. Nie wiem czy to ma sens.

Oóglnie to mialem i w sumie nadal mam (probujac to poprawić) prnolem z dopasowaniem ikon, bo bedac ograniczonym do darmowych zrodel i to z komerycjną licencja, ciezko

[essos]

@MatthewDuchovny: A tak te ikony wyglądają na ekranie

Ps: Byłbyś skłonny zobaczyć caly projekt w figmie? Mam tez ten ekran w paru innych wersjach z lekkimi modyfikacjami i nie moge sie zdecydować.

[MatthewDuchovny]

@essos: spoko, to daj linka to zetknę.
A co do źródeł ikon - pobierz może set wszystkich ikon Material design na Figma community. Ewentualnie też na the noun projects jest ich trochę

[essos]

@MatthewDuchovny: Ok, dzieki za rade. Powymienilem ikony z tego widoku ekranu, na wszystkie z material design.

i wrzucam linka.
https://www.figma.com/file/sKuIejaprr5lpPhtXYEFpq/aplikacja-i-prototyp?node-id=0%3A1&t=50i632K97O81INiY-1

Jest tam tez moj drugi projekt - aplikacja do wyszukiwania zaginionych zwierzakow. Troche slabiej dokonczony
Dalem tez prototypy jakby to mialo jakies znaczenie>
A ta pierwsza dla przypomnienia, ma służyc do wyszukiwania projektow wyjazdowych typu erasmus. Itp I te posty ktore by sie tam wyswietlały (w innej formie) bylyby zaczerpniete z

[essos]

@MatthewDuchovny: Teraz myslae ze chyba jednak za duzo CI wysłalem,. Moze jakbys mial chwilke, to moglbys popatrzec chociaz na jedną apke, ktorą wolisz, a reszte zingorowsac, bo to chyba jednak czasochłopnne. Chociaz tak pobierznie co CI sie tam rzuca w oko, bez jakiegos . Zawsze to jakaś opinia kogoś kto sie na tym zna

[MatthewDuchovny]

@essos: spoko, zerknę na to jak tylko będę miał chwilkę. Teraz mam trochę zapierdziel, że tak powiem :D

[essos]

@MatthewDuchovny: A może lepiej bedzie jesli bede zadawał jakieś konkretne pytania. Np. co sądzisz o poniższych ekranach? Czy widzisz tam cos co jest nie tak albo co mozna by zrobić lepiej?
https://i.postimg.cc/W23j9Tw3/Frame-3840.png

Ekran od lewej to wyswietlane posty dotyczace projektów wyjazdowych typu erasmus z facebooka. A po prawej rozwinięcie danego posta. Dalem kilka bo sie nie moge zdecydować.

Zastanawiam sie np. czy strzalka na ramkach postów jest sensowna, czy lepiej ją