نکاتی برای استفاده خوب از تایپوگرافی در طراحی UI

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

این راهنما نکات و پیشنهادات مربوط به فونت های وب و استفاده از آنها را در محصولات شما به اشتراک می گذارد.

تم، مخاطب و UX

تایپوگرافی در طراحی UI تنها بر اساس طراحی رابط در سطح بصری یا زیبایی شناسی نیست. همچنین از طریق روانشناسی و ادراک با طراحی UX مرتبط است. قبل از استفاده از تایپوگرافی خاص در یک برنامه یا وب سایت، باید نکات خاصی را در نظر بگیرید.

برای روشن شدن اهداف محصول به این سوالات پاسخ دهید. اگر پروژه خودتان نیست، از مشتری خود بپرسید.

. کدام تم و برای چه هدفی استفاده خواهد شد؟ (فروش، آموزش، اطلاع رسانی، الهام بخشیدن و غیره)

. مخاطب واقعی محصول چه کسانی هستند و کاربران چه کسانی هستند؟

. هنگام استفاده از محصول، اثر احساسی مورد انتظار بر روی کاربران چیست؟

. محصول در کدام قالب ها، دستگاه ها و مکان ها استفاده خواهد شد؟

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

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

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

اگر می خواهید در مورد نمونه های اولیه تایپوگرافی بیشتر بدانید، کمپ رایگان کد (Free Code Camp) یک راهنمای جامع با پیشنهادات و مثال های واقعی ارائه می دهد.

فونت ها را با توجه به استراتژی انتخاب کنید

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

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

از موتور جستجو با فیلترهای موجود در فونت های گوگل استفاده کنید تا زمانی که فونت هایی را که مناسب ترین فونت ها با استراتژی پروژه هستند پیدا کنید. با دانلود اولین فونت انتخابی خود شروع کنید. به عنوان ها، متن اصلی، دکمه ها و اعداد فکر کنید. همه این ها مهم هستند.

گروه های دو فونتی را انتخاب کنید و چند تست انجام دهید

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

دو یا سه گروه فونت ایجاد کنید و آنها را با محتوای پروژه و تصاویر بصری آزمایش کنید. اگر افراد دیگری در تیم طراحی شما وجود دارند، اکنون زمان آن است که نظرات خود را برای نهایی کردن بیان کنید

یک راهنمای سبک و سلسله مراتب ایجاد کنید

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

سلسله مراتب دقیق پروژه شما به هدف آن و آزمایش های کاربر انجام شده بستگی دارد. می توانید با سلسله مراتب زیر شروع کنید:

H1 36px
H2 28px
H3 24px
H4 21px
P 18px

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

اگر محصول عمدتاً مبتنی بر متن است، مانند وبلاگ ها و مجلات دیجیتال، متن اصلی باید حداقل 16px باشد. برای محصولات تعاملی تر، مانند تقویم با چندین ویژگی، متون می توانند کوچکتر باشند.

تایپوگرافی خود را با بهترین آیکون ها تکمیل کنید

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

فری پیک راه حل های طراحی بیشتر و بیشتری را به شما ارائه می دهد. علاوه بر UIcons برای طراحی های UI شما، ما همچنین میلیون ها آیکون را در سبک های مختلف و برای استفاده های متعدد ارائه می دهیم. با هزینه بسیار کم می توانید از آن ها استفاده کنید و همچنین می توانید تا 75 درصد تخفیف برای دانلود نیز بگیرید در طرح پیشنهاد شگفت انگیز