Design Systems + Sketch - كيفية بدء إعداد مكتبة مكونات واجهة المستخدم

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

ملحوظة:
أحب أن أبقي الأمور واضحة. بصفتي مُنشئ UXMisfit.com ، فإن أولويتي هي مساعدة المصممين من خلال إلهامهم بطريقة مختلفة بعض الشيء عن UX وإعداد أدوات لتوفير الوقت.

يتم إعداد مجموعات أدوات UXMisfit في الغالب لـ Sketch. يمكنك العثور على برامج لإعداد تدفقات المستخدم بكفاءة أو لضمان جودة أفضل لأيقونات التطبيق.

قد تجد أيضًا مجموعة أدوات تصميم النظام - يطلق عليها Prime. يحتوي على أكثر من نظام تصميم واجهة مستخدم حديث لـ Sketch. باستثناء مئات العناصر القابلة للتخصيص ، فإنه يشمل نظام Illustration ، Web UI Kit ، مخططات وقوالب المتجهات للأجهزة الرئيسية.

بغض النظر عن Prime Design System Kit ، فإن جميع النصائح المذكورة في القصة تعمل حتى لو قررت إعداد مكونات واجهة المستخدم بنفسك.

في البداية ، كانت هناك فوضى ...

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

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

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

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

حسنًا ، إذا كان فريقك جاهزًا ، فلنأخذ فنجانًا من القهوة ونطلق رسمًا!

حصلت على مشروع قائم؟ جعل المخزون الخاص به.

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

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

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

لكن ... مكتبات الرسم ليست أنظمة تصميم؟

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

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

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

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

بناء مكتبة مكون واجهة المستخدم لنظام التصميم

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

حبيبات

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

الألوان

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

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

إعداد اللون في Prime Design System Kit

التدرجات والتراكبات

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

نفس الموقف مع تراكب. يجب تحديد النغمة والعتامة في النظام لضمان الاتساق.

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

طباعة

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

  • أسود
  • أبيض
  • اللون الرمادي
  • أساسي (مع اللون الأساسي للنظام الخاص بك)

سيكون من الجميل أن يكون لديك أيضًا:

  • نجاح
  • تحذير
  • خطأ

ستساعدك أشكال الألوان هذه على ضمان ما يكفي من المرونة والاتساق في عملك اللاحق.

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

إذا كنت ترغب في الحصول على مقياس حجم الطباعة بشكل صحيح ، فقد تجد https://type-scale.com مفيدة. ما عليك سوى اختيار الحجم الأساسي ونوع المقياس وإعداد خط عينة واللعب حول الإعدادات.

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

لضمان أفضل استخدام للطباعة ، استخدم اصطلاح التسمية التالي:

[اسم الحجم] / [Aligment] / [اللون] / [نمط]

إذا كان لديك أكثر من عائلة خطوط في نظامك:

[اسم الحجم] / [عائلة الخطوط] / [Aligment] / [Color] / [Style]

فمثلا:

العنوان / مركز / أسود / بولد

العنوان / SF Pro / مركز / الابتدائية / اليسار

يمكنك أيضًا تقسيم أنظمة الطباعة إلى ملفات منفصلة وجعلها مكتبات مشتركة.

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

إعداد الطباعة في Prime System System Kit

شبكات وتخطيطات

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

ip نصيحة: لتسريع إعداد العمل الخاص بك دفع كبير (Shift + Arrow) في رسم إلى حجم شبكتك (على سبيل المثال 8 بكسل). هذا سيجعل عملك أسرع بكثير.

مكونات واجهة المستخدم الذرية

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

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

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

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

نصيحة: ما يستحق الذكر ، نظرًا لأن Sketch 52 ليس عليك إعداد أقنعة خاصة لألوان الأزرار أو الأيقونات. تتشاطر الأنماط المشتركة ذلك مع ميزة Symbol Override. وهذا يعني رمز أقل وسير عمل أكثر شفافية وأنيقة.

الجزيئات والكائنات الحية

لذلك قمت بإنشاء جميع العناصر الذرية. يمكنك الآن دمجها في جزيئات.

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

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

التصميم الذري مثالي لأنظمة التصميم

كيت واجهة المستخدم

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

انه لامر جيد لتصميم قوالب مع الغرض منها في الاعتبار. قد يتسبب جعلها عامة جدًا في عناصر لا تناسب حالات معينة.

يتضمن Prime الفئات التالية للقوالب:

  • بطل
  • مواصفات المنتج
  • المعارض
  • تجارة
  • طلب
  • التسعير
  • أخبار / المدونة
  • اتصل
  • الشهادات - التوصيات
  • الحساب
  • لوحة القيادة
  • حول
  • تذييل
  • أخرى (لمدة 404 وقريباً صفحة).

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

Elements العناصر المفقودة للعديد من أنظمة التصميم

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

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

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

عينة التوضيح المحرز في غضون 5 دقائق في برايم

إذا قررت تصميم مجموعة مكتباتك الخاصة لأنظمة التصميم ، ففكر في إضافة هذه العناصر إليها.

فريق التعاون

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

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

فصل الملفات

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

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

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

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

بناء نظام تصميم المعيشة من اسكتش

تتيح لك بعض الأدوات مثل InVision Design System Manager إنشاء وثائق نظام التصميم ومصدر الحقيقة ليس فقط للمصممين ولكن أيضًا للمطورين ومتخصصي ضمان الجودة وأعضاء الفريق الآخرين.

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

هذه الأداة تجعل من مكتبة Sketch Library الخاصة بك نظام تصميم حي حقيقي

أخيرا: كسر الاتساق - إذا لزم الأمر

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

"يجب طرح فكرة ما تعلمته."
- سيد يودا

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

تلخيص لما سبق

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

إذا كنت تخطط لبدء بناء نظام التصميم أو تنظيم مكتبة واجهة المستخدم الخاصة بك - لا تضيع وقتك في إنشاء كل شيء من نقطة الصفر. لا تتردد في استخدام Prime - Design System Kit.

لتسهيل وجود هدية ، استخدم رمز العرض MEDIUM10 للحصول على خصم 10 ٪.

إذا استمتعت بقصة لا تنسى .

قد تكون مهتمًا أيضًا بـ Sketch Plugins التي تساعد في الحفاظ على نظام تصميم واجهة المستخدم:

شكرا للقراءة ، حظا سعيدا مع نظام التصميم الخاص بك!