راهنمای ترندهای طراحی UI یا رابط کاربری در سال ۲۰۲۱

در سال ۲۰۲۱ در دنیای طراحی UI یا رابط کاربری چه خبر بود؟

طراحی رابط کاربری یا UI همواره در حال تغییر است و دسته بندی کردن ترند‌های طراحی فرایندی چالش برانگیز و بحث برانگیز است. اگر به پرتکرارترین سبک‌ها در دنیای طراحی  رابط کاربری داشته باشیم، این ۷ تکنیک یا ترند نقش افرینی ویژه‌ای داشتند.

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

ترند ها میان و میرن و با زمان خیلی تغییر می‌کنند. ممکنه نشونه‌های پیدا شدنشون اینقدر پنهان باشه که کسی ندونه دقیقا از کجا شروع شدن یا اینقدر ظریف ناپدید شن که هیچ‌وقت متوجه نبودنشون نشیم.

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

به خصوص در سال اخیر که بسیاری از خدمات و مشاغل مجبور به تغییر دیجیتالی شدند، ترند‌هایی جدید برای پاسخ‌گویی به نیازهای کسب و کار‌ها و کاربرانی جدید نیز ایجاد شد.

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

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


چند ترند بسیار مشهود که در مطالعه طرح‌های UI در Dribbble.com ، Behance.com ، Uxdesign.cc و Uxstudioteam.com دیده شد:

گلس مورفیسم (Glassmorphism) در طراحی رابط کاربری

گلس مورفیسم در طراحی رابط کاربری
تکنیک شیشه‌ای یا گلس مورفیسم via: robhope.com

 

گلسمورفیسم پدیده‌ی نوظهوری نیست، ولی استفاده گسترده آن در طراحی‌های جدید نشان از مجبوبیت دوباره این تکنیک چشم انداز طراحی است. پیش‌تر این مدل طراحی را در ویندوز ۷ و iOS7 داشتیم.

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

در سال ۲۰۲۰، نئومورفیسم ترند محبوب و پر استفاده ای بود. در نئومورفیسم، طراحی مسطح یا flatdesign نقش پررنگی داشت و هدفش ترکیب دیزاین مسطح با حس و حال ۳D اسکیومورفیسم بود. کمی پیچیده شد ولی اگر طرح زیر را ببینیم، گلسمورفیسم را هم بهتر درک می‌کنیم:

نئومورفیسم در طراحی UI
via : www.justinmind.com

در طرح بالا، دکمه‌ها فلت هستند ولی با ایجاد سایه شیشه‌ای مانند حس سه بعدی بودن به تصویر می‌دهند.

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

neumorphism vs. glassmorphism

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

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

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

تصویرسازی و انیمیشن انحصاری

برای منحصر به فرد شدن، هر کسب و کار درمسیر مشخصی گام بر می‌دارد. برخی خدمات خود را با شیوه‌ای نوین ارائه می‌کنند و برخی فرایند‌های خدمات مشتری خود را نوآورانه ایجاد می‌کند.

در طراحی UI، تصویرسازی و انیمیشن المانی برای ایجاد هویت بصری منحصر به فرد هستند. این ترند در کنار ترند بعدی یعنی داستان‌سرایی، در ایجاد محیطی دعوت‌کننده برای کاربر نقشی مهم دارند. در نهایت این مسئله، تجربه کاربر را متمایز و متفاوت می‌کند.

بولد شدن این ترند در سال ۲۰۲۱ نشان‌دهنده افزایش اهمیت به داستان‌سرایی و جلوه‌های بصری است. گاهی برخی از طراحان پا فراتر هم می‌گذارند و با ایجاد انیمیشن جزئی در تصویرسازی ها، به دنبال جذب نگاه کاربر و حرکت دادن اون در مسیر مشخصی هستند.

منابع پیدا کردن تصویرسازی در اینترنت زیاد هستند و با کمی سرچ انگلیسی به سایت‌های متعددی می‌رسید که تصویرسازی‌ها مینیمال و یا ماکسیمال با رنگ‌هایی زیبا را به صورت open-source فراهم کرده اند.

مهم‌ترین قانونی که مدنظر داشته باشید، کیفیت و تلاش برای متفاوت بودن است. اگر امکان تصویرسازی اختصاصی ندارید، به دنبال راهی برای تغییر تصویرسازی‌های رایگان و open-source مطابق هویت برند خود باشید.

نمونه های زیر را ببینید را تاثیر این ترند بر اثر گذاری UI را درک کنید.

 

@tristaljing

 

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

داستان سرایی با اسکرول کردن انیمیشن‌ها

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

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

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

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

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

نکته مهم اینجاست : انیمیشن‌های پراکنده، بدون سناریو و سنگین که هدفی در آن ها مشهود نیست، اثر معکوس دارد. این‌جا اهمیت UX Writing مطرح می‌شود. انیمیشن‌هایی که در سایت قرار می گیرند، تصاویری که پویا می‌شوند و یا رنگ هایی که ترکیب می‌شوند به هدف خلق یک تجربه و ایجاد مسیر کاربری هستند، پس هیجان زده نشوید و کاربر خود را سردرگم نکنید.

