خلاصه آمار ترند های طراحی بنر تبلیغاتی 2021

• در سال 2021 تقریباً 54% از طراحی های مربوط به بنر تبلیغاتی به صورت تبلغات انیمیشنی بودند و این آمار محبوبیت رو به رشد این قالب و ترند بودن آن را بار دیگر ثابت کرد.
• بیشترین اندازه های استفاده شده در طراحی بنر تبلیغاتی، 336×280 (مستطیل بزرگ) برای فرمت های ثابت و 300×250 (مستطیل متوسط) برای فرمت های انیمیشنی و تبلیغات ویدیویی است.
• Roboto پر استفاده ترین فونت انگلیسی 2021 است و در 11٪ از طرح هایی که ما تجزیه و تحلیل کردیم، یافت می شود.
• از نظر رنگ های پس زمینه، در بیشتر طراحی های بنر تبلیغاتی از طیف های سیاه، سفید، آبی و قرمز استفاده می کنند.
• در 92.22% از بنر های تبلیغاتی طراحی شده تصاویری که شخصاً عکاسی شده اند، به جای عکس های پولی( stock ) استفاده شده بود.
• کاربران ترجیح می دهند به جای استفاده از الگو ها، طرح های شخصی خود را ایجاد کنند، 70٪ از بنر های تبلیغاتی از پایه ساخته شده اند.
• 25% از طرح ها (چه طرح های تکی و چه مجموعه های طراحی) با فرمت JPG بودند.

روش شناسی

به منظور دستیابی به دیدگاهی جامع از ترند های طراحی بنر تبلیغاتی امسال، داده هایی را از بیش از 500 هزار طرح ایجاد شده، بین فوریه تا سپتامبر 2021 جمع آوری کرده ایم. در این داده های آماری جزئیات زیر را در نظر گرفتیم که می توانند یک طرح را از طرح دیگر متمایز کنند:

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

برای داشتن یک نمای کلی بهتر در مورد تغییرات و ترجیحات طراحی توسط کاربران، برخی از یافته های خود را با یافته های آماری مربوط به ترند های طراحی بنر تبلیغاتی در سال ۲۰۱۸ مقایسه کردیم.

1. پرکاربرد ترین انواع طراحی

هنگامی که در مورد پرکاربرد ترین انواع طراحی صحبت می کنیم، به فرمت های استاتیک، انیمیشنی و آن هایی که شامل صدا و تصویر هستند اشاره می کنیم. اولین چیزی که متوجه شدیم، این بود که از مجموع کل طراحی های مربوط به بنر های تبلیغاتی، 54% آن ها انیمیشنی و 44% ثابت بودند.

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

چرا تبلیغات انیمیشنی محبوب شد؟

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

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

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

2. ترند های اندازه بر اساس فرمت در سال 2021

برای یافتن ترند مربوط به اندازه های تصاویر در طراحی بنر های تبلیغاتی، ابتدا باید به پرکاربرد ترین اندازه ها، بدون در نظر گرفتن ویژگی های دیگر، نگاهی کلی بیاندازیم. پس از آن، سه فرمت استاتیک، انیمیشنی و ویدئویی را به طور جداگانه بررسی می کنیم.

بدون در نظر گرفتن ما بقی ویژگی ها، به طور کلی می بینیم که بیشترین اندازه استفاده شده برای بنر های تبلیغاتی 336×280 (مستطیل بزرگ) است. همچنین وقتی صحبت از فرمت های استاتیک به میان می آید، همین اندازه بسیار عالی است.

آمار مربوط به تصاویر استاتیک (ایستا)

هنگامی که ما تجزیه و تحلیل در مورد ترند های طراحی بنر تبلیغاتی خود را در سال 2018 انجام دادیم، اندازه 336×280 دومین اندازه پرکاربرد بود، در حالی که 300×250 (مستطیل متوسط) اولین اندازه بود، اما امسال جایشان را عوض کردند.

تنها تفاوت بین این دو این است که 336×280 بزرگ تر است. سایز 336×280 تمام مزایای ابعاد کوچک تر از خود را دارد، اما امتیاز اصلی آن این است، که خوانایی بهتری را به دلیل مساحت بزرگ تر ارائه می دهد و امکان قرار دادن فونت ها و تصاویر بزرگ تر را نیز فراهم کرده است.

