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