۱۰ قانون طراحی آیکن در رابط کاربری
آیکن ها المان های وبی هستند که وقتی درست استفاده شوند، هم عملکرد و هم فرم طراحی UI را شکل میدهند. آیکن های UI میتوانند تعاملات کاربر را از طریق سریع شناخته شدن توسط او، سریعتر کنند و همینطور استایل و جذابیت های بصری به طراحی رابط کاربری اضافه نمایند. به همین منظور در این مطلب از خانه فتوشاپ به سراغ چند قانون مهم طراحی آیکن در رابط کاربری رفته ایم که میتوانند نقش مهمی در اصولی طراحی کردن UIها داشته باشند.
در این صفحه میخوانید:
نکات مهم طراحی آیکن در رابط کاربری
استفاده از آیکن ها قرار نیست لزوماً پیچیده باشد. حتی چند آیکن که در جای درستی قرار بگیرند، میتوانند تجربه کاربری را بهبود بخشند. نکات و اصولی که در ادامه معرفی می کنیم را برسی کنید و در طراحی UI بعدی خود از آنها استفاده نمایید.
۱. طراحی آیکن ها را ساده نگه دارید
طراحی آیکن ها را بیش از حد پیچیده نکنید. آنها را تا جای ممکن ساده نگهدارید خصوصاً اگر قرار است در ابعاد کوچک مورد استفاده قرار گیرند. بهترین آیکن ها شکل ها و پیکتوگرام های ساده ای هستند که کاربر به سرعت می شناسند.
۲. کاری کنید که قابل شناسایی باشند
آیکن ها باید به سرعت قابل شناسایی باشند. اگر کاربران متوجه نشوند که منظور از یک آیکنی چیست، عملاً کاربرد آن زیر سوال خواهد رفت. کاری نکنید که کاربر بخواهد درباره معنای یک آیکن حدس و گمان کند. این حالت به تجربه کاربری او لطمه وارد خواهد کرد.
۳. به آیکن ها معنا بدهید
معنای تصاویری که برای آیکن ها استفاده میشوند، باید به راحتی قابل درک باشند. این معنا باید به طور مستقیم با کاربردی که آیکن دارد مرتبط باشد. مثلاً آیکن خانه برای رفتن به صفحه خانه یا اصلی است. با اینکه میتوان از معانی کنایی آیکن ها هم استفاده کرد اما هرچه آیکن ها به معنای واقعی کلمه نزدیک تر باشند، شناخت آنها راحت تر خواهد بود.
۴. مطمئن شوید که امکان تغییر سایز آنها وجود دارد
آیکن ها معمولاً در سایز کوچک مورد استفاده قرار می گیرند اما ممکن است گاهی لازم باشد ورژن بزرگ یا حتی بسیار ریز آنها را در طراحی خود به کار ببرید. هرچه سایز آیکن ها بتوانند بزرگ تر طراحی شوند جای بیشتری برای جزئیات خواهند داشت. اما حواستان باشد بیش از اندازه پیچیده نشوند.
۵. آیکن ها را دسترس پذیر کنید
اگر قرار نیست همراه با آیکن ها متن هم قرار دهید، باید مطمئن شید که Alt تگ آیکن ها به درستی تنظیم شده اند تا برای افرادی که از screen readerها استفاده میکنند قابل شناسایی باشند.
همچنین آیکن ها باید کنتراست مناسبی نسبت به زمینه داشته باشند و از نظر ابعاد برای دسترسی مناسب طراحی شده باشند. همچنین باید کاری کنید که تا فضای استاانداردی اطراف هر آیکن، قابل کلیک کردن باشد تا کاربران در شرایطی، محدود به خود آیکن نشوند و کار آنها سخت نشود.
۶. حواستان به رنگ ها باشد
به عنوان یک قانون ننوشته، بهتر است رنگ آیکن ها یک دست و تک رنگ باشد. به علاوه از رنگ های مختلف برای هر آیکن استفاده نکنید مگر اینکه اینکار به طور مستقیم به کاربردپذیرتر کردن آنها مرتبط باشد. در بیشتر شرایط ممکن است رنگ متفاوتی برای نشان دادن آیکن فعال ستفاده کنید. مثلاً یکی سبز باشد و مابقی خاکستری.
۷. همیشه از وکتورها استفاده کنید
وقتی آیکن ها سفارشی میسازید، باید همیشه آنها را در فرمت وکتور ایجاد کنید. از این طریق میتوانید بدون از دست دادن وضوح یا تیز بودن لبه ها، آنها را کوچک و بزرگ نمایید. وقتی آیکن ها را برای استفاده در محصولات دیجیتالی ذخیره میکنید، فایل SVG بهترین گزینه است تا بتوانید هر زمان خواستید آیکن را کوچک و بزرگ کنید و همینطور ترنسپرنسی یا شفافیت زمینه آن حفظ شود.
گزینه دیگر به عنوان جایگزینی برای SVG، فایل های PNG هستند که هم ترنسپرنت بوده و هم از نظر کیفیت مناسبند.
۸. همه آیکن ها را یکدست طراحی کنید
وقتی از یک مجموعه آیکن استفاده میکنید تمام آنها باید در استایل طراحی و اندازه یکدست باشند. استفاده از آیکن هایی که یکپارچه نیستند میتواند کاربران را گیج کرده و ظاهر سایت یا اپلیکیشن شما را به هم بریزد.
وقتی صحبت از اندازه باشد، وزن بصری آیکن ها بیشتر از مختصات دقیق پیکسلی آنها است. مطمئن شوید خطوط طراحی تمام آیکن ها از نظر ضخامت یکسان باشند.
برای مثال مربع و ستاره را در نظر بگیرید. اگر بخواهید از نظر مختصات دقیق آنها را یکسان طراحی کنید، مربع بزرگتر از ستاره به نظر خواهد رسید. اما با بزرگتر کردن لبه های ستاره کمی بیشتر از مربع بنظر خواهد رسید که هر دوی آنها هم اندازه هستند.
۹. واضح و قابل درک بودن اولویت شما باشد
کاربران نباید درباره اینکه منظور از یک آیکن چیست بیش از حد فکر کنند. چه برسد به اینکه متوجه نشوند خود شکل آیکن چیست؛ مطمئن شوید که شکلی طراحی میکنید که شناسایی آن برای کاربر آسان است. همچنین کاربرد و عملکردی که آیکن دارد را به خوبی و به وضوح نشان میدهد.
هر زمان که از چیزی غیر از آیکن های یونیورسال استفاده میکنید، بهتر است یک برچسب متنی هم در کنار آن در نظر بگیرید که توضیح دهد کار آیکن چیست. این کار خصوصاً برای کاربران جدید بسیار مفید خواهد بود.
۱۰. از آیکن های یونیورسال استفاده کنید
وقتی صحبت از طراحی آیکن در رابط کاربری باشد بهتر است چرخ را از ابتدا طراحی نکنید. البته که آیکن های خلاقانه و یونیک میتوانند جذابیت رابط کاربری شما را بالاتر ببرند اما اگر کاربران آنها را نفهمند بیش از منفعت، ضرر خواهند داشت.
برای کارهای رایج بهتر است به سراغ آیکن هایی بروید که مردم می شناسند. در اینجا نمونه هایی از آیکن های یونیورسال را باهم می بینیم:
- آیکن خانه برای صفحه خانه سایت
- سه خط افقی نمایانگر منوی همبرگری
- آیکن ذره بین برای جستجو
- آیکن مداد برای ویرایش محتوا
- آیکن قلب برای مورد علاقه
- و …
کلام آخر
با استفاده از قوانین و اصولی که گفتیم میتوانید طراحی هایی استاندارد و کاربرپسند انجام دهید. فراموش نکنید هدف ایجاد یک تجربه کاربری مناسب است. برای طراحی رابط کاربری با نرم افزار ادوبی ایکس دی هم میتوانید در دوره زیر شرکت کنید. برای دیدن سرفصل ها ، دیدن دموی دوره و خواندن توضیحات این دوره، روی تصویر زیر کلیک کنید.
درباره سپیده خسروآبادی
از بچگی به هنر و گرافیک علاقه داشتم. تو دانشگاه رشته تکنولوژی نرم افزار رو انتخاب کردم و کم کم به سمت گرافیک کامپیوتری کشیده شدم. حالا سالهاست که نرم افزارهای محبوب این حوزه رو تدریس میکنم و درباره گرافیک مینویسم. با کلیک روی دکمه زیر میتونید نوشته های من رو دنبال کنید.
نوشته های بیشتر از سپیده خسروآبادی
دیدگاهتان را بنویسید