7 نکته کاربردی در طراحی ui

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

1. از رنگ و وزن برای ایجاد سلسله مراتب به جای اندازه استفاده کنید.

از 2 یا 3 رنگ استفاده کنید:

یک رنگ تیره (اما نه سیاه) برای محتوای اصلی (مانند عنوان مقاله)

خاکستری برای محتوای ثانویه (مانند تاریخ انتشار مقاله)

خاکستری سبکتر برای محتوای جانبی (مثلا برای اعلامیه حق چاپ در یک صفحه)

به طور مشابه ، معمولاً دو وزن قلم برای کاربری UI کافی است:

وزن فونت معمولی (400 یا 500 بسته به فونت) برای بیشتر متن

وزن قلم سنگین تر (600 یا 700) برای متنی که می خواهید روی آن تاکید کنید.

برای ui از وزن فونت زیر 400 استفاده نکنید، فونت کوچکتر از 400 برای عناوین بزرگ مناسب است اما برای اندازه های کوچکتر مناسب نیست اگر می خواهید از وزن کمتر برای تاکید کمتر برمتن استفاده کنید به جای آن از یک رنگ روشنتر یا اندازه کوچکتر فونت استفاده کنید.

2. از متن خاکستری در زمینه های رنگی استفاده نکنید.

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

زمانی که با بک گراند رنگی کار می کنید 2 راه برای کاهش کنتراست وجود دارد:

کاهش opacity: از رنگ سفید استفاده کرده و opacity را کم کنید.
رنگی را انتخاب کنید که بر اساس پس زمینه باشد: زمانی که بک گراند شما تصویر یا طرح دار باشد بهتر است به جای سفید با opacity کمتر، رنگی بر اساس پس زمینه انتخاب کنید. رنگی مانند پس زمینه انتخاب کنید و saturation و lightness را تغییر دهید تا زمانی که از نظر ظاهری خوانا باشد.

3. سایه ها

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

4.از border کمتر استفاده کنید.

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

به جای استفاده از border ها راه های زیر را امتحان کنید:

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

5.اندازه آیکون ها

آیکون هایی که با اندازه 16 تا 24 پیکسل کشیده شده اند فاقد جزئیات هستند وقتی سه تا چهار برابر بزرگ می شوند نامناسب هستند.

اگر میخواهید از نمادهای کوچک استفاده کنیدمی توانید به آنها پس زمینه اضافه کنید.

6. استفاده از accent border برای اضافه کردن رنگ به طراحی

اگر شما طراح گرافیک نیستید نمی توانید از تصویرسازی ها برای زیبایی ui استفاده کنید یک راه حل استفاده از accent border های رنگارنگ است مثلا در کنار یک پیام هشدار:

یا برای هایلایت آیتم های فعال در navigation:

حتی برای بالای طرح شما:

اگر انتخاب رنگ برای شما سخت است از https://dribbble.com/colors استفاده کنید.

7.هر دکمه ای نیاز به رنگ بک گراند ندارد.

چهارچوب هایی مانند bootstrap منویی از سبک های معنایی برای زمانی که می خواهید یک دکمه را اضافه کنید ارائه کرده است مثلا دکمه حذف قرمز و دکمه مربوط به ثبت سبز باشد.

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

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

اقدامات ثانویه باید واضح و روشن باشند اما برجسته نباشند سبک های outline و بک گراند با کنتراست پایین تر بهترین گزینه اند.

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