Type System | سیستم تایپ

سیستم تایپ چارچوب ساختاریافته‌ای است که اندازه، وزن، نقش و فاصلهٔ نوشتار را در محصول و سیستم طراحی تعریف می‌کند تا متن در همهٔ صفحه‌ها یکدست، قابل پیش‌بینی و خوانا بماند. اینجا حرف از «کدام خانوادهٔ حروف را دوست داریم» alone نیست؛ حرف از نقش‌هایی مثل عنوان صفحه، عنوان بخش، متن بدنه، کپشن، برچسب دکمه و متن راهنماست که هر کدام اندازه، وزن، ارتفاع خط و گاهی رنگ مشخص دارند. وقتی تیم سیستم تایپ نداشته باشد، هر صفحه یک سلیقه می‌شود: جایی عنوان بیست‌وهشت پیکسل است، جایی سی‌ودو، جایی وزن Bold برای همه چیز، و کاربر نمی‌فهمد چه چیزی اولویت دارد. سیستم تایپ همان لایهٔ مقیاس و قرارداد است که typeface انتخاب‌شده را به نقش‌های قابل استفاده در محصول تبدیل می‌کند.

چرا محصول بدون مقیاس تایپ شلخته به نظر می‌رسد

در اپ‌های چندتیمی، طراح A برای کارت محصول از اندازهٔ شانزده استفاده می‌کند و طراح B برای همان نقش از پانزده. مهندس هم هرکدام را همان‌طور پیاده می‌کند. نتیجه صفحه‌ای است که از دور «تقریباً مرتب» است اما چشم مدام گیر می‌کند: دو عنوان هم‌سطح اندازهٔ متفاوت دارند، متن کمکی گاهی از بدنه درشت‌تر است، و فاصلهٔ خطوط در فرم با فاصلهٔ خطوط در مقاله یکی نیست. سیستم تایپ این هرج‌ومرج را با فهرست نقش‌ها و مقادیر قفل‌شده کم می‌کند. محصول‌منجر در نقد طراحی می‌تواند بپرسد «این متن نقشش چیست؟» نه فقط «فونتش قشنگ است؟»؛ اگر نقش روشن نباشد، اندازه هم دفاع‌پذیر نیست.

مثال ملموس: داشبورد مالی را تصور کنید. عدد موجودی باید نقش display یا hero-number داشته باشد؛ برچسب «موجودی قابل برداشت» نقش caption یا overline؛ توضیح تراکنش نقش body؛ و هشدار سقف برداشت نقش alert-text با وزن و رنگ جدا. بدون این نقش‌ها، همه چیز با یک سایز پیش‌فرض ریخته می‌شود و سلسله‌مراتب فقط با رنگ یا آیکون جبران می‌شود—که برای دسترس‌پذیری و اسکَن ضعیف است.

اجزای سیستم: نقش، مقیاس، وزن، فاصله

نقش یا role ستون فقرات سیستم است: display، h1 تا h6 یا معادل توکنی مثل title-lg، title-md، body-md، label-sm. مقیاس یعنی پله‌های اندازه—اغلب روی نسبت ثابت مثل یک‌و‌دویست‌وپنج یا مقیاس ماژولار—تا پرش‌ها هماهنگ بمانند. وزن‌ها معمولاً محدود می‌شوند: Regular و Medium برای متن، Semibold یا Bold برای تأکید؛ باز کردن ده وزن بدون قرارداد، تنوع کاذب می‌سازد. ارتفاع خط و فاصلهٔ پاراگراف بخشی از سیستم‌اند نه جزئیات CSS تصادفی؛ body با ارتفاع خط تنگ در مقاله‌های بلند خستگی می‌آورد و عنوان با ارتفاع خط گشاد حس شناور بودن می‌دهد.

بعضی سیستم‌ها tracking یا letter-spacing را برای کپشن‌های حروف‌بزرگ و برچسب‌های ناوبری تعریف می‌کنند. بعضی برای اعداد جدولی، خانوادهٔ tabular یا ویژگی‌های OpenType جدا می‌گذارند. مهم این است که این تصمیم‌ها در توکن مستند شوند تا هر صفحه دوباره اختراع نشود. سیستم تایپ خوب مثل پالت رنگ، «مجموعهٔ مجاز» می‌سازد؛ خارج از مجموعه فقط با دلیل محصولی مجاز است.

تفاوت با راهنمای فونت و با خود typeface

راهنمای برند ممکن است بگوید «از خانوادهٔ X استفاده کنید». typeface همان طراحی حروف است. سیستم تایپ می‌گوید آن حروف کجا، با چه اندازه و برای چه نقش UI به کار بروند. می‌توانید typeface عالی داشته باشید و هنوز سیستم ضعیف: همه جا Bold شانزده پیکسل، بدون تمایز عنوان و بدنه. برعکس، سیستم قوی با typeface متوسط هنوز خوانایی و اسکَن بهتری می‌دهد تا پراکندگی سایز با فونت لوکس. این سه لایه را قاطی نکنید: چهرهٔ حروف، مقیاس نقش‌ها در محصول، و هنر چیدمان صفحه که متعلق به تایپوگرافی است.

