منبع: بنیاد طراحی تعامل (IxDF) · بازنویسی آزاد: سپنتا پویا · ترجمه: ۶ شهریور ۱۴۰۵ · زمان مطالعه: حدود ۱۰ دقیقه

گلس‌مورفیسم (Glassmorphism) چیست؟

💡 این متن «بازنویسی آزاد» است: ایده‌ها و مفاهیم مطلب اصلی با نگارش کاملاً مستقل فارسی و مثال‌های تازه بازگو شده‌اند و ترجمهٔ کلمه‌به‌کلمه نیست. بخش‌های افزودهٔ مترجم در جعبهٔ منبع مشخص شده‌اند.

شیشهٔ مات زیبا به‌نظر می‌رسد و یک هزینهٔ ثابت دارد: هر چیزی که پشتش است، بر خوانایی چیزی که رویش است اثر می‌گذارد.

و کل مهارت طراحی با این سبک، در مدیریت همین هزینه است.

تعریف

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

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

از کجا آمد

اصطلاحش را میشاو مالویچ، مدیر خلاق و مدیرعامل هایپ۴، در ۲۰۱۹ ساخت.

و رواجش پس از به‌روزرسانی مک‌اواس بیگ سور اپل در ۲۰۲۰ اتفاق افتاد — با اوج پذیرش در اواخر ۲۰۲۰ و اوایل ۲۰۲۱.

و ارزش دارد بپرسیم چرا درست در آن لحظه گرفت. سه چیز هم‌زمان شدند.

یک: سخت‌افزار آماده شد. محو‌کردن زندهٔ پس‌زمینه در هر فریم، تا چند سال پیش از آن روی دستگاه‌های معمولی گران بود.

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

و سه: یک سازندهٔ بزرگ آن را در سیستم‌عاملش گذاشت. این سومی تعیین‌کننده است — روندهای بصری وقتی می‌گیرند که کاربر هر روز آن‌ها را ببیند، نه وقتی طراحان دربارهٔ‌شان بنویسند.

ولی ریشه‌اش قدیمی‌تر است. مرکز اعلان iOS 7 عناصر شیشه‌ای برجسته‌ای داشت، و سیستم طراحی فلوئنت مایکروسافت در ویندوز ۱۰ هم همین مسیر را رفت.

پنج ویژگی بصری

• - شفافیت. پس‌زمینهٔ نیمه‌شفاف که شیشهٔ مات را تقلید می‌کند.
• - محوشدگی. محو‌کردن پس‌زمینه، همان چیزی است که ظاهر شیشهٔ مات را می‌سازد.
• - حاشیه و سایه. حاشیهٔ روشن و سایهٔ ملایم، اثر بصری و عمق را بیشتر می‌کند.
• - لایه‌بندی. عناصر روی‌هم با شفافیت‌های متفاوت، ظاهر سه‌بعدی می‌سازند.
• - رنگ. تُن‌های نرم و کم‌رمق، سایه‌های پاستلی، و گرادیان‌های ملایم.

و ویژگی دوم آنی است که بقیه به آن وابسته‌اند. بدون محوشدگی، شفافیت فقط یک پنل کم‌رنگ است — و آنچه پشتش قرار می‌گیرد، متن رویش را ناخوانا می‌کند.

پیاده‌سازی

در وب، ترکیب مشخصی از ویژگی‌های CSS این کار را می‌کند:

• - background-color با کانال آلفا، یعنی rgba.
• - backdrop-filter: blur() برای جلوهٔ شیشهٔ مات.
• - حاشیهٔ روشن و سایهٔ ملایم به‌عنوان مکمل.
• - و تنظیم میزان شفافیت و محوشدگی، برای حفظ خوانایی متن.

و نکتهٔ آخر یک بند فنی نیست؛ تنها متغیری است که تصمیم می‌گیرد این سبک کار می‌کند یا خراب می‌شود.

کجا خوب کار می‌کند

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

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

و یک ویژگی دوم هم دارند که کمتر گفته می‌شود: در همه‌شان، آنچه پشت شیشه است تصویری است که خودتان انتخاب کرده‌اید.

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

و به‌محض اینکه محتوای پشت شیشه متغیر شود — تصویر محصول، آواتار کاربر، عکسی که کاربر بارگذاری کرده — این تضمین از بین می‌رود، و هر بار قرعه‌کشی است.

کجا نباید

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

مسئلهٔ کنتراست

