Flex Grid แบบตอบสนองใน Sketch โดยใช้ AutoLayout และ Stack Groups

การปรับปรุงระบบการออกแบบสำหรับโครงสร้างโมดูลาร์และสเกล

เครื่องมืออย่าง FlexBox ใน CSS, UIStackView ใน iOS และ FlexboxLayout ใน Android ได้ให้เวิร์กโฟลว์ที่จำเป็นสำหรับนักพัฒนาในการจัดการกับมุมมองการปรับตัวและการตอบสนองที่มีอยู่ในปัจจุบัน

อย่างไรก็ตามสำหรับนักออกแบบกระบวนการออกแบบเลย์เอาต์ในเครื่องมือออกแบบที่ชื่นชอบบางส่วนของเรานั้นมักจะเป็นแบบแมนนวลคงที่น่าเบื่อกว่าและแม่นยำกว่าทางคณิตศาสตร์ แต่ด้วยการทำงานที่น่าทึ่งของ Anima เราอาจมีโครงสร้างและความยืดหยุ่นที่เราต้องการเพื่อลดช่องว่างนั้น

ด้วยคุณสมบัติ Stacks ใหม่ที่รวมอยู่ในปลั๊กอิน Auto-Layout ล่าสุดเรามีเวิร์กโฟลว์ที่รองรับ UI output ที่ดีขึ้นและช่วยให้เราบรรลุความสอดคล้องและการบำรุงรักษาที่มากขึ้นในระบบการออกแบบของเรา (ข้อจำกัดความรับผิดชอบ - แนวคิดนี้ยังอยู่ในช่วงเริ่มต้นเลย์เอาต์ทุกประเภทจะไม่ได้รับประโยชน์จากระบบนี้ดังนั้นควรผสมและจับคู่ตามที่เห็นสมควร)

ตัวอย่าง

ในวิดีโอด้านล่างนี้ฉันได้รวบรวมเค้าโครงตารางแบบเฟล็กซ์ที่พิสูจน์ได้ของแนวคิดเพื่อแสดงความยอดเยี่ยมของสแต็ก เป็นอาร์ตบอร์ดที่สะท้อนโครงสร้างของหน้าเว็บพื้นฐาน

ในขณะที่ยังอยู่ในขั้นเริ่มต้นของการสำรวจฟังก์ชันการทำงานต่อไปนี้จะถูกนำเข้าสู่เทมเพลต:

  • เดสก์ท็อปไปยังมือถือได้ในไม่กี่คลิก
  • บอร์ดสามารถปรับขนาดได้และการจัดตำแหน่ง / การกระจายตารางไม่แตกหัก
  • ตารางโครงสร้างโดย:
  • ร่างกาย
     - ส่วนหัว
     - หลัก
     - ส่วน
     - - - กลุ่มแถว (มีเลเยอร์ขนาดกล่องพี่น้อง)
     - - - - แถว
     - - - - - คอลัมน์
     - - - - - - - modules
     - - - - - - - ส่วนประกอบ (สัญลักษณ์ซ้อนกันที่มีตรรกะภายใน)
     - ส่วนท้าย
  • ใช้สัญลักษณ์ที่ซ้อนกันซึ่งกำหนดโดยการรวมกันของคุณสมบัติการปรับขนาดร่างการปักหมุดอัตโนมัติและกลุ่มสแต็กเพื่อสร้างระบบแบบแยกส่วนของส่วนประกอบที่ถอดเปลี่ยนได้
  • เลย์เอาต์ปรับตามความกว้างของบอร์ด (เนื้อหามีความกว้างสูงสุด 1200px และอุปกรณ์เคลื่อนที่มีรางในตัว)
  • ความหลากหลายของการกระจายคอลัมน์และการยุบ / การแก้ไขของรางง่าย
  • และ
    ขยายและย่อขนาดเป็นอิสระจาก <หลัก>
  • ความสูงเปลี่ยนเป็น
    ดัน
    ลงใน artboard ในขณะที่รักษาระยะขอบและช่องว่างภายในเหมือนหน้าเว็บ
  • สามารถปรับความสูงของ <แถว> เพื่อส่งผลต่อความสูงของคอลัมน์ลูกได้
  • การจัดตำแหน่งของคอลัมน์ (บน, กลาง, ล่าง, ยืด) สามารถกำหนดได้ที่ระดับแถว
  • การเพิ่มคอลัมน์ใหม่ (หรือลบหนึ่งคอลัมน์) จากแถวนั้นจะปรับความกว้างของคอลัมน์พี่น้องให้เหมาะสมโดยอัตโนมัติ
  • การเพิ่มโมดูลลูกใหม่ภายในคอลัมน์จะทำให้คอลัมน์นั้นเติบโตในแนวตั้ง (โมดูลมีจำนวนเนื้อหาประเภทใดก็ได้เช่นรูปภาพข้อความรายการตารางกลุ่มและสัญลักษณ์)
  • การจัดตำแหน่งของโมดูล (ซ้าย, กลาง, ขวา, ยืด) สามารถกำหนดได้ที่ระดับคอลัมน์
  • คอมโพเนนต์สลับสัญลักษณ์เพื่อแทนที่เนื้อหาหรือตรึงเลเยอร์ใหม่เป็นองค์ประกอบที่มีอยู่
  • บอร์ดเดสก์ท็อปได้รับการตั้งค่าให้ใช้กริดพื้นฐาน 8 พอยต์

