چه طور در اسکچ (Sketch) راهنمای سبک (Style Guide)، کتابخانه (library) و ابزار رابط کاربری (UI Kit) بسازیم؟

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

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

ساخت راهنمای سبک (راهنمای استایل) در اسکچ

راهنمای سبک سندی زنده و جامع است که همه‌ی عناصر تکرارشونده‌ی یک پروژه را ثبت می‌کند؛ از قوانین برندینگ گرفته تا میزان مورب کردن دکمه‌های فراخوان یا call-to-action.

UXPin

راهنمای سبک (Style Guide) ممکن است هر چیزی از عناصر ساده‌ی بصری تا کلمات و تصاویر تأیید شده را در بربگیرد. این مطلب آموزشی شامل این بخش‌ها است: سازمان‌دهی (Organization)، رنگ‌ها (Colors)، آیکون‌ها (Icons)، استایل متنی (Text Styles) و Assets.

مرحله‌ی اول: سازمان‌دهی (Organization)

۱. یک فولدر اصلی بسازید تا فایل‌ها، پلاگین‌ها و سایر ابزارهای ضروری –مثل فونت و ایکونوگرافی- را در آن بگذارید. (پلاگین‌ها در پایان این مطلب آموزشی توضیح داده می‌شوند.)

۲. یک فایل جدید اسکچ باز کنید و اسم آن را بگذارید «کتابخانه‌ی  فلانی (اسم مشتری)». مثلاً، اگر مشتری شما توپال (Topal) است، اسم فایلتان باید «کتابخانه‌ی توپال» باشد.

مرحله‌ی دوم: رنگ‌ها (Colors)

اگر رنگ‌ها از قبل انتخاب شده‌اند، مرحله‌ی بعدی این است که رنگ‌هایتان را به سیمبل‌ها (Symbols) تبدیل کنید.

۱. برای انجام این کار، مربع‌هایی هم‌اندازه بسازید و رنگشان را بر اساس ترتیب پیش‌رو تغییر دهید؛ روی “Create Symbol” کلیک کنید و آن را در مسیر color/@color-name سیستمِ برچسب‌زن (Labeling System) ذخیره کنید.

نمونه‌هایی از برچسب‌های مناسب عبارت‌اند از:

– Color/@pink

– Color/@background-gray

– Color/@FFFFF

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

۲. وقتی کامل شدند، آن‌ها را به صفحه‌ی راهنمای سبک (style guide page) اضافه کنید.

۳. نمونه‌های رنگ را در بخش اسناد پالت رنگتان ذخیره کنید.

مرحله‌ی سوم: آیکون‌ها (Icons)

تبدیل آیکون‌ها به علائم پویا یا سیمبل داینامیک (dynamic symbols) باعث می‌شود بتوانیم به راحتی رنگشان را به هر کدام از رنگ‌هایی که در مرحله‌ی دو ذخیره شده‌اند تغییر بدهیم. این بدین معنی است که بعد از اینکه یک آیکون در طراحی قرار می‌گیرد، می‌توان با استفاده از “Inspector” که در سمت راست بوم قرار دارد، رنگ آن را از طریق یک منوی کشویی ساده به نام “override“، تغییر داد.

۱. آیکون را به عنوان یک سیمبل ذخیره کنید (در صورت امکان برای assetها فقط از تصاویر با فرمت svg. استفاده کنید.)

۲. به صفحه‌ی سیمبل‌ها بروید، آیکون مدنظر را پیدا کرده و آن را با یکی از رنگ‌هایی که قبلاً ذخیره کرده‌اید به صورت پیش‌فرض ماسک (mask) نمایید. برای انجام این کار، رنگ سیمبل را به حالت overlay بر روی آیکون تغییر دهید و در نوارابزار (toolbar) روی Mask کلیک کنید (یا راست کلیک کنید و از منوی پاپ‌آپ Mask را انتخاب کنید.)

۳. بعد از اینکه آیکون به ماسک تبدیل شد، با برداشتن چک مارک یا علامت تیکِ کنار باکس Fill در بخش Inspector، رنگ زمینه را حذف کنید.

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

