گلس مورفیسم، ترند طراحی رابط کاربری 2021

اول از همه بیایید برگردیم به سال پیش، که همه دیوانه وار درباره ترند سال 2020 یعنی نئومورفیسم (Neumorphism) میگفتند صحبت کنیم.

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

سلام کنید به گلس مورفیسم (Glassmorphism)!

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

خود این طرح به خودی خود جدید نیست. به عنوان مثال تو طراحی رابط کاربری Windows Vista و IOS 7 و در استایل خیلی از محصولات دیگه هم استفاده شده. همچنین جزوی از دیزاین سیستم مایکروسافت (Fluent Design System) هم هستش که اونجا اسمش Acrylic هست. اواخر امسال هم Mac OS Big Sur عرضه شد که این طراحی رو اعمال کرده بود که باعث شد بیشتر از قبل شناخته بشه.

چه جوری کار میکنه؟

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

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

ما همچنین میتونیم به اندازه 1 پیکسل Outline با رنگ روشن (که حالا خودش هم چند افکت ترنسپرنسی داره) اعمال کنیم تا تداعی گر لبه های شیشه باشه.

قدم آخر هم این هست که سایه رو به پایین شئ اعمال کنیم تا عمق شئ احساس بشه.

دسترس پذیری

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

منبع: hype4.com

شما میتونید منو در شبکه های اجتماعی دنبال کنید:

توییتر | اینستاگرام