Dark mode oraz odświeżone logo 4programmers 🎉

1

@4programmers.net Mnie się podoba. Pytanie tylko, czy da się automatycznie włączać dark mode po ustawieniach przeglądarki / urządzenia? (nie wiem czy było już gdzieś w wątku)

6

Do wszystkich autorów trybu ciemnego. Dziękuję!!!
Świetna robota. Wreszcie forum wkracza w 21 wiek :p

Wiadomo, że to rozwiązanie musi się dotrzeć... mam nadzieję, że już wkrótce, po feedbacku będzie jeszcze lepiej - funkcjonalnie i wizualnie.

Ps: Logo rzeczywiście budzi pewne skojarzenia, ni to czwórka ni to ktoś w samotni :)
-Pawel

1

dziękuję!

1

Hejka!

Jesteśmy pod wrażeniem ilości feedbacku jaki otrzymaliśmy - ogromne dzięki! 🫶

Wzięliśmy pod uwagę Wasze sugestie, od wczoraj działamy i już teraz mamy dla Was update i kilka informacji:

  • Chcieliśmy jak najszybciej dostarczyć Wam wartość i otrzymać feedback, dlatego też zdecydowaliśmy się wdrożyć na początek najbardziej popularne części portalu, czyli forum i mikroblogi. Na ten moment jeszcze nie wszystkie ekrany są gotowe w wersji ciemnej, praca nadal wre m.in. nad profilem użytkownika i wiadomościami. Strony nad którymi praca nadal trwa mają wyłączony przycisk przełączenia motywu oraz oznaczenie niedostępności ikonką i info w tooltipie. Jest to zamierzone działanie, biorąc pod uwagę nasze doświadczenie z poprzednich wdrożeń 😉 Postanowiliśmy wdrażać zmiany małymi krokami, zbierając feedback na wcześniejszych etapach prac.
  • Kolory w trybie ciemnym zostały wybrane i sprawdzone według wymogów accessibility: Kontrast pomiędzy tekstem a tłem powinien wynosić minimum 4.5:1 i w takim zakresie staramy się działać.
  • Tryb ciemny dla części z Was włączył się automatycznie z powodu naszego niedopatrzenia - dawny przycisk włączenia ciemnego menu, teraz włącza cały dark mode, więc część z Was, która miała włączone ciemne menu z automatu dostała dark mode. Oczywiście możecie go szybko wyłączyć poprzez przycisk "Przełącz motyw". Dziękujemy za wyrozumiałość 🙏
  • Jeśli chodzi o jasny tryb, to tutaj nie wprowadzaliśmy żadnych zmian oprócz dostosowania stopki na dole ekranu. Cała reszta na ten moment została "po staremu".
  • Motyw systemowy o którym wiele z Was wspominało pojawi się, jeszcze nad nim działamy 💪
  • Części z Was po zmianie trybu zmienia się kolor tła awataru. Jest to związane z przeźroczystościami, które macie w swoich dodanych obrazkach. Osoby, które nie chcą tego efektu, wystarczy że dodadzą jako swój awatar obrazek z wypełnionym tłem 😀

Dzięki Wam udało nam się od wczoraj wdrożyć już kilka najbardziej palących poprawek:

Dzisiaj działamy m.in. nad poprawką autocomplete i rozkminiamy kolory podświetlenia linkowanego postu (jeśli macie propozycje to śmiało dajcie znać!). O wszystkich zmianach będziemy Was na bieżąco informować 😀

Jeszcze raz wielkie dzięki za tak duży odzew, jesteście niesamowici! 🫶

My się zabieramy do roboty, a Wam życzymy miłego dnia!

0

Nowy zielony odcień zdecydowanie lepszy. 😉

PS: ranking reputacji trochę nieczytelny:

screenshot-20240301141617.png

Jakoś słabo się czyta tekst na tych zielonych paskach. Dałbym mniejszy padding zielonych części paska oraz wzmocnił cień pod białym tekstem, tak aby był lepiej widoczny.

1

Nie wiem dlaczego bez wiedzy użytkownika motyw został zmieniony. Tłumaczenie jakimś starym ustawieniem jest słabe - wiecie co to kompatybilność wsteczna? Wiecie dlaczego nie usuwa sie parametrów, czy nie zmienia ich zachowania a dodaje nowe? No małe przewinienie, bo już sobie odkliknąłem tą smołę ale ogólnie motyw jest słaby i nie chodzi o małe niedociągnięcia a o całe ekrany. Np. widok profilu jest zawsze jasny i nie wiem dlaczego nie można tam przełączyć widoku.

