أفضل ممارسات تسمية اصطلاحات نظام التصميم
للكاتبة شاينا هودكينز /المصدر انفجن
يعد الجزء الأساسي من نظام التصميم الخاص بك هو كيفية اختيار تسمية الأنماط والمكونات. إن إعطاء المكونات الخاصة بك بطريقة معقولة – أجرؤ على القول – أسماء متسقة – لا يتعلق بالمطورين فقط. من أجل زملائك في الفريق أن يتعاونوا معك ، والمصممين في المستقبل هم الذين سيحتاجون إلى العمل مع هذه المكونات دون قراءة عقلك.
حيث يعمل اصطلاحات التسمية الصلبة على تسهيل تنفيذ تصميماتك بشكل أسهل وأنظمة التصميم الخاصة بك أسهل في الفهم وأنت مصمم أكثر تعاونًا. تعمل الأسماء غير المتسقة والمحددة للسياق على تحويل أنظمة التصميم إلى حلول مؤقتة بدلاً من أداة إدارة تصميم متسقة وغير معتمدة على السياق.
(هل ترغب في جعل التعاون مع المطورين أسهل؟ تحقق من مدير نظام التصميم لدينا.)
دعنا ندخل في أفضل الممارسات لتسمية الاتفاقيات.
أفضل ممارسات اصطلاح تسمية الملفات للأنماط والمكونات
🗂 نصائح للفئات
أنظمة التصميم لها فئتان: الأنماط الحسية والأنماط الوظيفية. يتناسب كل مكون من مكونات نظام التصميم مع إحدى الفئتين الرئيسيتين المذكورتين أعلاه ، ويدمج العديد منها عناصر من فئات متعددة.
سنناقش الأنماط الحسية:
- اللون
- طباعة
- تحجيم / تباعد
- مصور.
أثناء التسمية ، حاول التركيز على فئة العنصر ودوره ، ولكن ليس شكله.
على سبيل المثال ، يجب تسمية الزر الأساسي الأزرق في نظامك باسم / أساسي / افتراضي – دون أي ذكر للون. تضمن بنية التسمية أن يتطور عنصرك مع نظامك ، لذا إذا تغير لون هذا الزر الأساسي ، فلن يتعين عليك تحديث اسمه عبر مكونات النظام وقواعد الكود.
(هل ترغب في قراءة المزيد حول أنظمة التصميم؟ ابدأ باستخدام دليلنا الشامل.)
أفضل الممارسات 101
العوامل الهامة غير القابلة للتداول في تسمية مكون هي:
- التناسق
- وضوح
- المعنى
الهدف من تنفيذ الاتفاقيات هو جعل دور العنصر في نظام التصميم واضحًا تمامًا من الاسم – وهذا يعني أنه على الرغم من أن الرموز الرمزية قد تكون منطقية بالنسبة لك ، إلا أنها كارثة وفقًا لهذه القواعد الثلاثة.
الممارسات الجيدة:
- فصل الكلمات بالواصلات أو الشرطة المائلة للأمام
- بعد هيكل نوع “ترتيب العمليات”.
- باستخدام الحروف الصغيرة فقط
ممارسات يجب نجنبها:
- باستخدام الأرقام والرموز
- وصف الألوان أو استخدام أنواع الخطوط
- التركيز على دور المكون
عندما تكون هذه ممارسات ، ستكون أسماء المكونات مفهومة بدون سياق ويمكن قراءتها دون الحاجة إلى حذفها.
بعض العوامل التي يجب وضعها في الاعتبار هي:
- الفئة: المحمول ، معكوس ، واجهة المستخدم
- النوع: رأس ، بطل ، عنوان ، عنوان فرعي ، فقرة ، زر ، إدخال ، تعليق
- الحجم: كبير ، متوسط ، صغير ، افتراضي
- المحاذاة: يسار ، وسط ، يمين
(ضع معرفة اصطلاح التسمية الخاصة بك لتعمل في مدير نظام تصميم InVision.)
دعنا ندخل في الإرشادات الخاصة بفئة:
🌈 الألوان
- هيكل: استخدام / الاختلاف
- الأمثلة على ذلك: الأول / الافتراضي. التعليم العالي / الضوء
أمثلة الاستخدام:
- جيد: العلامة التجارية / الابتدائي
- سيئة: العلامة التجارية / green1
من خلال وصف الألوان باستخدام دورها في التسلسل الهرمي للألوان بالإضافة إلى تمييزها ، وليس اسم اللون ، يكون اللون واضحًا دون الاعتماد على المصطلحات التي يمكن أن يساء فهمها من قِبل شخص غير مألوف في دليل النمط ، أو متعاون مع colorblind.
✏️ أنماط النص
- هيكل: فئة / نوع / حجم / النمط / محاذاة
- الأمثلة على ذلك: الفقرة / الابتدائية / اليسار، الجوال / الفقرة / كبير / جريئة / يمين. الفقرة / الابتدائية / مائل / اليسار، معكوس؛ الفقرة / صغير / مركز
أمثلة الاستخدام:
- جيد: الفقرة / الابتدائية / اليسار
- سيئ: الفقرة / التسمية التوضيحية / الموقت
قد يكون وجود نمط محدد للنص للتعليق التوضيحي محدودًا للغاية إذا لم يكن فريدًا من نوعه في النظام. بالإضافة إلى ذلك ، من الأفضل عدم استخدام الاسم الفعلي للنص ، حيث إنه عنصر قد يتغير مع تغيير العلامة التجارية ومن ثم يجب تحديثه في جميع المجالات
Styles أنماط الطبقة
- هيكل: الفئة / استخدام / تباين
- الأمثلة على ذلك: واجهة المستخدم / الإدخال / الافتراضي. ملء / الأساسي / تحوم. الظل / عالية
تستند هذه الأسماء إلى عناصر تصميم طبقة واضحة وواضح ولا تترك أي تخمين للمتعاونين.
المكونات
الهيكل: الفئة / النوع / العنصر / الاختلاف ، أو الكائن الحي / الجزيء / الذرة / الاختلاف
أمثلة: BTN / الأساسي / تحوم. الملاحة / رأس / المحمول / الظلام. بطاقات / وسائل الإعلام كتلة / معقدة / على شبكة الإنترنت
أمثلة الاستخدام:
- جيد: القائمة / القائمة المنسدلة / الافتراضي
- سيئة: menu_dropdown_1
من خلال شرح بنية المكون ووظائفه ، توفر هذه الأسماء سياق المكون دون وصف مظهره.
شكرا من زملائك في الفريق
قد تكون اصطلاحات التسمية المبسطة والمبسطة والموحدة أقل إبداعًا مما كنت تفعله حتى الآن ، ولكنها أسهل في التعامل معها. مع تطور فريقك ونظامك ، ستشعر بالامتنان للوضوح في اصطلاحات التسمية – والدور الذي تلعبه في نظام التصميم الخاص بك.
للكاتبة شاينا هودكينز /المصدر انفجن
