گلس‌مورفیسم در طراحی رابط کاربری
گلس‌مورفیسم یک روند طراحی رابط کاربری است که از اجزای شفاف برای ایجاد عمق استفاده می‌کند.
تصور کنید که در حال استفاده از یک اپلیکیشن خرید آنلاین هستید. با باز کردن اپلیکیشن، طراحی شفاف و مات آن به شما احساس می‌دهد که محصولات را از پشت یک شیشه مات مشاهده می‌کنید. این حس عمق و شفافیت، تجربه کاربری شما را به سطح جدیدی می‌برد و به شما کمک می‌کند تا به راحتی بر روی محصولات تمرکز کنید و تجربه خرید لذت‌بخشی داشته باشید. گلس‌مورفیسم در طراحی رابط کاربری، با استفاده از اجزای شفاف و مات، به طراحان اجازه می‌دهد تا سلسله مراتب بصری و عمق را به طور موثری در رابط کاربری ایجاد کنند. این نوع طراحی، با تقلید از ظاهر شیشه‌های مات، حس لطافت و جذابیت بصری خاصی را به کاربران القا می‌کند.
گلس مورفیسم چیست؟
گلس‌مورفیسم یک سبک طراحی بصری است که از سطوح مختلف شفافیت برای ایجاد عمق و تضاد بین عناصر پیش‌زمینه و پس‌زمینه استفاده می‌کند، مشابه شیشه مات. این سبک با ایجاد اثر شیشه مات و تار کردن پس‌زمینه‌ها پشت پانل‌های نیمه‌شفاف، حس عمق و بعد را تقویت می‌کند و در عین حال ظاهر شیک و مدرنی را حفظ می‌کند. عناصر رابط کاربری گلس‌مورفیسم معمولاً زمانی که در مقابل گرادینت‌ها یا پس‌زمینه‌های پیچیده قرار می‌گیرند، برجستگی بیشتری پیدا می‌کنند و عمق بصری بیشتری را به نمایش می‌گذارند.
این سبک طراحی، به دلیل توانایی‌اش در ایجاد ظاهری سبک و تمیز که بر سلسله مراتب محتوا و خوانایی تأکید دارد، در طراحی رابط کاربری بسیار محبوب شده است.
تاریخچه
اصطلاح «گلس‌مورفیسم» در سال ۲۰۲۰ توسط میشال مالویچ (Michal Malewicz) ابداع شد. این سبک از لایه‌های شفاف و مات برای ایجاد عمق و تضاد استفاده می‌کند، شبیه به شیشه مات. ایده این طراحی به سال ۲۰۱۳ و به‌روزرسانی iOS برمی‌گردد که عناصر نیمه شفاف با اثر شیشه مات را معرفی کرد.
در سال ۲۰۱۷، مایکروسافت با معرفی Fluent Design System و اثر (Acrylic Material)، این سبک را بیشتر توسعه داد. این اثر شامل پس‌زمینه‌های نیمه شفاف و لبه‌های تار بود که حس شیشه‌ای بودن را ایجاد می‌کرد. در سال ۲۰۲۰، اپل در به‌روزرسانی macOS Big Sur عناصر گلس‌مورفیسم را اضافه کرد و این سبک طراحی محبوبیت زیادی پیدا کرد. از آن زمان، گلس‌مورفیسم در بسیاری از اپلیکیشن‌ها و وب‌سایت‌های محبوب مانند Canva مورد استفاده قرار گرفته است. گلس‌مورفیسم با ارائه ظاهری شیک، مدرن و جذاب، به یکی از روندهای برجسته طراحی رابط کاربری تبدیل شده است و پیش‌بینی می‌شود در آینده نیز همچنان محبوب باقی بماند.
گلس مورفیسم در طراحی تجربه کاربری
دسترسی‌پذیری در طراحی تجربه کاربری عامل مهمی است. گلس‌مورفیسم می‌تواند دسترسی‌پذیر باشد اگر با دقت پیاده‌سازی شود. دسترسی‌پذیری در طراحی تضمین می‌کند که محصولات برای افراد با طیف وسیعی از توانایی‌ها و ناتوانی‌ها قابل استفاده باشند. با رعایت اصول زیر می‌توان طراحی گلس مورفیسم را دسترس‌پذیر کرد:
-
کنتراست و خوانایی
کلید دسترسی‌پذیر کردن گلس‌مورفیسم اطمینان از کنتراست بالا بین متن و پس‌زمینه است. متن باید در برابر پس‌زمینه تار و نیمه‌شفاف که در گلس‌مورفیسم رایج است، خوانا باقی بماند.
در مثال زیر، اپل از یک پس‌زمینه تیره در پشت متن سفید استفاده کرد تا کنتراست بالایی ایجاد شود. این انتخاب طراحی باعث شد که اعلان‌ها به راحتی قابل خواندن باشند، حتی با وجود پس‌زمینه نیمه‌شفاف و تار که ویژگی معمول گلس‌مورفیسم است.
-
رنگ و شفافیت
فقط به رنگ برای انتقال اطلاعات تکیه نکنید، چون این کار می‌تواند برای افراد دچار کوررنگی مشکل‌ساز باشد. شفافیت را با دقت استفاده کنید تا مطمئن شوید که خوانایی کاهش نمی‌یابد و عناصر مهم همچنان برجسته و واضح باقی می‌مانند.
برای مثال، سیستم طراحی Fluent مایکروسافت در ویندوز ۱۰ از گلس‌مورفیسم در عناصر رابط کاربری استفاده می‌کند. در منوی استارت، مایکروسافت با تعادل رنگ و شفافیت، از سایه‌ها و حاشیه‌ها برای تمایز بین پنجره‌ها و آیکون‌ها استفاده می‌کند. این کار باعث می‌شود که کاربران با نقص دید رنگ نیز بتوانند به راحتی از آن استفاده کنند.
ناوبری و عناصر رابط کاربری منسجم
نگه داشتن عناصر ناوبری و دکمه‌ها به صورت مات و واضح، به کاربران با مشکلات بینایی کمک می‌کند تا راحت‌تر از آنها استفاده کنند.
-
ویژگی‌های گلس‌مورفیسم
گلس‌مورفیسم دو ویژگی اصلی دارد: شفافیت و تاری پس‌زمینه. طراحان می‌توانند با تنظیم میزان شفافیت و تاری، تعیین کنند که چه مقدار از پس‌زمینه قابل مشاهده باشد. همچنین، می‌توانند برای عمق و تضاد بیشتر از خطوط و گرادیان‌ها استفاده کنند، به خصوص زمانی که عناصر گلس‌مورفیک روی پس‌زمینه‌های ساده یا پیچیده قرار دارند.
-
میزان شفافیت (Opacity)
برای اینکه طراحی شما ظاهر گلس‌مورفیک داشته باشد، باید بتوانید از میان عنصری که طراحی می‌کنید، دید داشته باشید. می‌توانید با تنظیم شفافیت رنگ، الگو یا گرادیان داخل عنصر، به این هدف برسید. شفافیت تعیین می‌کند چقدر می‌توانید از میان یک عنصر ببینید. هرچه یک عنصر شفافیت کمی داشته باشد، کمتر می‌توانید پشت آن را ببینید و هرچه شفاف‌تر باشد، بیشتر می‌توانید محتویات پشت آن را مشاهده کنید. مثلاً، شیشه‌های پنجره خانه شما احتمالاً کدری ۰٪ دارند، یعنی شما می‌توانید بیرون را به وضوح ببینید.
-
محو بودن پس‌زمینه (Background Blur)
محو بودن پس‌زمینه باعث می‌شود چیزهایی که پشت عنصر اصلی هستند، تار و مبهم دیده شوند. مثل وقتی که در یک حمام با درب شیشه‌ای مات هستید یا در یک اتاق با شیشه‌های مات قرار دارید. شما می‌توانید چیزهایی را در طرف‌تان ببینید، اما آنها به قدری تار هستند که نمی‌توانید به وضوح تشخیص‌شان دهید.
محو بودن پس‌زمینه همین تاثیر را برای عناصر دیجیتال با شفافیت کم دارد. مثلاً، یک مستطیل سفید با شفافیت ۳۰٪ و محو بودن ۲۵ پیکسل، چیزهای پشت آن را تار می‌کند اما لبه‌هایش همچنان نسبتاً قابل تشخیص هستند. ولی اگر این محو بودن را به ۱۰۰ پیکسل برسانید، عناصر پشت آن خیلی محوتر و به هم پیوسته‌تر می‌شوند.
-
خطوط و گرادینت‌ها
علاوه بر شفافیت و تاری پس‌زمینه، می‌توانید از خطوط (حاشیه‌ها) و گرادینت‌ها هم برای ایجاد عمق بیشتر در عناصر گلس‌مورفیک استفاده کنید، به‌خصوص وقتی این عناصر روی پس‌زمینه‌های ساده یا تک‌رنگ قرار دارند.
گرادینت از ترکیب دو یا چند رنگ یا شفافیت تشکیل شده که به طور یکدست با هم ترکیب می‌شوند. می‌توانید گرادینت‌ها را هم به داخل عنصر و هم به حاشیه‌های آن اضافه کنید. با اضافه کردن حاشیه‌هایی با شفافیت کم یا گرادینتی به دور یک عنصر، می‌توانید توهم ضخامت ایجاد کنید. همچنین، با اعمال گرادینت‌ها به داخل عنصر، می‌توانید بازتاب نور روی شیشه واقعی را تقلید کنید.
طراحی با گلس‌مورفیسم
وقتی از گلس مورفیسم در طراحی رابط کاربری استفاده می‌کنید، باید محدودیت‌های آن را در نظر بگیرید. یکی از بزرگ‌ترین مشکلات گلس‌مورفیسم، خوانایی متن است که ممکن است به دلیل روشن یا تیره بودن زیاد متن یا شلوغ بودن پس‌زمینه، به وجود بیاید. برای استفاده صحیح از این روش در طراحی، سه نکته زیر را در نظر بگیرید:
-
رعایت الزامات کنتراست
اطمینان حاصل کنید که متن و عناصر بصری شما، الزامات کنتراست را رعایت می‌کنند. چون اجزای گلس‌مورفیک شفاف هستند، متن‌ها ممکن است روی چندین رنگ مختلف قرار بگیرند که می‌تواند خوانایی را کاهش دهد. برای مثال، اگر یک کارت طراحی می‌کنید که روی یک پس‌زمینه شلوغ قرار می‌گیرد، ممکن است متن شما فقط در بعضی از قسمت‌ها کنتراست کافی داشته باشد و در دیگر قسمت‌ها خواندن آن سخت باشد.
(اگر در فیگما طراحی می‌کنید، پیشنهاد می‌کنم از افزونه Contrast توسط Willowtree استفاده کنید که به شما اجازه می‌دهد به سرعت نسبت کنتراست متن و سایر عناصر طراحی را بررسی کنید.)
-
محو بودن بیشتر پس‌زمینه
افزایش میزان محوی پس‌زمینه، به خصوص در پس‌زمینه‌های پیچیده مانند ویدیو، عکاسی و انیمیشن‌ها، بسیار مفید است. بسیاری از طراحی‌های رابط کاربری در سایت‌هایی مثل Behance یا Dribble سعی می‌کنند که عناصر پس‌زمینه را قابل تشخیص نگه دارند. اما پس‌زمینه‌های بیش از حد شلوغ می‌توانند تمرکز کاربران را از محتوای مهم منحرف کرده و خوانایی متن را کاهش دهند. در مواردی که اجزا ممکن است در زمینه‌های مختلف ظاهر شوند، مثل یک پوشش (Overlay) روی وب‌سایت یا منوی متنی در یک اپلیکیشن دسکتاپ، تاری پس‌زمینه باید تمامی پس‌زمینه‌های ممکن را در نظر بگیرد.
-
تنظیم شفافیت توسط کاربر
اگر امکان‌پذیر است، به کاربران اجازه دهید تنظیمات کنتراست یا شفافیت را کنترل کنند. به عنوان مثال، ویژگی‌های دسترسی‌پذیری اپل به کاربران این امکان را می‌دهد که شفافیت را کاهش داده یا کنتراست را افزایش دهند و به این ترتیب، تاری اجزای گلس‌مورفیک را کم یا حتی حذف کنند. این گزینه‌ها به رابط کاربری امکان می‌دهند که برای کاربران با دید کم سازگار شود.
اگر بودجه یا محدودیت زمانی اجازه این نوع سفارشی‌سازی را نمی‌دهد، مطمئن شوید که هر عنصر گلس‌مورفیک در رابط کاربری شما با استانداردهای سایت WCAG سازگار باشد.
چرا از گلس‌مورفیسم در طراحی رابط کاربری استفاده کنیم؟
در زیر به علل استفاده از این سبک طراحی خواهیم پرداخت:
-
ایجاد سلسله مراتب بصری
گلس‌مورفیسم می‌تواند در رابط کاربری یک اپلیکیشن حس عمق ایجاد کند. این حس عمق، وزن بصری بیشتری به برخی از عناصر رابط کاربری می‌دهد. بنابراین، با استفاده از گلس‌مورفیک می‌توان یک سلسله مراتب بصری ایجاد کرد. برای مثال، می‌توانید با اعمال افکت گلس‌مورفیک به یک دکمه، آن را از پس‌زمینه متمایز کنید.
-
برجسته کردن محتوا
گلس‌مورفیسم می‌تواند برای جلب توجه به بخش‌های مهم محتوا استفاده شود. به عنوان مثال، می‌توانید با استفاده از این روش، یک اعلان را طوری نمایش دهید که انگار بالاتر از پس‌زمینه شناور است.
اصول کلیدی طراحی گلس‌مورفیسم
برخلاف سبک‌ها و روندهای قدیمی طراحی، گلس‌مورفیسم نسبتاً جدید است و مجموعه‌ای ثابت از اصول طراحی ندارد. اما برخی ویژگی‌های مشخص وجود دارند که می‌توان به راحتی آنها را شناسایی کرد:
- ظاهر شیشه مات: آیکون‌ها، دکمه‌ها، پنجره‌ها و سایر عناصر رابط کاربری شفاف یا نیمه‌شفاف به نظر می‌رسند، به طوری که انگار از شیشه مات مجازی ساخته شده‌اند.
- سبک چندلایه: طراحی‌های گلس‌مورفیسم ذاتاً چندلایه هستند. معمولاً این طراحی‌ها یک پس‌زمینه شفاف روی یک پس‌زمینه با رنگهای زنده دارند. این سبک چندلایه به عناصر رابط کاربری جلوه‌ای سه‌بعدی می‌دهد.
- پس‌زمینه رنگارنگ: انتخاب رنگهای روشن برای پس‌زمینه، ظاهر شیشه‌ای عناصر رابط کاربری را بیشتر برجسته می‌کند. رنگهای زنده و روشن در پس‌زمینه با عناصر نیمه‌شفاف شیشه‌ای کنتراست ایجاد می‌کنند. این کنتراست یک محوی قابل مشاهده در اطراف عناصر ایجاد می‌کند که به طراحی عمق می‌بخشد و سلسله مراتب بصری را تقویت می‌کند. رنگهای روشن نیز استفاده می‌شوند، اما عمقی که پس‌زمینه‌های شلوغ و روشن ایجاد می‌کنند را ندارند.
- سایه‌ها: اضافه کردن افکت سایه به لایه‌های مختلف در طراحی چندلایه می‌تواند حس عمق ایجاد کرده و به هر لایه جلوه‌ای سه‌بعدی ببخشد.
- برجسته کردن حاشیه: عناصر رابط کاربری در طراحی‌های گلس‌مورفیک معمولاً دارای حاشیه‌های برجسته هستند.
نتیجه‌گیری
گلس‌مورفیسم یک سبک طراحی بسیار انعطاف‌پذیر و پرکاربرد است که می‌تواند در ایجاد رابط‌های کاربری جذاب و تعاملی بسیار موثر باشد. این سبک با استفاده از شفافیت و محوی، امکان ایجاد عمق و بُعد در طراحی را فراهم می‌کند و می‌تواند به بهبود تجربه کاربری کمک کند.
برای بهره‌گیری بهینه از گلس‌مورفیسم، توصیه می‌شود که از این سبک به صورت محدود و هوشمندانه استفاده شود تا حس عمق به خوبی منتقل شود. در نهایت، مهم است که هنگام استفاده از اجزای شفاف، تأثیر پس‌زمینه را در نظر بگیرید و اطمینان حاصل کنید که اصول سلسله مراتب بصری و دسترسی‌پذیری رعایت می‌شوند. امیدواریم این مقاله توانسته باشد جنبه‌های مهم و کلیدی گلس‌مورفیسم را به خوبی بیان کرده باشد و به شما در درک بهتر این سبک طراحی کمک کند.
دیدگاه کاربران