طراحی و ارائه آیکون‌ها برای بیش از ۱۲ میلیون کاربر

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

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

خوانایی

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

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

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

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

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

امضای بلو

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

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

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

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

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

طراحی مداوم

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

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

قواعد طراحی

قواعد طراحی آیکون پک بلو به ما کمک می‌کند که هر فرد مسئولیت طراحی ویژوال را بر عهده داشته باشد و بتواند با سرعت و دقت بالا آیکونی طراحی کند که با سایر آیکون‌ها هم‌راستا باشد. آیکون‌های بلو بانک در یک فضای ۲۴ در ۲۴ پیکسلی طراحی شده‌اند. طراحی در این ابعاد به ما کمک می‌کند از جزئیات بیهوده جلوگیری کنیم و اضافات به سادگی حذف شوند.

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

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

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

پر رنگ تر از همیشه

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

از کیت طراحی تا دیزاین سیستم و ریپوی گیت

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

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

جمع بندی

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

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