10 نصائح لتصدير أصول المتجهات من Sketch إلى Android

مزايا المتجهات إلى خطوط المسح واضحة. إن أصول المتجهات أصغر ، ويمكن تحريرها بسهولة ، كما أنها أسهل في إدارتها (خاصة من حيث الحجم واللون).

أعمل على تطبيق معقد نسبيًا يدعم العديد من المنصات المختلفة. نظرًا لتزايد أحجام الشاشة ودقة الوضوح (نظرًا إليك ، Nexus 6P) لنظام Android ، شعرنا أنه من الضروري تحديث الأصول الحالية من تنسيقات نقطية إلى متجهات للحفاظ على قابلية تطوير الأصول نظرًا للحاجة إلى دعم مختلف القرارات.

تم إنشاء معظم الأصول التي نستخدمها حاليًا باستخدام Sketch. تسبب هذا في بعض المشاكل المثيرة أثناء محاولة التحويل. نظرًا لأن أصول المتجه مدعومة جزئيًا من قبل Android في واجهة برمجة التطبيقات الحالية (Android 24) ، فإن الأصول التي تم تصديرها قد قطعت بعدة طرق غير متوقعة.

يُعد هذا بمثابة مذكرات استقصائية من وجهة نظر المصمم ، وذلك لعدة أشياء تعلمناها أثناء محاولة تحويل جميع الأصول النقطية في التطبيق إلى متجهات لنظام Android. لم تكن أدلة مستخدم Android Studio مفيدة بشكل خاص عندما يتعلق الأمر باستكشاف الأخطاء وإصلاحها.

ليس تماما

العديد من القواعد المكتوبة هنا خاصة بتصدير أصول المتجهات باستخدام Sketch. ومع ذلك ، فهي أيضًا إرشادات جيدة لتصدير أصول المتجهات النظيفة والوظيفية للاستخدام عبر جميع الأنظمة الأساسية.

1. يبقيه بسيط غبي

ينطبق هذا المبدأ الأساسي لتصميم البرامج على الأصول أيضًا: كلما كانت الأشكال أبسط كلما كان ذلك أفضل. جرب واستخدم أشكالًا بسيطة لإنشاء الأصول المعقدة التي تحتاج إليها. القاعدة العامة للإبهام ، هي استخدام عدد أقل من المسارات والمراسي ، و "أنظف" هو عليه. يفضل استخدام شكل واحد دائمًا استخدام أشكال متداخلة متعددة لإنشاء أصل.

2. تجنب استخدام الأقنعة

لا يتم دعم الأقنعة المصنوعة باستخدام Sketch بواسطة الإصدار الحالي من Android API. يتم تجاهل أي أقنعة مصنوعة في Sketch بواسطة Android VectorDrawble (AVD) ، وفي بعض الأحيان تتعطل الأقنعة المصنوعة في Sketch Adobe Illustrator. إذا كان هناك موقف تحتاج فيه إلى إنشاء تأثير تظليل ، فيجب استخدام شكل متداخل أعلى الطبقة الحالية لصالح الأقنعة.

استخدم عملية باثفايندر

3. جعل الخطوط العريضة ، وليس السكتات الدماغية

في الحالات التي يكون فيها ذلك ممكنًا ، حاول تجنب استخدام الحدود لإنشاء الأشكال المطلوبة. السكتات الدماغية لا تتغير دائمًا بشكل صحيح مع بقية الصورة. بالإضافة إلى ذلك ، لا يميز AVD بين المواضع الحدودية المختلفة ، ويتعامل مع جميع الحدود على أنها ضربات "مركزية".

ما يعنيه هذا هو أن الحدود الداخلية للسمك 10 على Sketch تصبح مركزًا للسماكة 20 عند عرضها على AVD.

نظرًا لأن الأشكال الخارجية هي أشكال ، فإنها تظهر دائمًا المظهر المرغوب عند تغيير حجمه أو تحويله. كما أن العمل مع المخططات أسهل بكثير إذا كنت ترغب في تطبيق عمليات باثفايندر.

