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

أو كيفية استخدام المكوّن الإضافي للسوائل لجعل تصميم واجهة المستخدم الخاصة بك يتغير حجمه تلقائيًا إلى محتواه ...

المقدمة

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

هذا يمكن أن يكون مزعج

لا ، أنا لا أحب ذلك! أرغب في الضغط على "تحديث" وكل العناصر تتحرك تلقائيًا وفقًا للتغييرات. وهذا ما يمكن فعله باستخدام المكوّن الإضافي Fluid.

مثل هذا تماما:

السحر :)

حول البرنامج المساعد السوائل

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

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

ميزة مذهلة قد تبدو تقنية هادئة في البداية. ولكن ثق بي ، هذا ليس معقدًا وستوفر الكثير من الوقت مع هذه الميزة. دعنا نقوم به…

نقطة البداية

فيما يلي نقطة البداية: قم بتنزيل ملف مثال Sketch هذا. ثم يرجى تنزيل Fluid Plugin من هنا أو ما عليك سوى استخدام Sketch Toolbox والبحث عنه.

الخطوة 1: ترتيب الطبقات

الشيء الأكثر أهمية هو ترتيب الطبقات. كل هذا النهج يعتمد على ما يسمى "الأخوة السابقون". يجب عليك ترتيب الطبقات من الأعلى إلى الأسفل. نظرًا لأن الطبقات الموجودة في Sketch (وكذلك في Photoshop) في Layers Inspector توضع من أسفل إلى أعلى بينما يتم تصميم التصميم المرئي من أعلى إلى أسفل ، فهذا مربكًا بعض الشيء ولكنك تعتاد عليه.

ترتيب الطبقات

لذلك بعد ترتيب الطبقات من الأسفل إلى الأعلى (عكسها وفقًا لما يوضحه لك المخطط ، هل حصلت عليه؟ ؛)) يمكنك البدء في إنشاء بعض القواعد ...

الخطوة 2: اجعل مواقف العناصر تعتمد على بعضها البعض

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

تحديد الهامش النسبي للأخوة السابقة

هذا يعني أن مجموعة "النص" تتحرك تمامًا أسفل مجموعة "الرأس" (التي تمثل 100٪) بالإضافة إلى هامش 24 (أي 24). ما عليك إلا أن تشتغل بالقيم وستفهمها.

ثم تضغط على Copy في نافذة Fluid وتفعل نفس الشيء لمجموعات الطبقات أدناه. كرر ذلك أيضًا لجميع العناصر الموجودة داخل المجموعات مثل هذا:

تحديد المزيد من الهوامش النسبية

بعد ذلك ، نريد الشريط الذي يحمل التاريخ (التاريخ الألماني ، آسف :) أن يلتصق بأسفل الصورة ، بغض النظر عن ارتفاعه. ولتحقيق ذلك ، عليك أن تعلق هذا الشريط على النحو التالي:

جعل عنصر عصا إلى أسفل المجموعة

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

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

tadaa: يجب أن يتصرف تخطيطك النهائي مثل هذا:

استنتاج

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

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

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

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