سمك وسمك الأيقونات. Sketch Pro ، وميزات التقديم ولعبة بسماكة الخط

في هذه المقالة ، سنقوم بتحليل الفروق الدقيقة في تصدير أيقونات المتجهات من الحزم الرسومية. على الرغم من حقيقة أن الأيقونات الموجهة تم تشغيلها بنجاح لأكثر من عام واحد ، لا تزال هناك مواقف مؤسفة يكون فيها عرض الأيقونات غير صحيح: سمك الخطوط سيرقص ، أو يظهر التمويه ، أو تختفي الشرائح ، أو العكس - ستظهر الشرائح حيث كانت الزوايا الحادة متوقعة.

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




كقاعدة ، تظهر التشوهات على الرموز في الحالات التالية (ومجموعاتها):

1. عناصر رقيقة (بكسل واحد) (إما تصبح ضبابية أو تنقطع الخطوط أو يصبح الخط أحادي البكسل غامقًا جدًا).
2. تملأ مناطق التعبئة تلك المناطق التي كان من المفترض أن تكون فارغة في التصميم.
3. يبدو الرمز جيدًا على شاشة Retina ، ولكنه سيئ للغاية - عند توصيل شاشة خارجية. من الواضح أن انخفاض الجودة على الشاشات غير الشبكية أمر لا مفر منه ، ولكن في بعض الحالات ، يتجاوز "البيكسلون" حدود الخير والشر.

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

المهملات في ملف SVG والمحسنات

إذا فقدت الرموز أثناء التفريغ جزءًا من الخطوط ، فقم بتدويرها وتحللها إلى مكونات - فمن المنطقي أن ننظر داخل ملف SVG. هذه ليست مشكلة للمبرمجين: التنسيق نفسه هو ملف XML بهيكل واضح إلى حد ما ومجموعة من الأوامر لتقديم المحتوى. في كثير من الأحيان ، بالنسبة للحالات البسيطة ، باستخدام هذا الرمز ، يمكنك فهم ما تم "حفظه" الحزمة "الرسومية" بالضبط عند الحفظ. على سبيل المثال ، لرؤية القيم الكسرية ، حيث من الواضح أنه لا يجب أن تكون. أو مسارات إضافية. أو بعض القمامة. قم بتحرير ملف SVG يدويًا - مهنة للهواة ، وليس لديه أي آفاق. ولكن غالبًا ما يكون من الممكن فهم الخطأ الذي حدث في الملف المصدر بالضبط.

عند العمل مع حزمة Sketch + Zeplin الكلاسيكية ، فإن مشكلة "القمامة" في ملفات SVG لا تختفي فحسب ، بل يمكن أن تسوء أيضًا. النقطة هي كيف يقوم Zeplin بتشغيل رمز ملف svg من خلال المحسن المدمج. إذا حكمنا من خلال الرمز الذي يولد ، فمن المحتمل أن يتم استخدام SVGO .

بالمناسبة ، يمكن أن تكون هذه المكتبة في كثير من الأحيان سبب الرموز المعطلة في مراحل لاحقة ، على سبيل المثال ، عند بناء المشاريع عبر webpack (وبشكل أكثر تحديدًا ، image-webpack-loader ، الذي يستخدم بالفعل SVGO في المستوى الأدنى). يمكن أن تبقى القمامة ، ولكن يمكن التخلص من العناصر المهمة. إذا واجهت فجأة مشكلة في الرموز المعطلة ، فيمكنك أولاً محاولة إزالة المحسن ومعرفة ما إذا كان قد تم حل المشكلة.

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

قارن الرمز - أسفل الرمز الذي تم تنزيله من Sketch ، حتى أقل - من الإصدار عبر الإنترنت من Zeplin. يمكن ملاحظة أنه في الحالة الثانية ، كانت أجزاء من الرمز مفقودة:




وإليك ما يبدو عليه:

يتم تنزيل الرمز الأول مباشرة من Sketch ، والثاني من الإصدار عبر الإنترنت من Zeplin ، والثالث هو ما يجب أن يكون

أخطاء التقديم

لسوء الحظ ، ليس فقط المصمم أو حزمة الرسومات أو المُحسّن هو المسؤول عن الأيقونات الملتوية. اعتمادًا على البرنامج المسؤول عن العرض ، يمكن أن تكون النتيجة مختلفة تمامًا. هناك أيضًا أخطاء مزعجة ، على سبيل المثال ، في عرض متصفح Chrome لمنع التعرج للخطوط أحادية البكسل - المشكلة معروفة منذ عام 2016 على الأقل ، ولكن لا يوجد حتى الآن حل (أكتوبر 2018). سيء جدا!

القيود واختراق الحياة في النضال من أجل نقاء الأيقونات

ثم جمعنا عددًا من النصائح والقيود واختراق الحياة التي تساعد إما على حل المشكلات تمامًا مع العرض أو على الأقل تحقيق نتيجة لائقة.

1. لا تقم بتحويل عناصر الرمز

لمزيد من التحولات مع الرمز (التحجيم ، الدوران على طول المحور أو الانعكاس أفقياً / رأسياً) ، تظهر المزيد من سمات المسار (أو ببساطة سلسلة من النقاط) في رمزها. المزيد من المسارات - على الأرجح أنه بعد التحسينات عند العرض بواسطة المتصفح ، ستبدو الرموز ملتوية.


