لغات ضروری سیستم‌های طراحی (Design Systems)

• آیا تا به حال در جلسات بین‌المللی طراحی به دلیل نداشتن واژگان تخصصی برای توصیف یک کامپوننت، سکوت کرده‌اید؟
• آیا هنگام مطالعه مستندات طراحی بزرگی مثل Material Design یا Carbon، معنای دقیق اصطلاحات فنی را متوجه نمی‌شوید؟
• آیا نگران هستید که با استفاده از عبارات غیررسمی یا اشتباه، حرفه‌ای بودن خود را در مقابل تیم‌های توسعه‌دهنده زیر سوال ببرید؟
• آیا از یادگیری حجم زیادی از اصطلاحات فنی احساس اضطراب می‌کنید و نمی‌دانید از کجا شروع کنید؟

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

دسته واژگان	اصطلاح کلیدی (Term)	توضیح به زبان ساده
پایه‌ها (Foundations)	Design Tokens	متغیرهای پایه‌ای مانند رنگ، فاصله و فونت که در کل سیستم تکرار می‌شوند.
اجزا (Components)	Reusable Elements	قطعات کدنویسی شده و طراحی شده‌ای که می‌توان بارها از آن‌ها استفاده کرد.
ساختار (Architecture)	Atomic Design	روشی برای ساخت سیستم از اجزای کوچک (اتم) به اجزای بزرگتر (ارگانیسم).
نگهداری (Maintenance)	Governance	قوانین و فرآیندهای مربوط به نحوه تغییر یا اضافه کردن موارد جدید به سیستم.

چرا یادگیری لغات دیزاین سیستم برای شما حیاتی است؟

دیزاین سیستم (Design System) فقط مجموعه‌ای از المان‌های گرافیکی نیست؛ بلکه یک زبان مشترک بین طراحان، توسعه‌دهندگان و مدیران محصول است. اگر شما به عنوان یک متخصص، از واژگان استاندارد استفاده نکنید، احتمال بروز سوءتفاهم در پروژه‌ها به شدت افزایش می‌یابد. به عنوان یک استاد زبان، همیشه به دانشجویانم می‌گویم: «زبان تخصص شما، اعتبار شماست.» یادگیری لغات دیزاین سیستم نه تنها ارتباطات شما را بهبود می‌بخشد، بلکه باعث کاهش Language Anxiety یا همان اضطراب زبان در محیط‌های کاری بین‌المللی می‌شود.

واژگان پایه و فونداسیون (Design Foundations)

هر سیستم طراحی با مجموعه‌ای از قوانین پایه شروع می‌شود. این‌ها لغاتی هستند که الفبای طراحی شما را تشکیل می‌دهند.

1. Design Tokens (توکن‌های طراحی)

توکن‌ها در واقع قلب تپنده یک سیستم مدرن هستند. آن‌ها مقادیر انتزاعی (Abstract) هستند که ویژگی‌های بصری را ذخیره می‌کنند.

• Color Tokens: نام‌های استاندارد برای کدهای رنگی (مثلاً brand-primary-main ).
• Spacing Tokens: فواصل استاندارد بین المان‌ها (مثلاً space-sm یا space-xl ).
• Typography Tokens: تنظیمات مربوط به فونت، وزن و اندازه متن.

2. Typography (تایپوگرافی)

در بحث تایپوگرافی، اشتباهات رایجی بین طراحان وجود دارد. بیایید فرمول استاندارد را یاد بگیریم:

فرمول توصیف تایپوگرافی: Typeface + Weight + Size + Line Height

• Typeface: خانواده فونت (مثلاً Roboto).
• Font Weight: ضخامت فونت (Bold, Medium, Light).
• Leading: فاصله بین خطوط (در وب معمولاً به آن Line Height گفته می‌شود).
• Kerning: فاصله بین تک‌تک حروف.
• Tracking: فاصله کلی بین مجموعه‌ای از حروف در یک بلوک متنی.

اصطلاحات مربوط به اجزا و قطعات (Components)

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

انواع دکمه‌ها (Buttons)

دکمه‌ها ساده به نظر می‌رسند، اما در لغات دیزاین سیستم، نام‌های بسیار دقیقی دارند:

• CTA (Call to Action): دکمه‌ای که کاربر را به انجام کار اصلی دعوت می‌کند.
• Primary Button: دکمه اصلی در یک صفحه.
• Secondary Button: دکمه‌ای با اهمیت کمتر که در کنار دکمه اصلی قرار می‌گیرد.
• Ghost/Outlined Button: دکمه‌ای که فقط دورخط دارد و داخل آن خالی است.
• Disabled State: حالتی که دکمه غیرفعال است و قابل کلیک نیست.

المان‌های ناوبری و ورودی (Navigation & Inputs)

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

اصطلاح (Term)	کاربرد (Usage)	مثال صحیح (✅)
Checkbox	انتخاب چند گزینه از یک لیست	انتخاب علایق شخصی
Radio Button	انتخاب فقط یک گزینه از لیست	انتخاب جنسیت
Toggle Switch	تغییر وضعیت بین روشن و خاموش	فعال کردن حالت تاریک (Dark Mode)
Breadcrumbs	نمایش مسیر کاربر در صفحات	Home > Shop > Electronics

