AutoLayout ve Yığın Grupları kullanarak Eskizde Duyarlı Flex Grid

Yapı, modülerlik ve ölçeklendirme için tasarım sistemlerinin geliştirilmesi

CSS'deki FlexBox, iOS'ta UIStackView ve Android'deki FlexboxLayout gibi araçlar, geliştiricilere bugün varolan uyumlu ve duyarlı görünümlerin çokluğunu idare etmek için gerekli iş akışlarını vermiştir.

Bununla birlikte, tasarımcılar için, favori tasarım araçlarımızdan bazılarındaki düzen tasarım süreci her zaman daha manuel, daha statik, daha sıkıcı ve genellikle daha az matematiksel olarak daha kesin olmuştur. Ancak, Anima'daki insanların yaptıkları muhteşem çalışma sayesinde, yakında bu açığı daha iyi kapatmak için ihtiyaç duyduğumuz yapı ve esnekliğe sahip olabiliriz.

En yeni Otomatik Düzenleme eklentisine eklenmiş yeni Yığınlar özelliği ile artık UI çıktısını daha iyi barındıran ve tasarım sistemlerimizde daha fazla tutarlılık ve sürdürülebilirlik elde etmemizi sağlayan bir iş akışına sahibiz. (Feragatname - Bu konsept hala erken bir aşamadadır. Her bir yerleşim düzeni bu sistemden faydalanamayacaktır, bu nedenle uygun gördüğünüz şekilde karıştırın ve eşleştirin).

Demo

Aşağıdaki videoda, Yığınların sıkılığını sergilemek için konsept kanıtı bir esnek ızgara düzeni hazırladım. Temel bir web sayfasının yapısını yansıtan bir çalışma yüzeyi.

Hala erken keşif aşamalarındayken, şablona aşağıdaki işlevler eklenir:

  • Birkaç tıklamayla mobil cihazlar için masaüstü.
  • Çalışma yüzeyleri yeniden boyutlandırılabilir ve ızgara hizalaması / dağıtımı bozulmaz
  • Grid tarafından yapılandırılmış ızgara:
  • Vücut
     - Başlık
     - Ana
     - — bölümler
     - - - satır grupları (kardeş kutusu boyutlandırma katmanına sahip)
     - - - - satırlar
     - - - - - sütunlar
     - - - - - - modüller
     - - - - - - - bileşenler (iç mantıkla iç içe semboller)
     - Altbilgi
  • Modüler bir değiştirilebilir bileşen sistemi oluşturmak için Eskiz Yeniden Boyutlandırma özellikleri, Otomatik Sıralama sabitlemesi ve yığın grupları kombinasyonu ile tanımlanan iç içe sembolleri kullanın.
  • Mizanpaj, çalışma yüzeyinin genişliğine göre ayarlanır (içeriğin maksimum genişliği 1200 pikseldir ve mobilde yerleşik oluklar bulunur).
  • Kolon dağılımlarının çeşitliliği ve olukların kolayca çökmesi / değiştirilmesi.
  • ve
    ,
    'den bağımsız olarak büyür ve küçülür.
  • Kenar boşluklarını ve dolguları bir web sayfasının olduğu gibi sağlam tutarken,
    'e yapılan yükseklik değişiklikleri çalışma yüzeyinde
    ' ı aşağıya doğru itiyor.
  • Alt satırların yüksekliğini etkilemek için yüksekliği ayarlanabilir
  • Sütunların hizalanması (üst, orta, alt, uzatma) sıra düzeyinde tanımlanabilir.
  • Satırdan yeni bir sütun eklemek (veya birini silmek), kardeş sütunların genişliğini uygun şekilde sığacak şekilde otomatik olarak ayarlar.
  • Sütun içine yeni bir alt modül eklemek, sütunun dikey olarak büyümesini sağlar (modüller görüntüler, metin, listeler, tablolar, gruplar ve semboller gibi herhangi bir sayıda içerik türünü içerir)
  • Modüllerin hizalanması (sol, orta, sağ, uzatma) sütun seviyesinde tanımlanabilir.
  • içeriği değiştirmek veya mevcut katmana yeni katmanları sabitlemek için sembol takas bileşenleri.
  • Masaüstü çalışma yüzeyi, 8pt taban çizgisi ızgarası kullanacak şekilde ayarlandı.

Eskiz Dosyası

İşte burada. Herhangi bir şekilde geliştirmek için çekinmeyin ve bana bildirin.
* ÖNEMLİ * - Yığın Destekli Otomatik Düzen'in en son sürümüne sahip olmadığınız sürece dosya çalışmayacaktır (.0.2.0).

https://cl.ly/2v2I373P2E1f

Bazı son düşünceler

Umarım bu bazı insanlar için faydalı olmuştur. Autolayout ve Stacks olanaklarını daha derinden keşfedeceğimi biliyorum. Bu sürümden itibaren, matematik yuvarlama ile birkaç küçük tuhaflıklar fark ettim, ancak umarım bunlar zamanla sıralanır. Devlere önerdiğim bazı talepler arasında bunların değerli olabileceğini düşünüyorum.

  • Yığın mantığını etkilemeden yığılmış bir gruba (sütunların üst satırı) arka plan ekleme yeteneği. HTML / CSS'de, bu basitçe veya “div” seviyesinde yapılabilir, ancak Sketch bunu şimdi yapmanın bir yoluna izin vermiyor.
    Bunu yapmak için şu anda bir arka plan katmanını yığılmış bir grupla gruplama ve bg'yi üst / sol /% 100 genişlik ve yüksekliğe sabitleme içeren bir arka plan var ve arka plan içeriği barındırmak için büyürken, içerik kaldırıldı. Küçülenmenin zaten takımın Yapılacaklar listesinde olduğuna inanıyorum.
  • Çalışma yüzeyinde kesme noktalarının tanıtılması ve çalışma yüzeyini temel alan sembol takılması (çalışma yüzeyi <400px olduğunda veya daha iyisi bir konteyner sorgusu yaklaşımı kullanarak henüz bir hamburger simgesiyle 4 öğeli bir gezinti takas etme).
  • Bahsedilen kesme noktalarında, yataydan dikey yığınlanmış gruplar arasında geçiş yapabilme yeteneği, böylece sütunlar yeterli alan olmadığında üst üste istiflenir. Ve belirtilmişse, sütunların sarılması için.
  • Sütun başına yüzde genişlik belirtme yeteneği.
    (Güncelleme - Bu fikrin bir sürümü, Eklentilerde Ağırlıklar özelliğini kullanarak henüz uygulanmıştır)
  • Bunun mutlaka Anima ekibine düşmemesine rağmen, Sketch ayrıca değişkenler için destek sunmalı, özellikle şimdi aralık, en az ve en çok yükseklik gibi özellikler ve birkaç katman boyunca tutarlı tutulması gereken diğer değerler gibi. Bu değişkenler ayrıca renkleri eşleştirmek ve Sass devir işlemine yardımcı olmak için de kullanılabilir.

Elimdeki tek şey bu! Sadece bir kez daha Anima ekibine bir not vermek istedim. İnanılmaz derecede yetenekli, duyarlı ve davetliler, bu yüzden lütfen sıkı çalışmalarını desteklediğinizden emin olun! Facebook sayfalarına katılın.

Herhangi bir sorunuz veya güzel yorumlarınız varsa, lütfen aşağıya göndermekten veya Twitter'dan ulaşmaktan çekinmeyin.