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

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

تکامل شیشه مورفیسم

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

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

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

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

نمونه ای عالی از شکل گیری شیشه را می توان در محصولات اپل یافت. هنگامی که iOS 7 در سال 2013 منتشر شد، آیفون‌ها پس‌زمینه‌های خاکستری شفافی را نشان می‌دادند که مه روشنی را به نمادهای زیر آنها اضافه می‌کرد. اپل در سال 2020 با به‌روزرسانی MacOS Big Sur، که دارای منوهای کشویی شیشه‌ای و نوارهای کناری شفاف بود، به این سبک طراحی رونق دیگری بخشید.

اما شیشه‌مورفیسم منحصر به محصولات اپل نیست – سیستم Microsoft Windows Acrylic Design و Windows Vista هر دو از شکل‌گیری شیشه در لایه‌بندی پنجره‌ها بر روی یکدیگر و ایجاد سلسله مراتب استفاده می‌کنند.

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

نحوه ایجاد افکت گلاسمورفیسم

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

شیشه مورفیسم فوکوس نرم

پروژه اثر تایپوگرافی Mirela’s Prifti نمونه ای از جلوه های شیشه ای با فوکوس نرم است. تصویر پس‌زمینه زیر یک پوشش خاکستری تار شده است، که به متن روی هم رفته حسی از تعریف می‌دهد.

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

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

Glassmorphism برای ایجاد تصویر

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

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

حاشیه های نازک و سایه های ظریف

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

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

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

نمونه هایی از Glassmorphism

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

شیشه مات

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

آموزش گلاسمورفیسم

T.Ricks در حالی که به شما یاد می‌دهد چگونه از آن در پروژه‌های Webflow خود استفاده کنید، نمونه‌ای محکم از شکل‌زیستی شیشه‌ای در عمل ارائه می‌دهد.

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

جنگل را تسخیر کنید

آژانس مسافرتی Conquer the Jungle از شکل‌گیری شیشه استفاده می‌کند تا چشمان شما را به سه تور اصلی خود بکشاند.

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

زنجیره اعشاری

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

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

به طرح بعدی خود رنگی از شکل شیشه ای بدهید

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