ساخت و طراحی
طراحی فارسی؛ راست‌به‌چپ فقط جهت صفحه نیست
متن فارسی، عدد، لینک و کد را با جهت درست و فاصله‌های خوانا در یک رابط کنار هم قرار بده.
پیش‌نمایش قالب نمایشی ساروی؛ داده‌ها نمونه‌اند
ممکن است صفحه راست‌به‌چپ باشد اما شمارهٔ تلفن، قیمت یا نشانی اینترنتی به‌هم‌ریخته دیده شود. یک تجربهٔ فارسی خوب، جهت و ریتم هر نوع محتوا را جداگانه بررسی می‌کند؛ فقط آینه‌کردن چیدمان کافی نیست.
- URL، عدد منفی و متن دوزبانه درست دیده می‌شوند.
- عنوان بلند در موبایل بریده نمی‌شود.
- واحدها و جهت نمودار روشن‌اند.
جهت هر بخش را از محتوایش بگیر
عنوان و توضیح فارسی معمولاً راست‌به‌چپ‌اند. نشانی اینترنتی و قطعهٔ کد جهت مستقل می‌خواهند. در طراحی فنی، ویژگی dir و عناصر جداسازی جهت مانند bdi به کنترل متن ترکیبی کمک می‌کنند. برای مقدارهایی که جهتشان از قبل معلوم نیست، جداسازی از متن اطراف مهم است.
یک نام انگلیسی وسط جملهٔ فارسی، عدد منفی، بازهٔ تاریخ و درصد را با دادهٔ واقعی آزمایش کن. یک مثال کوتاه همیشه مشکلات جملهٔ طولانی را نشان نمی‌دهد.
فونت را با متن واقعی بسنج
اندازهٔ یکسان در دو فونت الزاماً خوانایی یکسان نمی‌دهد. توضیح چندخطی، عنوان طولانی و دکمهٔ کوچک را کنار هم ببین. فاصلهٔ خط باید اجازه بدهد چشم بدون گم‌کردن سطر جلو برود.
در موبایل، دکمه را برای جا شدن متن بی‌دلیل کوچک نکن. ابتدا فاصله‌ها و شکستن منطقی سطر را بررسی کن. متن ضروری نباید فقط با هاور یا بریدگی انتهای جمله قابل فهم باشد.
اعداد را به واحد و زمینه وصل کن
عدد بدون واحد ممکن است زیبا اما مبهم باشد. در جدول، واحد را در عنوان ستون یا کنار مقدار نشان بده. برای نمودار، جهت محور باید با نوع داده سازگار باشد؛ صرفاً چون عنوان فارسی است، ترتیب زمانی یا عددی را برعکس نکن.
جداکنندهٔ هزارگان، علامت منفی و اعشار را یکدست نگه دار. برای متن قابل کپی مثل شناسه یا کد، نمایش تزئینی نباید مقدار واقعی را عوض کند.
مسیر خواندن را در صفحه دنبال کن
با صفحه‌کلید از لینک‌ها و دکمه‌ها عبور کن و ببین ترتیب تمرکز با ترتیب دیداری سازگار است یا نه. عنوان‌ها باید ساختار منطقی داشته باشند و کاربر بداند بعد از بستن پنجره به کجا برگشته است.
یک مثال قبل و بعد
این مثال آموزشی را با ورودی واقعی خودت جایگزین کن. هدف، روشن‌کردن چیزی است که باید تحویل بگیری.
| درخواست یا فرض مبهم | نسخهٔ قابل بررسی |
|---|---|
| همه‌چیز را راست‌چین کن. | چیدمان فارسی باشد، اما ایمیل و کدها ترتیب درست خودشان را حفظ کنند. فرم با نام طولانی، عدد، نیم‌فاصله و خطا در عرض موبایل بررسی شود. |
یک تمرین برای امروز
سه دادهٔ آزمایشی بساز: یک نام طولانی فارسی، یک ایمیل لاتین و یک مبلغ با واحد تومان. هر سه را در فرم و صفحهٔ نتیجه ببین. سپس با صفحه‌کلید بین فیلدها حرکت کن. ترتیب تمرکز باید با ترتیب منطقی کار هماهنگ باشد. یک پیام خطا را نیز عمداً ایجاد کن تا معلوم شود کاربر چطور راه اصلاح را پیدا می‌کند.
یک بار این‌ها را مرور کن.
- URL، عدد منفی و متن دوزبانه درست دیده می‌شوند.
- عنوان بلند در موبایل بریده نمی‌شود.
- واحدها و جهت نمودار روشن‌اند.
- ترتیب تمرکز صفحه‌کلید قابل دنبال کردن است.
برای بررسی بیشتر
راهنمای MDN برای عنصر bdiدر انجام این کار به مشکل خوردی؟
از پشتیبانی کمک بگیر