طراحی آیکون در قلب طراحی UI قرار دارد. یک آیکون خوب میتواند استفاده شما از یک رابط کاربری را جذاب کند یا لذت استفاده از آن رابط را از بین ببرد. هر آیکون باید هدفی را دنبال کند. هنگامی که کار طراحی و ساخت ایکون را به درستی انجام داده باشید میتوانید به درستی ایده و هدف اصلی یک محصول یا کار خود را به کاربران منتقل کنید.
اگر میخواهید آیکونهای خود را بسازید، معطل نکنید برنامه Adobe Experience Design CC را به صورت رایگان دانلود کنید و شروع کنید !
در این مقاله میخواهیم به شما نشان دهیم که چطور این کار هم آسان است هم ممکن !
البته ماجرای ما و دنیای آیکون ها به همین جا ختم نمی شود اگر شما هم مثل ما به این محبث علاقه مند هستید می توانید مقاله اهمیت آیکون در طراحی اپلیکیشن موبایل را مطالعه کنید.
آیکون چیست؟
آیکون یا نماد یک تصویر معمولاً کوچک است که نشاندهنده یک برنامه، یک فایل، یا یک عملیات خاص است. آیکونها معمولاً در سیستم عاملهای GUI ( رابطهای کاربری گرافیکی) مثل ویندوز مایکروسافت یا مکینتاش و انواع لینوکس یافت میشوند. آنها در حقیقت نشان دهنده نوعی میانبرهای بصری هستند که به کاربران اجازه میدهند به سرعت به چیزهای مختلف روی دسکتاپ یا سیستم مدیریت فایل خود دسترسی داشته باشند و در نهایت بتوانند با آنها یک تعامل از طریق آیکون داشته باشند.
آیکونها به این دلیل مفید هستند چون به کاربران اجازه میدهند یک آبجکت را در کامپیوتر خود شناسایی کنند. آنها همچنین در کامپیوتر برای صرفهجویی در وقت کاربران هستند زیرا با وجود آنها دیگر نیازی نیست تا کاربر در بسیاری از پوشهها یا مسیرهای کامپیوتر خود پیمایش کند تا به چیزی که میخواهد اجرا کند برسد.
انواع آیکونها
همانطور که گفتیم آیکون یک نمایش بصری از یک آبجکت یا یک ایده است. اگر آن چیزی که آیکون نمادی از آن است برای کاربران مشخص نباشد، آیکون ما به جای اینکه نمادی بصری باشد به نویز بصری تقلیل پیدا میکند که نه تنها کمک کننده نیست بلکه مانع انجام کار کاربران میشود.
سه نوع اصلی آیکون وجود دارد:
آیکونهای "جهانی" (Universal)
آیکون های "متناقض" (Conflicting)
و آیکون های "منحصر به فرد" (Unique)
حالا میخواهیم هر نوع و تاثیر آن بر تجربه کاربر تمرکز کنیم.
آیکونهای جهانی (Universal Icons)
تعدادی از آیکونها تقریباً در بین کاربران از شناسایی جهانی برخوردار هستند. نمادهای خانه، چاپ، جستجو و سبد خرید از این قبیل نمادها هستند.
تنها یک مشکل وجود دارد: آیکونهای جهانی نادر هستند. فراتر از مثال های ذکر شده ، بیشتر آنها مبهم هستند. آنها بسته به رابط کاربری یا وضعیتی که در آن قرار گرفته باشند می توانند معانی مختلفی داشته باشند.
آیکونهای با معنی متناقض
در این دسته مشکل زمانی درست میشود که یک آیکون یا نگاره متداول دارای معانی متناقضی باشد. قلب و ستاره نمونههای خوبی برای این مثال هستند، نه تنها عملکردهای آنها در برنامههای مختلف ممکن است با هم متفاوت باشد، بلکه گاهی این دو آیکون معانی متضادی در هر موقعیت ممکن است داشته باشند.
در نتیجه، تفسیر و برداشت یکسان از این آیکونها دشوار است. حتی وقتی یک برنامه شخصی دارید، این آیکونها زمانی که کاربر انتظار یک نتیجه را دارد و نتیجه متفاوتی میگیرد، میتواند بسیار گیج کننده باشد. این مسئله مانع درک یکسان کاربران از آیکونها میشود و ممکن است تجربه کاربری ناخوشایندی برای آنها به جا بگذارد.
آیکونهای منحصربه فرد
آیکونها به خصوص برای چیزهای انتزاعی بسیار ایدههای بدی اجرا میکنند، زیرا معمولاً در طراحی پیام تصویری یک آیکون چندان قدرتمند در نظر گرفته نمیشود. چطور یک شی یا یک عملکرد خاص در برنامه خودتان را توصیف میکنید؟
برای مثال نماد اپل برای اپلیکیشن Game Center خود گروهی از دایرههای بالون شکل رنگارنگ است، این نماد به چه معناست؟ چه ربطی به بازی دارد؟
به عنوان یک مثال دیگر، زمانی که گوگل تصمیم گرفت رابط کاربری ایمیل خود را سادهسازی کند و همه چیز را پشت یک نماد انتزاعی از لوگوی گوگل پنهان کند. ظاهراً بعد از این تصمیم هزاران پیام مانند: تقویم گوگل من کجاست؟ به سمت آنها سرازیر شد.
یک آیکون زمانی که دقیقاً بدانید قرار است با فشردن یا انتخاب آن چه کاری را انجام دهد یا چه چیزی را نشان دهد، به نظر سازنده کاملاً منطقی میرسد ولی ممکن است کاربران با سازنده آن آیکون همنظر نباشند. مشکل دیگر این است که کاربرانی که برای اولین بار با رابط کاربری شما روبهرو میشوند تمایل دارند از چیزهایی که درک نمیکنند اجتناب کنند. این طبیعت انسان است که به چیزهای ناشناخته اعتماد نکند.
چند توصیه عملی برای طراحی آیکونها
بیاید به چند تکنیک و استراتژی ساده برای انتخاب یک آیکون مناسب نگاهی بیاندازیم. بدیهی است که انتخاب یک آیکون معمولاً یک داستان طولانی در پشتش دارد و در نهایت آزمایش آیکونها در رابطه با کاربران واقعی اهمیت زیادی دارد.
از برچسبها برای واضحتر شدن آیکونهای انتزاعی یا ناآشنا استفاده کنید
آیکونها میتوانند با کاهش استفاده از متن در فضا صرفهجویی کنند، اما به قیمت تشخیص سختتر. یک آیکون میتواند هزاران کلمه مختلف را در خود داشته باشد، و مشکل دقیقاً همین است. تصور اینکه همه کاربران درک شما را از آیکونی که ساختهاید داشته باشند یا بتوانند زمان بیشتری را صرف کشف معنای هرکدام از آیکونهای شما کنند، یک تصور اشتباه جدی است.
کاربران اغلب از رابطهای بصری ناآشنا میترسند. چیزی که کاربران واقعاً میخواهند یک ایده روشن از اتفاقی است که پس از فشردن یا کلیک روی آیکون طراحی شده توسط شما، خواهد افتاد. آیکونهای شما باید قبل از کلیک کردن یا فشردن انتظارات واضحی را برای کاربران تعیین کنند.
راههای متفاوتی برای اندازه گیری تجربه کاربری خوب وجود دارد و یکی از آنها این است که چقدر کاربر را از فکر کردن روی انتخابهایش رها میکند. وضوح (Clarity) مهمترین ویژگی یک رابط کاربری عالی است. برای جلوگیری از ابهاماتی که ممکن است برای هر آیکون یا نمادی رخ دهد، میتوانیم یک برچسب متنی اضافه کنیم تا معنی آیکون را به خصوص زمانی که کارکرد انتزاعی داشته باشد، روشن کنیم.
وقتی آیکونها به تنهایی کافی هستند
خب حالا که همه کاربران با معنای آیکونها آشنا نیستند، بنابراین استفاده یک رابط کاربری از تعداد زیادی آیکون فقط کار را برای آنها سختتر میکند. از طرف دیگر، کاربران با تجربهتر ممکن است یک رابط کاربری با تعداد زیادی آیکون که هرکدام یک برچسب متنی را داشته باشند، درهم ریخته و آشفته حس کنند. خب حال چگونه همه را راضی نگه داریم؟
خب به گفته مایکل زولاگ ( یکی از پیشگامان)، زمانی که حداقل دومورد از سه شرط زیر براورده شود، آیکونها به تنهایی کافی هستند :
- فضا بسیار محدود باشد (یعنی برای جا دادن یک متن توضیحی فضای کافی نداشته باشیم)
- آیکونها استاندارد باشند ( مثلاً آیکونهای جهانی)
- آیکونها اشیاء یا عملیاتهایی را با آنالوگ فیزیکی قوی یا ویژگی بصری واضح نشان بدهند( مثلاً یک مستطیل قرمز برای قرمز کردن بکگراند یا یک علامت خطر برای کاری که عواقب خطرناکی دارد)
از پیامهای ناخواسته و پاپآپ ها پرهیز کنید
بعضی از طراحان براین باورند که توضیحات متنی با هدف آیکونها در تضاد هستند و رابط کاربری را پیچیده یا آشفته میکنند. برای اجتناب از استفاده بیش از حد از برچسبهای متنی، از نوشتههای روی آیکونها یا برچسبهای پاپآپ استفاده میکنند. با این حال، اینها ابزارهای ضعیفی برای جایگزینی هستند. این واقعیت که برچسبهای متنی به هیچ وجه به رعایت نکات گرافیکی نیاز ندارند، نکته بسیار خوبی است که به ما نشان میدهد یک متن توضیحی بهتر از آیکون است.
یک راه دیگر که طراحان برای مفهومتر شدن آیکونهای خود میروند استفاده از صفحه راهنما (Tutorial Screen) است.
با این حال ممکن است کاربران از این صفحه به سرعت بگذرند، یا برای استفاده مجدد همه چیزهایی که در صفحه آموزش اولیه گفتهشده را فراموش کنند. معمولاً گفته میشود که استفاده از این صفحه در یک برنامه در حقیقت نشان دهنده شکست طراحان UI شما است.
آیکونها و برچسبهای دکمهای
آیکونهای که برچسبهای توضیحی همراه هستند و دریافت اطلاعات را آسانتر میکنند تا زمانی که در جای مناسب قرار بگیرند این نیاز را تامین میکنند. بنابراین باید به یاد بسپارید که آیکونها را طبق ترتیب خواندن بقیه متن و به صورت طبیعی در رابط کاربری خود قرار دهید. دو عامل مهم در تعیین موقعیت یک آیکون وجود دارد:
- برای اینکه آیکونهای شما به عنوان یک کمک بصری برای کاربران عمل کنند، کاربران باید قبل از دیدن اطلاعات و برچسب همراه آنها خود آیکون را ببینند. آیکون خود را در سمت چپ متن قرار دهید تا کاربران ابتدا آیکون را ببینند.
- آیکون را با متن و برچسب متنی خود آیکون و نحوه نمایش آن، تراز کنید. هیچ وقت آیکون را در جای تیتر یا وسط متن قرار ندهید. اینکه کاربران اول آیکون را ببینند به آنها کمک میکند تا صفحه را زیباتر ببینند.
مراقب استفاده از آیکونهای همبرگری باشید
سه خط افقی توپر (مشهور به آیکون همبرگر) تبدیل به یک آیکون قراردادی برای دکمه منوی اصلی به خصوص در ورژن موبایلی وبسایتها شده است. با این حال هنگام تصمیمگیری درمورد استفاده از آیکون همبرگری دو عامل مهم را در نظر بگیرید:
- تستی که توسط جان راندال طراحی شده، ارتباطی را بین شناسایی صحیح عملکرد آیکون همبرگری و سن کاربران نشان میدهد. این آیکون برای کاربران مسن چندان آشنا نیست. بنابراین قبل از استفاده از این آیکون باید از خود بپرسید که اکثریت کاربران شما چه کسانی هستند.
- تحقیقات گروه نیلسون-نورمن نشان داده که آیکون همبرگر هنوز برای وضوح بیشتر نیاز به یک برچسب متنی دارد. تحقیقات دیگری نشان داده است که آیکون همبرگر هنوز به اندازه کلمه "منو" واضح نیست. بنابراین استفاده از کلمه "منو" و طراحی آن شبیه به یک دکمه میتواند هنوز مفید باشد.
طراحی آیکون با بیشترین بهرهوری
هنگام طراحی عناصر یک رابط کاربری، مثل آیکون باید کاربردی بودن آن را بررسی کنیم. در اینجا بهرهوری بالا به عنوان یک مفهوم مهم مورد نظر است، این کلمه اساساً به این معنا است که عناصری مثل آیکون باید بصری باشند و در عین حال کاربرد پذیری بالایی داشته باشند:
• آیکونها را ساده و شماتیک نگه دارید
در اغلب مواقع، آیکونها جایی برای خلاقیتهای اضافه ندارند. اگر یک لوگو یا آیکون جدید طراحی میکنید، جزئیات بصری را باید به حداقل برسانید و با تمرکز بیشتر بر ویژگیهای اصلی آیکون خود از ساختن بر مبنای یک تصویر واقعی اجتناب کنید. جزئیات گرافیکی کمتر به تشخیص بهتر کمک میکند. اگر مجبور به انتخاب بین دو آیکون هستید ساده تر را انتخاب کنید
• آیکون آشنا را انتخاب کنید
درک کاربر از یک نماد بر اساس تجربیات قبلی است. اگر تصمیم دارید آیکونی را در رابط کاربری خود قرار دهید، ابتدا تحقیق کنید. با آیکونهایی که توسط رقبای شما استفاده میشود و آیکونهایی که معمولاً در همه پلتفرمها استفاده میشوند آشنا شوید. زیرا در نهایت این آیکونها برای کاربران بیشتر قابل تشخیص خواهند بود.
• آیکونها را خاص همان پلفترم نسازید
همانطور که برنامه خود را برای Android یا IOS میسازید باید بدانید که عناصر یک رابط UI هم در بسیاری از پلتفرمها یکسان هستند. معمولاً همه پلتفرمها مجموعهای از یکسری آیکونها را برای عملیاتهای رایج دارند، مانند اشتراک گذاری، یا گزینه حذف چیزی (معمولاً یک سطل آشغال)، ولی باید به خاطر داشته باشید هنگامی که برنامه خود را به پلتفرم جدیدی میبرید نیاز به بازبینی و شاید تغییر آیکونها برای مناسب سازی آنها با پلتفرم جدید را دست کم نگیرید.
آیکونها را به یک هدف لمسی برای برنامههای موبایلی تبدیل کنید
آدمها با استفاده از انگشتان خود با صفحههای لمسی موبایلها ارتباط برقرار میکنند. بنابراین دکمهها و کنترلرها در یک رابط کاربری موبایلی باید به اندازهای بزرگ باشند که تحرکات نوک انگشتان را بدون ثبت حرکات ناخواسته و کلیکهای کوچک ثبت کنند. تصویر زیر نشان میدهد که عرض انگشت بزرگسالان به طور متوسط 11 میلی متر است، در حالی که پهنای انگشت نوزاد 8 میلی متر و انگشتان برخی از بسکتبالیستها بیشتر 19 میلی متر است!
اندازه توصیه شد برای اهداف در یک صفحه لمسی 7 تا 10 میلیمتر است. با هم توصیههای اپل و گوگل برای پلتفرمهایشان را مرور کنیم:
- اپل حداقل اندازه هدف را 44 × 44 پیکسل توصیه می کند.از آنجایی که اندازه پیکسل فیزیکی بر اساس تراکم صفحه نمایش متفاوت است، مشخصات پیکسلی نمایشگرهای اپل به بهترین وجه برای نمایشگر 3.5 اینچی 320 × 480 آیفون اعمال می شود.
- گوگل توصیه می کند که اهداف لمسی حداقل 48 × 48 پیکسل مستقل از چگالی (DP) باشند.هدف لمسی 48 × 48 DP منجر به اندازه فیزیکی حدود 9 میلی متر، صرف نظر از اندازه صفحه نمایش می شود.
اما نهتنها اندازه هدف لمسی مهم است، بلکه فضای کافی بین دکمههای لمسی نیز اهمیت دارد. دلیل اصلی حفظ حداقل فاصله بین دکمهها یا اشیاء لمسی، جلوگیری از لمس آیکون اشتباه توسط کاربران و انجام عملیات اشتباه است. زمانی که آیکونهایی مثل "ذخیره" و "حذف" درست در کنار یکدیگر قرار بگیرند اهمیت این قضیه حتی بیشتر میشود. توصیه میشود حداقل 2 میلی متر فضا بین اهداف لمسی در یک رابط کاربری مبتنی بر موبایل وجود داشته باشد.
اگر به دنبال راهنمایی های بیشتر و مطالب عملی تر در طراحی آیکون برای اپلیکیشن ها موبایلی هستید توصیه می کنیم مقاله: چند توصیه عملی برای طراحی آیکون اپلیکیشن را مطالعه کنید.
آیکونهای خود را تست کنید
آیکونها باید به دقت استفاده شوند. همیشه آنها را از نظر قابلیت استفاده آزمایش کنید. نحوه تعامل یک کاربر واقعی وقتی که برای اولین بار با آیکون ساخته شما کار میکند را زیرنظر بگیرید، این به شما کمک میکند تا بفهمید آیا آیکونهای شما به اندازه کافی خوب و واضح هستند یا خیر.
• آیکونها را از نظر قابلیت مفهوم بودن تست کنید
از کاربران بپرسید که به نظر آنها آیکونها چه چیزی را نشان میدهند، کاربران نباید از عملکردی که پس از فشردن یک آیکون رخ میدهد تعجب کنند.
• آیکونها را از نظر قابلیت ماندگاری در حافظه تست کنید
آیکونی که به خاطر سپردن آن سخت باشد، معمولاً ناکارآمد است. تعدادی از کاربران آزمایشی خود را تست کنید و از آنها بپرسید آیا معنای آیکونی که چند هفته پیش دیدهاند را به خاطر میآورند یا نه.
فواید یک طراحی آیکون خوب
مزایای زیادی در یک آیکون خوب نهفته است. برخی از آنها عبارتند از: تشخیص سریع؛ یک آیکون معمولی ولی به یادماندنی می تواند معنی خودش را بلافاصله منتقل کند و گاهی اوقات آیکون ها با مخاطبان خود پیوندهای احساسی فراتر از یک رابطه طرح-مخاطب، پیدا می کنند.
از مزایای دیگر می توان به مفهوم یادآوری اشاره کرد. وقتی افراد یاد می گیرند چه عملکردی با یک آیکون مرتبط است، تکرار آن آیکون در دیگر پلتفرم ها هم به ضرورت تبدیل می شود چون به کاربران کمک می کند تا کارهای خود را سریعتر و موثرتر انجام دهند. با این حال معمولاً توصیه می شود که برچسب های متنی را روی هر آیکون حتی آیکون هایی که مشهور و به اصطلاح "جهانی" هستند نیز قرار دهید. یک فایده دیگر برچسب متنی می تواند این باشد که در صورت بارگذاری نشدن کامل تصویر آیکون یا بروز مشکلات فنی می تواند برای کاربران نقش جایگزین را بازی کند.
آیکون هایی که تصویر و متن را با هم داشته باشند می توانند یک هدف برای طراحی های مخصوص رابط کاربری های لمسی باشند.
همچنین یک آیکون با یک طراحی عالی به تقویت برند و شخصیت کلی محصول شما کمک می کند. آیکون هایی که با محصولات شما مطابقت داشته باشند، بازخورد آنها را افزایش می دهند. در حقیقت لینک ها و دکمه های بدون آیکون هم همین کار را انجام می دهند اما به کمک رنگها، فونت ها و ...
به یاد داشته باشید که یک آیکون خوب باید راحت دیده شود، به راحتی قابل لمس یا کلیک باشد و در ذهن کاربران به یاد بماند. برای اطمینان از عالی بودن طراحی آیکون خود به عنوان یک طراح یک چک لیست از موارد ضروری که باید در طراحی آیکون لحاظ کنید، را داشته باشید. پس از طراحی آیکون مطمئن شوید که همه آن نکات را رعایت کرده باشید.
نتیجه گیری
طراحی آیکون در قلب طراحی UI قرار دارد. میتواند استفاده از یک رابط کاربری را دلپذیر کند یا تجربه اعصاب خردکنی را برای کابر به جا بگذارد. هر آیکون باید هدفی را دنبال کند. در نهایت هدف استفاده از آیکونها این است که به کاربر کمک کنند تا کاری که میخواهد انجام دهد بدون نیاز به تلاش اضافی انجام دهد. هنگامی که آیکون به درستی طراحی شود، کاربران را به طور مستقیم برای انجام کارهایشان هدایت میکند. کاربران خود را به فکر کردن وادار نکنید و وضوح و همه فهم بودن آیکون را در اولویت قرار دهید.
ما در فروشگاه وبسایتمان آرشیوی از بهترین آیکون های طراحی شده را برای شما گردآورده ایم ، اگر به دنیای آیکون ها علاقه مند هستید پیشنهاد می کنیم سری به آنها بزنید.
۱ نظر در “نکتههایی برای طراحی آیکون”
سلام خسته نباشید اقا واقعا با مقاله های سایتتون خیلی انس گرفتم. هر شب یکی رو میخونم
این مقاله برام جالب بود که متناسب با انگشت هر فرد ایکون طراحی میکنن
خسته نباشید پر قدرت ادامه بدید حمایتتون از سمت من تضمینه