گام‌های اولیه به سمت طراحی آیکون

06 آبان 1395
مهتاب کریمی

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

در کل فلسفه وجود آیکون‌ها، کمک به سهولت استفاده از محصولات برای کاربران بر می‌گردد. این فلسفه ابتدا توسط شرکت زیراکس و پس از آن توسط مایکروسافت و اپل در سیستم عامل‌ها رواج پیدا کرد. آیکون‌ها بسته به نوع استفاده از آنها می‌توانند پسوندهای متفاوتی مانند GIF, PNG, SVG, JPG , و.... داشته باشند. در انتهای مطلب بیشتر در مورد ویژگی این پسوندها صحبت خواهیم کرد. هیچ دسته بندی درستی برای آیکون‌ها وجود ندارد ولی صرفاً برای شناخت بیشتر آیکون‌ها می‌توانیم با توجه به تاریخچه کاربرد آنها از نظر نوع و طراحی، دو دسته آیکون‌های تحت سیستم عامل و  آیکون‌های تحت وب در نظر بگیریم.

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

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

پسوند JPG 

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

 

پسوند PNG

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

 

پسوند ICO

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

 

پسوند GIF 

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

 

 

پسوند SVG

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

 

تا الان آشنایی مختصری در مورد نوع آیکون‌ها داشتیم، سوالی که مطرح می‌شود، این است که چگونه آیکون‌ها مورد نظرمان را طراحی کنیم؟

به طور میانگین اغلب کاربران در 5 الی 10 ثانیه ابتدایی ورود به وب سایت شما تصمیم می‌گیرند که در آن بمانند یا تَرکش کنند. آیکون‌ها باید متناسب با نوع طراحی و فونت مورد استفاده در طراحی وب سایت شما طراحی گردند تا همانند عکس‌های به کار رفته، معرف کسب و کار و محصولات شما به مخاطبان باشند. در طراحی آیکون‌های وب سایت محدودیت خاصی وجود ندارد، آنها می‌توانند هم با جزییات زیاد و هم جزییات کم طراحی شوند. نکته اصلی که باید مد نظر داشته باشید، استفاده از رنگ‌های مناسب در جایگاه مناسب آنهاست. به طور مثال، اگر وب سایت شما زمینه‌ای روشن دارد و عکس‌های موجود در آن کاملاً حس سرد بودن وب سایت را در شما تداعی می‌کند، بهترین روش برای خنثی کردن این حالت، استفاده از رنگ‌ها با تناژ گرم‌تر در آیکون‌ها است. نکته بعدی که باید توجه داشته باشید این است که آیا آیکون شما قرار است عملیات خاصی انجام دهد؟

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

طراحی آیکون مناسب وب سایت باید در چهار الی پنچ رنگ کلی خلاصه شود. این طوری در نگاه اول کاربر، این نکته در ذهنش تداعی می‌شود که وب سایت شما دارای قوانینی است و خیلی زودتر به شما اعتماد خواهد کرد و وقت بیشتری را صرف گشت زدن در وب سایت شما می‌کند. نکته مهمی که در طراحی آیکون ها باید مد نظر داشته باشیم این است که جدا از اینکه قرار است در چه محصولی استفاده شوند، به حجم و اندازه آیکون‌ها توجه کنیم. امروزِ آیکون‌ها در صفحه نمایش‌ها با اندازه‌های مختلف نمایش داده می‌شوند. یکی از نکاتی که امروزِ از پسوند SVG استفاده زیادی می‌شود، توجه به همین نکته است. با استفاده از آیکون‌های SVG تغییر اندازه تصویر شما بر روی کیفیت آیکون‌ها تغییری ایجاد نخواهد کرد. تقریباً بعد از به وجود آمدن طراحی ریسپانسیو و فراگیر شدن آنها در وب سایت‌ها، اپلیکیشن‌ها و نرم افزارها، استفاده ار آیکون‌های مناسب در تمام اندازه‌های موجود به یکی از دغدغه‌ها تبدیل شده بود. این دغدغه باعث به جود آمدن کتابخانه‌ای از آیکون‌ها با قابلیت انعطاف پذیری شد که از معروفترین آنها که هم اکنون استفاده زیادی در اپلیکیشن‌های موبایل و محصولات نرم افزاری و حتی وب سایت‌ها به نام Font Awesome شد. بعد از استقبال از این کتابخانه‌ها ، شرکت گوگل تصمیم گرفت برای بهتر طراحی شدن اپلیکیشن‌های تحت آندروید، بخشی به نام Google Design را در وب سایتش بگذارد که تمام توضیحات لازم برای ساخت انواع آیکون باشد و همچنین کتابخانه‌ای جدید را به نام Material Design معرفی کرد.

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

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

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

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

همیشه قبل از طراحی هر آیکونی این موارد را مد نظر داشته باشید:

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

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

 برای اپلیکیشن‌های android

 

برای اپلیکیشن‌های iOS

 

مهتاب کریمی

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

You have no rights to post comments