وبلاگ

با"نسبت طلایی"وب سایت خود را جذاب ترواثرگذارترکنید.

تاریخ ایجاد در دوشنبه, 17 مهر 1396 12:05
نوشته شده توسط واحد پشتیبانی و نظارت کانکتا
با"نسبت طلایی"وب سایت خود را جذاب ترواثرگذارترکنید.

 

با"نسبت طلایی"وب سایت خود را جذاب ترواثرگذارترکنید.

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

نسبت طلایی چیست؟

یک نسبت ضریب ریاضی رایج است و در نظریه طراحی کلاسیک ، برای پیکر بندیها و ساختارهای متوازن به کارمیرود ( نسبت یا ارتباط مقداری بین دو عدد است که نشان میدهد یکی چند برابر و یا یک چندم یا چه کسری از دیگری است و برعکس ) این نسبت تقریبا برابرباعدد 1.6180 است و به آن"ضریب میانگین"(کلمه انگلیسی مین در ریاضی به معنای معدل یا میانگین است که ازجمع کردن اعداد با یکدیگر و تقسیم آن مجموع به تعداد اعداد به دست می آید). در طراحی وب این کلمه به مفهوم ایجاد توازن و هماهنگی در چیدمان محتوا است) و به آن بخش طلایی هم می گویند که با حرف یونانی “ϕ” نشان داده میشود. 

"مستطیل طلایی"مستطیلی است که طولش 1.6180 برابر عرض آن است . مثلا اگر پهنا یا عرض یک تکه از یک محتوا  300پیکسل باشد طولش برابر است با   300ضربدر 1.6180=485پیکسل.

 چنین شکلی را می شود یک مستطیل طلایی نامید . اگر از گوشه ی این شکل ، یک مستطیل کوچکترجدا کنید وهمین کار را باز هم ادامه دهید بازهم این شکل آشنا را به دست میدهد. 

نظام "فیبوناچی"

این نظام شبیه همان ضریب طلایی است ولی دقیقا مثل آن نیست . فیبوناچی یک سری شماره است که به دنبال هم می آیند و هریک ازآنها مجموع دو شماره پیشین آن است . مثلا0،1،1،2،3،5،8. اگریک مربع کامل و بی نقص را روی یک مربع دیگر بگذاریم یک مستطیل ساخته می شود. بعد یک مربع دیگر با ضلع برابر با مجموع اضلاع دو مربع قبلی کنار آن دو بگذاریم یک مستطیل درست می شود و این کار را بارها ادامه دهیم تا مستطیل های بزرگ تری ساخته شوند .  این کار را میشود تا بی نهایت ادامه داد که همان مستطیل طلایی را به دست میدهد با این تفاوت که این بار به جای تقسیم شدن مستطیل به مستطیلهای کوچکتر ، تعداد بیشتری مستطیل ساخته میشوند . ضریب طلایی و نظام فیبوناچی ؛ هردو اشکال قرینه و متناسب و جذاب و شبیه هم به دست میدهند .حالا بیایید چند وب سایت مشهور را که از این دو ابزاراستفاده کرده اند ببینیم و بررسی و تحلیل شان کنیم.

مثال یک:  وب سایت استودیو " Y "    

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

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

چرا اثرگذاراست ؟ آیا می خواهید وسط شلوغی ها باشید و به خوبی دیده شوید؟ اگرچنین است،"استودیوی شما" با استفاده  از نسبت طلایی همین کار را کرده است و شما هم میتوانید همین کار را بکنید . این وب سایت ظاهری پیشرفته/مترقی و جذاب دارد و محتواها را درون مربع های منظم و کنارهم (مانند چشمه ها یا سوراخهای یک توری یا مش) چیده است . سایتهای بیشتر و بیشتری را ببینید .آنهایی را که تلاش می کنند با چیدمان پویاتر و ساختار جذاب تر توجه کاربران را جلب کنند.

