موضوع بعدی ما
درباره‌ی نحوه استفاده از آیکون‌ها در طراحی وب است
آیکون‌ها می‌تونن جزئیات زیادی اضافه کنند
و ظاهر و حس کل یک صفحه یا برنامه رو کاملاً تغییر بدن
به همین دلیل مهمه که بدونید چطور باید ازشون درست استفاده کنید
و احتمالاً مهم‌ترین قانون
در استفاده از آیکون‌ها
استفاده از یک بسته آیکون خیلی خوبه
نه اینکه از آیکون‌های تصادفی که آنلاین پیدا می‌کنید استفاده کنید
خیلی بسته‌های آیکون آنلاین موجوده هم رایگان و هم پولی
ولی بسته‌های رایگان مثل Phosphor Icons.
Ionlcons و ICONS8 واقعاً می‌تونن خیلی به کارتون بیان
مثلاً Phosphor Icons
که این شکلی هستن در واقع منبع بسیار خوبی از آیکون‌های باکیفیت هستند
و اگر بخواید طراحی‌تون خیلی راحت‌تر بشه
حتی لازم نیست حتماً یک بسته آیکون خارجی اضافه کنید
می‌تونید به سادگی از ایموجی‌ها هم استفاده کنید
و در خیلی از موقعیت‌ها ایموجی‌ها واقعاً خوب جواب می‌دن
پس این قطعاً یک گزینه‌ی خوبه برای بررسی
حالا نکته مهم اینه که
فقط از یک بسته آیکون استفاده کنید
هیچ‌وقت آیکون‌های مختلف از بسته‌های مختلف رو با هم قاطی نکنید
چون در غیر این صورت ممکنه نتیجه‌ای شبیه این بگیرید
اینجا شش آیکون داریم
که یکی از اون‌ها کاملاً متفاوت به نظر می‌رسه
می‌تونید حدس بزنید کدومه؟
البته این یکیه
سبک کاملاً متفاوتی داره
بقیه‌ی آیکون‌ها خطی هستن و خیلی گردن
در حالی که این آیکون مثل مربع یا جعبه‌ایه و پر هم هست
این سبک آیکون واقعاً کاملاً متفاوته
و می‌تونه حواس کاربر رو پرت کنه
و توجهش رو از محتوای شما منحرف کنه
چون ممکنه فقط به این آیکون عجیب و غریب نگاه کنه
و مطمئناً این چیزی نیست که شما بخواید
حالا نکته بعدی باید فقط از آیکون‌هایی استفاده کنید
که فرمت SVG دارن یا چیزی به اسم icon font
این مهمه چون این نوع آیکون‌ها
بر اساس وکتور هستن
یعنی می‌تونیم اندازه‌شون رو هر چقدر بخوایم تغییر بدیم
بدون اینکه کیفیتشون پایین بیاد
پس هیچ وقت تیز و شفافیشون از بین نمیره
فرقی نمی‌کنه چقدر بزرگشون کنیم
به همین دلیل استفاده از این فرمت‌ها در طراحی وب خیلی مهمه
و این روش طراحی شما رو حرفه‌ای و تمیز نگه می‌داره
با این کار می‌تونید مطمئن باشید
که آیکون‌ها همیشه شفاف و واضح هستند
حتی وقتی سایزشون رو بزرگ می‌کنید
این به شما آزادی می‌ده تا طراحی انعطاف‌پذیر داشته باشید
و هر چقدر هم آیکون‌ها بزرگ بشن کیفیتشون حفظ می‌شه
از طرف دیگه
ما تصاویر معمولی‌تری داریم مثل JPG یا PNG
و بنابراین هیچ‌وقت نباید این فرمت‌ها رو برای آیکون‌ها استفاده کنیم
چون نمی‌تونیم اون‌ها رو مقیاس‌بندی کنیم
وقتی بزرگشون می‌کنیم کیفیتشون پایین میاد و تار می‌شن
و این مشکل بیشتر روی صفحه‌های با وضوح بالا پیش میاد
که ضریب مقیاس ۲ برابر دارن
همونطور که قبلاً گفتیم
در درس قبلی درباره تصاویر یادتونه؟
وقتی دنبال آیکون می‌گردید
ممکنه وسوسه بشید که فقط گوگل کنید و تصاویری پیدا کنید
و بعد از نتایج برای طراحی‌تون استفاده کنید
اما این نتایج همیشه تصاویر هستند
مثل JPG یا PNG
و بنابراین همون‌طور که گفتم این‌ها قابل مقیاس‌بندی نیستند
پس گزینه‌های مناسبی برای استفاده در طراحی شما نیستند
همچنین استفاده مستقیم از تصاویر گوگل اغلب
تخلف از قوانین کپی‌رایت محسوب می‌شه
پس به هر حال هیچ وقت ایده خوبی نیست درست؟
همیشه دنبال بسته‌های آیکون حرفه‌ای باشید
که معمولاً همیشه به صورت SVG یا حتی icon fonts هستند
خب اما حالا باید بدونید چطور بین بسته‌های مختلف آیکون انتخاب کنید
پس چطور این کارو انجام می‌دید؟
خب مهم‌ترین نکته اینه که این آیکون‌ها باید با شخصیت
وب‌سایت شما مطابقت داشته باشند دوباره تاکید می‌کنم
و ساده‌ترین راه برای این کار استفاده از بسته‌ایه
که گردی و وزنش شبیه تایپوگرافی شما باشه
این مهمه چون آیکون‌ها اغلب همراه متن قرار می‌گیرن
و این نکته کلیدیه
پس هماهنگی بین آیکون و متن خیلی مهمه
خب بریم سراغ چند مثال
مثال اول تایپوگرافی بسیار گردی داره
به‌خصوص در بخش عنوان
و بنابراین آیکون‌ها هم خیلی گرد هستند درست؟
حتی شکل‌هایی که درشون قرار گرفتن فقط گرد نیستند
بلکه کمی نامنظم هم هستند
و همه این‌ها به گردی کلی طراحی کمک می‌کنه
و هماهنگی ظاهری طراحی رو افزایش می‌ده
حالا از طرف دیگه سمت راست
ما یک تایپ فیس کاملاً مربعی یا جعبه‌ای داریم
پس اصلاً گرد نیست درست؟
کاملاً متفاوته
از تایپ فیس سمت چپ
و بنابراین آیکون‌ها هم کاملاً متفاوت هستند
اون‌ها کاملاً مربعی و غیرگرد هستند
و با تمام متن این قسمت کاملاً هماهنگند
حالا بعضی از شخصیت‌های وب‌سایت ممکنه
اصلاً نیازی به آیکون نداشته باشند
مثل شخصیت مینیمالیست یا بولد اما دوباره
درباره شخصیت‌ها کمی بعدتر صحبت می‌کنیم
خب اما بعداً یک نمای کلی از کارهایی که باید انجام بدیم
برای هر شخصیت و برای هر عنصر خواهیم داشت
اما حالا بریم سراغ
اینکه واقعاً چه زمانی می‌تونیم از آیکون‌ها در طراحی استفاده کنیم
یک مورد استفاده بسیار رایج اینه که از آیکون‌ها
برای ارائه کمک بصری به متن استفاده کنیم مثل
همه این مثال‌ها
پس شما یک تکه متن دارید
و بعد یک آیکون کوچک نزدیک به متن قرار می‌گیرد
که اساساً فهم و مرور متن را آسان‌تر می‌کند
و کمک می‌کند متن را راحت‌تر درک کنیم
و همچنین جزئیات بصری جالبی اضافه می‌کند و دوباره
به متن خود کمک بصری ارائه می‌دهد
پس این کار واقعاً خیلی خیلی رایجه و
مطمئنم شما هم در انواع سایت‌ها
که روزانه بازدید می‌کنید این رو دیدید
حالا احتمالاً رایج‌ترین مورد استفاده آیکون‌ها
ساخت بلوک‌های ویژگی است
بلوک‌های ویژگی چیزی مثل این هستند
که معمولاً یک آیکون در بالای آن قرار دارد
بعد یک عنوان کوچک و سپس یک توضیح
هدف این بلوک‌های ویژگی اساساً توضیح دادن
ویژگی‌های یک محصول یا خدمات خاص است
و بنابراین آیکون‌ها در این بلوک‌ها بسیار مفید هستند
چون اگر درست انتخاب شوند
ممکنه کاربر حتی لازم نداشته باشه متن رو بخونه
مثلاً در این اولین بلوک ویژگی
ما فوراً می‌فهمیم
بدون حتی خوندن متن که چند اتاق خواب وجود داره
که مقداری مبلمان و نظافت انجام می‌شه
و همچنین وجود وای‌فای مشخصه
امروزه در طراحی مدرن وب
تقریباً همه سایت‌ها نوعی بلوک ویژگی دارند
که در آن‌ها از آیکون‌ها برای ارائه
اطلاعات بصری درباره هر ویژگی استفاده می‌شود
حالا یک موقعیت دیگه که آیکون‌ها همیشه استفاده می‌شوند
همراه با اقدامات است
مثلاً روی دکمه‌ها یا منوها
در برنامه‌های وب مثل توییتر یا اسپاتیفای
یا بسیاری از برنامه‌های دیگه که مطمئنم دیدید
و دوباره
هدف استفاده از آیکون‌ها در این موقعیت
ارائه کمک بصری به متن است
یعنی اساساً کاربر راحت‌تر و سریع‌تر
متوجه می‌شود هر اقدام چه کاری انجام می‌دهد
گاهی حتی بدون اینکه متن را اصلاً بخونه
ما همه روزانه از وب استفاده می‌کنیم
و با این کار
معنی بسیاری از این آیکون‌ها را یاد می‌گیریم
مثلاً در این مثال توییتر
اعلان‌ها پیام‌ها
نشانه‌گذاری‌ها یا حتی پروفایل
ما حتی نیازی به خواندن متن برای اون آیکون‌ها نداریم درست؟
ما فوراً متوجه می‌شیم هر گزینه چه کاری انجام می‌ده
با این حال ما هنوز باید آیکون‌ها رو با متن برچسب‌گذاری کنیم
و فقط به استفاده از آیکون‌ها اکتفا نکنیم
چون بسیاری از کاربران ممکنه معنای این آیکون‌ها رو ندونن
و همچنین بعضی از آیکون‌ها همیشه واضح نیستن
پس بنابراین بهترین روش اینه که همیشه
آیکون‌ها رو همراه با متن واقعی اقدام استفاده کنیم
تنها استثنا اینه که واقعاً فضایی وجود نداشته باشه
یا همه آیکون‌ها صد در صد واضح باشن
همچنین وقتی دارید ناوبری می‌سازید
باید هماهنگ باشید و فقط از آیکون‌ها استفاده نکنید
برای بعضی عناصر
و بعد فقط متن رو برای بقیه استفاده کنید
چون این حالت کمی عجیب به نظر میاد
و بنابراین باید از چنین وضعیتی اجتناب کنید
حالا در نهایت یک مورد استفاده رایج دیگه برای آیکون‌ها
استفاده از آن‌ها به عنوان نقطه‌های بولت است
مثل نمونه‌هایی که اینجا داریم
و اکثر مواقع فقط صحبت از
چک‌مارک‌های کوچک است که به طور پیش‌فرض
در تمام پکیج‌های آیکون گنجانده شده‌اند
پس این می‌تونه دوباره یک روش عالی باشه
برای اضافه کردن جزئیات بصری بیشتر به طراحی‌های شما
خُب ما یاد گرفتیم چه آیکون‌هایی استفاده کنیم
چه زمانی استفاده کنیم و حالا سریعاً بیایید در مورد
چگونگی استفاده صحیح از آیکون‌ها صحبت کنیم
پس به عنوان اولین راهنمایی اگر می‌خواید آیکون‌ها خنثی بمونن
می‌تونید رنگشون رو مثل رنگ متن تنظیم کنید
مثل این مثال
متن اساساً مشکی یا سفیده
و اگر آیکون‌ها رو به رنگ مشابه تنظیم کنید
آن‌ها توجه زیادی جلب نمی‌کنن
کمی از مسیر کنار می‌مونن
و اجازه می‌دن کاربر بیشتر روی متن تمرکز کنه
و فقط اونجا هستن تا یک کمک بصری در پس‌زمینه ارائه بدن
از طرف دیگه اگر می‌خواید توجه بیشتری جلب کنید
می‌تونید از رنگ‌های متفاوت برای آیکون‌ها استفاده کنید
مثلاً می‌تونید آیکون رو به رنگ برند خودتون دربیارید
یا اگر می‌خواید حتی بیشتر جلب توجه کنه
می‌تونید برای آیکون‌های مختلف رنگ‌های متفاوت استفاده کنید
مثل این دو مثال پایین صفحه
بعدی کاربران خودتون رو سردرگم نکنید
با استفاده از آیکون‌هایی که واقعاً بی‌معنی هستن
پس آیکون‌هایی که انتخاب می‌کنید
در طراحی شما باید واقعاً معنا داشته باشن
و با متن یا عملی که می‌خواید منتقل کنید هماهنگ باشن
و همینطور با عملکرد مورد نظر همخوانی داشته باشن
حتماً ترجمه دقیق خط به خط بدون هیچ اضافه یا کم کردن:
پس در همین طراحی
فکر می‌کنم چند مثال وجود دارد
که در آن‌ها آیکون واقعاً معنی زیادی ندارد
یعنی آیکون با متنی که اینجا می‌بینیم مطابقت ندارد
و در چنین مواردی واقعاً گیج‌کننده است
برای مثال نرم‌افزار سازمانی
چه ارتباطی با آن نمودار دایره‌ای دارد؟
این اصلاً واضح نیست درست است؟
و بنابراین این آیکون واقعاً هیچ کمکی
برای متن ارائه نمی‌دهد
چون فقط با نگاه کردن به آیکون
نمی‌دانید این ویژگی دقیقاً درباره چیست
حال اگر بسته آیکونی
که انتخاب کرده‌اید آیکون مناسبی برای متن شما نداشته باشد
ممکن است زمان آن باشد که به دنبال یک بسته آیکون دیگر بگردید
یا متن خود را به چیزی تغییر دهید
که با یکی از آیکون‌های موجود در بسته شما مطابقت داشته باشد
که در آن صورت متن و آیکون با هم هماهنگ خواهند بود
در نهایت آخرین راهنمایی این است که
آیکون‌ها را بزرگ‌تر از اندازه‌ای که
طراحی شده‌اند نکنید حتماً ترجمه دقیق خط به خط مطابق اصولی که گفتید:
خب این در واقع کمی ذهنی است
و ممکن است درک آن سخت باشد
اما اگر با من این مثال را نگاه کنید
ممکن است موافق باشید که آیکون‌ها
که در سمت راست هستند کمی نامتناسب به نظر می‌رسند درست است؟
برای مثال خطوط خیلی بزرگ به نظر می‌رسند حتی اگر
خود آیکون اندازه مناسبی داشته باشد
که بزرگ نیست اما دوباره خطوط خیلی ضخیم هستند
و بنابراین خیلی عجیب و غیرطبیعی به نظر می‌رسد
حال یکی از راه‌حل‌های ممکن برای این مشکل
این است که آیکون را کوچک نگه دارید
اما آن را در یک شکل بزرگ‌تر قرار دهید
و بنابراین
آیکون کلی در واقع همان شکل
به اضافه خود آیکون خواهد بود و حالا اندازه آن‌ها
همانند مثال سمت راست است اما بدون اینکه غیرطبیعی به نظر برسند
حال از سوی دیگر
برخی از آیکون‌ها واضحاً برای استفاده در اندازه بزرگ طراحی شده‌اند
مثل این‌ها و ما می‌توانیم چنین آیکون‌هایی را تشخیص دهیم
پس آیکون‌هایی که می‌توانیم واقعاً بزرگشان کنیم
جزئیات زیادی دارند که در خود جای داده‌اند
و معمولاً آیکون‌هایی مثل این از خطوط خیلی نازک هم استفاده می‌کنند
که باعث می‌شود آیکون هنگام بزرگ کردن سبک بماند
خوب پس این‌ها ۱۱ راهنمای من برای استفاده از آیکون‌ها هستند
و حالا بیایید برخی از آن‌ها را در دنیای واقعی بلا فاصله
در جلسه بعد استفاده کنیم