ไฟล์ร่าง

นี่มันคือ อย่าลังเลที่จะปรับปรุงมันในทางใดทางหนึ่งและแจ้งให้เราทราบ
* สำคัญ * - ไฟล์จะไม่ทำงานจนกว่าคุณจะมี Auto Layout รุ่นล่าสุดพร้อม Stacks Support (.0.2.0 ตามการเขียนนี้)

https://cl.ly/2v2I373P2E1f

บางความคิดสุดท้าย

ฉันหวังว่ามันจะเป็นประโยชน์กับคนบางคน ฉันรู้ว่าฉันจะสำรวจความเป็นไปได้ของ Autolayout และ Stacks ให้ลึกซึ้งยิ่งขึ้น ในรุ่นนี้ฉันสังเกตเห็นนิสัยแปลก ๆ เล็กน้อยที่มีการปัดเศษทางคณิตศาสตร์ แต่หวังว่าสิ่งเหล่านั้นจะหายไปตามกาลเวลา ในบรรดาคำขอบางอย่างที่ฉันแนะนำให้ผู้พัฒนาฉันคิดว่าสิ่งเหล่านี้อาจมีค่า

  • ความสามารถในการเพิ่มพื้นหลังให้กับกลุ่มแบบสแต็ก (แถวพาเรนต์ของคอลัมน์) โดยไม่กระทบกับสแต็กลอจิก ใน HTML / CSS สิ่งนี้สามารถทำได้ในระดับ หรือ "div" แต่ Sketch ไม่อนุญาตให้ทำเช่นนั้นในตอนนี้
    มีวิธีการทำเช่นนี้ในขณะนี้ที่เกี่ยวข้องกับการจัดกลุ่มเลเยอร์พื้นหลังกับกลุ่มสแต็คและตรึงความกว้างและความสูง bg ไปด้านบน / ซ้าย / 100% และในขณะที่พื้นหลังเติบโตเพื่อรองรับเนื้อหามันไม่หดตัวเมื่อ เนื้อหาถูกลบ ฉันเชื่อว่าการลดขนาดนั้นอยู่ในรายการที่ต้องทำของทีมอยู่แล้ว
  • การแนะนำเบรกพอยต์ใน artboard และการสลับสัญลักษณ์ขึ้นอยู่กับ artboard (การสลับ nav 4 รายการด้วยไอคอนแฮมเบอร์เกอร์เมื่อ artboard <400px หรือดีกว่านั้นใช้วิธีการสืบค้นคอนเทนเนอร์
  • ด้วยจุดพักดังกล่าวความสามารถในการสลับไปมาระหว่างกลุ่มสแต็กแนวนอนและแนวตั้งเช่นว่าคอลัมน์สแต็คที่ด้านบนของกันและกันเมื่อมีพื้นที่ไม่เพียงพอ และสำหรับคอลัมน์ที่ต้องการตัดถ้าระบุ
  • ความสามารถในการระบุเปอร์เซ็นต์ความกว้างต่อคอลัมน์
    (อัปเดต - เวอร์ชันของความคิดนี้เพิ่งนำไปใช้ในปลั๊กอินโดยใช้คุณลักษณะน้ำหนัก)
  • แม้ว่าสิ่งนี้จะไม่จำเป็นต้องตกอยู่ในทีม Anima แต่ Sketch ควรแนะนำการสนับสนุนตัวแปรโดยเฉพาะอย่างยิ่งตอนนี้ด้วยคุณสมบัติเช่นการเว้นวรรค, ความสูงขั้นต่ำและสูงสุดและค่าอื่น ๆ ที่ควรมีความสม่ำเสมอในหลาย ๆ ชั้น ตัวแปรเหล่านี้สามารถใช้เพิ่มเติมเพื่อแมปสีได้เช่นกันและช่วยในกระบวนการ Sass แฮนด์ออฟ

นั่นคือทั้งหมดที่ฉันได้รับ! แค่อยากให้เสียงโห่ร้องกับทีมที่ Anima อีกครั้ง พวกเขามีความสามารถตอบสนองและเชิญชวนอย่างไม่น่าเชื่อดังนั้นโปรดสนับสนุนการทำงานอย่างหนักของพวกเขาด้วย! เข้าร่วมหน้า Facebook ของพวกเขา

หากคุณมีคำถามหรือความคิดเห็น (ดี!) โปรดโพสต์ด้านล่างหรือติดต่อทาง Twitter