typography
اردیبهشت ۲۱, ۱۳۹۵

اصول تایپوگرافی در بهبود تجربه کاربر


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

تایپوگرافی

خوانا بودن متن

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

مورد بعدی که باید در متن رعایت شود فاصله خطوط یا Line Spacing  است . این فاصله خصوصا در گوشی های همراه نقش مهمی در افزایش خوانایی متن دارد و به صورت کلی عوامل اصلی تعیین کننده میزان فاصله خطوط عبارت است از :

  • سایز متن
  • میزان متن
  • حالت نوشتن و افکت ها
  • عرض صفحه نمایش

متاسفانه فرمول دقیقی برای محاسبه فاصله خطوط وجود ندارد ولی میتوانید از روش های زیر کمک بگیرید :

  1. برای سایت های اینترنتی فاصله خطوط باید به اندازه  ۱۲۵ درصد سایز متن باشد
  2. برای گوشی های همراه  فاصله خطوط باید به اندازه  ۱۵۰ درصد سایز متن باشد
  3. برای جدا کردن پاراگراف ها فقط یک بار اینتر کنید و این فاصله استاندارد شما باشد.
  4. سایت را در دستگاه های مختلف تست کنید تا اشکالات احتمالی را ببینید و رفع کنید.

robin

فونت های متفاوت برای بخش های خاص

برای بخشهایی که میخواهید بیشتر مورد توجه باشند از فونت هایی متفاوت با خوانایی بالا استفاده کنید؛ برای مثال از فونت تیتر میتوانید در عناوین و بخشهای خاص متن استفاده کنید تا توجه کاربر جلب شود ولی اگر تمام سایت شما با فونت تیتر باشد اصلا جلوه خوبی ندارد.پس برای بخشهای خاص سایت از فونت هایی استفاده کنید که کاراکتر های آن کشیده و مجزی از هم باشند و به راحتی قابل خواندن باشد. زیرا فونت هایی که چسبیده به هم هستند در سایز بالاتر خوانایی خود را از دست میدهند.

theory11

از سایز بندی متفاوت استفاده کنید

نکته مهم بعدی در تایپوگرافی سایت استفاده از سایز های متفاوت فونت در بخشهای مختلف است,اینکه باید از چه سایزی برای متن استفاده کنید به شخص طراح بستگی دارد و تابع قانون خاصی نیست ولی به طور کلی اکثر طراحان حرفه ای با ۴۵ تا ۶۰ کاراکتر برای هر خط موافقت دارند.با انتخاب سایز متفاوت و مناسب برای بخش های مهم و قابل توجه سایت میتوانید خیلی بهتر توجه کاربر را جلب کند.

grain

نقش حروف در فونت های انگلیسی

اگر سایت شما انگلیسی است یا قصد دارید از فونت های انگلیسی در سایت خود استفاده کنید باید بعضی نکات را در انتخاب فونت های انگلیسی رعایت کنید از جمله :

فونت های گرد Round  استفاده کنید چون کاراکترهای این فونت ها خوانایی و زیبایی خاصی دارند و بر خلاف فونت های رسمی و شکسته مانند Arial باعث خستگی کاربر نمیشوند.

به حرف x دقت کنید چون این حرف در جملات جلوه خاصی دارد و سعی کنید فونتی انتخاب کنید که حرف x در آن کشیده و بلند باشد.این فونت ها معمولا خوانا هستند و سایز حرف x در حالت کوچک به اندازه دو سوم یا سه چهارم سایز فونت در حالت بزرگ باشد.

فاصله بین حروف

در بخشهای مختلف سایت باید فاصله بین حروف رعایت شود,خصوصا در عنوان ها و بخشهایی که با سایز بزرگتر نمایش داده میشود باعث میشود کاراکتر ها چسبیده به هم باشد و خوانا نباشد. برای همین رعایت فاصله بین حروف در تمام بخشهای سایت مهم است و باید حتما به آن توجه شود.

تناسب را رعایت کنید

در هنگام شروع پروژه طراحی سایت بهتر است یک تناسب کلی بین بخشهای مختلف متن در سایت تعیین کنید, شاید این کار در ابتدا سخت باشد اما با کمی تمرین میتوانید این تناسب را پیدا کنید یک نمونه ساده از این تناسب را در قسمت فاصله خطوط مطالعه کردید.باید از ابتدا سایز فونت در بخش های عنوان مقالات,  زیر عنوان ها , نقل قول ها , متن مقالات به صورتی انتخاب شود که با هم هماهنگ باشد و برای مخاطبان هارمونی ایجاد کند. برای اطلاعات بیشتر در این مورد میتوانید این آموزش از شرکت Tuts Plus را مشاهده کنید.

humbolt

حاشیه مناسب برای متن

کاراکتر های حروف در متن سایت باید حاشیه مناسبی داشته باشد,یعنی کاراکتر ها نه باید زیاد پر رنگ و ضخیم باشد نه زیاد نازک برای مثال تفاوت یک متن نوشته شده با فونت Titr و Arial  را درنظر بگیرید که فونت titr  بسیار پر رنگ و بزرگ و فونت arial کم رنگ و نازک است که هیچکدام از اینها برای طراحی یک سایت حرفه ای مناسب نیستند اما فونت یکان را درنظر بگیرید, کارکتر های این فونت عرض مناسبی دارند و حتی در سایز کوچک بسیار خوانا هستند که باعث محبوبیت آن در طراحی سایت شده است.

محدودیت نوع فونت ها

هرگز در سایت از چندین فونت مختلف استفاده نکنید چون این کار باعث خستگی و سردرگرمی کاربر میشود , اگر میخواهید بعضی بخش ها سایت متمایز باشد میتوانید فونت متفاوتی برای آن استفاده کنید ولی نهایتا از ۲ نوع فونت برای سایت استفاده کنید, یکی به عنوان فونت اصلی سایت در مقالات و منو ها و بخشهای دیگر و فونت دوم برای بخشهای متمایز که باید توجه بیشتری جلب کند. همچنین نوع فونت ها باید به صورتی باشد که در کنار متمایز بودن از نظر ظاهری هماهنگ باشد ,

رعایت کنتراست

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

محتوی در سایت شما تنها چیزی است که باعث میشود سایت شما خاص و منحصر به فرد باشد پس باید خوانا بودن متن سایت برای کاربران اولیوت ویژه ای برای شما داشته باشد

. در این سایت میتوانید مقادیر مناسب کنتراست بین متن و پس زمینه را به راحتی پیدا کنید.