مرحله‌ی چهارم: سبک‌های متن (Text Styles)

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

body ،H5، H4، H3، H2، H1، کپشن‌ها، برچسب‌ها و غیره. یکی از منابع خوب برای تایپوگرافی وب پست‌های وبلاگ Typecast است.

۱. برای هر تعداد استایلی که لازم است سایز، وزن، کاراکتر، و فاصله‌ی بین خطوط را تعیین کنید.

۲. کلمه‌ای را بنویسید (وقتی T -ابزار متنی- را فشار دهید خود به خود عبارت “Type Something” ظاهر می‌شود) و جزئیات استایلی را که انتخاب کردید روی آن پیاده کنید.

۳. روی “Create new Text Style” کلیک کنید.

۴. استایل‌های متن را در صفحه‌ی راهنمای استایل منظم (سازمان‌دهی) کنید.

مرحله‌ی پنجم: Assets

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

در ادامه چند نمونه Asset پیشنهاد می‌شود:

دکمه‌ها (Buttons)

۱. این سیمبل‌های داینامیک را هم مثل آیکون‌ها ماسک نمایید؛ یعنی دکمه را با رنگ پیش‌فرض بپوشانید و سپس Fill (رنگ زمینه) را از آن حذف کنید.

۲. برای اینکه متن روی دکمه همیشه در مرکز آن باقی بماند، عرض جعبه‌ی متن (Text Box) را درست هم‌اندازه‌ی دکمه گسترش دهید تا با هم یکی باشند.

۳. برای تضمین ثبات و یکپارچگی، مطمئن شوید که از استایل‌های متنی ذخیره شده استفاده می‌کنید.

۴. این عناصر (Elements) را به عنوان سیمبل‌ها ذخیره کنید و از سیستم نام‌گذاری button/button-name استفاده کنید.

۵. برای تغییر لیبل‌ها و رنگ‌ها از فیچر Override استفاده کنید.

نوارهای جستجو (Search Bars)

۱. روی قسمت جستجو، آیکون‌ها، و متنی که در این قسمت استفاده می‌شود محدودیت‌های تغییر اندازه را اعمال کنید.

۲. فراموش نکنید که از استایل‌های متنی و رنگ‌هایی استفاده کنید که قبلاً در پالت رنگ اسنادتان ذخیره شده‌اند.

۳. این المنت را به عنوان یک سیمبل ذخیره کنید و برای عنوان آن از جستجو استفاده کنید یا اگر چند نوع مختلف جستجو دارید، از سیستم‌های برچسب‌گذاری‌ای مثل  search/standard و search/no-icon پیروی کنید.

دکمه‌های رادیویی (Radio Buttons) و چک باکس‌ها (Checkboxes)

۱. ممکن است درون یک سیمبل، سیمبل دیگری داشته باشید و یکی از راه‌های مناسب برای امتحان کردن آن این است که دکمه‌ی رادیویی و ابزار چک باکس هوشمندی بسازید.

۲. ابتدا خود Asset دکمه را بسازید. با استفاده از لیبل یا برچسب‌گذاری‌هایی مثل checkbox/selected و checkbox/deselected این المنت را به عنوان یک سیمبل ذخیره کنید.           

۳. بعد ورودی (Input) را بسازید. کنار علامت چک باکس، متن پلیس‌هولدر (placeholder) را اضافه کنید و بعد تمام این Asset را به یک Symbol تبدیل کنید. از آنجا که حالا این یک Input است، پیشنهاد می‌شود Asset را همین طور ذخیره کنید. بنابراین برچسب مناسب input/checkbox/selected و input/checkbox/deselected خواهند بود.

مرحله‌ی ششم: استفاده از راهنمای سبک! (Style Guide)

انجام همه‌ی این کارها برای ایجاد راهنمای سبک فقط وقتی کارآمد است که واقعاً باعث شود یک پروژه روان‌تر پیش برود. وقتی همه‌ی Asset‌ها ایجاد شدند، وقت آن رسیده که کتابخانه (Library) را روی سندی که طراحی می‌کنیم اعمال کنیم. در اسکچ، به “Preferences -> Add Library…” بروید و سند کتابخانه را اضافه کنید.

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

