قراردادهای نام‌گذاری: سازماندهی سیستم طراحی

هنگام ایجاد یک سیستم طراحی، شما می خواهید همه چیز را اصلی و متفاوت کنید - به عنوان مثال، بهترین نام ها را برای سبک های رنگی یا فایل ها انتخاب کنید. در نتیجه، معمولاً برای مقیاس‌بندی سیستم طراحی شما برای تنظیم سیستم‌های فعلی و آینده، کار بیشتری لازم است.برای جلوگیری از این امر، ارزش معرفی یک قرارداد نامگذاری را دارد. او به ایجاد همکاری موثر بین طراحان و توسعه دهندگان کمک می کند و اجرای و درک همه پروژه ها را آسان تر می کند.

اصول

نامگذاری قراردادها اصول و اهداف یک پروژه را تعریف می کنند.

چندین اصل از نامگذاری قراردادها برای یک سیستم طراحی قابل تشخیص است:

۱-وضوح و آشکار بودن.

نام‌ها باید واضح و بدون ابهام باشند، بنابراین هر عضو تیم می‌تواند به راحتی معنای آنها را بفهمد: مخفف‌های خالی و اختصارات مبهم.

۲-قوام و سازماندهی.

نام ها باید از یک توالی مجموعه پیروی کنند. منظور او هم یکنواختی در استفاده از یک نام برای یک شی و هم سازگاری در نحوه ایجاد هر نام مرکب است. توالی اسامی و صفات باید از قبل تعریف و توافق شود. او پیدا کردن و استفاده از اشیا و فایل‌ها را آسان‌تر می‌کند.

۳-وضوح و خود گواهي.

هر نام باید عملکرد یا هدف عنصر را نشان دهد. اسامی توصیفی را ببینید

۴-پیشوندها و پسوندها.

برای تمایز بین عناصر انواع مختلف می توانید پیشوندها یا پسوندها را معرفی کنید. به عنوان مثال، شما می توانید از "btn" برای دکمه ها، "lbl" برای برچسب ها و غیره استفاده کنید.

۵-استفاده از CamelCase یا kebab-case.

سبک املایی را برای استفاده در همه نام ها انتخاب کنید. به عنوان مثال، camelCase (کلمه اول با یک حرف کوچک، بعد از کلمات با حروف بزرگ) یا kebab-case (کلمات جدا شده با خط فاصله).

۶-منحصر به فرد بودن.

برای جلوگیری از تداخل استفاده از تکرار نام ها خودداری کنید.

۷-کنترل نسخه.

از کنترل نسخه برای تعیین آخرین نسخه یک فایل استفاده کنید. با افزودن اطلاعات به انتهای نام می توانید نسخه ها را پیگیری کنید. t برای استفاده از شماره و تاریخ نسخه راحت تر است.

۸-اسناد و مدارک.

اسنادی را که نامگذاری قراردادها را توصیف می کند، نگه دارید تا همکاران جدید یا یک تیم توسعه دهنده جدید بتوانند به سرعت با پروژه آشنا شوند و درگیر شوند.

دسته بندی عناصر و قالب های رابط کاربری

طبقه‌بندی عناصر و قالب‌های رابط کاربری (UI) یک گام اساسی در سازماندهی و سیستم‌بندی سیستم طراحی و همچنین برای نام‌گذاری قراردادها است.

در اینجا مثالی از نحوه سازماندهی قراردادهای نامگذاری عناصر و الگوهای رابط کاربری با استفاده از دسته بندی عمومی آورده شده است:

۱-عناصر اساسی:

• دکمه ها: btn-primary، btn-secondary، btn-submit و غیره.
• فیلدهای متنی: ورودی-متن، ناحیه متنی و غیره
• نمادها: نماد قلب، نماد جستجو و غیره.
• سرفصل ها: heading-h۱، heading-h۲ و غیره.

۲-ظروف و نشانه گذاری:

• بلوک های محتوا: بلوک محتوا، بلوک متن و غیره.
• Grid: Grid-container، Grid-row، Grid-col و غیره.
• کارت ها: کارت، ویژگی کارت و غیره

۳-عناصر ناوبری:

• منوها: منوی اصلی، منوی پاورقی و غیره
• پیوندهای ناوبری: ناو پیوند، ناوبری کشویی و غیره.
• صفحه بندی: صفحه بندی، صفحه بندی- آیتم و غیره.

۴-کنترل ها و فرم ها:

• چک باکس ها و جابجایی ها: چک باکس، کلید سوئیچ و غیره.
• فرم ها: فرم-ورود، فرم-ثبت نام و غیره.
• لیست های کشویی: کشویی، گزینه های انتخاب، و غیره.

۵-عناصر رسانه ای:

• تصاویر و ویدئوها: img-thumbnail، پخش کننده ویدئو و غیره.
• گالری ها: گالری، گالری-آیتم و غیره
• لغزنده: لغزنده، اسلایدر مورد و غیره.

۶-ساختار و اجزای صفحه:

