Апошняе абнаўленне Atomic.io Уключае SCROLLABLE кантэйнеры

01 з 03

Апошняе абнаўленне Atomic.io Уключае SCROLLABLE кантэйнеры

Atomic.io

Некалькі месяцаў таму я паказаў , як atomic.io можа быць выкарыстаны для стварэння прататыпа руху . Адным з ключавых момантаў, якія я зрабіў у кавалку быў «паказваючы рух», а не пакідаць яго ва ўяўленні кліента або каманды важна. На самай справе, гэта стала настолькі крытычным, што ў цэлым новая катэгорыя інструментаў UX / UI з'яўляецца на сцэне. Яны ўключаюць у сябе - Apple Keynote, Adobe, памежную Animate, After Effects і UXPin , каб назваць некалькі. Новы маляня на блоку Atomic.io які быў у адкрытай бэце, калі я ўпершыню напісаў пра прадукт.

Чысценькая рэч аб адкрытых бэт, яны даюць вытворцы праграмнага забеспячэння магчымасць збіраць водгукі карыстальнікаў на набор функцый, у тым ліку якія адсутнічаюць функцый, а затым дадаць іх у дадатак і іх выпрабаванні перад камерцыйным выпускам. У выпадку атамнай, адна асаблівасць, якую я сапраўды прапусціў была магчымасць пракруткі змесціва па вертыкалі або па гарызанталі. Гэта можа ўключаць у сябе такія рэчы, як карты, слайд-шоў або практычна нічога карыстальнік будзе правядзіце або супраціву ў межах межаў інтэрфейсу прыкладання або сайта.

Гэта павінна быць прадмет шмат карыстальнікаў папрасілі таму пракрутка кантэйнераў былі проста ўведзены ў дадатку ў гэтым месяцы, і я павінен прызнаць, што стварэнне пракруткі кантэнту ў прататыпе мёртвы проста ўключыць.

Вось як ...

02 з 03

Як стварыць вертыкальны скролінг змесціва ў Atomic

Atomic.io

Вам трэба будзе першым падпісацца на бясплатны 30-дзённы пробны перыяд, і ў канцы гэтага перыяду, вам будзе прадстаўлены з трыма тарыфнымі планамі.

Першае, што вам трэба ведаць, гэта ўсё праца, якую вы будзеце рабіць у браўзэры і дадатак накіравана строга на Google Chrome. Пасля таго, як вы увайсці, вы трапіце на старонку праектаў. Каб адкрыць прыкладанне, націсніце на кнопку New Project.

Пры з'яўленні інтэрфейсу вы ўбачыце, што існуе абмежаваную колькасць інструментаў, магчымасць дадання старонак і слаёў старонак, палатно і, больш за справа, кантэкстна-залежная панэль уласцівасцяў.
У гэтым прыкладзе, я пачаў з iPhone 5 прасэт, які 320 х 568.I затым адкрыйце папку, якая змяшчае выявы, якія будуць пракручваць і цягнулі іх на палатно. Яны былі аўтаматычна дададзены ў праект , і вы можаце бачыць , што яны знаходзяцца на асобных слаях , калі націснуць на ўкладку Пласты. Затым я выбраў інструмент Стрэлка (Selection), выбраны вобраз і пацягнуў яго ў новае становішча для таго, каб дадаць некаторую прастору паміж імі. Затым я выбраў ўсе карцінкі і націснуў кнопку Размеркаваць па вертыкалі на панэлі інструментаў. Гэта раўнамерна малюнка.

Наступны крок , каб выбраць усе змесціва пракручваць і альбо націсніце кнопку кантэйнера або абярыце Стварыць Scroll кантэйнер з кнопкай групы выскачыць ўніз. Пасля таго , як кантэйнер created- вы ўбачыце яго ў палітры пластоў - выберыце кантэйнер і перацягнуць ніжнюю ручку ўверх да ніжняй частцы палатна. Націсніце кнопку Прагляд у ніжняй частцы панэлі уласцівасцяў , і гэта запусціць акно браўзэра. Выкарыстоўвайце кола пракруткі вашай мышы для пракруткі змесціва. Для таго, каб вярнуцца да праекту, націсніце на кнопку Edit ў правым ніжнім куце акна браўзэра.

03 з 03

Як стварыць гарызантальны скролінг змесціва ў Atomic

Atomic.io

Гарызантальная пракрутка так жа лёгка зрабіць.

У гэтым выпадку, цягнула серыю малюнкаў на палатно і баднуў іх адзін супраць аднаго. Выбраныя выявы, я затым націсніце кнопку Уверх Align, каб пераканацца, што ўсе яны сумяшчаюцца адзін з адным.

Затым я заціснуўшы Shift, і падбірайце кожны пласт у палітры пластоў. З выбраных малюнкаў, я націснуў на кнопку кантэйнера і, у панэлі Properties, выбраныя Гарызантальна ў галіне Паводзін.

Затым я пратэставаў праект у акне браўзэра, націснуўшы кнопку Прагляд.

Хоць я паказаў, як ствараць асобныя версіі вертыкальнай і гарызантальнай пракруткі, да тых часоў, як вы паклалі пракручваць змесціва ў кантэйнеры, вы можаце мець гэтыя кантэйнеры ў асобных галінах экрана. Напрыклад, вэб-старонка можа мець вертыкальна пракруткі змесціва ў бакавым меню і гарызантальна пракруткі змесціва ў слайд-шоў на той жа старонцы. На самай справе, кантэйнер можа мець як вертыкальную і гарызантальную прагортку для такіх элементаў, як падборшчык малюнкаў, які мае тузіны эскізаў.

Каб даведацца больш аб гэтай функцыі ў atomic.io праверыць: