در این مقاله از مجموعه مقالات وبسایت مرجع آموزش UI و UX فارسی با معرفی ۲۰ نمونه طراحی UI که در واقع طرح های پرطرفدار سال ۲۰۲۱ هستند در خدمت شما هستیم. طی این مقاله شما می توانید با استایل هایی از طراحی UI آشنا شوید که امسال پتانسیل دیده شدن بیشتری دارند و میان جامعه طراحان UI و کاربران بسیار محبوب هستند.
در این مقاله که نمونه طرح های پرطرفدار UI نام گرفته است (می توانستیم آن را ترندهای طراحی UI در سال ۲۰۲۱ نام گذاری کنیم)، به صورت تیتروار با ذهنیت های غالب بر طرح های پرطرفدار رابط کاربری در سال ۲۰۲۱ آشنا خواهید شد و علاوه بر تشریح هر کدام از این ذهنیت های حاکم بر طرح های مختلف UI، نمونه هایی از هر کدام از آن ها را برای آشنایی شما با هر کدام از این طرح های پرطرفدار ارائه خواهیم کرد تا به عنوان طراح یا کاربر، چشم شما با این طرح ها آشنا شود.
آشنایی با نمونه طرح های UI که در جامعه طراحان و کاربران محبوب و پرطرفدار هستند به شما کمک می کند که از آن ها الهام بگیرید و طرح های خود را بر پایه این ذهنیت ها طراحی کنید. بدیهیست استفاده از این ذهنیت ها به دیده شدن و مقبولیت طرح های شما کمک شایانی خواهد کرد. به عنوان یک طراح نباید فراموش کنید که موج سواری بر طرح های محبوب یا همان ترندهای طراحی، می تواند به موفقیت شغلی شما کمک شایانی نماید. برویم تا با هم ذهنیت های غالب در طرح های UI محصولات مختلف را در سال ۲۰۲۱ بررسی کنیم.
۱- استفاده از تصاویر سه بعدی در رابط کاربری
یکی از مهمترین ترندهای طراحی UI که احتمالا آن را در طرح های مختلف طراحان رابط کاربری دیده اید استفاده از تصاویر و تصویرسازی های سه بعدی یا همان ۳D illustrations هاست. با نگاهی گذرا به نمونه طراحی های UI در پلتفرم هایی مانند Dribbble و Behance متوجه خواهید شد که استفاده از تصویرسازی های سه بعدی در قسمت هایی مانند بگراند، Hero وبسایت ها، Onboarding اپلیکیشن ها و … بسیار رایج شده است و باعث زیبا به نظر رسیدن طرح های مختلف رابط کاربری می شود.
استفاده از تصویرسازی های سه بعدی در رابط کاربری بسیار ساده است و دسترسی به سورس های مختلف در این حوزه هم بسیار آسان می باشد. طرح های آماده بسیار زیادی در حال حاضر برای دانلود وجود دارند. علاوه بر این می توانید نمونه هایی از آن ها را همچون مجموعه آیکون های سه بعدی و مجموعه آیکون های سه بعدی با موضوع کسب و کار و همینطور مجموعه آیکون های سه بعدی دست را از قسمت ابزارهای آماده طراحی UI از وبسایت مرجع رابط و تجربه کاربری دانلود کنید.
استفاده از تصاویر سه بعدی در قالب آیکون ها، آدمک ها و Shape ها و تصاویر هندسی و یا حتی نامظم بسیار رواج یافته است. برای ایجاد اشکال سه بعدی می توانید از ابزارهایی همچون Spline استفاده کنید. همچنین از مجموعه سورس های رایگان دانلود وکتورهای سه بعدی می توان به مواردی از قبیل Saly و Handz اشاره کرد که می توانید با کلیک روی آن ها، به صورت رایگان به آن ها دسترسی داشته باشید.
در تصاویر زیر نمونه هایی از طراح های UI را می بینید که در آن ها تصاویر سه بعدی جذابیت خاصی ایجاد کرده اند. با جستجوی عبارت ۳D illustration در پلتفرم های مختلف می توانید به نمونه های بیشتری از طرح های UI که در آن ها تصویرسازی سه بعدی به کار رفته است را مشاهده کنید.
در نمونه طراحی رابط کاربری بالا کاربرد تصویر سازی های سه بعدی در Hero یک وبسایت را می بینید.
در تصویر بالا کاربرد تصویر سازی های سه بعدی را در Onboarding یک اپلیکیشن می بینید.
در این تصویر نمونه ای از کاربرد آیکون های سه بعدی را در قسمت Hero یک وبسایت می بینید.
نمونه ای دیگر از کاربرد تصویرسازی های سه بعدی در رابط کاربری
می توانید از اشکال هندسی یا غیر هندسی مختلف به صورت سه بعدی نیز استفاده کنید.
۲- طراحی شیشه ای یا گلس مورفیسم (Glassmorphism)
یکی دیگر از ترندهای طراحی UI در سال ۲۰۲۱ استفاده از طراحی شیشه ای یا Glassmorphism می باشد. اگر با این واژه غریب هستید و این واژه برای شما نامفهوم به نظر می رسد، با نگاه به نمونه طراحی های UI در تصاویر زیر می توانید نمونه های واضحی از کاربرد Glassmorphism را در طراحی رابط کاربری مشاهده کنید.
طراحی Glassmorphism یا شیشه ای به حالتی گفته می شود که نمایی مانند شیشه های مات یا مشجر ایجاد می کند و صرفا با یک حالت شفاف و شیشه ای ساده طرف نیستیم. البته خیلی قبل تر در ویندوز ۷، ویندوز ویستا و iOS 7 جنبه هایی از طراحی مشابه گلسمورفیسم را دیده بودیم اما گلسمورفیسمی که هم اکنون با آن طرف هستیم را می توان یک نسخه بهبود یافته و بازسازی شده از نمونه های قدیمی دانست.
یکی از نقاط قوت طراحی گلسمورفیسم پیاده سازی نسبتا ساده آن می باشد بنابراین در سیستم عامل های مختلف تقریبا دغدغه ای برای اجرای آن وجود ندارد حتی این نگرش از طراحی یعنی Glassmorphism پای ثابت دیزاین سیستم معروف مایکروسافت یا همان Fluent Design System می باشد.
نمونه ای از طراحی گلسمورفیسم را در کارت های موجود در تصویر بالا مشاهده می کنید.
طراحی Glassmorphism در اپلیکیشن پخش موزیک بالا کاملا مشهود است.
در نمونه طراحی رابط کاربری بالا نیز کارت هایی که با استفاده از Glassmorphism طراحی شده اند را مشاهده می کنید.
در تصویر بالا نمونه هایی از آیکون هایی که با استفاده از گلسمورفیسم طراحی شده را مشاهده می کنید.
۳- استفاده از تصاویر واقعی در طراحی UI
یکی دیگر از ترندهای طراحی UI در سال ۲۰۲۱ استفاده از تصاویر واقعی در طراحی رابط کاربری می باشد. با نگاهی به طرح های مختلف UI در پلتفرم های اشتراک گذاری نمونه کار می توانید طرح های زیادی را ببینید که در آن ها از تصاویر واقعی در نقاطی مانند پس زمینه و یا Hero استقاده شده است. استفاده از تصاویر واقعی حرفه ای به جهت ارتباط موثری که کاربر با دنیای واقعی برقرار می کند رواج زیادی یافته است و از این جهت تصاویر واقعی اثرگذاری خوبی روی کاربران دارند.
البته نباید فراموش کرد که هنوز هم تصویرسازی ها یا illustration ها هم بسیار محبوب هستند اما به نظر می رسد بخشی از محبوبیت خود را به تصاویر واقعی داده اند. نکته مهم دیگری که باید به آن توجه کنید این است که استفاده از تصاویر واقعی در قاب های هندسی (مانند استفاده از تصویر یک انسان روی یک پس زمینه شش ضلعی) به زیبایی تصاویر واقعی در UI کمک خواهد کرد پس سعی کنید تصاویر واقعی را از کادربندی استانداردشان خارج کنید، پس زمینه آن ها را حذف کنید و روی پس زمینه هایی با اشکال هندسی مختلف قرار دهید.
نمونه هایی از طراحی UI که در آن ها از تصاویر واقعی به کار رفته است را مشاهده می کنید.
کاربرد تصاویر واقعی را در رابط کاربری بالا مشاهده می کنید.
در این نمونه رابط کاربری مشاهده می کنید که تصویر واقعی یک دانشجو در یک قاب دایره مانند قرار گرفته است و از پس زمینه اصلی خود جدا شده است.
همانطور که در تصویر بالا می بینید استفاده از تصاویر واقعی در رابط کاربری جلوه بسیار زیبایی ایجاد می کند.
در تصویر بالا از تصاویر واقعی در یک قاب نامتعارف استفاده کرده ایم.
۴- طراحی حالت تیره (Dark mode)
یکی دیگر از نگرش هایی که در طراحی رابط کاربری بسیار مورد توجه قرار گرفته است، طراحی حالت تیره یا Dark mode می باشد. بسیاری از وب سایت ها و اپلیکیشن هایی که استفاده می کنیم هر دو حالت Light و Dark را به صورت همزمان در خود جای داده اند و حتی اپل در سیستم عامل iOS 13 به بعد پشتیبانی از دارک مود را به صورت رسمی در سیستم عامل خود جا داد.
در نمونه های زیر می توانید طرح هایی از حالت تیره یا Dark mode و کاربرد آن در طراحی UI را ببینید.
در تصویر بالا می توانید تفاوت حالت Light و Dark را در یک رابط کاربری مشاهده کنید.
در این نمونه از طراحی UI چند ترند از ترندهای طراحی UI در سال ۲۰۲۱ را با هم ترکیب کرده ایم.
۵- استفاده از رنگ های واضح و درخشان
حتما به بعضی از طرح های رابط کاربری دقت کرده اید که تنها رنگ های به کار رفته در آن ها، چشمان شما را روی خود میخکوب می کند. رنگ هایی که بسیار درخشان به نظر می رسند، حرفه ای انتخاب شده اند و روی پس زمینه ای که قرار گرفته اند به خوبی به چشم می آیند.
اگر طراح مبتدی هستید و در انتخاب رنگ ها نمی توانید مانند طراحان حرفه ای عمل کنید، برای شروع می توانید از رنگ هایی که سایر طراحان در طرح های خود به کار برده اند الهام بگیرید. حتی می توانید عینا پلت رنگی محصولات مختلف را کپی کنید! بله درست خواندید. کپی کردن هم اگر منجر به رشد شما شود هیچ اشکالی ندارد.
۶- فونت هایی با اندازه بزرگ!
از دیگر ترندهای طراحی UI که می توانید در نمونه طرح های UI مشاهده کنید، استفاده از نوشته هایی با ابعاد بزرگ در قسمت های مختلف رابط کاربری می باشد. بدیهیست استفاده از نوشته هایی با ابعاد بزرگ در رابط کاربری، باعث جلب توجه بیشتر کاربران می شود.
البته نکته بسیار مهم این است که در استفاده از نوشته هایی با ابعاد بزرگ نباید زیاده روی کرد اما به هر حال شرایط با زمانی که طراحان از کاربرد نوشته هایی با ابعاد بزرگ واهمه داشتند، فرق کرده است.
نمونه ای از کاربرد تایپوگرافی با اندازه بزرگ در قسمت Hero وبسایت ها
نمونه ای از کاربرد تایپوگرافی درست در اپلیکیشن ها
۷- پس زمینه های رنگی و مات
اگر به نمونه طرح های UI زیر دقت کنید، در اولین نگاه پس زمینه های رنگی و جذاب آن ها نگاه شما را جلب خواهد کرد. همانطور که قبلا گفتیم استفاده از رنگ های جذاب نقش بسیار زیادی در جنبه های زیبایی شناختی رابط کاربری محصول شما دارد و از این جهت استفاده از پس زمینه های رنگی که حالت مات و محو یا اصطلاحا Blur پیدا کرده اند بسیار رواج پیدا کرده است و از ترندهای طراحی UI در سال ۲۰۲۱ شده است که استفاده از آن ها می تواند جلوه های بسیار زیبایی در رابط کاربری طراحی شده توسط شما ایجاد کند.
در تصاویر زیر نمونه هایی از طرح های UI که از این نگرش در طراحی آن ها استفاده شده است را می بینید که می توانید از آن ها الگو بگیرید.
نمونه هایی که در بالا خدمتتان ارائه کردیم نمونه هایی از طراحی UI بودند که در سال ۲۰۲۱ محبوب، پرطرفدار و اصطلاحا ترند شده اند. استفاده از ترند ها در محصولاتی که طراحی می کنید باعث دیده شدن آن محصول در آن مقطع زمانی خواهد شد اما توجه داشته باشید که ترندها برای همیشه ترند نیستند و چه بسا ترندهایی که برای برهه ای از زمان محبوبیت بالایی داشته اند و به مرور محبوبیت خود را از دست داده اند پس توجه داشته باشید که در کنار توجه به مقطع زمانی استفاده از ترندهای مختلف، بیش از حد به ترندهای وابسته نباشید و فکر نکنید که همیشه میبایست از ترندها برای طراحی استفاده کنید.
اگر مایل به یادگیری طراحی UI و UX هستید می توانید با استفاده از دوره تجربه کاربری وبسایت کنفرانس ux با فرایند طراحی یک اپلیکیشن یا وبسایت آشنا شوید و پس از آن با استفاده از دوره طراحی UI با اصول و قوانین طراحی UI آشنا شوید و نهایتا با استفاده از دوره آموزش Adobe XD با پیاده سازی طرح نهایی رابط کاربری آشنا خواهید شد.
