در این آموزش، با ابزار متن در Adobe XD و تنظیمات آن آشنا می‌شوید؛ از ساخت کادر متن تا تغییر اندازه، فاصله، تراز و چینش نوشته‌ها. کار با این تنظیمات، آموزش استفاده از نرم‌افزار است. انتخاب درست فونت، سلسله‌مراتب نوشتار و خوانایی در یک طرح، به اصول تایپوگرافی و طراحی رابط کاربر نیاز دارد.
ویدیوی آموزش Text و Typography در Adobe XD
این ویدیو آموزش کار با ابزار متن و تنظیمات نوشتار در Adobe XD است؛ از ساخت کادر متن تا تنظیم اندازه، فاصله و چینش نوشته‌ها. اگر فیلترشکن خاموش است، نسخه آپارات را همین‌جا ببینید؛ نسخه YouTube هم از دکمه زیر در دسترس است.
تفاوت پوینت تکست و ایریا تکست در ایکس دی
پوینت تکست بیشتر برای تیترها و دکمه‌ها کاربرد داره، در حالی که ایریا تکست مخصوص پاراگراف‌ها و کنترل بدنه‌های متنی طولانی هست.
برای نوشتن پوینت تکست (Point Text)، کافیه کلید میانبر T رو بزنید و فقط یک بار روی صفحه کلیک کنید. این نوع متن با طولانی شدن نوشته، فقط در یک خط افقی امتداد پیدا می‌کنه و کادر اون تنها یک نقطه کنترلی برای تغییر سایز داره.
اما اگر ابزار متن رو انتخاب کنید و روی صفحه کلیک کرده و درگ کنید (بکشید)، یک ایریا تکست (Area Text) ساخته میشه که چهار نقطه در اطراف کادرش قرار داره. وقتی متن شما در ایریا تکست به انتهای کادر برسه، به صورت خودکار می‌شکنه و به خط پایین منتقل میشه.
تنظیمات ظاهری و فاصله‌گذاری متن‌ها
پنل تنظیمات سمت راست در نرم‌افزار (Inspector) تمام ابزارهای لازم برای تغییر فونت، سایز، وزن کلمات و فاصله‌های متنی رو در اختیارتون قرار میده.
بعد از انتخاب متن، می‌تونید فونت دلخواهتون رو مشخص کنید و وزن اون رو از حالت‌های خیلی نازک (Thin) تا خیلی ضخیم (Black) تغییر بدید. وقتی وزن فونت رو ضخیم می‌کنید، ممکنه حروف بیش از حد به هم نزدیک بشن.
برای تنظیم فاصله بین حروف (Kerning) می‌تونید از کلیدهای ترکیبی Shift به همراه فلش بالا یا پایین روی کیبورد استفاده کنید تا فاصله رو ده تا ده تا تغییر بدید. همچنین مدیریت فاصله بین خطوط (Line Height) و فاصله بین پاراگراف‌ها به راحتی از طریق همین پنل قابل انجام هست.
قابلیت‌های تنظیم خودکار کادر متنی
گزینه‌های Auto Height و Auto Width به شما کمک می‌کنند تا ابعاد کادر متنی به صورت هوشمند بر اساس محتوای داخلش تطبیق پیدا کنه.
اگر قابلیت اتو هایت رو فعال کنید، ارتفاع کادر ایریا تکست بر اساس تعداد خطوطی که می‌نویسید به صورت خودکار اضافه میشه تا هیچ بخشی از متن شما پنهان نمونه.
به همین شکل، با انتخاب اتو ویت، عرض کادر متنی دقیقاً به اندازه بزرگترین خط موجود در متن تنظیم میشه. این قابلیت‌ها باعث میشن نیازی نباشه هر بار به صورت دستی کادرهای متنی رو ریسایز کنید.
تنظیمات پیشرفته و تایپ فارسی در ایکس دی
ایکس دی به صورت نیتیو امکان تایپ فارسی رو بهتون میده، اما هنوز در درک دایرکشن راست‌چین و جایگذاری اصولی نقطه‌ها ضعف داره.
در بخش فرمتینگ متن، می‌تونید حروف انگلیسی رو به صورت تماماً بزرگ (Uppercase) یا تماماً کوچک (Lowercase) دربیارید و از استایل‌هایی مثل زیرخط‌دار کردن یا خط کشیدن روی کلمات استفاده کنید.
در مورد زبان فارسی، برخلاف بعضی نسخه‌های قدیمی نرم‌افزارهای دیگه، در ایکس دی حروف فارسی به درستی به هم متصل میشن و خوانایی کاملی دارند. اما تنها مشکل مهمی که وجود داره، عدم پشتیبانی کامل از چینش راست‌به‌چپ (RTL) هست. این موضوع باعث میشه اگر در انتهای یک پاراگراف فارسی نقطه بذارید و از کادر خارج بشید، اون نقطه به اشتباه به ابتدای خط پرش کنه.
برای تحویل دقیق طرح فارسی، جای نشانه‌گذاری‌ها و ترتیب نمایش متن را بررسی کنید. توسعه‌دهنده باید ظاهر مورد انتظار را ببیند؛ بهتر است چنین تفاوت‌هایی را به‌جای نادیده گرفتن، در فایل طراحی توضیح دهید.
نکات مهم در طراحی متن فارسی
نمایش درست نوشته‌های فارسی به فونت و نسخه نرم‌افزار بستگی دارد. بهتر است قبل از تحویل طرح، فونت‌های استفاده‌شده را مشخص کنید و از صفحات مهم خروجی تصویری بگیرید تا ظاهر متن برای همکاران کاملا روشن باشد.
آشنایی با ابزار، تنها بخشی از مسیر یادگیری است. برای یادگیری تخصصی طراحی رابط کاربر (UI)، سرفصل‌ها و پروژه‌های دوره UI Design Plus را ببینید. این دوره علاوه بر آموزش ابزار، اصول طراحی، تمرین‌های عملی و پروژه‌های طراحی رابط کاربر را پوشش می‌دهد.
ادامه مسیر
- قسمت قبل: Shapeها — قسمت ۲
- قسمت بعد: Image و Mask — قسمت ۴
- Typography در UI
