Padding | پدینگ
پدینگ فاصلهٔ درونی میان لبهٔ یک عنصر و محتوای داخل آن است؛ همان فضای تنفسی که متن، آیکون یا تصویر را از مرز جعبه جدا می‌کند تا فشرده و ناخوانا به نظر نرسند. در مدل جعبه‌ای وب، پدینگ بخشی از خود عنصر است و پس‌زمینه و گوشه‌های گرد معمولاً آن را پوشش می‌دهند، برخلاف حاشیهٔ بیرونی که عنصر را از همسایه‌ها دور می‌کند. برای طراح رابط، پدینگ ابزار کنترل چگالی، لمس‌پذیری و سلسله‌مراتب بصری است؛ نه تزئین تصادفی و نه مترادف «صفحه» یا «صفحه‌بندی». تصمیم پدینگ روی دکمه، کارت، فیلد و بلوک متن مستقیماً روی احساس راحتی، دقت کلیک و سرعت اسکن اثر می‌گذارد.
فاصلهٔ درونی در برابر حاشیهٔ بیرونی
تمایز پدینگ و حاشیه پایهٔ گفتگوی طراحی و مهندسی است. پدینگ فضای داخل مرز را باز می‌کند تا محتوا نفس بکشد؛ حاشیه فضای بیرون را تنظیم می‌کند تا عناصر روی شبکه از هم جدا شوند. اگر تیم به‌جای حاشیه فقط پدینگ را زیاد کند، جعبه بزرگ‌تر می‌شود اما فاصلهٔ بین جعبه‌ها لزوماً درست نمی‌شود و هم‌ترازی ستون‌ها به هم می‌ریزد. برعکس، حاشیهٔ زیاد بدون پدینگ کافی، کارت‌هایی می‌سازد که متن به لبه چسبیده و حس عجله یا فقر طراحی می‌دهد.
در مشخصات سیستم طراحی باید هر دو نقش جدا نوشته شوند: توکن‌های فاصلهٔ درونی برای کنترل‌ها و سطوح، و توکن‌های فاصلهٔ بیرونی برای چیدمان. وقتی یک طراح می‌گوید «اینجا فاصله بیشتر می‌خواهد»، باید روشن کند فاصله از لبهٔ محتواست یا فاصله میان دو بلوک. همین دقت کوچک از بازکاری CSS و بحث بی‌پایان در بازبینی جلوگیری می‌کند و معیار پذیرش را قابل اندازه‌گیری می‌کند.
چهار جهت، shorthand و تقارن دیداری
پدینگ می‌تواند برای بالا، راست، پایین و چپ مقادیر متفاوت داشته باشد. در رابط‌های متراکم گاهی پدینگ افقی بیشتر از عمودی است تا هدف لمسی پهن بماند بدون اینکه ارتفاع ردیف‌ها بیش از حد رشد کند. در تایپوگرافی بلوکی، پدینگ عمودی هماهنگ با ارتفاع خط و فاصلهٔ پاراگراف انتخاب می‌شود تا ریتم خواندن نشکند. shorthandهایی که چهار مقدار را فشرده می‌نویسند سرعت پیاده‌سازی را بالا می‌برند، اما بدون قرارداد نام‌گذاری، مقادیر جادویی در کد پخش می‌شوند.
تقارن دیداری همیشه به معنای چهار طرف برابر نیست. در دکمه‌ای با آیکون در یک سمت، پدینگ سمت آیکون ممکن است کمتر یا بیشتر تنظیم شود تا مرکز بصری متن حفظ شود. در زبان راست‌به‌چپ، جهت‌های منطقی شروع و پایان مهم‌تر از چپ و راست خام‌اند؛ وگرنه همان مقدار که در نسخهٔ لاتین متعادل بود در فارسی کج به نظر می‌رسد. آزمون آینه‌ای قالب باید بخشی از تعریف انجام‌شده برای کامپوننت‌های کلیدی باشد.
تنفس بصری، هدف لمسی و خوانایی
پدینگ ناکافی متن را به قاب می‌چسباند و خطای لمس را زیاد می‌کند، به‌ویژه روی موبایل که انگشت دقیق نیست. هدف‌های تعاملی کوچک اگر فقط با بزرگ کردن فونت «درشت» شوند اما پدینگ نداشته باشند، همچنان سخت لمس می‌شوند. استانداردهای دسترس‌پذیری اندازهٔ حداقل هدف را مطرح می‌کنند؛ پدینگ یکی از راه‌های رسیدن به آن اندازه بدون درشت‌نمایی اغراق‌آمیز متن است. در فهرست‌ها، پدینگ ردیف فاصلهٔ امن میان آیتم‌ها می‌سازد تا انتخاب اشتباه کم شود.
خوانایی نیز به پدینگ وابسته است. بلوک نقل‌قول، هشدار، یا کارت توضیحی بدون فضای درونی کافی شلوغ و پرخاشگر دیده می‌شود. از سوی دیگر پدینگ افراطی در صفحات داده، چگالی اطلاعات را می‌کشد و کاربر حرفه‌ای مجبور به اسکرول بی‌مورد می‌شود. هنر طراحی چگالی، انتخاب پدینگ متناسب با زمینه است: ابزارهای تحلیلی فشرده‌تر، صفحات بازاریابی بازتر، و فرم‌های حساس متعادل با تمرکز بر فیلدها.
توکن فاصله در سیستم طراحی
تیم‌های بالغ پدینگ را به‌صورت مقیاس فاصله تعریف می‌کنند: گام‌های چهار یا هشت واحدی که در همهٔ کامپوننت‌ها تکرار می‌شود. این کار هماهنگی بصری می‌آورد و از تصمیم موردی «اینجا سیزده پیکسل» جلوگیری می‌کند. توکن‌هایی مثل فاصلهٔ فشرده، پیش‌فرض و باز، به محصول‌منجر و طراح زبان مشترک می‌دهند تا بدون بحث پیکسلی دربارهٔ حس صفحه حرف بزنند. اتصال توکن به متغیرهای استایل، تغییر تم و حالت فشرده را کم‌هزینه می‌کند.
مستندسازی باید مثال بصری کنار عدد داشته باشد: دکمهٔ کوچک، متوسط، بزرگ با پدینگ مشخص؛ کارت محتوا با پدینگ داخلی استاندارد؛ فیلد فرم با فضای اطراف برچسب و پیام خطا. بدون این نمونه‌ها، توکن روی کاغذ می‌ماند و هر اسکراد دوباره اختراع می‌کند. بازبینی طراحی روی حالت‌های واقعی—متن بلند فارسی، آیکون تنها، و خطا—نشان می‌دهد آیا پدینگ فقط برای متن نمونهٔ کوتاه تنظیم شده یا پایدار است.
پدینگ در دکمه، کارت، فیلد و ناوبری
در دکمه، پدینگ افقی و عمودی نسبت به اندازهٔ متن و شعاع گوشه، شخصیت کنترل را می‌سازد: فشرده و ابزاری، یا باز و دعوت‌کننده. دکمه‌های هم‌ردیف باید پدینگ یکسان داشته باشند وگرنه ارتفاع ناهماهنگ حس بی‌نظمی می‌دهد. در کارت، پدینگ داخلی باید تصویر، عنوان و اقدام را در یک ریتم نگه دارد؛ اگر تصویر لب‌به‌لب است و متن پدینگ دارد، مرز میان رسانه و محتوا باید آگاهانه باشد نه تصادفی.
فیلد ورودی به پدینگ حساس است چون مکان‌نما و متن باید از لبه فاصلهٔ راحت داشته باشند و همزمان ارتفاع با سایر کنترل‌ها هم‌تراز بماند. ناوبری افقی با پدینگ آیتم‌ها هدف لمسی و جداسازی برچسب‌ها را تأمین می‌کند؛ کمبود آن منوی شلوغ می‌سازد، زیاده‌روی آن تعداد آیتم دیدنی را کم می‌کند. هر کامپوننت باید جدول حالات پدینگ خود را در کتابخانه داشته باشد تا پیاده‌سازی حدس نزند.
چگالی، حالت فشرده و زمینهٔ سازمانی
محصولات سازمانی گاهی حالت فشرده می‌خواهند تا دادهٔ بیشتری بالای خط دید باشد. پدینگ قابل تنظیم—نه حذف کامل فاصله—راه درست است. حذف پدینگ برای «صرفه‌جویی» خوانایی و دسترس‌پذیری را قربانی می‌کند. بهتر است مقیاس فشرده از همان توکن‌ها مشتق شود تا نسبت‌ها حفظ شوند. کاربر باید بتواند چگالی را بفهمد و در تنظیمات عوض کند، نه اینکه یک نسخهٔ واحد برای همهٔ نقش‌ها تحمیل شود.
در مقابل، محصول مصرفی و آموزشی اغلب از پدینگ سخاوتمند برای آرامش بصری سود می‌برد. اینجا خطر وارونه است: فضای خالی تزئینی بدون سلسله‌مراتب، صفحه را طولانی و بی‌تمرکز می‌کند. پدینگ باید خدمت محتوا باشد: تأکید روی بلوک مهم، جدا کردن بخش‌ها، و آرام کردن نواحی پرمتن. سنجش کیفی با آزمون پنج‌ثانیه‌ای و ردیابی نگاه می‌تواند نشان دهد آیا فاصله‌ها راهنما هستند یا فقط صفحه را باد کرده‌اند.
مرز پدینگ با صفحه و صفحه‌بندی
پدینگ ویژگی هندسی داخل اجزای رابط است؛ صفحه واحد مقصد محتوا و ناوبری است؛ صفحه‌بندی الگوی شکستن فهرست‌های بلند به تکه‌های قابل پیمایش است. اشتباه گرفتن این سه باعث مشخصات مبهم می‌شود: تیکت «فاصلهٔ صفحه را درست کنید» ممکن است به حاشیهٔ لایه، پدینگ کارت، یا کنترل‌های صفحهٔ نتایج اشاره کند. در واژه‌نامهٔ تیم باید پدینگ صریحاً به فاصلهٔ درونی جعبه محدود بماند تا طراحی فاصله، معماری اطلاعات و الگوی پیمایش مجموعه از هم تفکیک شوند.
جمع‌بندی عملی این است که پدینگ را مثل تایپوگرافی جدی بگیرید: مقیاس داشته باشید، زمینه را بشناسید، روی دستگاه واقعی لمس و خواندن را بیازمایید، و از مقادیر جادویی بپرهیزید. وقتی فاصلهٔ درونی منسجم باشد، رابط آرام‌تر، دکمه‌ها قابل‌اعتمادتر، و ترجمهٔ طراحی به کد کم‌هزینه‌تر می‌شود—بدون اینکه مفهوم صفحه یا منطق صفحه‌بندی را وارد تصمیم پیکسلی جعبه کنید. همین انضباط است که سیستم طراحی را از مجموعه‌ای از ماکت‌های زیبا به زبان اجرایی پایدار تبدیل می‌کند و بحث بازبینی را از سلیقه به قرارداد قابل استناد می‌کشاند.
برای اطمینان از کیفیت، در تعریف انجام‌شدهٔ کامپوننت بنویسید: پدینگ از توکن تأییدشده آمده، در حالت متن بلند و آیکون‌دار نمی‌شکند، در RTL منطقی است، و هدف لمسی حداقل را رعایت می‌کند. اگر تغییری فقط یک صفحه را «زیباتر» می‌کند اما مقیاس سیستم را می‌شکند، بدهی بصری ساخته‌اید. پدینگ خوب دیده نمی‌شود؛ نبودش فریاد می‌زند و زیاده‌اش صفحه را خالی و کندجلوه می‌کند. با این معیار، فاصلهٔ درونی به اهرم کیفیت تجربه تبدیل می‌شود نه جزئیات فراموش‌شدهٔ پایان اسپرینت.
سوالات متداول
فاصلهٔ درونی میان لبهٔ یک عنصر رابط و محتوای داخل آن که تنفس بصری، لمس‌پذیری و خوانایی را تنظیم می‌کند.
پدینگ فضای داخل جعبه را باز می‌کند؛ حاشیه عنصر را از عناصر همسایه جدا می‌کند و روی فاصلهٔ چیدمان اثر دارد.
با افزایش ناحیهٔ امن لمس و جلوگیری از چسبیدن متن به لبه، خطای ضربه و خستگی خواندن را کم می‌کند.
مقیاس یکنواخت فاصله را جایگزین مقادیر موردی می‌کند تا کامپوننت‌ها هماهنگ بمانند و تغییر تم کم‌هزینه شود.
پدینگ هندسهٔ داخل اجزاست؛ صفحه مقصد محتواست؛ صفحه‌بندی شکستن فهرست‌های بلند به تکه‌های قابل پیمایش است.