متدولوژی طراحی اتمی (Atomic Design Methodology)

برد استراتژی محتوای ما معتقد است که یادگیری ساختارمند، بهترین راه برای کاهش فشار ذهنی است. مفهوم طراحی اتمی که توسط برد فراست (Brad Frost) معرفی شد، یکی از کلیدی‌ترین بخش‌های لغات دیزاین سیستم است.

• Atoms (اتم‌ها): کوچک‌ترین واحدها مانند یک دکمه، یک لیبل یا یک فیلد متنی.
• Molecules (مولکول‌ها): ترکیب چند اتم با هم. مثلاً یک فیلد جستجو (شامل دکمه، اینپوت و لیبل).
• Organisms (ارگانیسم‌ها): گروه‌هایی از مولکول‌ها که یک بخش کامل را می‌سازند، مثل Header سایت.
• Templates (قالب‌ها): ساختار کلی صفحه بدون محتوای واقعی.
• Pages (صفحات): مرحله نهایی که محتوای واقعی در قالب‌ها قرار می‌گیرد.

تفاوت‌های لهجه‌ای و ساختاری (US vs. UK)

در دنیای طراحی، تفاوت‌های املایی بین انگلیسی آمریکایی (US) و بریتانیایی (UK) زیاد به چشم می‌خورد. اگرچه هر دو صحیح هستند، اما ثبات (Consistency) در یک دیزاین سیستم حرف اول را می‌زند.

• Color (US) vs. Colour (UK): اکثر سیستم‌های طراحی مدرن از دیکته آمریکایی (Color) استفاده می‌کنند.
• Gray (US) vs. Grey (UK): در نام‌گذاری پالت‌های رنگی خنثی، این تفاوت بسیار رایج است.
• Center (US) vs. Centre (UK): در تنظیمات چیدمان (Alignment).

نکته حرفه‌ای: همیشه در ابتدای پروژه مشخص کنید که از کدام استاندارد استفاده می‌کنید تا در نام‌گذاری متغیرها (Naming Conventions) دچار تداخل نشوید.

چگونه با اضطراب یادگیری این لغات مقابله کنیم؟

به عنوان یک روان‌شناس آموزشی، توصیه می‌کنم که سعی نکنید تمام این لغات را در یک روز حفظ کنید. یادگیری زبان تخصصی یک فرآیند “پله‌پله” یا Scaffolding است. ابتدا با نام اجزای ساده شروع کنید، سپس سراغ مفاهیم انتزاعی‌تر مانند Scalability (مقیاس‌پذیری) یا Maintainability (قابلیت نگهداری) بروید. به یاد داشته باشید که حتی طراحان بومی (Native) هم گاهی بر سر معنای دقیق یک اصطلاح بحث می‌کنند.

اشتباهات رایج در استفاده از لغات دیزاین سیستم (Common Myths & Mistakes)

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

• اشتباه: استفاده از Style Guide به جای Design System.
  
  اصلاح: استایل گاید فقط شامل راهنمای بصری است، در حالی که دیزاین سیستم شامل کدهای برنامه‌نویسی و مستندات رفتاری نیز می‌شود.
• اشتباه: گفتن “Clickable Area” به جای اصطلاح تخصصی Hit Target یا Touch Target.
• اشتباه: استفاده از کلمه “Darkness” برای سایه‌ها.
  
  اصلاح: از واژه تخصصی Elevation یا Drop Shadow استفاده کنید.

سوالات متداول (FAQ)

1. آیا باید برای همه رنگ‌ها توکن بسازیم؟

بله، در یک دیزاین سیستم استاندارد، هیچ رنگی نباید به صورت کد Hex مستقیم استفاده شود. همه چیز باید دارای یک نام یا اصطلاحاً Semantic Token باشد.

2. تفاوت بین UI Kit و Design System چیست؟

یک UI Kit مجموعه‌ای از فایل‌های گرافیکی (مثلاً در Figma) است. اما Design System فراتر از آن است و شامل کدهای واقعی، مستندات استفاده (Usage Guidelines) و استانداردهای تیمی است.

3. “Handoff” به چه معناست؟

فرآیند انتقال طراحی از طراح به توسعه‌دهنده را دیزاین هندآف (Design Handoff) می‌گویند که یکی از مهم‌ترین مراحل در چرخه حیات محصول است.

نتیجه‌گیری

تسلط بر لغات دیزاین سیستم کلید ورود شما به بازارهای جهانی و پروژه‌های سطح بالاست. به یاد داشته باشید که هدف از این واژگان، پیچیده کردن کار نیست، بلکه ایجاد وضوح (Clarity) و سرعت بخشیدن به فرآیند تولید محصول است. از اشتباه کردن نترسید؛ هر بار که از یک واژه درست مانند Accessibility به جای کلمات ساده استفاده می‌کنید، یک قدم به حرفه‌ای‌تر شدن نزدیک می‌شوید.

پیشنهاد می‌کنم همین امروز یکی از مستندات طراحی معروف مثل Atlassian Design System را باز کنید و سعی کنید لغاتی که در این مقاله یاد گرفتید را در آن پیدا کنید. یادگیری مداوم و تمرین، تنها راه تسلط است. شما از پس آن برمی‌آیید!