چک لیست طراحی آیکون

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

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

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

سه ویژگی مؤثر طراحی آیکون
قبل از هرچیز، برای ساخت هر آیکون سه ویژگی اصلی را در نظر داشته باشید: فرم (form)، وحدت زیبایی شناختی (Aesthetic Unity) و قابل تشخیص بودن (Recognizability)
آیکون‌هایی که به خوبی طراحی شده‌اند، رویکرد هوشمندانه و آگاهانه‌ای نسبت به این سه ویژگی اصلی دارند، هنگام طراحی یک مجموعه آیکون جدید، هر یک از این ویژگی ها را در نظر بگیرید، از یک فرم کلی شروع کرده و به سمت یک فرم خاص و یونیک بروید.

فرم form

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

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

وحدت زیبایی شناسی Aesthetic Unity

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

هنگام طراحی یک اپلیکیشن موبایل، زمانی می‌رسد که شما باید تصمیم بگیرید که آیا می‌خواهید از آیکون‌های توپُر( Solid Icons) استفاده کنید یا آیکون‌های توخالی(Outline Icons). مهرداد افشار در مقاله ای به اینکه کدام سبک برای تجربه کاربر بهتر است؟، پرداخته است.

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

قابل تشخیص بودن Recognizability

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

تا اینجا، ما به سه ویژگی اصلی که در طراحی نمادها مؤثر می‌باشد، پرداخته‌ایم ولی برای اینکه مجموعه آیکون‌های ما این سه ویژگی را داشته باشد، باید اصولی را رعایت کرد که در زیر چک لیستی از موارد اصلی در طراحی آیکون را با هم می‌خوانیم:

۱-شبگه یا گرید GRID

همیشه با یک گرید شروع کنید

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

به عنوان مثال اگر برای UI خود از یک طرح شبکه 8 نقطه ای استفاده می‌کنید ، از اندازه‌هایی که ضریب عدد 8 است برای طراحی آیکون خود استفاده کنید؛ مثل(24* 24 یا 32 * 32). ولی در بعضی موارد الزامی به استفاده از این قاعده نیست و می‌توان آن را نادیده گرفت. در نهایت سایزی که برای ابعاد آیکون خود اختصاص می‌دهید 2 پیکسل بزرگتر در نظر بگیرید و از قرار دادن هر بخشی از نماد در این فضای خودداری کنید‌، مگر اینکه کاملاً ضروری باشد. هدف از این منطقه‌ی بدون حرکت ایجاد فضای تنفس در اطراف آیکون است. که آن را "منطقه بدون حرکت" no-go zone می‌نامند.

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

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

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

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

ماهیت یک نماد تکی، از انسجام کل مجموعه با اهمیت تر است. (Hemmo de Jonge)

۲- با فرم های ساده شروع کنید.

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

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

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

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

۳- پیکسل-پرفکت (Pixel-perfect)

اصل Pixel-perfect زمانی که آیکن در سایز خیلی کوچک مورد استفاده قرار می‌گیرد، اهمیت پیدا می‌کند.

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

با این وجود توجه داشته باشید که Pixel-perfect، برای آیکن در اندازه‌های بزرگتر و در صفحه‌های با وضوح بالاتر، کم اهمیت‌تر است.

۴- وضوح و سادگی:

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

چیزی که یک نماد را برجسته می‌کند این واقعیت است که؛ بدون داشتن یک برچسب متنی می‌توان معنی آن را درک کرد.

چند قانون ساده به شما کمک می کند که از نمادهایی که معنایی را منتقل نمی‌کنند، خودداری کنید:

• سعی کنید از نمادهایی استفاده کنید که برای کاربرانتان آشنا باشد. درک کاربر از یک نماد مبتنی بر تجربه قبلی است. به همین دلیل بهتر است از نمادهای آشنا استفاده کنید تا یک نماد منحصر به فرد.
• به آیکون‌های جهانی تکیه کنید. نمادهایی مانند خانه (home)، چاپ (print) و جستجو (search) آنقدر رایج است که نیازی به توضیحی ندارند.

چرخ را دوباره اختراع نکنید!

حتی تفاوت اندک در ظاهر آیکون، توانایی کاربر برای درک یک آیکون را سخت می‌کند.

برای مدت طولانی، Google Docs از نمادهایی استفاده می‌کرد که تقریباً شبیه همبرگر است. اکثر رابط‌ها برای نشان دادن منوی اصلی ناوبری از یک آیکون مشابه استفاده می‌کنند. اما Google معنای خود را دوباره تعریف کرد و از آن به عنوان عملکرد "Back" استفاده کرد. وقتی کاربران روی این نماد کلیک می‌کنند، آنها به صفحه اصلی Google Docs هدایت می شوند.

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

"مردم هر روز از برنامه ما استفاده می کنند، پس معنای نمادهای ما را یاد خواهند گرفت. "
به چنین عباراتی توجه نکنید.

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

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

معنای نماد را دوبار تعریف نکنید

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

۵-آیکون خود را منحصر به فرد کنید.

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

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

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

۶-در تمام طول طراحی از یک پالت رنگی ثابت استفاده کنید.

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

اصل KISS برای همه عناصر UI از جمله آیکون‌ها کار می‌کند.

کلمه KISS مخفف کلمات جمله‌ی «Keep It Simple, Stupid» به معنی «ساده بیان کنید» است، که پیغام ساده و قدرتمندی را منتقل می‌کند.

۷-با افزودن حرکت در آیکون‌ها برای کاربر لذت ایجاد کنید.

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

۸- سازگار با کل طرح (consistansy)

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

ثبات داخلی

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

نتیجه

در این مقاله سعی داشتم تا اصول اولیه برای ایجاد آیکون‌هایی با کیفیت بالا را به اشتراک بگذارم. این اصول مهارت‌هایی فنی است که هر کسی می‌تواند آنها را با تمرین یاد بگیرد. به یاد داشته باشید که برای ایجاد آیکون‌های بهتر، از کل (فرم) شروع کنید و به سمت جزء (قابل تشخیص) کار کنید. و با توجه به عناصر مشترک (وحدت زیبایی شناختی) آیکون یا مجموعه، نمادهای خود را هماهنگ در داخل مجموعه نگه دارید. پس از دستیابی به اصول فنی، می توانید انرژی خود را روی آنچه که یک آیکون واقعاً متمایز است تمرکز کنید:

چشم انداز خلاق بی نظیر شما.

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

منابع

• https://www.smashingmagazine.com/2016/05/easy-steps-to-better-logo-design/
• https://www.shutterstock.com/blog/tips-designing-consistent-icon-set
• https://medium.com/@andykellbell/8-tips-for-creating-a-consistent-bespoke-ui-icon-set-58b49f0eeb70
• https://uxplanet.org/checklist-for-using-icons-in-ui-acb6dee36e8a
• https://icons8.com/articles/design-icon-set-simple-checklist-graphic-designers/