اگر می‌خواهید یک علامت را به‌روزرسانی کنید، روی خود علامت دو بار کلیک کنید و که با این کار سند (Document) کتابخانه‌ی شما ظاهر شود. بعد از اینکه تغییرات را ایجاد کردید، برگردید سراغ سند طراحی و روی دکمه‌ی به‌روزرسانی در گوشه‌ی راست و بالا کلیک کنید.

نکته‌ی تکمیلی: وارد و خارج کردن (Importing/Exporting) استایل های متنی

استایل‌های متنی در کتابخانه ذخیره نمی‌شوند، اما پلاگین Shared Text Styles اسکچ این مسئله را حل می‌کند. بعد از اینکه پلاگین را دانلود کردید، به داکیومنت یا سند کتابخانه و بعد به منوی زیر بروید:

“Plugins ‐> Shared Text Styles ‐> Export…” 

این فایل را در همان فولدر اسناد کتابخانه‌تان ذخیره کنید. بعد، در سند طراحی‌تان، دوباره به منوی زیر بروید:

“Plugins ‐> Shared Text Styles ‐> Import Text Styles…” 

 و فایلی را که لحظاتی پیش ذخیره کرده‌اید وارد کنید. استایل‌های متنی‌تان ظاهر خواهند شد.

نکته‌ی تکمیلی: وارد و خارج کردن پالت‌های رنگ

مثل استایل‌های متنی، رنگ‌های اسناد در کتابخانه اسکچ ذخیره نمی‌شوند، اما پلاگین Sketch Palettes این مسئله را حل می‌کند. مثل نمونه‌ی بالایی، با استفاده از:

“Plugins -> Sketch Palette -> Document Colors -> Save Palette”

از پالت خروجی بگیرید و آن را در مسیر:

“Plugins -> Sketch Palette -> Document Colors -> Load Palette”

ذخیره نمایید. فراموش نکنید که آن را در همان فولدری که بقیه‌ی اسناد (Documents) کتابخانه را نگهداری می‌کنید، ذخیره نمایید.

نکته‌ی تکمیلی:  فونت‌ها

Craft مجموعه‌ای از پلاگین‌هاست که توسط InVision ایجاد شده و نرم‌افزار اسکچ را نسبت به رقبای خود یک گام جلوتر برده است. با Craft می‌توانید تصاویر را با عکس‌های ذخیره شده (Stock Photos) و پروتوتایپ (Prototypes) و هماهنگ (Sync شده) با InVision، کتابخانه و چیزهای دیگر بسازید. اگر Craft را دانلود کرده‌اید، در داکیومنت روی “cmd-shift-C” بزنید و یک استایل شیت (stylesheet) شروع به کار می‌کند، که با این کار فونت‌ها به این صورت در اینجا فهرست می‌شوند.

دنبال کردن شش مرحله‌ی بالا باعث می‌شود پروژه‌های کوچک و بزرگ طراحی به راحتی پیش بروند و نتیجه‌ی نهایی منظم‌تر باشد. اگر منحصربه‌فرد یا خیلی خاص باشند، راهنمای استایل (Style Guide)، کتابخانه (Library) و ابزار رابط کاربری (UI Kit) را می‌توانید برای یک مشتری استفاده کنید و یا اگر به عنوان رابط‌های کاربریِ استاندارد به صورت دائمی طراحی شده‌اند، مثل وایرفریم‌ها (Wireframes) و پروتوتایپ‌ها (Prototypes)، می‌توان آن‌ها را برای پروژه‌های متعدد نیز استفاده کرد.

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

اصل این متن را Yvette Solorzano نوشته است و در سایت www.toptal.com منتشر شده است.

این مقاله، ترجمه‌ای آزاد از مقاله How to Create a Sketch Style Guide, Library, and UI Kit نوشته Miklos Philips است.