بدلاً من أيقونة "المجموعات" - شيء يشبه النقطة الخامسة

2. تحويل العناصر والنص من المتجه إلى المخططات (التحويل إلى المخططات)
ودمج كل الطبقات مع العناصر في واحد (دمج الأشكال)

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

3. قاعدة منع الحمل: قم بتسمية كل رمز - فريد

قاعدة واضحة للمبرمجين. لسوء الحظ ، يمكن تعطيله من قبل المصممين عديمي الخبرة أو قذرة للغاية. إذا كان اسم أحد الرموز يتطابق مع رمز آخر ، فيمكن ل Sketch دمجها في كائن واحد. للراحة ، فكر مسبقًا في نظام تسمية معقول. على سبيل المثال ، قد يحتوي الاسم على التنسيق popup-icon-close ، حيث تكون النافذة المنبثقة هي الكتلة حيث سيتم استخدام الرمز ، الرمز هو الرمز نفسه ، والإغلاق هو ما يعنيه هذا الرمز. يمكنك أيضًا في نهاية اسم الملف إضافة حجمه - على سبيل المثال ، 16x16.

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

4. تثبيت SVGO Compressor مباشرة في Sketch

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

5. حدد الأيقونات عند التصدير يدويًا وقم بتعيين خاصية التصدير إليها.

خلاف ذلك ، قد يتم فقد قطعة من الرمز مرة أخرى أثناء التصدير.

6. قم بإلغاء تحديد الخيار "تضمين في التصدير" في الخلفية

خلاف ذلك ، يتم تصدير الرمز مع خلفية بيضاء حولها.

7. إذا فشل كل شيء آخر: لكل حجم - الرمز الخاص به

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

إذا قمت بإنشاء رمز وفقًا لهذه القواعد السبعة ، فسيكون التصدير ناجحًا حتى من خلال المكوّن الإضافي Zeplin. ولكن حتى إذا حصلت على مصدر svg جميل للأيقونة ، ولا ينهار الرمز ولا يتشوه عند عرضه في المتصفح ، فهذا لا يضمن أن كل شيء سيكون على ما يرام على الشاشات ذات الكثافات المختلفة.

لنفترض أنك راجعت كل شيء للحصول على شاشة Retina على جهاز MacBook. حاول توصيل شاشة خارجية متوسطة أو أكثر. على الأرجح ، سوف تكون خطوط 1 بكسل ضبابية. رياضيات بسيطة: إذا قمت برسم خط بسماكة 1 بكسل في منتصف مربع 4 × 4 بكسل ، عند عرضه ، فسوف يقع الخط بين البكسل والضبابية. إذا لم يتم تحديد سمك الخط بواسطة عدد صحيح - نفس الشيء.

مزيد من المعلومات حول هذه المشاكل هنا . كخيار لحل المشكلة - قوالب الرموز للتطبيقات من Bjango : سحرها هو أنها تأخذ على الفور مواصفات Android و iOS و macOS و tvOS و watchOS و Windows و Windows Phone وما إلى ذلك. يمكنك استخدامها على الأقل كمرجع. يتوفر المزيد من المعلومات حول قائمة المواصفات للأجهزة المختلفة في Google Device Metrics - يمكنك معرفة حجم الشاشة وكثافة البكسل وحتى المسافة التقريبية التي تقع فيها الشاشة من أعين المستخدم. وهناك شيء آخر سيساعد في التغلب على المشكلة وهو دليل المصمم حول DPI و PPI . سيساعدك على تعلم المزيد من التفاصيل الدقيقة والتقنيات العملية للمصممين على Android و iOS.

كيف:




كيف لا:




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



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

تصدير الرموز (التقارب ، المصور ، إلخ.)

نظرًا لأن الحظر على تحويل الكائنات إلى Sketch يستغرق الكثير من الوقت لرسم جميع العناصر بشكل كئيب ، فمن الملائم أكثر بالنسبة لبعض المصممين رسم الأيقونات ، على سبيل المثال ، في Affinity ، ثم تحميلها إلى Sketch.

كل شيء بسيط للغاية:

1. تجعل رموز التقارب على شبكة بكسل! كل نفس الشيء: بحيث لا يكون هناك ضبابية في الحدود بسبب الأخطاء في الشبكة.
2. حدد الرمز في Affinity وانسخ إلى Sketch.
3. هناك احتمال أن يختلف الحجم في Sketch في بضع وحدات بكسل - ثم يجب عليك استخدام أداة Scale لأحجام الحجم المطلوبة ، والتحقق من أن أحجام الخطوط وسمكها لا تزال صحيحة.
4. تحويل العناصر والخطوط إلى حدود خارجية. تحقق من الحجم والموضع مرة أخرى.
5. دمج الطبقات.
6. اضبط الخاصية Make exportable وحدد الرمز على لوح الرسم.
7. تصدير - voila ، لديك ملف svg المثالي بمسار واحد يتصرف بشكل متوقع.

الاستنتاجات

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

حظا سعيدا!