استجابة الشبكة المرنة في رسم باستخدام مجموعات AutoLayout و Stack

تحسين نظم التصميم للهيكل ، نمطية ، وحجم

أدوات مثل FlexBox في CSS و UIStackView في iOS و FlexboxLayout في Android قد أعطت للمطورين منذ فترة طويلة سير العمل اللازم للتعامل مع العديد من طرق العرض التكيفية والاستجابة الموجودة اليوم.

ومع ذلك ، بالنسبة للمصممين ، فإن عملية تصميم التخطيط في بعض أدوات التصميم المفضلة لدينا كانت دائمًا أكثر دليلًا ، وأكثر ثباتًا ، وأكثر مملة ، وأقل دقة رياضية عمومًا. ولكن بفضل العمل المذهل الذي قام به الناس في أنيما ، ربما نتمتع قريباً بالهيكل والمرونة التي نحتاجها لسد تلك الفجوة بشكل أفضل.

من خلال ميزة Stacks الجديدة المضمنة في أحدث مكون إضافي للتخطيط التلقائي ، أصبح لدينا الآن سير عمل يستوعب إخراج واجهة المستخدم بشكل أفضل ويسمح لنا بتحقيق قدر أكبر من الاتساق وسهولة الصيانة عبر أنظمة التصميم الخاصة بنا. (إخلاء المسئولية - هذا المفهوم لا يزال في مرحلة مبكرة. لن يستفيد كل نوع من التخطيط من هذا النظام ، لذلك قم بالمزج والتطابق كما تراه مناسبًا).

التجريبي

في الفيديو أدناه ، قمت بتجميع تخطيط شبكة فليكس مقاوم للتجربة لإظهار الذهول في Stacks. إنها لوحة فنية تعكس هيكل صفحة الويب الأساسية.

بينما لا تزال في المراحل الاستكشافية المبكرة ، يتم تحطيم الوظيفة التالية في القالب:

  • سطح المكتب إلى المحمول في عدد قليل من النقرات.
  • ألواح الرسم قابلة للتحجيم ولا تنقطع محاذاة / توزيع الشبكة
  • الشبكة منظم بواسطة:
  • الجسم
     - رأس
     - الأساسية
     - الأقسام
     - - - مجموعات الصفوف (لديها طبقة التحجيم مربع الأخوة)
     - - - - الصفوف
     - - - - - الأعمدة
     - - - - - - وحدات
     - - - - - - - المكونات (الرموز المتداخلة مع المنطق الداخلي)
     - تذييل
  • استخدم الرموز المتداخلة ، المعرّفة من قِبل مجموعة من خصائص تغيير حجم Sketch ، وتثبيت Autolayout ، ومجموعات المكدس لإنشاء نظام معياري من المكونات القابلة للتبديل.
  • يتم ضبط النسق على عرض لوح الرسم (يبلغ أقصى عرض للمحتوى 1200 بكسل ، أما الهاتف فيحتوي على مزاريب مدمجة).
  • مجموعة متنوعة من توزيعات العمود وسهولة الانهيار / تعديل المزاريب.
  • ينمو
    و
    ويتقلصان بشكل مستقل عن
    .
  • يتغير الارتفاع إلى
    دفع
    لأسفل في لوح الرسم ، مع الحفاظ على الهوامش والحشوات سليمة كما تفعل صفحة الويب.
  • يمكن ضبط ارتفاع <الصفوف> للتأثير على ارتفاع الأعمدة الفرعية
  • يمكن تعريف محاذاة الأعمدة (أعلى ، وسط ، أسفل ، امتداد) على مستوى الصف.
  • تؤدي إضافة عمود جديد (أو حذف عمود) من الصف تلقائيًا إلى ضبط عرض أعمدة الأخوة لتناسب ذلك وفقًا لذلك.
  • ستؤدي إضافة وحدة تابعة جديدة داخل العمود إلى زيادة نمو هذا العمود رأسيًا (تحتوي الوحدات على أي عدد من أنواع المحتوى ، مثل الصور والنصوص والقوائم والجداول والمجموعات والرموز)
  • يمكن تحديد محاذاة الوحدات (اليسار ، المركز ، اليمين ، التمدد) على مستوى العمود.
  • مكونات تبديل الرموز لاستبدال المحتوى أو تثبيت طبقات جديدة على المكون الحالي.
  • تم إعداد لوح سطح المكتب لاستخدام شبكة أساسية 8pt.

