طراحی آیکون: راهنمای مبتدی [+ منابع]

نمادها: آنها را دیده اید، روی آنها کلیک کرده اید، روی آنها ضربه زده اید. احتمالاً با چند نفر ارتباط برقرار کرده اید تا به تنهایی به این صفحه برسید.

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

در این راهنما، ما به شما آموزش خواهیم داد که چگونه مجموعه آیکون خود را طراحی کنید . پوشش خواهیم داد:

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

بیایید شیرجه بزنیم

چرا آیکون ها مهم هستند؟

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

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

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

بهترین روش های طراحی آیکون

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

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

1. تعیین کنید که نمادهای شما چه هدفی را دنبال خواهند کرد.

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

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

2. از یک شبکه استفاده کنید.

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

منبع تصویر

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

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

3. آیکون های خود را ساده نگه دارید.

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

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

منبع تصویر

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

این را با یک نماد واضح و ساده مقایسه کنید:

منبع تصویر

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

بهترین راه برای ساخت یک نماد قابل تشخیص این است که با اشکال ساده مانند دایره، مربع و مثلث شروع کنید. قبل از افزودن جزئیات، یک نسخه تقریبی از نماد خود را با اشکال اصلی به عنوان پایه تشکیل دهید.

علاوه بر تشویق سادگی، شروع با شکل‌های بزرگ، آیکون‌های شما را از نظر سبک سازگارتر و آسان‌تر مقیاس‌پذیر می‌کند.

4. آیکون های خود را قابل تشخیص کنید.

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

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

منبع تصویر

به انجام تحقیقات مربوط به نمادهای شما نیز کمک می کند. در ادامه مثال برنامه تحویل غذا، می‌توانید جستجو کنید تا ببینید چه تصاویری معمولاً با مجموعه‌ای که می‌خواهید طراحی کنید مرتبط است. شاید جستجوی عمیقی در وب‌سایت‌های مشابه انجام دهید و متوجه شوید که معمولاً از نماد اجاق گاز برای نمایش دستور غذاها استفاده می‌شود. این بدان معنی است که شما می خواهید نماد خود را طوری طراحی کنید که با نتایج مطابقت داشته باشد، زیرا کاربران تداعی های مشابهی ایجاد می کنند.

در این مرحله، تصمیم گیری در مورد نمادین یا واقعی بودن نمادهای شما نیز ضروری است. به عنوان مثال، شما یا در حال ایجاد نمادی هستید که یک چنگال است یا نمادی که به طور استعاری به یک چنگال مرتبط است.

به عنوان مثال، نماد قلب معمولاً برای نشان دادن اینکه محتوای خاصی را دوست دارید یا دوست دارید استفاده می شود. معنی این نماد قابل درک است و به راحتی قابل درک است.

منبع تصویر

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

منبع تصویر

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

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

5. انسجام بصری را هدف بگیرید.

اگر به دنبال نکات طراحی آیکون هستید، احتمالاً مجموعه ای از آیکون ها را طراحی می کنید، نه فقط یک آیکون. تمام نمادهای مجموعه شما باید مرتبط با یکدیگر به نظر برسند. آنها باید ویژگی های بصری مانند وزن ضربه، پر کردن، شکل گوشه، سبک (مثلاً تخت در مقابل سه بعدی) و طرح رنگ را به اشتراک بگذارند. قوانینی را برای آیکون های خود تعیین کنید که در سرتاسر مجموعه خود از آنها پیروی می کنید – این امر به ویژه اگر طراحان متعددی روی مجموعه کار می کنند مهم است.

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

منبع تصویر

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

منبع تصویر

در اینجا چند قانون وجود دارد که باید در مجموعه آیکون‌های خود برای زیبایی‌شناسی تمیز و منسجم اعمال کنید:

