دروس الرسم

كيفية تغيير التصميم الخاص بك على الطاير

تعلم كيفية إجراء تغييرات سريعة على أصول التصميم الخاص بك في أي وقت من الأوقات

هذا جزء من Frames for Sketch - سلسلة من الدروس القصيرة حول أفضل الممارسات التي استخدمناها لجعل Frames Kit أداة مفيدة حقًا. سنغطي كيف يمكنك جعل كل تغيير أقل إيلامًا وإنشاء أشكال غير محدودة لتصميماتك على مثال زر بسيط.

إذا لم تكن مهتمًا بقراءة كل هذه الكلمات ، فلا تتردد في تنزيل ملف البرنامج التعليمي هنا - Dynamic Buttons Tutorial

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

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

غالبًا ما يرتبط الكثير من المصممين كثيرًا بأسلوب التصميم المختار بحيث يصبح كل تغيير جديد مؤلمًا أكثر وأكثر.

ولكن لماذا يجب أن تكون مؤلمة ، لماذا لا تكون أكثر متعة؟

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

ما الذي يجب إنجازه؟

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

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

لنأخذ مثال بسيط

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

ما كيفية تشغيله؟

لجعل زرنا مفيدًا ، ويمكننا تبديل معلماته ، نحتاج إلى وضع جميع الرموز الفرعية الصحيحة في زرنا الفردي. لذلك دعونا نلقي نظرة على هذه الرموز:

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

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

و هذا كل شيء. اتمنى ان تجده مفيدا.

قبل مغادرتك ، لا تنسى:

  • تحميل الهدية الترويجية أعلاه!
  • ساعدنا في نشر الكلمة حول Frames for Sketch واحصل على خصم 25 ٪. فقط أرسل لنا / سقسق لنا / DM لنا رابط لمشاركتك وسنعود إليك في أقرب وقت ممكن.
  • اتبع Robowolf على تويتر للحصول على مزيد من الهبات المجانية والدروس.