ترفند هاکامپیوتر و اینترنت

آشنایی با اصول طراحی آیکون و آموزش طراحی

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

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

هفت قانون طلایی طراحی آیکون

در این قسمت 7 قانون طلایی طراحی آیکون به طور کامل توضیح می دهیم.

1. حواستان به شبکه باشد!

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

آیکون خانه در شبکه پیکسلی

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

2. اولین نگاه به اطراف

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

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

3. جزئیات

ما دائم در حال بالا و پایین کردن آیکون ها در صفحات کوچک هستیم مثل قابلیت اسکرول (نوار زبانه) در گوشی ها. همانطور که می دانید هر چیز کوچکی با مشکل از دست رفتن جزئیات رو به رو است. بنابراین ما باید از قبل برای انواع جزئیات استراتژی داشته باشیم تا به آسانی از وضوح آیکون ها در اندازه های کوچک اطمینان پیدا کنیم.

4. سازگار باشید

در طراحی آیکون همه آن ها یکسان به نظر نمی رسند اما ویژگی های بصری مشابهی دارند که آن ها را مرتبط می کند. مثلا اگر برای یک آیکون از گوشه های تیز استفاده شده، همه آیکون ها باید به همین شکل باشند. بنابراین سبک، سطح جزئیات، اندازه و مقیاس باید در همه آیکون ها مشابه و سازگار باشد.

5. فاصله ها

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

6. تست کردن

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

7. ساخت آیکون با اشکال ساده

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

طراحی یک آیکون به صورت عملی و گام به گام

کار را با طراحی آیکون دوربین با استفاده از نرم افزار SKETCH شروع می کنیم. البته نرم افزار های دیگری نظیر FIGMA هم وجود دارد که می توانید از آن استفاده کنید. اگه سر در گم هستید که کدام یک از این دو نرم افزار بهتر است می توانید آن ها با هم مقایسه کنید (مقایسه Figma و Sketch).

گام اول: با موضوع آشنا شوید

برای شروع باید ببینیم دوربین چه شکلی دارد که ساده ترین راه این است که در گوگل عبارت “دوربین” را جست و جو کنیم. من در سرچ گوگل به نتایجی که در تصویر زیر می بینید رسیدم:

نتایج جست و جوی عبارت دوربین در گوگل

همانطور که می بینید دوربین ها اشکال مختلفی دارند، با این حال چند ویژگی مشترک دارند که عبارت است از:

  1. یک عدسی بزرگ در وسط بدنه
  2. فلش
  3. دکمه ای که با فشردن آن عکس می گیریم

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

گام دوم: آن را بشکنید

در مرحله بعد باید به دنبال اشکال ساده (دایره، مربع، مثلث، مستطیل) در تصویر دوربین باشیم. که با یک بررسی ساده موارد زیر را داریم:

  1. بدنه دوربین را با مستطیل طراحی می کنیم.
  2. لنز دوربین را با دایره می توان طراحی کرد.
  3. دکمه را هم می توانیم با یک مستطیل کوچک طراحی کنیم.

گام سوم: ساخت آیکون را آغاز می کنیم

برای شروع در هر نرم افزاری که کار می کنید، یک شبکه پیکسلی 24*24 پیکسل رسم می کنیم و نام فایل را “آیکون دوربین” قرار می دهیم و شبکه پیکسلی را فعال می کنیم. فضای کاری شما باید چیزی شبیه به تصویر زیر باشد:

شبکه پیکسلی خالی

اکنون اشکال ساده ای که در بالا فهرست کردیم را در این صفحه پیکسلی رسم می کنیم و به شکل زیر می رسیم :

آیکون دوربین در شبکه پیکسلی

با ترکیب اشکال ساده شما می توانید به سادگی با استفاده از عملیات Boolean کار خود را انجام دهید. می توانید به این آیکون جزئیات بیشتری اضافه کنید، مثلا برای لنز که با یک دایره نمایش داده شده می توانید دایره دیگری داخل آن رسم کنید.

گام چهارم: تست

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

گام پنجم: مرتب کردن

قبل از این که آیکون خود را نهایی کنید، هر نقطه را دوباره بررسی کنید.

گام ششم:EXPORT

آیکون خود را ذخیره کرده و به اشتراک بگذارید.

سخن پایانی

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

منبع: careerfoundry.com

نمایش بیشتر

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا