سمانه رستمی‌پور
سمانه رستمی‌پور
خواندن ۱۰ دقیقه·۱ سال پیش

ترندهای طراحی UX/UI در سال 2024

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


بیایید نگاهی به برخی از این ترندها بیندازیم که اینترنت را تحت سلطه خود در آورده‌اند!

فراتر از جعبه ناهار یک کودک - جعبه‌های بنتو

جعبه‌های بنتو جزء اصلی فرهنگ تیفین و جعبه‌های ناهار در ژاپن هستند. آن‌ها به دلیل نگهداری مواد غذایی در یک قالب نسبتاً سازمان یافته و تمیز نگه داشتن چیزها به خوبی شناخته شده‌اند.

Image credits — Freepik
Image credits — Freepik


جعبه‌هایBento یکی دیگر از گرایش‌های طراحی است که شروع به ایجاد امواجی روی پلتفرم‌هایی مانند Dribbble و Behance برای میلیون‌ها طراح کرده است، با این حال مفهوم طراحی «ماژولار» با «داشبوردهای وب‌سایت‌ها» آغاز شد که شامل داشبوردهای فروش و امور مالی مانند PayPal، تجزیه و تحلیل مانند Google Ads و ... است.

ویندوزفون و لومیا را به خاطر دارید؟ رابط کاربری آن‌ها اساساً تکرارهای اولیه طرح‌های بنتو بوده است. بعدها، مایکروسافت نیز این مفهوم را در منوی شروع دسکتاپ ویندوز خود با ویندوز 8 پیاده سازی کرد.

Windows 8 start menu
Windows 8 start menu


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

Another Apple poster
Another Apple poster


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

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

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

نگاهی به این طراحی بیندازید:

Live demo of bento interactions
Live demo of bento interactions


مثال بالا از diagram.com است که از شبکه‌های بنتو برای نشان دادن نمونه‌های واقعی از آنچه ابزارهایشان می‌تواند از طریق یک تجربه تعاملی انجام دهد، استفاده می‌کند. این نوع ارائه، کاربری ابزار را بسیار جذاب‌تر می‌کند و به کاربران می‌گوید که چه انتظاراتی باید داشته باشند.

برخی از وب‌سایت‌ها برای طراحی بنتو از سراسر وب وجود دارند. یکی از این وب‌سایت‌ها bentogrids.com است که مجموعه بزرگی از شبکه‌های Bento برای رابط کاربری و طراحی گرافیکی دارد.


گرایش‌ها و جهش‌های طراحی فضایی در فناوری

شما به تازگی از خواب بیدار شده‌اید و تلفن خود را برای مشاهده "ایمیل های مهم" برداشته اید، و کل فید شما مملو از Vision Pro جدید اپل است. این دقیقاً صبح همه علاقه‌مندان به فناوری و طراحی در جهان، در 5 ژوئن 2023 بود.

Image credits — Apple.com
Image credits — Apple.com


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

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

A glimpse of what is to come
A glimpse of what is to come


این با راه اندازی یک ابزار متمرکز بر طراح محبوب به نام "Bezi" همراه است. به ابزارهای طراحی مانند Figma و Spline بسیار نزدیک است، اما فضای سه بعدی به آن اضافه شده است. طراحان می‌توانند وارد طراحی فضایی شوند، یک هدست AR/VR در حال کار را متصل کنند و تجربیات فضایی تعاملی ایجاد کنند.

نگاهی اجمالی به آنچه "Bezi" به ما اجازه می‌دهد ایجاد کنیم:

Demo from Bezi.com
Demo from Bezi.com


این یک مشارکت بزرگ برای بهبود تجربه AR/VR، UX است. درک عمیق فناوری پشت طرح‌های زیبا، استفاده از یک هدست واقعیت مجازی، آزمایش چیزها در محیط‌های فضایی، همه بخشی از کار خواهد بود. قطعاً همانطور که پیش می‌رویم، درس‌ها و تغییرات جدیدی در درک فعلی ما از UX وجود خواهد داشت. با این حال، این یکی از آن مهارت‌هایی است که می‌خواهید همین حالا جمع‌آوری کنید و احتمالاً در آینده از آن استفاده کنید.

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

حتی با وجود اینکه پروژه "عینک گوگل" هرگز تولید بزرگ واقعی را لمس نکرد، شرکت عینک آفتابی RayBan با Meta Wayfarer جدید خود وارد رقابت پوشیدنی های هوشمند شده است.

Image credits — RayBan
Image credits — RayBan


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

همه می توانند Animate کنند!

این یکی از ماموریت‌های Lottie Files بوده است. با نگاهی به تقاضا برای انیمیشن‌های lottie، حتی یک پلاگین برای Figma راه اندازی شده است که به ما طراحان امکان می‌دهد انیمیشن‌های Figma خود را به یک فایل JSON lottie قابل خروجی تبدیل کنیم.

LottieFiles plugin for Figma
LottieFiles plugin for Figma