در سیستم طراحی، سیستم تایپ معمولاً کنار color tokens و spacing scale می‌نشیند. توکن‌هایی مثل font-size.200 یا text.body.default به کد و به Figma وصل می‌شوند. اگر فقط در اسلاید «قوانین تایپ» بنویسید و در فایل طراحی یا کد توکن نباشد، سیستم روی کاغذ می‌ماند و در عمل می‌میرد.

سلسله‌مراتب اسکن‌پذیر در رابط واقعی

هدف سیستم این نیست که صفحه زیبا به نظر برسد؛ هدف این است که چشم در سه ثانیه بفهمد عنوان چیست، اقدام کجاست، و جزئیات کجا شروع می‌شود. برای لیست تنظیمات، عنوان بخش باید از برچسب ردیف متمایز باشد و توضیح کمکی یک پله پایین‌تر. برای صفحهٔ جزئیات دوره، نام دوره نقش عنوان اصلی را دارد، متادیتای مدرس و مدت نقش secondary، و سیلابس body. اگر همهٔ این‌ها نزدیک به هم باشند، کاربر مجبور است همه را بخواند؛ سیستم خوب اسکن را ممکن می‌کند.

در موبایل محدودیت عرض، مقیاس را فشرده می‌کند. سیستم بالغ برای breakpointها واکنش نشان می‌دهد: display بزرگ دسکتاپ روی موبایل ممکن است به title-lg سقوط کند بدون اینکه نقش معنایی عوض شود. این رفتار باید در توکن یا در قوانین تایپ ریسپانسیو نوشته شود، نه اینکه هر طراح در هر فریم دستی کم کند.

دسترس‌پذیری به‌عنوان قرارداد سیستم، نه پیوست آخر

حداقل اندازهٔ متن بدنه، کنتراست نقش‌های متنی روی سطوح رنگی، و اجتناب از متن خیلی فشرده برای نقش‌های طولانی، باید داخل تعریف سیستم باشد. اگر body زیر اندازهٔ قابل قبول برود فقط برای «جا شدن در کارت»، سیستم نقض شده است—نه اینکه «استثنای زیبا» باشد. نقش‌های تعاملی مثل لینک و دکمه باید علاوه بر رنگ، وزن یا زیرخط یا نشانهٔ دیگری داشته باشند تا معنی فقط روی فام سوار نباشد.

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

از Figma تا کد: مالکیت و انحراف

در عمل، انحراف وقتی شروع می‌شود که طراح «فقط برای این صفحه» سایز سفارشی می‌گذارد و مهندس همان را hardcode می‌کند. جلسهٔ همگام‌سازی ماهانهٔ توکن‌های تایپ بین design system و فرانت، ارزان‌تر از بازسازی یک‌بارهٔ صد صفحه است. نام‌گذاری نقش‌ها باید بین ابزار طراحی و کد یکی باشد؛ اگر در Figma بگویید Heading/Large و در کد text-xl، ترجمهٔ ذهنی خطا می‌زاید.

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

تکامل سیستم با رشد محصول

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

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

آنتی‌پترن‌های رایج در تیم‌های محصول

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

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

پیوند سیستم تایپ با بقیهٔ سیستم طراحی

فاصلهٔ عمودی بین عنوان و بدنه باید با spacing scale هم‌خوان باشد؛ وگرنه تایپ منظم و فاصلهٔ نامنظم حس شکستگی می‌دهد. ارتفاع اجزای دکمه و فیلد باید با اندازهٔ متن داخلشان هماهنگ شود تا متن نگوید «جا نمی‌شوم». در تم تاریک، گاهی وزن کمی سنگین‌تر یا رنگ متن متفاوت برای نقش‌های مشابه لازم است؛ این هم بخشی از تعریف سیستم است نه وصلهٔ شب انتشار.

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

جمع‌بندی عملی برای محصول و طراحی

سیستم تایپ قرارداد مقیاس و نقش نوشتار در محصول است: چه متنی عنوان است، چه متنی بدنه، با چه اندازه و وزن و فاصله. آن را با typeface—یعنی خود طراحی حروف—و با تایپوگرافی—یعنی مهارت چیدن متن در صفحه—عوضی نگیرید. بدون سیستم، brand font لوکس هم در رابط شلخته دیده می‌شود؛ با سیستم، حتی انتخاب محافظه‌کارانه خوانا، یکدست و قابل نگهداری می‌ماند. برای شروع، نقش‌های حیاتی را روی پنج صفحهٔ پربازدید قفل کنید، به توکن وصل کنید، و هر سایز سفارشی جدید را به مسیر بازبینی بفرستید. همان انضباط کوچک، در چند ماه تفاوت تجربه و سرعت تحویل را نشان می‌دهد.

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