Последнее обновление Atomic.io включает в себя прокручиваемые контейнеры
Несколько месяцев назад я показал, как atom.io можно использовать для прототипа движения. Важным является один из ключевых моментов, которые я сделал в этой статье: «показывать движение», а не оставлять его для воображения клиента или команды. Фактически, это стало настолько критичным, что на сцене появляется совершенно новая категория инструментов UX / UI. К ним относятся: Apple Keynote, Adobe Edge Animate, After Effects и UXPin, чтобы назвать несколько. Новый парень на блоке Atomic.io, который был в открытой бета-версии, когда я впервые написал о продукте.
Оптимальная вещь о открытых бета-версиях - это предоставление разработчику программного обеспечения возможности собирать отзывы пользователей о наборе функций, включая отсутствующие функции, а затем добавлять их в приложение и проверять их перед коммерческим выпуском. В случае атома одна особенность, которую я действительно пропустил, - это возможность прокрутки содержимого по вертикали или по горизонтали. Это может включать в себя такие вещи, как карты, слайд-шоу или практически все, что пользователь будет прокручивать или перетаскивать в пределах интерфейса приложения или сайта.
Это, должно быть, было предметом многих пользователей, которых просили, потому что в этом месяце были введены прокручиваемые контейнеры, и я должен признать, что создание прокручиваемого контента в прототипе мертво просто для включения.
Вот как…
02 из 03Как создать вертикальный прокручиваемый контент в Atomic
Вам нужно будет сначала зарегистрироваться на бесплатную 30-дневную пробную версию, и в конце этого периода вам будут представлены три ценовых плана.
Первое, что вам нужно знать, - это вся работа, которую вы будете делать, в браузере, и приложение строго нацелено на Google Chrome. После входа в систему вы попадете на проектов стр. Чтобы открыть приложение, нажмитеКнопка «Новый проект».
Когда появится интерфейс, вы увидите, что существует ограниченное количество инструментов, возможность добавлять страницы и слои к страницам, монтажной панели и, соответственно, панели контекстно-зависимых свойств.В этом примере я начал с предустановки iPhone 5, которая составляет 320 x 568. Затем откройте папку, содержащую изображения, которые нужно прокрутить, и перетащите их на холст. Они автоматически добавляются в проект, и вы можете видеть, что они находятся на отдельных слоях, если вы перейдите на вкладку «Слои», Затем я выбрал инструмент Стрелка (Selection), выбрал изображение и перетащил его в новое положение, чтобы добавить некоторое пространство между ними. Затем я выбрал все изображения и нажмите кнопку «Распределить по вертикали» на панели инструментов. Это равномерно распределяло изображения. Следующим шагом будет выбор всего содержимого, которое нужно прокрутить, и нажмите кнопку «Контейнер» или выберите «Создать контейнер прокрутки» с помощью кнопки «Группа» выскочить. Как только контейнер будет создан, вы увидите его на панели «Слои» - щелкните контейнер и перетащите нижнюю ручку вверх на нижнюю часть холста. Нажмите кнопку «Предварительный просмотр» в нижней части панели «Свойства», и это запустит окно браузера. Используйте колесо прокрутки мыши для прокрутки содержимого. Чтобы вернуться к вашему проекту, нажмите кнопку «Изменить» в правом нижнем углу окна браузера. Горизонтальная прокрутка так же легко выполнить. В этом случае, перетащил серию изображений на холст и развязал их друг против друга. С выбранными изображениями я затем нажмите кнопку «Верхнее выравнивание», чтобы убедиться, что все они совпали друг с другом. Затем я нажал клавишу Shift и выбрал каждый слой на панели «Слои». С выбранными изображениями я нажмите кнопку «Контейнер» а также, в панелях свойств, выбранных горизонтально в области поведения. Затем я протестировал проект в окне браузера, нажав кнопку «Предварительный просмотр». Хотя я показал, как создавать отдельные версии вертикальной и горизонтальной прокрутки, пока вы помещаете прокручиваемое содержимое в контейнер, вы можете иметь эти контейнеры в отдельных областях экрана. Например, веб-страница может иметь вертикальную прокрутку содержимого в боковом меню и горизонтальное прокручивание содержимого в слайд-шоу на той же странице. Фактически, контейнер может иметь как вертикальную, так и горизонтальную прокрутку для таких элементов, как сборщик изображений, который имеет дюжину миниатюр. Чтобы узнать больше об этой функции в atom.io, выполните следующие действия: Как создать горизонтальное прокручивание содержимого в Atomic