آمار مربوط به تصاویر انیمیشنی

با این حال، وقتی صحبت از فرمت های انیمیشنی و ویدیویی می شود، بیشترین اندازه استفاده شده هنوز هم 300×250 است. این واقعیت که این یک اندازه رایج برای تبلیغات در تلفن همراه مناسب ترین است، ممکن است دلیل اصلی این باشد. اندازه کوچک تر زمان بارگذاری تبلیغات غیر ایستا را کاهش می دهد و تجربه کاربری موبایل را بهتر می کند.

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

3. فونت های پرکاربرد

در مورد فونت های پر کاربرد، یافته های خود را با گزارش خود در سال 2018 مقایسه کردیم و دیدیم که سه فونتی که در آن زمان ترند بودند، عبارت اند از: Gotham و Myriad Pro و Helvetica Neue LT Std. البته این سه فونت امسال نتوانستند جایی در پنج فونت برتر برای طراحی بنر تبلیغاتی کسب کنند.

در حال حاظر فونت Roboto ترند بوده و پیشتاز است و تقریباً 11٪ از طرح های مربوط به بنر های تبلیغاتی حاوی این فونت خاص هستند. همچنین در آمار خود خواهر یا برادر کوچک تر آن Roboto Condensed را می بینیم که جایگاه پنجم را به خود اختصاص داده است و تقریباً در 5 درصد از طرح هایی که آنالیز کرده ایم حضور دارد. در لیست خود ما Poppins و Montserrat و Lato را نیز داریم، که این پنج فونت متعلق به خانواده حروف sans-serif هستند که با وزن خنثی و حروف باز مشخص می شوند.

همچنین بررسی کردیم که فونت ها از کجا آمده اند و متوجه شدیم که 80% از طرح ها فونت های Google را نشان می دهند و 15% آن ها سفارشی ساخته شده اند و فقط 4% از فونت از Creatopy یا منابع دیگر بودند.

انتخاب فونت مناسب

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

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

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

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

4. رنگ های پرکاربرد

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

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

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

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

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

5. استفاده از تصاویر شخصی در مقابل عکس های Stock

این یک واقعیت شناخته شده است که به همان اندازه که تصاویر Stock راحت هستند، همیشه به طراحان و بازاریابان توصیه می شود که در هر زمان و هر کجا که ممکن است از تصاویر شخصی برند خود استفاده کنند. بنابراین این واقعیت که تقریباً 93% از طرح هایی که ما آنالیز کرده ایم از تصاویر برند خود استفاده می کنند، تکان دهنده نیست.

وقتی آن را با ترند ها و آمار های طراحی بنر های تبلیغاتی خود در سال 2018 مقایسه کردیم، دیدیم که درصد ها تقریباً یکسان هستند. سه سال پیش، حدود 88% از طرح هایی که به آن ها نگاه می کردیم، تصاویر برندینگ بودند، در حالی که بقیه از تصاویر Stock استفاده می کردند.

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

6. استفاده از الگو ها در مقابل طرح های سفارشی

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

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

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

7. محبوب ترین فرمت ها برای دانلود

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

با در نظر گرفتن این موارد، دیدیم که JPG بهترین فرمت برای دانلود بوده است. 25٪ از طرح های دانلود شده ای که ما به آن ها نگاه کردیم فرمت های JPG بودند، در حالی که 21٪ HTML و 20٪ MP4 بودند. همچنین تنها 16٪ از طرح ها با فرمت PNG و 6٪ GIF بودند.

محبوبیت مداوم JPG را می توان به راحتی آن نسبت داد، زیرا این فرمت کمترین فضا را اشغال می کند. همین موضوع را می توان در مورد MP4 در فیلم ها نیز گفت. به همین دلیل، MP4 به عنوان چند منظوره ترین فرمت شناخته می شود، زیرا با اکثر سایت های پخش جریانی، سیستم عامل ها و پخش کننده های رسانه سازگار است.

فرمت احتمالی آینده

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

