Comments 21
В этих работах продумано все до мелочей, использованы все возможности и нет ничего лишнего.
1) Ненужное раздвигание обратно до кнопки с галочкой. Создается впечатление что сабмит опять стало кнопкой, но ведь это не так.
2) Текст движется аж в 4 направлениях. Вращается, вверх (телефон), вниз(подсказка) и вправо. Разве это не нарушение "правила одного движения"?
2) Текст движется аж в 4 направлениях. Вращается, вверх (телефон), вниз(подсказка) и вправо. Разве это не нарушение «правила одного движения»?
Суть в том, что движений может быть несколько, но происходить они должны одновременно, а не последовательно
Можно ли корпорацию добра считать авторитетным мнением, но у них в гайде, на этот счет, есть пару строк.
Don't
Transitions can get confusing when multiple items need to move in different directions or cross paths.
В цитате, которую вы привели, речь идет о нескольких предметах, которые движутся в разных направлениях и пути которых пересекаются. Это действительно выглядит плохо.
Ну как сказать, там, все таки, предлог «или» (move in different directions or cross paths.)
Ключевое слово все таки multiple items. Без разницы «и» там или «или», к моему первому комментарию замечание все равно не относится
В таком случае, multiple — несколько. Про разнотипные элементы ни слова. Нет уточнений типа: multiple various items.
Вы случайно не юридический заканчивали? Предлагаю внимательно посмотреть анимацию, на комментарий к которой вы ссылаетесь — анимация
Разве не очевидно, что здесь показано движение нескольких элементов в разных направлениях? Пути некоторых из них пересекаются, как раз это и написано и в комментарии «Don't».
В статье же говорится о другом. Например, если нам нужно с помощью анимации уменьшить текст на 10 пунктов и переместить его выше на 50 пикселей. Мы можем сначала уменьшить, потом переместить, но это смотрится некрасиво. Гораздо лучше, когда два этих действия выполняются одновременно — текст перемещается и в то же время уменьшается. Надеюсь теперь я достаточно доходчиво объяснил и мне не придется продолжать этот бессмысленный спор.
Разве не очевидно, что здесь показано движение нескольких элементов в разных направлениях? Пути некоторых из них пересекаются, как раз это и написано и в комментарии «Don't».
В статье же говорится о другом. Например, если нам нужно с помощью анимации уменьшить текст на 10 пунктов и переместить его выше на 50 пикселей. Мы можем сначала уменьшить, потом переместить, но это смотрится некрасиво. Гораздо лучше, когда два этих действия выполняются одновременно — текст перемещается и в то же время уменьшается. Надеюсь теперь я достаточно доходчиво объяснил и мне не придется продолжать этот бессмысленный спор.
Да это то и ясно. Бить одну анимацию на несколько шагов — не самый умный ход. Кто ж спорит?
Но, как мне кажется, изначально речь шла про эту часть
где четыре элемента, движутся во всех четырех направлениях, да еще и у каждого свой эффект анимации, собственно от чего и отговаривает нас вышеупомянутый комментарий из гайда.
Но, как мне кажется, изначально речь шла про эту часть
где четыре элемента, движутся во всех четырех направлениях, да еще и у каждого свой эффект анимации, собственно от чего и отговаривает нас вышеупомянутый комментарий из гайда.
ну и так названный cross paths здесь тоже присутствует))
Я так понимаю, что под «правилом одного движения» подразумевается то, что все трансформации объекта должны происходить одновременно, а не по очереди.
Круто, что сразу в пример приводятся готовые анимации. Честно говоря, далеко не все замечала сразу, но после ваших комментариев уже сложно было не замечать)
«Красотульки» и дизайн — не одно и то же.
Последний пример с выбором цвета — пример плохого дизайна, а не хорошего.
Когда пользователь выбрал цвет, он видит его в покрашенном кружке. А должен видеть сразу же перекрашенный текст. До того, как подтвердит свое действие. Даже если убрать с этого примера вообще все анимации, но добавить мгновенное превью прямо на тексте, дизайн будет удобнее, чем сейчас.
Последний пример с выбором цвета — пример плохого дизайна, а не хорошего.
Когда пользователь выбрал цвет, он видит его в покрашенном кружке. А должен видеть сразу же перекрашенный текст. До того, как подтвердит свое действие. Даже если убрать с этого примера вообще все анимации, но добавить мгновенное превью прямо на тексте, дизайн будет удобнее, чем сейчас.
UFO just landed and posted this here
Это в данном случае, как раз, нормально. Всплывающее окно редактирования — не диалоговое окно. Оно не является модальным. Поэтому неочевидно управление. Если добавить кнопку «отмена», непонятно, как реагировать, скажем, на щелчок за пределами окна. «Отмена» это, или «Ok»?
Надо убрать кнопку OK. И, кстати, получится свежая версия MSOffice, в которой стиль так и редактируется — всплывающим окошком возле выделенного текста.
Надо убрать кнопку OK. И, кстати, получится свежая версия MSOffice, в которой стиль так и редактируется — всплывающим окошком возле выделенного текста.
Кстати, хорошее (имхо) правило про длительность анимации в трансформациях интерфейса: всегда снижать ее до минимально заметной. Чтобы на грани, еще минус 50 мс и ее совсем не видно.
О боги. Это ужас какой-то. И "плохие" примеры, и "хорошие". Это анимация ради анимации, дизайн ради дизайна, понты ради понтов, свистелки и перделки в дистиллированном виде.
Единственное, что мне понравилось — это ватермарки на текстовых полях, превращающиеся в мелкие надписи сверху. Ещё бы "красивый" еле заметный бледно-серый микроскопическими буквами сдеали читаемым тёмно-серым с адекватным размером — вообще было бы отлично. Submit в принципе сносный.
За всё остальное я бы расстреливал на месте.
Я честно не понимаю, в чем разница анимации где продукт добавляется в карзину?
Все из-за Дрибббла и модного веяния анимировать все, что под руку попадается. Дизайнеры так сильно хотят получить побольше лайков, что просто творят ради красоты. Очень-очень много появляется концептов, от которых в реальном интерфейсе можно в буквальном смысле блевануть, если долго пользоваться. Одно хорошо — только небольшая доля этого попадает в реальный мир.
Sign up to leave a comment.
5 ошибок, которых следует избегать при создании микровзаимодействий