Skocz do zawartości

Aplikacja SocialStory


Foxdesigner
 Udostępnij

Rekomendowane odpowiedzi

Witajcie, dawno mnie tu nie było. Od miesiąca zajmuję się UI desingiem i chciałbym pokazać najnowszy projekt. Jest to aplikacja społecznościowa i jest ona w częściach, ponieważ to praca treningowa więc nie robiłem wszystkich zakładek. Proszę o wszelkie oceny. Jakby ktoś pytał to ostatnia praca przedstawia zakładkę "dodaj post", dlaczego tak to zrobiłem? Chciałem zrobić coś nowego, jakiś nowy sposób dodania postów na stronę główną niż to wygląda np na Facebooku.
[IMG[http://imgie.pl/uploads/148001499421331.png[/IMG]
[img]http://imgie.pl/uploads/148001521584771.png[/img]
[img]http://imgie.pl/uploads/148001499421331.png[/img]
[img]http://imgie.pl/uploads/148001505785041.png[/img]
[img]http://imgie.pl/uploads/148001508021491.png[/img]
[img]http://imgie.pl/uploads/148001510183631.png[/img]
Odnośnik do komentarza
Udostępnij na innych stronach

Cześć!

Przede wszystkim ja bym polecał najpierw zobaczyć sobie jak ta aplikacja wygląda na twoim telefonie. Wcale nie musi to być telefon i takiej samej przekątnej jak iPhone, na którego projektowałeś. Zakładam, że tego nie zrobiłeś, bo moim zdaniem rozmiar poszczególnych elementów nie jest spójny, kiepsko to wygląda na telefonie pod tym względem - sprawdzałem. Wydaje mi się, że status bar jest trochę za duży, domyślnie w iPhonie są trochę większe marginesu. Napiszę pare słów o każdym "ekranie", a potem dam kilka wskazówek.

1) Ekran logowania
- tło zbyt rzuca się w oczy, a pamiętaj, że "celem" tego ekranu jest zalogowanie się przez użytkownika
- logo za bardzo zlewa się z tłem
- zbyt wąskie pola (zobacz jak robi to np Instagram czy Snapchat), poza tym ja bym je zrobił z mniejszym zaokrągleniem
- przyciski "zaloguj się" i "zarejestruj się" są identyczne wizualnie, tak być nie moze, muszą być do rozróżnienia bez czytania
- odstęp między "zaloguj się poprzez", ikonami zdecydowanie za duży, nie widać za bardzo, że jedno jest z drugim powiązane

2) Profil użytkownika
- zbyt duża różnica miedzy wielkością fontu zawartości postów, a statystykami
- avatar lepiej by wyglądał zaokrąglony (wizualnie więcej miejsca), za duża rożnica między nim, a imieniem i nazwiskiem
- za dużo miejsca na środku
- jak tworzysz zawartość (tutaj posty) to warto zmienić chociaż zdjęcia, bo dziwnie to wygląda jak jest kilka razy to samo

3) Wysuwane menu
- status bar powinien być zawsze na samej górze (jako warstwa/grupa)
- nigdy nie środkuj opcji w menu, tylko wyrównaj je do lewej strony (zobacz jak to zrobili np w aplikacji BBC News czy Gmail)
- ikonka menu może tutaj mylić użytkownika, bo po kliknięciu przecież menu się chowa, lepsza byłaby strzałka
- wysuwane menu powinno jednak zajmować trochę więcej szerokości ekranu

4) Ekran ładowania (?)
- font na dole jest jakiś spłaszczony, nie wiem dlaczego
- estetycznie kiepsko się to prezentuje, w pewnym momencie następuje gwałtowna zmiana kolorów, bez uzasadnienia

