تایپوگرافی در رابط کاربری فراتر از انتخاب کلمات یا فونت‌های مناسب برای طراحی وب یا موبایل است. رعایت سلسه مراتب، مقیاس فونت، فضای سفید، تضاد رنگ با پشت زمینه و … مواردی هستند که هنگام طراحی Ui باید به آن توجه کنید زیرا تاثیر زیادی بر روی ارائه پیام برند شما می‌گذارد.
این کار بسیار حائز اهمیت است از این رو طراحان وقت و انرژی زیادی صرف Typography می‌کنند تا خوانایی بیشتری برای متن ایجاد کنند و تجربه کاربری را بهبود دهند. در واقع می‌توان گفت یکی از مهم‌ترین راه‌های برقراری ارتباط با کاربر تایپوگرافی است پس حتما در این مورد حساس باشید.
در این مطلب از آی وحید قصد داریم به مبحث تایپوگرافی در رابط کاربری بپردازیم که از مهم ترین مواردی است که باید به عنوان یک طراح در نظر بگیرید. در ادامه با ما همراه باشید.
آن چه در این مطلب می‌آموزیم :
- تایپوگرافی چیست و چرا اهمیت دارد ؟
- عناصر اصلی در تایپوگرافی
- تایپوگرافی در رابط کاربری چه نقشی دارد ؟
- نکات مهم استفاده از تایپوگرافی در طراحی رابط کاربری
تایپوگرافی چیست و چرا اهمیت دارد ؟
قبل از پرداختن به جزئیات تایپوگرافی در رابط کاربری بهتر است به این موضوع بپردازیم که Typography چیست و چرا تا این اندازه حائز اهمیت است.
تایپوگرافی که قدمت آن به قرن یازدهم بر می‌گردد به استفاده از حروف و فونت ها به گونه ای که خوانا، لذت بخش و واضح باشد گفته می‌شود.
Typography شامل سبک، ظاهر و ساختار است و هدف آن برانگیختن احساسات و انتقال پیام خاصی به مخاطب است. حروف به تعادل بصری وبسایت کمک می‌کنند از این رو یک طراح رابط کاربری باید از طریق خوانایی که ایجاد می‌کند، دسترسی به سایت را بهینه کند.
اگر بخواهیم این مفهوم را به زبان ساده بیان کنیم عبارت است از تبدیل زبان انسانی به یک فرم بصری و دیداری. برای اثر گذاری یک متن شما به دو مورد توجه کنید نوع محتوا و ارائه آن.
معمولا در طراحی‌های حرفه ای دیزاینر متن ها را به گونه ای با استفاده از تایپوگرافی ارائه می‌دهد که به خوبی پیام به مخاطب منتقل شود. اگر متن ها جذابیت کافی در اولین برخورد برای مخاطب ایجاد نکنند کاربر به طور کلی آن محصول را کنار می‌گذارد. از این رو سعی کنید وقت و دقت زیادی برای این مورد بگذارید.
عناصر اصلی در تایپوگرافی
عناصر مختلفی وجود دارند که شما باید زمان طراحی به آن ها توجه کنید. این موارد عبارتند از :
فونت
همانطور که می‌دانید فونت مجموعه‌ای از حروف و کلمات با وزن، عرض و سبک یکسان است. در واقع Font مجموعه ای از کاراکترهای متنی با سبک، اندازه نقطه، وزن، رنگ، طرح و سایر ویژگی های مشابه است و می تواند به طراحان در ارائه ایده ها، پیشنهادات، دستورالعمل ها یا سایر اطلاعات متنی کمک کند.
فونت از سایر عناصر تایپوگرافی مهم تر است زیرا زودتر درک می‌شود از این رو برای انتخاب آن باید وسواس زیادی به خرج دهید. علاوه بر این Font یکی از مهم‌ترین جنبه های زیبایی شناسی یک محصول به حساب می‌آید.
تایپ فیس
تایپ فیس خانواده‌ای از فونت‌های مرتبط مانند Serif و Sans Serif است. هر Typefaces اغلب از چند نوع Font تشکیل شده است. مهم‌ترین جنبه تایپوگرافی یک محصول فونت و تایپ فیس است.
فاصله بین خطوط و حروف
این مورد تاثیر مستقیمی بر روی خوانایی متن دارد. فاصله حروف اندازه بین هر حرف از کلمه است و فاصله بین خطوط به Space ای گفته می‌شود که در میان خط های نوشته وجود دارد.
اندازه و وزن
وزن یک فونت به میزان ضخامت و پر رنگ بودن بستگی دارد. مقادیر مختلف وزن و اندازه یک Font را تعریف می‌کند و به طراحان کمک می‌کند تا رابط‌هایی با سبک‌ها و احساسات متفاوت ایجاد کنند. برای این که وزن بیشتری به نوشته خود بدهید باید ضخامت آن را زیاد کنید.
تراز بندی
شما باید متون را به صورت تراز شده به کار ببرید. Alignment فرآیند یکسان سازی و ترکیب متن، گرافیک و تصاویر برای اطمینان از وجود فضا، اندازه و فواصل برابر بین هر عنصر است.
نوشته های شما باید از یک سری خطوط فرضی تبعیت کنند. اگر رابط کاربری که طراحی می‌کنید به زبان فارسی یا عربی است باید راست چین و در غیر اینصورت باید چپ چین باشد.
فضای سفید
فضای سفید که به عنوان « فضای منفی » نیز شناخته می شود، به فضای اطراف متن اشاره دارد. درست است که معمولاً مورد توجه کاربر قرار نمی‌گیرد، اما استفاده مناسب از فضای سفید باعث می‌شود که رابط کاربری به هم ریخته نباشد.
رنگ
یکی از هیجان انگیزترین عناصر تایپوگرافی در رابط کاربری رنگ است. رنگ دارای سه جزء کلیدی است: ارزش، فام و اشباع. یک طراح خوب می داند که چگونه این سه جزء را با هم ترکیب کند تا متن را چشم نواز و خوانا کند، حتی برای کسانی که دارای اختلالات بینایی هستند.
اگر تمایل دارید اطلاعات بیشتری در این زمینه به دست آورید به مطلب تئوری رنگ ها در رابط کاربری مراجعه کنید.
سلسله مراتب
ایجاد سلسله مراتب یکی از حیاتی ترین اصول تایپوگرافی است. Hierarchy در تایپوگرافی با هدف ایجاد تمایز بین المان‌هایی که باید مورد توجه قرار گیرند و خوانده شوند با نسخه استاندارد متن به کار می‌رود.
کنتراست
مانند سلسه مراتب این مورد هم به انتقال پیام و موضاعاتی که می‌خواهید بر روی آن تاکید کنید به کار می‌رود.
تایپوگرافی در رابط کاربری چه نقشی دارد ؟
تایپوگرافی در طراحی UI دقیقاً مانند یک ابزار ارتباط بصری عمل می کند و می‌تواند کاربران را متقاعد کند تا محصولی بخرند یا وقت بیشتری در سایت یا اپلیکیشن بگذارند.
زمانی که مخاطب از یک وب سایت یا برنامه تلفن همراه بازدید می کند، به جای اینکه متن ها را خط به خط بخواند، معمولا کل صفحه را اسکن می کند تا ببینند آیا اطلاعاتی که یه آن احتیاج دارد وجود دارد یا خیر. بنابراین یک Typography سازماندهی شده، مشتریان را تحت تأثیر قرار می دهد و در صورت مدیریت صحیح آن ها را متقاعد به عملی که ما از آن ها انتظار داریم می‌کند. در واقع هنگامی که کاربران در یک صفحه می مانند، یک طراحی تایپوگرافی واضح و اصولی لازم است تا اطلاعات محصول یا خدمات را به طور دقیق ارائه کند و آنها را تشویق به ثبت سفارش کند. پس حتما هنگام طراحی UI نقش تایپوگرافی را نادیده نگیرید.
نکات مهم استفاده از تایپوگرافی در طراحی رابط کاربری
در این بخش قصد داریم به نکاتی که بهتر است هنگام استفاده از Typography در UI رعایت کنید بپردازیم.
برای انتخاب فونت شما باید موارد زیادی را در نظر بگیرید. اولین و مهم‌ترین مورد شخصیت برند، محصول یا خدماتی که ارائه می‌دهید است. انتخاب Font با توجه به تنوع زیادی که وجود دارد سخت است.
برای این که خوانایی را بالا ببریم و رابط کاربری زیبا و کاربرد پذیر باشد باید از چند فونت مختلف استفاده کنیم و به کمک آن توجه کاربران را هم جلب و مدیریت کنیم.
مخاطب از یکنواختی خسته می‌شود و چشم او همیشه به دنبال مواردی است که نسبت به اطرافش متفاوت است. برای این کار نباید از فونت‌های مشابه استفاده کنید و باید مواردی را به کار ببرید که وقتی در کنار هم قرار می‌گیرند با هم متفاوت باشند و کاربر این موضوع را بفهمد. سعی کنید از فونت‌هایی با وزن بالا در محتواهای طولانی استفاده نکنید.
مورد دیگری که باید به آن توجه داشته باشید خوانایی است. برای این که بتوانید اطلاعات را به خوبی ارائه کنید وظیفه شما استفاده از Font هایی با خوانایی بالا است.
برای رعایت سلسله مراتب در متون باید از تغییر اندازه، وزن و رنگ فونت استفاده کنید.
سخن پایانی
زمانی که قصد طراحی سایت یا اپلیکیشن موبایل را دارید تایپوگرافی تنها به عنوان یک ابزار ارتباط بصری عمل نمی کند بلکه خوانایی و دسترسی پذیری رابط کاربری را هم افزایش می‌دهد.
یک Typography اصولی محتوای صفحه را به شکلی بصری ارائه می دهد و خواندن، اسکن و حرکت در صفحه را برای کاربران آسان می کند. این فرآیند به مخاطب کمک می‌کند تا مسیری که برای دسترسی به اطلاعات و نحوه استفاده از محصول یا خدمات نیاز دارد سریع تر یاد بگیرد.
