Responsive Flex Grid trong Phác thảo bằng AutoLayout và Stack Groups

Cải thiện hệ thống thiết kế cho cấu trúc, mô đun và quy mô

Các công cụ như FlexBox trong CSS, UIStackView trong iOS và FlexboxLayout trong Android từ lâu đã cung cấp cho các nhà phát triển các quy trình công việc cần thiết để xử lý vô số các chế độ xem thích ứng và đáp ứng tồn tại ngày nay.

Tuy nhiên, đối với các nhà thiết kế, quy trình thiết kế bố trí trong một số công cụ thiết kế yêu thích của chúng tôi luôn luôn thủ công hơn, tĩnh hơn, tẻ nhạt hơn và thường ít chính xác hơn về mặt toán học. Nhưng nhờ vào công việc tuyệt vời của những người ở Anima, chúng tôi có thể sớm có cấu trúc và tính linh hoạt mà chúng tôi cần để thu hẹp khoảng cách đó.

Với tính năng Stacks mới được tích hợp trong plugin Auto-Layout mới nhất, giờ đây chúng tôi có một quy trình làm việc phù hợp với đầu ra UI tốt hơn và cho phép chúng tôi đạt được tính nhất quán và khả năng bảo trì cao hơn trên các hệ thống thiết kế của chúng tôi. (Tuyên bố miễn trừ trách nhiệm - Khái niệm này vẫn còn ở giai đoạn đầu. Không phải mọi kiểu bố trí sẽ được hưởng lợi từ hệ thống này vì vậy hãy trộn và kết hợp khi bạn thấy phù hợp).

Bản demo

Trong video dưới đây, tôi đã tập hợp một bố cục lưới flex bằng chứng để thể hiện sự tuyệt vời của Stacks. Nó có một bản vẽ nghệ thuật phản chiếu cấu trúc của một trang web cơ bản.

Mặc dù vẫn ở giai đoạn đầu khám phá, chức năng sau đây được đưa vào mẫu:

  • Máy tính để bàn để di động trong một vài cú nhấp chuột.
  • Artboards có thể thay đổi kích thước và liên kết / phân phối lưới không bị phá vỡ
  • Lưới có cấu trúc bởi:
  • Thân hình
     - Tiêu đề
     - Chủ yếu
     - Phần mềm
     - - - các nhóm hàng (có lớp kích cỡ hộp anh chị em)
     - - - - hàng
     - - - - - cột
     - - - - - - mô-đun
     - - - - - - - các thành phần (ký hiệu lồng nhau w / logic bên trong)
     - Chân trang
  • Sử dụng các biểu tượng lồng nhau, được xác định bởi sự kết hợp của các thuộc tính Thay đổi kích thước phác thảo, ghim Autolayout và các nhóm ngăn xếp để tạo ra một hệ thống mô đun gồm các thành phần có thể tráo đổi.
  • Bố cục điều chỉnh theo chiều rộng của bản vẽ (nội dung có chiều rộng tối đa 1200px và thiết bị di động có máng xối tích hợp).
  • Sự phân bố cột đa dạng và dễ dàng thu gọn / sửa đổi máng xối.
  • phát triển và thu nhỏ độc lập với .
  • Thay đổi chiều cao thành
    đẩy
    xuống trong bản vẽ, trong khi vẫn giữ nguyên lề và phần đệm như trang web.
  • Chiều cao của có thể được điều chỉnh để ảnh hưởng đến chiều cao của các cột con
  • Sự liên kết của các cột (trên cùng, giữa, dưới, kéo dài) có thể được xác định ở cấp hàng.
  • Thêm một cột mới (hoặc xóa một cột) khỏi hàng sẽ tự động điều chỉnh độ rộng của các cột anh chị em cho phù hợp.
  • Thêm một mô đun con mới trong cột sẽ làm cho cột đó phát triển theo chiều dọc (các mô đun chứa bất kỳ số loại nội dung nào, chẳng hạn như hình ảnh, văn bản, danh sách, bảng, nhóm và ký hiệu)
  • Sự liên kết của các mô-đun (trái, giữa, phải, kéo dài) có thể được xác định ở cấp cột.
  • các thành phần hoán đổi biểu tượng để thay thế nội dung hoặc ghim các lớp mới vào thành phần hiện có.
  • Artboard máy tính để bàn đã được thiết lập để sử dụng lưới đường cơ sở 8pt.

