Серія інтерфейсних (не)оновлень — «Розворот поста joins darkside»

Поки пара ентузіастів взялася за конвертацію моїх ідей в готовий пресет для Stylish, у мене виникло мотивуюче почуття продовжити. Сьогодні підемо в глиб посту, подивимося, як ми зможемо покращити візуальне сприйняття деревовидних коментарів, подекуди збалансуємо стилі. Вобщем сталося те, чого я боявся найбільше — тяга до улучшизму приборкала мене і я подекуди підправив не тільки кольору. Так як інтерес до теми darcula для Хабра був відчутний, я дозволю собі котитися далі з «виворотком» кольору.



Нагадаю, що в попередньому пості я вивернув навиворіт Головну і якщо хтось хоче приєднатися до ентузіастам і конвертувати PSD > Stylish, ісходник виклав на р. драйві (соррі за безлад в шарах, але зазвичай я старанний)

До речі, пробу вже можете зняти. Камрад bano-notit просто молодчинка, схопив піпетку в руки і прямо з png-шек почав выцеплять весь забарвлення. Скачайте подивіться этоп пресет для Stylish. Звичайно можуть бути неточності, адже далі головної він пішов за своєю ініціативою прикрашати. Тут я зрозумів, що треба продовжувати розпочату справу, щоб він не збився з шляху.

Дійсно, на даркуле набагато сильніше можуть забирати на себе уваги картинки з білим фоном. Хороше рішення запропонував камрад Rondo в коментах: всіх зображень зменшувати opacity (я рекомендував би до 70% / 0.7), а за onhover відновлювати до 100%. Круто та ефективно!

Ідею знову підхоплює bano-notit, пропонуючи робити ефекти більш плавними через css шляхом:

.img {opacity: .1; transition: all 1s ease-out;}

Взагалі заботушка про юзерах!

Отже — розворот. Подивимося, що тут у нас темненького:

Автор посту



Нічого незвичайного тут: посилання, колір карми та рейтингу у нас вже були визначені в першому пості. У блоці нижче лише дозволив собі прибрати роздільники, додав йому 1px бордер, який візуально трохи підсилив обриси. В той же колір забарвлюється виділена область блоку.

Автор посту знизу



Начебто потрібно просто зробити копі-паст. Але немає. Чомусь в оригіналі на Хабре різна розмірність і інтенсивність шрифту для заголовків «карма» і «рейтинг», так і для їх значень. Вирішив зберегти, раптом Хабр що зрозумів, а я — ще ні!

Схожі публікації



З ними все теж саме як і з Хабами на головній. Забралися тільки кудись смужки (не мною!). Це все якісь хитрі стилі Хабра, мене не питайте. Я лише тільки за аналогією з кармою використовував аналогічний колір для кількості коментарів до постів.

Саме читається



Базується на аналогічній гамою що і вищезгаданий блок, розташований праворуч. Колір плашки з фільтрами відображення взято з основних табів з головної сторінки.

Заголовок коментарів



Дивно, що у Хабра в оригіналі тут якийсь вже нцатый стиль шрифту і не від світу цього. Пропоную «натягнути» сюди аналогічний всім заголовкам font-face. Адже це і є заголовок…

Коментарі



Намагаюся оптимізувати UX тут. Мені здається, що якщо трохи «поглибити» сходинки древовидности коментів, то візуально ієрархія буде краще читатися. Тому я вирівняв тіло коммент і «відповісти» не за рівнем аватарки, а за рівнем нікнейму. Спробуйте відчути в самому низу, коли я покажу картинку цілком.

Ієрархія



І без мене знаєте, які деколи палкі суперечки трапляються в коментах аж до нцатого рівня. Тут я знову намагаюся трохи оптимізувати user experience, провівши border-left для контейнера з відповідями (так, я виявляється вмію инспектить елементи в Хромі :). Мені здається це +N до швидкості усвідомлення візуального порядку. Спеціально ускладнив собі завдання, показавши версію з пестрейшими аватарками. Хоча якщо гасити прозорість аватарок до alpha=0.7 як і всі зображення в darcul'e, то можливо і +2N…

Textarea знизу



Взагалі звичайно всі ці іконостаси невиразні треба змінити на матеріальні, але було ліниво. Вибачте. Зате було не лен застосувати до кнопок аналогічний стиль як і для кнопки написання посту нагорі. В оригіналі стилі цих кнопок відрізняються. Це для мене трохи дивно.

Цікаві публікації

Один в один з «читається». Гаразд, адже втомив мабуть окремими фрагментами… Ось дивіться «простирадло» цілком:



Бажаючі скачати PSD можуть проїхати р. на диск
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.