كيفية استخدام رموز تغيير حجم رسم مثل بوس

تحرير: تم كتابة هذه المقالة قبل إصدار Sketch 44. في ذلك الوقت ، كان هناك 4 أوضاع: Stretch و Pin to corner و Resize object و Float في مكانها. الآن يختلف الأمر قليلاً ، لذا يرجى ملاحظة أن هذا البرنامج التعليمي قديم قليلاً. هناك الآن طريقة أكثر نظافة للتعامل مع مشكلة شريط التقدم. تم تحديث الملف القابل للتنزيل وفقًا لذلك ، لذا تأكد من التحقق من كيفية صنعه. شكرا لجميع الردود والتعليقات الكريمة ؛)

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

لحسن الحظ ، أصبح إنشاء الأنظمة ممكنًا الآن بطريقة أكثر تطوراً مما كانت عليه قبل عام ، وذلك بفضل Bohemian Coding وتطبيق Sketch الذي لا يمكن إيقافه. هؤلاء الرجال الحصول عليها.

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

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

البرنامج التعليمي: مشغل YouTube المتجاوب

قبل أن نبدأ عمليًا ، أرغب في الاعتذار عن العنوان المدعي إلى حد ما لهذه المقالة.

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

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

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

بناء اللاعب

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

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

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

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

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

إضافة تغيير حجم القواعد ، أو القيود

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

بعد ذلك ، يجب أن تظل جميع الرموز وعناصر التحكم التي تؤلف المشغل على نفس المسافة من أقرب زاوية ، مع الحفاظ على نفس الحجم إذا تم تغيير حجم الأصل. حسنًا ، لقد حصلنا على الشيء! استخدم Pin to corner بدلاً من خيار Stretch الافتراضي في المفتش على اليمين. إذا قمت بتجميعها ، فتأكد من تعيين هذه المجموعات أيضًا على Pin to corner. تحقق مرتين مما إذا كان الحجم كافيًا بحيث يتم وضع كل عنصر بالقرب من زاوية وليس متساويًا من زاويتين ، أو سوف يلتصق في منتصفها.

بالنسبة إلى التدرج اللوني ، تريد تغيير حجمه مع المكون بالكامل ، لذلك قم بتعيينه على كائن تغيير الحجم. سهل هكذا!

لذلك ، سوف تتصرف صورة الخلفية باستخدام الملء أو الملاءمة ، وستتمسك عناصر التحكم بأقرب زوايا ، وسيتم تغيير حجم التدرج بشكل حيوي. عمل جيد! ولكن حتى الآن ، لا مفاجأة.

شريط التقدم

انتظر ، ما زال هناك شريط تقدم باللون الأحمر المميز نحتاج إلى التعامل معه. لن يكون YouTube موقع YouTube بدونه!

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

بمعنى آخر ، نحتاج إلى تغيير حجم الأشرطة بشكل أفقي ، وليس عموديًا ، والتمسك دائمًا بنفس المسافة من الحواف اليمنى واليسرى ، والحافة السفلية.

الشيء الوحيد هو أنه مع وجود الخيارات الأربعة المتاحة لدى Sketch في المتجر بالنسبة لنا (Stretch و Pin to corner و Resize object و Float في مكانها) ، فكرتي الأولى كانت: لا يمكن القيام بذلك. ثق بي ، لقد جربت.

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

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

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

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

الآن ، يمكنك تعديل حجم الحالات ، وحتى المحتوى باستخدام Overrides - الوقت المنقضي ، الوقت العالمي ، صورة الخلفية.

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

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

بعد قولي هذا ، أعرف كيف يحب هؤلاء الأشخاص الحفاظ على Sketch مرتبة وشاملة ومباشرة قدر الإمكان ، وهم الخبراء. فلدي الحب for م لذلك!

نتطلع لرؤية الميزات والتحسينات القادمة! نراكم لميزة اختراق المقبل ؛)