كيفية إنشاء دليل نمط الرسم والمكتبة ومجموعة واجهة المستخدم

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

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

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

إنشاء دليل أسلوب الرسم الخاص بك

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

الخطوة الأولى: التنظيم

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

الخطوة الثانية: الألوان

إذا تم تحديد الألوان بالفعل ، فإن الخطوة التالية هي تحويل ألوانك إلى رموز.

1. للقيام بذلك ، قم بعمل مربعات من نفس الحجم وقم بتغيير ألوانها وفقًا لذلك. انقر فوق "إنشاء رمز" واحفظ هذه العناصر باستخدام نظام تسمية color / @ color-name . تعد Color / @ pink أو color / @ background-gray أو color / @ FFFFF أمثلة على الملصقات المناسبة. تعد اصطلاحات التسمية مهمة في الحفاظ على دليل الأسلوب منظمًا ، لذلك يجب إنشاء تنسيق لكل شيء والالتزام به من البداية.
2. بمجرد الانتهاء ، قم بإضافتها إلى صفحة دليل النمط.
3. احفظ عينة الألوان في قسم المستندات بلوحة الألوان الخاصة بك.

اختصارات مفيدة: R - أداة المستطيل ، T - أداة النص ، بديل - قياس المسافة.

الخطوة الثالثة: الأيقونات

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

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

الخطوة الرابعة: أنماط النص

بمجرد اختيار الخطوط ، حان الوقت لتحديد أنماط النص: H1 ، H2 ، H3 ، H4 ، H5 ، النص الأساسي ، الروابط ، التسميات التوضيحية ، الملصقات ، إلخ. مرجع جيد لطباعة الويب هو منشور المدونة هذا بواسطة Typecast.

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

الخطوة الخامسة: الأصول

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

فيما يلي بعض الأصول المقترحة للعمل عليها:

أزرار

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

أشرطة البحث

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

أزرار الراديو وخانات الاختيار

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

الخطوة السادسة: استخدم دليل الأسلوب!

يكون القيام بكل هذا العمل لإنشاء دليل نمط مفيدًا فقط إذا كان يجعل المشروع يعمل بشكل أكثر سلاسة. بمجرد إنشاء جميع الأصول ، حان الوقت لتطبيق المكتبة على المستند الجاري تصميمه. في Sketch ، انتقل إلى "Preferences -> Add Library…" وأضف مستند المكتبة.

بمجرد إضافة مكتبة إلى ملف تصميم مشروعك ، يمكنك الوصول إلى المكتبة ورموزها في قسم الرموز. ستلاحظ مكتبة iOS UI Design التي تأتي مع Sketch كخيار مكتبة ، بالإضافة إلى المكتبة التي تم استيرادها مؤخرًا.

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

المكافأة: استيراد / تصدير أنماط النص

لا يتم حفظ أنماط النص في المكتبة ، ولكن المكوّن الإضافي Shared Text Styles لـ Sketch يحل ذلك. بمجرد تنزيل المكون الإضافي ، انتقل إلى مستند المكتبة ثم إلى القائمة: "المكونات الإضافية -> أنماط النص المشتركة -> تصدير ..." احفظ هذا الملف في نفس المجلد مثل مستند مكتبتك. بعد ذلك ، في مستند التصميم الخاص بك ، انتقل إلى القائمة مرة أخرى: "الإضافات -> أنماط النص المشتركة -> استيراد أنماط النص ..." واستورد الملف الذي حفظته للتو. ستظهر أنماط النص الخاصة بك.

المكافأة: استيراد / تصدير لوحات الألوان

على غرار أنماط النص ، لا يتم حفظ ألوان المستندات باستخدام مكتبة Sketch ، لكن المكون الإضافي Sketch Palettes يحل ذلك. تمامًا كما هو مذكور أعلاه ، قم بتصدير اللوحة باستخدام "المكونات الإضافية -> لوحة الرسم -> ألوان المستند -> حفظ لوحة الألوان" واستيرادها باستخدام "المكونات الإضافية -> لوحة الرسم -> ألوان المستند -> لوحة التحميل." تذكر حفظه في نفس المجلد مثل مستندات المكتبة الأخرى.

المكافأة: الخطوط

Craft by InVision عبارة عن مجموعة من المكونات الإضافية التي تنقل برنامج Sketch إلى المستوى التالي. يتيح لك Craft استبدال الصور بالصور المخزنة والنموذج الأولي والمزامنة مع InVision وإنشاء مكتبات وغير ذلك. إذا تم تنزيل Craft ، فاضغط على "cmd-shift-c" في المستند وسيتم إنشاء ورقة أنماط. سيتم سرد الخطوط هنا.

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

مزيد من القراءة على مدونة Toptal Design:

• لماذا تحتاج الشركات الناشئة إلى Styleguide
• أشياء قد لا تعرفها عن الطباعة في Sketch
• القائمة النهائية المكونة من 50 من أفضل المكونات الإضافية للرسم
• Adobe XD مقابل Sketch - ما أداة UX المناسبة لك؟
• كيفية بناء إطار تصميم فعال (بما في ذلك إطار عمل مجاني لواجهة مستخدم Sketch)