AutoLayout va Stack guruhlaridan foydalangan holda eskizdagi Flex Grid

Tuzilishi, modulliligi va miqyosi uchun dizayn tizimlarini takomillashtirish

CSS-dagi FlexBox, iOS-dagi UIStackView va Android-dagi FlexboxLayout kabi vositalar bugungi kunda mavjud bo'lgan ko'plab moslashuvchan va sezgir qarashlarni boshqarish uchun ishlab chiquvchilarga zaruriy ish oqimlarini berib keladi.

Biroq, dizaynerlar uchun bizning ba'zi sevimli dizayn vositalarimizni loyihalash jarayoni har doim ko'proq qo'lda, statik, zerikarli va umuman kamroq matematikaga ega bo'lgan. Ammo Animadagi odamlar tomonidan qilingan ajoyib ish tufayli, biz tezda bu bo'shliqni bartaraf etishimiz kerak bo'lgan tuzilma va moslashuvchanlikka ega bo'lishimiz mumkin.

Eng so'nggi Auto-Layout plaginiga biriktirilgan yangi Stacks xususiyati bilan biz hozirda UI chiqishini yaxshiroq ta'minlaydigan va dizayn tizimlarimizda yanada mustahkamlik va barqarorlikka erishishga imkon beradigan ish jarayoni mavjud. (Voz kechish - Ushbu tushuncha hali ham erta bosqichda. Ushbu tizim har qanday tartib turiga foyda keltiravermaydi, shuning uchun siz o'zingiz muvofiq bo'lgan tarzda aralashtiring va moslang).

Demo

Quyidagi videoda men Steklarning ajoyibligini namoyish qilish uchun moslashtirilgan kontseptsiyaning moslashuvchan panjarasini joylashtirdim. Bu asosiy veb-sahifaning tuzilishini aks ettiruvchi artboard.

