Двигаем элементы в прототипе Axure

    Сегодня я столкнулся с проблемой, решением которой хотел бы поделиться. Эта заметка будет полезна тем, кто старается делать свои прототипы Axure максимально интерактивными.

    Итак, задача. Визуализировать на прототипе добавление какого-либо объекта со сдвигом других объектов. Для примера возьмем добавление вопроса в сервисе онлайн-консультации.

    image

    Необходимо сделать так, чтобы при нажатии кнопки «Отправить» новый вопрос появлялся над старыми, а старые, в свою очередь, сдвигались вниз. Вот так:

    image

    Поискав решение на форуме Axure, я обнаружил, что это довольно распространенная задача среди пользователей этой программы. Тем не менее, разработчики пока так и не внедрили динамическое относительное позиционирование элементов, поэтому, когда возникает такая задача, приходится либо объединять все элементы, которые нужно подвинуть, в единую панель (что не всегда возможно), либо двигать каждый элемент по отдельности.

    Итак, что нужно сделать, чтобы сдвинуть элемент. Для начала, его нужно конвертировать в Динамическую панель:

    image

    После этогов выбираем элемент и его событие, по которому должен происходить сдвиг элементов:

    image

    И добавляем действие Move panel(s), выбрав нужную панель и указав ей относительное значение сдвига (просто число — сдвигаем вниз на соответствующее количество пикселей, число с минусом — сдвигаем вверх):

    image

    Прототип из примера можно скачать по ссылке: petwork.ru/data/stuff/move-object-example.rp

    Кажется просто, но на сложных прототипах может оказаться пыткой.

    P.S. Буду рад принять на вооружение более изящное решение, если оно имеется.

    Средняя зарплата в IT

    113 000 ₽/мес.
    Средняя зарплата по всем IT-специализациям на основании 10 037 анкет, за 2-ое пол. 2020 года Узнать свою зарплату
    Реклама
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее

    Комментарии 4

      0
      Это решение не очень подходит если Вам нужно подвинуть 1 из элементов в середине очень длинной страницы. Приходится все последующие объединять в панель. К сожалению изящного решения этой проблемы не нашел.

      В вашем случае воспользовался бы костылем — в 1ю панель положил бы 1 вопрос, во 2ю — 2 вопроса и просто переключал бы их видимость.
        0
        На практике у меня была чуть более сложная задача — там часть двигал, часть скрывал. В статье привел условный пример.
        0
        В одной из бета версий было относительное позиционирование. Можно было для панели указать другую панель, как элемент привязки. Я, было, обрадовался, но в финальную версию функционал почему-то не вошел. Видимо, не все так просто оказалось.
          0
          Вот же отстой :-)

        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

        Самое читаемое