چند نمونه داستان‌سرایی فوق‌العاده را با هم ‌ببینیم:

برای دیدن انیمیشن‌های ظریف و هوشمندانه این سایت، به Goliath سری بزنید.با این که سایت کاملا شلوغ به نظر می‌رسد و انبوه المان‌ها شاید مخاطب را سردرگم کند، ولی روال داستانی، متن نویسی اثر بخش و رنگ های به کار او را کنجکاو می‌کند.

نمونه طراحی UI

در مقایسه با سایت قبلی، LAVVA طراحی بی‌نهایت ساده‌ای دارد. ولی به قرارگیری المان‌های تصویری نگاهی داشته باشید. بخش دوم تصویر کاملا هوشمندانه، کاربر را وادار به کلیک روی دکمه می‌کند…حتی اگر نداند LAVVA چیست!

واقعیت مجازی (VR)

محصولات، درحال یادگرفتن کاربران هستند.

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

VR by Aniverse

 

سال ۲۰۲۰_۲۰۲۱ سالی برای پیشرفت واقعیت مجازی بود. هدست‌های واقعیت مجازی در حال حاضر بیشترین هیجان را برای مخاطبین بازی به ارمغان می آورد. با توجه به پیشرفت آهسته این فناوری، فکر نمی‌کنم سال آینده قابلیت‌های بیشتری را به VR برساند، اما ممکن است فرصت هایی برای صنایع دیگر باز شود.

به عنوان مثال، این فرصت بسیار خوبی برای افزایش تعامل در آموزش و پرورش، به ویژه در دوران قرنطینه است.

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

واقعیت افزوده (AR)

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

در حال حاضر، هم گوگل و هم اپل، پلتفرم‌های توسعه واقعیت افزوده خود یعنی ARCore و ARKit را منتشر کرده اند و فیسبوک هم که عینک‌ هوشمند را تولید کردند. پس عجیب نیست که AR دیگر صرفا یک گزینه نباشد و در ترند‌هایی قرار بگیرد که محبوبیت بالایی دارند.

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

پیش تر در بلاگ نوژن به نقش واقعیت افزوده در فروشگاه های اینترنتی پرداخته بودیم : از اینجا می‌توانید مطالعه کنید.

مینیمالیسم

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

دنیای پرسرعت و نیاز به اطلاعات دقیق و در لحظه بود که پیش‌زمینه‌ای بر جنبش های مینیمالیستی در دیزاین شد. امروزI این ترند را در UI   نیز می‌بینیم، المان های حداقلی، فضای منفی زیاد و جزئیات حذف شده: همه به این هدف که کاربر فشار زیادی برای دیدن مفهوم نکند.

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

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

مینیمالیسم در تصویر
revolut.com از فضای سفید نترسید

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

تصاویر واقعی

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

تصاویر ساخته شده و طراحی شده ممکن است برای همه مناسب نباشد و گاهی اوقات افراد واقعی و اقلام واقعی می‌توانند تأثیر بیشتری بر کاربران بگذارند. وب سایت collagerie.com با استفاده همزمان از تصاویر واقعی و رنگ‌های متناسب، واقعا جذاب به نظر می‌رسد

نکته‌ای که در به کار بردن تصاویر واقعی باید به آن توجه کرد این است که این تصاویر در ترکیب با قاب‌های هندسی و خارج شدن از قاب طبیعی خود جذابیت بیشتری دارند.

کدام عوامل بر روند طراحی UI یا رابط کاربری در ۲۰۲۱ تأثیر می گذارد؟

وبسایت‌ها و اپلیکیشن‌هایی که روندهای فعلی رابط کاربری را دنبال می‌کنند این قابلیت را دارند که محصولات خود را برای مشتریان لذت بخش‌تر و ساده‌تر کنند. این امر تجربه مصرف کننده و نرخ تبدیل را بهبود می‌بخشد. توجه داشته باشید که بین شیک بودن و ارائه یک تجربه هیجان انگیز به مشتری تعادل ظریفی وجود دارد و دقیقا اینجاست که مطالعه و آزمایش درست، برندگان را از بازندگان جدا می‌کند.

در طی ۳ سال گذشته، حالت تاریک، فونت‌های بزرگ، تایپو گرافی و… مورد استفاده طراحان قرار گرفته است و به همین دلیل این موارد دیگر ترند نامیده نمی‌شوند، بلکه دانش عمومی هستند. در سال ۲۰۲۱ روندهای رابط کاربری سرعت، طراحی ساده صفحات ، استفاده از قابلیت‌های تلفن همراه و مهمتر از همه، هوش مصنوعی در اولویت قرار گرفته است.

 

پاسخی بگذارید

هفت + نه =