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

نئومورفیسم (Neumorphism) چیست؟

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

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

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

این فاصلهٔ میان تصویر و استفاده، کل داستان نئومورفیسم است.

نئومورفیسم چیست؟

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

عنصر و زمینه تقریباً هم‌رنگ‌اند. تنها چیزی که آن‌ها را از هم جدا می‌کند یک جفت سایه است: یکی روشن و یکی تیره. به آن «رابط نرم» (Soft UI) هم می‌گویند، چون کنتراستش ذاتاً پایین است.

اسمش از ترکیب «اسکیومورفیزم نو» (New Skeuomorphism) آمده است. Michał Malewicz، مدیر خلاق استودیوی Hype4، این اسم را در سال ۲۰۱۹ روی موجی گذاشت که در دریبل و بیهنس می‌دید.

نقطهٔ شروع را معمولاً یک شات می‌دانند: طرح یک اپ بانکی از Alexander Plyuto که در دریبل دست‌به‌دست شد. پرسش او این بود که اگر اسکیومورفیزم با موبایل تکامل پیدا می‌کرد، امروز چه شکلی داشت.

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

اینکه چرا این احیا نماند، در مقالهٔ اسکیومورفیزم آمده است. اینجا سراغ خود سازوکار می‌رویم.

یک سطح، دو سایه

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

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

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

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

در پالت رایج این سبک، حتی تیره‌ترین نقطهٔ سایه هم به حدود ۱٫۷ به ۱ با زمینه می‌رسد. سایه محو هم هست و بیشترش کم‌رنگ‌تر است.

معیار WCAG 2.1 برای مرز اجزای رابط و نشانه‌های حالت، حداقل ۳ به ۱ می‌خواهد. یعنی سبکی که همهٔ اطلاعاتش را در سایه می‌گذارد، از همان اول زیر خط است.

این عددها سلیقه نیستند، نتیجهٔ مستقیم تعریف سبک‌اند. اگر کنتراست را آن‌قدر بالا ببرید که به ۳ به ۱ برسد، دیگر رابط نرم ندارید.

چرا این‌قدر دیده شد

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

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

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

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

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

مسئلهٔ اصلی: حالت‌ها دیده نمی‌شوند

بحث دربارهٔ نئومورفیسم معمولاً روی خوانایی متن می‌ماند. به نظر من مسئلهٔ عمیق‌تر حالت‌ها هستند.

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

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

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

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

در زبان نشانگرها، این یک نشانگر غایب نیست. نشانگری است که هست، ولی زیر آستانهٔ دیدن است. نتیجه‌اش برای کاربر همان است.

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

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

کجا جواب می‌دهد

این بخش در منبع نیست. منبع فقط می‌گوید نئومورفیسم را سنجیده به کار ببرید و با سبک‌های دیگر ترکیبش کنید. من می‌خواهم بگویم «سنجیده» دقیقاً یعنی چه.

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

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

با این قاعده، چند جا هست که رابط نرم واقعاً خوب کار می‌کند:

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

جایی که نباید سراغش رفت هم روشن است. فرم‌های طولانی، جدول‌ها، فهرست‌های فشرده، و هر صفحه‌ای که ده‌ها کنترل کوچک کنار هم دارد. در این صفحه‌ها کاربر کار می‌کند، نه تماشا.

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

اگر تصمیمش را گرفتید

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

چند نکتهٔ اجرایی هم از تجربهٔ خودم اضافه می‌کنم:

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

در بافت فارسی

رابط نرم در محصول فارسی چند گرفتاری دارد که در منبع نیامده‌اند.

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

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

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

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

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

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

جمع‌بندی

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

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

راه نجاتش کنار گذاشتن سایه نیست. معنا را به یک لایهٔ پرکنتراست بسپارید و سایه را تزئین نگه دارید. کنترل‌های بزرگ و کم‌تعداد جای درست این سبک‌اند و فرم و جدول جای غلطش.

اگر بخواهم یک پرسش بگذارم: اگر فردا همهٔ سایه‌های محصولتان را پاک کنید، کاربر کدام دکمه را دیگر پیدا نمی‌کند؟