بهترین روش ها برای نام گذاری توکن های طراحی، مؤلفه ها، متغیرها و موارد دیگر — مجله Smashing

نامگذاری سخت است. به عنوان طراح و توسعه دهنده، ما اغلب برای یافتن نام مناسب - برای توکن طراحی، رنگ ها، مؤلفه های UI، کلاس های HTML و متغیرها مشکل داریم. گاهی اوقات، نام هایی که انتخاب می کنیم، هستند خیلی عمومی، بنابراین درک منظور دقیقاً دشوار است. و گاهی هم هستند خیلی خاص، فضای کمی برای انعطاف پذیری و استفاده مجدد باقی می گذارد.

در این پست می خواهیم به ته این موضوع برسی و کشف کنید که چگونه می توانیم نامگذاری را ساده تر کنیم. چگونه نام های مناسب را انتخاب کنیم؟ و کدام قراردادهای نامگذاری بهتر عمل می کنند؟ بیایید نگاه دقیق تری بیندازیم.

الهام برای نامگذاری

اگر به دنبال الهام بخشی برای نام گذاری کلاس های HTML، ویژگی های CSS یا توابع جاوا اسکریپت هستید، Classnames یک منبع فوق العاده مملو از ایده هایی است که به شما کمک می کند. فکر کردن خارج از چارچوب.

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

قراردادهای نامگذاری

چه چیزی باعث یک نام خوب می شود؟ خاویر کوئلو مجموعه ای از بهترین روش های نام گذاری را خلاصه کرد که به شما کمک می کند نام خود را نام ببرید لایه ها، گروه ها و اجزاء به روشی سازگار و مقیاس پذیر.

همانطور که خاویر اشاره می کند، یک نام خوب ساختاری منطقی دارد، کوتاه، معنادار و برای همه شناخته شده است و به ویژگی های بصری مربوط نمی شود. او به اشتراک می گذارد باید ها و نباید ها برای نشان دادن چگونگی دستیابی به آن و همچنین نگاهی دقیق تر به تمام جزئیات کوچک ظریفی که باید در هنگام نامگذاری اندازه ها، رنگ ها، گروه ها، لایه ها و اجزاء در نظر بگیرید.

کتاب بازی نامگذاری نشانه های طراحی

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

کتاب بازی همچنین دارای یک نامگذاری زمین بازی که در آن می توانید به سادگی با کشیدن و رها کردن با نام ها بازی کنید. برای نمونه های بصری بیشتر، حتماً الگوی Figma را نیز بررسی کنید. این شامل اجزایی برای همه دسته ها است که به شما امکان می دهد ساختارهای نامگذاری مختلف را آزمایش کنید.

تاکسونومی نشانه طراحی انعطاف پذیر

چگونه یک طبقه بندی نشانه طراحی انعطاف پذیر بسازیم که در محصولات مختلف کار کند؟ این چالشی بود که تیم Intuit با آن روبرو شد. شرکت مادر محصولاتی مانند Mailchimp، Quickbooks، TurboTax و Mint یک سیستم توکن انعطاف پذیر که فراتر از موضوع برند است و به عنوان سیستم اساسی برای طیف گسترده ای از محصولات عمل می کند.

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

نام گذاری رنگ ها

هنگامی که شما در حال ایجاد یک سیستم رنگ هستید، به نام هایی برای تمام جنبه ها و کاربردهای آن نیاز دارید. نام هایی که همه اعضای تیم می توانند از آنها معنی داشته باشند. اما چگونه می توان به آن دست یافت؟ چطوری منطق را به یک موضوع ذهنی بیاورید مثل رنگ؟ Jess Satell، طراح محتوای کارکنان برای سیستم طراحی طیف Adobe، نحوه تسلط بر چالش را به اشتراک می گذارد.

همانطور که جس توضیح می دهد، نام گذاری رنگ طیف از ترکیبی از طبقه بندی کننده خانواده رنگ (به عنوان مثال، آبی یا خاکستری) همراه با یک مقیاس مقدار روشنایی افزایشی (50-900) استفاده می کند تا رنگ ها را به گونه ای نام گذاری کند که نه تنها برای همه افراد درگیر منطقی باشد، بلکه همچنین مقیاس پذیر و انعطاف پذیر همانطور که سیستم رشد می کند.

یکی دیگر از کمک های کوچک مفید در هنگام نام گذاری رنگ ها Color Parrot است. ربات توییتر قادر به نام گذاری و شناسایی رنگ ها در هر تصویر است. فقط ربات را در پاسخ ذکر کنید و با یک پالت رنگ پاسخ خواهد داد.

نام های رایج برای اجزای رابط کاربری

نگاه کردن به آنچه دیگران چیزهای مشابه می نامند یک راه عالی برای شروع زمانی است که شما هستید در حال مبارزه با نامگذاری. و چه منبعی بهتر از سایر سیستم های طراحی وجود دارد؟ قبل از اینکه وارد سوراخ خرگوش سیستم طراحی شوید، Iain Bean برای شما تحقیق کرد و گالری کامپوننت را ایجاد کرد.

گالری کامپوننت مجموعه ای از اجزای رابط از سیستم های طراحی دنیای واقعی است. آی تی شامل نمونه های فراوان برای بیش از 50 مؤلفه UI - از آکاردئون گرفته تا پنهان بصری - و همچنین نام های دیگری را که اجزای رابط کاربری با آنها انجام می دهند فهرست می کند. یک منبع فوق العاده - نه تنها در مورد نامگذاری.

نقشه تاکسونومی متغیرها

یک مثال شگفت انگیز از دستورالعمل های نامگذاری برای یک سیستم طراحی پیچیده چند برند و چند مضمونی از تیم Vodafone UK Design System ارائه شده است. نقشه تاکسونومی متغیرهای آن ها را تجزیه می کند آناتومی و دسته بندی یک نشانه طراحی به یک سیستم به خوبی سازماندهی شده از مجموعه ها.

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

اگر می خواهید روش های بیشتری برای نام گذاری نشانه های طراحی کاوش کنید، Vitaly فهرستی از کیت ها و منابع مفید Figma را گردآوری کرده است که ارزش بررسی را دارند.

طراحی موجودی نام رمز

رومینا کاوچیچ یک منبع کوچک مفید ایجاد کرد که مطمئناً جریان کار نامگذاری نشانه طراحی شما را تقویت می کند. صفحه گسترده Design Token Names Inventory نه تنها این کار را آسان می کند اطمینان از نامگذاری ثابت بلکه مستقیماً با Figma همگام می شود.

صفحه گسترده دارای ساختاری ساده با چهار سطح است که به شما یک نمای چشم پرنده از تمام نشانه های طراحی شما می دهد. شما به راحتی می توانید ردیف ها، تم ها و حالت ها را بدون از دست دادن مسیر و توکن های خود را فیلتر کنید. و در حالی که خود صفحه گسترده در حال حاضر یک راه حل عالی برای درگیر نگه داشتن همه در یک صفحه است، قدرت واقعی خود را در ترکیب با افزونه Google Spreadsheets یا افزونه Kernel به نمایش می گذارد. پس از نصب، تغییراتی که در صفحه گسترده ایجاد می کنید در Figma منعکس می شود. یک زمان واقعی!

آیا می خواهید عمیق تر شیرجه بزنید؟

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

ما بسیار خوشحال خواهیم شد که شما را به یکی از تجربیات Smashing خاص خود خوشامد بگوییم - چه آنلاین و چه حضوری!