Shaffoflikni tekshirishning dastlabki bosqichlarida shablonga quyidagi funktsiyalar tayyorlanadi:

  • Bir necha marta bosish orqali ish stoliga mobil telefon.
  • Artbordlar o'lchamini o'zgartirishi mumkin va panjara hizalanishi / tarqalishi buzilmaydi
  • Panjara tuzilgan:
  • Tanasi
     - Sarlavha
     - Asosiy
     - bo'limlar
     - - - satrlar guruhlari (qardosh o'lchamlari qatlamiga ega)
     - - - - qatorlar
     - - - - - ustunlar
     - - - - - - modullar
     - - - - - - - komponentlar (ichki / mantiqiy ichki belgilar)
     - Tagligi
  • O'zgartirilgan tarkibiy qismlarning modulli tizimini yaratish uchun Sketch Resize xususiyatlari, Autolayout pin va stack guruhlarining kombinatsiyasi bilan belgilangan ichki belgilardan foydalaning.
  • Joylashuv paneli kengliklariga moslashtiriladi (tarkibiy qism eng kengligi 1200px, uyali telefon ichiga o'rnatilgan truba).
  • Ustunlarning turli xil turlari va shag'allarni oson siqish / o'zgartirish.
  • va
    dan mustaqil ravishda o'sadi va qisqaradi.
  • -dagi balandlik o'zgarishi
    -ni artboardda pastga tushiring, bu holda veb-sahifa kabi hoshiyalar va plaginlarni saqlab qolish kerak.
  • Bola ustunlarining balandligiga ta'sir qilish uchun balandligi sozlanishi
  • Ustunlarning hizalanishi (yuqori, o'rta, pastki, cho'zish) satr darajasida aniqlanishi mumkin.
  • Qatordan yangi ustun qo'shish (yoki uni o'chirish), birodarlar ustunlarining kengligini avtomatik ravishda moslashtiradi.
  • Ustunga yangi bolalar modulini qo'shish bu ustunni vertikal ravishda o'sishiga olib keladi (modullar rasmlar, matnlar, ro'yxatlar, jadvallar, guruhlar va belgilar kabi har qanday tarkibiy qismlarni o'z ichiga oladi)
  • Modullarning hizalanishi (chap, markaz, o'ng, cho'zish) ustun darajasida aniqlanishi mumkin.
  • tarkibni almashtirish yoki mavjud qismga yangi qatlamlarni qo'shish uchun ramzlarni almashtirish komponentlari.
  • Ish stolining artboardi 8pt bazal panjara foydalanish uchun o'rnatildi.

Sketch fayli

Mana. Uni biron-bir tarzda yaxshilash uchun o'zingizni bepul his eting va menga xabar bering.
* MUHIM * - Stacks qo'llab-quvvatlashi bilan (.0.2.0 yozuviga binoan) Auto Layout-ning so'nggi versiyasini olmaguningizcha fayl ishlamaydi.

https://cl.ly/2v2I373P2E1f

Ba'zi yakuniy fikrlar

Bu ba'zi odamlar uchun foydali bo'lgan deb umid qilaman. Bilaman, men Avtoyo'l va Steklarning imkoniyatlarini chuqurroq o'rganaman. Ushbu versiyadan kelib chiqqan holda, matematik yaxlitlash bilan bog'liq bo'lgan bir nechta kichik savollarni ko'rdim, ammo umid qilamanki, ular vaqt o'tib topiladi. Men dasturchilarga taklif qilgan ba'zi so'rovlar orasida, ular foydali bo'lishi mumkin deb o'ylayman.

  • Yig'ilgan mantiqqa ta'sir qilmasdan, to'plangan guruhga fonni qo'shish qobiliyati (ustunlarning ustun qatori). HTML / CSS-da buni oddiygina yoki "div" darajasida bajarish mumkin edi, ammo Sketch hanuzgacha buni qilishga imkon bermaydi.
    Hozirda buni amalga oshirishga yondashish mavjud, bu fon qatlamini to'plangan guruh bilan guruhlash va bg-ni yuqori / chap / 100% kenglik va balandlikka bo'yashni o'z ichiga oladi va fon tarkibni joylashtirish uchun o'sib borar ekan, u kichraymaydi. tarkib o'chirildi. Ishonamanki, qisqarish allaqachon jamoaning TO-DO ro'yxatiga kiritilgan.
  • San'at taxtasida tanaffus nuqtalarini kiritish va artboard asosida ramzlarni almashtirish (4 ta elementli navni gamburger ikonachasi bilan artboard <400px, yoki undan ham yaxshisi, konteyner so'rovlari usulidan foydalangan holda almashtirish).
  • Gap shundaki, bo'sh joy bo'lmaganda ustunlar bir-birining ustiga yopishib turishi uchun gorizontaldan vertikal stacked guruhlarni almashtirish imkoniyati mavjud. Va agar ko'rsatilgan bo'lsa, ustunlarni o'rash uchun.
  • Har bir ustun uchun foiz kengligini belgilash imkoniyati.
    (Yangilash - Ushbu g'oyaning versiyasi faqat Weights xususiyati yordamida plaginda amalga oshirildi)
  • Garchi bu Anima guruhiga tushmasa ham, Sketch o'zgaruvchilarni qo'llab-quvvatlashni joriy qilishi kerak, ayniqsa hozirda bo'shliqlar, min va maksimal balandliklar kabi xususiyatlar va boshqa qiymatlar bir necha qatlamlarda izchil saqlanib turishi kerak. Ushbu o'zgaruvchilardan keyinchalik ranglarni xaritalashda va Sassni topshirish jarayonida yordam berish uchun foydalanish mumkin.

Xo'sh, menda bor narsa! Shunchaki Anima jamoasiga yana bir bor baqirishni xohladim. Ular nihoyatda qobiliyatli, sezgir va taklif qilishadi, shuning uchun ularning mehnatini qo'llab-quvvatlashga ishonch hosil qiling! Ularning Facebook-dagi sahifasiga qo'shiling.

Agar biron bir savolingiz yoki (yoqimli!) Sharhlaringiz bo'lsa, iltimos, quyida xabar qoldiring yoki Twitter orqali bog'laning.