Редизайн Google Chrome, історія у 3 частинах (ІСТОРІЯ 2-га)

DesignTalk.club пропонує вам черговий класний матеріал – цього разу це адаптований переклад на українську мову статті Ханни Лі, дизайнерки Google – про повний редизайн інтерфейсу Chrome.

Першу частину читайте ТУТ

Частина 2

4. 95 відтінків сірого

Навіть в нашій команді ніхто не знав, скільки варіантів текстових стилів живе всередині цієї рамки. Оскільки Chrome був створений більше 10 років тому, у нас був розкиданий набір неповних або застарілих вихідних файлів.

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


Звичайно, кілька років тому ми «матеріалізували» наш юзерінтерфейс, але у нас не було жодних вказівок, як і коли використовувати ці параметри, в результаті чого ми отримали понад 14 відтінків сірого кольору Material для звичайного тексту 14sp Roboto.

Ми використовували більше 95 різних відтінків сірого.

Неможливо було вирішити, які з них замінити, не поглянувши на контекст, адже навіть найбільш незначні зміни можуть порушити стандарти доступності. Та я б хотіла б знати, яка мінімальна кількість нам дійсно потрібна.

Відповідь прийшла майже півроку тому – 8.

Потім ми зробили те ж саме для кожної іконки в нашому інтерфейсі. Всі 115 з них – ретельно вибираючи, які з них повинні бути Material (значки меню), які специфічними для Chrome (наприклад, Incognito), а які специфічними для платформи (наприклад, копіювання, вставка), не включаючи обрані, натиснуті і відключені стану для всіх з них.

Крім того, деякі з наших іконок перевернуті для мов справа наліво, так що загальна кількість символів що вийшла – понад 400.

5. Дизайн ніколи не готовий

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

Володіючи помилковою впевненістю того, хто щойно виграв гру Getting Over It, я щиро думала, що зможу зробити це сама. Але чим більше я намагалася, тим очевиднішим ставало те, що ця проблема не вирішувалася за допомогою простого редизайну.

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

Це було складно, тому що Chrome постійно балансує між специфікаціями Google (вхід в систему), специфікаціями Material Design (кнопки та іконки), власним юзерінтерфейсом (клавіатури) і брендовими елементами Chrome (автономна гра Dino).

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

З цією підтримкою ми вирішили побудувати візуальну специфікацію загальних компонентів на основі бібліотеки коду. Material-компоненти, які інші програми отримують «безкоштовно», повинні були бути налаштовані таким чином, щоб відповідати всім 2000 модифікаціям Chrome до того моменту, коли він був майже побудований з нуля.

Тому нам потрібно було знайти масштабований спосіб виявити всі ці відмінності.

Результатом став наш перший в історії документ із зображеннями Chrome:

Закінчення 2-ї частини

Першу частину читайте ТУТ

ДУЖЕ РАДИМО ПОЧИТАТИ:

Залишити відповідь