Tệp phác thảo

Nó đây rồi Hãy cải thiện nó bằng mọi cách và cho tôi biết.
* QUAN TRỌNG * - Tệp sẽ KHÔNG hoạt động trừ khi bạn có bản phát hành Bố cục tự động mới nhất với Hỗ trợ ngăn xếp (.0.2.0 khi viết bài này).

https://cl.ly/2v2I373P2E1f

Một số suy nghĩ cuối cùng

Tôi hy vọng nó hữu ích cho một số người. Tôi biết tôi sẽ khám phá các khả năng của Autolayout và Stacks sâu hơn. Kể từ phiên bản này, tôi đã nhận thấy một vài quirks nhỏ với phép làm tròn toán học, nhưng hy vọng những điều đó sẽ được sắp xếp kịp thời. Trong số một số yêu cầu tôi gợi ý cho các nhà phát triển, tôi nghĩ chúng có thể có giá trị.

  • Khả năng thêm nền vào nhóm xếp chồng (hàng cha của các cột) mà không ảnh hưởng đến logic ngăn xếp. Trong HTML / CSS, điều này chỉ đơn giản sẽ được thực hiện ở cấp độ hoặc của div div, nhưng Phác thảo không cho phép một cách để làm điều đó như bây giờ.
    Có một cách tiếp cận để thực hiện điều này ngay bây giờ liên quan đến việc nhóm một lớp nền với một nhóm xếp chồng lên nhau và ghim bg lên trên / trái / 100% chiều rộng và chiều cao, và trong khi nền phát triển để chứa nội dung, nó không co lại khi nội dung bị xóa. Tôi tin rằng việc thu hẹp đã có trong danh sách nhóm TO-DO của nhóm.
  • Việc giới thiệu các điểm dừng trong artboard và hoán đổi biểu tượng dựa trên artboard (hoán đổi một điều hướng 4 mục bằng biểu tượng hamburger khi artboard <400px hoặc tốt hơn là sử dụng phương pháp truy vấn container.
  • Với các điểm dừng đã nói, khả năng chuyển đổi giữa các nhóm xếp chồng ngang sang dọc, sao cho các cột xếp chồng lên nhau khi không đủ không gian. Và cho các cột để bọc nếu được chỉ định.
  • Khả năng chỉ định chiều rộng phần trăm trên mỗi cột.
    (Cập nhật - Một phiên bản của ý tưởng này vừa được triển khai trong plugin bằng cách sử dụng tính năng Trọng lượng)
  • Mặc dù điều này không nhất thiết phải thuộc về nhóm Anima, nhưng Phác thảo cũng nên giới thiệu hỗ trợ cho các biến, đặc biệt là bây giờ với các thuộc tính như khoảng cách, độ cao tối thiểu và chiều cao tối đa và các giá trị khác phải được giữ nhất quán trên một số lớp. Các biến này có thể được tiếp tục sử dụng để ánh xạ tới màu sắc và hỗ trợ quá trình chuyển giao Sass.

Chà, tất cả những gì tôi có! Chỉ muốn đưa ra một tiếng hét cho đội tại Anima một lần nữa. Họ rất tài năng, nhanh nhạy và mời gọi, vì vậy hãy chắc chắn hỗ trợ công việc khó khăn của họ! Tham gia trang Facebook của họ.

Nếu bạn có bất kỳ câu hỏi hoặc ý kiến ​​(tốt đẹp!), Xin vui lòng gửi bên dưới hoặc tiếp cận trên Twitter.