تم تاریک
جهت Direction
طراحی راست به چپ و چپ به راست در پنل آروان کلاد
این مستند به ارایهی اصول طراحی راست به چپ (RTL) و چپ به راست (LTR) در پنل آروان کلاد میپردازد. با توجه به نیاز پنل به پشتیبانی از زبانهای مختلف، طراحان باید قابلیت طراحی هر دو جهت (Bidirectionality) را داشته باشند. همچنین، نحوهی مدیریت طراحیهایی که شامل هر دو جهت در یک صفحه هستند (Mixed Directionality) توضیح داده خواهد شد.
چرا طراحی راست به چپ و چپ به راست اهمیت دارد؟
پنل آروان کلاد ممکن است توسط کاربران با زبانها و جهتنوشتار مختلف (فارسی، انگلیسی، عربی و غیره) استفاده شود.
- بهبود دسترسپذیری: کاربران میتوانند پنل را با زبان و جهت مطلوب خود استفاده کنند.
- افزایش انعطافپذیری: طراحی پنل برای کاربران چندزبانه امکانپذیر میشود.
اصول طراحی راست به چپ RTL
متن و تایپوگرافی
- متنها به صورت راستچین قرار میگیرند.
- فونتهای مناسب زبان فارسی (یکانبخ) استفاده شوند.
- اعداد فارسی در تمام بخشها استفاده شوند.
نوار ناوبری
- لوگو در سمت راست قرار میگیرد.
- آیتمهای منو از راست شروع میشوند.
دکمهها و تعاملات
- ترتیب دکمهها از راست به چپ است.
- آیکونها جهت مناسب RTL دارند (برای مثال فلشهای رو به جلو به سمت چپ اشاره میکنند).
اصول طراحی چپ به راست LTR
متن و تایپوگرافی
- متنها به صورت چپچین قرار میگیرند.
- فونتهای مناسب زبانهای چپچین (Inter) استفاده شوند.
- اعداد به صورت انگلیسی نمایش داده شوند.
جایگاه المانها
نوار ناوبری
- لوگو در سمت چپ قرار میگیرد.
- آیتمهای منو از چپ شروع میشوند.
دکمهها و تعاملات
- ترتیب دکمهها از چپ به راست است.
- آیکونها جهت مناسب LTR دارند (مثلا فلشهای جهت جلو به سمت راست اشاره میکنند).
نحوهی مدیریت طراحی راست به چپ و چپ به راست در یک صفحه Mixed Directionality
تعریف Mixed Directionality
برخی صفحات ممکن است نیاز به ترکیب محتوای راست به چپ (مانند زبان فارسی) و چپ به راست (مانند زبان انگلیسی یا کدها) داشته باشند. این نوع طراحی به دقت و هماهنگی بالایی نیاز دارد.
اصول طراحی ترکیبی
تعیین جهت اصلی صفحه
بر اساس زبان اصلی صفحه، جهت پیشفرض باید مشخص شود (RTL یا LTR).
قاببندی مناسب برای محتوای دیگر زبانها
محتوای زبان دوم (مانند متنهای انگلیسی یا کدها) باید در قابهای جداگانهای قرار گیرد و جهت چیدمان آن تغییر یابد.
هماهنگی بین عناصر
- اطمینان حاصل کنید که عناصر بصری (مانند خطوط، جداول و آیکونها) با جهت اصلی صفحه هماهنگ هستند.
- از فضای سفید مناسب برای تفکیک بخشهای با جهت مختلف استفاده کنید.
راهکارهای فنی برای طراحی ترکیبی
استفاده از Auto Layout در فیگما: برای هر بخش، دایرکشن مناسب (RTL یا LTR) تنظیم کنید.
استفاده از گروهبندیها: بخشهای راستچین و چپچین را در گروههای جداگانه قرار دهید تا از هم متمایز شوند.
پیشنمایش طراحی: قبل از تحویل، پیشنمایش طراحی را در حالتهای مختلف (فقط RTL، فقط LTR، و ترکیبی) بررسی کنید.
اشتباهات رایج و نکات مهم
اشتباهات رایج
- استفاده از فونت یا اعداد اشتباه در هر زبان.
- چیدمان آیکونها یا دکمهها در جهت نامناسب.
- ناهماهنگی در فضاهای خالی بین بخشهای ترکیبی.