این منحنی بزرگ یادگیری After Effects و نرم افزارهای مشابه را از بین می‌برد. از این رو، طراحان بیشتری می‌توانند به تنهایی، به سرعت Animate کنند.

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

به عنوان مثال تعامل صفحه Landing زیر را در نظر بگیرید:

Apple Watch Series 9 Landing Page — Double Tap Interaction on Scroll
Apple Watch Series 9 Landing Page — Double Tap Interaction on Scroll


با قرار دادن انیمیشن‌های اسکرول، بازدیدکنندگان غرق در آنچه که باید به آن‌ها ارائه دهید، می‌شوند. ابزارهای بدون کد مانند Web flow و Framer برای همیشه نوآور هستند تا چنین قابلیت‌های انیمیشنی را بدون دردسر نوشتن خطوط طولانی کد برای طراحان به ارمغان بیاورند.

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

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

GIF by “@learnframer” on X
GIF by “@learnframer” on X


چنین ترندهایی اغلب توسط یک اثر دومینو ایجاد می‌شوند. ابتدا پست اجتماعی یک طراح محبوبیت پیدا می‌کند و سپس دیگر طراحان برجسته آن را دنبال می‌کنند.



پایان طراحی Flat؟

اخیراً، بسیاری از طراحان در مورد چگونگی تغییر دنیای طراحی از طراحی Flat (مانند آنچه در اینجا، در Medium می بینید)، به سبک‌های بصری شبهِ واقع گرایانه‌تر صحبت می‌کنند. این‌ها شامل گرافیک سه بعدی، جلوه‌های عمقی، نئومورفیسم، اسکئومورفیسم و غیره است.

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

Just a few good examples of the new 3D wave made by  Chan Karunaratne
Just a few good examples of the new 3D wave made by Chan Karunaratne



مانند سایر گرایش‌های طراحی، دلیل بزرگی برای افراد جهت پیاده‌سازی این سبک‌ها، معرفی ابزارهای سه بعدی مبتنی بر وب «easy-to-use»؛ مانند Spline و Vectary است که گنجاندن طراحی‌هایسه بعدی در وب و برنامه را بسیار آسان می‌کند. آن‌ها همچنین طراحی‌هایسه بعدی را با استفاده از انیمیشن‌ها، با برخی از کوتاه ترین منحنی‌های یادگیری که من تجربه کرده‌ام، زنده می‌کنند.

یکی دیگر از شرکت‌هایی که همیشه طراحی و ترندها را هدایت می‌کند Airbnb است. آن‌ها به دلیل طراحی‌ها و تعاملات ساده و در عین حال مؤثر اپلیکیشن‌ها به‌طور گسترده‌ای شهرت دارند. در سال 2023، آنها یک به‌روز رسانی برنامه را اعلام کردند که واقعاً ویژگی‌های جدید و مهمی را به همراه خواهد داشت.

آن‌ها چه کردند؟ آن‌ها بیش از دوازده عنصر بصری 3Dish را در خود جای داده‌اند و ویدیوی اعلامی آن‌ها تقریباً همه چیز در مورد سه بعدی است.

Launch video by Airbnb
Launch video by Airbnb


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


ابزار طراحی A.I - دوست یا دشمن؟

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

Adobe Firefly being used for video manipulation
Adobe Firefly being used for video manipulation


مجموعه‌ای از ابزارهای طراحی که خود را به عنوان «A.I. powered» در حال تلاش برای پیاده‌سازی Open A.I هستند. API‌ها در سطوح مختلف، و همچنین در حال کار بر روی A.I خود هستند.

در شلوغی این ترفندها، چند قهرمان وجود دارند که برای نجات روز می‌آیند. یکی از این قهرمانان Relume است که طرفداران خود را دارد. این شرکت متمرکز بر جریان وب، چیزی به نام Relume A.I را راه اندازی کرد، یک ابزار قدرتمند قاب‌بندی سیمی و نقشه‌برداری سایت.

Relume A.I in action
Relume A.I in action


شما یک اعلان قرار می‌دهید، که اساساً شرح پروژه شما است، و یک نقشه سایت کامل و دقیق و همچنین یک قاب سیمی را به شما ارائه می‌دهد. این قاب سیمی مملو از داده‌ها و طرح‌بندی‌های مرتبط است که می‌توان به سرعت در Figma و Webflow کپی کرد.


بنظرتون من تنها کسی هستم که فکر می کنم Chat-GPT خلاقیت انسان را از بین می‌برد و وابستگی ایجاد می‌کنه؟



طراحی UX با دقت و همدلی بیشتر

Image by Josh Calabrese
Image by Josh Calabrese


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

Google trends graph on “UX Accessibility” from 2019 to 2023
Google trends graph on “UX Accessibility” from 2019 to 2023


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

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

چرا دسترسی در تقاضا است؟

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

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

شخصی سازی

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

Youtube assessing what kind of content you like to give you better recommendations
Youtube assessing what kind of content you like to give you better recommendations


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


رابط کاربریux designDesign Trendsproduct designui design
UI/UX Designer at EBCOM
شاید از این پست‌ها خوشتان بیاید