Відмінності від оригінальної дизайн-системи Дії

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

Проте ми впевнені, що деякі оригінальні системи, можуть бути переглянуті, що ми і зробили для деякіх компонентів.

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

На цій сторінці ви знайдете список змін і відмінностей нашої реалізації від оригіналу.

Список відмінностей

  1. Розмір шрифту на мобільних пристроях.

    Оригінал: розмір тексту, кнопок, посилань має бути зменшений для мобільних пристроїв.

    Як ми зробили: ми вирішили лишити його на рівні 1rem, що в більшості браузерів дорівнює 16px.

    Причина: більшість доступних нам рекомендацій радять використовувати саме 16px як базовий розмір шрифту для всіх мобільних пристроїв.

    Для зменшення розміру тексту згідно з оригіналом, ми створили додаткові CSS класи. Зазвичай вони мають суфікс -sm, наприклад di-text-sm, di-btn-sm, di-link-sm тощо.

  2. Колір для посилань, які було вже відвідано

    Оригінал: немає відмінності щодо відвіданих посилань, колір посилань завжди такого ж самого кольору як і текст.

    Як ми зробили: для посилань, які вже були відкрити змінили колір на dodger-blue(#5b5aff) з палітри кольорів.

    Причина: для більшості користувачів це зручніше, оскільки вони можуть відрізняти відвідані посилання від невідвіданих.

  3. Розмір шрифту для:

    • Бейджів
    • Табів

    Оригінал: розмір шрифту оригінальній дизайн-системі Дії менше ніж 16px.

    Як ми зробили: ми вирішили збільшити його до 16px.

    Причина: більшість доступних нам рекомендацій радять використовувати саме 16px як базовий розмір шрифту для всіх мобільних пристроїв.

  4. Аватар іконкою користувача Оригінал: іконка аватару користувача в неофійній Figma є обʼємною і розташована внизу а не по центру.

    Як ми зробили: Іконка є плоскою і розташована всередині.

    Причина: Так було зробити простішу, і не було зрозуміло, наскільки це затребуваний функціонал.