اگر در حال طراحی رابط هایی برای سیستم عامل های دیجیتال هستید، پیکسل ها، لگو شما هستند. شما بخش‌های مختلفی از رابط را می سازید و کنترل کاملی روی هر پیکسل دارید. طرح هایی که ایجاد می کنید نیز به عنوان پایه ای که محصول نهایی بر روی آن ساخته می شود عمل می کنند. بنابراین مهم است که مطمئن شوید طرح های شما با پیکسل هایی (واحدهای دقیق و تکرارپذیری که می توانند با ثبات و بدون خطا تکثیر شوند.) که از آن ها ساخته شده اند تناسب دارند.
به دلایل مختلفی ممکن است طرح‌های ما در نهایت تنها نیمی از پیکسل ها را داشته باشند اما در ادامه چند نکته را با هم مرور خواهیم کرد که می توانند به شما کمک کنند هنگام کار با پیکسل ها در Sketch، طرح هایی تمیز و با پیکسل های درست و کامل داشته باشید.
چند اصل اولیه
هرگز نباید تعمداً به سراغ نیم پیکسل ها بروید ( نیم‌پیکسل‌ها به هیچ وجه واقعاً وجود خارجی ندارند). یک خط افقی یا عمودی به نیم پیکسل نیاز ندارد و نباید نیم پیکسل داشته باشد. سراغ خطوط روشن و تمیز بروید.
اگر نیم‌پیکسل‌ها وجود خارجی ندارند پس چرا در Sketch وجود دارند؟
Sketch (و ابزارهای دیگر) در بردار و همچنین bitmap کار می کنند. نیم پیکسل‌ها با کاهش شفافیت یک پیکسل کامل شبیه سازی می شوند. آن‌ها از نیم پیکسل ها برای محاسبه تاری برای ایجاد گوشه ها و لبه های نرم تر استفاده می کنند، مثلا‌‌‌ً هنگام کشیدن قطرها.
پس بزن بریم…
- “pixel fitting” را فعال کنید.
این باعث می شود که لبه های لایه های جدید شما همیشه بر روی پیکسل های کامل قرار بگیرند. همچنین زمانی که لایه ها را در اطراف حرکت می دهید.
- “show pixels” را به نوار ابزار اضافه کنید.
از این موارد به تناوب استفاده کنید تا مطمئن شوید که لایه های شما با یکدیگر به پیکسل هم تراز شده اند.
- “show pixel grid” را روشن کنید.
هنگامی که شما بیشتر از یک سطح مشخصی (۸۰۰٪ به هنگام نوشتن) بزرگ‌نمایی می کنید، یک شبکه پیکسل بر روی صفحه ظاهر می شود که در مشخص کردن “نیم پیکسل” ها بسیار مفید است.
- هیچ وقت با ماوس تغییر اندازه ندهید.
تغییر اندازه را همیشه با Inspector انجام دهید.
- برای حرکت دادن لایه ها از Inspector استفاده کنید.
اگر مجبور به حرکت یک لایه با ماوس هستید، با استفاده از صفحه کلید کار را به پایان برسانید تا مطمئن شوید که همه چیز درست تراز شده است. - هر زمان که مقیاس می کنید، حواستان به پیکسل ها باشد.
از مقیاس بندی به درصد اجتناب کنید، مگر اینکه ۲۰۰٪، ۳۰۰٪ و… باشد. (در مضارب ۱۰۰ مقیاس بندی کنید.) - هنگام تراز کردن لایه ها با استفاده از ابزار Align در Inspector، مراقب باشید.
هنگام ایجاد آیکن، بسیار توجه داشته باشید که خطوط وزن زوج با فضاهای زوج و سایر اشکال با عرض زوج تراز می‌شوند. خطوط وزن فرد با فضاهای فرد هم‌تراز هستند.
- هرگز از مرزهای “مرکزی” استفاده نکنید مگر اینکه واقعا لازم باشد.
مانند هنگام کار با آیکون های خیلی خیلی کوچک. حتی بعد از آن نیز پیش نمایش در اندازه واقعی داشته باشید و سعی کنید لبه های تیز روشن بگیرید.
- از ابزار خط اجتناب کنید و به جای آن از مستطیل استفاده کنید.
ابزار خط می تواند نقاط مبدا شما را در نیم پیکسل (یا حتی پیکسل های کسری) قرار دهد.
- از ابتدا همه آیکن‌ها را در یک گرید بسازید.
از ابتدا همه آیکون ها را در محدوده جعبه‌ها در یک گرید ایجاد کنید. با این کار اطمینان حاصل خواهید کرد که در میان چیزهای دیگر به مسائل و مشکلات هم‌ترازکردن بر نخواهید خورد. - در حال حاضر، از مرزهای خارجی که پیش فرض مرزهای داخلی هستند دوری کنید.
این به طور کلی به این دلیل است که مرزهای بیرون در طرح در هنگام تراز شدن و ایجاد سمبل ها نادیده گرفته می شوند.
- اجتناب از میانبرهای “round pixels”
شما هیچ کنترلی بر شکل یا تراز واقعی ندارید. - هیچ وقت از خط یک پیکسلی با سایه مات ۰٫۵ استفاده نکنید.
قالب های پیش فرض Sketch UI از این خاصیت استفاده می کنند.
فقط آگاهی از نحوه کار پیکسل ها برای جلب توجه شما به پیکسل‌هایتان کافی خواهد بود. امیدوارم موارد فوق بتوانند به شما در داشتن طرح‌هایی تمیز با پیکسل‌های درست و کامل کمک کنند.
منبع: medium