screenshot-20240301143937.png

Niestety nie potrafię tego odtworzyć, ale właśnie niekontrolowanie motyw sam mi się zmienił. Chyba występują tutaj jakieś wyścigi.

0
4programmers.net napisał(a):
  • Kolory w trybie ciemnym zostały wybrane i sprawdzone według wymogów accessibility: Kontrast pomiędzy tekstem a tłem powinien wynosić minimum 4.5:1 i w takim zakresie staramy się działać.

znaczy według kwitów jest dobrze, co z tego że userzy mówią że jest niedobrze

1

Klikalny obszar logo jest dość wąski.

Z zajęć na studiach (Interakcja Człowiek-Komputer) wyniosłem przykład Menu Start z Windowsa.
W starych wersjach Windowsa trzeba było dokładnie najechać myszką na Start, żeby go kliknąć.
A był on odsunięty o kilka pikseli od rogu ekranu.
Możecie sobie zobaczyć w emulowanym Windows 95 online: https://archive.org/details/win95_in_dosbox
Tylko testujcie na full screen :)
screenshot-20240301194230.png

W obecnych wersjach Windowsa można zjechać myszką w sam róg ekranu, a i tak trafimy w przycisk Start.

Można by poszerzyć klikalny obszar logo 4programmers tak aby można było je kliknąć nawet w samym rogu strony.

1

screenshot-20240301232238.png

Jakieś takie to to krzywe. 😉

0

@Riddle @4programmers.net Wydaje mi się, że dość poważny problem, który przynajmniej mi utrudnia korzystanie w dark mode. Jeśli jest włączone, powiadomienia pod dzwonkiem, po kliknięciu weń, nieprzeczytane niczym się nie wyróżniają od przeczytanych. Jeśli było już o tym to sorry.

0

nie wiem czy to powiązane z nowym motywem ale wydaje mi się że wcześniej to działało w porządku
pozycja breadcrumbów nie aktualizuje się po zmianie rozmiaru okna i wygląda to na przykład tak:

screenshot-20240302054311.png
screenshot-20240302054331.png

4programmers.net napisał(a):
  • Kolory w trybie ciemnym zostały wybrane i sprawdzone według wymogów accessibility: Kontrast pomiędzy tekstem a tłem powinien wynosić minimum 4.5:1 i w takim zakresie staramy się działać.

No tak średnio bym powiedział, tak średnio

screenshot-20240302055834.png

1

Zamiast dodawać powiadomienia do miejsc w których motyw nie jest zmieniony mogliście wykonać zmianę motywu. Już pominę że ta zmiana powinna być zrobiona przed udostępnieniem funkcjonalności? Jak mówiłem o tym że niektóre rzeczy można podglądnąć i podkraść z facebooka nie mówiłem o ich bylejakości i braku standardów.
screenshot-20240302102019.png

1

jak masz kilka kart przeglądarki odpalone to trudno znaleźć bo logo takie nienachalnej urody

1

Separator poziomy jest słabo niewidoczny:


W komentarzach na blogu nie widać go wcale (link do komentarza):

screenshot-20240303135231.png

Poza tym ma gigantyczne marginesy, jeśli chodzi o komentarze na blogu, które koniecznie trzeba zmniejszyć. Zresztą te marginesy nie są spójne z tymi ustawionymi choćby dla zawartości posta. W poście margines jest tylko nad separatorem, na blogu nad i pod.

0

Jest w miarę dobrze, tylko skąd mam wiedzieć, które powiadomienia już kliknąłem? Nie ma żadnej różnicy między klikniętymi, a nie aktywnymi.

4

Szczerze? Nie podoba mi się dobór kolorów w dark-mode, jakoś tak wali ta czerń z postów za bardzo po oczach, najlepszy dark-mode z jakim pracowałem to był zdecydowanie ten z Grafany (polecam spojrzeć).

I mam od razu change request aby przywrócić możliwość ustawienia navbara jako ciemny w trybie light-mode. Z góry dziękuje.

0

W sumie to navbar mógłby być zawsze ciemny.

2

Hejka! :D

Szybki update - wiadomości prywatne w trybie ciemnym są już dostępne. Kontynuujemy pracę nad kolejnymi ekranami i zmianami wynikającymi z Waszego feedbacku.
Wielkie dzięki za odzew i miłego dnia! 🫶

1

Ciekawe czy dożyjemy czasów jakiś różowych/kolorowych trybów; można by to nazwać PRIDE. Nie wiem czy by to pomogło w czytaniu, ale fundamentalnie i tak idziemy w tą stronę, a 4programmers mogło by być w tym pionierem

1

Aby to było możliwe, trzeba mieć system akceptujący wybrane kolory, zamiast używania tych hardkodowanych.

Serwis taki jak ten wykorzystuje raptem kilka kolorów — tło, tekst, przyciski i ze dwa akcenty. Wystarczy dać możliwość ich wybrania, a generowaniem stylów niech się zajmie silnik. W wielu miejscach używane są np. różne odcienie szarego (dla tekstu i przycisków), a to nie problem, aby wziąć bazowy kolor (wybrany przez użytkownika) i go lekko przyciemnić lub rozjaśnić.

Coś takiego jest bardzo łatwe do stworzenia. Jedyne co wymaga więcej pracy to przerobienie silnika, aby generował CSS-y na podstawie danych z profilu użytkownika. Bardzo fajny, unikalny pomysł z tymi stylami.

3
furious programming napisał(a):

Aby to było możliwe, trzeba mieć system akceptujący wybrane kolory, zamiast używania tych hardkodowanych.

Serwis taki jak ten wykorzystuje raptem kilka kolorów — tło, tekst, przyciski i ze dwa akcenty. Wystarczy dać możliwość ich wybrania, a generowaniem stylów niech się zajmie silnik. W wielu miejscach używane są np. różne odcienie szarego (dla tekstu i przycisków), a to nie problem, aby wziąć bazowy kolor (wybrany przez użytkownika) i go lekko przyciemnić lub rozjaśnić.

W ogóle kiedyś były bardzo kolorowe czasy w IT. Nie wiem ile osób pamięta ale 4programmers w starej wersji (do 2006) miało kilka motywów zwanych wtedy popularniej skórkami lub skinami (co najmniej 6 - domyślna, simple, blue, motion, newage, submain) do wyboru i różniły się nie tylko kolorami ale też grafikami a nawet zestawem emotów i to był standard w niemal każdej aplikacji. Windows miał pełno motywów i łatwo można było doinstalować kolejne, nawet w windows 95 a może jeszcze wcześniej można było wybrać kolor każdego elementu interfejsu osobno a aplikacje miały dostęp do tych kolorów i mogły być spójne z systemem.
Teraz każda apka implementuje kolory po swojemu, są zazwyczaj tylko dwa motywy jasny i ciemny co najwyżej dając możliwość zmiany koloru przewodniego i akcentu.

0
obscurity napisał(a):

Teraz każda apka implementuje kolory po swojemu, są zazwyczaj tylko dwa motywy jasny i ciemny co najwyżej dając możliwość zmiany koloru przewodniego i akcentu.

Zazwyczaj tak, niektóre serwisy mają kilka schematów (np. GitHub), jednak wszystkie predefiniowane. Tak może być nadal, z tą różnicą, że oprócz zestawu gotowych palet kolorów, byłaby też możliwość zdefiniowania własnych. Nie widzę tutaj żadnego problemu, a wręcz przeciwnie — to więcej możliwości dla użytkowników, a więc wyższy poziom ich zadowolenia.

Ale czegoś takiego nie można implementować na pałę — jest wiele przypadków brzegowych, które trzeba wziąć pod uwagę.

0

Jeśli kwestia już była poruszona to wybaczcie, ale całości nie przeczytałem 😛

Pytanie - czy gromadzimy statystyki odnośnie tego, jaki procent userów korzysta z jasnego/ciemnego motywu? Mi np. ten ciemny nie podpasował i póki co przełączyłem na jasny.
Rozumiem, że to trzeba dopracować, wygląd będzie ewoluował, ale na razie lepiej mi się siedzi (zwłaszcza w ciągu dnia) na jasnym. I pytanie - ogólnie była potrzeba ze strony użytkowników, żeby stworzyć ciemny motyw, ale zastanawiam się - jaki odsetek z nich będzie realnie z niego korzystać? Bo może, jeśli ta wartość będzie niska, to będzie oznaczało, żę coś jest niehalo i im (tak samo jak mi) coś nie pasuje.

3

Blady, słabo widoczny tekst w pomocy.

Obserwowanie i blokowanie innych użytkowników

screenshot-20240306205106.png

1

Hejka!

Dajemy znać też tutaj:

Zapraszamy wszystkich chętnych do grupy doradczej 4programmers "Kadra", więcej w wątku: Grupa doradcza 4programmers 😄