5) Ogólne uwagi co do samego projektu
- zapoznaj się z wytycznymi Material Design (wzorce dla Androida), chodzi tylko o ogólne zasady projektowania na smartfony, bez znaczenia czy to projekt na iPhone'a/Androida, pod kątem typografii
- testuj projekt na swoim telefonie
- nie wstawiaj na forum tak dużych rozmiarów, podejrzewam, że zrobiłeś na "rozdzielczość iPhone", a urządzenia mobilne mają teraz przecież skalowanie (np 2x albo 3x), nawet na monitorze Full HD ciężko to ogarnąć
- poczytaj podstawy UX, polecam na początek uxdesign.cc

Jeśli projektujesz aplikacje w Photoshopie to polecam sprobować programu Figma lub Sketch (ten drugi jest niestety tylko na Maca). To są programy do projektowania interfejsów. Generalnie Photoshop do samych projektów mobilnych się nie sprawdza. Dlaczego? Ekrany smartfonów skalują obraz, a te programy są wektorowe. Tworzysz sobie na Androida coś w rozmiarze 360x640px i możesz wyeskportować od razu np dla 2x czyli 720x1280px (tak jak to się skaluje na danym telefonie). Dużo łatwiej zapanować nad hierarchią typografii.

Pozdrawiam,
Kuba
Odnośnik do komentarza
Udostępnij na innych stronach

Dzięki za opinię i wskazówki. Miałem nic nie robić już z tym projektem, jednakże ponczek się tak rozpisał i dał mi tyle wskazówek co by można poprawić, że nie mogłem tego nie spełnić. Tak samo jak i zmieniłem projekt pod względem kolorystycznym dla damsona i kształt avatarów dla feedeza. Mam nadzieję, że teraz wygląda to dużo lepiej. Od razu dopowiem do wypowiedzi ponczka, że właśnie rozmyślałem nad zakupieniem kursu UX/UI, by poprawić swoje umiejętności i mniej więcej zyskać większej wiedzy o tworzeniu UI desingu, ale nie jestem do końca pewien oraz ten projekt jeszcze był robiony w PS, ale następny spróbuje już zrobić w programie pod UI. Mam nadzieję, że mniej więcej się spodoba.
Ps. Nie miałem pomysłu co dodać wokół avatara w menu i nie ma tam strzałki, ponieważ działało by to na zasadzie przesunięcia menu, aby się schowało.
[url=http://imgie.pl/uploads/148144227744352.png][img]http://imgie.pl/uploads/thumbs/148144227744352.png[/img][/url][url=http://imgie.pl/uploads/148144232832622.png][img]http://imgie.pl/uploads/thumbs/148144232832622.png[/img][/url][url=http://imgie.pl/uploads/148144234374752.png][img]http://imgie.pl/uploads/thumbs/148144234374752.png[/img][/url][url=http://imgie.pl/uploads/148144235756652.png][img]http://imgie.pl/uploads/thumbs/148144235756652.png[/img][/url][url=http://imgie.pl/uploads/14814423698082.png][img]http://imgie.pl/uploads/thumbs/14814423698082.png[/img][/url]
Odnośnik do komentarza
Udostępnij na innych stronach

  • Administrator
Kolorystycznie lepiej, ale nadal te paddingi mi nie leżą :/ Projekt musi bardziej oddychać, a u Ciebie wszystko jest takie "ściśnięte". Mowa tutaj głównie o menu oraz sekcję z polubieniami, komentarzami i obserwowaniem. W widoku profilu ikonki są za duże. Generalnie widać progres.
Odnośnik do komentarza
Udostępnij na innych stronach

Mi druga wersja się podoba, aczkolwiek rzeczywiście przydałoby się trochę oddechu, bo za bardzo ściśnięte. Trochę mi kojarzy się z fb, nie wiem dla czego. Jak tylko zobaczyłem to w jednej sekundzie pomyślałem, że dużo inspiracji z fb.
Odnośnik do komentarza
Udostępnij na innych stronach

  • 2 miesiące temu...
Za dużo facebooka, dużo elementów z tego zaczerpniętych. Musisz bardziej zapoznać się z UX co nie jest łatwe . Użytkownik musisz szybko nauczyć się twojej aplikacji.
Poczytaj sobie o UX, polecam troszkę nauki o programie Axure i tam tworzyć wireframe projektów a następnie przejść do UI.

Życze powodzenia :)
Proste nie oznacza tanie.
Odnośnik do komentarza
Udostępnij na innych stronach

