اصول ضروری طراحی بصری در طراحی سایت اصول ضروری طراحی بصری در طراحی سایت

اصول ضروری طراحی بصری در طراحی سایت

طراحی سایت زمان مطالعه : ~ 17 دقیقه 19 شهریور 1399

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

1. ظهور

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

منظور از ظهور در طراحی سایت چیست؟

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

2. اصلاح

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

بنابراین اصلاح مجدد برای طراحی به چه معناست؟

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

3. چند منظوره بودن

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

گلدان

چند قابلیت پذیری برای طراحی چیست؟

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

فدکس

4. عدم تغییر

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

منظور از عدم تغییر برای طراحی چیست؟

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

استفاده از اصول گشتالت (Gestalt ) در طراحی وب

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

المپیک

بسته شدن (Closer)

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

لوگو

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

تقارن و نظم

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

شکل / زمین

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

شکل

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

اتصال یکنواخت

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

شکل

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

فلش

مناطق مشترک

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

گوگل

در تصویری که برگرفته از سایت (Google Now) است، طراح از باکس های بسیار بزرگ استفاده می کند تا ما را به درک برساند که عنوان، تصویر و پاراگراف ها همه با هم مرتبط هستند.بنابراین بلافاصله متوجه می شویم که اطلاعات، درست و در زمان مناسب موضوع تصویر را تعریف می کند و گروه جدیدی از عناصر را می سازد.

مجاورت

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

ادامه

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

خطوط منحنی

هم زمانی

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

نقاشی

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

موازی کاری

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

متن

شباهت

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

شباهت

نقاط کانونی

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

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

تجربیات گذشته

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

صفحات مشابه

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