و اینجا هستهٔ سخت ماجراست: پس‌زمینهٔ نیمه‌شفاف و محو، کنتراست متن را کم می‌کند — و برای کاربران کم‌بینا و کوررنگ مشکل می‌سازد.

و انطباق با WCAG باید آزموده شود، نه فرض. راه‌های مهارش هم مشخص‌اند:

• - کنتراست بالا میان متن و پس‌زمینه را تضمین کنید.
• - برای متن و آیکون از رنگ‌های خنثی استفاده کنید — سیاه، سفید، خاکستری.
• - برای انتقال اطلاعات فقط به رنگ تکیه نکنید.
• - عناصر ناوبری و دکمه‌ها را مات نگه دارید.
• - متن جایگزین و برچسب ARIA بگذارید.
• - و مرتب با ابزارهای دسترس‌پذیری آزمون کنید.

و یک راه‌حل عملی هم هست که خودِ اپل در iOS 7 به‌کار برد: پس‌زمینهٔ تیره‌شده زیر متن سفید، تا با وجود شفافیت و محوشدگی، کنتراست بالا بماند.

و قاعدهٔ چهارم مهم‌تر از آن است که به‌نظر می‌رسد. اگر دکمه شفاف باشد، کاربر باید حدس بزند کجا فشار دهد — و این دیگر مسئلهٔ زیبایی نیست، مسئلهٔ کارکرد است.

در برابر سه سبک دیگر

• - گلس‌مورفیسم: شیشهٔ مات با شفافیت و محوشدگی · عمق بالا و لایه‌ای · دسترس‌پذیری دشوار و نیازمند مدیریت دقیق کنتراست.
• - نئومورفیسم: جلوه‌های فرورفته و برجستهٔ نرم · عمق متوسط و لمسی · در حالت تیره مشکل‌ساز و دچار کنتراست پایین.
• - اسکئومورفیسم: تقلید اشیای دنیای واقعی · عمق متوسط با جزئیات واقع‌گرایانه · دسترس‌پذیری عموماً خوب، چون زبان بصری‌اش آشناست.
• - طراحی تخت: تمیز و دوبعدی و بی‌تزیین · عمق کم · دسترس‌پذیری عالی، به‌دلیل سادگی و کنتراست بالا.

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

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

یک قاعده که تصمیم را ساده می‌کند

این بخش افزودهٔ من است، چون بحث معمولاً میان «قشنگ است» و «دسترس‌پذیر نیست» گیر می‌کند و به تصمیم نمی‌رسد.

و قاعده‌اش این است: شیشه برای لایه‌ای است که کاربر از آن عبور می‌کند، نه لایه‌ای که در آن کار می‌کند.

نوار کناری، سربرگ، پس‌زمینهٔ یک کارت تزئینی، و پنلی که چند ثانیه دیده می‌شود — این‌ها لایه‌های عبورند.

فرم، جدول، فهرست بلند، و هر جایی که کاربر باید بخواند و انتخاب کند — لایه‌های کارند. و در لایهٔ کار، شیشه فقط هزینه است.

و آزمون سرراستش هم این است: اسکرین‌شات بگیرید و پس‌زمینه را عوض کنید. اگر با پس‌زمینهٔ روشن و تیره و شلوغ، متن هنوز خوانا بود، سبک کار می‌کند. و اگر نه، شما طرح را برای یک عکس طراحی کرده‌اید، نه برای محصول.

و همان‌طور که در طراحی تخت نوشتم، هر سبکی که خوانایی را به عهدهٔ محتوای پشتش بگذارد، در محصول واقعی — جایی که محتوا عوض می‌شود — قابل‌اتکا نیست.

هزینهٔ اجرایی

و یک هزینهٔ دیگر هم هست که در بحث سبک کمتر گفته می‌شود: محوشدگی گران است.

backdrop-filter در هر فریم دوباره محاسبه می‌شود. روی دستگاه قوی نامرئی است و روی دستگاه ضعیف، پیمایش را کند می‌کند.

و بدتر از کندی، ناسازگاری است: همان طرح روی دو دستگاه، دو حس متفاوت می‌دهد — یکی روان و یکی لرزان.

و راه عملی‌اش این است که محوشدگی را کاهش‌پذیر طراحی کنید: روی دستگاه ضعیف، شفافیت بماند و محوشدگی برداشته شود. طرح کمی فرق می‌کند و کار می‌کند.

در حالت تیره

و یک مسئلهٔ دیگر که در بیشتر راهنماها جا می‌افتد: گلس‌مورفیسم در حالت روشن و حالت تیره دو رفتار متفاوت دارد.

