كيفية جعل تصميم واجهة المستخدم الخاصة بك تستجيب بالكامل مع رسم - الجزء 2

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

المقدمة

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

"اجعل صورة البطل أصغر حجمًا وأريني تخطيطك بنص طويل جدًا لأنني لا أعرف أي شخص على الإنترنت يحب الصور الكبيرة ويحب الجميع قراءة الكثير من النصوص. لديك دقيقتان للقيام بذلك. "وأنت تعرف ماذا يمكنك الإجابة بعد قراءة هذا المقال؟
"سأفعلها في واحد" ؛)

بعد هذا الجزء الثاني من البرنامج التعليمي ، سوف تكون مستعدًا لطلب عميل آخر ربما يبدو كالتالي:

"هل تستطيع أن تريني كيف يعمل هذا على iPhone 7 Plus. وكيف تبدو على جهاز iPad؟ هل يتعين علينا إنشاء تخطيط محدد لذلك؟ "
وستكون إجابتك على بعد بضع نقرات.

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

حول المكوّن الإضافي للتخطيط التلقائي

الطفل الجديد الجميل في المدينة عندما يتعلق الأمر بالتصميم المتجاوب يسمى Auto-Layout. إنه مكون إضافي لبرنامج Sketch يسمح لك بتحديد عناصر التخطيط بطريقة تستجيب لعرض شاشات مختلفة. بغض النظر عما إذا كان من المفترض أن يكون للعنصر حشو قائم على النسبة المئوية ، أو حشوة قائمة على البكسل أو محاذاة مركزية. ميزة التحديث التلقائي يجعلها أكثر مذهلة.

هذا هو التخطيط التلقائي. GIF من المبادئ التوجيهية الرسمية.

إلى جانب ذلك ، يحتوي على واجهة سهلة الاستخدام ودروس تعليمية جيدة للفيديوهات والوثائق. نظرًا لحقيقة أن هناك بالفعل الكثير من المعلومات والعديد من البرامج التعليمية هناك لا أريد أن أتناول الكثير من التفاصيل. للحصول على مزيد من التفاصيل ، يرجى إلقاء نظرة على موقع anima Auto-Layout الرسمي أو الاطلاع على صفحة Auto-Layout متوسطة الرسمية.

نقطة البداية

فيما يلي نقطة البداية: قم بتنزيل ملف مثال Sketch هذا. ثم الرجاء تنزيل المكون الإضافي Auto-Layout Plugin هنا. أو حتى أفضل من ذلك ، استخدم Sketch Toolbox وابحث عنها.

الخطوة 1: قم بإعداد التصميم الخاص بك مع خيارات تغيير الحجم والتثبيت من Sketch

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

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

حسنا. أنت فعلت ذلك؟ بعد إعداد كل خيار تغيير الحجم الصحيح ، يجب أن تتصرف عناصرك كما يلي:

تغيير حجم الخيارات

الخطوة 2: اجعل النسق الخاص بك مستجيبًا للعروض المختلفة للشاشة باستخدام التنسيق التلقائي

أصبح تخطيطك جاهزًا الآن لتصبح مستجيبًا باستخدام التنسيق التلقائي. ستحدد الآن كيفية تصرف العناصر في أحجام مختلفة للشاشة. لنبدأ مع صورة الرأس. من المفترض أن يكون هذا العرض 100٪. حدد مجموعة "Header" وانقر على أيقونة النسبة المئوية وجعلها 100٪

إعطاء صورة الرأس بعرض 100٪

التالي هو مجموعة "النص". من المفترض أن يكون له هامش يسار ويمين 24 بكسل. لذلك فقط حدد المجلد وانقر فوق مربع الاختيار للهامش الأيمن والأيسر واكتب 24 (إذا لم يكن لديه هذا الموضع بالفعل).

إعطاء مجموعة

الآن تريد تحقيق أن تحافظ كل طبقة نصية داخل مجموعة "النص" على موقعها وعرضها بنسبة 100٪. نظرًا لأن الطبقات معلقة دائمًا على أصلها ، يجب عليك إعطاء كل طبقة نصية داخل هذه المجموعة بهامش صفري.

الآن هذا هو مبدأ تحديد جميع العناصر. يرجى تكرار هذه الخطوات لجميع المجموعات والطبقات الأخرى.

عندما تنتهي من ذلك ، يجب أن يبدو كالتالي:

تبدو جميلة جدا من النظرة الأولى. لكن في النظرة الثانية ، ربما ترى بعض الأشياء التي ترغب في تحسينها. على سبيل المثال ، المساحة الفارغة الناشئة أعلى وتحت الطبقات. ذلك لأنك لم تتمكن (بعد؟) من تحديد الهوامش النسبية بين العناصر. تغير العناصر حجمها ولكن تحتفظ بمواضع x.

شيء غريب آخر هو شيفرون إلى جانب اسم الفرقة "Modeselektor". بغض النظر عن نوع التثبيت ، فأنا أعرّفه فقط يفعل شيئًا لا أحصل عليه.

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

لهذا السبب قمت بعمل برنامجين تعليميين ، وبما أنني أعلم أنك جميعًا قد عملت في الجزء الأول تمامًا من خلال الجزء 1 ، يمكنك فقط النقر فوق "تحديث" على شريط أدوات الموائع وسيصبح كل شيء على ما يرام:

هذا هو. لقد قمت بإنشاء تصميم التطبيقات الأكثر مرونة ، على الإطلاق :)

يمكنك الآن الالتفاف حولها مع ارتفاع الصورة وأطوال النص وعرض اللوحات الفنية. اجعله أكبر ، اجعله أصغر ، أضف شيئًا ، أزل شيئًا. لا حاجة للخوف من طلبات التغيير بعد الآن :)

استنتاج

التخطيط التلقائي هو مكون إضافي رائع. لا يزال بإمكانك العثور على بعض الأخطاء وستفقد بعض الميزات هنا وهناك أثناء استخدامه. نظرًا لميزة التحديث التلقائي الخاصة به ، يمكنه فجأة قطع التخطيط عن طريق تغيير ترتيب المجموعة أو خصائص الطبقة. ولكن الشيء الجيد هو: هناك السوائل. ومع تكاتف فريقي Fluid و Auto-Layout ، يمكنك إكمال سير عمل التصميم المتجاوب بالكامل من خلال الجمع بين اثنين من المكونات الإضافية بدلاً من الشكوى من واحدة.

آمل أن يكون هذا البرنامج التعليمي قد ساعدك أو ألهمك. إذا كان الأمر كذلك ، فالرجاء مشاركتها عن طريق ترك البعض هناك. شكرا لقراءة

أه، بالمناسبة. التنسيق الذي أستخدمه هو شاشة التفاصيل من تطبيق iOS المجاني المسمى MYGIGS. إنه تطبيق مطوران وقمت بإنشائه في وقت فراغنا دون أي مستثمرين أو ميزانية. يعرض لك الحفلات الموسيقية والأندية القريبة والمدن الأخرى بطريقة سريعة وسهلة. إنه مجاني ، فقط أمسك به :)