يمكنك بسهولة تغيير الحدود إلى حدود خارجية باستخدام CMD + Shift + O.

4. باثفايندرز هي صديقك

يمكن إنشاء معظم الأشكال المعقدة من تركيبة من الأشكال الأكثر بساطة باستخدام عمليات مستكشف المسارات. تعرف عليهم. يمكن عرض الأشكال التي تم إنشاؤها بهذه الطريقة بشكل صحيح على كل جهاز.

5. Adobe Illustrator هو أفضل مستكشف الأخطاء ومصلحها

يعرض Adobe Illustrator أصول المتجهات بنفس طريقة VectorDrawable لنظام Android (من تجربة قصصية). إذا لم تظهر مادة العرض بشكل صحيح في AVD ، فحاول تشخيص المشكلة باستخدام Illustrator. في كثير من الأحيان يكون الحل بسيطًا مثل إزالة التعبئة فقط.

مشكلة شائعة لتصدير الأصول لنظام Android باستخدام Sketch.

6. قد لا تظهر الأشكال المدمجة والمحوّلة كما تبدو

لا يتم دعم التحويلات مثل الانعكاسات والتدويرات التي يتم إجراؤها في Sketch بشكل كامل في Android VectorDrawable. نتيجةً لذلك ، لا تظهر الطبقات المحولة دائمًا بالطريقة التي تتوقعها بها. الحل الأسهل لهذا سيكون فقط تسوية كل مسار له تحول ، لذلك يصبح التحول جزءًا من المسار.

ومع ذلك ، في المواقف التي يتم فيها تطبيق التحويلات على مجموعات بأكملها ، فإن الطريقة الوحيدة لحل هذه المشكلة هي تحويل كل طبقة على حدة ووضعها يدويًا.

7. الشفافية هي صديقك ...

يتم دعم الشفافية بشكل صحيح وعرضها في جميع الأجهزة والأنظمة الأساسية ، واستخدامها لإنشاء الظلال / الإبرازات عند الاقتضاء.

لاحظ انخفاض الظل تحت شريحة لحم

8. ... والتدرجات ليست كذلك

من ناحية أخرى ، AVD لا يدعم التدرجات حاليًا. من شبه المؤكد أن الأصول التي تحققت بهذه الطريقة ستتحطم أثناء الاستيراد. يجب استخدام تظليل Cel لصالح تقنيات التظليل المتدرج.

إسقاط الظل تحت شريحة لحم يختفي

9. تصدير اللوحات الفنية ، وليس الطبقات

يعد استخدام المربع المحيط في Sketch لتحديد أبعاد الأصل المتجه أحد أساليب المدرسة القديمة. على الرغم من أنها لا تزال طريقة صالحة لتحديد حدود تصدير المتجهات ، إلا أن الطريقة الأفضل هي إنشاء لوحة فنية لها نفس أبعاد إطار العرض الذي تحاول تعريفه. يتم التعامل مع طبقة المربع المحيط في الأصل على أنها مسار منفصل ، ولكنه شفاف عند ترجمته إلى VectorDrawable xml.

10. وسوف تسطيح الأشكال حل معظم المشاكل

تحتوي الأصول المصدرة على بيانات وصف تصف التحولات والتراكيب أثناء تحريرها ، لأن هذا يخبر المستخدمين بـ "كيف" تم إنشاؤه. ومع ذلك ، عندما يتعلق الأمر بتصدير هذه الأصول وتقديمها ، فإن هذه المعلومات الدخيلة حول كيفية تكوينها غالبًا ما تسبب مشكلات أكثر مما تحل (لا يتم دعم التدوير والانعكاسات المنجزة في Sketch) ، بالإضافة إلى زيادة حجم الملف.

الحالة النهائية للأصل هي الشيء الوحيد الذي يتم عرضه ، وهكذا في هذه الحالة فقط ظهور الحالة النهائية أمر مهم.

تسطيح شكل سيجعل التحويلات وعمليات باثفايندر إلى الأصل. هذا يقلل من حجم الملف عن طريق إزالة المعلومات القديمة ، ويسمح لك بمعاينة الصورة بدقة.