01/03
Son Atomic.io Güncellemesi Kaydırılabilir Konteynerleri İçerir
Birkaç ay önce atomic.io'nun hareketi prototiplemek için nasıl kullanılabileceğini gösterdim . Parçada yaptığım en önemli noktalardan biri, müşterinin veya ekibinin hayal gücüne bırakmak yerine “hareket göstermek” oldu. Aslında, bu çok kritik hale geldi ve yepyeni bir UX / UI araçları kategorisinde ortaya çıktı. Bunlar arasında Apple Keynote, Adobe Edge Edge Animate, After Effects ve UXPin bulunuyor . Bloktaki yeni çocuk, ürün hakkında ilk yazdığım sırada açık beta sürümündeki Atomic.io.
Açık betalar hakkında net olan şey, yazılım üreticisine, eksik özellikler de dahil olmak üzere özellik kümesinde kullanıcı geri bildirimi toplama ve daha sonra bunları uygulamaya ekleme ve bunları ticari sürümden önce test etme fırsatı vermesidir. Atomik durumunda, gerçekten özlediğim bir özellik, içeriği dikey veya yatay olarak kaydırmaktı. Bu, kartlar, slayt şovları veya bir kullanıcının bir uygulamanın veya sitenin arayüzünün sınırları dahilinde kaydırdığı veya sürüklediği hemen hemen her şeyi içerebilir.
Bu, bir çok kullanıcının sorduğu bir konu olmalıydı çünkü kaydırılabilir kaplar bu ay sadece uygulamaya girmişti ve itiraf etmeliyim ki, prototipte kaydırılabilir içerikler yaratmak kolay ölüdür.
İşte nasıl…
02/03
Atomik Dikey Kaydırma İçeriği Nasıl Oluşturulur
İlk olarak 30 günlük ücretsiz bir deneme için kayıt olmanız ve bu süre sonunda üç fiyatlandırma planı sunmanız gerekecektir.
Bilmeniz gereken ilk şey, tarayıcınızda yapacağınız tüm çalışmadır ve uygulama kesinlikle Google Chrome'da hedeflenmiştir. Giriş yaptıktan sonra, Projeler sayfasına yönlendirileceksiniz. Uygulamayı açmak için Yeni Proje düğmesini tıklayın .
Arayüz belirdiğinde, sınırlı sayıda araç olduğunu, sayfalara ve katmanlara sayfa eklemeyi, çalışma yüzeyini ve sağda, içeriğe duyarlı özellikler panelini görebileceğinizi göreceksiniz.
Bu örnekte, 320 x 568 olan bir iPhone 5 ön ayarıyla başladım. Ardından, kaydırılacak görüntüleri içeren klasörü açıp bunları tuvalin üzerine sürükleyin. Projeye otomatik olarak eklendiler ve Katmanlar sekmesini tıklarsanız bireysel katmanlarda olduklarını görebilirsiniz. Ok aracını (Selection) seçtikten sonra bir resim seçtim ve aralarında biraz boşluk bırakmak için yeni bir konuma sürükledim. Daha sonra tüm görüntüleri seçtim ve araç çubuğundaki Dikey Olarak Dağıt düğmesine tıkladım . Bu eşit aralıklarla görüntüler.
Bir sonraki adım, kaydırılacak içeriğin tamamını seçmek ve Kapsayıcı düğmesini tıklatmak veya Grup düğmesi açılır penceresinden Kaydırma Konteyneri Oluştur'u seçmek . Kap oluşturulduktan sonra bunu Katmanlar panelinde göreceksiniz - kabı tıklayın ve alt tutamağı tuvalin altına doğru sürükleyin . Özellikler panelinin altındaki Önizleme düğmesini tıklayın ve bu bir tarayıcı penceresi başlatır. İçeriği kaydırmak için farenizin kaydırma tekerleğini kullanın. Projenize geri dönmek için tarayıcı penceresinin sağ alt tarafındaki Düzenle düğmesini tıklayın .
03/03
Atomik Yatay Kaydırma İçeriği Nasıl Oluşturulur
Yatay kaydırma yapmak da kolay bir işlemdir.
Bu durumda, bir dizi görüntüyü tuvalin üzerine sürükledi ve birbirleriyle karşı karşıya getirdi. Resimler seçildikten sonra, hepsinin birbiriyle uyumlu olduklarından emin olmak için Üst Hizala düğmesini tıklatırım.
Daha sonra Shift tuşunu basılı tutup Katmanlar panelindeki her katmanı seçtim. Resimler seçildiğinde, Kapsayıcı düğmesine ve Davranışlar alanında Yatay olarak seçilen Özellikler panellerine tıklattım .
Daha sonra önizleme düğmesine tıklayarak projeyi bir tarayıcı penceresinde test ettim.
Kaydırılabilir içeriği bir kapsayıcıya koyduğunuz sürece, Dikey ve Yatay kaydırmanın tek tek sürümlerini nasıl oluşturacağımı göstersem de, bu kapları ekranın ayrı alanlarına da alabilirsiniz. Örneğin, bir web sayfası, bir yan menüde dikey olarak kaydırılabilir içeriğe sahip olabilir ve aynı sayfada bir slayt gösterisinde yatay olarak kaydırılabilir. Aslında bir kap, bir düzine kadar küçük resim içeren bir görüntü seçici gibi öğeler için hem dikey hem yatay kaydırma yapabilir.
Atomic.io'daki bu özellik hakkında daha fazla bilgi edinmek için şunları kontrol edin:
- Blog duyuru
- Kaydırma kapsayıcısı öğreticisi
- Kapsayıcılar kullanarak maskeleme
- Kaydırma Kapları Sorunlarını Giderme