HTML آزادی بیشتری را برای طراحان در طراحی بنر تبلیغاتی فراهم می کند، زیرا می توانند از اسکریپت های مختلف در هنگام ویرایش آن استفاده کنند، و از مواردی مانند CSS یا جاوا اسکریپت در این ترند بهره بگیرند. همچنین HTML به راحتی سازگار با موبایل بوده و به راحتی پاسخگو نیاز کاربران است و به شما امکان می دهد محتوای رسانه ای غنی ای را جاسازی کنید. همه این کار ها را نیز می توان بدون کاهش کیفیت انجام داد و این، آن را به جایگزینی شگفت انگیز برای JPG و MP4 تبدیل می کند.

نتیجه:

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

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

منبع:

creatopy.com

نوشته ترند ها و آمار مربوط به طراحی بنر تبلیغاتی در سال 2021 اولین بار در ممتاز دیزاین. پدیدار شد.

سه بعدی شدن یا سه بعدی نشدن؟

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

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

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

3D می تواند در میزبانی وب تاثیر زیادی بگذارد، مخصوصاً اگر تصاویر سه بعدی توسط افزونه یا API خارجی ایجاد شوند. بیایید نگاهی به انواع طراحی 3D بیندازیم تا متوجه شویم چه نوع 3D سازی برای طراحی وب مناسب تر است و سپس به چند نمونه عالی از وب سایت هایی که امروزه از 3D استفاده می کنند، نگاهی بیندازیم.

3D در طراحی وب چیست؟

منظور از طراحی وب سه بعدی این است که ما اشیا را در امتداد محور x، محور y و محور z قرار می دهیم. رایج ترین تفسیر طراحی 3D چیزی است که در وب سایت اپل می توانیم مشاهده کنیم:

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

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

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

تاریخچه استفاده از فناوری 3D در طراحی وب

در دهه 50 تا 60 میلادی، تعدادی برنامه کامپیوتری با قابلیت مدل سازی سه بعدی توسعه یافتند. نرم افزار Robot Draftsman، که با نام Sketchpad نیز شناخته می شود، اولین نرم افزاری بود که از رابط کاربری گرافیکی (GUI) استفاده کرد و راه را برای طراحی کامپیوتری به کمک (CAD) پیش برد.

اگرچه امروزه از CAD برای ایجاد تصاویر سه بعدی از ساختمان ها، محصولات و سایر اشیاء فیزیکی استفاده می شود، اما می توان دریافت که چگونه این فناوری راه را برای طراحی وب سایت های 3D مدرن باز کرده است. یکی از دلایلی که ما لیست غالب های 3D در زمینه طراحی وب را مشاهده نمی کنیم این است که ایجاد آن آسان نیست.

به طور خلاصه می تواند گفت از سال 1994 میلادی که زبان نشانه گذاری واقعیت مجازی (VRML) معرفی شد، تا سال 2014 میلادی که گوگل سیستم Material Design خود را توسعه داد پیشرفت های زیادی در این حوزه اتفاق افتاد. امروزه نیز تعدادی برنامه سه بعدی سازی وجود دارد که طراحان وب را قادر می سازد طرح های سه بعدی سفارشی و پیچیده ایجاد کنند:

• AutoCAD
• blender
• SketchUp
• Vectary

همچنین انواع فناوری های AR و VR وجود دارد که می توانید از آن ها برای ایجاد رندر های سه بعدی برای موارد استفاده خاص استفاده کنید. اگر می خواهید فقط از تکنیک های سه بعدی استفاده کنید،می توانید از ابزار های Elementor’s Style برای افزودن عمق به اجزای وب سایت و Motion Effects برای زنده کردن طرح های خود استفاده کنید.

مزایای استفاده از 3D در طراحی وب

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

متمایز شدن از طراحی های تخت

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

رابط های کاربری جذاب تر

در طراحی های سه بعدی رابط های کاربری جذاب تری وجود دارد. روش های مختلفی وجود دارد که می توانید از آن ها در طراحی وب از 3D استفاده کنید. مثلا:

• هنگام ورود به سایت از تکنیک های 3D استفاده کنید تا تجربه کابری جذاب تری داشته باشید.
• مهم ترین قسمت گرافیکی سایت خود را با استفاده از ویژگی های 3D زنده کنید.
• برای ارائه دقیق تر محصول می توانید نمای 360 درجه و سه بعدی از محصول به بازدیدکنندگان ارائه دهید.

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

