03 01
Соңғы Atomic.io жаңартуы жылжымалы контейнерлерді қамтиды
Бірнеше ай бұрын мен прототипті қозғалыс үшін atomic.io қалай пайдалануға болатындығын көрсеттім . Мен өзіме жасаған негізгі сәттердің бірі - клиенттің немесе команданың қиялына қалдырудың орнына «қозғалысты көрсету» болды. Шын мәнінде, бұл оқиға сахнада UX / UI құралдарының жаңа санаты пайда болғаны соншалықты маңызды болды. Олардың қатарына Apple Keynote, Adobe Edge Animate, Effects After Effects және UXPin кіреді . Блокта жаңа бала - бұл Atomic.io, ол өнім туралы бірінші рет жазғанымда, ашық бета-мен болатын.
Ашық бета туралы таза нәрсе, олар бағдарламалық жасақтама өндірушісіне мүмкіндіктері шектеулі, соның ішінде мүмкіндіктерді пайдаланушылардың пікірлерін жинауға мүмкіндік береді және оларды қосымшаға қосып, оларды коммерциялық шығарылым алдында тексеруге мүмкіндік береді. Атом жағдайда, шын мәнінде жіберіп алған бір ерекшелігі - тік немесе көлденең мазмұнды айналдыру мүмкіндігі. Бұл карталар, слайд көрсетілімдері немесе пайдаланушының қолданбаның немесе тораптың интерфейсінің шекарасында сырғыту немесе апару іс жүзінде кез келген нәрселерді қамтуы мүмкін.
Бұл пайдаланушылар сұраған көптеген тақырып болуы керек еді, себебі осы айда жылжымалайтын контейнерлер жай ғана қолданбаға енгізілді және мен прототипте айналдырылатын мазмұнды жасау үшін қарапайым өлгенді жасау керек екенін мойындауым керек.
Міне, қалай ...
03 02
Атомды тік айналдыру мазмұнын қалай жасау керек
Алдымен 30 күндік тегін сынақ нұсқасына тіркелуіңіз керек және осы кезеңнің соңында сізге үш баға жоспарын ұсынасыз.
Біріншіден, сіз білуі керек нәрсе - сіз жасайтын барлық жұмыс браузерде және қолданба Google Chrome-қа қатаң түрде бағытталған. Сіз кіргеннен кейін сіз Жобалар бетіне түсесіз. Бағдарламаны ашу үшін, Жаңа жоба түймешігін басыңыз .
Интерфейс пайда болғанда сізде шектеулі құралдар саны, беттерге беттер мен қабаттар, жұмыс үстелі және оң жағында контекстке сезімтал қасиеттер тақтасы қосу мүмкіндігі бар екенін көресіз.
Бұл мысалда мен iPhone 5 алдын-ала орнатылған 320 x 568.I бастадым, содан кейін жылжытылатын кескіндерді қамтитын қалтаны ашады және оларды кенепте сүйреп апарады. Олар жобаға автоматты түрде қосылды және сіз Қабаттар қойындысын бассаңыз, олар жеке топтарда екендігін көре аласыз. Содан кейін мен көрсеткі құралын таңдады (іріктеу), суретті таңдап, олардың арасында бос орын қосу үшін оны жаңа орынға апарады. Содан кейін барлық кескіндерді таңдаймын және құралдар тақтасындағы Distribute Vertically түймешігін басыңыз . Бұл суреттерді біркелкі бөлді.
Келесі қадам - айналдыруға болатын барлық мазмұнды таңдау және контейнер түймешігін басу немесе Топ түймешігін басып, жылжыту контейнерін жасау дегенді таңдаңыз . Контейнер құрылғаннан кейін, оны қабаттар тақтасында көресіз - контейнерді басып, төменгі тұтқаны кенептің төменгі жағына қарай сүйреңіз . Сипаттар панелінің төменгі жағындағы Алдын ала қарау түймесін басып , шолғыш терезесін іске қосады. Мазмұнды айналдыру үшін тінтуірдің айналдыру дөңгелегін пайдаланыңыз. Сіздің жобаңызға оралу үшін шолғыш терезесінің төменгі оң жағындағы Өңдеу түймесін басыңыз .
03 03
Атомды көлденең жылжыту мазмұнын қалай жасау керек
Көлденең айналдыру оңай.
Бұл жағдайда кенепте суреттер сериясын сүйретіп, оларды бір-біріне соғып тастады. Таңдалған кескіндермен мен олардың бір-бірімен тураланғанына көз жеткізу үшін Жоғарыға дәл келтіру түймешігін басыңыз.
Содан кейін Shift пернесін басып тұрып, Layers тақтасындағы әр қабатты таңдадым. Таңдалған суреттермен Контейнер батырмасын басып , Сипаттар аймағында көлденеңінен таңдалған Сипаттар тақтасында басылдым.
Содан кейін мен Preview батырмасын басу арқылы жобаны Браузер терезесінде тексердім.
Тік және көлденең айналдырудың жекелеген нұсқаларын қалай жасау керектігін көрсеттім, бірақ контейнерге жылжытылатын мазмұнды қойғаныңызша, бұл контейнерлерді экранның бөлек бөліктерінде алуға болады. Мысалы, веб беті бүйірлік мәзірдегі мазмұнды тігінен жылжытуға және сол беттегі слайд-шоуда көлденең жылжыту мазмұнына ие болуы мүмкін. Іс жүзінде, контейнер ондаған немесе одан да көп нобайлары бар сурет таңдаушысы сияқты элементтерге арналған тік және көлденең айналдыруға ие болуы мүмкін.
Atomic.io торабындағы бұл мүмкіндік туралы қосымша ақпарат алу үшін:
- Блог жарнамасы
- Жылжыту контейнерінің оқу құралы
- Контейнерлерді пайдалану арқылы маска
- Ауыстыру контейнерлеріне қатысты ақауларды жою