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

تقارن (Symmetry) در طراحی چیست؟

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

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

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

تقارن چیست؟

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

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

چهار نوع تقارن

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

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

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

چرا چشم دنبال تقارن می‌گردد

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

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

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

تقارن رسمی و تعادل غیررسمی

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

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

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

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

تقارن یعنی «این‌ها هم‌ارزند». این نکته در منبع نیست و به نظرم شایع‌ترین خطای استفاده از تقارن است. دو جزء که آینهٔ هم‌اند، به کاربر می‌گویند هم‌اندازه، هم‌وزن و هم‌اهمیت‌اند. وقتی واقعاً هم‌ارز باشند، این پیام درست است. وقتی نباشند، تقارن دارد دروغ می‌گوید.

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

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

تقارن در رفتار، نه فقط در ظاهر

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

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

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

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

قاعده‌های عملی

منبع چند قاعدهٔ اجرایی هم دارد.

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

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

تقارن در بافت فارسی

این بخش هم افزودهٔ من است و از کار روی رابط‌های راست‌به‌چپ می‌آید.

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

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

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

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

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

جمع‌بندی

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

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