اردشیر حکیمی
اردشیر حکیمی
خواندن ۶ دقیقه·۲ سال پیش

تایپ‌فیس در طراحی UI/UX


بهتر است از کلمه "تایپ‌فیس (یا قلم)" به جای کلمه "فونت" استفاده کنیم؛ چراکه فونت در واقع، فایل موجود بر روی کامپیوتر است که نرم‌افزار از طریق آن فایل، تایپ‌فیس را رندر می‌کند.

استفاده بیش از حد از قلم یا تایپ‌فیس‌های متنوع در طراحی، کار را شلوغ و غیرحرفه‌ای جلوه می‌دهد:

معمول آن است که فقط از ۲ نوع تایپ‌فیس در یک محصول استفاده کنیم.

این دو نوع تایپ‌فیس در دو مورد زیر استفاده می‌شوند:

۱. یک نوع تایپ‌فیس برای عنوان‌ها یا تیتر

۲. یک نوع تایپ‌فیس برای بدنه نوشتار


برای تنوع بخشیدن به نوشتار، می‌توان از حالت‌های مختلفی که در یک خانواده فونت (Font family) وجود دارد استفاده کرد، مثلا استفاده از حالت‌های نازک، بولد یا ایتالیک همان تایپ‌فیس اصلی.


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

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


سریف به زایده‌های کوچکی گفته می‌شود که بر روی لبه‌های حروف انگلیسی قرار می‌گیرد‌.
سریف به زایده‌های کوچکی گفته می‌شود که بر روی لبه‌های حروف انگلیسی قرار می‌گیرد‌.



در حروف فارسی، چیزی که به‌جای سریف یا زایده در طراحی حروف وجود دارد، استفاده از تغییر ضخامت در بدنه حروف است.


در حروف فارسی، تغییر ضخامت حروف معادل سریف است.
در حروف فارسی، تغییر ضخامت حروف معادل سریف است.



از این بابت، تایپ‌فیس‌ها به دو دسته تقسیم می‌شوند:

۱. سریف‌دار (Serif)

۲. بدون سریف (Sans-serif)


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


تایپ‌فیسی که برای تیتر یا عنوان استفاده می‌شود باید قابلیت فشرده‌سازی بالایی داشته باشد. تیتر را معمولا کمی فشرده‌تر و متراکم‌تر از متن معمولی باید نوشت. پس برای انتخاب تایپ‌فیس مناسب برای عنوان متن، باید به Kerning آن فونت نیز توجه کرد. کرنینگ در واقع تنظیم فضای آزاد بین دو حرف است. هدف از کرنینگ، ایجاد تعادل در فضای منفی حروف است تا خوانایی و زیبایی متن افزایش یابد.


کرنینگ تنظیم فضای آزاد بین حروف است.
کرنینگ تنظیم فضای آزاد بین حروف است.



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


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


منظور از اندازه حروف، ارتفاع آنها است.
منظور از اندازه حروف، ارتفاع آنها است.



اندازه حروف معمولا بر حسب واحد پوینت (برای گرافیک چاپ) و واحد پیکسل (برای گرافیک دیجیتال) بیان می‌شوند. یک پوینت معادل ۳۵/. میلیمتر است ولی یک پیکسل در دستگاه‌های مختلف، اندازه متفاوتی دارد. تنوع در اندازه حروف مهم است؛ هرچه اهمیت موضوع بیشتر باشد از حروف درشت‌تری استفاده می‌کنیم، ولی:

در طراحی یک اپلیکیشن، باید حداقل ۲ سایز و حداکثر ۳ سایز مختلف از حروف دیده شوند.


به‌صورت پیش‌فرض، در طراحی یک اپلیکیشن بهتر است تنوع اندازه حروف، بسته به اهمیت متن، به‌صورت زیر باشد:

• در سیستم متریال‌دیزاین: مقادیر ۱۴ و ۱۶ پیکسل

• ‏در سیستم iOS: مقادیر ۱۵ و ۱۷ پیکسل


فیلدهایی که باید توسط کاربر تکمیل شوند نیز باید حداقل ۱۶ پیکسل باشند. اگر ترکیب حروف فارسی و انگلیسی در یک متن وجود داشته باشد بهتر است حروف انگلیسی ۲ پیکسل کوچک‌تر از حروف فارسی باشند. یعنی در یک متن ترکیبی، حروف فارسی اندکی بزرگ‌تر از انگلیسی نوشته می‌شوند. برای فاصله خطوط هم مقدار ۱/۵ خط مناسب است.


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


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


فونت‌های مناسب فارسی برای اپلیکیشن

• وزیر

• ‏ایران‌سنس

• ‏یکان

• ‏ترافیک

• ‏کوه نور

• ‏دیروز

• ‏صمیم

• ‏رویا

• ‏شبنم

• ‏تاهوما


فونت‌های مناسب انگلیسی برای اپلیکیشن

• Roboto

• Open sans

• Helvetica

• San francisco

• Montserrat

• Nexa

• Nunito

• Lato

• Aeonik

• Tahoma


برای عنوان‌ها یا تیتر نوشتار در اپلیکیشن، می‌توان از حالت Bold همین فونت‌ها و یا از تایپ‌فیس‌های ضخیم استفاده نمود. در انتخاب تایپ‌فیس فارسی باید دقت کرد که اعداد فارسی نیز در داخل فونت گنجانده شده باشند.


تایپ‌فیس باید با گشتالت، رنگ‌بندی و آیکون‌ست هماهنگ باشد.


تایپ‌فیس باید در کل اپلیکیشن ثابت باشد و تغییر نکند.


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


روی آیکون، نوشته نمی‌آید و اصولا بهتر است آیکون، بدون نوشته باشد ولی در صورت لزوم می‌توان نوشته را زیر آیکون قرار داد.
روی آیکون، نوشته نمی‌آید و اصولا بهتر است آیکون، بدون نوشته باشد ولی در صورت لزوم می‌توان نوشته را زیر آیکون قرار داد.



بر روی آیکون‌ها از نوشته استفاده نکنید. در صورت نیاز، نوشته را در قالب لیبل، زیر آیکون بیاورید.


بر روی نوار پیشرفت (Progress bar) از نوشته استفاده کنید: عددی که نشان دهد درصد پیشرفت چقدر است.


صحیح‌تر است که به‌جای استفاده از عبارات Log in و Log out از عبارات Sign in و Sign out استفاده کنیم.


صحیح‌تر است که به جای عبارت Register از Sign up استفاده کنیم.


در نوشتار UI و UX، به‌جای فعل مجهول از فعل معلوم استفاده کنیم. مثال:

لطفا کد ملی را وارد کنید (مناسب)

لطفا کد ملی وارد شود (نامناسب)


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





ui uxطراحی اپلیکیشنطراحی محصولدیزاین
فوق دکترا طراحی صنعتی ‏www.researchgate.net/profile/Ardeshir-Hakimi
شاید از این پست‌ها خوشتان بیاید