فرم طراحی نیومورفیک (Neumorphic) در رابط کاربری

در اواخر سال 2019 میلادی، ماه نوامبر، یک طراح رابط کاربری اوکراینی به نام الکساندر پِلیتو یک فرم جدید در طراحی رابط کاربری خلق کرد و نام آن‌را "Skeuomorph" گذاشت، اسکیومورف در طراحی رابط کاربری استفاده از نور، سایه و رنگ‌هایی است که در دنیای واقعی از قرار گیری اشیاء هم رنگ ایجاد می‌شوند. اما توضیح اسکیومورف و استفاده از آن در طراحی محصولات فیزیکی مثل تلفن، خودرو و غیره کمی سخت‌تر است. برای توضیح فرمِ طراحی آن در محصولات فیزیکی همان تلفن رو مثال میزنم، به شماره گیر یک تلفن آنالوگ که تا همین 15 یا 20 سال پیش در ایران هم به‌صورت متداول استفاده می‌شدند دقت کنید:

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

اسکیومورف در رابط های کاربری گذشته

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

مدل "الکساندر پِلیتو" و نزدیکی به مدرن متریال

در 5 نوامبر 2019 یک طراح اوکراینی اپلیکیشن بانکی را با یک فرم جدید طراحی کرد و آنرا با نام Skeuomorph منتشر کرد. این اثر در مدت کوتاهی با بازدید و استقبال بالایی مواجه شد. بعد ها طراحانی همچون Filip Legierski به گسترش این فرم کمک کردند.

استفاده از نام Neumorphic

پس از انتشار اولین طرح توسط الکساندر یک طراح تجربه کاربری به نام جیسون کلی در کامنتی نام نیومورفیک (Neumorphic) که معنی New skeuomorphism (اسکیومورفیسم جدید) رو میده به‌جای Skeuomorph توصیه کرد و به سرعت تگِ نیومورفیسم جایگزین اِسکیومورف شد. منبع

تکنیک و فرم در Neumorphic

همانطور که در اول مقاله اشاره کردم، شیوه تفکیک اشیاء در اِسکومورف از طریق سایه و نور هست، به تصویر زیر دقت کنید:

سکشن بالا سمت چپ (A) نور شیء ماست و پائین سمت راست (B) سایه شیء ماست، به طرح الکساندر پلیتو مجدد نگاه کنید، اشیاء همرنگی را می‌بینید که از طریق نور و سایه از هم تفکیک می‌شوند. اگر بخواهیم هر دو طرف بخوبی کارشونو بکنند بک‌گراند نباید کاملا مشکی و یا سفید باشه، حداقل به مقداری رنگ نیازه که هر دو رنگ سفید، مشکی و نور قابل مشاهده باشه، فرض کنید بکگراند اپلیکیشن شما صورتی هست، بسیار خب مشکلی نیست، شما باید رنگارو جوری تنظیم کنید که اشیاء (دکمه، تصویر، متن و غیره) از طریق نور و سایه قابل تفکیک باشند.

تا حال که این مطلب نوشته می‌شود هنوز فرم Neumorphic در حداقل هیچ‌یک از اپلیکیشن‌ها یا وب‌سایت‌های مطرح دنیا اجرایی نشده، شاید استفاده طراحان بیشتری از این فرم در سال 2020 بتواند آن‌را تبدیل به یک استاندارد همچون متریال دیزاین گوگل بکند، باید دید!