مقایسه تصویری بین رابط های کاربری | قسمت سوم

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

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

طراحی بهتر سایت با UI مناسب

مقایسه شماره ۱۵ :

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

مقایسه شماره ۱۶ :

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

مقایسه شماره ۱۷ :

این مقایسه هم تکمیل کننده مقایسه قبلی است. برای طراحی سایت با UI خوب نباید از چندین رنگ متضاد در طرح استفاده کرد.

استفاده از پیشفرض ها در طراحی سایت

مقایسه شماره ۱۸ :

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

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

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

مقایسه شماره ۱۹ :

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

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

مقایسه شماره ۲۰ :

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

مقایسه شماره ۲۱ :

استفاده از آیکون با نام آن بهتر است تا استفاده از آیکون تنها. در تصویر زیر این مورد مشخص شده است.

 

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

شاد و پیروز باشید.

مشاهده قسمت چهارم

منبع: goodui.org

امیر محمود کنگرلو

امیر محمود کنگرلو

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

اشتراک گذاری

اشتراک گذاری در facebook
اشتراک گذاری در linkedin
اشتراک گذاری در email
اشتراک گذاری در twitter
اشتراک گذاری در whatsapp
اشتراک گذاری در telegram

مطالب مرتبط

افزونه کروم ویژه طراحان سایت

۶ افزونه کاربردی کروم برای طراحان سایت

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *