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

طراحی تخت (Flat Design) چیست؟

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

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

آن سایه‌ها و بافت‌ها فقط تزئین نبودند؛ هرکدام یک نشانه بودند. سایه می‌گفت «این بالاتر از سطح است، پس فشاردادنی است». وقتی آن‌ها را برداشتید، یک سؤال بی‌جواب می‌ماند: حالا چه چیزی به کاربر می‌گوید کدام‌یک کلیک‌شدنی است؟

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

تعریف و ریشه‌ها

طراحی تخت سبکی در طراحی رابط است که از عناصر ساده و دوبعدی و رنگ‌های روشن استفاده می‌کند — در نقطهٔ مقابل اسکئومورفیسم که می‌کوشد ویژگی‌های سه‌بعدی اشیای واقعی را شبیه‌سازی کند.

ریشه‌اش تازه نیست. طراحی تخت از سبک سوئیسی (سبک بین‌المللی حروف‌نگاری)، باوهاوس و مدرنیسم می‌آید — جریان‌هایی که در دههٔ ۱۹۵۰ و ۱۹۶۰ در طراحی چاپی جا افتادند و اصل مشترکشان این بود که فرم باید از کارکرد بیاید و هر چیزی که کاری نمی‌کند باید برود.

در دنیای دیجیتال، نمونهٔ اولیه‌اش پخش‌کنندهٔ Zune مایکروسافت در ۲۰۰۶ بود. اما نقطهٔ عطف واقعی ۲۰۱۳ است: ویندوز ۸، و مهم‌تر از آن iOS 7 که زیر نظر Jony Ive کل زبان بصری اپل را یک‌شبه از اسکئومورفیسم به تخت برد. کمی بعد گوگل با Material Design نسخهٔ خودش را عرضه کرد.

ویژگی‌های اصلی

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

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

و بعد مشکل پیدا شد

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

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

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

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

طراحی تخت ۲.۰

صنعت خودش این را فهمید. پاسخش چیزی شد که به آن طراحی تخت ۲.۰ یا «تقریباً تخت» می‌گویند: نگه‌داشتن مینیمالیسم، اما برگرداندن مقدار کمی از کیفیت‌های اسکئومورفیک — سایه‌های نرم، تغییرات ملایم رنگ، و لایه‌بندی برای بهبود سلسله‌مراتب.

نکتهٔ مهم این است که این عقب‌نشینی نبود. تفاوت در مقدار نیست، در هدف است. سایهٔ اسکئومورفیک می‌خواست چرم یا فلز را تقلید کند؛ سایهٔ تخت ۲.۰ فقط می‌خواهد بگوید «این لایه بالاتر از آن یکی است». اولی وانمود می‌کند، دومی اطلاع می‌دهد. برای همین هم سایهٔ تخت ۲.۰ معمولاً محو، بی‌رنگ و از منبع نوری غیرواقعی است — تعمداً، تا کسی آن را با شیء واقعی اشتباه نگیرد.

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

چرا در فارسی گران‌تر تمام می‌شود

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

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

اهرم دوم — حروف بزرگ: اصلاً وجود ندارد. این را کمتر کسی می‌گوید و به‌نظرم مهم‌ترین نکته است. یکی از پرکاربردترین ابزارهای سلسله‌مراتب در طراحی تخت، نوشتن با حروف بزرگ در اندازهٔ کوچک است: برچسب دکمه‌ها، عنوان بخش‌ها، سربرگ ستون‌ها، تب‌ها. این کار متن را بدون تغییر اندازه و بدون افزودن رنگ، «برچسب» می‌کند.

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

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

پس در عمل چه کنیم؟ سه جبران که کار می‌کنند:

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

آیکون‌ها و مسئلهٔ جهت

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

معیار تصمیم ساده است: آیا این آیکون جهت خواندن را رمزگذاری می‌کند، یا یک شیء واقعی را تصویر می‌کند؟

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

و یک مورد که مخصوص ماست: آیکون‌هایی که حرف لاتین را رمزگذاری می‌کنند — B برای ضخیم و I برای مورب در ویرایشگرها. اینها برای کاربر فارسی‌زبانی که با نرم‌افزار انگلیسی کار نکرده، هیچ معنایی ندارند و باید یا برچسب بگیرند یا با نمایش خودِ اثر (یک «الف» ضخیم) جایگزین شوند.

جمع‌بندی

• - طراحی تخت سبکی است با عناصر ساده و دوبعدی و رنگ‌های روشن، در مقابل اسکئومورفیسم — با ریشه در سبک سوئیسی، باوهاوس و مدرنیسم، و نقطهٔ عطفش ویندوز ۸ و آی‌اواس ۷ در ۲۰۱۳.
• - دلایل رواجش واقعی بود: مقیاس‌پذیری بهتر، بارگذاری سریع‌تر و ساخت ارزان‌تر در سیستم طراحی.
• - انتقاد اصلی کاربردی است نه زیبایی‌شناختی: نبود نشانه‌های سه‌بعدی، افردنس را مبهم می‌کند و تشخیص عنصر کلیک‌شدنی را به بار شناختی تبدیل می‌کند.
• - دقیق‌ترش این است که هر نشانهٔ حذف‌شده کاری می‌کرد، و آن کار به رنگ و حروف‌نگاری و فاصله سپرده شد.
• - طراحی تخت ۲.۰ مقداری از آن نشانه‌ها را برگرداند، اما با هدف اطلاع‌رسانی نه تقلید — نشانه را به اندازه‌ای برگردانید که کار کند، نه به اندازه‌ای که واقعی به‌نظر برسد.
• - در فارسی هزینه بیشتر است: وزن قلم ضعیف‌تر است و حروف بزرگ اصلاً وجود ندارند، پس دو تا از سه اهرم آسیب می‌بینند و رنگ تنها می‌ماند.
• - جبرانش: مایه‌گذاشتن بیشتر از فاصله، برگرداندن زودترِ قاب و پس‌زمینهٔ ملایم، و انتخاب زودهنگام قلمی با وزن‌های کافی.
• - و در آیکون‌ها: آنچه جهت خواندن را رمزگذاری می‌کند آینه می‌شود، آنچه شیء واقعی را تصویر می‌کند نمی‌شود — و آیکون‌های مبتنی بر حرف لاتین برای کاربر فارسی‌زبان باید برچسب بگیرند.