هنگام ایجاد یک سیستم طراحی، شما می خواهید همه چیز را اصلی و متفاوت کنید – به عنوان مثال، بهترین نام ها را برای سبک های رنگی یا فایل ها انتخاب کنید. در نتیجه، معمولاً برای مقیاسبندی سیستم طراحی شما برای تنظیم سیستمهای فعلی و آینده، کار بیشتری لازم است.
برای جلوگیری از این امر، ارزش معرفی یک قرارداد نامگذاری را دارد. او به ایجاد همکاری موثر بین طراحان و توسعه دهندگان کمک می کند و اجرای و درک همه پروژه ها را آسان تر می کند.
اصول
نامگذاری قراردادها اصول و اهداف یک پروژه را تعریف می کنند.
چندین اصل از نامگذاری قراردادها برای یک سیستم طراحی قابل تشخیص است:
۱-وضوح و آشکار بودن.
نامها باید واضح و بدون ابهام باشند، بنابراین هر عضو تیم میتواند به راحتی معنای آنها را بفهمد: مخففهای خالی و اختصارات مبهم.
۲-قوام و سازماندهی.
نام ها باید از یک توالی مجموعه پیروی کنند. منظور او هم یکنواختی در استفاده از یک نام برای یک شی و هم سازگاری در نحوه ایجاد هر نام مرکب است. توالی اسامی و صفات باید از قبل تعریف و توافق شود. او پیدا کردن و استفاده از اشیا و فایلها را آسانتر میکند.
۳-وضوح و خود گواهی.
هر نام باید عملکرد یا هدف عنصر را نشان دهد. اسامی توصیفی را ببینید
۴-پیشوندها و پسوندها.
برای تمایز بین عناصر انواع مختلف می توانید پیشوندها یا پسوندها را معرفی کنید. به عنوان مثال، شما می توانید از “btn” برای دکمه ها، “lbl” برای برچسب ها و غیره استفاده کنید.
۵-استفاده از CamelCase یا kebab-case.
سبک املایی را برای استفاده در همه نام ها انتخاب کنید. به عنوان مثال، camelCase (کلمه اول با یک حرف کوچک، بعد از کلمات با حروف بزرگ) یا kebab-case (کلمات جدا شده با خط فاصله).
۶-منحصر به فرد بودن.
برای جلوگیری از تداخل استفاده از تکرار نام ها خودداری کنید.
۷-کنترل نسخه.
از کنترل نسخه برای تعیین آخرین نسخه یک فایل استفاده کنید. با افزودن اطلاعات به انتهای نام می توانید نسخه ها را پیگیری کنید. t برای استفاده از شماره و تاریخ نسخه راحت تر است.
۸-اسناد و مدارک.
اسنادی را که نامگذاری قراردادها را توصیف می کند، نگه دارید تا همکاران جدید یا یک تیم توسعه دهنده جدید بتوانند به سرعت با پروژه آشنا شوند و درگیر شوند.
دسته بندی عناصر و قالب های رابط کاربری
طبقهبندی عناصر و قالبهای رابط کاربری (UI) یک گام اساسی در سازماندهی و سیستمبندی سیستم طراحی و همچنین برای نامگذاری قراردادها است.
در اینجا مثالی از نحوه سازماندهی قراردادهای نامگذاری عناصر و الگوهای رابط کاربری با استفاده از دسته بندی عمومی آورده شده است:
۱-عناصر اساسی:
- دکمه ها: btn-primary، btn-secondary، btn-submit و غیره.
- فیلدهای متنی: ورودی-متن، ناحیه متنی و غیره
- نمادها: نماد قلب، نماد جستجو و غیره.
- سرفصل ها: heading-h1، heading-h2 و غیره.
۲-ظروف و نشانه گذاری:
- بلوک های محتوا: بلوک محتوا، بلوک متن و غیره.
- 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
