همونطور که قبلا هم قول داده بودم از این پس در سی جی تی وی قصد دارم مقالات و آموزشهایی در مورد طراحی وب بزارم که کمتر در وب فارسی به آن پرداخته میشه ، از همین بابت در این آموزش قصد دارم به توضیح یک نکته یا روش جالب به نام « نسبت طلایی » یا Golden Ratio بپردازم.
ابتدا تعریف کلی از زبان ویکی پدیا
نسبت طلایی یا عدد فی (به انگلیسی: Golden ratio) در ریاضیات و هنر هنگامی است که «نسبت بخش بزرگتر به بخش کوچکتر، برابر با نسبت کل به بخش بزرگتر» باشد.[۱]»
تعریف دیگر این عدد نسبت طلایی این است که «عددی مثبت است که اگر به آن یک واحد اضافه کنیم به مربع آن خواهیم رسید». تعریف هندسی آن چنین است: طول مستطیلی به مساحت واحد که عرض آن یک واحد کمتر از طولش باشد.
توضیحات بیشتر رو میتونید در صفحه ویکی پدیا مطالعه کنید. در واقع این نسبت در اکثر گونه های طراحی به کار میره و اصالتا یک نسبت ریاضی هست که در طبیعت به وفور یافت میشه و در طراحی های کلاسیک و قدیمی نیز برای ایجاد هماهنگی در طرح از آن استفاده میشده.
تقریبا مقدار ۱٫۶۱۸۰ با نام « نسبت طلایی شناخته میشود.
حال که با نسبت طلایی آشنا شدیم ، بد نیست کمی هم در مورد « مربع طلایی » بدانیم:
مربع طلایی ، مربعی است که طول آن ۱٫۶۱۸۰ برابر عرض آن است. برای مثال یک div رو در نظر بگیرید که عرض آن ۳۰۰ پیکسل است ، با این حساب طول آن میشود:
۱٫۶۱۸۰×۳۰۰=۴۸۵px
یه مربعی تو مایه های عکس زیر:
حالا اگه شما یک مربع واقعی (۳۰۰ در ۳۰۰ پیکسل) رو از مربع طلایی گفته شده جدا کنید. قسمت باقیمانده یک مربع طلایی دیگر خواهد بود. مانند شکل زیر:
به همین ترتیب میتوانید این عملیات را برای مربع های داخلی تر بارها و بارها انجام بدهید:
و نتیجتا تعدادی مربع معمولی و یک مربع طلایی خواهید داشت.
سری فیبوناچی
باز هم قبل از هرچیز یک تعریف کلی از ویکی پدیای عزیز:
غیر از دو عدد اول اعداد بعدی از جمع دو عدد قبلی خود بدست می‌آید. اولین اعداد این سری عبارت‌اند از:
- ۰٬ ۱٬ ۱٬ ۲٬ ۳٬ ۵٬ ۸٬ ۱۳٬ ۲۱٬ ۳۴٬ ۵۵٬ ۸۹٬ ۱۴۴٬ ۲۳۳٬ ۳۷۷٬ ۶۱۰٬ ۹۸۷٬ ۱۵۹۷٬ ۲۵۸۴٬ ۴۱۸۱٬ ۶۷۶۵٬ ۱۰۹۴۶٬ ۱۷۷۱۱
این اعداد به نام لئوناردو فیبوناچی ریاضیدان ایتالیایی نام گذاری شده‌است.
در واقع سری فیبولاناچی بسیار مشابه نسبت طلایی است اما نه دقیقا! سری فیبولانچی یک سری از اعداد هست که در آن هر عدد مجموع جمع دو عدد قبل از خود است. مشابه (مثال ذکر شده در بالا)
حال اگر بخواهیم این روش را در طراحی پیاده کنیم و از مربع استفاده کنیم ابتدا دو مربع خواهیم داشت:
حال اگر بخواهیم یک مربع دیگر به آن اضافه کنیم طبق قانون فیبوناچی باید از مجموع آن دو مربع باشد:
و اگر این سری را بارها و بارها ادامه دهیم به طرح زیر خواهیم رسید:
که در واقع این رابطه ریاضی تقریبا یک مربع طلایی نامحدود را به ما خواهد داد که میتواند تا حد دلخواه بسط داده شود و بزرگ شود.
حال اجازه بدید تعدادی از وب سایت ها را آنالیز کنیم تا ببینیم این مربع جادویی چگونه در طراحی وب مورد استفاده قرار میگیرد:
مثال یک: YStudio
مثال شماره دو: Mashable
مثال شماره سه : Jackson & Kent
وب سایت Jackson & Kent در واقع یک سرویس طراحی وب در فرانسه است که در زمینه طراحی طراحی وب ، css , html , وردپرس و … فعالیت میکند.
مثال شماره پنج : صفحه مترو مایکروسافت ویندوز
اگر در اینترنت و سایتهای طراحی وب جستجو کنید نمونه های بسیار زیادی خواهید دید که از این روش برای زیباتر کردن طرح استفاده کرده اند، اگر شما هم مثالی دیدید که بنظرتون آمد از این مربع طلایی استفاده کرده است. ممنون میشم در قسمت کامنت ها قرارش بدید.
ممنون خیلی خوب بود
سلام.وبسایت خیلی خوب و جامعی
دارید.ممنون
خیلی مفید و کاربردی بود . ممنون