رسم تعليمي

كيفية إنشاء نظام تصميم في الرسم (الجزء الثالث)

اسمح لي أن أوضح لك كيفية إنشاء أشكال الزر والولايات والإدخالات المختلفة المطلوبة لنظام التصميم الخاص بك

هل ترغب في تحسين سير العمل بشكل كبير من خلال نظام التصميم المميز الخاص بي من أجل Sketch؟ يمكنك التقاط نسخة من Cabana هنا.

استخدم رمز العرض MEDIUM25 لتلقي خصم 25 ٪.

إنشاء الأشكال والولايات الرموز

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

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

يرجى ملاحظة: كما ذكرت في المقالة السابقة ، لن أريكم كيف تصنع مئات الرموز. سأعطيك نظرة موجزة عن بعض العناصر الأساسية هنا.

لنغوص في ...

الدول زر

بالنسبة إلى Button Button ، استخرجت Rectangle (R) حوالي 190 × 50 بكسل (وهذا مجرد أبعاد اخترت ، ولا تتردد في اختيار بلدك).

ثم أعطاها لون تعبئة # E9E9E9 (يمكنك أيضًا ببساطة النسخ عبر قيمة Hex من رمادي فاتح أنشأناه في الجزء الأول. متروك لك تمامًا).

ثم أنشأت نمطًا مشتركًا جديدًا وسمته "حالة / تعطيل" الزر.

قمت بإعادة تسمية الطبقة إلى القاعدة ، ثم قمت بتحويلها إلى رمز مع تسمية الحالة / الزر / تعطيل.

كررت بعد ذلك عملية مماثلة لدول Hover و Normal Button ولايات (إنشاء شكل جديد ، ونمط مشترك جديد ، ثم رمز جديد) ، لكنني اخترت لون تعبئة باللون الأبيض لـ Hover و Normal States ، مع وضع Hover State في White مع التعتيم 25 ٪ والعادية مع الأبيض في التعتيم 0 ٪.

لدي الآن "حالات الزر" في مكانها ، والتي يمكنني الآن أن أطلبها ، عندما أقوم بتكوين مكونات Button الخاصة بي ، والتي سنتطرق إليها في الجزء الأخير من السلسلة.

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

شكل زر (ملء)

بالنسبة لأول رموز رموز شكل الزر (Fill) ، قمت برسم مستطيل (R) 120 × 40 بكسل ثم أعد تسمية الطبقة إلى القاعدة.

ثم أسقطت كل من رمز اللون ورموز الحالة التي قمت بإنشائها مسبقًا.

اخترت اللون الأساسي والرموز الحالة الطبيعية (اللون / الأساسي والحالة / زر / عادي).

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

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

ثم اتبعت نفس الإجراء لشكل زر (Fill) بنصف قطر 4px و 100 px Radius ، وضبط طبقة الشكل وفقًا لذلك.

لدي الآن نموذج Symbol الذي يمكنني ببساطة تجاوز كل من حالته ولونه من المفتش.

شكل زر (الحدود)

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

أولاً ، قمت بإنشاء مستطيل (R) ، بنفس أبعاد رموز شكل الزر (تعبئة) ؛ 120x40px.

ثم قمت بتكرار هذه الطبقة (CMD + D) ومحاذاة لهم فوق بعضها البعض.

بعد تحديد الطبقة العليا ، قمت بخفض حجمها إلى 118 × 38 بكسل ثم نقلتها بمقدار 1 بكسل إلى أسفل ، و 1 بكسل إلى اليسار ، حتى كان لدي شيء مثل التالي ...

بعد ذلك حددت كل من طبقات الشكل واستخدمت Subtract ، ثم قمت بإعادة تسمية طبقة Combined Shape إلى Base.

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

أخيرًا ، اخترت كل الطبقات والرموز وحولتها إلى رمز جديد مع التسمية الشكل / الحدود / نصف القطر - 0 بكسل.

ثم اتبعت نفس الإجراء الخاص بـ "شكل الزر" (الحدود) بنصف قطر 4px ونصف قطر 100px ، واضبط طبقة الشكل وفقًا لذلك.

الدول المدخلة

مع حالات الإدخال ، اتبعت إجراءًا مختلفًا قليلاً عن رموز شكل الزر (الحدود والحدود) ، على الرغم من أنهما كانا يتبعان بنية مشابهة تمامًا.

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

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

بدءًا من حالات الإدخال الافتراضية ، قمت بإنشاء Rectangle (R) 180x50px وقمت بتطبيق Border / Light Gray Shared Style الذي قمت بإنشائه مسبقًا.

بعد ذلك قمت بتحويل هذا الرمز إلى رمز الدولة / الإدخال / الافتراضي / نصف القطر - 0 بكسل.

ثم باتباع خطوات مماثلة ، قمت بإنشاء رموز بنفس النمط المشترك ، ولكن باستخدام دائرة نصف قطرها 4 بكسل و 100 بكسل.

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

  • الدولة / الإدخال / نشط / نصف القطر (0 و 4 بكسل و 100 بكسل)
  • الحالة / الإدخال / تعطيل / نصف القطر (0 و 4 بكسل و 100 بكسل) استخدمت لون تعبئة رمادي هنا مع عتامة 40٪ ، ثم قمت بإنشاء قناع باستخدام طبقة الحدود
  • الحالة / الإدخال / الخطأ / نصف القطر (0 و 4 بكسل و 100 بكسل)
  • الحالة / الإدخال / النجاح / نصف القطر (0 و 4 بكسل و 100 بكسل)

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

انضموا لي في الجزء 4 (والذي يمكنك التحقق من هنا)

ألا ترغب في بناء نظام تصميم بنفسك؟ يمكنك التقاط نسخة من Cabana هنا.

استخدم رمز العرض MEDIUM25 لتلقي خصم 25 ٪.

شكرا لقرائتك المجلة،

مارك

مصمم ، مؤلف ، أب وحبيب أفلام حرب النجوم (جيد) (لا يشمل The Last Jedi)