ملف الرسم

ها هو. لا تتردد في تحسينه بأي طريقة واسمحوا لي أن أعرف.
* هام * - لن يعمل الملف إلا إذا كان لديك أحدث إصدار من Auto Layout مع دعم Stacks (.0.2.0 حتى كتابة هذه السطور).

https://cl.ly/2v2I373P2E1f

بعض الأفكار النهائية

آمل أن يكون ذلك مفيدًا لبعض الأشخاص. أعلم أنني سوف أستكشف إمكانيات Autolayout و Stacks بشكل أعمق. اعتبارا من هذا الإصدار ، لاحظت بعض المراوغات الصغيرة مع تقريب الرياضيات ، ولكن نأمل أن يتم حلها في الوقت المناسب. من بين بعض الطلبات التي اقترحتها على devs ، أعتقد أن هذه قد تكون ذات قيمة.

  • القدرة على إضافة خلفية إلى مجموعة مكدسة (الصف الأصل للأعمدة) دون التأثير على منطق المكدس. في HTML / CSS ، يمكن القيام بذلك ببساطة على مستوى أو "div" ، لكن Sketch لا تسمح بأي طريقة للقيام بذلك اعتبارًا من الآن.
    هناك طريقة للقيام بذلك في الوقت الحالي تتضمن تجميع طبقة خلفية مع مجموعة مكدسة وتثبيت bg بالأعلى / اليسار / 100٪ في العرض والارتفاع ، وبينما تنمو الخلفية لاستيعاب المحتوى ، فإنها لا تتقلص عند تتم إزالة المحتوى. أعتقد أن الانكماش موجود بالفعل في قائمة مهام الفريق.
  • مقدمة نقاط التوقف في لوح الرسم ، ومبادلة الرمز بناءً على لوح الرسم (تبديل التنقل المكون من 4 عناصر برمز الهامبرغر عند استخدام لوح الرسم <400px ، أو الأفضل من ذلك ، باستخدام نهج استعلامات الحاوية.
  • باستخدام نقاط التوقف المذكورة ، القدرة على التبديل بين مجموعات مكدسة رأسية إلى أفقية ، بحيث تكدس الأعمدة فوق بعضها البعض عندما لا يكون هناك مساحة كافية. وللأعمدة للالتفاف إذا كان محددا.
  • القدرة على تحديد نسبة العرض لكل عمود.
    (تحديث - تم للتو تنفيذ نسخة من هذه الفكرة في البرنامج المساعد باستخدام ميزة الأوزان)
  • على الرغم من أن هذا لن يقع بالضرورة على فريق Anima ، ينبغي أن تقدم Sketch أيضًا دعمًا للمتغيرات ، وخاصة الآن مع خصائص مثل التباعد ، والحد الأدنى والحد الأقصى للارتفاعات ، والقيم الأخرى التي يجب أن تظل متسقة عبر عدة طبقات. يمكن استخدام هذه المتغيرات أيضًا لتعيين الألوان أيضًا ، والمساعدة في عملية تسليم Sass.

حسنًا ، هذا كل ما حصلت عليه! أردت فقط إعطاء صيحة للفريق في أنيما مرة أخرى. إنهم موهوبون للغاية ، ومتجاوبون ، ومدعون ، لذا يرجى التأكد من دعم عملهم الشاق! انضم إلى صفحة Facebook الخاصة بهم.

إذا كان لديك أي أسئلة أو تعليقات (لطيفة!) ، فلا تتردد في النشر أدناه أو التواصل مع Twitter.