سوژه دات آی آر

راهنمای کاربردی طراحی آیکن برای اندروید و iOS

راهنمای کاربردی طراحی آیکن

اهمیت طراحی آیکون ها

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

این موضوع مسئولیتی مهم بر دوش آیکن ها قرار می دهد که طراح رابط کاربری باید با آن کنار بیاید و در بهترین شرایط و گویا ترین حالت آن را طراحی نماید.

چرا هر اپلیکیشنی نیاز به آیکن دارد؟

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

وقتی کاربر برنامه ای را نصب می کند ، هدف آیکن تغییر می کند. اکنون در جستجوی برنامه در صفحه اصلی تلفن همراه خود، در میان آیکون های دیگر کمک کننده خواهد بود. اما چه مواردی نقش یک آیکن را “بهبود” می بخشد؟

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

 

اهداف طراحی آیکون ها

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

مقیاس پذیری آیکن ها

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

اندازه آیکن ها در اپلیکیشن

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

قابلیت تشخیص آیکن ها

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

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

منحصر به فرد بودن آیکن ها

تقریباً ۲ میلیون برنامه در App Store و ۲،۱ میلیون در Google Play وجود دارد و هر یک از آنها یک آیکن دارند. همه این آیکن ها برای جلب توجه کاربر رقابت می کنند. برند های بزرگ برای جلب توجه از آرم های خود استفاده می کنند، اما با برنامه های کمتر شناخته شده چه کنیم؟ چیزی جدید و غیر معمول نشان دهید!

طراحی آیکن های خاص

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

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

ثبات در طراحی آیکن

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

سازگاری بین اپلیکیشن و آیکن

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

رعایت دستورالعمل ها در طراحی آیکن

با وجود این واقعیت که سازو کار آیکن ها در iOS و Android تشابه زیادی به هم دارند، تفاوت های بسیاری نیز وجود دارد، که مانع از استفاده از یک آیکن در هر دو پلتفرم است:

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

طراحی آیکن در iOS و اندورید

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

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

طراحی آیکون برای اپلیکیشن های iOS

اطلاعات بسیار مفیدی در دستورالعمل های رابط کاربری در iOS وجود دارد ، اما ما در بخش App Icon متمرکز خواهیم شد که Apple الزامات فنی را توصیف کرده و در مورد یک طرح توصیه هایی را ارائه می دهد. ما مسیر طراحی آیکون ها را دنبال می کنیم. برای اینکار از برنامه Sketch استفاده می کنیم ، اما هر ویرایشگر گرافیکی دیگر نیز این کار را خواهد کرد.

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

پس با ایجاد یک سند جدید در ویرایشگر شروع به کار می کنیم.

ابتدا اجازه دهید اندازه بوم را انتخاب کنیم. در iOS ، یک آیکون در اندازه های مختلف از  ۴۰ در ۴۰ پیکسل تا ۱۰۲۴ در ۱۰۲۴ پیکسل طراحی می شود. از آنجا که همیشه کاهش اندازه تصویر ساده تر است ، یک بوم بزرگتر ایجاد خواهیم کرد. طراحانی که در Sketch کار می کنند می توانند بوم کوچکتری (۵۱۲px × ۵۱۲px) ایجاد کرده و بعداً ابعاد آن را در هنگام خروجی رفتن افزایش دهند.

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

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

طراحی آیکون اپلیکیشن iOS

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

طراحی آیکون iOS

نماد آماده است! بیایید از آن خروجی تهیه کنیم.

نحوه خروجی گرفتن طراحی آیکون iOS

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

طراحی آیکون

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

یک آیکن باید در فرمت png و بدون شفافیت صادر شود. اما در مورد اندازه های مختلف چطور؟ آیا واقعاً باید آن را به صورت دستی انجام دهیم؟ قطعا، ما این کار را نمی کنیم! به عنوان مثال ، می توانیم از پلاگین Sketch AEIconizer برای گرفتن خروجی در سایز های مختلف استفاده کنیم. علاوه بر این ، وب سایت های زیادی مانند MakeAppIcon ، App Icon Maker و App Icon Generator وجود دارد که می توانند همین کار را انجام دهند. همچنین برخی از آنها این قابلیت را دارند که چگونگی نمایش آنها را در صفحه اصلی و در فروشگاه اپلیکیشن نمایش خواهند داد.

آنقدر که به نظر می رسید سخت نبود. موضوع بعدی طراحی آیکون اپلیکیشن اندرویدی است!

آیکون اپلیکیشن های اندروید

در قوانین متریال دیزاین ، Google اطلاعات مربوط به آیکون های اپلیکیشن های Android را به دو بخش تقسیم می کند: سبک طراحی و الزامات فنی.

طراحی آیکون اپلیکیشن اندروید

در اندروید نیز از آیکون اپلیکیشن ها در اندازه های مختلف استفاده می شود و بزرگترین آن مشابه iOS است: ۱۰۲۴ در ۱۰۲۴ پیکسل.

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

طراحی آیکون اندروید

نسخه نهایی آیکون ما:

طراحی آیکون اندروید

نحوه خروجی گرفتن از آیکون اندروید

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

طراحی آیکون اندروید

Android Studio می تواند یک آیکون را در تمام اندازه های مورد نیاز تولید کند، بنابراین ما فقط به یک تصویر png و بدون شفافیت نیاز داریم.

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

یک آیکون به جای هزار کلمه

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

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

برای آشنایی با قوانین و دستور العمل های طراحی آیکون در پلتفرم Google Play اینجا را کلیک نمائید!

منابع

در انتها لازم می دونیم شما را با نویسنده این مقاله و منابع آن آشنا کنیم.

این مقاله توسط آقای Iman Tuchkuv طراح ارشد رابط کاربری و در سایت Medium منتشر شده است.

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

مدیر سایت

علیرضا موذن | سرپرست طراحی رابط کاربری و تحلیلگر UX | طراح و مشاور پروژه های گرافیک و موشن گرافیک | نویسنده، مترجم و محقق حوزه UI و UX

قوانین ارسال دیدگاه

  • دیدگاه های فینگلیش تایید نخواهند شد.
  • دیدگاه های نامرتبط به مطلب تایید نخواهد شد.
  • از درج دیدگاه های تکراری پرهیز نمایید.
دیدگاه‌ها

<?php theme_insert_js( HEAD_CONTENT ); ?>