Блог Calcup · Финансы
Почему калькуляторам понадобился свой дизайн-язык
Как после первых десятков экранов стало понятно, что калькуляторам нужен спокойный и единый язык интерфейса
В этой заметке
Коротко
- Сначала казалось, что хватит пары классов
- Главный экран не обязан развлекать
- Повторяемость экономит не только время разработки
- Дальше дизайн будет расти от реальных задач
В статье
Сначала казалось, что хватит пары классов
Первые калькуляторы собирались как отдельные небольшие формы. На старте это казалось удобным: добавил поля, вывел результат и перешёл к следующей странице. Но уже через несколько экранов начали появляться отличия, которые вроде бы мелкие, а пользоваться сайтом из-за них становится сложнее.
Где-то поле оказывалось выше соседнего, где-то результат выглядел как предупреждение, где-то подсказка спорила с основным текстом. Так появился не столько визуальный «редизайн», сколько рабочий язык для страниц с расчётами.
Главный экран не обязан развлекать
У калькулятора довольно простая задача: помочь человеку быстро проверить число. Поэтому интерфейс лучше делать спокойным, понятным и повторяемым. Заголовок, форма, результат, формула, пояснение — без попытки каждый раз придумывать новый сценарий с нуля.
Это особенно заметно в разных категориях. Кредит, цена за единицу и расчёт обоев решают разные задачи, но человеку не нужно каждый раз заново искать, куда вводить данные и где смотреть итог.
Повторяемость экономит не только время разработки
Единые классы действительно ускоряют выпуск новых страниц, но это не главный плюс. Когда структура повторяется, проще проверять адаптивность, фокус, состояние результата, длинные подсказки и большие текстовые блоки.
В какой-то момент дизайн-система стала не украшением, а способом держать проект в порядке. Новая страница либо спокойно попадает в общий ритм, либо сразу видно, где она выбивается и требует доработки.
Дальше дизайн будет расти от реальных задач
Calcup не хочется превращать в коллекцию ярких виджетов. Чем меньше интерфейс спорит с задачей, тем проще человеку сосредоточиться на числах, формулах и пояснениях.
Следующий слой будет более прикладным: таблицы популярных переводов, сравнение сценариев, аккуратные предупреждения и мобильные формы, где длинный расчёт не разваливается на середине пути.