• سعی کنید تا حد امکان به اعداد کامل پایبند باشید تا از مشکلات رندر جلوگیری کنید. این امر در مورد زاویه ها، گرد کردن گوشه ها و ضخامت خط اعمال می شود.
• از کشیدن اشکال و منحنی های دستی به نفع ابزارهای دقیق (مثلاً ابزار منحنی در Adobe Illustrator) اجتناب کنید. چشم می تواند تشخیص دهد که آیا شکل یک نماد حتی کمی تغییر کرده است.
• برای زاویه، از 45 درجه (یا مضرب 45 درجه، مانند 90 درجه یا 22.5 درجه) استفاده کنید.
• حرکات نماد خود را با شبکه پیکسل تراز کنید تا هنگام بزرگ شدن تصویر از تیرگی جلوگیری شود.
• در صورت امکان تعداد وزن خطوط را به دو و حداکثر سه وزن محدود کنید. هر چیز دیگری می تواند گیج کننده و بیش از حد جزئیات باشد.

6. شخصیت را اضافه کنید.

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

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

منبع تصویر

این نمادها سبکی رنگارنگ، رسا و تقریباً کارتونی دارند. این یک زیبایی شناسی سرگرم کننده را منتقل می کند که با رابط کاربری و برند Waze هماهنگ است.

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

منبع تصویر

Waze و Google Maps ماهیت مشابهی دارند – هر دو مسیرها را در اختیار کاربران قرار می دهند. در حالی که خدمات آنها با یکدیگر همپوشانی دارند، نمادهای آنها برای برند آنها منحصر به فرد است و بنابراین قابل تشخیص است.

7. آیکون های خود را تست کنید.

تنها راه برای دانستن اینکه آیا مجموعه آیکون شما واقعاً مؤثر است یا خیر، آزمایش آن با افراد واقعی است. لازم نیست این کار خیلی رسمی باشد – سعی کنید نمادهای خود را به یک دوست یا هم تیمی نشان دهید و از آنها بپرسید که فکر می کنند هر نماد چیست یا اولین چیزی را که با دیدن آن فکر می کنند، بگویند.

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

منابع طراحی آیکون

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

1. طراحی مواد

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

2. ساده کردن آیکون ها

Streamline Icons دارای بیش از 30000 نماد از پیش طراحی شده است که برای دانلود در دسترس هستند. بسته رایگان «Essential Icons» آن‌ها دارای نمادهایی است که معمولاً برای عملکردهای ایمیل و موسیقی استفاده می‌شود، و «بسته نهایی» پولی آن‌ها شامل نمادهای خاص مانند نمادهای سفر و زیست‌محیطی است.

3. هسته

Nucleo به شما امکان می دهد آیکون ها را در برنامه خود انتخاب، سفارشی سازی و دانلود کنید. قیمت بسته به تعداد کاربران یک حساب متفاوت است.

4. انیمیشن ها

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

5. منابع طراحی رایگان

Free Design Resources بسته های آیکون مختلفی را برای دانلود و استفاده در وب سایت خود ارائه می دهد، مانند نمادهای نوار تب iOS. برخی از مجموعه ها رایگان هستند، برخی پولی هستند، و می توانید آیکون ها را بر اساس سازگاری آنها با نرم افزارهای طراحی مورد علاقه خود مانند Illustrator، Figma یا Sketch فیلتر کنید.

آیکون ها عناصر ضروری سایت شما هستند.

در نهایت، آیکون های خوب طراحی شده برای ایجاد یک تجربه کاربری یکپارچه ضروری هستند .

شما می خواهید بازدیدکنندگان وب سایت شما از وقت خود در سایت شما لذت ببرند و اقدام مورد نظر شما را انجام دهند، چه خرید یک محصول یا ثبت نام در خبرنامه.

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

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

اولین مجموعه آیکون خود را طراحی کنید.

در نهایت، آیکون های خوب طراحی شده برای ایجاد یک تجربه کاربری یکپارچه ضروری هستند. شما می خواهید که کاربران شما لذت ببرند و اقدام مورد نظر خود را انجام دهند، چه خرید یک محصول یا ثبت نام در یک خبرنامه.

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