Grid Flex Responsif dalam Lakaran menggunakan AutoLayout dan Kumpulan Stack

Memperbaiki sistem reka bentuk untuk struktur, modulariti, dan skala

Alat seperti FlexBox dalam CSS, UIStackView dalam IOS, dan FlexboxLayout dalam Android telah lama memberikan pemaju aliran kerja yang diperlukan untuk mengendalikan banyak pandangan penyesuaian dan responsif yang wujud hari ini.

Untuk pereka bagaimanapun, proses reka bentuk susun atur di beberapa alat reka bentuk kegemaran kami selalu lebih manual, lebih statik, lebih membosankan, dan umumnya kurang tepat secara matematik. Tetapi terima kasih kepada karya luar biasa oleh orang-orang di Anima, kami tidak lama lagi akan mempunyai struktur dan fleksibiliti yang kami perlukan untuk menjembatani jurang yang lebih baik.

Dengan ciri-ciri Stack yang baru yang dibundel ke dalam plugin Auto-Layout terkini, kami kini mempunyai aliran kerja yang mengakomodasi output UI dengan lebih baik dan membolehkan kami mencapai lebih konsisten dan boleh dikendalikan di seluruh sistem reka bentuk kami. (Penafian - Konsep ini masih pada tahap awal. Tidak semua jenis susun atur akan mendapat manfaat daripada sistem ini supaya campuran dan sepadan dengan yang anda lihat patut).

Demo itu

Dalam video di bawah ini, saya telah menyusun susun atur grid flex-konsep konsep untuk mempamerkan kekasaran Stack. Ia adalah papan iklan yang mencerminkan struktur laman web asas.

Semasa masih dalam peringkat penerokaan awal, fungsi berikut dibakar ke dalam templat:

  • Desktop untuk mudah alih dalam beberapa klik.
  • Artboards resizable dan penjajaran grid / pengedaran tidak pecah
  • Grid berstruktur oleh:
  • Badan
     - Kepala
     - Main
     - bahagian
     - - - kumpulan baris (mempunyai lapisan bersaiz kotak saudaranya)
     - - - - baris
     - - - - - lajur
     - - - - - - modul
     - - - - - - - komponen (simbol bersarang dengan logik dalaman)
     - Footer
  • Gunakan simbol bersarang, yang ditakrifkan oleh gabungan sifat-sifat Resize Sketch, Autolayout pinning, dan kumpulan tumpukan untuk membuat sistem modular komponen yang boleh ditukar.
  • Layout menyesuaikan kepada lebar artboard (kandungan mempunyai lebar maksimal 1200px, dan mudah alih mempunyai selokan terbina dalam).
  • Pelbagai penyebaran lajur dan mudah runtuh / mengubah suai selokan.
  • dan
    tumbuh dan mengecil daripada
    .
  • Ketinggian berubah ke
    tolak
    bawah dalam artboard, sambil mengekalkan margin dan padding utuh seperti laman web.
  • Ketinggian boleh diselaraskan untuk menjejaskan ketinggian lajur kanak-kanak
  • Penjajaran lajur (atas, tengah, bawah, regangan) boleh ditakrifkan pada peringkat baris.
  • Menambah lajur baru (atau memadam satu) dari baris secara automatik menyesuaikan lebar lajur saudara untuk disesuaikan dengan sewajarnya.
  • Menambah modul anak baru dalam lajur akan menjadikan lajur itu berkembang secara menegak (modul mengandungi sebarang jenis kandungan, seperti imej, teks, senarai, jadual, kumpulan dan simbol)
  • Penjajaran modul (kiri, tengah, kanan, regangan) boleh ditakrifkan di peringkat lajur.
  • komponen swap simbol untuk menggantikan kandungan atau pin lapisan baru kepada komponen sedia ada.
  • Artboard desktop telah disediakan untuk menggunakan grid asas 8pt.

Fail Lakaran

Ini dia. Jangan ragu untuk memperbaikinya dengan apa-apa cara dan beritahu saya.
* PENTING * - Fail ini TIDAK berfungsi kecuali anda mempunyai keluaran terbaru Layout Auto dengan Support Stacks (.0.2.0 pada penulisan ini).

https://cl.ly/2v2I373P2E1f

Beberapa pemikiran terakhir

Saya harap ini berguna kepada sesetengah orang. Saya tahu saya akan meneroka kemungkinan Autolayout dan Stack yang lebih mendalam. Sehingga versi ini, saya dapati beberapa kebiasaan kecil dengan pembulatan matematik, tetapi diharapkan mereka akan diselesaikan tepat pada waktunya. Di antara beberapa permintaan yang saya cadangkan kepada para dev, saya fikir ini mungkin bernilai.

  • Keupayaan untuk menambah latar belakang kepada kumpulan yang disusun (baris ibu bapa lajur) tanpa menjejaskan logik tindanan. Dalam HTML / CSS, ini hanya akan dilakukan di peringkat atau "div", tetapi Sketch tidak membenarkan cara untuk melakukannya seperti sekarang.
    Terdapat pendekatan untuk melakukan ini sekarang yang melibatkan pengelompokkan lapisan latar belakang dengan kumpulan yang disusun dan menyematkan bg ke atas / lebar / 100% lebar & ketinggian, dan sementara latar belakang tumbuh untuk menampung kandungan, ia tidak mengecil apabila kandungan dikeluarkan. Saya percaya penyusutan sudah ada dalam senarai TO-DO pasukan.
  • Pengenalan titik putus dalam artboard, dan simbol bertukar berdasarkan artboard (menukar nav 4-item dengan ikon hamburger apabila artboard <400px, atau lebih baik lagi, menggunakan pendekatan pertanyaan kontena.
  • Dengan kata laluan putus, keupayaan untuk bertukar antara kumpulan mendatar ke menegak, sehingga tiang-tiang bertumpuk di atas satu sama lain apabila terdapat ruang yang tidak mencukupi. Dan bagi lajur untuk dibungkus jika ditentukan.
  • Keupayaan untuk menentukan lebar peranda setiap lajur.
    (Kemas kini - Versi idea ini baru dilaksanakan di plugin dengan menggunakan ciri Berat)
  • Walaupun ini tidak semestinya jatuh pada pasukan Anima, Sketch juga harus memperkenalkan sokongan untuk pembolehubah, terutama sekarang dengan sifat seperti spasi, min dan maksima, dan nilai-nilai lain yang harus disimpan konsisten di beberapa lapisan. Pemboleh ubah ini boleh digunakan untuk memetakan warna dengan baik, dan membantu dalam proses handoff Sass.

Nah, itulah yang saya dapat! Hanya mahu memberi komen kepada pasukan Anima sekali lagi. Mereka sangat berbakat, responsif, dan mengundang jadi sila pastikan untuk menyokong kerja keras mereka! Sertai halaman Facebook mereka.

Jika anda mempunyai sebarang soalan atau komen (bagus!), Sila bebas untuk menyiarkan di bawah atau menjangkau Twitter.