۱۳ اصل پایه در طراحی بصری

عناوین مطلب

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

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

وحدت و هماهنگی بصری (Unity)

زمانی که تمامی اصول دیزاین به‌صورت بصری و مفهومی هماهنگ باشند، به وحدت دست می‌یابیم. برای ایجاد وحدت و هماهنگی، عناصر بصری باید به شکلی طبیعی یکدیگر را تکمیل کرده یا حتی کامل کنند؛ مانند شکل، تناسب (Proportion)، رنگ و ترازبندی.

وحدت، کلید انتقال مفاهیم به روشی شفاف و منسجم است. دیزاین‌هایی که وحدت خوبی دارند، منظم به نظر می‌رسند و از کیفیت بالاتری برخوردارند. وب‌سایت‌های دهه 90 با استفاده از ترکیب رنگ‌ها، فونت‌ها، و ترازهای مختلف، سبکی به نام بروتالیسم (Brutalism) را نشان می‌دادند؛ سبکی که عمداً ظاهری خام، بی‌نظم و حتی ناخوشایند داشت. هرچند این سبک در زمان خود قابل تحسین بود، اما نبود وحدت در آن‌ها باعث می‌شد کاربران هر عنصر را به‌صورت جداگانه پردازش کنند و تمرکز بر پیام اصلی دشوار باشد.

ترازبندی و ساختار (Alignment)

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

  • تراز لبه‌ای (بالا/پایین یا چپ/راست)
  • تراز مرکزی

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

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

اصل مجاورت و گشتالت(Proximity)

اصل مجاورت یکی از مفاهیم مرتبط با نظریه گشتالت است؛ مکتبی در روان‌شناسی که بر این باور است ذهن انسان عناصر فردی را به‌صورت یک کل ادراک کرده و همیشه به دنبال نظم‌دهی به بی‌نظمی است.

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

مجاورت به دیزاین نظم می‌بخشد و ارتباط بین گروه‌های محتوا را نشان می‌دهد. این اصل از تعادل (Balance) و سلسله‌مراتب بصری (Visual hierarchy) پشتیبانی می‌کند و به‌طور نزدیک با اصل تکرار (Repetition) مرتبط است.

اصل تعادل (Balance)

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

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

  1. چیدمان متقارن: عناصر را به‌طور مساوی در دو طرف یک محور مرکزی فرضی توزیع می‌کند.
  2. چیدمان نامتقارن: عناصر به‌طور نامساوی توزیع می‌شوند و اغلب پویاتر به نظر می‌رسند.

اصل کنتراست (Contrast)

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

کنتراست فقط جنبه زیبایی ندارد و یکی از بخش‌های مهم دسترس‌پذیری نیز محسوب می‌شود.

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

اصل تأکید (Emphasis)

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

  • کنتراست تفاوت بین دو عنصر را ایجاد می‌کند.
  • تأکید تمرکز بر یک عنصر را افزایش می‌دهد تا آن را به نقطه کانونی توجه کاربران تبدیل کند.

چرا تأکید اهمیت دارد؟

بر اساس اثر فون رستورف (Von Restorff Effect) یا اثر جداسازی، افراد به احتمال زیاد چیزی را که از بقیه متفاوت است، به یاد می‌آورند، مخصوصاً وقتی چندین عنصر مشابه در کنار هم وجود دارند.

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

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

اصل تکرار (Repetition)

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

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

تکرار همچنین باعث ایجاد هماهنگی (Harmony) و وحدت (Unity) در دیزاین می‌شود و برای سبک‌های تایپوگرافی و پالت‌های رنگی که در بخش‌های مختلف یک دیزاین استفاده می‌شوند، حیاتی است.

اصل حرکت (Movement)

Movement design principle

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

برای هدایت کاربران در دیزاین می‌توان از روش‌های زیر استفاده کرد:

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

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

اصل فضای منفی (Negative space)

Negative space design principle

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

فضای منفی باعث می‌شود:

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

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

اصل سلسله‌مراتب (Hierarchy)

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

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

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

نکته حرفه‌ای: در استفاده از کنتراست و تأکید دقت کنید؛ اگر همه‌چیز تلاش کند توجه جلب کند، در نهایت هیچ‌چیزی برجسته نخواهد شد.

اصل تناسب (Proportion)

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

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

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

نکته حرفه‌ای: مطمئن شوید که تناسب فونت‌ها بیش از حد افراطی نیست. به‌عنوان مثال، اگر اندازه متن اصلی ۱۶ پیکسل است، استفاده از اندازه ۳۲ پیکسل یا کمی بزرگ‌تر برای تیترها احساس هماهنگی بیشتری ایجاد می‌کند تا استفاده از اندازه ۹۶ پیکسل.

اصل تداوم (Continuation)

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

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

اصل شکل و زمینه (Figure-ground)

Figure-ground design principle

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

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

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

عناوین مطلب