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

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

طرحی که در نهایت به اتفاق خواهیم ساخت

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

1. آی چیست؟

ریشه یونانی کلمه آی

طبق گفته گوگل این کلمه از ریشه یونانی “eikόn” گرفته شده و به این شکل تعریف می شود:

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

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

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

2. چرا از آی ها استفاده می‌کنیم؟

از نظر تاریخی اولین مجموعه از آی های رایانه ای تقریبا 37 سال پیش تصویرسازی شد. هنگامیکه یک دانشمند علوم کامپیوتر، به نام David Canfield Smith به طراحی به نام Norman Lloyd Cox که درحال کار روی GUI (رابط کاربری گرافیکی) Xerox Star 8010 بود، پیوست. وظیفه آنها تسهیل تعامل کاربر با ماشین بود. آنها به شکلی خلاقانه با معرفی نمادهای گرافیکی که بازتاب دهنده اشیای دنیای واقعی بودند و کاربر می‌توانست بین این دو ارتباط برقرار کند، این کار را انجام دادند.

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

تسهیل کننده تعامل

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

تسهیل تعامل با رابط کاربری به واسطه آی ها

از بین برنده موانع زبانی

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

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

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

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

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

چشم نواز اما تفکر برانگیز

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

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

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

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

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

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