برنامه نویسی

قانون یک سوم،قانون هیک، قانون Fitt و نسبت طلایی در صفحات وب !

قانون یک سوم،قانون هیک، قانون Fitt و نسبت طلایی در صفحات وب !

شیوه ها تغییر میکنند و طرح ها( Design ها) می آیند و میروند، اما طراحی بصری و اصول اساسی آن تغییر چندانی در ۵۰ سال گذشته نداشته است. اگر آخرین شیوه ها در طراحی چاپ، نسبت حاشیه ها (در طراحی کتاب)، طراحی وب سایت، ساختار شبکه ای (grid) یا هر جنبه دیگری از طراحی را نگاه کنید متوجه میشوید که تمامی آنها بر پایه یکسری اصول قدیمی مثل قانون یک سوم و نسبت طلایی استوار هستند. برای دستیابی به علت این موضوع بهتر است چند مثال از تکنولوژی های طراحی که بسرعت رشد کرده و هنوز به طریقی به ریشه های خود وابسته هستند را، بررسی کنیم .

 

BOOK Margins (حاشیه بندی کتاب) :

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

از گوشه بالای هر صفحه شروع به کشیدن خط میکنیم و از گوشه پایین در مقابل آن خارج می شویم سپس خطی به شکل ضربدر روی کل صفحه ایجاد میکنیم برای درک بهتر شکل زیر را ببینید :

یک خط عمودی در جایی که دو خط یکدیگر را قطع میکنند میکشیم

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

بدین ترتیب شروع به کشیدن خطی فرضی از نقطه شروع تا تقاطع بعدی با خط مورب میکنیم و ادامه می دهیم مانند شکل زیر .

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

قانون یک سوم :

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

برای اجرای قانون یک سوم تصویر یا طرح خود را انتخاب کنید و آنرا به سه بخش مساوی به صورت عمودی و افقی تقسیم نمایید حالا شما ۹ بخش مساوی از طرح خود را دارید که در آن نقاط تلاقی خطوط عمودی و افقی را نقاط کانونی تصویر می گویند

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

قانون هیک و طراحی وب سایت :

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

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

قانون Fitt و طراحی وب سایت :

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

نسبت طلایی :

نسبت طلایی برای مدت زمان بسیار زیادی در اطراف ما وجود داشته شما میتوانید نمونه های بسیار زیادی از آنرا در طبیعت اطراف خود پیدا کنید. حتی آن را می توانید در آثار هنری مشهوری مثل مونالیزا بیابید. نسسبت طلایی تعیین کننده بهترین و زیباترین ترکیب میان نواحی مختلف طرح می باشد که ما آنرا امروزه در طراحی های مدرن وب سایت می بینیم. فرض کنید شما یک وب سایت با عرض ۱۰۲۴px دارید اگر عرض وب سایت را بر ۱٫۶ تقسیم کنیم مقدار ۶۴۰px بدست می آید که منطقه قرار گرفتن Content یا محتوای سایت میباشد.حال اگر ۶۴۰ را از ۱۰۲۴ کسر کنیم مقدار ۳۸۴ را داریم که عرض ایده آل برای نوار کناری با استفاده از قانون طلایی می باشد.

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

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

نتیجه :

ممکن است طراحی در ۵۰ سال گذشته از نظر سبک تغییراتی داشته باشد اما اصول اساسی آن هنوز هم پا بر جاست . نسبت طلایی ،Fitt ،قانون هیک و قانون یک سوم هنوز هم بطور گسترده مورد استفاده قرار میگیرند .این روش ها بر اساس نسبت های ریاضی بدست آمده اند و هنوز هم بهترین دستورالعمل برای بدست آوردن بهترین نتایج در هنرهای بصری می باشند سبکهای جدید اغلب بر اصول بدست آمده در صدها سال پیش می باشند آیا شما هم در طرح های خود از این قوانین پیروی میکنید یا به ابزارهای مدرن مثل سیستم grid و قالبهای آماده بسنده میکنید؟

تو پیشگامیت، میتونی سوالات رو بپرسی و هم میتونی مطلب منتشر کنی.

پیشگام پلاس   پرسش و پاسخ

ثبت یک نظر

آدرس ایمیل شما منتشر نخواهد شد. فیلدهای الزامی مشخص شده اند *

  ورود / ثبت نام با حساب گوگل