01 от 03
Последната версия на Atomic.io включва скролируеми контейнери
Преди няколко месеца показах как atomic.io може да се използва за прототип на движение . Една от ключовите моменти, които направих в парчето, е "показването на движение", вместо да го оставям на въображението на клиента или екипа. Всъщност това стана толкова важно, че на сцената се появява съвсем нова категория UX / UI инструменти. Те включват - Apple Keynote, Adobe Edge Animate, After Effects и UXPin , за да назовем само няколко. Новото момче на блока е Atomic.io, което бе отворено бета, когато за първи път пишех за продукта.
Непознатото нещо за отворените бета е, че те дават на производителя на софтуер възможността да съберат обратна информация за потребителския набор от функции, включително липсващи функции, и след това да ги добавят към приложението и да ги тестват преди пускането на пазара. В случай на атомна, една функция, която наистина ми липсваше, беше възможността да превъртате съдържанието вертикално или хоризонтално. Това може да включва неща като карти, слайдшоу или практически каквото и да е потребител, който би пробил или плъзгал в рамките на интерфейса на приложението или сайта.
Това трябва да е тема, която много от потребителите са поискали, защото превърнатите контейнери бяха само въведени в приложението този месец и трябва да призная, че създаването на превъртащо се съдържание в прототипа е мъртъв прост, за да се даде възможност.
Ето как…
02 от 03
Как да създадете вертикално превъртащо съдържание в атомно
Първо трябва да се регистрирате за безплатен пробен период от 30 дни и в края на този период ще получите три ценови планове.
Първото нещо, което трябва да знаете, е, че цялата работа, която ще направите, е в браузъра и приложението е насочено стриктно към Google Chrome. След като влезете, ще бъдете преведени на страницата " Проекти ". За да отворите приложението, кликнете върху бутона Нов проект .
Когато се появи интерфейсът, ще видите, че има ограничен брой инструменти, възможността за добавяне на страници и слоеве към страниците, artboard и, отдясно, контекстно-чувствителен панел за свойства.
В този пример започнах с iPhone 5, което е 320 x 568. След това отворя папката, съдържаща изображенията, които ще се превъртат и ги влачи на платното. Те автоматично бяха добавени към проекта и можете да видите, че те са на отделни слоеве, ако кликнете върху раздела Слоеве . След това избрах инструмента Стрелка (Избор), избрах изображение и го преместих в нова позиция, за да добавим малко пространство между него. След това избрах всички изображения и кликнах върху бутона "Разпределяне вертикално" в лентата с инструменти. Това разпределя равномерно изображенията.
Следващата стъпка е да изберете цялото съдържание, което ще се превърта и да кликнете върху бутона Контейнер, или изберете Create Scroll Container от бутона Group . Щом контейнерът е създаден, ще го видите в панела "Слоеве" - кликнете върху контейнера и плъзнете долната дръжка нагоре към дъното на платното . Кликнете върху бутона за предварителен преглед в долната част на панела "Имоти" и ще се отвори прозорец на браузъра. Използвайте ролката за превъртане на мишката, за да превъртите съдържанието. За да се върнете към проекта си, кликнете върху бутона Редактиране в долния десен ъгъл на прозореца на браузъра.
03 от 03
Как да създадете хоризонтално превъртащо съдържание в атомно
Хоризонталното превъртане е също толкова лесно да се постигне.
В този случай изтегли серия от изображения върху платното и ги притисна един срещу друг. При избраните изображения, след това кликнете върху бутона "Най-изравняване", за да сте сигурни, че всички са подравнени помежду си.
След това задържах клавиша Shift и избрах всеки слой в панела "Слоеве". При избраните изображения щракнах върху бутона "Контейнер" и в панелите "Свойства" избрах "Хоризонтално" в областта "Поведенчески".
Тогава тествах проекта в прозореца на браузъра, като щракнах върху бутона "Преглед".
Въпреки че показах как да създадете отделни версии на вертикално и хоризонтално превъртане, стига да поставите превъртащото се съдържание в контейнер, можете да имате тези контейнери в отделни зони на екрана. Например една уеб страница може да има вертикално превъртане на съдържание в страничното меню и хоризонтално превъртане на съдържание в слайдшоу на една и съща страница. Всъщност контейнерът може да има както вертикално, така и хоризонтално превъртане за елементи като например инструмент за избор на изображения, който има десетина миниатюри.
За да научите повече за тази функция в atomic.io, вижте:
- Блокираното съобщение
- Контур за превъртане на контейнери
- Маскиране с контейнери
- Отстраняване на неизправности при превъртането на контейнери