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
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.
@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
@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
@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"
@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: 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.
@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.
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ć?
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: 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ę
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
@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
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ą
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
- 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
Komentarz usunięty przez autora
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.
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.
Ikony ustawia się tak aby optycznie wyglądały mniej więcej tak samo jeśli chodzi o ich "ciężar" wizualny.
I czy nawet jesli nie chcialbym sie wzorowac na material design, to tez nie powinienem czegos takiego robić?
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
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ć.
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ę
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
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ą