در حالت روشن، پنل شیشه‌ای نور را از پس‌زمینه می‌گیرد و روشن می‌ماند، و متن تیره رویش خوانا می‌شود.

در حالت تیره ماجرا برعکس نمی‌شود؛ بدتر می‌شود. پنل نیمه‌شفاف روی پس‌زمینهٔ تیره، به رنگی خاکستری و بی‌جان می‌رسد که نه شیشه به‌نظر می‌رسد و نه از پس‌زمینه جدا می‌شود.

و درمانش دو چیز است. یکی افزودن یک لایهٔ روشن بسیار کم‌رنگ — نه شفافیت بیشتر، بلکه سفیدِ چند درصدی که لبهٔ پنل را نگه دارد. و دیگری تکیهٔ بیشتر بر حاشیه، چون در حالت تیره، حاشیه تنها چیزی است که مرز پنل را اعلام می‌کند.

و همین است که نئومورفیسم در حالت تیره شکست خورد و گلس‌مورفیسم نخورد: نئومورفیسم فقط سایه دارد و سایه در تاریکی دیده نمی‌شود. شیشه دست‌کم حاشیه دارد.

در بافت فارسی

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

و همین یعنی آستانه‌ای که برای متن انگلیسی کافی است، برای فارسی کافی نیست. روی شیشه، «پ» و «ب» زودتر از b و p به هم شبیه می‌شوند.

دو: قلم‌های فارسی وزن‌های کم‌تری دارند. در بسیاری از قلم‌های رایج، فقط دو یا سه وزن موجود است — و وزن نازک روی پس‌زمینهٔ شیشه‌ای عملاً ناخواناست.

و راه‌حلش استفاده از وزن بالاتر نیست، چون خط فارسی در وزن سنگین شلوغ می‌شود. راه‌حل، کم‌کردن شفافیت زیر متن است — همان کاری که اپل کرد.

سه: گوشی‌های میان‌رده اینجا سهم بزرگی دارند. و همان‌طور که در کارکردپذیری نوشتم، اگر روی لپ‌تاپ توسعه‌دهنده آزمون کرده‌اید، چیزی را آزمون نکرده‌اید.

پس محوشدگی را روی ارزان‌ترین دستگاهی که کاربرانتان دارند ببینید، نه روی گران‌ترین.

چهار: تصویر پس‌زمینه اغلب دست شما نیست. در محصول‌هایی که تصویر محصول یا آواتار کاربر پشت شیشه می‌نشیند، شما هیچ کنترلی روی روشنی و شلوغی پس‌زمینه ندارید.

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

جمع‌بندی

• - گلس‌مورفیسم روند طراحی رابط با جلوهٔ شیشهٔ مات است · پس‌زمینه پشت پنل نیمه‌شفاف محو می‌شود و حس عمق می‌سازد
• - اصطلاحش را میشاو مالویچ در ۲۰۱۹ ساخت · با مک‌اواس بیگ سور در ۲۰۲۰ رواج یافت · و ریشه‌اش در iOS 7 و فلوئنت مایکروسافت است
• - پنج ویژگی: شفافیت · محوشدگی · حاشیه و سایه · لایه‌بندی · رنگ نرم — و بدون محوشدگی، بقیه کار نمی‌کنند
• - در CSS: rgba برای رنگ، backdrop-filter برای محوشدگی، و تنظیم شفافیت برای حفظ خوانایی
• - جاهای مناسبش همه یک ویژگی دارند: متن کم و تصویر زیاد
• - مسئلهٔ کنتراست: انطباق با WCAG را بیازمایید · رنگ خنثی برای متن · و دکمه و ناوبری را مات نگه دارید
• - در برابر نئومورفیسم و اسکئومورفیسم و طراحی تخت · و متریال دیزاین کنتراست بالاتری دارد
• - قاعده: شیشه برای لایه‌ای است که کاربر از آن عبور می‌کند، نه لایه‌ای که در آن کار می‌کند · و آزمونش عوض‌کردن پس‌زمینه است
• - محوشدگی گران است و روی دستگاه ضعیف کند · کاهش‌پذیر طراحی‌اش کنید
• - و در فارسی: خط فارسی کنتراست بیشتری می‌خواهد · وزن‌های قلم کم‌اند پس شفافیت را کم کنید نه وزن را زیاد · روی ارزان‌ترین دستگاه ببینید · و زیر تصویر متغیر، پوشش تیرهٔ ثابت بگذارید