طراحی شیشه‌ای(Liquid Glass Design)

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

طراحی شیشه‌ای چیست؟

اپل در نسخه ۲۶ سیستم‌عامل‌های iOS، iPadOS، macOS Tahoe و سایر محصولاتش، طراحی شیشه‌ای رو به‌عنوان یک زبان بصری جدید معرفی کرده. طراحان اپل در این سبک طراحی، از ویژگی‌های فیزیکی شیشه الهام می‌گیرن و از لایه‌های نیمه‌شفاف استفاده می‌کنن—لایه‌هایی که نور رو منعکس و خم می‌کنن و با محتوای زیر هماهنگ می‌شن.

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

طراحی شیشه‌ای چه زمانی استفاده می‌شود؟

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

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

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

کاربردها و اهمیت طراحی شیشه‌ای

• ایجاد عمق و لایه‌بندی

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

• تجربه‌ای پویا و زنده

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

• یکپارچگی در اکوسیستم

استفاده در iPhone، iPad، Mac، Vision Pro و Apple Watch سبب میشه که کاربر در تمام دستگاه‌ها تجربه‌ای مشابه داشته باشه.

• آمادگی برای محاسبات فضایی

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

• فرصت‌های جدید طراحی

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

نکاتی کلیدی اجرای طراحی شیشه‌ای

• طراحی جامع و سیستمی

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

• استفاده از اجزای استاندارد

اپل مجموعه‌ای از APIها و کیت‌های آماده در SwiftUI و UIKit ارائه داده. استفاده از این اجزا باعث می‌شه جلوه‌های طراحی شیشه‌ای با تنظیمات دسترس‌پذیری هماهنگ بشن؛ طوری که مثلا کاربر بتونه میزان شفافیت یا حرکت رو کاهش بده و همچنان تجربه‌ خوبی از طراحی داشته باشه.

• طراحی لایه‌محور

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

• کنترل جلوه‌های لبه و مرزبندی

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

• محدود کردن استفاده از پس‌زمینه‌های سفارشی

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

• رعایت اصول دسترسی‌پذیری

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

چالش‌ها و اشتباهات رایج در طراحی شیشه‌ای

۱. کاهش خوانایی

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

۲. جلب توجه بیش از حد

انیمیشن‌ها و افکت‌های متحرک مثل حباب‌هایی که در نسخه ۲۶ iOS دیده می‌شن، به‌جای اینکه توجه کاربر رو به محتوا جلب کنن، باعث حواس‌پرتی می‌شن و تمرکز رو از بین می‌برن.

۳. ناوبری گیج‌کننده

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

۴. ناسازگاری بین دستگاه‌ها

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

۵. اولویت‌ به ظاهر به‌جای کارایی

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

۶. انیمیشن‌های بیش‌ازحد

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

مثال‌هایی از طراحی شیشه‌ای

• اپلیکیشن Messages

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

• اپلیکیشن Apple Maps

در نسخه جدید Apple Maps، بعضی آیکون‌ها، متن‌ها و دکمه‌ها در لایه‌ای نیمه‌شفاف روی نقشه قرار گرفتن. با وجود افکت محو شدن (blur) در پس‌زمینه، جزئیات تصویری هنوز اون‌قدر پررنگ هستن که با متن و آیکون‌ها تداخل بصری ایجاد می‌کنن.

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

• اپلیکیشن Mail

در iOS 26، کنترل‌های شناور نیمه‌شفاف مثل نوار جست‌وجو، عنوان صفحه و دکمه‌های عمل، مستقیما روی محتوای اصلی نمایش داده می‌شن.

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

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

• Safari

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

• اپلیکیشن Phone

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

• Apple Music

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

• App Store

در iOS 26، طراحان اپ استور جای دکمه‌ جست‌وجو رو تغییر دادن و اون رو جدا از بقیه‌ گزینه‌ها، به گوشه‌ نوار پایین منتقل کردن. چون بقیه‌ تب‌ها هنوز کنار هم قرار دارن، این طراحی انسجام ناوبری رو کم کرده و باعث میشه کاربر سخت‌تر گزینه‌ها رو پیدا کنه. تمرکز زیاد روی بخش جست‌وجو، ظاهر نوار رو به چیزی شبیه طراحی اندروید و اپ‌های گوگل نزدیک کرده؛ چیزی که با زبان طراحی مستقل اپل در تناقضه.

• Setting

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

نتیجه‌گیری

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

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

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

منابع

• NNgroup
• UX Collective
• Apple
• Medium
• TechCrunch
• MockFlow
• LiquidGlass
• LogRocket