نامگذاری توکن‌ها در دیزاین سیستم

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

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

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

هیچ استانداردی در جهان برای توکنایز کردن وجود ندارد و دیزاین سیستم های مختلف به روش های مختلفی با توجه به شرایط تیمی با آن برخورد می کنند.

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

جایگاه توکن‌ها در دیزاین سیستم

قبل از یادگیری نامگذاری اجازه دهید با جایگاه توکن‌ها در دیزاین سیستم آشنا شویم در شکل زیر شما میتوانید به راحتی این را درک کنید، کنار تمام اجزا بزرگ دیزاین سیستم، توکن ها یک جایگاه بزرگ و مهم دارند، پس میتوانیم نتیجه بگیریم توکن ها بی اهمیت نیستند!!

انواع توکن‌ها

  • توکن‌های رنگی:رنگ مورد استفاده در یک دیزاین سیستم را نشان می دهد (به عنوان مثال رنگ اصلی ، رنگ ثانویه، رنگ پس زمینه، ....)
  • تایپوگرافی: فونت‌ها، اندازه‌ها، ارتفاع خط و سایر ویژگی‌های مربوط به متن
  • توکن‌های فاصله: فاصله بین عناصر به عنوان مثال، حاشیه ها
  • توکن‌های پدینگ
  • توکن‌های border
  • توکن‌های سایه

اهمیت نامگذاری در توکن‌سازی

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

اگر بخواهیم به چند جنبه کلیدی در توکن‌ها اشاره کنیم میتوانیم به موارد زیر اشاره کنیم:

  • حفظ consistency در سرار پلتفرم ها:

توکن های طراحی تضمین می کنند که عناصر طراحی به صورت کاملا یکسان در چندین پلتفرم مانند برنامه های کاربردی وب، موبایل و دسکتاپ اعمال می شوند.

  • حفظ Scalability و Flexibility

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

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

این نامگذاری در دیزاین سیستم هایی که بزرگ هستند و چندین طراح دارند با مشکل مواجه میشد زیرا ممکن بود blue-60 در هر جایی استفاده شود صرف نظر از تست رنگ، کانسیستنسی و ...

و اما توکن ها جدی تر شدند به شکل زیر دقت کنید در واقع همان blue-60 است اما با درک بهتر!!

همانطور که در شکل بالا میبینید من توکن های رنگی دکمه را در دو حالت نشان داده‌ام، در این حالت طراحان میدانند که رنگ های پس‌زمینه در رنگ‌های مشخص تعریف شده اند و دیگر نیازی نیست به دنبال رنگ پس زمینه در سیستم باشند و حتی حالت های رنگی هم با نام های مشخص تفکیک شده اند برای مثال hover,pressو ....

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

مروری بر سیستم های طراحی محبوب

متریال

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

متریال از ساختار زیر پیروی می کند:

۱- پیشوند (Prefix): معمولا با md نمایش داده میشود و به معنای متریال است.

۲- نوع توکن (Token type) : متریال توکن ها را براساس طرز استفاده آنها دسته بندی میکند که شامل :

  • مرجع (Reference ): تمام گزینه‌های استایل مانند مقادیر هگزا رنگ، که در یک دیزاین سیستم موجود است.
  • سیستمی (System): هدفی را که یک توکن در UI انجام می دهد، از رنگ و تایپوگرافی گرفته تا ارتفاع و شکل.
  • کامپوننت (Component) : نشان دهنده عناصر و مقادیری است که یک جزء را تشکیل می دهند، مانند مانند رنگ نماد یک دکمه ، متن برچسب، نمادها

۳- دسته (Category) : هدف توکن را توصیف می کند(به عنوان مثال، پالت، تایپوگرافی، فاصله گذاری)

۴- جزییات (Specific value) : جزئیات مربوط به توکن را ارائه می دهد

مثال : `md.ref.palette.primary`

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

توکن های رنگی

متریال ابتدا رنگ ها را به دو دسته Schemes ، State Layers تقسیم میکند، سپس از نام گذاری توصیفی برای هر قسمت استفاده میکند. در Schemes رنگ های پایه هر جز را قرار داده. و State Layers حالت هایی که برای press, hover و غیره تعریف میشود را قرار داده.

توکن های متنی (Typography Tokens)

توکن های متنی در متریال برای نشان دادن نوع متن و کاربرد آن نامگذاری می‌شوند، که شامل دو دسته Typeface (وزن فونت ها) و Type scale (تمام ویژگی های یک فونت استایل) دسته بندی کرده, که Type scale متریال شامل چهار دسته Display , Headline , Title, label, body است.

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

فلوئنت