برانگیختن احساسات مخاطبان

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

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

3D می تواند بهینه سازی نرخ تبدیل شما را بهبود بخشد

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

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

چند نمونه شگفت انگیز از استفاده 3D در طراحی وب

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

1. Robert Bürgel

بنر مشکی این سایت دارای برش هایی است که نام Robert Bürgel را روی آن نوشته شده است. این حروف تنها زمانی آشکار می شوند که ماهی های نئونی پشت آن در پس زمینه شنا می کنند. این به تصویر ب افراد این احساس را می دهد که در حال تماشای یک آکواریوم پر از ماهی هستند؛ این نوع طراحی جوری است که هرگز توسط مخاطب فراموش نخواهد شد.

2. وب سایت آکادمی Flux

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

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

3. وب سایت کمپانی Samsung

اپل تنها شرکت تولیدکننده تلفن های هوشمند نیست که از 3D برای جلب توجه محصولات خود استفاده می کند. به صفحه فرود سامسونگ برای Galaxy Z Fold نگاه کنید. سامسونگ این محصول را از همان لحظه ورود کاربر به سایت به شکل زنده معرفی می کند.

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

4. طراحی سه بعدی سایت KITKAT Chocolatory

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

5. TAG Heuer

TAG Heuer برندی است که به ساعت های شیک شناخته می شود. روش های زیادی برای ایجاد یک وب سایت با کلاس و زیبا وجود دارد، اما هیچ چیزی نمی تواند محصولات شما را به با شکوهی حالت سه بعدی آن نشان دهد. TAG Heuer نیز با محصولات خود همین کار را انجام داده است.

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

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

6. Mazda

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

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

از طراحی وب سه بعدی عاقلانه استفاده کنید!

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

همچنین، توجه داشته باشید که چگونه 3D بر عملکرد وب سایت های شما تأثیر می گذارد. اگر بازدیدکنندگان مجبور باشند بیش از چند ثانیه منتظر بمانند تا وب سایت شما تمام طراحی های سه بعدی را بارگیری کند، ممکن است وب سایت شما را ترک کرده و هرگز آن ها را مشاهده نکنند.

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

منبع:

elementor.com

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

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

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

برای انجام طراحی به سبک شیشه ای با ما همراه شوید.

انتخاب پس زمینه

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

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

برای طراحی این قسمت باید به تگ <body> در فایل HTML ویژگی های زیر را اضافه کنیم:

body {
    background: #edc0bf;
    background: linear-gradient(90deg, #edc0bf 0,#c4caef 58%);
    padding: 4.5rem;
    margin: 0;
}
    

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

بیایید از استایل فونت بهتری مانند Inter که از فونت های Google نیز هست استفاده کنیم. با افزودن کد زیر در تگ <head>، می توانید فونت را تعریف کنید:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

سپس با اعمال font family بر روی تگ body در فایل CSS تان روند طراحی را ادامه دهید:

body {
    /* other styles */
    font-family: 'Inter', sans-serif;
}

ایجاد المان کارت مانند

بیایید با تنظیم نشانه گذار HTML یک کارت ایجاد کنیم که در واقع حالت شیشه ای دارد. می توانیم با افزودن عنوان، توضیحات و لینک ها این کار را به سادگی انجام دهیم:

   
<div class="card">
    <h3 class="card-title">Glassmorphism is awesome</h3>
    <p> A modern CSS UI library based on the glassmorphism design principles that will help you quickly design and build beautiful websites and applications.</p>
    <a href="https://ui.glass">Read more</a>
</div>

بیایید یک ظاهر اولیه به طراحی کارت و عناصر اضافه کنیم:

.card {
    width: 400px;
    height: auto;
    padding: 2rem;
    border-radius: 1rem;
}

.card-title {
    margin-top: 0;
    margin-bottom: .5rem;
    font-size: 1.2rem;
}

p, a {
    font-size: 1rem;
}

a {
    color: #4d4ae8;
    text-decoration: none;
}
    

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

افزودن افکت ها به Glassmorphism

افزودن افکت و تنظیم یک پس زمینه نیمه شفاف و استفاده از ویژگی های فیلتر زمینه برای افزودن جلوه ای تار به پس زمینه، بسیار ساده است. فقط کافی است ویژگی های زیر را به عنصر card در فایل CSS خود اضافه کنید:

.card {
    background: rgba(255, 255, 255, .7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

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

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

برای این کار به تگ HTML کد زیر را اضافه کنید:

    
<img class="shape" src="https://s3.us-east-2.amazonaws.com/ui.glass/shape.svg" alt="">

سپس استایل های زیر را به CSS اضافه کنید:

.shape {
    position: absolute;
    width: 150px;
    top: .5rem;
    left: .5rem;
}
    

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

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

در اینجا یک مثال کوچک از طراحی سایت به صورت شیشه ای وجود دارد که می توانید کد کامل آن را ببینید:

<!DOCTYPE html>
<html lang="en">
<head >
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Glassmorphism effect by ui.glass</title>

<style>
body {
  padding: 4.5rem;
  margin: 0;
  background: #edc0bf;
  background: linear-gradient(90deg, #edc0bf 0,#c4caef 58%);
  font-family: 'Inter', sans-serif;
}

.shape {
  position: absolute;
  width: 150px;
  top: .5rem;
  left: .5rem;
}

.card {
  width: 400px;
  height: auto;
  padding: 2rem;
  background: rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 1rem;
}

.card-title {
  margin-top: 0;
  margin-bottom: .5rem;
  font-size: 1.2rem;
}

p, a {
  font-size: 1rem;
}

a {
  color: #4d4ae8;
  text-decoration: none;
}
</style>
</head>
<body>
  <img class="shape" src="https://s3.us-east-2.amazonaws.com/ui.glass/shape.svg" alt="">
  <div class="card">
    <h3 class="card-title">Glassmorphism is awesome</h3>
    <p>A modern CSS UI library based on the glassmorphism design principles that will help you quickly design and build beautiful websites and applications.</p>

  </div>
</body>
</html>

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

پشتیبانی از طراحی شیشه ای در مرورگر

ما به عنوان یک تیم طراحی وب موفق وظیفه داریم مطمئن شویم که کدی که می نویسیم برای اکثر مرورگر های موجود در بازار قابل پشتیبانی است. اکثر ویژگی های CSS که ما در این آموزش استفاده کرده ایم توسط همه مرورگر ها پشتیبانی می شود، به جز یکی: که آن هم ویژگی backdrop-filter است.

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

با این حال، یک مشکل دیگر نیز در این جا وجود دارد، فایرفاکس بنا به دلایلی، ویژگی backdrop-filter را به طور پیش فرض فعال نمی کند، حتی اگر مرورگر از این نوع استایل پشتیبانی کند. البته ما امیدواریم در آینده نزدیک این ویژگی به طور پیش فرض فعال شود.

بنابراین، آیا می توان از طراحی شیشه ای یا گلس مورفیسم (glassmorphism) در تولید و طراحی سایت استفاده کرد؟ در حقیقت جواب ما مثبت است. این واقعیت که glassmorphism در چند مرورگر کار نمی کند (3.76 برای Firefox دقیق تر)، بدان معنا نیست که این رابط کاربری برای همه مرورگر ها به اندازه کافی خوب نیست.

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

نتیجه

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

امیدواریم این آموزش به شما در درک بیشتر این ترند طراحی جدید و نحوه پیاده سازی آن در رابط های وب کمک کند.

منبع:

themesberg.com

نوشته جدید ترین ترند طراحی سایت؛ Glassmorphism یا طراحی سایت شیشه ای اولین بار در ممتاز دیزاین. پدیدار شد.

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

1. تصویرسازی و انیمیشن منحصر به فرد

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

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

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

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

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

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

3. هوش مصنوعی

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

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

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

4. واقعیت افزوده

در سال 2021 ترند های طراحی رابط کاربری شامل تفکر خارج از چارچوب، یا بهتر است بگوییم پایبندی به شبکه است. رابط کاربری محدود به صفحه نمایش را فراموش کنید. در عوض باید بر تعاملاتی تأکید کنید که احساس می کنند در محیط واقعی رخ می دهند. گوگل و اپل در حال حاضر سیستم عامل های توسعه AR خود ARCore و AEKit را معرفی کرده اند که دنیای فیزیکی و دیجیتالی را با هم ترکیب می کند. رابط کاربری AR می تواند رویکرد های متفاوتی داشته باشد:

• اشیاء مرتبط: در واقع همان اشیاء در دنیای واقعی که دارای تعامل متقابل هستند.
• ثابت در فضای صفحه نمایش: جایی که کاربر باید دوربین را به روشی خاص قرار دهد.
• مرتبط با دنیای واقعی: که از دنیای فیزیکی اطراف استفاده می کند.

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

5. واقعیت مجازی

سال 2020 سالی برای پیشرفت واقعیت مجازی بود. ما می توانیم آن را اینترنت تجربیات بنامیم، زیرا تأثیر آن مستقیما بر روی کاربران است. هدست های واقعیت مجازی در حال حاضر بیشترین هیجان را برای گیمر های حرفه ای به ارمغان می آورد. علاوه بر پیشرفت های آهسته، فکر نمی کنم سال آینده چیز های بیشتری را به VR اضافه کند، اما ممکن است فرصت هایی برای صنایع دیگر باز شود. به عنوان مثال این امکان بسیار خوبی برای افزایش تعامل در آموزش و پرورش، به ویژه در دوران قرنطینه است.

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

6. سال جلسات مجازی

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

پلتفرم Wonder از رابط سنتی و خسته کننده چت ویدئویی خود خارج شده است. تقریباً یک MVP است، اما یک مورد جالب UX/interaction است. از آنجایی که امسال بسیاری از افراد در خانه کار می کنند، اگر برنامه های بیشتری ویژگی هایی را مشخص کنند که تماس های ویدئویی آنلاین را روان تر کند، بسیار عالی خواهد بود. به عنوان مثال RingCentral به شما این امکان را می دهد که برنامه های دیگر مانند Slack را برای برنامه ریزی و شروع مستقیم تماس ها از طریق سیستم عامل های شخص ثالث ادغام کنید.

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

7. قابلیت استفاده

قابلیت استفاده به ترند جدید طراحی رابط کاربری تبدیل شده است. احتمالاً تاکنون در مورد اعلامیه گوگل شنیده اید که در سال 2021، آن ها سه معیار جدید تجربه کاربری را برای اندازه گیری سرعت بارگذاری، تعامل و ثبات بصری وب سایت معرفی می کنند. آن ها به طور کلی Core Web Vitals نامیده می شوند. اشتباهات تجربه کاربری یک روش اثبات شده برای شناسایی اشکالات قابلیت استفاده در محصول شما و بهبود عملکرد آنلاین آن است. همچنین می توانید با کاربران واقعی قابلیت استفاده وبسایت خود را تست کنید تا با انگیزه ها و نیاز های آن ها بیشتر آشنا شوید.

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

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

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

8. معجزه استفاده از تصاویر 3D

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

در سال 2021 عناصر متحرک مانند لوگو ها، تصاویر و متون نیز در صفحات وب رشد می کنند و به کاربران در تشخیص قسمت هایی که می توانند با آن ها تعامل داشته باشند، کمک می کند. Adobe XD همچنین ممکن است بر عناصر سه بعدی آینده در طرح ها تأثیر بگذارد. این پلتفرم ویژگی جدیدی به نام 3D Transforms را معرفی کرد که اکنون می تواند چشم انداز کاملاً جدیدی را به طرح های آینده اضافه کند.

همانطور که آن ها توضیح دادند “یک تبدیل سه بعدی اجازه می دهد تا یک شیء در فضای سه بعدی دستکاری شود و باعث ایجاد شیب و چرخش و همچنین تغییر عمق یک شی بر روی بوم می شود. به بیان ساده تر طراحان می توانند خارج از محور سنتی X و Y هنگام ایجاد مفاهیم فکر کنند. همچنین می تواند راه را برای طراحی تجربیات AR یا VR باز کند.

منبع: uxstudioteam.com

نوشته ترند های طراحی رابط کاربری در سال 2021 چگونه هستند؟ اولین بار در ممتاز دیزاین. پدیدار شد.