منبع: بنیاد طراحی تعامل (IxDF) · بازنویسی آزاد: سپنتا پویا با کمک هوش مصنوعی · مهر ۱۴۰۵ · زمان مطالعه: حدود ۸ دقیقه

قاعدهٔ یک‌سوم (Rule of Thirds) چیست؟

💡 این متن «بازنویسی آزاد» است: ایده‌ها و مفاهیم مطلب اصلی با نگارش کاملاً مستقل فارسی و مثال‌های تازه بازگو شده‌اند و ترجمهٔ کلمه‌به‌کلمه نیست. بخش‌های افزودهٔ مترجم در جعبهٔ منبع مشخص شده‌اند. ترجمه و بازنویسی این متن با کمک هوش مصنوعی انجام شده است.

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

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

قاعدهٔ یک‌سوم چیست؟

قاعدهٔ یک‌سوم (Rule of Thirds) به تعریف منبع، روشی برای ترکیب‌بندی است. قاب یا صفحه با دو خط افقی و دو خط عمودی به نُه بخش برابر تقسیم می‌شود. اجزای مهم، مثل تصویر، متن یا دکمهٔ اصلی، روی این خط‌ها یا روی چهار نقطهٔ تقاطعشان گذاشته می‌شوند. هدف ساختن تعادل بصری، هدایت نگاه بیننده و جلب توجه به جای درست است.

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

در رابط کاربری

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

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

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

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

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

یک‌سوم، نسبت طلایی، یا وسط

منبع قاعدهٔ یک‌سوم را با نسبت طلایی مقایسه می‌کند. نسبت طلایی بر پایهٔ عدد حدوداً ۱٫۶۱۸ است و ترکیبی نامتقارن ولی هماهنگ می‌سازد. قاعدهٔ یک‌سوم همین ایده را به تقسیم‌های برابر ساده می‌کند. به گفتهٔ منبع، به کار بستنش آسان‌تر است، ولی شاید کمتر پویا باشد.

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

شواهد چه می‌گویند

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

گروهی از پژوهشگران دانشگاه ینا در آلمان در سال ۲۰۱۴ هزاران عکس و نقاشی را بررسی کردند. می‌خواستند ببینند آثاری که بیشتر پسندیده شده‌اند، بیشتر از قاعدهٔ یک‌سوم پیروی می‌کنند یا نه. نتیجه‌شان این بود که رابطهٔ روشنی میان پیروی از این قاعده و زیبا دیده شدن اثر پیدا نمی‌شود.

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

کِی باید شکستش

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

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

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

جهت خواندن و ترکیب

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

این بخش را من با یک عامل دیگر تکمیل می‌کنم: جهت خواندن. سیلوی شوکرون و ماریا دِ آگوستینی در سال ۲۰۰۰ پژوهشی دربارهٔ اثر عادت خواندن بر ترجیح زیبایی‌شناختی منتشر کردند. آن‌ها تصویرهایی را به خوانندگان زبان‌های چپ‌به‌راست و راست‌به‌چپ نشان دادند. خوانندگان هر گروه بیشتر تصویرهایی را پسندیدند که جهت حرکت یا تمرکزشان با جهت خواندن خودشان جور بود.

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

در بافت فارسی

چند نکته برای ترکیب‌بندی صفحه‌های فارسی.

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

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

سه: تیتر فارسی بلندتر است. ترجمهٔ یک تیتر کوتاه انگلیسی به فارسی اغلب بلندتر می‌شود. ستون یک‌سومی که برای تیتر انگلیسی کافی بود، ممکن است تیتر فارسی را به سه خط بشکند. فضای متن را با متن فارسی واقعی بسنجید.

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

پنج: قاعده را ابزار ببینید، نه قانون. همان‌طور که شواهد نشان می‌دهد، قاعدهٔ یک‌سوم نقطهٔ شروع است. کدام ترکیب برای کاربر فارسی‌زبان شما بهتر کار می‌کند، چیزی است که فقط آزمودن نشان می‌دهد.

جمع‌بندی

قاعدهٔ یک‌سوم قاب را با دو خط افقی و دو خط عمودی به نُه بخش تقسیم می‌کند و اجزای مهم را روی خط‌ها یا تقاطع‌ها می‌گذارد. از کتابی در سال ۱۷۹۷ آمده و امروز در رابط کاربری هم به کار می‌رود، بیشتر برای ترکیب یک بخش یا یک تصویر تا کل صفحه. به نسبت طلایی بسیار نزدیک است و مهم‌ترین کارش دور کردن طراح از چیدمان همه‌چیز در وسط است.

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

اگر بخواهم یک پرسش بگذارم: در سرصفحهٔ سایت شما، مهم‌ترین پیام در کدام نقطهٔ شبکه نشسته، و آیا نسخهٔ فارسی آینه شده است؟