آیکون گرافی چیست

 

آیکون گرافی چیست

‌آیکون‌ها قسمت‌های کوچک البته اساسی پیاده سازی می باشند.

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

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

به همین دلیل دیجیتال مارکتینگ باید بسیار از آیکون گرافی ممنون باشد!

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

دانش پیاده سازی و پردازش آیکون‌ها را با عنوان آیکون گرافی میشناسیم.

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

ارکان اساسی در آیکون گرافی

۱. شبکه/ Grid

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

به هرکدام از سلول‌های صفحه‌ی گرید، پیکسل گفته می شود. پیکسل کوچک‌ترین واحد هرتصویر میباشد.

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

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

کانال پیکسلی، یک کانال مهم میباشد که از کوچکترین واحد یعنی پیکسل به کار گیری می نماید.

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

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

دلیل به کار گیری از شبکه پیکسل صرفا زیبایی نیست، این کانال همه چیز را ساده‌تر می‌نماید.

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

در فیگما میتوانید وضعیت کانال پیکسلی خاموش و روشن را بایکدیگر مقایسه نمائید.

۲. رنگ

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

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

البته اجازه بدهید تاکید کنیم چیزی که با سه رنگ یا بیشتر پیاده سازی گردد، تصویر میباشد نه آیکون! ۳. اندازه

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

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

برای مثال درصورتی که پایه گرید شما ۸ باشد، شما بایستی آیکون‌هایتان را در اندازه‌های ۱۶، ۲۴ و ۳۲ (مضرب‌های ۸) بسازید.

در نهایت هر سایزی که برای آیکون خود انتخاب میکنید بهتر میباشد دو پیکسل اضافه هم برای حاشیه‌ها در نظر بگیرید.

۴. Fill یا Stroke ؟ مساله این میباشد!

در مجموع آیکون‌های Fill یا پرشده، امکان تشخیص بالاتری دارا‌هستند. و آیکون ‌های Stroke در تولید جزئییات ریز دست شمارا باز میگذارند.

هنگام تعیین یکی‌از این دو گزینه کلیت پیاده سازی و برند را نیز مدنظر داشته باشید.

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

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

۵. انتخاب مدل و استایل

آیکون‌هایی که پیاده سازی می کنید آینه‌های کوچکی می باشند که نام و‌ نشان برند را منعکس می‌نمایند.

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

آیا قرار است برای یک برند گران قیمت طراحی نمایید؟ آیا یک پیاده سازی انتزاعی ارزش‌های برند شمارا خوب منعکس می‌نماید یا یک پیاده سازی رسمی؟

این وسط ممکن میباشد بعضا آیکون‌های معمولی مثل ضربدر یا منوی همبرگری به نظر شما برای انواع پیاده سازی‌ها یکسان به نظر برسند.

پیشنهاد ما این میباشد که پیاده سازی را از آیکون‌های پیچیده‌تری آغاز نمایید و براساس آن ها استایل تعیین فرمائید.

تصویرسازی در آیکون گرافی چیست

برای ساخت و ساز یک تصویر که منعکس کننده مفهومی باشد، باید به موارد پایین دقت نمایید:

۱. اشکال هندسی

برای این که بتوانیم آنچه که می بینیم را به ساده‌ترین صورت ممکن به تصویر تبدیل کنیم به اشکال هندسی نیاز داریم.

اشکال هندسی اصلی که عموما با آنها تصویرسازی میکنیم دایره، مربع و مثلث میباشند

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

که به طور کامل با دایره پیاده سازی گردیده‌است.

۲. اشکال ارگانیک

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

برای پیاده سازی اشکال ارگانیک میتوانید از فیگما کمک بگیرید.

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

۳. گوشه‌ها

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

گاهی موردنیاز است کناره‌های مربع و مستطیل‌ها را با استفاده از Radius آنان گرد کنیم.

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

با ابزار Inspector میتوانید با به کارگیری از خصوصیت Corner Radius گوشه‌ها را گرد فرمایید.

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

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

۴. تشبیه

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

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

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

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

۵. پرسپکتیو

برای نشان دادن یک تصویر به صورت سه‌ بعدی از پرسپکتیو استفاده میکنیم.

این عمل از نظر تئوری در آیکون گرافی شدنی میباشد البته باید توجه نمایید که نباید اغراق آمیز باشد.

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

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

۶. تایپ

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

یعنی مردم مخاطبان با هر زبان و فرهنگی که آن را ببینند، بدانند که چه مفهومی را نشان می دهد.

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

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

به عنوان مثال در حالتی که قرار است نوشته‌ای در کاغذ را نشان بدهید (مثل آیکون گوگل) یک حرف خیلی گویا را نشان بدهید تا مطمئن گردید دیدن آن سبب سردرگمی مخاطب شما نشود.

ابزارهای مطلوب برای آیکون گرافی چیست

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

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

ابزار Figma قابلیت و امکان‌های متعددی برای پرداختن به جزییات آیکون را ارائه نموده است.

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

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

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

مقصود از آیکون گرافی چیست ؟

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

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

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

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

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

از شلوغی صفحه دوری می‌نمایند.

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

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

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

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

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

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

۵. برتری نسبت به متن

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

اهمیت آیکون گرافی در پیاده سازی UI

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

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

تصاویر و آیکون ها توجه بیشتری نسبت به متن جلب می‌نمایند و از این نظر نیز دارای اهمیت می‌باشند.

 

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

۱.آیکون های تازه پیاده سازی نکنید و آیکون های سابق و آشنا را به کار گیری فرمائید چون تشخیص آنان سریعتر خواهد بود.

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

۳.آیکون ها بایستی به سرعت تشخیص داده شوند براین اساس از آیکون هایی به کارگیری نمائید که برای کاربران آشنا می باشند.

۴.در آیکون گرافی از به کار گیری آیکون قلب و ستاره بپرهیزید چون چندین معنای گوناگون را منتقل می‌نمایند.

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

۶.در آیکون گرافی این قانون را به یاد داشته باشید در صورتیکه استفاده کننده در کمتر از ۵ ثانیه کارایی آیکون را تشخیص نداد، آن آیکون بی‌تاثیر میباشد.

۷.آیکون ها بایستی به صورت بصری عملکرد و مقصود را تعریف نمایند به این ترتیب آن ها را معمولی، معنادار و آشنا پیاده سازی فرمائید.

۸. برای حفظ خوانایی و ضربه زدن آسان بر روی موبایل، دست کم ۱ سانتی متر مربع از اطراف فاصله بگذارید.

۹.توجه نمایید که آیکون ها در یک برگه یا یک نرم‌افزار با هم، هم‌خوانی داشته باشند.

۱۰.از شکل ها و یا رنگ های متمایز برای آیکون ها به کار گیری فرمائید که به راحتی قابل تشخیص باشند.

۱۱. برچسب توضیحی برای آیکون ها قرار دهید که زمان کلیک،در بخش پایین و یا این که سمت راست آیکون نمایش داده گردد.

۱۲.به خاطر داشته باشید یک آیکون عالی، نیازی به استفاده از برچسب توضیحی ندارد و به راحتی شناخته می شود.

۱۳.آیکون فقط باید یک منظور و مقصود را منتقل نماید.

۱۴.آیکون‌ها را معمولی پیاده سازی نمائید.

۱۵.فرمت آیکون‌ها ico میباشد.

جمع‌بندی

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

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

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