آیکون به معنای یک قاب تصویر در ابعاد کوچک نیست. آیکون به نشانه‌ای گفته می‌شود که به صورت خلاصه و فشرده، چیزی از پیش شناخته شده را نمایش می‌دهد.
امروزه آیکونها در حوزه‌ی وسیعی از محصولات استفاده می شوند: از پنل لوازم خانگی و خودرو گرفته تا نرم‌افزارهای کامپیوتر و اپلیکیشن‌های موبایل. آیکونها راهنمای تصویری کاربر برای تعامل با محصول هستند که آسان و سریع درک می‌شوند و در خاطر می‌مانند.
ویژگی اصلی آیکونها، علاوه بر جنبه‌های ارگونومی و زیبایی‌شناختی، خوانا بودن آنها در ابعاد کوچک است. مثلا اگر شما تصویر یک ساعت رومیزی را به اندازه‌ای کوچک کنید که ابعاد آن چند میلیمتر شود، تقریبا چیزی از آن باقی نمی‌ماند ولی یک آیکون از همان ساعت رومیزی، بر خلاف تصویر معمولی، در ابعاد میلیمتری همچنان گویا است.
اشیاء، عملکرد، رفتار، احساسات و حتی افکار و ایده‌ها را می‌توان با یک آیکون کوچک و ساده نشان داد. ولی آیا آیکونها به همان اندازه که به نظر می‌رسند ساده هستند؟ خیر. آیکون در واقع چکیده و عصاره‌ی شاخص‌ترین ویژگی‌های یک شی (یا احساس و رفتار و غیره) است که با حداقل عناصر بصری به تصویر کشیده شده‌است. آیکونها باید به اندازه‌ای ساده و گویا باشند که در یک کادر کوچک ۱:۱ قرار گیرند و معنای آنها به آسانی درک شود. آیکون باید در فضای کم نور و در ابعاد کوچک، برای افراد مختلف خوانا باشد: افراد مختلف یعنی افراد سالخورده، کم‌بینا، کم‌سواد، و با زبان و فرهنگ متفاوت. بنابراین تا حد امکان نباید در طراحی آیکون از حروف الفبا و اعداد استفاده کرد. در عوض باید از استعاره، تشبیه، کنایه و اغراق برای بیان مفهوم استفاده نمود. بیان محتوا در آیکون باید بر اساس خلاصه‌گویی باشد و فقط به اطلاعات مهم و اصل موضوع اشاره شود. آیکون باید صراحت بیان و صراحت بصری داشته باشد. وجود کنتراست بصری کمک می‌کند که خوانایی آیکون افزایش یابد؛ به‌خصوص زمانی که ابعاد آیکون کوچک و یا فاصله آن از چشم کاربر زیاد باشد. بهتر است طراحی آیکون وابسته به رنگ نباشد یعنی در صورت نیاز بتوان آیکون را به صورت سیاه و سفید هم نشان داد. بعضی افراد در تشخیص برخی از رنگها با محدودیت‌هایی مواجه هستند که بهتر است در طراحی آیکونهای رنگی، به انتخاب رنگ مناسب توجه شود.
در مورد موضوعات پیچیده، نبود آیکونها کار را دشوارتر می‌سازد. اینترفیس ویندوز ۹۵ را بدون آیکون های آن تصور کنید...
آیکون، بخشی از هویت محصول است. به تصویر زیر دقت کنید. معمول آن است که تنظیمات یا Setting را با تصویر یک چرخ‌دنده نمایش دهند؛ ولی همان‌طور که می‌بینید شکل و ظاهر این چرخ‌دنده در اینستاگرام و فیسبوک و تلگرام متفاوت است. تعداد دنده‌ها، ضخامت خطوط، قطر دایره‌ها، میزان تیرگی-روشنی و هر آنچه که بر گشتالت بصری هر یک از این آیکونها تاثیر داشته، بر هویت محصول نیز موثر است.
به نمونه‌ای دیگر توجه کنید: آیکون Home در توئیتر و اسپاتیفای با یکدیگر متفاوت بوده و متناسب با هویت همان محصول است.
شبکه‌بندی شطرنجی را مبنای طراحی خود قرار دهید. یک مربع ۳۲ در ۳۲ خانه، انتخاب مناسبی است.
۲ خانه از هر طرف این مربع را رها کنید و برای طراحی مورد استفاده قرار ندهید. بنابراین فضای اصلی طراحی ۲۸ در ۲۸ خانه یا پیکسل است. بر اساس نیاز طراحی می‌توان از کل یا بخشی از این ۲۸ پیکسل در عرض و ارتفاع استفاده کرد.
طراحی آیکون را با ترسیم و کنار هم قرار دادن اشکال ساده و هندسی آغاز کنید: دایره، بیضی، مثلث و غیره.
برای آنکه آیکون، هویت و زیبایی پیدا کند، بر روی جزییات اشکال هندسی فوق کار کنید: ضخامت خطوط، شعاع گوشه‌ها، تیزی لبه‌ها، زاویه گوشه‌ها و غیره. تنوع زیادی به این اجزا ندهید: مثلا شعاع تمام گوشه‌ها را ۱۵ میلیمتر در نظر بگیرید، یا ضخامت خطوط را فقط به دو مقدار ۱ و ۳ پوینت محدود کنید. زاویه و شیب خطوط را هم مثلا به ضرایب ۳۰ درجه محدود کنید: ۱۵، ۳۰، ۴۵، ۷۵ درجه بله ولی ۲۰ یا ۴۰ درجه خیر.
• آیکون باید قابل درک باشد
آیکون باید گویا، واضح و قابل درک باشد. در تصویر زیر، آیکونهای سمت چپ، آسان‌تر تداعی معنی می‌کنند.
• آیکون باید خوانا باشد
جزییات آیکون باید به آسانی دیده شده و متمایز از هم باشند.
• آیکون باید دارای تعادل بصری باشد
ظاهر آیکون باید از لحاظ بصری، متوازن و متعادل به نظر برسد. احساس روانی تعادل، مهم‌تر از مقادیر عددی است.
• آیکون باید مختصر باشد
ظاهر آیکون باید موجز، خلاصه و مختصر باشد و تزیینات و جزییات غیر ضروری حذف شوند. به اصطلاح، آیکون باید شسته-رفته باشد.
• آیکونهای یک مجموعه، باید طراحی ثابتی داشته باشند
ابعاد، دورگیری، توپر بودن یا نبودن تمام آیکونهای یک مجموعه، باید مشابه و سازگار باشند. همچنین وزن بصری تمام آیکونها باید برابر با هم باشند.
• آیکونهای یک مجموعه، باید شخصیت مشابهی داشته باشند
حال و هوا، تم، و فضای تمام آیکونهای یک مجموعه، باید سازگار با هم باشند.
• آیکونهای یک مجموعه باید پرسپکتیو مشابهی داشته باشند
دو بعدی یا سه بعدی بودن آیکونهای یک مجموعه و نیز نوع پرسپکتیو آنها (مثلا آیکونهای ایزومتریک) باید مشابه باشند.
• امکان حذف یا تغییر اجزای آیکون
آیکون باید به گونه‌ای طراحی شود که حداقل در سه سایز متمایز، قابل ارایه باشد، و در صورت نیاز، امکان حذف یا تغییر برخی اجزا ریز آیکون وجود داشته باشد.
• عوامل تکرار شونده در آیکونهای یک مجموعه
عوامل تصویری مختلفی وجود دارند که با تکرار آنها در آیکونهای یک مجموعه، می‌توان ارتباط و هم‌خانوادگی آیکونها را تقویت کرد.
منابع
www.uxdesign.cc
www.medium.com
www.helenazhang.com
www.metalab.com
