آیا میدانید چرا قادر هستید این مقاله را فارغ از قدرت بینایی، دسترسی اینترنت، دستگاه و غیره مطالعه کنید؟ رنگ فونت متنی که در حال خواندن آن هستید چیست؟ – مشکی. رنگ پس زمینه ی صفحه ای که دارید می خوانید چیست؟ – سفید. بله؛ مشکی و سفید از ابتدایی ترین دلایلی هستند که شما را قادر به خواندن این مقاله می کنند و دلیل دیگر، اعمال کنتراست در اثر است. به خواندن این آکادمی هنر ادامه دهید تا در مورد اصول کنتراست و تشابه (contrast and similarity) در طراحی گرافیک بیش تر بدانید.
به سومین بخش از مجموعه ی ” اصول طراحی” خوش آمدید؛ جایی که به صراحت در مورد دو کارکرد طراحی – اصول کنتراست و تشابه در طراحی گرافیک صحبت می کنیم که در نتیجه ی آن، نردبان مان در زیر اصول گشتالت قرار میگیرد.
در طراحی هر نوع ترکیب، چه طراحی UI باشد، چه موضوع دوجانبه یا بطور کلی هر چیزی؛ به دو موضوع برخورد می کنیم:
1. عناصر ابتدایی کنتراست و تشابه – سر تیتر بخش
در طی مسیر رایانه و فناوری اطلاعات، تصمیم می گیریم که این عناصر ابتدایی تر ( بخشی از اطلاعات، محصول، ویژگی، کپی، نام رویدار، توضیح ) که بیننده باید وقتی دارد به یک ترکیب هنری یا محدوده ی به خصوصی از ترکیب نگاه می کند در ابتدا در معرض دیدش قرار بگیرد؛ آن ها چه چیزی هستند؟ بعد از آن در مورد هم راستایی دیگر عناصر طراحی اطراف آن تصمیم گیری می کنیم تا از برجستگی این عناصر مبنا، حمایت کنیم. این امر، از تصمیم گیری در مورد عناصر مبنا گرفته تا بکارگیری در ترکیب هنری؛ میتواند توسط اعمال کنتراست بین عناصر انجام شود.
2. عناصر ثانویه کنتراست و تشابه – پاراگراف های بخش
به روش یکسان، تعدادی (بیش تر از 2 عدد) عنصر نیاز داریم ( بلوک های متن، اشکال، بخش ها) تا ببینیم که آیا آن ها بر حسب عملکرد، کاربری و ویژگی؛ مطابقت دارند و به عنوان بخشی از گروه یکسان برای بیننده قابل درک هستند یا خیر. در ضمن تعدادی عنصر می خواهیم تا ببینیم آن ها از دیگر عناصر متفاوت هستند و به عنوان بخش گروهی متفاوتی قابل درک هستند یا خیر. این تصمیم که کدام عنصر قرار است بخشی از گروه یکسان باشد ( مثلا: آدرس، مخاطب، شماره ی تماس) تا آن را در ترکیب هنری اعمال کنیم، می تواند توسط عناصری که ویژگی های مشابهی را به اشتراک می گذارند؛ ایجاد شود.
در تصویر کتاب بالا، در صفحه ی سمت چپ یک گروه عنوان بنام ” جدایی و صمیمیت” را می بینید، خواه و ناخواه بعد از ورق زدن صفحه به علت کارکرد خوب کنتراست که توسط طراح؛ طرح بندی خوبی انجام شده است، در ابتدا این عنوان را می بینیم. عنوان؛ به علت برجستگی و فضای اطرافش توجه ما را جلب می کند و برای نشان دادن کارکرد تشابه در تصویر یکسان، در صفحه ی سمت راست یک گروه پاراگراف می بینید که کارکرد تشابه در اثر را نمایان می کنند – چگونه؟ به علت یکسان بودن سایز فونت ، خانواده حروف، رنگ، فاصله ی خطوط، هم راستایی، طول خط و مجاورت مستمر بین گروه پاراگراف ها؛ و این دلیلی است که فکر می کنیم این گروه پاراگراف ها؛ بخشی از یک گروه هستند. فقط به یک خط اضافه از فاصله ی میان دو خط در یک پاراگراف نیاز داریم تا مجاورت مستمر بین این گروه پاراگراف ها را نابود کنیم و سرانجام کارکرد تشابه را از بین ببریم. ما تصور می کنیم پاراگرافی که بعد از خط اضافه ی فاصله ی میان دو خط وجود دارد، شروع بخش های دیگر است و به گروه مشابه پیشین تعلق ندارد.
کارکرد کنتراست و تشابه می تواند توسط استفاده از ویژگی های مبنای عناصر ترکیب اعمال شود.
ویژگی های مبنا اصول کنتراست و تشابه (contrast and similarity) در طراحی گرافیک
ویژگی های یک عنصر که توسط ذهن ناآگاه قبل از دخالت ذهن هوشیار بصورت خودکار اسکن و شناسایی می شوند، ویژگی های مبنای یک عنصر نامیده می شوند. این ها تعدادی ویژگی هستند که افراد می توانند برای ساخت عنصر غالب در ترکیب یا از دست دادن چیره گی یا ایجاد عناصری با ظاهر یکسان استفاده کنند. ویژگی های مبنای اساسی یک عنصر که محتمل هستند وارد میدان شوند تا کنتراست و تشابه را اعمال کنند به شرح ذیل هستند:
- اندازه
- شکل
- رنگ
- جنس
- موقعیت تراز
- حرکت
- اشباع
- فاصله
سر انجام، متوجه می شویم که این ویژگی های مبنا؛ مسوول ساخت یک عنصر هستند.
با این حال، از بخش بعد در مورد کارکرد کنتراست و تشابه به تفصیل صحبت خواهیم کرد. در اینجا مثالی آنی از کارکرد این ها با کاربرد ویژگی های مبنا در سایت eBay موجود است.
همانطور که می توانیم ببینیم، بنر صفحه ی آغاز؛ توجه ما را در درجه ی اول به علت کارکرد کنتراست توسط استفاده از ویژگی های مبنا شامل اندازه ی کاملا عریض و رنگ روشن جلب می کند. در درجه ی دوم، بخش ” مقاصد محبوب” در ذیلِ بنز صفحه ی آغاز؛ کارکرد تشابه را دوباره با استفاده از ویژگی های مبنا شامل دایره ی یک اندازه، اندازه ی فونت یکسان، اشباع یکسان پس زمینه ها، تنظیمات با بالانس یکسانِ محصولات و فواصل یکسان بین دایره ها به نمایش می گذارد – تمام این ویژگی ها نشان می دهند که این دایره ها همگی قسمتی از یک گروه هستند و احتمالا کارهای یکسانی می کنند؛ مثلا هنگام کلیک به صفحه ی بعد می روند و این قدرت ویژگی های مبنای عناصر در ترکیب هنری است.
مقایسه کنتراست و تشابه در طراحی
ولی هنوز مسئله ی دیگری باقی مانده است که بطور مساوی مسوول عملکرد صحیح کارکرد کنتراست و تشابه است، و آن – مقایسه است.
بیش تر اوقات، ویژگی عنصر باید با ویژگی های مشابه دیگر عناصر اطرافش در جهت عملکرد درست؛ مقایسه شود. همانند پس زمینه ی زرد رنگ بنر در عکس بالا که اول از همه توجهات را به علت در تضاد بودن با پس زمینه ی سفید UI جلب میکند؛ اگر رنگ سفید UI همچنان زرد یا سایه ی زرد رنگ بود، هیچ کنتراست خوبی مانند چیزی که الان هست وجود نداشت.
از طریق قیاس هایی همچون این هاست که واقعا می توانیم کارکرد کنتراست یا تشابه را نشان دهیم.
کنتراست در طراحی گرافیک
در پوستر بالا، علامت نقل قول و مربع به همراه صورت انسان درونش، اولین توجهات را به علت کارکرد کنتراست صحیح رنگ مشکی و سفید؛ به این طرح بندی جلب می کند. طراح گرافیک از رنگ سفید برای پس زمینه و مشکی را برای عنصر مرتبط استفاده کرده است. دلیل دوم فاصله ی اطراف عناصر مشکی در مرکز، مثل پایدار ماندن اطلاعات رایج قرار گرفته شده در سمت راست بالا وسمت راست پایین، میباشد.
از طریق پوستر بالا، می توانیم به سه سوال مرتبط با کنتراست در طراحی پاسخ دهیم که به ترتیب ذیل می باشد:
1. کنتراست در بستر طراحی بصری به چه معناست؟
کنتراست در بستر طراحی بصری می تواند به معنای تفاوت بین دو یا چند عنصر در ترکیب باشد. هر چه تفاوت بین عناصر بیش تر باشد، ساده تر با یکدیگر مقایسه و درک می شوند و این زمانی است که گفته می شود آن ها با یکدیگر در کنتراست قرار دارند.
2. چرا باید کنتراست را در طراحی اعمال کنید؟
داشتم فکر میکردم تا مدل معکوس چرا، چگونه و چه چیزی از ” سایمون سینک” را پی بگیرم، ولی حدس می زنم ” چه چیزی” در اینجا مهم تر از ” چرا” است.
بنابراین، پاسخ در عمق دانش ذهنی و بصری انسانی مان نهفته است که به طور دقیق تر پردازش بصری نامیده می شود. دیدن اینکه علم و طراحی در کنار هم می آیند همیشه جالب است، مگر نه؟
فعالیت پس زمینه ای (Pre-attentive processing)، انباشتگی ناآگاهانه ی اطلاعات از ترکیب است ( یا هر چیزی مثل پوستر، محصول ملموس، یا وقتی چیزی را می بینید) که در اولین برخوردمان رخ می دهد. به بیان ساده تر و بصری، این مفهوم مثل خواندن ناآگاهانه ی یک پوستر وقتی چشممان به آن برخورد می کند عمل می کند. در این پردازش، حرکت چشمان مان توسط عادت خواندن از سمت چپ بالا به راست پایین یا آغاز به پایان، تعیین نمی شود بلکه از ویژگی های مبنای عناصر گرفته می شود، عنصری که از همه برجسته تر است و کنتراست بالایی دارد اول از همه دیده می شود و آن، زمانی است که بیننده ها قبل از اینکه حتی بصورت آگاهانه توجه خود را جلب کنند و به مرحله ی فعالیت زمینه ای وارد شوند شروع به پروسه ی برقراری ارتباط ترکیب با بیننده هایمان می کنیم.
رنگ، ویژگی مبنای مهم عنصر است که می تواند برای اعمال کنتراست بین عناصر استفاده شود.
در این فعالیت پس زمینه ای، بینندگان تمایل دارند تصمیم بگیرند که آیا می خواهند بمانند و با فعالیت زمینه ای شروع کنند یا نه و همانطور که می دانیم هر ترکیبی برای جلب توجه بیننده در تلاش است. ما باید کنترل عنصری را که بیننده قرار است در این فعالیت پس زمینه ای ببیند، در دست بگیریم. در ابتدا باید تصمیم بگیریم که چگونه به هر روشی توجه بیننده را جلب کنیم تا آن ها بتوانند تصمیم به تغییر در فعالیت زمینه ای خود را اتخاذ کنند و کل ترکیب را با دقت اسکن کنند. چون حرکت چشم ها توسط ویژگی های مبنای عناصر تعیین می شود، ما باید ویژگی هایی را بر آن عناصر اعمال کنیم ( که از بیننده توقع داریم در فعالیت پس زمینه ای، اسکن خود را انجام دهد) که توجه را جلب می کند و بیننده را مجاب می کند که بماند و بیش تر بخواند.
و با این کار، متوجه بار شناختی بیننده می شویم که آیا می خواهند همچنان به ترکیب نگاه کنند یا خیر. به علت این کنتراست بالای مرئی در فعالیت پس زمینه ای؛ آن ها می توانند سریع تر تصمیم بگیرند و پیش بروند. آن ها مجبور نیستند فقط برای اینکه متوجه شوند نمی خواسته اند به ترکیب نگاه کنند کل ترکیب را اسکن کنند. این مسئله از درک اینکه چرا در طرح خود به کنتراست احتیاج داریم منشا می گیرد. حالا بیایید یاد بگیریم چگونه کنتراست را اعمال کنیم.
3. چگونه در طرح خود کنتراست را اعمال کنیم؟
کارکرد کنتراست می تواند توسط پاسخ به یکی از سوالات اساسی انجام شود – اولین چیز یا محدوده ی مشخصی از طرح که می خواهید بیننده به آن نگاه کند چیست؟. در اینجا آن چیز نیاز نیست حتما منطقی باشد، صرفا باید اولین مورد از مواردی باشد که توجه بیننده را جلب می کند و می تواند هر چیزی مثل علامت نقل قول در عکس پوستر بالا باشد – با اینکه آن ها به خاطر اینکه پوستر در مورد ادبیات است، آن جا هستند؛ ولی شما وقتی اطلاعات پوستر را می خوانید متوجه آن می شوید نه وقتی که در نگاه اول چشمان به پوستر می افتد.
حالا وقتی تصمیم گرفته اید که اول کدام عنصر را به بیننده نمایش دهید، همه ی کاری که باید بکنید؛ استفاده از ویژگی های مبنای عناصری است که بالاتر در موردشان صحبت کردیم تا آن را بیش تر به چشم بیاورید. در پوستر بالا، طراح از ویژگی هایی مثل رنگ، فاصله و مقیاس استفاده کرده است.
- رنگ پس زمینه و عنصر، بین این دو؛ ارتباط شکل و زمینه ی محشری را شکل داده است.
- فضای سفید بین عناصری با مرکز مشکی و بالا و پایین متن، برای بیننده درکی ایجاد کرده است که نگاه کردن به عنصر مرکزی بسیار مهم تر از سایرین است.
- اندازه ی عناصر مرکزی بنظر می آید بطور فوق العاده ای بزرگ هستند و این؛ علتی است که آن ها در مرکز توجه هستند.
اکنون چشمان بیننده خواهد دانست که در این سلسله مراتب 1) عناصر با مرکز مشکی، 2) متن سمت راست بالا و 3) متن سمت راست پایین را درک کند.
کنتراست و اصول گشتالت
تعداد زیادی از اصول گشتالت در مورد نمایش کنتراست به روش مستقیم و غیر مستقیم سخن می گویند، که در میان آن ها قصد داریم در مورد دو تا از آن ها بحث کنیم:
1. شکل و زمینه
در طراحی هر نوع ترکیب، باید تصمیم بگیریم شکل چیست و زمینه چه تعریفی دارد. این ارتباط به ما کمک می کند تا متن را برای هر چیز دیگری در ترکیب آماده کنیم. باید اطمینان حاصل کنیم که شکل و زمینه با یکدیگر در مسیری صحیح دارای کنتراست هستند تا بیننده برای تمایز هر کدام مشکلی نداشته باشد. اینجا در این مورد بیش تر بخوانید.
2. نقطه ی کانونی – زمینه ی مورد علاقه ی شما بجز عنصر غالب چیست؟
نقاط کانونی زمینه های مورد علاقه، تاکیدی یا تفاوتیِ به خصوصی در ترکیب هستند که توجه بیننده را تسخیر و نگهمیدارد. مانند صورتک پوستر بالا که یکی از زمینه های مورد علاقه می باشد. نقاط کانونی برای نگاه متفاوت از محیط اطراف بینندگان طراحی شده اند و کنتراست، به آن ها کمک می کند تا نگاهی متفاوت داشته باشند و توجهشان جلب شود. در مقاله های پیش رو در مورد موارد مشابه مباحثه خواهیم کرد.
تشابه در طراحی گرافیک و بصری
به این پوستر برمیگردیم ( لعنتی دارم عاشق این پوستر می شوم) ، چون قسمت مرکزی این پوستر را پوشانده ایم، بیایید قسمت سمت راست بالا را بررسی کنیم. بخشی که می توانیم کارکرد تشابه را در طراحی به علت ویژگی های مبنای مشابهی که در میان عناصر متن استفاده شده اند، ببینیم – رنگ، واریانس مشابه در رنگ، سبک حروف مشابه، اندازه ی فونت یکسان، وزن فونت یکسان، هم راستایی برابر، هم ترازی، فاصله ی خطوط برابر، طول خط و فاصله ی حروف یکسان. به علت تمام این مشابهت ها، فکر می کنیم عناصر این متن؛ قسمتی از یک گروه هستند. به علت توانایی در شناخت همین مشابهت هاست که انسان ها در یافتن الگو ها خبره هستند.
و دوباره از طریق پوستر بالا، می توانیم به سه سوال مرتبط با تشابه در طراحی که در ادامه می آیند پاسخ دهیم:
1. تشابه در سیاق طراحی بصری چیست؟
تشابه در سیاق طراحی بصری می تواند به معنای تشابه بین دو یا چند عنصر در ترکیب باشد. هر چه مشابهت بین عناصر بیش تر باشد، احتمال اینکه به عنوان بخشی از یک گروه نمایان شوند بالا تر است. تشابه همچنین یکی از اصول ادراک سازمانی گشتالت است.
2. چرا باید تشابه را در طراحی خود اعمال کنید؟
پاسخ این سوال در عمق دانش ذهنی و بصری انسان نهفته است؛ مخصوصا در پردازش بصری.
فعالیت زمینه ای زمانی است که بیننده به صورت آگاهانه شروع به نگاه کردن به ترکیب می کند و شروع به آگاه شدن از عناصر موجود می کند. ترکیب! در طی این پردازش، نرخ بار شناختی بر اساس اطلاعات موجود در ترکیب، شروع به افزایش می کند. اینجا، تشابه؛ تمایل طبیعی ما برای پردازش اطلاعات را تکمیل می کند.
واریانس بیش از حد در ویژگی های عناصر ترکیب، نشانه ای از در هم ریختگی، نویز و پیچیدگی است. اگر تیتر فرعی این مقاله از منظر اندازه و رنگ فونت متفاوت باشد، اگر تیتر، تیتر فرعی یا تیتر فرعی- فرعی یا تیتر ابتدایی باشد، قطعا گیج می شوید.
اتفاقی که می افتد این است که برای سر در آوردن از همه چیز در ترکیب، ما بصورت طبیعی، عناصر را در قطعاتی گروه بندی می کنیم تا اطلاعات بیش تری را در حافظه ی کاری خود ذخیره کنیم و به نرخ بار شناختی اجازه دهیم تا تعادل پیدا کند. ولی اگر شانسی برای گروه بندی اطلاعات به علت عدم تشابه بین عناصر وجود نداشته باشد، بار شناختی ممکن است شروع به افزایش در مسیر منفی کند و ممکن است تاثیر منفی روی بیننده داشته باشد چون ما آن ها را با اطلاعات بیش از حد رها کرده ایم تا خودشان اطلاعاتی را که غیر ضروری هستند کنار هم قرار دهند. اگر تشابهی در طراحی وجود نداشته باشد، بیننده قادر نخواهد بود تا از کل موضوع سر در بیاورد و در مورد اینکه چه چیزی را با چه ذخیره کند و چه چیزی را نکند، چه چیزی مهم است یا نیست، گیج می شود.
بنابراین، برای اینکه به بیننده اجازه دهیم اطلاعات را گروه بندی کند تا بتواند آن اطلاعات را ذخیره و بار شناختی را حفظ کند، باید تشابه را در طرح خود اعمال کنیم. بیایید ببینیم چگونه باید این کار را انجام دهیم؟
3. چگونه تشابه را در طرح خود اعمال کنیم؟
همانند اعمال کنتراست، اعمال تشابه می تواند توسط پاسخ به یکی از سوالات حیاتی انجام شود. کدام قسمت از اطلاعات هستند که عملکرد مشابهی دارند ( مثل آدرس، اطلاعات مخاطب یا لینک هایی که عملکردشان دریافت لینک ها یا لیست آیتم ها در منو است) که باید از بیننده انتظار داشته باشید تا آن را به عنوان بخشی از گروه درک کنند و مفهوم این عناصر با عملکرد مشابه را متوجه شوند؟
اکنون وقتی تصمیم گرفته اید که آن اطلاعات باید به عنوان بخشی از یک گروه درک شوند، تمام کاری که باید انجام دهید این است که از ویژگی های مبنای عناصر که بالاتر در مورد آن ها صحبت شد استفاده کنید تا آن ها را شبیه هم کنید. در پوستر بالا برای تبدیل عناصر متن در بخش سمت راست بالا به عنوان بخشی از یک گروه، طراح از ویژگی های مبنایی مثل اندازه ی فونت، طرح حروف، رنگ واریانس ( مشکی یا خاکستری)، هم راستایی ( چپ) استفاده کرده است و این علتی است که ما این عناصر متن را به عنوان بخشی از یک گروه درک می کنیم.
تشابه و اصول گشتالت
با تمام این اوصاف، ” تشابه” یکی از اصول مستقل گشتالت است. بسیاری از اصول گشتالت در مورد نشان دادن تشابه بصورت مستقیم یا غیر مستقیم است که در میان آن قصد داریم در مورد دو تا از آن ها بحث کنیم:
1. محدوده ی مشترک
همانطور که از نامش پیداست، برای نشان دادن تشابه بین تعدادی از عناصر – فقط کافی است آنها را به هر شکلی، احتمالاً توسط خط یا قطعه ای از پس زمینه محصور کنید. اکنون منطقه ی محصور شده، یک محدوه ی مشترک نامیده می‌شود که این عناصر در آن قرار دارند. با این کار می‌توانیم این عناصر را به عنوان بخشی از یک گروه نمایان کنیم.
2. همبستگی یکپارچه
اصل همبستگی یکپارچه با اتصال مجموعه ای از عناصر با عناصر انتزاعی (زیور آلات) یا عناصر کاربردی (تیر) شکل می گیرد تا آنها را به عنوان بخشی از یک گروه نشان دهد زیرا اکنون از نظر بصری به هم متصل شده اند. همبستگی یکپارچه یکی از قوی ترین اصول در اصول سازمان ادراکی گشتالت است.
ارتباط بین تشابه و کنتراست
از متن بالا، حتما متوجه شده اید که من سه مثال منحصر به فرد را برای نشان دادن کارکرد کنتراست و تشابه در طراحی بکار برده ام. اما حتما متوجه شده اید که من کارکرد متقابل این دو را در هر سه طرح نشان داده ام که باعث می شود متوجه شویم یکی بدون دیگری غیر ممکن است.
کنتراست به معنای فقدان تشابه است، تشابه به معنای فقدان کنتراست.
کنتراست و تشابه در واقع دو انتهای مخالف یک مقیاس هستند. در یک انتهای مقیاس، عناصر، متفاوت به نظر می رسند و از سوی دیگر، عناصر مشابه به نظر می رسند. فکر کردن به آنها در هنگام طراحی یک ترکیب، در واقع میتواند آن را تبدیل به اثری تاثیرگذارتر، جذاب تر، خوشایند تر، قابل انتقال‌تر و واضح تر و دارای تمام صفت‌های دیگر کند.
مثال های بیش تر کنتراست و تشابه
بیایید چند نمونه از طراحی رابط کاربری در وب سایت را در نظر بگیریم تا بفهمیم طراحان چگونه کنتراست و تشابه را اعمال کرده اند.
1. indiantypefoundry
متن مرکزی که با ” ITF یک ریخته‌گری از نوع دیجیتال است…” شروع می‌شود، یکی از متون اصلی است که شرکت می‌خواهد بیننده ابتدا آن را بخواند و به همین دلیل است که با استفاده از ویژگی مبنای اندازه ی فونت، کنتراست را روی آن اعمال کرده‌اند؛ فضای سفید.
در اولین برخورد نمی توانیم کاری کنیم جز اینکه اول این را بخوانیم. رنگ پس زمینه نیز با رنگ فونت در کنتراست است اما من فکر می‌کنم که یک نسخه ی روشن تر از خاکستری وجود دارد، زیرا اکنون کمی تیره به نظر می رسد.
در مرحله ی دوم، زیر متون “فونت“، “هندی” و “لاتین” خط کشیده شده است که کاربرد تشابه را در اثر نشان می دهد. اکنون برداشت ما از این متن ها به عنوان یکی از جذابیت ها و نکات اولیه در نسخه ی کلی می باشد. طراح از ما می‌خواهد که از نسخه ی کپی حداقل این سه کلمه را به خاطر بسپاریم. طراحان همیشه این کار را انجام می‌دهند – اگر می‌خواهیم تعداد معینی از چیزها را به خاطر بسپاریم، صرفا کاری می کنیم تا شبیه هم بنظر برسند که به خاطر پیدایش الگو به خاطر سپردن آن برای شما آسان تر می‌شود. و همچنین این سه متن قابل کلیک هستند.
2. Perfect Keto
محصولاتی که در سمت راست قرار گرفته اند، محصولاتی هستند که به دلیل کنتراست اعمال شده روی آنها در برابر عناصر دیگر مانند فضا، رنگ بسته بندی بسته ها با اشباع بالا، در نگاه اول توجه ما را به خود جلب می کنند. استفاده از چنین کنتراستی با کمک نسخه ی موجود در سمت چپ، به ما کمک می کند تا بفهمیم که وب سایت؛ غذاهای بسته بندی شده می فروشد. و ثانیاً، دکمه ی سبز رنگ؛ موردی است که بعد از محصولات توجه ما را به خود جلب می کند. بنابراین چیزی که می بینیم این است که چگونه طراح به سرعت بیننده را متقاعد یا کمک می کند تا بفهمد وب سایت دقیقا چه کاری انجام می دهد و بعد از آن با صرف نظر کردن از موارد بی اهمیت چه کاری باید انجام شود.
دو نوار وضعیت در اسلاید اول وجود دارد که شخصاً فکر می‌کنم پیچیده است اما اجازه دهید کارکرد تشابه در هر دو را ببینیم. در نوار اول، نوار سیاه در سمت راست، چهار آیکون از نمادها را می بینیم که ویژگی های مبنای مشابهی مانند رنگ، اندازه ی فونت، سبک آیکون، مجاورت و هم راستایی را به اشتراک می گذارند که باعث می شود بفهمیم این مجموعه از نمادها به یک گروه تعلق دارند و عملکردهای مشابهی مانند کلیک شدن و رفتن به صفحه ی بعدی را دارا هستند.
3. Coursera
اگر نمونه های بالا را خوانده باشید، باید بتوانید در اینجا اولین جذابیت تصاویر و دکمه ها را در بنر وب سایت کشف کنید. بیایید بخش های خاص کنتراست مانند نوار بالا در سمت راست را ببینیم، یک متن “ورود به سیستم” و یک دکمه ی “رایگان ملحق شوید” وجود دارد. اگر فقط به این قسمت توجه کنید، متوجه خواهید شد که دکمه ی ” رایگان ملحق شوید” در مقایسه با متن “ورود به سیستم” دارای کنتراست بالا تری است و طراح انتظار دارد بیننده ابتدا آن را ببیند. من فکر می کنم آن ها این کار را انجام دادند زیرا باید دریافت بازدید کنندگان جدید را در راس بازدید کنندگان بازگشتی قرار دهند، و احتمال بیشتری دارد که بازدیدکنندگان جدید ابتدا برای ورود؛ ثبت نام کنند. اگر بازدید کنندگان بازگشتی می توانستند؛ وضعیت را برعکس می کردند.
اکنون، تشابه غیر مشابهی در اینجاست. پس از بنر، ما یک ردیف از آرم سازمان‌هایی مانند ایلینویز، گوگل و دوک را می بینیم، با وجود اینکه همه ی آنها ویژگی‌های مبنای متفاوتی دارند و همه ی آن ها هنوز به عنوان بخشی از گروه در نظر گرفته می شوند – چرا؟ به دلیل نسبت نامرئی ثابت اندازه شان، همه ی آن ها در بین خود دارای ارتفاعات عینی و مجاورت مشابهی هستند. ثانیاً متن بالای این ردیف بیان می کند که این ها همه دانشگاه ها و شرکت هایی هستند که آن ها را به عنوان بخشی از یک گروه نشان می دهند.
4. BookMyShow
بطور ویژه در طراحی یا توسعه ی وب که در آن می توان چیز ها را پس از چند ثانیه یا با یک کلیک روی یک عمل، کنترل کرد؛ طراحان یا توسعه دهندگان نیاز دارند برخی کارها قبل از همه انجام شود زیرا این کارها، مسائل بعدی را برای بیننده تعیین می کنند.
به عنوان مثال در موارد بالا، وب سایت باید مکان کاربر را بداند تا بتواند رویدادها یا فیلم های آینده را فقط در آن مکان نشان دهد و به این ترتیب محتوا بر اساس آن معیار مکانی تعیین می شود. بنابراین، برای اجرای طرح این طراحان، وقتی بیننده وارد سایتی می شود، یک کادر اطلاعیه در مقابلش نشان داده می شود و سؤال خود را مانند موقعیت مکانی (که در بالا انجام داد) از آن ها می پرسد و با بکارگیری یک لایه ی خاکستری شفاف، محتوای باقی مانده ی سایت را در آن زمان مسدود می کند که از آن طریق بیننده می فهمد باید موقعیت مکانی خود را در کادر اطلاعیه پر کند تا جلوتر رفته و محتوای کامل را ببیند. طراحان فقط با استفاده از کنتراست قادر به انجام این کار هستند. در وب سایت فوق می توانیم ببینیم که چگونه کادر تعیین موقعیت مکانی با محتوای پوشیده شده، با یک لایه ی خاکستری شفاف در کنتراست است. کادر اطلاعیه در اینجا مانند شکل و محتوا به عنوان یک زمینه عمل می کند.
در کادر اطلاعیه ی طرح بالا، ردیف آیکون ها، کارکرد تشابه در اثر را از نظر وزن، ارتفاع عینی، فونت، اندازه ی فونت، وزن فونت، رنگ فونت، رنگ نماد و مجاورت به نمایش می گذارد.
5. Ballsystem
می گویند هیچ چیز مانند رنگ قرمز جلب توجه نمی کند. در این وب سایت وقتی روی منو کلیک می کنید – یک دایره ی قرمز ظاهر می شود و این لیست منو ظاهر می شود. این دایره به دلیل ویژگی های مبنا مانند رنگ قرمز و شکل بزرگ، تمام توجه را در ترکیب به خود جلب می کند. رنگ؛ با سیاهی پس زمینه و اندازه؛ با تمام اشکال یا عناصر کوچک اطراف در کنتراست است – شکل آنقدر بزرگ است که چشم ها ناخودآگاه به سمت آن جذب می شوند – بنابراین هدف مشاهده ی لیست منو هنگامی که روی دکمه ی منو کلیک می کنید؛ کامل می شود که باعث می شود متوجه شویم این یکی از بهترین کارکردهای کنتراست می باشد که در اینجا انجام شده است.
نتیجه گیری اصول کنتراست و تشابه (contrast and similarity) در طراحی گرافیک
وقتی از تشابه صحبت به میان می آید، فهرست موجود در دایره؛ فونت، اندازه ی فونت، فاصله ی خطوط و رنگ یکسانی دارد که کارکرد تشابه در اثر را نشان می دهد. اما من فکر می‌کنم که این ارائه میتواند بهتر باشد، زیرا بعد از “پایداری” هیچ نواری جز یک خط جدید وجود ندارد و امکان درک متن بعدی با عنوان “واحد های تجاری” به عنوان بخشی از “پایداری” وجود دارد؛ که واقعی نیست. این ها هر دو مواردی مستقل هستند. ممکن است بین «شرکت» و «پایداری» خط تیره وجود داشته باشد، یا برای ایجاد تمایز کار دیگری انجام شود. این تمایز را فقط زمانی میتوانید مشاهده کنید که نشانگر را روی یک آیتم معین قرار می دهید – زیرا موارد دیگر شفاف می‌شوند و آیتم ویژگی مبنا فقط زمانی که موس را حرکت می دهید یکسان می‌ماند.
در طراحی بصری، بسیار مهم است که برخی چیزها متفاوت و برخی یکسان باشند. تصمیم گیری در مورد اینکه چه چیزی باید برجسته باشد و چه چیز دیگری نباشد؛ یکی از اجزای سازنده ی طراحی است. مثل این است که تصمیم بگیرید کدام یک از عکس‌های خانوادگی تان نسبت به سایر عکس های مشابه روی دیوار به چشم بیاید. شما همیشه کارکرد کنتراست و تشابه را با هم خواهید دید، زیرا هیچ یک بدون دیگری وجود ندارد.
طریقی که کنتراست و تشابه را اعمال می کنیم؛ باعث ایجاد درک بصری، سلسله مراتب اطلاعات، ترسیم و جریان چشم، و تعادل ترکیبی می شود – موضوعاتی که با ادامه ی مقالات در همین مجموعه آشنا خواهیم شد – اصل طراحی.
