پنج اصل طراحی بصری و UX

پنج اصل طراحی بصری و UX

دوستان عزیز سکان آکادمی سلام. امیدوارم خوب و در مسیر پیشرفت باشید.

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

توی این مقاله، تاثیر این 5 اصل طراحی بصری رو بر UX بررسی می کنیم:

  1. مقیاس (Scale)
  2. سلسله مراتب بصری (Visual hierarchy)
  3. تعادل (Balance)
  4. تضاد (Contrast)
  5. گشتالت (Gestalt)

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

پنج اصل طراحی بصری در طراحی تجربه کاربری (UX)

بیاید در ادامه این اصول رو بررسی کنیم و مثال هایی از هر کدوم ببینیم:

مقیاس (Scale)

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

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

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

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

Medium برای نسخه ی آیفون: مقاله های محبوب، از نظر بصری بزرگ تر از  بقیه ی مقاله ها هستن. این مقیاس کاربران رو به سمت مقاله ی جذاب تر سوق می ده.
در این پارکینگ در کراکوف، مهم ترین اطلاعات (منطقه H - جایی که هم اکنون در پارکینگ قرار دارید) بزرگ ترین اندازه هست. (منبع تصویر: www.behance.com)

سلسله مراتب بصری (Visual hierarchy)

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

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

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

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

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

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

موبایل اپلیکیشن Medium: سلسله مراتب بصری روشنی از عنوان، زیرنویس و متن اصلی وجود داره. هر جزء مقاله در اندازه ای برابر با اهمیت اونه.
برنامه ی تلفن همراه Uber: سلسله مراتب بصری در برنامه تلفن همراه Uber شفافه. صفحه به دو بخش، بین نقشه و فرم ورودی تقسیم شده (نیمه پایین صفحه)، که این تفکر  رو تقویت می کنه که این اجزا به همون اندازه برای کاربر مهم هستن. چشم بلافاصله به دلیل پس زمینه خاکستری، به سمت "Where to" کشیده می شه و بعد به " مکان های اخیر " زیر اون، که از نظر اندازه قلم کمی کوچک تر هستن، وارد میشه.
برنامه ی تلفن همراه Dropbox: سلسله مراتب بصری در برنامه ی تلفن همراه Dropbox کم تر مشخصه. اگرچه اندازه ی متن توضیحی کمتر از نام پروندست، اما تشخیص اون ها از بین پرونده های مختلف دشواره.

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

3. تعادل (Balance)

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

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

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

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

انواع تعادل:

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

نامتقارن: عناصر به طور نامتقارن نسبت به محور مرکزی توزیع می شن.

شعاعی: عناصر از یه نقطه ی مشترک مرکزی در جهت دایره ای قرار می گیرن.

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

Hub Style Exploration: ترکیب دارای ثباته و تعادل در اینجا متقارنه. اگر بخواهید یه محور عمودی خیالی رو از مرکز وب سایت بکشید، عناصر به طور مساوی در دو طرف محور توزیع می شن. (منبع تصویر: dribbble.com)
Nike: این صفحه به صورت نامتقارن متعادله و به شما حس انرژی و حرکت رو می ده که برای برند Nike مناسبه. اگه بخواید یه محور عمودی، روی این تصویر بکشید، تعداد عناصر پایین تصویر، در هر دو طرف محور تقریباً یکسانن. با این حال، تفاوت در اینه که یکسان نیستن و در مکان های دقیق مشابهی قرار دارن. حتی اگه از نظر فنی کمی متن در سمت چپ کفش وجود داشته باشه، با متن بزرگ تر در سمت راست که فضای بیشتری و وزن بصری رو اشغال می کنه، متعادل میشه، بنابراین باعث می شه کاملاً شبیه به هم باشن.
ساعت مچی Brathwait: این ساعت کلاسیک از نظر شعاعی متعادله. چشم بلافاصله به مرکز صفحه ساعت کشیده میشه و تمام وزن بصری به طور مساوی توزیع میشه، صرف نظر از اینکه محور خیالی کجا کشیده شده.

4. تضاد (Contrast)

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

تعریف: اصل تضاد، به معنی کنار هم قرار دادن عناصریه که از نظر بصری غیرمشابهن، برای بیان این واقعیت که این عناصر متفاوتن (برای مثال، به دسته های مختلف تعلق دارن، عملکردها ورفتارهای متفاوتی دارن).

به عبارت دیگه تضاد، تفاوت چشمگیری رو بین دو عنصر (یا بین دو مجموعه اشیا) برای تأکید بر متمایز بودن اون ها ایجاد می کنه.

اصل تضاد اغلب از راه رنگ اعمال میشه. برای مثال، رنگ قرمز اغلب در طراحی رابط کاربر، به ویژه در iOS، به معنای حذفه. رنگ روشن نشون میده که یه عنصر قرمز با بقیه متفاوته.

برنامه ی یادآوری در iOS: رنگ قرمز، که تضاد بالایی با زمینه داره، برای حذف انتخاب شده.

اغلب، در UX کلمه "Contrast" تضاد بین متن و پس زمینه رو به ذهن میاره. گاهی اوقات طراح ها برای اینکه متن با اهمیت کم رو نمایش بدن به طور عمدی کنتراست رو کم می کنن اما این روش خطرناکه. کاهش تضاد متن خوانایی رو هم کاهش می ده و ممکنه محتوایی رو غیرقابل دسترس کنه. برای اطمینان از اینکه مطالب هنوز هم توسط همه کاربرای هدف خونده میشه، باید از یه تضاد رنگ استفاده کرد.

Greenhouse Juice Co: خوانایی متن روی بطری به رنگ آب میوه بستگی داره. اگرچه این تضاد برای بعضی از آب میوه ها به خوبی عمل می کنه، اما خوندن برچسب های بطری هایی با آب میوه رنگ روشن تقریباً غیرممکنه.(منبع تصویر: www.instagram.com)

اصول گشتالت (Gestalt Principles)

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

تعریف: اصول گشتالت توضیح می ده که چطور انسان ها با قرار دادن ناخودآگاه قطعات در یه سیستم سازمان یافته که یه کل رو ایجاد می کنه، تصاویر پیچیده ی متشکل از بسیاری المان رو ساده و سازماندهی می کنه نه اینکه اون ها رو به عنوان یه سری عناصر متفاوت تفسیر کنه. به عبارت دیگه، اصول گشتالت تمایل ما به درک کل رو در مقابل عناصر فردی نشان می ده. چند اصل گشتالت وجود داره، از جمله شباهت (Similarity)، تعقیب (Continuation)، بسته شدن (Closure)، نزدیکی (Proximity)، منطقه ی مشترک (Common region)، شکل/زمین (Figure/Ground)، و تقارن (Symmetry) و نظم (Order).

نزدیکی (Proximity) به ویژه برای UX خیلی مهمه و این اشاره به این واقعیت داره که مواردی که از نظر بصری به هم نزدیکترن به عنوان بخشی از یه گروه درک میشن.

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

در تصویر زیر پرکاربردترین اصول گشتالت رو به طور خلاصه واستون گردآوری کردم.

پرکاربردترین اصول گشتالت

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

چرا ما باید اصول طراحی بصری رو مورد توجه و درک قرار بدیم؟ فراتر از ساختن چیزی که "زیبا به نظر می رسه"، درک و استفاده از این اصول به موارد زیر کمک می کنه: 

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

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

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

امیدوارم این مقاله براتون مفید واقع شده باشه. خوشحال میشم نظراتتون رو باهام به اشتراک بگذارید و این مقاله رو با دیگر دوستان علاقه مندتون به اشتراک بگذارید.

برقرار باشید.

منابع:

/https://www.nngroup.com/articles/principles-visual-design

https://www.interaction-design.org/literature/topics/gestalt-principles

https://www.smashingmagazine.com/2014/03/design-principles-visual-perception-and-the-principles-of-gestalt/

از بهترین نوشته‌های کاربران سکان آکادمی در سکان پلاس


online-support-icon