طراحان چگونه از سنّت استفاده می‌کنند؟

دیزاین سیستم

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

دیوار هم مثل اکثر محصولات بزرگ دنیا یه دیزاین سیستم داره به اسم «سنّت» که متشکل از کامپوننت‌ها و قواعد استفاده‌شونه. همهٔ تیم‌های محصولی دیوار برای طراحی و توسعهٔ ورتیکال خودشون به سنّت پایبندن.

آشنایی من و سنّت

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

مستندسازی

سنّت هر روز در حال بهتر و بزرگ‌تر شدنه و همهٔ اعضای صنف تجربهٔ کاربر دیوار به رشدش کمک می‌کنن. از یه جایی تو این مسیر تصمیم گرفتیم که بیایم کامپوننت‌ها رو مستند کنیم و این تجربهٔ فوق‌العاده رو با همه به اشتراک بذاریم. بنابراین هر کدوم از ما طراح‌های دیوار قسمتی از کار رو برداشتیم و شروع کردیم به نوشتن.

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

طراحی در دیوار

سادگی مسیر طراحی

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

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

بذارین یه مثال بزنم...
یادمه اون اوایل تو یکی از صفحه‌ها می‌خواستم کنار ردیف عنوان یه عکس اضافه کنم و توضیحات مختصری هم در مورد اون عنوان بنویسم. می‌دونستم که ما تو سنّت یه ردیف عنوان داریم و یه ردیف زیرعنوان. به این حالت:

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

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

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

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

ادامهٔ فرایند

ما بعد از این‌که طراحی‌ها رو انجام می‌دیم، نتیجهٔ کار رو با اعضای تیممون (یعنی تیم فنی، متخصصان دیتا و پژوهشگرها) و در تعامل با مدیرمحصول چک می‌کنیم. در صورتی که توی تیم محصولی همه با نتیجهٔ کار خوشحال باشن، نتیجهٔ نهایی رو با جزئیات کامل مستند می‌کنیم و طرحمون رو برای بازبینی برای مدیر دیزاین می‌فرستیم که طرح رو از نظر جانمایی‌ها و استفادهٔ صحیح از کامپوننت‌های سنّت چک کنه و اگه کامپوننت جدیدی طراحی کردیم، بررسی‌های لازم رو انجام بده، کامپوننت رو به سنّت اضافه کنه و طرح رو روی فلوی اصلی دیوار قرار بده. طرح‌هایی که تائید می‌شن رو با ابزار‌های مختلف مثل Overflow با باقی بچه‌های دیوار به اشتراک می‌ذاریم و با اضافه‌کردنشون به Zeplin، اون‌ها رو به تیم فنی Handoff می‌کنیم.

ابزارهای من (به جز سنّت)

همون‌طور که گفتم من هم مثل بقیهٔ طراح‌ها در دیوار، برای طراحی‌هام از اسکچ استفاده می‌کنم. بعد از تحلیل و حل مسئله باقی کار تو اسکچ انجام می‌شه و به ابزار دیگه‌ای نیاز نداریم. ولی تو خود اسکچ پلاگین‌هایی هستن که باز هم روند انجام کار رو ساده‌تر می‌کنن. مثلاً برای چیدمان لایه‌ها و نما‌ها از Automate و برای تغییر اسم‌هاشون از Instance Renamer استفاده می‌کنیم. همین‌طور اگه تسکی نیاز به تست کاربرد‌پذیری و پروتوتایپ داشته باشه، برای ساختنش از ProtoPie استفاده می‌کنم که ابزار مورد علاقه‌مه.

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

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