• سرصفحه و پاورقی: سرصفحه، پاورقی و غیره.
• بلوک های محتوا: بخش ویژگی، بلوک اطلاعات و غیره.
• عناصر اجتماعی: نمادهای اجتماعی، دکمه اشتراک گذاری و غیره

۷-سبک ها و مضامین:

• رنگ ها: رنگ-اصلی، رنگ-لهجه و غیره.
• فونت ها: font-heading، font-body و غیره.
• تم ها: تم-روشن، تم-تاریک و غیره.

۸-عناصر عملکردی:

• جستجو و فیلتر کردن: نوار جستجو، کشویی فیلتر و غیره.
• اعلان ها: اعلان، جعبه هشدار و غیره
• نشانگرهای بارگیری: لودر، اسپینر و غیره

این دسته بندی به شما کمک می کند تا نام های ساختاریافته و ثابتی را برای عناصر و قالب ها در سیستم طراحی خود ایجاد کنید. راحت است، اما موارد دیگری نیز وجود دارد.

همچنین می‌توانید ساختار خود را با دسته‌بندی عناصر و قالب‌های UI به دسته‌ها یا بخش‌ها تعریف کنید. برای این کار می توانید از یکی از روش های عملی زیر استفاده کنید:

۱.فهرستی بر اساس حروف الفبا تهیه کنید.

۲.بخش هایی را با توجه به اتم های طراحی ایجاد کنید:

• رنگ ها و فونت ها: عناصر مربوط به رنگ ها، فونت ها و سبک ها.
• Layout و Grid: اجزایی که ساختار و توزیع عناصر را در صفحه تعریف می کنند.
• عناصر تعاملی: دکمه‌ها، پیوندها، لیست‌های کشویی و سایر جنبه‌های دارای قابلیت تعامل.

۳.بر اساس عملکرد تقسیم کنید

• ناوبری: عناصر مربوط به پیمایش در سایت یا برنامه.
• فرم ها و عناصر ورودی: دکمه ها، جعبه های متن، چک باکس ها و سایر عناصر مورد استفاده در فرم ها.
• عناصر رسانه: تصاویر، فیلم ها، گالری ها و سایر اجزای چند رسانه ای.
• نشانگرها و اعلان ها: نوارهای پیشرفت، پیام های خطا، اعلان ها و غیره.
• ساختار صفحه: سرصفحه ها، پاورقی ها، ستون های کناری و سایر عناصر ساختاری.

برای نوع هیجان انگیز دسته بندی و نامگذاری بر اساس عملکرد، به قراردادهای نامگذاری سیستم طراحی خود مراجعه کنید.

۴.دسته بندی ها را بر اساس نوع محتوا ایجاد کنید.

• محتوای متنی: سرفصل ها، پاراگراف ها، نقل قول ها و غیره.
• محتوای چند رسانه ای: تصاویر، فیلم ها، نمادها و غیره
• لیست ها: لیست های شماره گذاری شده، لیست های گلوله ای و سایر موارد لیست.
• جداول: عناصر جدولی و طراحی میز.
• فرم ها: عناصر ورودی، دکمه ها، لیست های کشویی و غیره.

۵.بر اساس سطح پیچیدگی تقسیم کنید

• عناصر ضروری: اجزای ساده مانند دکمه ها و فیلدهای متنی.
• عناصر مرکب: عناصر شامل جنبه های ضروری مانند کارت ها و پانل ها هستند.
• Pages: طرح‌بندی صفحه تمام‌شده که شامل اجزا و عناصر مختلف است.

۶.طبقه بندی را بر اساس زمینه استفاده اجرا کنید:

• صفحه اصلی: عناصر مخصوص صفحه اصلی.
• نمایه شخصی: عناصر مورد استفاده در پروفایل کاربران.
• محصولات و کاتالوگ: عناصر مربوط به نمایش محصولات و کاتالوگ ها.
• وبلاگ: اجزایی که برای نمایش مقالات و سایر مطالب استفاده می شوند.

انتخاب یک رویکرد خاص به نیازهای پروژه شما بستگی دارد. علاوه بر این، همیشه می توانید چندین رویکرد را ترکیب کنید.

منابع و ابزارهایی که در تمام مراحل ایجاد قراردادهای نامگذاری مفید خواهند بود

دستورالعمل‌های رابط کاربری - راهنمای کاملی برای استانداردسازی طراحی/کد اجزای رابط کاربری بر اساس ۳۹ مورد از محبوب‌ترین سیستم‌های مرجع.

چک لیست قراردادهای نامگذاری فایل.

گالری کامپوننت - مخزنی از اجزای رابط کاربری برای هر کسی که رابط کاربری را بر اساس نمونه هایی از بهترین سیستم های طراحی می سازد.

Building Blocks of UI - فهرستی از عناصر UI بر اساس اصل مسئولیت واحد.

کاربرگ کنوانسیون نام‌گذاری فایل توسط Briney، Kristin A. شامل انتخاب ابرداده، رمزگذاری و سازماندهی فراداده، افزودن اطلاعات نسخه و قالب‌بندی مناسب نام فایل‌ها است.

مجموعه ای از سیستم های طراحی برای Figma

منبع: uxplanet.org