صفر تا صد طراحی آی | درس دوم

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

3. چگونه یک آی طراحی کنیم

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

3.1 مرحله تحقیق

هر بار که شروع به کار روی یک پروژه جدید مبتنی بر آی ها می کنید، چند جنبه مهم وجود دارد که باید قبل از مراحل واقعیِ طراحی آنرا بفهمید.

من نام این مرحله را «مرحله تحقیق» گذاشته ام، زیرا اساساً تحقیق تمام کاری است که قرار است انجام دهید. شما باید بسته به زمان و شکیبایی که دارید، چند دقیقه یا چند ساعت وقت بگذارید و به دنبال پاسخ به چند سوال اساسی باشید.

مرحله تحقیق در طراحی آی

سوال اول: به چه اندازه هایی نیاز دارید؟

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

باید بدانید آی قرار است کجا مورد استفاده قرار بگیرد و برای استفاده در آن محل به چه اندازه هایی نیاز دارید؟

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

سایز (اندازه) های مختلف آی ها

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

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

آی های کوچک:

• 12 * 12
• 16 * 16
• 24 * 24
• 32 * 32
• 48 * 48

آی های متوسط:

• 64 * 64
• 96 * 96
• 128 * 128
• 256 * 256

آی های بزرگ:

• 512 * 512
• 1024 * 1024

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

دستورالعمل های آی اپل

دستورالعمل های آی گوگل (اندروید)

اندازه پایه شما چه مقدار باید باشد؟

اکیداً توصیه می کنم که هنگام کار روی پروژه های چند اندازه، همیشه از کوچکترین اندازه ی ممکن، کار را شروع کنید. این اندازه به «اندازه پایه» شما تبدیل می شود، که بعدا به منظور ایجاد سایر اندازه ها از آن استفاده خواهید کرد. دلیل این امر ماهیت Pixel-Perfect آی های شماست که در صورت بزرگ ساخته شدن و سپس کوچیک کردن آنها، دچار مشکل می شوند.

هنگامیکه بحث بر سر انتخاب یک مقدار برای «اندازه پایه» یک مجموعه آی می شود، همه چیز به نیاز پروژه بستگی دارد، اما قاعده کلی این است که همیشه باید کوچکترین اندازه ممکن را انتخاب کنید.

اندازه پایه (base-size) آی ها

به عنوان مثال اگر من نیاز به آی با سه اندازه گوناگون (16 در 16، 32 در 32 و 64 در 64) دارم، همیشه اطمینان حاصل می کنم که از 16 در 16 پیکسل به عنوان اندازه پایه خود شروع کنم و سپس موارد دیگر را با دوبرابر کردن آن ایجاد کنم.

ویژگی های اصلی موضوع موردنظر (برای طراحی آی) چیست؟

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

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

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

از کدام سبک استفاده کنید؟

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

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

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

محبوب ترین سبک های امروزی عبارتند از:

• pixel art
• flat
• material
• line art
• isometric
• glyph
• skeuomorphic
• dimensional
• hand-drawn
• animated

سبک ها و استایل های مختلف در طراحی آی

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

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

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

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