قوانین یا اصول مهم برای طراحی UI های جذاب – قسمت سوم

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

قوانین یا اصول مهم برای طراحی UI های جذاب – قسمت سوم

قانون یا اصول پنجم طراحی UI: متن ها را pop و un-pop کنید

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

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

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

• Size (اندازه بزرگ و کوچک)
• Color (رنگ که شدت آن می تواند به جلب کردن بیشتر توجه، کمک کند)
• Font weight (فونت ضخیم یا نازک)
• Capitalization (حروف کوچک با بزرگ)
• Italicization (کج کردن متن)
• Letter spacing (فاصله بین حرف)
• Margins (این خصیصه بصورت فنی مربوط به متن نیست اما برای جلب توجه ها به متن، استفاده می شود)

موارد دیگری نیز وجود دارد که برای جلب توجه کاربرد دارد اما به دلیل دور بودن از زیبایی UI چندان توصیه نمی شود، مانند:

• Underline (زیر خط برای لینک به کار می رود)
• Text background color (رنگ پس زمینه برای متن)
• Strikethrough (خط کشیدن روی متن)

استایل دادن به متن به دو صورت Up-pop و down-pop

بطور کلی می توان طراحی رابط کاربری یا UI برای متن را به دو دسته زیر تقسیم کنیم:

• استایل دادن به جهت جلوه دادن حداکثری به متن. به روش های Bold کردن، بزرگ کردن اندازه متن، نوشتن با حروف بزرگ و …
• استایل دادن به جهت حداقل کردن جلوه متن در UI که بر عکس روش قبل با روش های کوچک کردن اندازه متن، کم کردن margin و .. انجام می شود.

همانطور که می بینید در عکس فوق عنوان به صورت up-pop پیاده شده و بسیار Bold، با اندازه فونت بزرگ، با contrast بالا است.

مجددا در عکس فوق نیز عنوان بسیار Bold و با فونت بزرگ نوشته شده و در عوض آیتم های فوتر به صورت down-pop نوشته شده با اندازه فونت کوچک و با contrast پایین و بصورت regular هستند.

نکته:‌
عناوین در صفحات تنها عناصری هستند که همیشه بصورت up-pop طراحی و پیاده می شوند. درصورتی که بقیه عناصر در صفحه هم می توانند up-pop باشند و هم down-pop .

اگر شما در صفحه وب سایت خود عنصری دارید که نیاز به تاکید بسیار دارد، پس بهتر است هردو حالت up-pop و down-pop را بر روی آن اعمال کنید اما استایل شما باید بیشتر مایل به up-pop باشد.

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

طراحی وب سایت Blu Homes (تصویر فوق) را می بینید که می توان گفت بسیار بی نقص طراحی شده است. همانطور که می بینید قصد طراح جلب توجه بیننده به کلمه better بوده پس هر دو تکنیک up-pop و down-pop بر روی این کلمه پیاده شده است.

کلمه با حروف کوچک نوشته شده در مقابل بقیه کلمات جمله که همه با حروف بزرگ است که این تکنیک down-pop است.

تنها کلمه better بصورت italic پیاده شده است در مقابل بقیه کلمات این جمله که همه ساده هستند و این تکنیک up-pop است.

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

هر دو تکینک در پیاده سازی اعداد پیاده شدند. به این شرح:

اعداد نسبت به بقیه نوشته ها با فونت light تری نوشته شده و همچنین شدت رنگ بسیار کمتری دارد که این تکنیک down-pop است.

فونت اعداد نسبت به بقیه فونت ها بسیار بزرگتر هستند که باعث جلب توجه بسیار می شود و این قطعا تکنیک up-popup است.

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

استایل های مناسب برای حالت انتخاب شده و hover

طراحی کردن حالت های انتخاب شده و hover نیز جزو همین قانون می شوند اما طراحی آن ها کمی سخت تر است.

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

اما از چه تکنیک هایی می توانید استفاده کنید؟

• رنگ متن
• رنگ پس زمینه (Background)
• سایه ها (Shadows)
• زیر خط (Underline)
• انیمیشن های کوچک مانند بالا بردن یا پایین آوردن و ..

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

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

قانون ششم طراحی رابط کاربری:‌ فقط از فونت های خوب استفاده کنید

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

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

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

فونت های انگلیسی:

Work Sans

این فونت برای زمانی مناسب است که شما یک فونت مدرن و ساده و با کمی چاشنی fun نیاز دارید.

Roboto

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

Metropolis

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

Source Sans Pro

فونت Source Sans Pro نیز یکی دیگر از فونت های انگلیسی است که بسیار استفاده می شود و مشابه های بسیار نیز مانند Source Code Pro و Source Serif دارد.

IBM Plex Sans

بعد از دهه ها استفاده از فونت Helvetica ، بالاخره IBM فونت مختص خود را (Plex) ارائه داد.

فونت های فارسی:

ایران سنس

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

ایران یکان

یکی دیگر از فونت های محبوب فارسی که از سال 1395 ارائه شده فونت ایران یکان است.

فونت وزیر

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

فونت شبنم

فونت شبنم نیز برگرفته از فونت های وزیر و یکان است.

فونت انجمن

فونت انجمن نیز از سال 1398 ارائه شده اما توانسته در همین زمان کم بسیار محبوب شود.

قانون هفتم و قانون آخر: مانند یک هنرمند دزدی کنید!

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

به این معنی که طرح های برتر را از منابع معتبر ببینید و بر اساس طرح های از پیش پیاده شده، طرح مدنظر خود را پیاده کنید.

اما مزایای این کار چیست؟ با این روش چشم شما با طرح ها و تکنیک های مختلف طراحی آشنا می شود و در آینده قطعا شما دید بازتری برای پیاده سازی انواع UI خواهید داشت.

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

در ادامه منابع معتبری برای مشاهده انواع UI در تمامی زمینه ها برای شما آورده ایم:

Dribble

درواقع Dribble یک وب سایت مختص طراحان است که تنها با دعوت عضو دیگری از خود Dribble می توانید عضو این وب سایت شوید.

Flat UI Pinboard

وب سایت pinterest نیز منبع دیگری برای نمایش انواع UI های پیاده شده توسط حرفه ای ها است.برای مثال یکی از طراحانی که UI های جذاب Flat و Flatty را در وب سایت pinterest قرار داده است warmarc است که قطعا می تواند منبع ایده خوبی برای طراح ها باشد.

pttrns

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

منتظر پکیج های UI ما برای انواع وب سایت و موبایل و… باشید و اگر درخواست دیگری در زمینه UI دارید با ما در ارتباط باشید.

برای مشاهده قسمت های قبل بر روی لینک های زیر کلیک کنید:

قسمت اول
قسمت دوم

امیدوارم این آموزش برای شما مفید بوده باشد.

کلمات کلیدی: اصول طراحی UI,اصول پیاده سازی UI,طراحی UI,طراحی رابط کاربری