قطعا شما نیز قواعد مشخص کنتراست و تکرار را بدون اینکه به آن ها توجه کنید در طراحی تان بار های مورد استفاده قرار داده اید .احتمالا تا به حال عناصر مختلفی که از نظر ظاهری و زیبایی شناختی تقریبا شبیه هم هستند را در کنار هم قرار داده اید. در همین حال المنت های دیگری نیز در قسمت دیگری از صفحه گذاشته اید که با ایجاد حس کنتراست و تضاد ، حالت یک نواختی را از طراحی تان بگیرید . این نکات ، مفاهیم اولیه طراحی وب سایت است و به احتمال زیاد شما آن ها را یاد گرفته اید و به کار می برید. اما من با اطمینان می گویم که همیشه بازگشت به مفاهیم اولیه برای تقویت توانایی ها می تواند مفید باشد . پس بیایید کمی عمیق تر به موضوع کنتراست و تکرار نگاه کنیم.
کنتراست ( CONTRAST ) به چه معناست؟
به عنوان یک انسان ما می توانیم بر روی مفاهیم بالاتری فکر کنیم ولی بیشتر بر قسمت “مارمولک ” مغز تکیه می کنیم که این قسمت بر تغییرات در وضعیت محیط اطراف توجه دارد . این مغز مارمولکی ما است که به راحتی با تغییرات کنار می آید و به حیات خود ادامه می دهد اما بسیاری از اجداد ما به راحتی جان سپردند.
ما به راحتی تغییرات الگوها یا اشکال هندسی را متوجه می شویم و به سرعت به آن ها واکنش می دهیم. ایجاد کنتراست در تصویر به شما کمک می کند تا توجه مخاطبان خود را به قسمت خاصی از صفحه جلب کنید یا حداقل اینکه ،اگر شما به درستی از آن استفاده کنید این مورد خودش این کار را انجام می دهد. یکی از ساده ترین شیوه های ایجاد کنتراست ، Bold کردن نوشته هاست که در همان نگاه اول ، مخاطب به آن عبارت بیشتر از سایر قسمت ها توجه می کند . در حقیقت ، نویسنده های علوم فنی ، از این روش بیشتر بهره می برند ، چون می توانند قدم های مورد نیاز برای هر عمل را پر رنگ تر کنند و کاربر بتواند با سرعت بیشتری قدم های مورد نیاز برای انجام دادن پروسه مورد نیاز را انجام دهند.
نکته کلیدی استفاده از کنتراست این است که شما فقط در جایی که به آن نیاز دارید استفاده کنید . تاکید می کنم : هر جایی که مورد نیاز است ! نه بیشتر نه کمتر! استفاده کمتر بهتر از زیاده روی در کار است .
در مبحث طراحی وب سایت ، کنتراست در رنگ ها ، سایز عناصر و تراز بندی ها قابل استفاده است . وقتی که درباره کنتراست سخن به میان می آید
، بیشتر افراد ذهنشان به سمت رنگ ها کشیده می شود ، اما ایده و تفکر کنتراست تنها به رنگ ها محدود نمی شود. در حقیقت کنتراست موردی ضروری برای کمک به مخاطب به منظور تشخیص بهتر المنت های مختلف از یکدیگر است .
در اینجا یک مثال برای شما می زنیم . بیشتر وبسایت ها از سه بخش هدر ، بدنه و فوتر تشکیل شده است و این سه بخش باید از نظر ظاهری نیز از هم جدا شده باشند . با استفاده از رنگ هایی که از نظر دیداری با هم در تضاد هستند به این هدف دست خواهیم یافت .
شما می توانید در متون نیز به چند روش از کنتراست استفاده کنید . شما می توانید به عناوین ، زیر عناوین و متن پاراگراف ها ، رنگ های متفاوتی دهید و از این طریق آن ها را از نظر ظاهری از هم جدا کنید . یا اینکه شما می توانید سایز آن ها را تغییر دهید و از این طریق حالت سلسله متونی را پدید آورید . شما حتی می توانید از دو روش با هم نیز استفاده کنید .
ایجاد کنتراست در سایز متون زمانی که نمی توانید به رنگ ها تکیه کنید ، یکی از راه های مناسب برای به وجود آوردن سلسله متون است . برای مثال اگر طرح شما رنگ های مینیمال دارد و محتوای اصلی مورد نظر در ستون وسط از سه ستون اصلی در طراحی وجود دارد ، شما می توانید اندازه و سایز عناصر ستون وسط را بزرگتر کنید تا مخاطب بداند که به کدام یک از آن سه ستون بیشتر باید توجه کند.
اما از کنتراست در تراز بندی چه خبر ؟! من به شما تذکر می دهم که برای استفاده از این روش باید خیلی مراقب بود . تراز بندی متون می تواند یک طراحی را به بلندترین قله برساند و یا اینکه آن را با تمام قدرت به زمین بکوبد . شما به راحتی نمی تواند آن را سرسری بگیرید . اما این را هم نیم گویم که اگر تراز بندی مناسب باشد ، بر طراحی تاثیر ندارد ! می خواهید یک مثال بزنم ؟ بله … شما می توانید عنوان پاراگراف را در تراز وسط قرار دهید و متن پاراگراف را از سمت راست یا چپ آغاز کنید ، اما اگر متن را هم در تراز وسط قرار دهید ، خواندن متن بسیار برای مخاطب دشوار می گردد
تکرار چیست؟
توانایی ذاتی ما در تشخیص تفاوت در اشکال هندسی ، الگو ها و رفتارهایی که در اطراف ما وجود دارد با توانایی ما در تشخیص اتحاد این موارد هماهنگ شده است . این توانایی ماست که می توانیم الگو ها را در حین توجه به تضاد ها تشخیص دهیم.
در حالیکه شما از ترفند تکرار در طراحی استفاده می کنید در حال نشان دادن این هستید که چگونه عناصر مختلف به هم شبیه هستید . در ابتدای مقاله به شما نشان دادیم که چگونه bold کردن نوشته می تواند آن را از سایر قسمت ها متمایز کند . اگر ما می خواهیم به تاثیر ترفند تکرار پی ببریم فقط کافی است که به فرمت هایپرلینک توجه کنیم
حتما می پرسید چرا ؟ ما هم در پاسخ می گوییم : هایپر لینک همیشه آبی رنگ است و به شکل آندرلاین قرار دارد . بعد از این همه سال و پیشرفت خیره کننده تکنولوژی ، هنوز هم کاربران از هایپرلینک انتظار دارند که آندرلاین ( زیرخط ) داشته باشد . و بیشتر کاربران از این سبک انتظار رنگ آبی دارند . تکرار در طراحی وب سایت شما در این مورد امری حیاتی و مهم است . شما باید رنگ و سبک نوشتاری هایپر لینک هایتان در تمامی صفحات وبسایت یکسان باشد تا کاربران بتوانند میان همه ی آن ها ارتباطی برقرار کنند و در وب سایت شما از هایپر لینک ها انتظار به خصوصی داشته باشند . این تکرار در سبک لینک ها یک نظم ذهنی به کاربران می دهد . تغییر ناگهانی سبک هایپرلینک ها در یکی از صفحات سایت ، این نظم ذهنی و الگوی یاد شده را بر هم می زند . حتما می پرسید ضرر این کار چیست ؟ خیلی واضح است … از آن زمان به بعد ، کاربران شما به هیپرلینک ها بی توجهی می کنند و به راحتی از کنار آن ها رد می شوند چون از لینک ها انتظار خاصی ندارند . و این قطع ارتباط کاملا اشتباه طراح است . این مورد تنها یکی از نمونه های تاثیر تکرار در طراحی وب سایت بود.
تکرار در وب سایت در عناصر مختلفی می تواند پدیدار شود . چه عناصری برای تکرار موثر تر هستند ؟ رنگ ها ، فونت ها ، اشکال هندسی ، متون ، اشکال گرافیکی ، ویدیو ها ، تصاویر ، هدر ، فوتر ، ضخامت خطوط ، فضا های خالی ، ابزار های هدایت ، سایدبار ها و … . اگر این موارد در قسمت های مختلف تکرار شوند حالتی پایدار به وب شما می دهند.
شما می توانید این تکرار را در یک سیر تدریجی قرار دهید به این معنا که عناصر مورد تکرار ، به تدریج بزرگ تر و یا کوچکتر شوند . این ترفند به یک نواخت نبودت طراحی شما کمک می کند .
استفاده از هر دو مورد در طراحی
این مورد به اثبات رسیده است که طراحی سایتی بدون عناصر مشابه و عناصری که در تضاد با هم هستند بسیار دشوار است . تمرکز شما باید بر این باشد که کاربر وب سایت را با دیدی کلی نگرانه با مراحی که در صفحه قرار دارد درگیر کنید . اساسا ، مقداری عناصر شبیه به هم برای ایجاد حس راحتی در مخاطب و عناصری که در تضاد با هم قرار دارند ، برای از بین بردن یک نواختی طراحی ، لازم و ضروری می باشد. یعنی همان چیزی است که ما «هارمونی » خطابش می کنیم.
منبع : http://www.webdesign.org/contrast-repetition-setting-elements-apart.22517.html
ترجمه و بازنشر:http://www.sh-benbao.com/