5

Trochę pisałem z @Riddle na priw i poprosił, żebym swoje wypociny wrzucił także do tego wątku - co niniejszym czynię.

  1. Powiadomienia. O ile w jasnym trybie te nieprzeczytane są ładnie wyróżnione, to w dark praktycznie nie da się odróżnić nieprzeczytanych od starych. Wprawdzie dostałem informację, że teraz są nad tym prowadzone prace, ale dla formalności i tak tutaj to zgłoszę 😉
    image

  2. Ogólnie mam wrażenie, że aktualnie tryb ciemny jest zbyt kontrastowy i krzykliwy, a np. akcent zielony jest bardzo oczojebny. Zdecydowanie wolałbym, żeby kolory były stonowane i przygaszone. Poza tym - tło strony jest ciemnoszare, a formularz w którym aktualnie piszę (a także np. samo tło wpisów w wątku) jest ciemniejszy, prawie czarny. Przez to zwiększa się kontrast pomiędzy tłem a napisami. Chyba powinno być odwrotnie - ciemne/czarne tło, na nim trochę jaśniejsze pola z treścią, a na nich mniej kontrastowe napisy.

Żeby pokazać o co mi chodzi - poniżej są 2 screeny.
Pierwszy to przykładowy zrzut z Android Studio w trybie ciemnym. Widać, ze jest tam dokładnie tak, jak pisałem - czyli jaśniejsze tło oraz mniej krzyczące/kontrastujące z tłem kolory.
Drugi to dla porównania - jak w AS wygląda zielony napis na ciemnym tle, oraz jak to ma miejsce na 4P. Zupełnie inne wrażenia są podczas patrzenia na te dwa screeny.

I tak w ogóle - popieram pomysł (o ile mnie pamięć nie myli - autorstwa @furious programming ) żeby można było sobie wybrać indywidualnie kolory w panelu z ustawieniami każdego usera. Tak naprawdę to kolorów mamy z 5-6 - tło, napis, wyróżnienie itp. I wtedy każdy będzie miał dokładnie tak, jak uzna za stosowne i każdy będzie miał możliwość bycia szczęśliwym. Bo to, co napisałem to są moje uwagi - ale nie każdy musi się z nimi zgadzać, ludzie mogą uważać inaczej, ktoś przecież ten schemat zaprojektował i uznał, że jest on OK 😛

image

image

3

Moje oczy cierpią na nowym trybie ciemnym.

Biały vs. lekko szary jest bardzo czytelnym rozróżnieniem:
screenshot-20240312104833.png
natomiast taka delikatna różnica w jasności nie sprawdza się w motywie ciemnym:
screenshot-20240312104855.png

Ten efekt jest w wielu miejscach i skanowanie wzrokiem jest przez to utrudnione.

A pusty input tytułu w ciemnym motywie prawie nie istnieje:
screenshot-20240312105044.png

Generalnie ciemny motyw to bardzo trudna rzecz, wbrew pozorom. Tak strzelając danymi z tyłka to powiem, że jakieś 70% stron mających ciemne motywy robi to źle. IMO zamiast czytać ten wątek i tweakować cssy tu i tam - zatrudniłbym designera, który zna się na robocie i przygotuje mockupy w odpowiednich kolorach - a potem je implementował.

2

Screenshot_20240313_121543.png
Ekran logowania (i rejestracji) ma bardzo nieczytelne pola. Przydałby się jakiś border wkoło inputu, żeby było to lepiej widać. Domyślnie obramówka pokazuje się tylko i wyłącznie wtedy gdy jest focus. Dodatkowo przyciski logowania OAuth nie wyglądają dobrze na ciemnym tle. Na jasnym nawet w porządku, aczkolwiek fajnie jakby był osobny wariant dla ciemnego. A no i lub ma tło z jasnego motywu.

2

Latex w ciemnych kolorach jest nieczyleny.
\int \sqrt{\frac{1}{x}}, dx

Nie zgadzam się z Miang, ja lubię ciemny kolor, czasem oczy pieką jak się w jasny kolor wejdzie, a jak jest się w ciemnym to się unika tego.

Ale Miang już na wyższy level feminizmu wchodzi wszystko jej nie pasuje i ciernia z tyłka nie wyciąga.

Tak jak patrzę to myślę jakbym z botami na forum gadał, nikt się nie wydaje prawdziwy.

1 użytkowników online, w tym zalogowanych: 0, gości: 1