گلس مورفیسم (Glassmorphism) یک سبک مدرن در طراحی رابط کاربری (UI) است که با استفاده از سطوح نیمه شفاف، تاری پس‌زمینه و سایه های ملایم، جلوه ای شبیه «شیشه یخ زده» ایجاد می‌کند. این سبک باعث می‌شود عناصر رابط کاربری مانند کارت‌ها، مودال‌ها، منوها، یا بخش‌های تعاملی وب‌سایت، طوری به نظر برسند که روی لایه‌ای شناور و شیشه‌ای قرار دارند.
تاریخچه Glassmorphism به زبان ساده
خود ایده شفافیت و تاری پس زمینه (translucency + blur) خیلی جدید نیست و سیستم‌هایی مثل ویندوز ویستا (از طراحی Aero Glass) در پس زمینه یا بخش های مختلف سیستم عامل استفاده می کردند یا حتی طراحی Fluent مایکروسافت در سال ۲۰۱۷ از تاری و سبک شیشه ای رونمایی کرد و بسیار محبوب شد یا حتی شرکتی مثل اپل افکت شفافیت و تاری را در ios 7 و مک او اس در سال ۲۰۱۳ رونمایی کرده بود. اما همه اینها بخشی از پیش‌نیازهایی بود که باعث شکل‌گیری سبک گلس مورفیسم شد.
اصطلاح دقیق “Glassmorphism” تقریباً در سال ۲۰۲۰ به شکل بسیار جدی توسط طراح UI میخل مالویچ (Michał Malewicz) در مقاله ای تشریح و به‌کار گرفته شده و از ان پس این طراحی با استقبال بینظیر روبرو و رایج شد. رشد این سبک در دنیای وب به دلیل پشتیبانی بهتر CSS (مثل backdrop-filter: blur(…)) باعث شد این سبک به دنیای طراحی وب سایت و اپلیکیشن های وب نیز اجرایی گردد. امروزه طراحان از سبک های قدیمی مثل اسکویو مورفیسم (Skeuomorphism) و طراحی فلت عبور کرده‌اند و Glassmorphism را به‌عنوان راهی برای ایجاد عمق و پیچیدگی ظریف در رابط‌ها انتخاب کرده‌اند.
چرا سبک گلس مورفیسم در طراحی سایت جذاب است؟
- جذابیت بصری و حس مدرن: استفاده از شفافیت و تاری، جلوه‌ای شیک، مدرن و پریمیوم به رابط سایت می‌دهد.
- ایجاد سلسله‌مراتب بصری (Visual Hierarchy): لایه‌بندی شیشه‌ای به طراح اجازه می‌دهد اجزای مهم‌تر را برجسته کند بدون آنکه پس‌زمینه را کاملاً پنهان کند.
- افزایش تمرکز کاربر: وقتی عناصر شفاف و بلوری روی پس‌زمینه قرار می‌گیرند، توجه کاربر به بخش‌های تعاملی مانند دکمه‌ها یا ورودی‌ها جلب می‌شود.
- تناسب با طراحی مدرن دستگاه‌ها: با توجه به نمایشگرهای با رزولوشن بالا و قدرت پردازش گرافیکی بیشتر، افکت‌های تاری شیشه‌ای به خوبی نمایش داده می‌شوند.
- حس عمق و شناوری: سایه‌های ملایم و لایه‌های شفاف باعث می‌شوند عناصر رابط «شناور» به نظر برسند، که حس سه‌بعدی ظریفی ایجاد می‌کند.
معایب و چالش‌ها در استفاده از Glassmorphism در طراحی سایت
- خوانایی پایین: متن روی پنل‌های شیشه‌ای ممکن است باعث دشواری در مطالعه شود، به‌ویژه اگر شفافیت و تاری خیلی زیاد باشد.
- عملکرد (Performance): استفاده از backdrop-filter: blur(…) در CSS می‌تواند در برخی دستگاه‌های قدیمی‌تر یا کم‌قدرت باعث کاهش کارایی شود.
- دسترس‌پذیری (Accessibility): اگر تضاد رنگی (contrast) به اندازه کافی در نظر گرفته نشود، کاربران با مشکلات بینایی ممکن است نتوانند متون را به راحتی بخوانند.
- افراط در استفاده: وقتی همه اجزای رابط شیشه‌ای شوند، طراحی ممکن است گیج‌کننده یا ناکارامد به نظر برسد.
آیا سبک گلس مورفیسم (Glassmorphism) در طراحی سایت مناسب است؟
برای پاسخ به این سوال باید گفت بستگی دارد! به طور کلی این سبک موافقان و مخالفان خود را دارد و همیشه دو پاسخ منطقی برای این سوال وجود دارد.
پاسخ بله را می توان گفت اگر این سبک به درستی اجرا شود و قطعا تجربه کاربری را بهبود می بخشد. باید توجه کنید همه سایت ها مناسب این سبک نیستند، اما اگر به درستی از این سبک استفاده گردد با ایجاد عمق و تفکیک بصری، باعث می‌شود اجزای مهم‌تر سایت برجسته‌تر شوند و کاربر راحت‌تر مسیر تعامل را تشخیص دهد یا برخی از سایت ها و برای برندهایی که می‌خواهند ظاهری پیشرفته و لوکس داشته باشند، گزینه عالی‌ای است اما برای یک سایت خبری که می خواهد متن و اخبار را منتشر دهد چندان مورد پسند و جذاب نیست و قطعا اثر منفی خواهد داشت.
بهترین روش برای استفاده از Glassmorphism در طراحی سایت چیست؟
بهتر است از افکت شیشه‌ای فقط در بخش‌های مهم یا قابل تعامل استفاده شود، مثل مودال‌ها، کارت‌ها، منوهای شناور و بخش‌های هیرو.
کنتراست کافی بین متن و پس‌زمینه باید به خوبی رعایت شود؛ به طور مثال استفاده از سایه، رنگ تیره‌تر، یا لایه‌های نیمه‌شفاف مهم است.
از خصوصیات css به درستی استفاده گردد. همیشه باید خصوصیات مختلف را با نسخه های مختلف مرورگرها مقایسه و بهینه سازی لازم را انجام داد.
لایه‌بندی را باید طوری انجام داد که عناصر شیشه‌ای در عمق و سلسله‌مراتب معنادار باشند، همچنین استفاده از تعداد زیاد لایه شیشه‌ای خودداری شود.
برای دستگاه‌های کم‌قدرت یا مرورگرهایی که از فیلتر تاری پشتیبانی ضعیفی دارند، بازگشت (fallback) در نظر گرفته شود (مثلاً پس‌زمینه تخت یا شفافیت ساده).
مقایسه کوتاه Glassmorphism با سایر سبک‌ها
برای انتخاب سبک طراحی بهتر، مقایسه سریع زیر می‌تواند کمک کند:
| سبک طراحی | ویژگی اصلی | مناسب برای | ملاحظات |
|---|---|---|---|
| طراحی فلت | سادگی و سرعت بارگذاری | سایت خبری و محتوایی | ممکن است حس یکنواخت بدهد |
| نیومورفیسم | سایه‌های نرم و سه‌بعدی | اپلیکیشن و UI لمسی | خوانایی و دسترس‌پذیری محدود |
| گلس مورفیسم | شفافیت و تاری پس زمینه | برندهای لوکس، صفحه فرود | نیاز به بهینه‌سازی CSS |
نتیجه‌گیری در طراحی سایت با سبک Glassmorphism
استفاده از سبک Glassmorphism در طراحی سایت، می‌تواند هویت بصری مدرن، شفاف و لوکسی ایجاد کند و تجربه کاربری را به‌طور قابل توجهی ارتقا دهد. با این حال، اجرای صحیح این سبک نیازمند دقت و رعایت اصول فنی است. زیرا در صورت استفاده نادرست، ممکن است عملکرد سیستم و دسترس‌پذیری کاربران تحت تاثیر منفی قرار گیرد.
برای بهره‌گیری موثر از این طراحی، توصیه می‌شود عناصر کلیدی رابط کاربری ابتدا در مرحله پروتوتایپ مانند Figma یا Sketch پیاده‌سازی و مورد آزمایش قرار گیرند. بررسی خوانایی، کنتراست و تعامل‌پذیری در این مرحله، می‌تواند نقش مهمی در تصمیم‌گیری نهایی داشته باشد.
در نهایت، Glassmorphism زمانی بهترین نتیجه را ارائه می‌دهد که:
- در بخش‌های مشخص و هدفمند استفاده شود؛
- با اصول UX و دسترس‌پذیری هماهنگ باشد؛
- و از لحاظ کارایی و تجربه کاربری مورد ارزیابی قرار گیرد.
اگر این موارد رعایت شود، می‌توان از Glassmorphism به‌عنوان یک سبک طراحی مؤثر و آینده‌نگر در وب‌سایت‌های مدرن بهره گرفت.
می‌خواهید وب‌سایت شما با سبک گلس مورفیسم طراحی شود؟
برای طراحی سایت هم اکنون می توانید اقدام کنید
طراحی سایت در یزد