كيفية بناء نظام التصميم

نصائح لتصميم وبناء نظام تصميم ثابت.

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

ما هو نظام التصميم؟

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

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

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

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

تصميم لوحة نمط

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

حتى أبسط مكونات العنوان هي مجموعة من الأنماط المتعددة التي يعاد استخدامها ...

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

عندما ننتهي ، يجب ألا يوجد نمط واحد في منتجنا لم يتم تحديده مسبقًا في لوحة الأنماط العالمية الخاصة بنا.

اللون

لنبدأ بأكثر خصائص النمط وضوحًا - خاصية النمط الوحيدة التي يبدو أن أدوات التصميم الحديثة يمكن فهمها ويمكن تسميتها وإعادة استخدامها: اللون.

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

ألوان العلامة التجارية

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

ألوان النجاح والفشل

أخيرًا ، نحتاج إلى بعض الألوان الرمادية. ستحتاج معظم واجهات المستخدم على الأقل إلى الألوان الرمادية التالية:

  • رمادي فاتح جدا للخلفيات
  • رمادي غامق قليلاً للحدود أو الخطوط أو الحدود أو الفواصل.
  • رمادية متوسطة للعناوين الفرعية ونسخة داعمة.
  • رمادية داكنة للعناوين الرئيسية ونسخة الجسم والخلفيات.

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

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

لدينا لوحة اللون النهائي

الظلال

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

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

يجب أن تكون هذه الظلال الأربعة كافية لتصميم كل مكون في نظامنا:

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

نوع مقياس

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

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

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

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

دائرة نصف قطرها الحدود

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

  • دائرة نصف قطرها الحدود الصغيرة للمكونات الصغيرة مثل مربعات الاختيار والعلامات والتسميات.
  • نصف قطرها الحدود المتوسطة للأزرار والمدخلات والمكونات المماثلة.
  • دائرة نصف قطرها كبير للبطاقات ، مشروطات وغيرها من المكونات الكبيرة.
2px ، 4px و 8px حد قطرها

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

مقياس التباعد

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

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

بالتمسك بزيادات 8dp ، يمكننا تحديد عدد من قيم التباعد التي يمكننا استخدامها لتصميم كل مكون واحد والتخطيط في مجموعة منتجاتنا.

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

تباعد الحروف

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

3 أو 4 أحرف تباعد القيم يجب أن تفعل الخدعة.

بناء مكتبة المكونات

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

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

قام Dave Rupert بإجراء استطلاع الرأي هذا عبر Twitter مؤخرًا يسأل عن مكان وضع رمز يتخطى التصميم على مكون الزر ، إذا كان هذا الزر داخل مكون مشروط ، على سبيل المثال.

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

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

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

دعنا نأخذ بعض المكونات الشائعة ونتفحص كيف يمكننا بنائها باستخدام الأنماط التي حددناها في لوحة الألوان أعلاه.

الزر المتواضع

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

المزيد من المكونات

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

دعونا نجرب شيئًا ما قليلاً ...

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

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

نصائح للطريق

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

أنا أعمل على مجموعة أدوات CSS كاملة تستند إلى إطار Bantam CSS والتي ستشمل جميع المكونات الموضحة في هذه المقالة بالإضافة إلى المزيد. المشروع مخصص لـ Modulz ، وهو منتج أعمل عليه ، ولكن إذا كنت مهتمًا باستخدام مجموعة أدوات واجهة المستخدم هذه بنفسك ، فأعلمني على Twitter. إذا تلقيت اهتمامًا كافيًا ، فسوف أكون مفتوحًا.