Aplikacja SocialStory

[Foxdesigner]

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]

Ta zawartość jest ukryta. Jeśli chcesz mieć do niej dostęp, proszę

• Zaloguj się
• lub
• Zarejestruj się

http://imgie.pl/uploads/148001510183631.png[/img]

[Damian]

Jeśli mam być szczery to ta appka jest nieco nudna i mdła. Oczywiście wina leży po stronie kolorystyki. Poza tym kwestia UX trochę leży. Ciężko mi się odnaleźć w tym wszystkim. Czy to już finalna wersja?

[Foxdesigner]

Tak jest to już finalna wersja z tego względu, że nie chce mi się już jej zmieniać. W planach mam zrobić coś innego lub ulepszyć mój poprzedni projekt "TalkerChat", który został pokazany na webmasteruj.

[ponczek]

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

[Foxdesigner]

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]

Ta zawartość jest ukryta. Jeśli chcesz mieć do niej dostęp, proszę

• Zaloguj się
• lub
• Zarejestruj się

[url=http://imgie.pl/uploads/14814423698082.png][img]http://imgie.pl/uploads/thumbs/14814423698082.png[/img][/url]

[Damian]

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.

[winiardesign]

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.

[haszu]

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 :)

[Ola]

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 :)

Ta zawartość jest ukryta. Jeśli chcesz mieć do niej dostęp, proszę

• Zaloguj się
• lub
• Zarejestruj się

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

Ta zawartość jest ukryta. Jeśli chcesz mieć do niej dostęp, proszę

• Zaloguj się
• lub
• Zarejestruj się

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

[Foxdesigner]

@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

[Ola]

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:

Ta zawartość jest ukryta. Jeśli chcesz mieć do niej dostęp, proszę

• Zaloguj się
• lub
• Zarejestruj się

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