مثال دوم: Mashable - این وب سایت درمورد چیست؟ 

وب سایتی جدید می باشد و منبعی است از اطلاعات که منابع و امکانات مختلف را به"نسل برخط"معرفی میکند.

Mashable از نسبت طلایی چگونه استفاده میکند؟ برای نشان دادن روش استفاده ی مش ابل از نظام فیبوناچی در چیدمان خود ، از آزمون ضریب طلایی UX تریگر استفاده کرده است . چیدمان این محتوا قابلیت نرمش و انعطاف دارد .عنوانش درسمت چپ است و درسمت راست هم به لینک فراوانی گذاشته است . تکه های محتوا درمربع های یک اندازه و جداگانه کنارهم چیده شده و شکل جذاب و متفاوتی ساخته اند.  

چرا اثرگذار است؟ نسبت طلایی در این جا اثرگذار است و جواب میدهد . چون به وب سایت های بسیار محتوا محور (وب سایتی که در جلب نظرکاربرانش محتوا نقش پررنگ تری دارد) این امکان میدهد که درتایپوگرافی (انتخاب فونت،فاصله بین خطوط و..) خود"فضای تنفسی"را رعایت کنند(منظوردقیقا این است که حجم ، چیدمان و ترتیب و توالی محتوا و صفحه ها به صورتی باشدکه کاربر را خسته نکند و در فواصل مختلف مهلتی برای تنفس ، فکرکردن و تصمیم گرفتن برای انتخاب محتوا یا صفحه بعدی به او بدهد)  سایتهای دیگری هستند که شاید محتوای فشرده تری دارند و مانند مش ابل چیدمان متعارف چهارخانه هم داشته باشند ، ولی وب سایت مش ابل نشان میدهد که ضریب طلایی حتی وقتی نامریی و پنهان است ، یا به عبارتی به صورت نامحسوس به کارگرفته میشود نیز اثرگذار است.  

مثال سوم: Jackson & Kent - این وب سایت درمورد چیست؟

یک بنگاه فرانسوی تولید کننده وب/طراحی وب سایت است که درزمینه خدمات دیجیتالی مثل"اپ تی ام ال 5"/سی اس اس 3/دروپال /ورد پرس/پی اچ پی و..... تخصص دارد.

Jackson & Kent از نسبت طلایی چگونه استفاده میکند؟ صفحه نمایش وب سایت نشان میدهد که چیدمان یا ترتیب قرارگرفتن متون مختلف هرصفحه تا اندازه زیادی دنباله ی سفارش قبلی مشتری و درجهت تکمیل و بهبود کار قبلی اوست . ضمنا محتوایی هم درباره خود این بنگاه (مش ابل) دارد به اضافه امکان راهبری یا مسیریابی درمرکزصفحه نمایش . در دکمه تماس نیز از نسبت طلایی به صورت یک سیستم چهارخانه (ترکیبی ازمستطیل ومربع)استفاده میکند تا چیدمانی بی مانند بسازد.  

چرا اثرگذاراست؟ چون مثال جکسون وکِنت شما را ترغیب میکند که تمام وب سایت را بگردید و محتوای آن را به صورت افقی با دقت ببینید ، نمای چهارخانه و شکل بلوکها و اندازه های متفاوت آنها برای چشم کاربر جذاب ترند. وقتی کاربر این وب سایت را روی دسکتاپ یا تبلت می بیند ، شماره صفحه روی محور افقی نشان داده می شود که راهی نو و ابتکاری برای دیدن هربخش ازمحتوا به صورت جداگانه ودیدن UI ( تعامل وارتباطهای بین کاربر و کامپیوترکه با لپ تاپ /دسکتاپ/تبلت یا گوشی موبایل و..درجریان است) به صورت کامل و یک جا. 

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

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

 

این پست را در شبکه های اجتماعی به اشتراک بذارید
نوشتن دیدگاه


تصویر امنیتی
تصویر امنیتی جدید