Auto Layout | اتو لی‌اوت

اتو لی‌اوت چیست و چرا به وجود آمد

اتو لی‌اوت (Auto Layout) در ابزارهایی مثل Figma و Sketch مجموعه‌ای از قواعد است که می‌گوید عناصر داخل یک قاب وقتی محتوا یا اندازه عوض می‌شود چگونه رفتار کنند. فاصله، جهت چیدمان، تراز، و رشد یا جمع‌شدن اجزاء از پیش تعریف می‌شود تا طراح مجبور نباشد هر تغییر متن را دستی جابه‌جا کند. نتیجه، رابطی منعطف‌تر و نزدیک‌تر به رفتار واقعی چیدمان در کد است.

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

قواعد، قیدها و سلسله‌مراتب قاب‌ها

جهت افقی یا عمودی، فاصله بین آیتم‌ها (gap)، پدینگ داخلی، و نحوه توزیع فضا هسته کارند. سپس نوبت رفتار هر فرزند است: ثابت بماند، پر کند، یا با محتوا قد بکشد. تودرتویی قاب‌ها قدرت واقعی است؛ یک کارت می‌تواند ردیف تصویر، ستون متن و ردیف اقدام داشته باشد که هرکدام قواعد خود را دارند.

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

پاسخ‌گویی، زبان و اندازه صفحه

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

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

هم‌ترازی با رفتار توسعه

توسعه‌دهندگان با فلکس و گرید فکر می‌کنند. اتو لی‌اوت وقتی درست استفاده شود، مشخصات را به همان مدل نزدیک می‌کند و سوءتفاهم handoff را کم می‌سازد. فاصله‌های مبهم «حدوداً ۱۶» جای خود را به نظام فاصله مشخص می‌دهد و پیاده‌سازی قابل‌پیش‌بینی‌تر می‌شود.

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

دسترس‌پذیری ساختاری از مسیر چیدمان

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

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

اشتباهات رایجی که فایل را شکننده می‌کند

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

رفع این‌ها با قرارداد تیمی ممکن است: نام‌گذاری قاب‌ها، محدودیت عمق تودرتو در نقد فایل، و چک‌لیست «متن بلند/کوتاه/خالی» قبل از تحویل. ابزار کمک می‌کند؛ نظم تیم تضمین می‌کند.

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

گردش کار پیشنهادی در فیگما

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

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

نتیجه برای مقیاس محصول

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

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

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