مقالات طراحی تجربه کاربری 21 خرداد 1400 6 دقیقه مطالعه فاطمه سلحشور

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

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

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

آیکون چیست؟

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

آیکون گرافی(icongraphy) چیست؟

آیکون گرافی، زبان بصری و علم طراحی آیکون‌ها است که ویژگی ها، عملکرد‌ها و مفاهیم را بیان می‌کند. آیکون‌ها بوجود آمده اند تا یک مفهوم را در کسری از ثانیه و به‌سادگی منتقل کنند به همین دلیل در بهره‌وری طراحی رابط کاربری(UI design) بسیار تاثیر گذارند.

هدف از آیفون گرافی چیست؟

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

۱.کاهش مدت زمان یادگیری

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

۲.صرفه جویی در فضای صفحه

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

۳.افزایش زیبایی بصری

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

۴.راحتی در استفاده

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

۵.برتری داشتن نسبت به متن

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

اهمیت آیکون گرافی در طراحی UI

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

مقاله‌ی "اهمیت طراحی محصول در رابط کاربری" از دست ندهید.

عناصر اصلی آیکون گرافی

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

۱.خط

عنصر اولیه‌ی هر طراحی را خطوط تشکیل می‌دهند. خطوط باعث تشکیل و تغییر آیکون به بی‌نهایت طرح مختلف می‌شوند و آیکون گرافی را با تنوع همراه می‌کند.

۲.شکل

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

۳.فرم

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

۴.فضا

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

۵.رنگ

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

۶. صفحات شطرنجی

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

۷.اندازه

در آیکون گرافی، اندازه آیکون براساس گرید(grid) صفحه تعیین می‌شود و تمامی آیکون‌های یک صفحه باید به یک اندازه باشند.

بایدها و نبایدهای آیکون گرافی

۱.آیکون های جدید طراحی نکنید و آیکون های قدیمی و آشنا را استفاده کنید زیرا تشخیص آنها سریعتر خواهد بود. ۲.از آیکون ها استفاده کنید تا فضای خالی بیشتری داشته باشید و بتوانید به راحتی از قابلیت ها در نوار ابزار استفاده کنید. ۳.آیکون ها باید به سرعت تشخیص داده شوند بنابراین از آیکون هایی استفاده کنید برای کاربران آشنا هستند. ۴.در آیکون گرافی از استفاده از آیکون قلب و ستاره بپرهیزید زیرا چندین معنای متفاوت را منتقل می‌کنند. ۵.آیکون ها همیشه برای انتقال مفهومی طراحی می‌شوند. از آنها بیش از حد و یا برای زیبایی استفاده نکنید. ۶.در آیکون گرافی این قانون را به یاد داشته باشید اگر کاربر در کمتر از 5 ثانیه کارایی آیکون را تشخیص نداد، آن آیکون بی‌اثر است. ۷.آیکون ها باید به طور بصری عملکرد و هدف را توصیف کنند بنابراین آنها را ساده، معنادار و آشنا طراحی کنید. ۸. برای حفظ خوانایی و ضربه زدن آسان بر روی تلفن همراه، حداقل ۱ سانتی متر مربع از اطراف فاصله بگذارید. ۹.دقت کنید که آیکون ها در یک صفحه یا یک نرم افزار با هم، هم‌خوانی داشته باشند. ۱۰.از شکل ها و یا رنگ های متمایز برای آیکون ها استفاده کنید که به راحتی قابل تشخیص باشند. ۱۱. برچسب توضیحی برای آیکون ها قرار دهید که زمان کلیک،در قسمت زیر و یا سمت راست آیکون نمایش داده شود. ۱۲.به یاد داشته باشید یک آیکون خوب، نیازی به استفاده از برچسب توضیحی ندارد و به راحتی شناخته می‌شود. ۱۳.آیکون تنها باید یک منظور و هدف را منتقل کند. ۱۴.آیکون‌ها را ساده طراحی کنید. ۱۵.فرمت آیکون‌ها ico است.

مقاله‌ی "طراحی مینیمال در UI" را مطالعه کنید.

جمع‌بندی

آیکون گرافی بوجود‌آمد تا مطالب را در سریع ترین زمان و در صریح ترین حالت انتقال دهد؛ پس ساده بودن آیکون ها نقش کلیدی را در آیکون گرافی ایفا می‌کنند. امروزه آیکون گرافی در طراحی رابط کاربری، تجربه کاربر و طراحی محصول نقش عمده‌ای ایفا می‌کند و ما در این مقاله سعی کردیم به طور کامل به چرایی این نکته بپردازیم. در نگارش این متن مقاله از منابع معتبر زیر استفاده شده است: designsystems و uxdesign و hedgehoglabوencyclopedia