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

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

گلاسمورفیسم iosگلاسمورفیسم iosگلاسمورفیسم ios

پوشه و جلوه پس‌زمینه ویجت را در iOS می‌بینید؟ شیشه مات

بنابراین، ویژگی های Glassmorphism چیست؟

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

کیت رابط کاربری برنامه موبایل Glassmorphic Cryptocurrencyکیت رابط کاربری برنامه موبایل Glassmorphic Cryptocurrencyکیت رابط کاربری برنامه موبایل Glassmorphic Cryptocurrency

در حالی که این اصطلاح تنها در سال 2020 ابداع شد، مفهوم تاری پس زمینه برای اولین بار در سال 2013 با iOS 7 به طور گسترده معرفی شد.

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

ویژگی های رایج شیشه مورفیسم عبارتند از:

  • شفافیت (مانند شیشه مات با استفاده از تاری پس زمینه)
  • یک مرز ظریف و سبک در اطراف جسم شیشه‌ای
  • رنگ های زنده
  • رویکرد چند لایه
  • گرادیان ها
  • اجسام شناور در فضا

تاریخچه مختصر گلاسمورفیسم

روند اسکئومورفیسم را به خاطر دارید؟ این تکنیک در دهه 1980 شکل گرفت و تکنیکی است که از تقلید از اشیاء واقعی در دنیای دیجیتال استفاده می کند.

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

اسکئومورفیسم از iBooks اپلاسکئومورفیسم از iBooks اپلاسکئومورفیسم از iBooks اپل
اسکئومورفیسم کلاسیک از آی بوک های اپل

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

Glassmorphism اسکئومورفیسم را گرفت و آن را تکان داد.

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

چرا از Glassmorphism در طراحی وب استفاده کنیم؟

  • در نهایت، این یک تکنیک مفید برای افزودن سلسله مراتب بصری به طرح‌های شما است، به این معنی که می‌توانید کاربر را تشویق کنید تا روی قسمت‌های مهم رابط کاربری تمرکز کند.
  • این می تواند چیدمان را جذاب تر نشان دهد.
  • همه کاره است – این تکنیک تقریباً در هر صنعتی قابل استفاده است!
  • می‌تواند مسیریابی سایت‌ها یا برنامه‌ها را آسان‌تر کند.
  • این یک تکامل مدرن از روندهای قبلی است.

نکاتی برای معرفی Glassmorphism به طراحی وب

  • کنتراست: اطمینان حاصل کنید که کنتراست کافی را با کارت ها و رابط کاربری اعمال کرده اید تا در دسترس و آسان برای استفاده یا خواندن باشد. برای اطمینان از در دسترس بودن طرح، اشیاء روی صفحه باید بتوانند بدون پس‌زمینه کار کنند.
  • شفافیت: شفافیت درست را تنظیم کنید، یعنی نمی‌خواهید یک شی کاملا شفاف داشته باشید (این موضوع را از بین می‌برد!) اما همچنین می‌خواهید بتوانید اشاره‌ای از آنچه در زیر شی شیشه‌مورفیک اتفاق می‌افتد را ببینید.
  • پس‌زمینه: پس‌زمینه مناسب را انتخاب کنید—بهترین جلوه‌های شیشه‌ای می‌تواند زمانی ایجاد شود که پس‌زمینه‌ها خیلی ساده یا خیلی به هم ریخته نباشند. انتخاب یک پس‌زمینه خاموش اما رنگارنگ می‌تواند گزینه خوبی در اینجا باشد.
  • زمان: اگر از ابتدا در حال ساخت و ساز هستید، مطمئن شوید که به خودتان زمان کافی برای آزمایش می دهید. به دلیل شیب ها و شفافیت، یک خط ظریف بین شکل گیری شیشه ای وجود دارد که به تجربه کاربر کمک می کند و مانع آن می شود. مطمئن شوید که در سمت راست هستید!

پیش تو!

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