وقتی در مورد نسبت طلایی صحبت می کنیم، اغلب به یاد تاثیر آن در عکاسی می افتیم و اینکه رعایت این نسبت چقدر می تواند یک عکس را جذاب تر کند، به خصوص با هدایت چشمان بیننده به نقطه کانونی اصلی.
وقتی در مورد نسبت طلایی می شنوید چه چیزی به ذهنتان می رسد؟ آیا می دانید که از آن می توانید در رابط های کاربری (UI) نیز برای زیباتر و متعادل تر به نظر رسیدن طراحی هایتان استفاده کنید؟
تاریخچه نسبت طلایی
اجازه دهید به طور خلاصه تاریخچه نسبت طلایی را که قرن هاست در زمینه های مختلفی مانند هنر، معماری و طراحی استفاده می شود، با شما به اشتراک بگذارم. مفهوم نسبت طلایی اولین بار حدود 500 سال قبل از میلاد توسط افرادی مانند فیدیاس، افلاطون و بعداً اقلیدس مطرح شد. این نسبت با نامهای متعددی از جمله میانگین طلایی، نسبت طلایی، بخش طلایی، تناسب الهی و نماد یونانی φ (فی) شناخته شده است. این نسبت ریاضی برابر با x² = x + 1 است و مقدار تقریبی آن 1.61803398874989482045 است.
چرا نسبت طلایی؟
طبق مجله Artsper، نسبت طلایی به عنوان یک قانون مهم در هنر شناخته می شود و توازنی بین اجزا ایجاد می کند که چشمِ ذهن آن را دوست دارد. این تجسم زیبایی شناسی، تناسبات هماهنگ و زیبایی است.
آیا می دانستید که نسبت طلایی در طراحی UX/UI نیز مرسوم است؟ بدون شک هنگام طراحی یک وب سایت یا برنامه، به عنوان یک طراح UX/UI، حتماً تناسب بین اجزا و سلسله مراتب برای هدایت کاربران به بخش های مهم را در نظر می گیرید.
در این مقاله، مزایای استفاده از نسبت طلایی و نحوه اعمال آن در طرح های خود را با شما به اشتراک خواهم گذاشت.
دلایل استفاده از نسبت طلایی در طراحی UX/UI:
- هماهنگی بصری: نسبت طلایی به ایجاد تعادل بصری در چیدمان ها و عناصر، از جمله شبکه (grid) ها، فاصله گذاری و تناسب کمک می کند. این باعث ایجاد حس هماهنگی و انسجام در طراحی می شود.
- تناسبات طبیعی انسان: تناسبات طبیعی موجود در بدن انسان شبیه به مقدار نسبت طلایی است. این ارتباط حس آشنایی و زیبایی را در طرح هایی که از نسبت طلایی استفاده می کنند ایجاد می کند.
- سلسله مراتب و تمرکز: نسبت طلایی شبیه به دنباله فیبوناچی است، جایی که هر عدد مجموع دو عدد قبل از آن است (0، 1، 1، 2، 3، 5، 8، 13 و…). این توالی در طبیعت رایج است، در چیدمان برگ روی ساقه یا الگوهای مارپیچی صدف ها دیده می شود. در نتیجه، به ایجاد یک سلسله مراتب واضح و هدایت توجه کاربر به نقطه کانونی کمک می کند.
- تأثیر روانی: مطالعات نشان می دهد که طرح هایی که از نسبت طلایی پیروی می کنند می توانند پاسخ های احساسی مثبتی را در کاربران برانگیزند. این نتیجه مثبت می تواند منجر به افزایش رضایت کاربر و تعامل با رابط کاربری شود.
دلایل زیاد دیگری وجود دارد، اما من برای نشان دادن اینکه چرا این نسبت ضروری است و چرا باید آن را در طراحی بعدی خود اعمال کنید، به این چهار نکته مهم اشاره کرده ام.
اعمال نسبت طلایی در طراحی UX/UI
حالا بیایید با هم نحوه پیاده سازی نسبت طلایی را بررسی کنیم و همچنین بعد از آن، نمونه های واقعی را ببینیم. همانطور که ممکن است قبلاً بدانید، مقدار آن شبیه به دنباله فیبوناچی است و نسبت آن با حرف φ (فی) تعریف می شود که تقریباً برابر با 1.61803398874989482045 است. برای به دست آوردن این قانون، می توانیم از تکنیک ساده ای که در زیر نشان داده شده است استفاده کنیم.
در مستطیل بالا نسبت طلایی اعمال شده است. حالا در هر مربع، یک قوس از یک گوشه به گوشه مقابل رسم کنید، همانطور که در شمارههای ۱، ۲، ۳، ۴، ۵ و ۶ نشان داده شده است. این کار باعث ایجاد منحنیهای مارپیچ طلایی یا دنباله فیبوناچی میشود.
ممکن است تا اینجا کمی گیج شده باشید. در ادامه با جزئیات بیشتری توضیح خواهم داد.
نسبت طلایی در تایپوگرافی
آیا میدانستید که از نسبت طلایی میتوان در متن اصلی، ارتفاع خط و تیترها نیز استفاده کرد تا تعادل بصری ایجاد شود و رابط کاربری شما خوشایندتر و سازمانیافتهتر به نظر برسد؟
همچنین با ضرب کردن اندازههای تایپوگرافی خود در عدد ۱.۶۱۸، میتوانید به متعادلتر به نظر رسیدن آن کمک کنید.
نسبت طلایی در چیدمان
فرض کنید عرض شما ۱۰۶۲ پیکسل است. حالا آن را بر ۱.۶۱۸ تقسیم کنید. حاصل شما ۶۵۶.۳۷ یا تقریباً ۶۵۶ خواهد شد که ارتفاع چیدمان شما میشود. حالا همانطور که در تصویر زیر نشان داده شده است بیایید این چیدمان را به دو ستون تقسیم کنیم.
حالا بیایید به وب سایتی نگاه کنیم که از این قانون نسبت طلایی استفاده میکند.
در وبسایتهای اپل و کورسرا، هنگامی که نسبت طلایی را اعمال میکنید، به احتمال زیاد متوجه شکل مارپیچی آن خواهید شد که چشمان شما را از عنوان بزرگ و دکمه ی Call To Action به سایر عناصر هدایت میکند.
آیا متوجه شدهاید که چگونه اکثر عناصر به خوبی سازماندهی شدهاند و فضای خالی به طور متعادل بین آنها وجود دارد؟ این نسبت طلایی به مشتریان آنها کمک میکند تا عناصر مهم وبسایت را ببینند و همچنین ظاهری زیبا و تعادل مجازی ایجاد میکند.
نسبت طلایی در سازماندهی و فاصلهگذاری
به طور مشابه، نسبت طلایی به سازماندهی محتوا یا عناصر در وب سایت شما و فاصله گذاری برای ایجاد ظاهری هماهنگ و متعادل کمک میکند.
بیایید به مثال زیر نگاه کنیم.
همانطور که میبینید، لوگو در بالا سمت راست و اثر هنری در پایین سمت چپ قرار دارد. هنگامی که نسبت طلایی را روی آن رسم میکنید، فاصله بین یک عنصر تا عنصر دیگر، مانند لوگو در بالا و فاصله بین اثر هنری و پایین را مشاهده خواهید کرد که یک نقطه کانونی و فضای خالی کافی برای ایجاد تعادل مجازی ایجاد میکند.
قوانین دیگر برای اجرا مانند قانون یکسوم یا گریدبندی در طراحی
روش دیگر برای برش یک تصویر با استفاده از نسبت طلایی، استفاده از قانون یکسوم است. در حالی که ممکن است به اندازه نسبت طلایی دقیق نباشد، اما میتواند بسیار نزدیک به آن باشد. قانون یکسوم تصویر را به یک شبکه از خطوط عمودی و افقی در نسبت ۱:۱:۱ تقسیم میکند. این کار به تراز کردن عناصر مهم تصویر در اطراف مستطیل مرکزی، به طور ایدهآل در چهار گوشه کمک میکند.
بیایید به مثال زیر نگاه کنیم.
در هر دو مثال بالا، برش تصاویر با استفاده از قانون یکسوم و اعمال نسبت طلایی باعث میشود وبسایت یا عکس جالبتر به نظر برسد و یک نقطه کانونی ایجاد کند، همانطور که قبلاً در مورد آن صحبت کردیم.
میتوانید این تاکتیک را هم برای عکسها و هم برای طراحی رابط کاربری خود به کار ببرید تا آنها را جالبتر کنید و به طور خاص، چشم را به سمت اطلاعات مهم هدایت کنید.
نتیجهگیری
وب سایت یا برنامه ای موفق است که مشکلات کاربران را حل کند و راه حلهای مؤثر به آنها ارائه دهد. این هدف نیازمند هدایت توجه کاربران به مهمترین عناصر رابط کاربری است تا به راحتی آنچه را که نیاز دارند پیدا کنند.
نسبت طلایی، قانون یکسوم و گریدبندی طراحی، ابزارهای ارزشمندی برای تنظیم و سازماندهی محتوا هستند. اجرای این اصول میتواند منجر به یک طراحی متعادل از نظر بصری، زیبا و با ساختار خوب شود. با این حال، درک هر قانون و استفاده عمدی از آنها بسیار مهم است، زیرا استفاده نادرست میتواند باعث سردرگمی یا منحرف کردن توجه کاربران شود. در نهایت، با بهکارگیری دقیق این اصول طراحی، میتوانید یک تجربه کاربری لذتبخش برای مخاطبان خود خلق کنید. موفق باشید!