فلوئنت دیزاین از یک رویکرد ساختاریافته برای نامگذاری توکن ها استفاده می کند. این ساختار کمک می‌کند تا توکن‌ها را بر اساس دسته‌بندی، ویژگی‌ها و تغییراتشان سازمان‌دهی کنیم، شبیه به طراحی متریال است اما با برخی ویژگی‌های منحصربه‌فرد.

فلوئنت از ساختار دو مرحله ای پیروی می کند:

مرحله اول: تعریف تمام اجزا مثل رنگ، سایزو ضخامت در یک دسته به نام global

مرحله دوم : معنا دادن به توکن های global که به نام Alias نامگذاری کرده

اجازه بدهید در یک تصویر بهتر توضیح دهم.

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

قراردادهای نامگذاری توکن های فلوئنت دیزاین واضح طراحی شده است تا نقش هر توکن را منعکس کند.

بالاتر اشاره کردیم که به طور کلی دو دسته global و Aliasداریم، حالتی که برای رنگ ها استفاده کرده دسته color را به عنوان Alias استفاده کرده، و دارای ۴ دسته بندی اصلی برای رنگ ها است :

  • رنگ های پس زمینه (Background)
  • رنگ متن و نماد (Foreground)
  • رنگ های حاشیه (Strok)

این سه دسته، دسته های اصلی در نامگذاری است، اما با توجه به تصمیماتی که در تیم های خود داشته دسته هایی به نام Accessible, Disable , ... هم میبینید.

نکته ای که وجود دارد فلوینت از یک سری زیر دسته برای بک گراند و فورگراند استفاده کرده که از ۱ تا ۱۰ (یا هر عدد دیگری) دسته بندی شده، و در هر کدام از این زیر دسته ها حالت های مختلف رنگی نمایش داده شده به طور مثال (hover , press , ..)

به طور کلی فلوئنت به انعطاف‌پذیری خود در نام‌گذاری تأکید دارد. توکن ها به گونه ای طراحی شده اند که در پلتفرم های مختلف (ویندوز، وب، موبایل) قابل استفاده باشند و در عین حال زبان بصری ثابتی را حفظ کنند. این انعطاف پذیری در قراردادهای نامگذاری رعایت شده است، تا زمینه های مختلف را پوشش دهند، و به اندازه کافی خاص هستند تا از سردرگمی جلوگیری کنند.

من سعی کردم دو سیستم محبوب و متفاوت در نامگذاری را در اینجا بررسی کنم.

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

دیزاین سیستم Yoko Space

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

در ایجاد توکن از ساختار دو مرحله ای پیروی استفاده شده:

مرحله اول: تعریف تمام اجزا مثل رنگ، سایزو ضخامت در یک دسته به نام directory

مرحله دوم : معنا دادن به توکن های directory که به نامهای مختلف رنگی، اندازه و ... نامگذاری کردیم

توکن های رنگی

توکن های رنگی دارای ۴ دسته بندی است به نام neutral, brand, state, status میباشد و هر کدام از این دسته ها دارای زیر دسته هایی به نام bg, fg, border تقسیم شده اند و هر رنگی با توجه به میزان روشنایی اش در دسته های از ۱ تا ۱۰ قرار گرفته. به طور مثال من دو دسته neutral, brand را در زیر آورده ام!

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

۱. ثبات:

  • یکنواختی: ساختار نامگذاری ثابتی را در سراسر سیستم حفظ کنید.
  • پیوندها یا پسوندها: استفاده از پیشوندها یا پسوندهای ثابت را برای انواع مختلف توکن در نظر بگیرید.
  • حساسیت به حروف کوچک: در مورد بزرگ و کوچک بودن حروف تصمیم بگیرید (مانند camelCase، PascalCase) و به آن پایبند باشید.

۲. وضوح:

  • نام های توصیفی: از نام های واضح و توصیفی استفاده کنید که دقیقاً هدف توکن را منعکس کند.
  • اجتناب از ابهام: مطمئن شوید که نام توکن ها بدون نیاز به توضیح اضافی معانی واضحی دارند.

۳.مقیاس پذیری:

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

۴.همکاری:

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

۵.سازگاری ابزار:

  • ابزارهای طراحی و توسعه:از سازگاری با قراردادهای نامگذاری ابزارهای دلخواه خود اطمینان حاصل کنید.
  • ادغام: نحوه ادغام سیستم نامگذاری با سایر سیستم ها و فرآیندها را در نظر بگیرید.

۷. بهترین شیوه ها:

  • تحقیق: سیستم های طراحی موجود و قراردادهای نامگذاری آنها را تجزیه و تحلیل کنید.
  • دستورالعمل ها:دستورالعمل های نامگذاری واضحی را برای تیم ایجاد کنید تا از آنها پیروی کند.
  • بررسی و اصلاح: به طور منظم سیستم نامگذاری را در صورت نیاز بررسی و اصلاح کنید.

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


منابع: