نسبت طلایی ( Golden Ratio ) در رابط کاربری

زمانی که در مورد نسبت طلایی صحبت می کنیم معمولا اون دایره معروف نسبت‌ها(تصویر زیر) به ذهنمان می‌اید یا یاد تصاویر و قوانین عکاسی می‌افتیم و بصورت کلی در نسبت طلایی تلاش می‌کنیم که توجه و تمرکز کاربر رو به یک نقطه سوق بدیم.

تاریخچه نسبت طلایی

اگر موافق باشین یه اشاره ریز به تاریخچه نسبت طلایی کنیم ( چون برای خود من استوری اتفاقات خیلی جذابه).

نسبت طلایی قرن‌ها در زمینه‌های مختلف مثل هنر، معماری و طراحی مورد استفاده قرار گرفته است که برای اولین بار در حدود ۵۰۰ سال قبل از میلاد توسط اشخاصی مانند افلاطون و فیدیاس و بعد‌ها اقلیدس مطرح شده که با نام‌های متعددی به این مفموم اشاره شده است مثل میانگین طلایی ( Golden Mean)
، نسبت طلایی ( Golden Ratio)، بخش طلایی ( Golden Section) و نسبت الهی ( Divine proportion) .

و نماد نسبت طلایی رو با فی ( Phi - ϕ) می‌شناسیم.

و بصورت ریاضی مقدارش برابر با فرمول x² = x + 1 است و مقدار تقربیش 1.61803398874989482045 میشه.

چرا اصلا نسبت طلایی مهمه

بر اساس گزارش مجله Artsper نسبت طلایی به‌عنوان قانون مهم در هنر عمل می‌کند و یک رابطه متعادل دوست داشتی برای چشم و ذهن انسان در تصاویر ایجاد می‌کنه و مظهری از زیبایی‌شناسی و تناسب و هماهنگ و زیبایی است.

مزایای استفاده از نسبت طلایی در Ui/Ux

۱- هارمونی بصری ( Visual Harmony) :

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

۲- نسبت‌های طلایی انسان ( Natural Human Proportions ) :

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

۳- سلسله مراتب و تمرکز ( Hierarchy and Focus ) :

نسبت طلایی نقریبا مشابه به قانون فیبونانچی است که هر عدد از مجموع دو عدد قبلی بدست می‌اید ( ۰، ۱، ۱، ۲، ۳، ۵، ...). این توالی هم در طبیعت رایج است و روی الگو‌های چینش مارپیچی برگ‌ها و حیوانات هم مشاهده می‌شود و در نتیجه، به ایجاد یک سلسله مراتب واضح کمک می‌کنه و توجه کاربر را به نقطه کانونی هدایت‌ می‌کنه.

۴- تاثیر روانی ( Psychological Impact ) :

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

چگونه نسبت طلایی را در طراحی خودمون استفاده کنیم

در ابتدا به تصویر زیر دقت کنید

در تصویر بالا نسبت طلایی به یک مستطیل اعمال شده است که ۶ ناحیه ۱، ۲، ۳، ۴، ۵، ۶ بوجود می‌اید و داخل هر ناحیه یک قوس از ابتدا به انتها اون مربع کشیده می‌شود حالا اندازه طول و ارتفاع هر مربع رو توی ادامه اشنا میشیم که چطوری به دست بیاریم ( با یه مثال پایین‌تر بهش اشاره کرده)

نسبت طلایی در تایپوگرافی

با ضرب اندازه پایه فونت سایز تایپوگرافی ( Font base size) در عدد ۱.۶۱۸ (همون مقدار phi ) میتوان سلسله مراتب تایپوگرافی خودتون رو حساب کنید و یه یه نظم و انسجام و سلسه مراتب محتوایی منظم و اشنا برای کاربر فراهم کنید. که نمونه اونو در تصویر پایین مشاهده کنید

نسبت طلایی در چیدمان عناصر

ابتدا باید طول طراحی خود را استخراح کنید مثلا 1062باشد حالات این مقدار رو تقسیم 1.618 میکنیم که عدد ۶۵۶.۳۷ که رندش کنیم ۶۵۶ میشه این عرض اسکرین شما خواهد بود. حالا برای سایر ناحیه‌ها هم ارتفاع اینگونه بدست می‌اید.

اگه توی تصویر بالا کمی دقت کنیم طول ما ۱۰۶۲ پیکسل است که تقسیم بر ۱.۶۱۸ میشه ۶۵۶ .

اون ناحیه ابی کمرنگ تر ( ناحیه ۲) طولش میشه ارتفاع قبلی (۶۵۶) که اگه نقسیم بر ۱.۶۱۸ میشه .۶۷۴۰۵ یعنی ارتفاع ابی میشه ۴۰۶ ( گرد به به بالا میشه)

اون ناحیه ابی پررنگ طولش که همون ۶۵۶ هست ارتفاعش هم از تفریق ۶۵۶ بر ارتفاع ناحیه ۲ میکنیم که میشه ۲۵۰ .

حالا برای ناحیه کوچیکتر این ۲۵۰ رو بر ۱.۶۱۸ تقسیم می کنیم میشه ۱۵۴ یعنی طول ناحیه ۳ میشه ۱۵۴ پیکسل.

حالا این ترتیب رو برای سایر ناحیه میشه پیش رفت.

چند نمونه طراحی، که از نسبت‌طلایی استفاده می‌کنند

در تصویر زیر، که تمرکز کاربر رو روی نقطه شروع خواندن مقالات تنظیم کرده است که در نهایت اکشن کاربر روی دکمه ابی ( CTA ) اقدامی صورت گیرد.

در تصویر زیر توجه و تمرکز کاربر رو روی نوشته و شعار اصلی تنظیم کرده است.

نسبت طلایی همچنین در طراحی گرافیک و بروشور‌ها برای ترتیب ساختار چینش محتوا و المان‌های گرافیکی استفاده می‌شود که نمونه‌ایی را در پایین مشاهده می‌کنید.

نتیجه گیری

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

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

من 👨🏻‍💻 در تلاشم که نوشته‌های منظم توی حساب ویرگول قرار بدم و ممنون میشم منو دنبال کنید و تعامل داشته باشید که باهم و کنارهم علم ux رو یاد بگیریم 🤍