بعد از ۱۰ سال استفاده از فتوشاپ، و ۶ سال استفاده از آن برای طراحی رابط کاربری اپلیکیشن و وبسایت، تصمیم گرفتم از اسکچ استفاده کنم. ممکن است خنده دار به نظر برسد، اما این تصمیم سختی بود، چون فتوشاپ برای من مثل قلم مو برای نقاش یا چوب درام برای درامر بود.
بعد از شش ماه استفاده دائم از اسکچ امیدوارم هیچوقت مجبور نشوم برای طراحی رابط کاربری از فتوشاپ استفاده کنم. اینها دلایل من هستند:
طراحی وکتور بیس
با اسکچ، دیگر نیاز نیست به تراکم صفحه ها فکر کنید. کافیست یک آرت بورد به اندازه مناسب (مثلا ۶۴۰*۳۶۰ برای اندروید) بسازید، مهم نیست صفحه رتینا باشد یا تلویریون سامسونگ، اسکچ بقیه کار ها را برایتان انجام میدهد. به یاد دارم زمانی فایل های فتوشاپ با حجم هایی مثل ۵۰۰ مگابایت و رزولوشن ۱۹۲۰×۱۰۸۰ داشتم، زیرا باید مطمئن میشدم میتوانم طراحی را در رزولوشن مورد نیاز تحویل دهم و طرح ها موقع زوم کردن کیفییت خود را حفظ کنند. بعد از مدتی به تقسیم سایز فونت ها و حاشیه ها به ۲ (در ios) و یا ۳ (android) برای استفاده در کد نویسی عادت کردم، اما این کار همیشه زمان بر بود و احتمال اشتباه در ان وجود داشت. احساس میکردم این روند کار شامل مراحل اضافی و مزاحم بود، چون فتوشاپ بر اساس پیکسل کار میکند و برای طراحی رابط کاربری، به خصوص موبایل، ساخته نشده.
تغییر اندازه تکست باکس ها با اضافه شدن متن
وقتی یک لایه متنی در فتوشاپ ایجاد میکنید و بیشتر از میزانی که ارتفاع آن به شما اجازه میدهد،به آن متن اضافه میکنید، یا باید سایز پاراگراف را تغییر دهید یا خودتان دستی متن را تنظیم کنید. اسکچ بدون هیچ دخالتی از جانب شما، تکست باکس را بزرگتر میکند، دقیقا به اندازه لازم، نه کمتر و نه بیشتر.
خصوصیات تکست باکس ها
در اسکچ، حاشیه بالا و پایین متن ها به ارتفاع خط بستگی دارد. برای مثال، یک متن با فونت ۲۰ پیکسل و ارتفاع خط ۳۰ پیکسل، دارای ۵ پیکسل حاشیه در بالا و ۵ پیکسل در پایین است. دقیقا همانطور که در کد html اتفاق میفتد. این ویژگی تاثیر زیادی روی حاشیه های عمودی بین عناصر بالا و پایین متن دارد. فتوشاپ این موضوع را نادیده میگیرد، اما اسکچ نه. این یعنی با اسکچ شما مجبور نیستید حاشیه های بین متن را حدس بزنید. کافیست حاشیه هایی را که در اسکچ میبینید کپی کنید و به توسعه دهنده بدهید. با Zeplin این فرایند آسان تر نیز خواهد شد.
دنیای بزرگ پلاگین ها
تعداد بیشماری پلاگین برای اسکچ عرضه شده. پلاگین هایی که من از انها استفاده میکنم(مثلا dynamic buttons، asset export for iOS and android، palettes، fluid) روند کاریم را بسیار روان تر میکنند. برای هر کسی و هر نوع نیازی پلاگینی وجود دارد که میتواند کارتان را اسان تر کند.برای نصب آسان از Toolbox استفاده کنید.
پلاگین fluid چیدمان شما را انعطاف پذیر میکند
حالا شما میتوانید مقدار ثابتی حاشیه بین عناصر یا درون گروه ها یا آرت‌بورد ها تعریف کنید. به این معنی که اگر محتوا اضافه کنید، کافیست دکمه update را بزنید تا چیدمان شما با آن تغییرهماهنگ شود. دیگر نیازی به مرتب کردن مجدد عناصر بعد از تغییر سایز آنها نیست. یا اگر میخئاهید ببینید طرح شما در صفحه های بزرگتر چگونه دیده میشود، حاشیه چپ و راست را تعیین کنید، سایز آرت‌بوردتان را تغییر دهید و دکمه update را بزنید. نیازی به تغییر عرض عنصر نیست چون به صورت خودکار انجام میشود.فوق‌العادس!
سیمبل جدید قابل ویرایش (درون یک نماد)
حالا شما این قابلیت را دارید که یک سیمبل را درون نماد دیگری بگذارید. یعنی مثلا میتوانید یک سیمبل دکمه یا آیکن بسازید و آن را در هر نماد دیگری قرار دهید. همچنین میتوانید برای نماد ها مقیاس تعیین کنید و در آخر، میتوانید در جای عکس و متن هر نماد، از محتوای دلخواهتان استفاده کنید. این ویژگی‌ها سیمبل‌ها را بیش از قبل کاربردی و منعطف میکند.
استایل متن‌ها به راحتی به کارگرفته میشوند
درست است که فتوشاپ هم این قابلیت را دارد، اما برای من هیچوقت استفاده از آن راحت نبود. در اسکچ بکارگیری استایل متن ها ساده و قابل فهم است. یکی از برتری های اسکچ این است که اگر سهوا یا عمدا، یکی از خواص یک متن که استایل به خصوصی به ان داده‌اید را تغییر دهید، تغییرات روی استایل کلی اعمال نمیشود مگر این که در آن استایل reload را بزنید.
تغییر نام لایه ها با cmd+r به جای دبل کلیک
خنده دار به نظر میرسد اما چون من همیشه از میانبر ها استفاده میکنم، زدن cmd+r خیلی سریع تر از دبل کلیک کردن با قلم یا ماوس روی اسم کوچک لایه است. و تعداد زیاد لایه ها این کار را سخت تر میکند.
سایه ها، گوشه‌های گرد، مرز ها و ویژگی های دیگر
در اسکچ هر ویژگی به راحتی ساخته و اعمال میشود. نیازی به اعمال افکت بر لایه ها نیست. مجبور نیستید از پنجره افکت لایه های فتوشاپ با هزاران تنظیم گیج کننده و اضافی استفاده کنید. همه چیز بر اساس css است. این بسیار خوب است چون شما میتوانید به توسعه دهنده بگویید از چه مقادیر و تنظیماتی در کد خود استفاده کند. یا اگز میخواهید یک توسعه دهنده را خیلی خوشحال کنید، تکه کد css به او بدهید. اجرای نهایی دقیقا شبیه طراحی شما خواهد بود.
حجم کم فایل های اسکچ
نمیدانم شما چقدر فضای ذخیره سازی در اختیار دارید، اما هارد من محدود است. پس خوشحالم که اسکچ باعث میشود نیازی به نگرانی درباره نگه داشتن نسخه های مختلف از فایل های طراحی نداشته باشم. تعداد بسیار زیادی امکانات دیگر وجود دارد که میتوان به انها اشاره کرد.بعد از شش ماه استفاده از اسکچ برای طراحی های بصری که باید تمیز، کامل و ریسپانسیو باشند، اینها ویژگی هایی هستند که من دائما از انها استفاده میکنم (و لذت میبرم) و نمیتوانم طراحی رابط کاربری را بدون انها تصور کنم. قطعا همه چیز بی‌نقص نیست و میتوانستم به قسمت های ازار دهنده اسکچ نیز اشاره کنم، اما موضوع مقاله این نیود. واقعیت این است که اسکچ هرروز بهتر و بهتر میشود. اخرین اپدیت بزرگ عالی بود.اگر bohemian این اپدیت های با کیفیت را ادامه دهد، در آینده هیچ نیازی به فتوشاپ نخواهم داشت.
منبع: meduim.com
