طراحی رابط کاربری یکی از کارهای جذابی است که من دوست دارم . به غیر از زیبایی رابط کاربری باید به هارمونی و رنگبندی و نکات ریز دیگر نیز توجه کرد تا به یک رابط کاربری کاربرپسند و کاربردی برسیم.

امروز با چند نکته ریز در طراحی رابط های کاربری آشنا میشیم که در پروژه های روزمره  به شما کمک می کنند تا رابط کاربری بهتر با UX بالاتری بسازید.

۱.اضافه کردن سایه به زیر متن وقتی متن روی پس زمینه روشن قرار دارد، نه تنها به بالا رفتن خوانایی آن کمک می کند بلکه باعث می شود بیشتر به چشم بیاید.

۲.با انتخاب طیف رنگی با زاویه ۱۰º یا حداکثر ۲۰º می توانید Gradient های با طراوت تری داشته باشید .

۳.واقعا حالت Hover را در سایت Stripe.com دوست دارم.۱px شیفت به بالا و افزایش سایه زیرین.

۴.به باکس های سایت مقدار کمی سایه دهید و کمی هم فاصله از اطراف تا طبیعی تر به نظر برسد.

۵.چینش متون به شکل سر راست به تمیز شدن رابط کاربری شما کمک می کند و باعث می شود محتوا راحت تر اسکن شود.

۶.همیشه متنی که خاکستری رنگ باشد روی یک پس زمینه رنگی ، خاموش دیده میشود. یه راه حل ساده این است که متن را کمی همرنگ پس زمینه کنید.

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

۸.استفاده از یک آیکن عمومی مثل فلش یا تیک به جای دایره استاندارد لیست های HTML، یک راه عالی برای افزودن جذابیت بصری به لیست های نامرتب است.

۹.اضافه کردن نوار رنگی بالای صفحه (به ارتفاع ۴ تا ۶px) یک راه حل سریع برای زنده تر کردن طراحی است.

۱۰. این راه حل برای modal ها و در بعضی موارد panel ها هم خوب کار می کند. حتی استفاده از دو رنگ نزدیک به هم مثل نمونه بالا، می تواند آن را خیلی جذاب تر کند.

۱۱.یک تکنیک برای جدا کردن عنوان پنل این است که به جای استفاده از خط جداکننده، به بخش زیرین کمی پس زمینه اعمال کنید.

۱۲.در کنار سایز و زخامت ، استفاده از رنگ و کنتراست راه خوبی برای ایجاد هارمونی در تایپوگرافی است.

۱۳.اگر شک دارید، سایز فونت ۱۶px به همراه ۱.۵ ارتفاع خط(line height) برای متون صفحه امن و مناسب است.

۱۴. در متون انگلیسی استفاده از حروف بزرگ گاهی می تواند خواندن آن را کمی سخت کند. در این مواقع استفاده از دستور letter-spacing می تواند فضای بیشتری برای تنفس بدهد.

۱۵.موقع کشیدن دوایر یا زوایای گرد دقت کنید تا فضای پیکسل را پر کند. این کار به بهتر دیده شدن آن کمک می کند.

۱۶.چطور یک نقشه زیبا بدون داشتن مهارت های طراحی ایجاد کنیم؟ 🙂

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

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

۱۹.عکس اشباع شده + رنگ تو چشم برو + دستور blend-mode با مقدار multiply. گزینه مناسبی برای ایجاد پس زمینه با کنتراست بالا نسبت به متن سفید.

۲۰.ایجاد هم پوشانی بخش های صفحه راه حل خوبی برای ایجاد عمق و همچنین تشویق کاربران برای اسکرول صفحه است.

۲۱. یک لینک نامحسوس برای گزینه ثانویه خیلی بهتر از گذاشتن یک دکمه بزرگ است.

۲۲.بحث سر سلسله مراتب است. شما می خواهید دکمه اصلی بسیار بیشتر از دکمه های ثانویه در چشم باشد.

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

۲۴.همچنین می توانید Border دکمه ثانویه را کمی روشن تر کنید تا متن آن بیشتر تو چشم باشد.

۲۵.استفاده زیاد از border می تواند طراحی را کمی شلوغ کند.راه حل هایی وجود دارد تا طرح سبک تری داشته باشیم.

۲۶. این طرح دو ستونه فرم برای سازماندهی فیلدهای طولانی و پر کردن مانیتورهای عریض مناسب است بدون اینکه مجبور باشیم از فیلدهای طولانی ناخوشایند استفاده کنیم.

۲۷.استفاده از سایز فونت همیشه نمی تواند راه حل خوبی برای نمایش تاکید یا عدم تاکید روی متنی باشد. سعی کنید از رنگ و زخامت فونت به جای آن استفاده کنید.

۲۸. طراحی جداول خوب و زیبا می تواند کار سختی باشد. ولی با چند ایده ساده می توانید تغییرات بزرگی ایجاد کنید.

۲۹.جزئیات کوچک موقع طراحی کامپوننت های طراحی مان گاهی بسیار مهم هستند. به طور مثال به Input ها می توان به روش های مختلفی که می بینید استایل داد.

۳۰.جزئیات کوچک موقع طراحی کامپوننت های طراحی مان گاهی بسیار مهم هستند. به طور مثال به Input ها می توان به روش های مختلفی که می بینید استایل داد.

خوشحال میشیم نظرات تون رو با ما در میان بگذارید.

منبع