قواعد اساسی طراحی رابط کاربری یا UI Design

قواعد اساسی طراحی رابط کاربری یا UI Design

مشخصات مقاله

قواعد اساسی طراحی رابط کاربری یا UI Design

 

اگر شما از دانش مقدماتی در کدنویسی HTML و CSS برخوردار هستید و می خواهید یک رابط کاربری یا UI: User-Interface جذاب و کاربرپسند طراحی کنید، این مقاله مناسب شماست. در این مقاله مهارت های شما را در زمینه طراحی رابط کاربری ارتقا می دهیم و 7 قاعده اساسی و مهم زیر را آموزش خواهیم داد:
– فضای سفید یا white space
– ترازبندی یا alignment
– تضاد یا contrast
– مقیاس یا scale
– تایپوگرافی یا typography
– رنگ یا color
– سلسله مراتب بصری یا visual hierarchy

 

1- فضای سفید (white-space):

اولین قاعده اساسی که در طراحی رابط کاربری مورد بررسی قرار می دهیم فضای سفید یا خالی است. به فضای بین المان های صفحات وب white-space گفته می شود.
اگر المان های صفحات وب بدون هیچ فاصله ای در نظر گرفته شوند علاوه بر اینکه فاقد جذابیت بصری هستند قابلیت خوانایی کمتری نیز خواهند داشت.
ما می توانیم با تعریف استایل های مختلفی مانند padding, margin, line-height فضای خالی موردنظر را بین المان های صفحات وب سایت خود در نظر بگیریم.

 

2- ترازبندی (Alignment):

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

تراز بودن المان های صفحه وب

3- تضاد (Contrast):

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

رعایت تضاد بین المان های یک صفحه وب

اگر تضاد در یک صفحه وب یا اپلیکیشن بخوبی رعایت شده باشد باعث می شود صفحه کاربر پسندتر و در دسترس تر باشد. در نهایت به تجربه کاربری یا ux بالاتر منتهی می شود.

 

4- مقیاس (Scale):

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

 

5- تایپوگرافی (Typography):

تایپوگرافی تاثیر زیادی روی رابط کاربری یا UI دارد. به روش های مختلفی می توان تایپوگرافی را در صفحات وب یا موبایل رعایت کرد. مانند فونت سایز مناسب، فونت خوانا، ارتفاع خطوط مناسب برای پاراگراف های متون یا line-height حفظ فاصله مناسب بین کاراکترهای متن یا letter spacing، ترازبندی محتوای سایت، رنگ متون و غیره…
بعنوان یک قانون کلی سعی کنید بیش از دو نوع فونت یا font-family در یک صفحه وب استفاده نکنید. مطمئن شوید که تمام المان ها بخوبی در کنار هم قرار گرفته اند و خوانایی مناسبی دارند. بعنوان مثال در تصویر زیر مبحث ترازبندی متون در نسخه موبایل وب سایت را مشاهده می کنید:

تایپوگرافی

در تصویر فوق مشخص است که نحوه تراز بندی متون وب سایت در نسخه موبایل بهتر است که بصورت چپ یا راست باشد. در واقع برای متون انگلیسی استایل text-align: left و برای متون فارسی استایل text-align: right تعریف شود.
سعی کنید از استایل های text-align: center و justify استفاده نشود (دو تصویر وسط و راست)

 

6- رنگ (Color):

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

 

7- سلسله مراتب بصری (Visual Hierarchy):

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

بعنوان مثال به تصویر زیر دقت کنید:

سلسله مراتب بصری

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

 

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

3.5/5 (2 نظر)

اطلاعات مقاله

قواعد اساسی طراحی رابط کاربری یا UI Design

فرم ارسال دیدگاه درباره

تفاوت رابط کاربری (UI) و تجربه کاربری (UX)

دیدگاه کاربران درباره

تفاوت رابط کاربری (UI) و تجربه کاربری (UX)