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

گردآوری و تالیف : ارسطو عباسی
تاریخ انتشار : 07 آبان 1397
دسته بندی ها : تجربه کاربری

داشتن دانش توسعه یک اپلیکیشن تنها بخشی از پروسه ساخت یک اپلیکیشن تمام عیار است. اگر نتوانید اپلیکیشن‌تان را در app store و جاهای دیگر خوب نشان ندهید، فارغ از آنکه چقدر کارایی بالایی داشته باشید اما باز هم نمی‌توانید مخاطب بالایی جذب کنید. –مردم عقل‌شون به چشم‌شونه!– داشتن یک آيکون زیبا، قابل شناسایی و به خاطر سپردنی می‌تواند تاثیر بسیار زیادی روی مخاطب و در نهایت روی موفقیت اپلیکیشن‌ها بگذارد. اما باید بگویم که انجام دادن چنین کاری آنطورها هم که فکرش را می‌کنیم ساده نیست و نیازمند یکسری کارهای مهم برای انجام دادن است. 

حال سوالی که پیش می‌آید این است که این کارها چه هستند؟ چگونه می‌شود یک آیکون خوب را طراحی بکنیم؟ در این مطلب من قصد دارم شما را با ۵ نکته آشنا کنم که با در نظر گرفتن آن‌ها می‌توانید طراحی بسیاری خوبی از آیکون‌های‌تان را داشته باشید. 

منظور از آیکون اپلیکیشن چیست؟

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

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

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

از یک جلوه عملی وقتی که مشغول طراحی یک آیکون اپلیکیشن باشید نیاز است که یک مجموعه از فایل‌های png در اندازه‌های مختلف را تولید کنید. - 29 x 29px تا 1024 x 1024px- این فایل‌ها باید بخشی از اپلیکیشن شما را تشکیل دهند. موضوع اندازه‌های مختلف از آنجایی اهمیت پیدا می‌کند که ممکن است اپلیکیشن شما در قسمت‌های مختلف یک سیستم عامل و یا یک فروشگاه با اندازه‌های مختلفی نمایش داده شود. بنابراین باید برای هر شرایطی تصاویر مناسبی داشته باشید.

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

حال بیایید بهترین رویکردهایی که برای طراحی یک آیکون اپلیکیشن نیاز است را بررسی کنیم.

۱. مقیاس‌پذیری

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

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

  • کار تنها روی آیکون در اندازه 1024 x 1024px می‌تواند فریبنده باشد، پس سعی کنید محتوا و اندازه‌های چندگانه‌ای از آیکون را در یک دستگاه امتحان بکنید.
  • سادگی را در اولویت کاری‌تان قرار دهید و سعی کنید روی یک شئ تکی و منحصر به فرد تمرکز داشته باشید. اینگونه پیاده‌سازی قابلیت مقیاس‌پذیری برای‌تان بسیار راحت‌تر خواهد بود.
  • مطمئن شوید که المان اصلی آیکون‌تان با پس زمینه‌های مختلف ظاهر زیبایی دارد و کنتراست خوبی برقرار می‌کند. 

۲. قابل تشخیص بودن

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

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

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

۳. سازگاری یا همخوانی

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

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

۴. منحصر به فرد بودن

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

منحصر به فرد سازی آیکون‌ها به شما کمک می‌کند که قابلیت تشخیص‌پذیری بسیار بالایی داشته باشید.

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

۵. از کلمات استفاده نکنید

این مورد یکی از مواردی است که من همواره در زمان طراحی آیکون به آن اشاره می‌کنم. تنها در موارد بسیار بخصوصی ممکن است استفاده از کلمات زیبا باشد اما در بیشتر حالات به طراحی آسیب می‌رساند. 

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

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

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

۶. پدیدار کردن

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

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

مطمئنا بسیاری از تکنیک‌ها و کارهایی که باید انجام شوند را می‌توانید از طریق تجربه بدست بیاورید، در کنار تجربه کاری گاهی اوقات خواندن نکات و تکنیک‌ها نیز می‌توانند کمک بسیار زیادی به شما بکنند.

منبع

مقالات پیشنهادی

آیکون های زیبا و کاربردی طراحی وب | سری سوم

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

مجموع آیکون های طراحی گرافیک

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

نگاهی به بهترین آیکون‌های IconShock 2.0

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

آیکون های زیبا و کاربردی طراحی وب | سری دوم

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