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

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

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

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

اصول گشتالت چیست؟

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

  • بسته
  • سرنوشت مشترک
  • منطقه مشترک
  • تداوم
  • شکل-زمین
  • نقطه کانونی
  • نزدیکی
  • شباهت
  • تقارن
  • اتصال یکپارچه

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

  • الگوها را بشناسید.
  • عناصر را با هم گروه کنید.
  • مجتمع را ساده کنید.

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

اگر نگاهی به تم فارست به عنوان مثال، سربرگ وب سایت، مجموعه ای از اصول گشتالت را در بازی خواهید دید:

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

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

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

5 اصل گشتالت که استفاده از وب سایت های شما را آسان تر می کند

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

1. مجاورت

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

دو گروه مجزا از اشیاء
2 گروه مجزا از اشیاء

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

به عنوان مثال، این یک اسکرین شات از یک صفحه فهرست است قالب وردپرس HomeID:

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

2. منطقه مشترک

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

مناطق مشترک
پاک کردن مناطق مشترک دیکته شده توسط مرزهای بصری

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

به عنوان مثال، وب سایتی که به همین ترتیب به روند طراحی مسطح 2.0 پایبند است آوادا دمو برای عناصر خاصی به مرز نیاز دارد:

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

3. اتصال یکپارچه

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

اتصال یکپارچه
اتصال

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

همچنین می توانید از خطوط به عنوان عنصر تزئینی استفاده کنید Betheme در این نسخه نمایشی انجام می دهد و استنباط ظریفی در مورد اتصال اشیاء می کند:

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

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

4. تداوم

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

حرکت مداوم را دنبال کنید
حرکت مداوم را دنبال کنید..

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

شما می توانید از انواع عناصر برای ایجاد یک مسیر بصری در یک صفحه وب استفاده کنید. در اینجا نحوه PetHub قالب این کار را انجام می دهد:

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

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

5. شباهت

اصل شباهت بیان می کند که ذهن ما عناصری را که دارای ویژگی های مشترک هستند با یکدیگر مرتبط می کند. لازم نیست خود عناصر 100% یکسان باشند. تنها چیزی که نیاز است یک ویژگی متمایز مشترک است – مانند رنگ، شکل یا انیمیشن.

cta مشابه
دو شی، به وضوح به هم مرتبط هستند، اما فقط به دلیل یک شباهت

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

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

این آلبرت قالب وب سایت به خوبی این را نشان می دهد. دکمه اصلی طراحی برجسته ای دارد:

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

از سوی دیگر، فراخوان‌های ثانویه با طراحی ظریف‌تری همراه هستند:

طراحی دکمه شبح – جایی که دارای یک طرح کلی است و داخل آن شفاف است – هنوز در رابط کاربری برجسته است. با این حال، برای جلب توجه زیاد فریاد نمی زند.

بقیه چطور؟

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

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

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

این نوع توهم نوری برای بازی کردن جالب است، اما چیزی نیست که بتوان از آن استفاده معمول کرد.

نتیجه

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

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

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

با Tuts+ اصول طراحی را بیشتر بیاموزید

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