01-də 03
Son Atomic.io Güncellemesi Kaydırılabilir Konteynerlər daxildir
Bir neçə ay əvvəl mən atomic.io prototip hərəkət üçün necə istifadə edilə bilər göstərdi . Parçada etdiyim əsas nöqtələrdən biri, müştərinin və ya qrupun xəyallarına buraxmamaq deyil, "hərəkət göstərmək" vacibdir. Əslində, bu, çox vacib oldu ki, səhnədə UX / UI vasitələrinin yeni bir kateqoriyası görünür. Bunlara - Apple Keynote, Adobe Edge Animate, Effects və UXPin sonra, bir neçə ad qoymaq olar. Blokdakı yeni uşaq məhsul haqqında ilk yazdığımda açıq beta şəklində olan Atomic.io idi.
Açıq betaslar haqqında səliqəli şey onlar proqram istehsalçısının funksiyaların xüsusiyyətləri, o cümlədən itkin xüsusiyyətləri də daxil olmaqla, istifadəçi rəylərini toplamaq imkanı verir və sonra onları tətbiqə əlavə edir və kommersiya versiyasından əvvəl sınaqdan keçirirlər. Atom halında, mən həqiqətən qaçırdım bir xüsusiyyət, şaquli və ya üfüqi bir şəkildə hərəkət etmək imkanı idi. Bu kart, slayd şouları və ya bir istifadəçi bir tətbiqin və ya saytın interfeysi daxilində sürüşdürməyi və ya sürüşməyi praktiki bir şey kimi ehtiva edə bilər.
Bu, istifadəçilərin istənilən bir mövzusu olmalı idi, çünki kaydırılabilir konteynerlər bu ay yalnız tətbiqə təqdim edilmişdi və etiraf etməliyəm ki, prototipdə kaydırılabilir məzmun yaratmaq üçün ölü sadədir.
İşdə necə ...
03 02
Atomikdə Dikey Kayan Məzmunun Yaradılması
30 günlük pulsuz sınaq üçün qeydiyyatdan keçməlisiniz və o dövrün sonunda üç qiymət planı ilə təqdim olunacaqsınız.
Bilmək lazım olan ilk şey, etdiyiniz bütün işlər brauzerdədir və tətbiq Google Chrome-da qətiliklə hədəflənir. Daxil etdikdən sonra, Layihələr səhifəsinə daxil olunacaqsınız. Proqramı açmaq üçün Yeni Layihə düyməsini basın .
İnterfeys göründüyü zaman, məhdud sayda bir sıra vasitələr, səhifələr və təbəqələrə qatlamlar, sahə və sağ üzərində, kontekstə həssas xüsusiyyətlər panelini əlavə etmək imkanı var.
Bu nümunədə, mən iPhone 5 hazırlamışam, yəni 320 x 568.I sonra açılacaq şəkilləri olan qovluğu açmalı və onları kətan üzərinə sürükləmişəm. Layihə avtomatik olaraq əlavə edildi və Layers sekmesini tıkladığınızda fərdi katmanlarda olduqlarını görə bilərsiniz. Sonra Arrow aracını seçdim (Seçim), bir şəkil seçdi və aralarında bir boşluq əlavə etmək üçün yeni bir mövqeyə sürükledim. Sonra bütün şəkilləri seçdim və Toolbar-daki Dağıdan Dağıtmaq düyməsini tıkladım . Bu şəkillər birbaşa aralıqlaşdı.
Sonrakı addım, kaydırılacak bütün məzmunu seçmək və ya Konteyner düyməsini klikləmək və ya Qrup düyməsini açmaqdan gedin Konteyner yaratmaq seçin . Konteyner yaradıldıqdan sonra qatranlar panelində görəcəksiniz - konteynerə basın və alt sapı yuxarıya tuvalinin altına sürüşdürün . Properties panelinin altındakı Önizleme düyməsini basın və bu brauzer pəncərəsini açacaq. Məzmuna keçmək üçün siçanınızın kaydırmalı təkərini istifadə edin. Layihəyə qayıtmaq üçün brauzer pəncərəsinin sağ altındakı Düzenle düyməsini basın .
03 03
Atomikdə Üfüqi Kaydırıcı məzmun yaratma
Horizontal scrolling yerinə yetirmək üçün asandır.
Bu vəziyyətdə, bir sıra şəkilləri tuvale sürükləyib, bir-birinə qarşı yandırdılar. Seçilən şəkillərlə, mən də bir-biri ilə hizalı olmasını təmin etmək üçün üst hizalı düyməsini vurdum.
Sonra Shift düyməsini basıb və Layers panelində hər qatı seçdim. Seçilmiş şəkilləri ilə, Konteyner düyməsini tıkladım və Davamışlar bölməsində Horizontal olaraq seçilmiş Properties panellərindən istifadə etdim.
Mən Preview düyməsini tıklayaraq layihəni Brauzer pəncərəsində sınamışam.
Bir konteynerdə kaydırılabilir kontent qoyduğunuz müddətdə, Dikey və Yatay kaydırımın fərdi versiyasını necə yaratdığınızı göstərdiyimə baxmayaraq, bu konteynerləri ekranın ayrı yerlərində saxlaya bilərsiniz. Məsələn, bir veb səhifə bir tərəfdən menyuda vertikal olaraq hərəkət etməli və eyni səhifədəki slayt-şouda yatay şəkildə hərəkət etməli ola bilər. Əslində, bir konteyner bir çox və ya çox kiçik olan bir görüntü seçicisi kimi əşyalar üçün həm şaquli, həm də üfüqi kaydırıcı ola bilər.
Atomic.io saytında bu xüsusiyyət haqqında daha ətraflı məlumat üçün:
- Blogun elan edilməsi
- Kaydırıcı konteyner təlimatı
- Konteynerlər istifadə edərək maska
- Kəsmə Konteynerlərini Qorunma