علیرضا موذن
علیرضا موذن
خواندن ۸ دقیقه·۴ سال پیش

10 اصل برای تایپوگرافی در طراحی UI

اهمیت تایپوگرافی خیلی بیشتر از انتخاب تنها یک فونت است. هنگامی که به طور موثر استفاده شود، می تواند قابلیت کاربر پسندی، خوانایی، بهبود دسترسی و سلسله مراتب رابط کاربری را افزایش دهد. در این بخش ، من نکات و اصول استاندارد صنعت را برای استفاده از type like pro در UI به اشتراک می گذارم.

1. اصطلاحات تایپوگرافی

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

قابلیت ردیابی

ردیابی به افزایش یا کاهش یکنواخت فاصله افقی بین طیف وسیعی از حروف اشاره دارد.

پایه

پایه خطی فرضی و نا مرئی است که حروف بر آن سوار شده و مبتنی بر آن طراحی شده اند.

منتهی شدن

فاصله عمودی بین دو خط پایه است. این در عصر جدید بیشتر به ارتفاع خط گفته می شودو "leading" تلفظ می شود.

وزن

وزن به ضخامت نسبی قلم اشاره دارد.


2. سلسله مراتب

?بسیاریازرابطهاوجوددارندکههیچکلمهایدرصفحهندارند.اکثریتقریببهاتفاقطراحیهایUIازچندعنصراستاندارد-متن،مستطیل/جعبه،دکمهها(بدونشکمستطیل+متن)ونمادهاتشکیلشدهاست.اینکاریاستکهمابااینعناصرانجاممیدهیمکهمیتواندیکرابطراایجادیاخرابکند.

سلسله مراتب با سهولت یافتن سریعتر اطلاعات مهم برای کاربران ، به ما در بهبود قابلیت خواندن و رابط کاربری کمک می کند.

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

3. طول و طول خط بهینه

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

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

در اینجا چند روش ابتکاری مفید برای بهینه سازی ارتفاع خط وجود دارد:

  • برای خواندن و دسترسی بهینه بین 130٪ - 180 per آزمایش کنید. هدف این است که یک مقدار خوب پیدا کنید - فاصله بسیار زیاد ، منجر به گم شدن ادامه متن می شود، در حالیکه فاصله بسیار کم خواندن آن متن را دشوار می سازد، پس با سنجش واحد های مختلف بهترین مقیاس روی متن اعمال کنید.
  • هنگام تغییر قلم یا اندازه قلم ، فاصله خط را بررسی کنید. قلم های مختلف دارای حداکثر ارتفاع متفاوت هستند ، بنابراین برای خوانایی بیشتر فاصله بین خطوط را دوباره بررسی کنید.
  • طول خط را به 70-80 نویسه محدود کنید. دنبال کردن سطرهای طولانی متن می تواند ترسناک و گیج کننده باشد.
  • فونت های کوچک باید فاصله بیشتری داشته باشند زیرا خواندن فونت های کوچکتر دشوارتر هستند بنابراین نیازمند فضای اضافی بیشتری برای مطالعه آسانتر هستند.

4. خوانایی را در اولویت قرار دهید

برای اطمینان از اینکه تایپوگرافی ما برای افرادی با عیوب انکساری چشم مانند کوری رنگ ، کم بینایی و غیره به راحتی قابل خواندن و دسترسی است ، باید از دستورالعمل های دسترسی به محتوای وب (WCAG) پیروی کنیم.

در اینجا چند استاندارد آورده شده است که UI ما را برای خوانایی بهینه می کند. اطلاعات بیشتر را در Accessible.org بیابید .

  • با یک حساب سرانگشتی؛ اندازه متن حداقل 16 باشد.این مشخصاً مختص دیوایس ها است ، اما اغلب در تمامی موارد پابرجاست. اگر مثلاً یک رابط تلویزیون است ، متن باید حتی بزرگتر شود.
  • باید نسبت کنتراست رنگی حداقل 4.5: 1 بین کل متن و پس زمینه وجود داشته باشد. دانلود استارک پلاگین برای اطمینان از اینکه این استاندارد در طرح های ما وجود دارند.
  • برای انتقال اطلاعات به تنهایی به رنگ اعتماد نکنید. به عنوان مثال ، یک حالت خطا نباید فقط با طرح قرمز نمایش داده شود ، همچنین از یک نماد هشدار و متن توصیفی برای هشدار وجود یک مسئله استفاده کنید.
  • تغییر اندازه متن : اندازه متن باید تا 200٪ تغییر کند بدون اینکه بر توانایی خواندن محتوا یا استفاده از توابع تأثیر منفی بگذارد.
  • تصاویر متن : در صورت لزوم از تصاویر متن استفاده نکنید (به عنوان مثال ، آرم).

5- تعدد فونت ها را محدود کنید

مخلوط کردن تعداد زیادی فونت مختلف می تواند باعث شود برنامه ما پراکنده و شلخته باشد.

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

6. دستورالعمل های مقیاس نوع را تعریف کنید

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

برای ایجاد دستورالعمل های مقیاس برای یک پروژه UI ، نحوه انجام این کار به شرح زیر است:

  1. قلم را برای کار انتخاب کنید. مکان های مورد علاقه من برای دریافت فونت های UI با کیفیت بالا ، قلم های Google یا فونت های Adobe هستند .
  2. اندازه قلم پایه را تعیین کنید. من با ایجاد مقیاس متداول ترین نوع برای کپی بدنه مانند 16pt شروع می کنم ، سپس یک ارتفاع خط مناسب را تعیین می کنم.
  3. ارتفاع خط. همانطور که قبلاً اشاره کردم ، برای خواندن مطلوب بین مقادیر 130 -1 - 180 آزمایش کنید. این نسبت همیشه دقیق نیست ، اما مکان خوبی برای شروع و سپس انجام تنظیمات در صورت لزوم است.
  4. مقیاس را تعریف کنید. مقیاس سازگاری ، ریتم و سلسله مراتب را برای تایپوگرافی ما فراهم می کند. برای تنظیم مقیاس نوع برای h1 ، h2 ، h3 ، بدنه ، زیرنویس ها ، دکمه ها و غیره ، به یک مقدار مقیاس نیاز داریم تا در اندازه قلم پایه خود ضرب کنیم. مقیاس های معمول برای نوع 1.250x ، 1.414x ، 1.5x ، 1.618x است. باز هم ، مقیاسی را پیدا کنید که برای نوع متن و UI شما کار کند.
  5. مقیاس های تست روی دستگاه ها. برای تصمیم گیری در مورد مقدار مناسب ، فونت را با مقیاس های مختلف در اندازه های مختلف دستگاه آزمایش کنید.

7. از کلمات و عبارات قابل تشخیص استفاده کنید

قوانین و روش هایی که در این مقاله ذکر کردم می تواند کمک زیادی به خوانایی و زیبایی شناسی رابط کاربری ما کند. اما در مورد بهبود قابلیت درک بهتر کلمات در رابط کاربری ما چه می توان کرد؟

برای جمع آوری همه اینها ، باید از قوانینی پیروی کنیم که در واقع در متن وجود دارد.

در اینجا نکاتی برای انتقال پیامهای روشن وجود دارد:

  • از اصطلاحات پرهیز کنید. مگر اینکه برنامه ای برای افراد خاصی طراحی کنیم. از اصطلاحات خاص صنعت مانند "بافر کردن" یا "پیکربندی" خودداری کنید.
  • به حالت فعلی بنویسید. به جای اینکه بگویید: "پیام ارسال شده است" بگویید ، "پیام ارسال شد".
  • آن را کوتاه و شیرین نگه دارید. به جای اینکه بگویید: "فقط اعضای Premium به این ویژگی دسترسی دارند" بگویید"برای دسترسی به Premium بپیوندید" آن را مختصر و با اهمیت نگه می دارد.
  • با هدف شروع کنید. وقتی عبارتی هدف و عمل مورد نیاز برای رسیدن به آن را توصیف می کند ، جمله را با هدف شروع کنید. به جای گفتن: "یک عکس را به سطل زباله بکشید تا از این آلبوم حذف شود" بگویید ، "برای حذف عکس از این آلبوم ، آن را به سطل زباله بکشید."
  • آن را ثابت نگه دارید. هنگام خطاب به کاربر ، مطمئن شوید که شخص اول یا دوم باشد ، هر کدام انتخاب شده است. بنابراین به جای "ویرایش موقعیت مکانی خود در حساب من " بگویید ، " موقعیت مکانی خود را در حساب خود ویرایش کنید ".

8- بر اطلاعات مهم تأكيد كنيد

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

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

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

9. پشتیبانی زبان را در نظر بگیرید

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

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

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

10. در صورت تردید ، از قلم های سیستم استفاده کنید

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

در iOS سان فرانسیسکو (SF) و نیویورک (NY) جز برترین قلم ها قرار دارند. در اندروید فونت اصلی Roboto است و Noto نوع پیش فرض برای همه زبانهایی است که توسط Roboto پشتیبانی نمی شوند.

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



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

زندگی زیباتر از آنیست که ما فکر می کنیم ...
خوش باشید

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