التصميم والرسم الذري - دليل لتحسين سير العمل

يعد Sketch and Atomic Design مجموعة قوية من الأدوات والمنهجيات التي يمكن للمصممين استخدامها لإنشاء أنظمة تصميم تسمح بالتوحيد القياسي وسير عمل أكثر كفاءة.

أنظمة التصميم: تمهيدي

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

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

يعد التصميم متعدد الأبعاد من Google مثالاً على نظام تصميم واجهة مستخدم منظم. تم تقديم التصميم متعدد الأبعاد في عام 2014 كطريقة لتصميم وتطوير تطبيقات Android متماسكة.

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

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

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

تعتمد Atomic Design ، وهي منهجية قدمها Brad Frost في عام 2013 ، على فكرة أنه يمكن تعريف كل نظام تصميم على أنه سلسلة من اللبنات الأساسية التي تتعايش.

فيما يلي نظرة عامة سريعة على مكونات التصميم الذري:

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

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

سيساعد استخدام Atomic Design لإنشاء نظام تصميم وصيانته المصممين على العمل بكفاءة أكبر والتواصل بشكل أفضل داخل فرقهم. هناك عدد كبير من الأدوات والأساليب لإنشاء أنظمة التصميم وصيانتها ، ولكن غالبًا ما تكون أفضل الأدوات هي تلك التي نعرفها كثيرًا.

كيفية استخدام التصميم الذري مع Sketch

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

تكوين الذرات

نبدأ بإنشاء ثلاثة أنواع من الذرات في Sketch: الرموز وأنماط الطبقة وأنماط النص.

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

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

أنماط النص. أنماط النص ، المشابهة لأنماط الطبقة ، هي عناصر قابلة لإعادة الاستخدام تضمن التناسق عبر كائنات النص المتشابهة. على سبيل المثال ، تحديد حجم الخط ولونه لعنصر h1. إنه يعمل بطريقة مشابهة لأنماط النص في محرّر مستندات Google أو Microsoft Word.

عندما نحدد الرموز وأنماط الطبقة وأنماط النص ، يمكن لـ Sketch تقسيمها إلى فئات هرمية في قوائم الرموز وأنماط النص باستخدام "/" (الشرطة المائلة للأمام). يؤدي اتباع اصطلاحات التسمية وامتلاك مجموعة محددة جيدًا من الفئات الرئيسية إلى منح الملفات بنية منظمة ، مما يقلل من الارتباك وعدم الاتساق.

فيما يلي بعض الطرق لإنشاء فئات هرمية للرموز والنصوص وأنماط الطبقات في Sketch.

يمكننا تمثيل الرموز باستخدام اصطلاح التسمية التالي المقترح ضمن Atoms / :

• أصول
• أزرار
• ضوابط الإدخال
• الصور
• التنقل
• معلومة

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

• يملأ
• الحدود
• الظلال
• التدرجات

على غرار أنماط الطبقة ، إليك كيفية إنشاء أنماط نص ضمن Atoms /:

• العناوين
• الجسم
• شرح
• تسميات
• الروابط

لا ينبغي أن تكون لغة التصميم الموحدة مجرد مجموعة من القواعد الثابتة والذرات الفردية ؛ يجب أن يكون نظامًا بيئيًا متطورًا. - Airbnb على بناء لغة بصرية.

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

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

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

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

الفئات الرئيسية التي تندرج تحت الجزيئات / هي:

• معلومة
• التنقل
• ضوابط الإدخال

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

• القوائم المنسدلة
• يبدل
• المتزلجون
• نوافذ التبويب
• ترقيم الصفحات
• مؤشرات التقدم
• حقول التاريخ
• حقول النص
• مربعات الاختيار
• أزرار الراديو
• الوحدات

خلق الكائنات الحية

الكائنات الحية هي مجموعات من الذرات والجزيئات. يمكن أن تكون أيضًا جزءًا من كائنات حية أخرى.

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

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

الكائنات الحية ، مثل الجزيئات ، يمكن أن تندرج في نفس الفئات والفئات الفرعية:

فيما يلي الفئات الرئيسية التي سننشئها للكائنات /:

• معلومة
• التنقل
• ضوابط الإدخال

كما هو الحال مع الجزيئات ، سننشئ أيضًا فئات فرعية للكائنات الحية:

• القوائم المنسدلة
• يبدل
• المتزلجون
• نوافذ التبويب
• ترقيم الصفحات
• مؤشرات التقدم
• حقول التاريخ

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

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

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

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

قم بتغليفه

يعد Sketch and Atomic Design مجموعة قوية من الأدوات التي يمكن استخدامها معًا لتحسين سير عمل التصميم وتسهيل إطار عمل نظام تصميم فعال.

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

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

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

• كيفية بناء إطار تصميم فعال
• فهم أنظمة وأنماط التصميم
• كيفية إنشاء دليل نمط الرسم والمكتبة ومجموعة واجهة المستخدم
• لماذا تحتاج الشركات الناشئة إلى Styleguide
• Zeplin Sketch Plugin - جسر سير العمل بين التصميم والهندسة