دروس الرسم

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

تعاون الفريق ، أصبح بسيطًا.

قد يبدو اسمه الآن مألوفًا ، لكن الكثيرين يعتبرون Ransom E. Olds مؤسس صناعة السيارات وبطريرك الإنتاج الضخم. ربما سمعت عن أولدزموبيل؟ إنه ذلك الرجل.

ويعود الفضل في هذا الرائد المنسي إلى تطوير خط التجميع ، مما ساعده في بناء أول سيارة منتجة على نطاق واسع في العالم ، وهي Oldsmobile Curved Dash. الآن هناك سيارة!

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

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

تم تحسين المفهوم وتكييفه في جميع الصناعات لتسريع الإنتاج وتحسين الإنتاج ، وأخيراً دخل في ممارسة التصميم الرئيسية مع أنظمة التصميم.

الوقت المناسب

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

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

مدير نظام تصميم InVision (DSM)

نحن نمر بثورة صناعية من نوع ما حيث يتم إصدار أدوات تصميم جديدة كل يوم ، وقد يكون من الصعب رؤيتها من خلال الفوضى.

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

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

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

لماذا لا تستخدم مكتبات Sketch Libraries فقط؟

سؤال مفهوم تماما - سألت نفس الشيء. إليك السبب الذي يعجبني:

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

بناء نظام التصميم الخاص بك

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

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

افتح ملف تصميم نظام التصميم الخاص بك حيث كنت تبني المكونات المختلفة لنظام التصميم الخاص بك ، ولنبدأ.

الخطوة 1: إنشاء مكتبة

توجه إلى لوحة معلومات الويب الخاصة بـ InVision وانقر على DSM.

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

انقر فوق إنشاء مكتبة جديدة للبدء:

الخطوة 2: تنزيل البرنامج المساعد

نظام التصميم "shell" جاهز ، وقد حان الوقت للبدء في ملئه بالعناصر والمكونات والأنماط المحفوظة.

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

تأكد من تنشيط أداة DSM ضمن علامة التبويب "أدوات" في الأعلى.

إذا قمت بتثبيته بشكل صحيح ، فسترى شريط أدوات رأسيًا جديدًا داخل Sketch:

الخطوة 3: فهم أقسام المكتبة

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

نصيحة برو: إظهار وإخفاء هذه النافذة عن طريق الضغط على Command + L!

تنقسم مكتبة DSM إلى خمسة أقسام (تسمى "المجلدات") افتراضيًا:

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

المجلدات

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

الخطوة 4: إضافة الألوان

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

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

انقر فوق النص الموجود أسفل حامل اللون لإعادة تسمية ألوانك إلى شيء أكثر فائدة:

يتيح لك DSM إضافة وصف للمكونات في مكتبتك ، وهو أمر رائع لإضافة إرشادات الاستخدام ومبادئ التصميم:

محرر النصوص الغنية مخدر إلى حد ما - لا يتعين علي اختراقه بتنسيق محلي.

الخطوة 5: إضافة أنماط النص

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

على أي حال ، فإن إضافة أنماط النص أمر سهل للغاية لأن DSM يفعل كل شيء من أجلك. انقر في مجلد "أنماط النص" ، ثم انقر فوق الزر + في أسفل اليمين:

يبدو أنه يسحب التكرارات ، لكنه ليس كذلك. لديّ نمطان من النص تم إعدادهما للمحاذاة بين اليسار والوسط!

سيقوم DSM بالكشف التلقائي عن كل نمط نص في وثيقتك. فقط انقر فوق تحديد الكل ، وإضافة أنماط النص.

الخطوة 6: إضافة أنماط الطبقة

انقر داخل مجلد Layer Styles ، ثم كرر الخطوة السابقة. سهل جدا!

الخطوة 7: إضافة الرموز

من المهم ملاحظة أن الرموز لا يجب أن تكون رموزًا لإضافتها إلى مكتبة DSM.

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

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

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

عادة ما أقسم الألغام على ما يلي:

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

الخطوة 8: إضافة مكونات

يجب أن يكون لديك تعليق منه الآن! انقر في مجلد المكونات ، ثم انقر فوق الزر + لبدء إضافة العناصر والمكونات القابلة لإعادة الاستخدام.

هذا هو المكان الذي تريد أن تكون فيه منظمًا بشكل ممتاز باستخدام بنية مجلدك:

تذكر أن DSM ستقوم تلقائيًا باستيراد أي رموز متداخلة بعمق تشكل مكونات رمزك الأكبر ، لذلك عليك فقط استيراد "المكون النهائي" إلى DSM:

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

انه حقا لطيف حقا.

الخطوة 9: نشر واستخدام النظام

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

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

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

إصدار نظام التصميم الجديد موجود الآن ، وإذا كنت قد قمت بالفعل بإصدار إصدار سابق ، فيمكنك رؤية ما تم تغييره بالنقر فوق محفوظات الإصدار ...

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

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

عند التحدث عن الفريق ، قد ترغب في دعوة بعض المصممين الآخرين لاستخدام مكتبة DSM الجديدة وتعديلها وإدارتها.

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

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

يمكنك أيضًا زيارة علامة تبويب الأشخاص على الشاشة الرئيسية لـ DSM لعرض المتعاونين وتحريرهم وإضافتهم إلى مكتباتك.

تتوفر هذه الأذونات والأدوار فقط في خطة Enterprise.

يمكنك الانتقال بسرعة إلى هذه الصفحة من داخل البرنامج المساعد DSM ، أيضًا:

الخطوة 10: إجراء تحديثات لنظامك

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

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

حدد ما إذا كنت تريد إنشاء جديد أو استبدال موجود ، وسيتم نشر التغيير في مكتبة DSM:

عند إجراء التحديثات في مكتبتك ، سيتم إعلام أعضاء فريق التصميم الخاص بك بأنه قد تم تحديث المكونات:

كل ما يتعين عليهم القيام به هو النقر فوق "مكتبة المزامنة" للتوثيق وستنعكس التغييرات في وثيقتهم ، مع الحفاظ على جميع التخطيات الحالية (مثل النص):

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

ملخص

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

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

انقر أعلاه لعرض نظام التصميم المكتمل على InVision!

عندما لا أقوم بإنشاء أنظمة تصميم ، فإنني أعمل على أدوات Sketch في UX Power Tools لتجعلك مصممًا أفضل وأكثر كفاءة.

اتبع UX أدوات السلطة على التغريد
تابعني على تويتر
قل مرحبا على LinkedIn
تعلم بعض الأشياء من مدونة وكالتي