Wiem, że temat w sumie trochę odkopany, ale może autor jeszcze na niego kiedyś wejdzie i przeczyta rady.

Niestety, ale ta aplikacja nie nadaje się do użytku. Wszystko jest duzo, duzo za małe. Trochę bardziej to wygląda na zaprojektowanie normalnego layoutu www niż aplikacji na urządzenia mobilne.
Przy projektowaniu takich rzeczy trzeba pamiętać, że wszystko musi być duże, nawet jeżeli w naszym odczuciu wygląda to źle.
Tutaj przykład, jaki widok miałby odbiorca, na średniej wielkości ekranie smartphona :)

[img]http://screenshot.sh/p/screen/102783405/fbyrwflyo[/img]

Ja niestety, mało co tam widzę.

Tutaj natomiast musiałabym się mocno skupić na tym, by kliknąć paluchem odpowiednią opcje w nawigacji :P

[img]http://screenshot.sh/p/screen/102783405/fbysdczcs[/img]

uneVnpU.png&key=effa6d2005ebf3f52fafac23

Odnośnik do komentarza
Udostępnij na innych stronach

@Ayume Oczywiście, że przeczytam. :) Widzisz, trochę taka skomplikowana sytuacja, ponieważ starsze projekty wrzucałem na inna stroną i w nich właśnie zawarta była większa czcionka, za którą dostałem krytykę, że jest ona za duża jak na UI i powinienem ją zmniejszyć, co właśnie zrobiłem w tym projekcie, a tutaj taki zbieg okoliczności, że zaś za mała. :D
Odnośnik do komentarza
Udostępnij na innych stronach

Zawsze warto sobie pomniejszyć widok, tak by projekt miał mniej więcej 300x500px, by zobaczyć, czy wszystko da rade przeczytać. Ewentualnie wrzucić sobie projekt na telefon :) Ci co powiedzieli, że font jest za duży, chyba w ogóle się nie znają na projektowaniu grafiki na potrzeby aplikacji mobilnych.
Odstępy między poszczególnymi linkami/buttonami tez powinny być większe, by nie denerwować użytkownika. Jednym słowem, by nie musiał się skupiać, czy przybliżać widoku, by bez problemu na konkretny kliknąć.

Tutaj przykład:
[img]http://screenshot.sh/p/screen/102783405/fccgaeclb[/img]

uneVnpU.png&key=effa6d2005ebf3f52fafac23

Odnośnik do komentarza
Udostępnij na innych stronach

Dołącz do dyskusji

Możesz dodać zawartość już teraz a zarejestrować się później. Jeśli posiadasz już konto, zaloguj się aby dodać zawartość za jego pomocą.

Gość
Dodaj odpowiedź do tematu...

×   Wklejono zawartość z formatowaniem.   Usuń formatowanie

  Dozwolonych jest tylko 75 emoji.

×   Odnośnik został automatycznie osadzony.   Przywróć wyświetlanie jako odnośnik

×   Przywrócono poprzednią zawartość.   Wyczyść edytor

×   Nie możesz bezpośrednio wkleić grafiki. Dodaj lub załącz grafiki z adresu URL.

 Udostępnij

Wiadomości

×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Umieściliśmy na Twoim urządzeniu pliki cookie, aby pomóc Ci usprawnić przeglądanie strony. Możesz dostosować ustawienia plików cookie, w przeciwnym wypadku zakładamy, że wyrażasz na to zgodę.