آدرین علی نژاد
آدرین علی نژاد
خواندن ۳ دقیقه·۳ سال پیش

گلس مورفیسم / طراحی شیشه‌ای ترند جدید

گس مورفیسم یا طراحی شیشه ای ترند جدید طراحی رابط کاربری
گس مورفیسم یا طراحی شیشه ای ترند جدید طراحی رابط کاربری


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

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

طراحی جدید گلس مورفیسم یا طراحی شیشه ای
طراحی جدید گلس مورفیسم یا طراحی شیشه ای

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

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

گلسمورفیسم یا طراحی شیشه ای رابط کاربری
گلسمورفیسم یا طراحی شیشه ای رابط کاربری

برای اجرا کردن این سبک قطعا شما باید با پس زمینه بلور و اوپسیتی کم کار کنید و از رنگ بندی های خاص و شفاف استفاده کنید٬ مثل یک دستور پخت غذاست که باید این ادویه هارو داخلش استفاده کنید تا به نتیجه مطلوب برسید. برای مثال شما می تونید با قرار دادن یک تصویر داخل برنامه اسکچ اپ ( SketchApp ) و ساختن یک مربع روی آن این افکت رو بسازید.

مربع داخل برنامه رو انتخاب کنید و رنگ پس زمینش رو به سفید و اوپسیتی اون رو روی ۳۰ درصد قرار بدید٬ بعد از اون از گزینه Blur ٬ آپشن بکراند بلور رو انتخاب کنید تا باکس مربع شیشه ای شما ساخته بشه. حالا می تونید با استفاده از Border شفاف و روشن حس شیشه ای که نور به گوشه هاش برخورد می کنه رو هم القا کنید.

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

حتی کد نویس های Front-End هم می تونن از این لینک برای ساختن راحت باکس های شیشه ای و گلس مورفیسم استفاده کنن :‌ https://glassmorphism.com

منابع :

طراحی رابط کاربری
instagram: adrinalinejad
شاید از این پست‌ها خوشتان بیاید